/* ============================================================
   VYOMA CORTEX — PRODUCTION UI FIXES v2
   ============================================================
   - Aggressive overflow fixes (bubbles, code, tables, math)
   - ChatGPT-style input area with + menu
   - Mobile compact layout, touch tap targets
   - iOS safe-area + dvh, Android tap-highlight
   - Loaded LAST so its rules win every cascade tie
   ============================================================ */

/* ----- 0. Global safety ------------------------------------- */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

*, *::before, *::after { box-sizing: border-box; }

@supports (height: 100dvh) {
  .h-screen,
  [style*="height: 100dvh"],
  [style*="height:100dvh"] {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
}

/* ----- 1. BUBBLE WIDTH — HARD VIEWPORT CAP ------------------ */
/* The flex-col holding each bubble. Cap by viewport, not just %. */
.flex.flex-col.max-w-\[90\%\],
[class*="flex-col"][class*="max-w-\[90"] {
  max-width: min(90%, calc(100vw - 56px)) !important;
  min-width: 0 !important;
}

@media (min-width: 640px) {
  .flex.flex-col.sm\:max-w-\[80\%\],
  [class*="flex-col"][class*="sm:max-w-\[80"] {
    max-width: min(80%, calc(100vw - 88px)) !important;
  }
}

/* Flex parents: shrink properly */
.flex.flex-col { min-width: 0; }
.flex-1 { min-width: 0; }

/* Bubble inner container */
.rounded-2xl.px-4.py-3 {
  max-width: 100% !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ----- 2. MARKDOWN CONTENT — FORCE WRAP --------------------- */
.markdown-content {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  hyphens: auto;
  min-width: 0;
  max-width: 100%;
}

.markdown-content *,
.markdown-content p,
.markdown-content li,
.markdown-content span,
.markdown-content strong,
.markdown-content em,
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4 {
  max-width: 100%;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* Long URLs / paths must always break */
.markdown-content a {
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
}

/* User bubble (whitespace-pre-wrap) must still wrap long words */
.rounded-2xl p,
.rounded-tr-md p,
.rounded-tl-md p {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  white-space: pre-wrap;
  max-width: 100%;
}

/* Answer / Formula / Tip / Note / Warning cards: cap and shrink */
.markdown-content > div[class*="rounded-xl"],
.markdown-content .flex.items-start {
  max-width: 100% !important;
  min-width: 0;
}

.markdown-content .flex.items-start > div.flex-1 {
  min-width: 0 !important;
  max-width: calc(100% - 28px);
}

/* ----- 3. CODE BLOCKS — scroll inside, not outside ---------- */
.markdown-content pre,
.markdown-content pre > div,
.markdown-content pre code,
.markdown-content [class*="language-"],
pre[class*="language-"] {
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  white-space: pre;
}

.markdown-content pre > div { border-radius: 0 !important; }

.markdown-content :not(pre) > code {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

/* ----- 4. TABLES — scroll horizontally inside bubble -------- */
.markdown-content table {
  max-width: 100%;
  display: table;
}

.markdown-content .overflow-x-auto,
div:has(> table.w-full) {
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ----- 5. KATEX MATH — scroll inside ----------------------- */
.katex-display {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.katex-display > .katex { white-space: nowrap; }

/* ----- 6. IMAGES inside chat fit bubble -------------------- */
.markdown-content img,
.markdown-content > div > img {
  max-width: 100% !important;
  height: auto !important;
}

img { max-width: 100%; height: auto; }

/* ----- 7. ChatGPT-style INPUT AREA REDESIGN ----------------- */

/* Hide original action buttons replaced by + menu */
.vyoma-hidden-original { display: none !important; }

/* Input container — tighter, more compact, ChatGPT-like */
.relative.bg-white.dark\:bg-\[\#1A1D27\].rounded-2xl.border {
  border-radius: 22px !important;
}

/* Textarea — compact padding */
textarea.w-full.resize-none {
  padding: 14px 18px 6px 18px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

@media (max-width: 640px) {
  textarea.w-full.resize-none {
    padding: 12px 16px 4px 16px !important;
    font-size: 16px !important; /* prevents iOS zoom */
  }
}

/* Bottom row — compact, even spacing */
.flex.items-center.justify-between.px-3.pb-3 {
  padding: 6px 10px 8px 10px !important;
  align-items: center !important;
}

@media (max-width: 380px) {
  .flex.items-center.justify-between.px-3.pb-3 {
    padding: 4px 8px 6px 8px !important;
    gap: 4px;
  }
}

/* + button wrap */
.vyoma-plus-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* + button (ChatGPT style — circular, neutral) */
.vyoma-plus-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: #4B5563;
  border: 1px solid #E5E7EB;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
  flex-shrink: 0;
  padding: 0;
}

.dark .vyoma-plus-btn {
  color: #D1D5DB;
  border-color: rgba(255,255,255,0.12);
}

.vyoma-plus-btn:hover {
  background: rgba(124,58,237,0.08);
  color: #7C3AED;
  border-color: rgba(124,58,237,0.3);
}

.dark .vyoma-plus-btn:hover {
  background: rgba(139,92,246,0.18);
  color: #C4B5FD;
  border-color: rgba(139,92,246,0.4);
}

.vyoma-plus-btn:active { transform: scale(0.94); }

.vyoma-plus-btn[aria-expanded="true"] {
  background: rgba(124,58,237,0.12);
  color: #7C3AED;
  border-color: rgba(124,58,237,0.4);
  transform: rotate(45deg);
}

.dark .vyoma-plus-btn[aria-expanded="true"] {
  background: rgba(139,92,246,0.22);
  color: #C4B5FD;
  border-color: rgba(139,92,246,0.5);
}

/* + menu popover */
.vyoma-plus-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  box-shadow:
    0 12px 36px -10px rgba(0,0,0,.14),
    0 4px 12px rgba(0,0,0,.06);
  padding: 6px;
  min-width: 240px;
  max-width: calc(100vw - 28px);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: vyoma-menu-pop .14s cubic-bezier(.22,1,.36,1);
  transform-origin: bottom left;
}

.dark .vyoma-plus-menu {
  background: #1A1D27;
  border-color: rgba(255,255,255,0.10);
  box-shadow:
    0 12px 36px -10px rgba(0,0,0,.55),
    0 4px 12px rgba(0,0,0,.35);
}

.vyoma-plus-menu[hidden] { display: none; }

@keyframes vyoma-menu-pop {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.vyoma-plus-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #1F2937;
  cursor: pointer;
  text-align: left;
  transition: background .12s;
  width: 100%;
  font-family: inherit;
}

.dark .vyoma-plus-item { color: #E5E7EB; }

.vyoma-plus-item:hover { background: #F3F4F6; }
.dark .vyoma-plus-item:hover { background: rgba(255,255,255,0.06); }

.vyoma-plus-item:active {
  background: rgba(124,58,237,0.08);
}

.dark .vyoma-plus-item:active {
  background: rgba(139,92,246,0.18);
}

.vyoma-plus-item[data-mode-active="true"] {
  background: rgba(124,58,237,0.08);
}
.dark .vyoma-plus-item[data-mode-active="true"] {
  background: rgba(139,92,246,0.15);
}

.vyoma-plus-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(124,58,237,0.10);
  color: #7C3AED;
  flex-shrink: 0;
}

.dark .vyoma-plus-icon {
  background: rgba(139,92,246,0.18);
  color: #C4B5FD;
}

.vyoma-plus-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.vyoma-plus-label {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.vyoma-plus-hint {
  font-size: 11px;
  color: #9CA3AF;
  line-height: 1.2;
}

.dark .vyoma-plus-hint { color: #6B7280; }

.vyoma-plus-check {
  width: 16px;
  height: 16px;
  color: #7C3AED;
  flex-shrink: 0;
}

.dark .vyoma-plus-check { color: #A78BFA; }

/* Mode indicator bar (Research/Web Search) — slimmer */
.flex.items-center.gap-1\.5.px-4.py-1\.5.text-\[11px\] {
  padding: 6px 14px !important;
  font-size: 11px !important;
}

/* ----- 8. SIDEBAR: never cover tiny screen ----------------- */
@media (max-width: 380px) {
  .fixed.top-0.left-0.z-50.h-full,
  div.fixed[class*="w-[280px]"] {
    width: min(280px, 85vw) !important;
  }
}

.fixed.inset-0.bg-black\/20.backdrop-blur-sm { z-index: 40; }

/* ----- 9. HEADER + DROPDOWNS clamp to viewport ------------- */
.absolute.top-full.left-0[class*="w-[calc(100vw"] {
  max-width: calc(100vw - 16px);
  left: 0;
}

@media (max-width: 640px) {
  .absolute.top-full {
    max-width: calc(100vw - 16px);
  }
}

@media (max-width: 380px) {
  .px-3.sm\:px-4.py-2\.5 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* ----- 10. CHAT-TOOLBAR scroll horizontally on mobile ----- */
@media (max-width: 480px) {
  .flex.items-center.justify-between.px-4.py-2 {
    padding: 4px 8px !important;
    gap: 4px;
  }

  .flex.items-center.justify-between.px-4.py-2 > .flex.items-center.gap-2:first-child {
    overflow-x: auto;
    flex-wrap: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
    min-width: 0;
    flex: 1 1 auto;
    gap: 6px;
  }

  .flex.items-center.justify-between.px-4.py-2 > .flex.items-center.gap-2:first-child::-webkit-scrollbar {
    display: none;
  }
}

/* ----- 11. iOS keyboard + safe area ------------------------ */
.px-3.sm\:px-4.pb-4.pt-2.shrink-0 {
  padding-bottom: max(0.625rem, env(safe-area-inset-bottom)) !important;
  padding-top: 0.25rem !important;
}

@supports (-webkit-touch-callout: none) {
  textarea, input[type="text"], input[type="search"] {
    font-size: max(16px, 1em);
  }
}

/* ----- 12. DISCLAIMER under input -------------------------- */
.text-center.text-\[11px\] {
  text-wrap: balance;
  padding: 0 0.5rem;
  margin-top: 6px !important;
}

@media (max-width: 380px) {
  .text-center.text-\[11px\] {
    font-size: 10px !important;
  }
}

/* ----- 13. WELCOME HERO on mobile -------------------------- */
@media (max-width: 640px) {
  .grid.grid-cols-2.sm\:grid-cols-2.lg\:grid-cols-4 { gap: 0.5rem; }
  .text-xl.sm\:text-3xl.font-bold.mb-2 {
    font-size: 1.375rem;
    line-height: 1.75rem;
  }
}

@media (max-width: 380px) {
  .text-xl.sm\:text-3xl.font-bold.mb-2 { font-size: 1.25rem; }
}

/* ----- 14. SETTINGS SHEET full-width on phone -------------- */
@media (max-width: 640px) {
  [data-state="open"][role="dialog"],
  [data-radix-dialog-content],
  [data-slot="sheet-content"] {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* ----- 15. BACKGROUND BLOBS contained --------------------- */
.fixed.inset-0 {
  pointer-events: none;
  overflow: hidden;
}

@media (max-width: 640px) {
  .fixed.inset-0 .absolute {
    max-width: 250px !important;
    max-height: 250px !important;
    filter: blur(40px) !important;
  }
}

/* ----- 16. Slick scrollbars (PC) -------------------------- */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(124,58,237,0.35) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

@media (hover: hover) and (pointer: fine) {
  *:focus:not(:focus-visible) { outline: none; }
}

/* ----- 17. ACTION ROW under messages wrap ----------------- */
.flex.items-center.gap-0\.5.mt-1\.5 {
  flex-wrap: wrap;
  max-width: 100%;
}

/* ----- 18. REDUCED MOTION ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----- 19. LANDSCAPE PHONE -------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
  .px-3.sm\:px-4.pb-4.pt-2.shrink-0 { padding: 4px 12px 6px 12px; }
  .text-center.text-\[11px\] { display: none; }
}

/* ----- 20. PC wide read width ----------------------------- */
@media (min-width: 1280px) {
  .max-w-3xl { max-width: 56rem; }
}

/* ----- 21. iPhone notch ----------------------------------- */
@supports (padding-top: env(safe-area-inset-top)) {
  .border-b.border-gray-100.dark\:border-gray-700\/50.bg-white\/80 {
    padding-top: max(0.5rem, env(safe-area-inset-top));
  }
}

/* ----- 22. Tap-highlight off ------------------------------ */
button, [role="button"], a {
  -webkit-tap-highlight-color: transparent;
}

/* ----- 23. AI mode badge & subject selector buttons (mobile) */
@media (max-width: 380px) {
  .flex.items-center.gap-1.px-2.py-1.rounded-lg.text-\[11px\] {
    padding: 2px 6px !important;
  }
}

/* ----- 24. Send / mic buttons — slightly larger tap target  */
.p-2.rounded-xl {
  border-radius: 50% !important;
  padding: 8px !important;
}

@media (max-width: 380px) {
  .p-2.rounded-xl { padding: 7px !important; }
}

/* ----- 25. Selection ------------------------------------- */
::selection      { background-color: rgba(124,58,237,0.22); }
.dark ::selection{ background-color: rgba(139,92,246,0.30); color: #C4B5FD; }

/* ----- 26. Welcome short screen reflow ------------------- */
@media (max-height: 700px) and (max-width: 640px) {
  .flex-1.flex.flex-col.items-center.justify-start {
    justify-content: flex-start !important;
    padding-top: 1rem !important;
  }
}

/* ----- 27. Suggestion chips wrap ------------------------- */
.flex.flex-wrap { flex-wrap: wrap; }

/* ----- 28. Avatar shrink protection ---------------------- */
.shrink-0.w-7.h-7,
.shrink-0.w-8.h-8 { flex-shrink: 0; }