@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --maverrik-blue: #1882ff;
  --maverrik-blue-hover: #006fe6;
}

/* -------------------------------------------------------------
 * Hardware Antialiasing & Base Typography
 * ----------------------------------------------------------- */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.005em; /* Relaxed from aggressive negative tracking to prevent glyph collision */
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

code, kbd, samp, pre, .font-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: normal;
}

/* -------------------------------------------------------------
 * Smooth Scrollbars
 * ----------------------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.dark * {
  scrollbar-color: #334155 transparent;
}

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

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.dark ::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 9999px;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* -------------------------------------------------------------
 * Markdown Output Formatting (Bumped to Generous 15.5px)
 * ----------------------------------------------------------- */
.markdown-body {
  font-size: 0.975rem; /* ~15.6px for effortless legibility */
  line-height: 1.7;
  color: inherit;
}

.markdown-body p {
  margin-bottom: 0.85rem;
}

.markdown-body p:last-child {
  margin-bottom: 0;
}

.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 {
  font-weight: 700;
  color: inherit;
  letter-spacing: -0.015em;
  margin-top: 1.5rem;
  margin-bottom: 0.65rem;
}

.markdown-body h1 { font-size: 1.35rem; }
.markdown-body h2 { font-size: 1.2rem; }
.markdown-body h3 { font-size: 1.05rem; }

.markdown-body ul {
  list-style-type: disc;
  padding-left: 1.4rem;
  margin: 0.65rem 0 0.85rem 0;
}

.markdown-body ol {
  list-style-type: decimal;
  padding-left: 1.4rem;
  margin: 0.65rem 0 0.85rem 0;
}

.markdown-body li {
  margin-bottom: 0.35rem;
  line-height: 1.65;
}

.markdown-body strong {
  font-weight: 700;
}

.markdown-body hr {
  border: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.25);
  margin: 1.5rem 0;
}

.markdown-body blockquote {
  border-left: 3.5px solid var(--maverrik-blue);
  padding: 0.25rem 0 0.25rem 1rem;
  color: #64748b;
  margin: 1rem 0;
}

.dark .markdown-body blockquote {
  color: #94a3b8;
}

/* Inline Code Snippets */
.markdown-body code:not(pre code) {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875em;
  padding: 0.18rem 0.4rem;
  border-radius: 0.375rem;
  background-color: rgba(24, 130, 255, 0.08);
  color: #0265d2;
  border: 1px solid rgba(24, 130, 255, 0.18);
}

.dark .markdown-body code:not(pre code) {
  background-color: rgba(24, 130, 255, 0.12);
  color: #93c5fd;
  border: 1px solid rgba(24, 130, 255, 0.25);
}

/* Code Container Header */
.code-container pre {
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}

.code-container pre code.hljs {
  padding: 1rem 1.15rem !important;
  font-size: 0.85rem;
  line-height: 1.6;
  background: transparent !important;
}

/* -------------------------------------------------------------
 * Reply Arrival & Typing Animations
 * ----------------------------------------------------------- */
@keyframes replySlideIn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes arrivalGlow {
  0% {
    box-shadow: 0 0 0 2px rgba(24, 130, 255, 0.4), 0 4px 20px -2px rgba(24, 130, 255, 0.2);
  }
  70% {
    box-shadow: 0 0 0 2px rgba(24, 130, 255, 0.2), 0 4px 15px -2px rgba(24, 130, 255, 0.1);
  }
  100% {
    box-shadow: 0 0 0 0px transparent;
  }
}

.animate-reply-arrive {
  animation: replySlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards, 
             arrivalGlow 1.8s ease-out forwards;
}

/* Typing cursor simulation */
.typing-cursor::after {
  content: '▋';
  display: inline-block;
  margin-left: 2px;
  color: var(--maverrik-blue);
  animation: cursorBlink 0.8s infinite;
  font-size: 0.85em;
  line-height: 1;
  vertical-align: baseline;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Maverrik Electric Blue Prompt Flash */
@keyframes promptPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(24, 130, 255, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(24, 130, 255, 0.35);
    transform: scale(1.005);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(24, 130, 255, 0);
    transform: scale(1);
  }
}

.prompt-highlight-active {
  animation: promptPulse 1.2s cubic-bezier(0, 0, 0.2, 1);
  border-color: #1882FF !important;
}

/* ========================================================= */
/* Desktop Sidebar Slide & Collapse Transitions             */
/* ========================================================= */
@media (min-width: 768px) {
  #sidebar {
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    will-change: margin-left, opacity;
  }

  #app-view.sidebar-is-collapsed #sidebar {
    margin-left: -18rem; /* 18rem = w-72 */
    opacity: 0;
    pointer-events: none;
  }

  #app-view.sidebar-is-collapsed #sidebar-expand-btn {
    display: flex !important;
  }
}
/* v1.4.3.3 - Accessible and responsive GFM table rendering */
.mav-answer-surface { min-width: 0; }
.markdown-body { min-width: 0; overflow-wrap: anywhere; }
.mav-table-scroll {
  max-width: 100%; overflow-x: auto; overflow-y: hidden;
  margin: 1.1rem 0 1.3rem; border: 1px solid #dbe3ef;
  border-radius: 12px; background: #fff; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.dark .mav-table-scroll { border-color: #334155; background: #0f172a; }
.mav-table-scroll:focus-visible { outline: 2px solid #1882ff; outline-offset: 2px; }
.markdown-body .mav-table-scroll table {
  border-collapse: separate; border-spacing: 0;
  width: 100%; min-width: 460px; max-width: none;
  font-size: .85rem; line-height: 1.5; white-space: normal;
}
.markdown-body .mav-table-scroll th,
.markdown-body .mav-table-scroll td {
  text-align: left; padding: .7rem .85rem; min-width: 112px;
  vertical-align: top; overflow-wrap: break-word; word-break: normal;
  border-bottom: 1px solid #e2e8f0; border-right: 1px solid #edf2f7;
}
.markdown-body .mav-table-scroll tr > :last-child { border-right: 0; }
.markdown-body .mav-table-scroll tr:last-child > * { border-bottom: 0; }
.markdown-body .mav-table-scroll th {
  font-weight: 750; color: #0f172a; background: #eff6ff;
}
.markdown-body .mav-table-scroll tbody tr:nth-child(even) { background: #f8fafc; }
.dark .markdown-body .mav-table-scroll th { background: #1e293b; color: #e2e8f0; }
.dark .markdown-body .mav-table-scroll th,
.dark .markdown-body .mav-table-scroll td { border-color: #334155; }
.dark .markdown-body .mav-table-scroll tbody tr:nth-child(even) { background: #151f31; }
/* Generated follow-ups are deliberately outside the sanitized answer Markdown. */
.mav-followups { border-top: 1px solid #e2e8f0; margin-top: 1.15rem; padding-top: .9rem; }
.dark .mav-followups { border-color: #334155; }
.mav-followups-label { margin: 0 0 .55rem; color: #64748b; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dark .mav-followups-label { color: #94a3b8; }
.mav-followups-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.mav-followup-btn {
  max-width: 100%; text-align: left; white-space: normal; cursor: pointer;
  padding: .56rem .78rem; border-radius: 10px;
  border: 1px solid #bfdbfe; background: #eff6ff; color: #075db1;
  font: inherit; font-size: .8rem; line-height: 1.4; font-weight: 600;
  transition: border-color .15s, background-color .15s;
}
.mav-followup-btn:hover, .mav-followup-btn:focus-visible { border-color: #1882ff; background: #dbeafe; outline-offset: 2px; }
.dark .mav-followup-btn { background: #162948; border-color: #315b8e; color: #bfdbfe; }
.dark .mav-followup-btn:hover, .dark .mav-followup-btn:focus-visible { background: #1e3a61; border-color: #60a5fa; }
@media (max-width: 550px) {
  .mav-followups-choices { flex-direction: column; }
  .mav-followup-btn { width: 100%; }
  .markdown-body .mav-table-scroll table { min-width: 430px; }
}

.mav-table-scroll-hint { margin: -.9rem 0 1.1rem; font-size: .73rem; color: #64748b; font-weight: 650; }
.dark .mav-table-scroll-hint { color: #94a3b8; }

/* v1.4.3.4 — richer, semantic answer presentation.  Styling only: AI output
   remains sanitized Markdown; no content is hidden or rewritten. */
.mav-message-row { max-width: 56rem; }
.mav-message-row .mav-answer-surface { width: 100%; max-width: 100%; min-width: 0; }
.mav-answer-surface .markdown-body { font-size: .955rem; line-height: 1.74; }
.mav-answer-surface .markdown-body > :first-child { margin-top: 0; }
.mav-answer-surface .markdown-body > :last-child { margin-bottom: 0; }
.mav-answer-surface .markdown-body h1 {
  font-size: clamp(1.3rem, 1.1rem + .55vw, 1.62rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.3;
  margin-top: 1.65rem; margin-bottom: .9rem;
}
.mav-answer-surface .markdown-body h2 {
  font-size: 1.13rem; font-weight: 800;
  padding-bottom: .45rem; margin-top: 1.7rem; margin-bottom: .9rem;
  border-bottom: 1px solid #dbe4ef; line-height: 1.4;
}
.dark .mav-answer-surface .markdown-body h2 { border-bottom-color: #344155; }
.mav-answer-surface .markdown-body h3 {
  font-size: 1rem; font-weight: 750; margin-top: 1.25rem; margin-bottom: .5rem;
  color: #205b9c;
}
.dark .mav-answer-surface .markdown-body h3 { color: #9ecbff; }
.mav-answer-surface .markdown-body h4 { font-size: .95rem; font-weight: 750; margin-top: 1.15rem; }
.mav-answer-surface .markdown-body p { margin-bottom: .9rem; }
.mav-answer-surface .markdown-body ul,
.mav-answer-surface .markdown-body ol { margin: .8rem 0 1.05rem; padding-left: 1.45rem; }
.mav-answer-surface .markdown-body li { padding-left: .15rem; margin-bottom: .52rem; }
.mav-answer-surface .markdown-body li::marker { color: #2381e8; font-weight: 800; }
.mav-answer-surface .markdown-body li > p { margin-bottom: .25rem; }
.mav-answer-surface .markdown-body a { text-underline-offset: 3px; overflow-wrap: anywhere; }
.mav-answer-surface .markdown-body hr { margin: 1.4rem 0; }

/* A coaching question is visually different from its supporting explanation. */
.markdown-body p.mav-rich-question {
  background: #eff6ff; border-left: 3px solid #1882ff;
  padding: .7rem .85rem; border-radius: 0 9px 9px 0;
  color: #0c3768; font-weight: 700;
}
.dark .markdown-body p.mav-rich-question { background: #12233c; color: #cfe5ff; }
.markdown-body p.mav-rich-score {
  display: block; padding: .7rem .85rem; border: 1px solid #cbd5e1;
  border-radius: 10px; background: #f8fafc; font-weight: 650;
}
.dark .markdown-body p.mav-rich-score { background: #162236; border-color: #3c4c65; }
.markdown-body p.mav-rich-score-needs-work { border-left: 4px solid #d97706; }
.markdown-body p.mav-rich-score-strong { border-left: 4px solid #15803d; }
.markdown-body p.mav-rich-highlight { padding: .75rem .9rem; background: #f1f5f9; border-radius: 10px; }
.dark .markdown-body p.mav-rich-highlight { background: #1a2a3f; }
.markdown-body p.mav-rich-subheading { font-size: 1.02rem; font-weight: 750; margin-top: 1.25rem; margin-bottom: .55rem; }

/* Callouts are recognized by their ordinary Markdown labels, not custom HTML. */
.markdown-body blockquote.mav-rich-callout {
  margin: 1.05rem 0 1.2rem; padding: .85rem 1rem;
  border-radius: 0 12px 12px 0; border-left-width: 4px;
  color: #27364b; background: #f1f5f9;
}
.markdown-body blockquote.mav-rich-callout > :last-child { margin-bottom: 0; }
.markdown-body blockquote.mav-rich-insight { background: #eff6ff; border-color: #1882ff; }
.markdown-body blockquote.mav-rich-action { background: #edfdf5; border-color: #0f766e; }
.markdown-body blockquote.mav-rich-caution { background: #fffbeb; border-color: #d97706; }
.markdown-body blockquote.mav-rich-example { background: #f5f3ff; border-color: #7c3aed; }
.dark .markdown-body blockquote.mav-rich-callout { color: #dbe6f5; background: #18263a; }
.dark .markdown-body blockquote.mav-rich-insight { background: #102c4f; border-color: #60a5fa; }
.dark .markdown-body blockquote.mav-rich-action { background: #0e302e; border-color: #2dd4bf; }
.dark .markdown-body blockquote.mav-rich-caution { background: #382c17; border-color: #f59e0b; }
.dark .markdown-body blockquote.mav-rich-example { background: #2a2044; border-color: #a78bfa; }

@media (max-width: 640px) {
  .mav-message-row .mav-answer-surface { padding: 1rem 1.05rem; }
  .mav-answer-surface .markdown-body { font-size: .92rem; }
  .mav-answer-surface .markdown-body h2 { font-size: 1.05rem; }
  .markdown-body blockquote.mav-rich-callout { padding: .75rem .8rem; }
}