/* Minor polish on top of Tailwind utilities. */
:root { color-scheme: dark; }
html, body, #root { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Avoid iOS double-tap zoom on buttons. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Smooth scroll on the message list. */
.msg-scroll { scrollbar-width: thin; scrollbar-color: #2a2d36 transparent; scroll-behavior: smooth; }
.msg-scroll::-webkit-scrollbar { width: 8px; }
.msg-scroll::-webkit-scrollbar-thumb { background: #2a2d36; border-radius: 4px; }
.msg-scroll::-webkit-scrollbar-track { background: transparent; }

/* Pulsing cursor for streaming state. */
@keyframes pulse-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
.cursor-pulse {
  display: inline-block;
  width: 8px;
  height: 16px;
  margin-left: 2px;
  background: currentColor;
  vertical-align: text-bottom;
  animation: pulse-cursor 1s ease-in-out infinite;
  border-radius: 2px;
}

/* Plain-text wrap for message bubbles. */
.bubble-text { white-space: pre-wrap; word-wrap: break-word; line-height: 1.55; }

/* Auto-grow textarea cap. */
textarea.composer { max-height: 200px; }

/* Mic recording pulse — red-glow halo. */
@keyframes mic-pulse-anim {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
.mic-pulse { animation: mic-pulse-anim 1.4s ease-out infinite; }

/* iOS: prevent text-size auto-bump inside the composer. */
textarea.composer { font-size: 16px; }

/* Larger tap targets on mobile. */
@media (max-width: 768px) {
  button, [role="button"] { min-width: 40px; min-height: 40px; }
}

/* Light theme overrides — keep the layout intact, swap surfaces.
 * The app uses Tailwind arbitrary colors like bg-[#0f1115] heavily, so we
 * patch the most common dark tokens here when the root is NOT .dark. */
html:not(.dark) { color-scheme: light; }
html:not(.dark) body { background: #ffffff; color: #18181b; }
html:not(.dark) .bg-\[\#0f1115\] { background-color: #ffffff !important; }
html:not(.dark) .bg-\[\#13151c\] { background-color: #f4f4f5 !important; }
html:not(.dark) .bg-\[\#16181f\] { background-color: #fafafa !important; }
html:not(.dark) .bg-\[\#1a1d26\] { background-color: #f4f4f5 !important; }
html:not(.dark) .bg-\[\#1c3a5f\] { background-color: #dbeafe !important; color: #0f172a !important; }
html:not(.dark) .text-zinc-100 { color: #18181b !important; }
html:not(.dark) .text-zinc-200 { color: #27272a !important; }
html:not(.dark) .text-zinc-300 { color: #3f3f46 !important; }
html:not(.dark) .text-zinc-400 { color: #52525b !important; }
html:not(.dark) .text-zinc-500 { color: #71717a !important; }
html:not(.dark) .border-white\/5 { border-color: rgba(0,0,0,0.08) !important; }
html:not(.dark) .border-white\/10 { border-color: rgba(0,0,0,0.12) !important; }
html:not(.dark) .border-white\/20 { border-color: rgba(0,0,0,0.2) !important; }
html:not(.dark) .hover\:bg-white\/5:hover { background-color: rgba(0,0,0,0.04) !important; }
html:not(.dark) .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,0.08) !important; }
html:not(.dark) .bg-white\/5 { background-color: rgba(0,0,0,0.04) !important; }
html:not(.dark) .bg-white\/10 { background-color: rgba(0,0,0,0.08) !important; }