/* Studio Cabrera — custom styles on top of Tailwind CDN */

/* --- App shell --- */
html, body {
  height: 100%;
  /* Use dvh on supporting browsers so address bar collapse on mobile doesn't
     leave a dead band at the bottom. */
  height: 100dvh;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Disable pull-to-refresh on iOS so it doesn't fire when scrolling chat. */
  overscroll-behavior-y: none;
  /* Faster taps on mobile, no 300ms delay. */
  touch-action: manipulation;
}

/* --- Safe-area insets (iOS notch + home indicator) --- */
.safe-top    { padding-top: env(safe-area-inset-top, 0px); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
.safe-left   { padding-left: env(safe-area-inset-left, 0px); }
.safe-right  { padding-right: env(safe-area-inset-right, 0px); }

/* --- View switching --- */
.view { display: flex; }
.view.hidden { display: none; }

/* --- Bottom nav --- */
.nav-btn.active {
  color: #fff;
}
.nav-btn.active svg {
  color: #f97316;
}
.nav-btn:not(.active) svg {
  opacity: 0.8;
}

/* Hide scrollbar in the chat scroll area while still allowing scroll */
#messages {
  scrollbar-width: thin;
  scrollbar-color: rgb(63 63 70) transparent;
}
#messages::-webkit-scrollbar { width: 8px; }
#messages::-webkit-scrollbar-track { background: transparent; }
#messages::-webkit-scrollbar-thumb { background: rgb(39 39 42); border-radius: 4px; }
#messages::-webkit-scrollbar-thumb:hover { background: rgb(63 63 70); }

/* Streaming text caret */
.cursor-blink {
  animation: cursor-blink 1s steps(1) infinite;
}
@keyframes cursor-blink {
  50% { opacity: 0; }
}

/* Auto-wrap long URLs / hashes in tool outputs */
.tool-card pre {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Prose-y feel for assistant text — minimal markdown-as-HTML styling.
   Marked.js emits standard HTML; these rules give it breathing room
   without pulling in @tailwindcss/typography. */
.prose-text {
  word-wrap: break-word;
  color: rgb(228 228 231);
}

/* Block spacing — collapse first/last to avoid leading/trailing gaps */
.prose-text > * { margin: 0.75em 0; }
.prose-text > *:first-child { margin-top: 0; }
.prose-text > *:last-child { margin-bottom: 0; }

/* Paragraphs */
.prose-text p { line-height: 1.55; }

/* Headings */
.prose-text h1, .prose-text h2, .prose-text h3,
.prose-text h4, .prose-text h5, .prose-text h6 {
  font-weight: 600;
  color: rgb(244 244 245);
  line-height: 1.25;
  margin: 1.2em 0 0.5em;
}
.prose-text h1 { font-size: 1.4em; }
.prose-text h2 { font-size: 1.2em; border-bottom: 1px solid rgb(39 39 42); padding-bottom: 0.25em; }
.prose-text h3 { font-size: 1.08em; color: rgb(250 250 250); }
.prose-text h4, .prose-text h5, .prose-text h6 { font-size: 1em; }

/* Inline */
.prose-text strong { font-weight: 600; color: rgb(244 244 245); }
.prose-text em { font-style: italic; color: rgb(228 228 231); }
.prose-text a {
  color: rgb(249 115 22);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose-text a:hover { color: rgb(251 146 60); }

/* Inline code */
.prose-text code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85em;
  background: rgb(24 24 27);
  border: 1px solid rgb(39 39 42);
  border-radius: 4px;
  padding: 1px 5px;
  color: rgb(228 228 231);
}

/* Code blocks */
.prose-text pre {
  background: rgb(9 9 11);
  border: 1px solid rgb(39 39 42);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 0.85em;
  line-height: 1.45;
}
.prose-text pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 1em;
}

/* Lists */
.prose-text ul, .prose-text ol {
  padding-left: 1.4em;
}
.prose-text ul { list-style: disc; }
.prose-text ol { list-style: decimal; }
.prose-text li { margin: 0.3em 0; line-height: 1.5; }
.prose-text li > p { margin: 0.2em 0; }
.prose-text li > ul, .prose-text li > ol { margin: 0.3em 0; }

/* Blockquote */
.prose-text blockquote {
  border-left: 3px solid rgb(63 63 70);
  padding: 0.2em 0 0.2em 1em;
  color: rgb(212 212 216);
  font-style: italic;
}

/* Horizontal rule */
.prose-text hr {
  border: 0;
  border-top: 1px solid rgb(39 39 42);
  margin: 1.5em 0;
}

/* Tables — give them a proper grid look */
.prose-text table {
  border-collapse: collapse;
  width: 100%;
  display: block;
  overflow-x: auto;
  margin: 0.5em 0;
  font-size: 0.9em;
}
.prose-text thead { background: rgb(24 24 27); }
.prose-text th {
  text-align: left;
  font-weight: 600;
  color: rgb(244 244 245);
  padding: 8px 12px;
  border-bottom: 1px solid rgb(63 63 70);
  border-right: 1px solid rgb(39 39 42);
}
.prose-text th:last-child { border-right: 0; }
.prose-text td {
  padding: 8px 12px;
  border-bottom: 1px solid rgb(39 39 42);
  border-right: 1px solid rgb(39 39 42);
  vertical-align: top;
}
.prose-text td:last-child { border-right: 0; }
.prose-text tbody tr:last-child td { border-bottom: 0; }
.prose-text tbody tr:hover { background: rgb(24 24 27 / 0.5); }

/* Mobile tweaks */
@media (max-width: 640px) {
  header h1 { font-size: 0.875rem; }
  #messages { padding-left: 1rem; padding-right: 1rem; }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .cursor-blink, .animate-pulse { animation: none; }
}