/* ═══════════════════════════════════════════════
   SQB I Do — Full CSS (ported from Next.js globals.css)
   ═══════════════════════════════════════════════ */

/* System font stack — no external requests needed */

:root {
  /* ── Brand ── */
  --sqb-red:   #D91F26;
  --sqb-navy:  #1A2D5A;

  /* ── Global ── */
  --bg:           #dde1ef;
  --bg-card:      #ffffff;
  --border:       rgba(0, 0, 0, 0.07);
  --border-light: rgba(0, 0, 0, 0.04);
  --text-primary:   #1f2937;
  --text-secondary: rgba(31, 41, 55, 0.55);
  --text-muted:     rgba(31, 41, 55, 0.35);
  --sidebar-bg:     rgba(255, 255, 255, 0.9);
  --sidebar-text:        #1A2D5A;
  --sidebar-text-dim:    rgba(26, 45, 90, 0.5);
  --sidebar-text-muted:  rgba(26, 45, 90, 0.32);
  --accent:        #1A2D5A;
  --accent-2:      #2A4A8A;
  --accent-light:  rgba(26, 45, 90, 0.07);
  --accent-border: rgba(26, 45, 90, 0.15);
  --user-bubble:  #1A2D5A;

  /* ── ChatArea ── */
  --chat-outer-bg:       #eceef6;
  --header-bg:           linear-gradient(180deg, #ffffff 0%, #f8f9fd 100%);
  --header-border:       rgba(26, 45, 90, 0.07);
  --header-shadow:       0 2px 12px rgba(26, 45, 90, 0.05);
  --header-title:        #1A2D5A;
  --header-subtitle:     #6b7280;
  --toggle-bg:           rgba(26, 45, 90, 0.05);
  --toggle-border:       rgba(26, 45, 90, 0.08);
  --toggle-bg-hover:     rgba(26, 45, 90, 0.1);
  --messages-bg:         linear-gradient(180deg, #e8ebf4 0%, #eceff7 100%);
  --input-footer-bg:     linear-gradient(180deg, #f6f7fc 0%, #ffffff 100%);
  --input-footer-border: rgba(26, 45, 90, 0.07);

  /* ── MessageBubble ── */
  --strong-text:        #111827;
  --ai-bubble-bg:       linear-gradient(145deg, #ffffff 0%, #f7f8fc 100%);
  --ai-bubble-text:     #2d3748;
  --ai-bubble-shadow:   0 2px 10px rgba(26, 45, 90, 0.08), 0 0 0 1px rgba(26, 45, 90, 0.06);
  --user-bubble-bg:     #ECEEF2;
  --user-bubble-text:   #1f2937;
  --user-bubble-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --timestamp:          #9ca3af;
  --sqb-label:          #1A2D5A;
  --typing-bg:          #ffffff;
  --typing-shadow:      0 1px 8px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --typing-dot:         #1A2D5A;
  --table-bg:           rgba(255, 255, 255, 0.7);
  --table-border:       rgba(26, 45, 90, 0.10);
  --table-row-border:   rgba(26, 45, 90, 0.06);
  --table-row-hover:    rgba(26, 45, 90, 0.03);
  --table-header-bg:    rgba(26, 45, 90, 0.06);
  --table-header-text:  #1A2D5A;
  --table-data-text:    #374151;
  --code-bg:            rgba(26, 45, 90, 0.05);
  --code-border:        rgba(26, 45, 90, 0.10);
  --code-header-bg:     rgba(26, 45, 90, 0.07);
  --code-header-text:   rgba(26, 45, 90, 0.55);

  /* ── MessageInput ── */
  --input-bg:             rgba(255, 255, 255, 0.95);
  --input-border:         rgba(26, 45, 90, 0.16);
  --input-shadow:         0 4px 20px rgba(26, 45, 90, 0.10), 0 1px 4px rgba(26, 45, 90, 0.07);
  --input-text:           #1A2D5A;
  --input-placeholder:    rgba(26, 45, 90, 0.45);
  --input-placeholder-disabled: rgba(26, 45, 90, 0.3);
  --send-active-bg:       linear-gradient(145deg, #1A2D5A 0%, #2A4A8A 100%);
  --send-active-shadow:   0 4px 16px rgba(26, 45, 90, 0.42), 0 1px 4px rgba(26, 45, 90, 0.2);
  --send-inactive-bg:     rgba(26, 45, 90, 0.06);
  --send-inactive-border: rgba(26, 45, 90, 0.1);
  --chip-bg:              rgba(26, 45, 90, 0.055);
  --chip-border:          rgba(26, 45, 90, 0.12);
  --chip-text:            rgba(26, 45, 90, 0.72);
  --chip-hover-bg:        rgba(26, 45, 90, 0.10);
  --chip-hover-border:    rgba(26, 45, 90, 0.22);
  --input-hint-color:     rgba(26, 45, 90, 0.32);
  --input-focus-glow:     0 0 0 3px rgba(26, 45, 90, 0.10), 0 4px 24px rgba(26, 45, 90, 0.13);

  /* ── Sidebar conversation items ── */
  --conv-item-bg:              rgba(255, 255, 255, 0.45);
  --conv-item-border:          rgba(255, 255, 255, 0.6);
  --conv-item-shadow:          0 1px 4px rgba(0, 0, 0, 0.04);
  --conv-item-active-bg:       rgba(26, 45, 90, 0.07);
  --conv-item-active-border:   rgba(26, 45, 90, 0.14);
  --conv-item-active-shadow:   0 2px 12px rgba(26, 45, 90, 0.1), inset 0 0 0 1px rgba(26, 45, 90, 0.05);
  --conv-item-hover:           rgba(255, 255, 255, 0.7);
  --conv-item-active-hover:    rgba(26, 45, 90, 0.09);
  --conv-time-bg:              rgba(0, 0, 0, 0.05);
  --conv-divider:              rgba(26, 45, 90, 0.08);
  --conv-section-label:        rgba(26, 45, 90, 0.3);
  --conv-title-active:         #1A2D5A;
  --sidebar-footer-bg:         rgba(255, 255, 255, 0.3);
  --sidebar-footer-border:     rgba(26, 45, 90, 0.07);
  --new-chat-shadow:           0 3px 10px rgba(26, 45, 90, 0.22);
  --new-chat-hover-shadow:     0 8px 24px rgba(26, 45, 90, 0.25);

  /* ── Settings panel ── */
  --panel-bg:                  linear-gradient(180deg, #ffffff 0%, #f8f9fd 100%);
  --panel-border:              rgba(255, 255, 255, 0.8);
  --panel-shadow:              0 24px 64px rgba(26, 45, 90, 0.22), 0 4px 16px rgba(0, 0, 0, 0.08);
  --panel-header-border:       rgba(26, 45, 90, 0.07);
  --panel-title:               #1A2D5A;
  --panel-btn-bg:              rgba(26, 45, 90, 0.06);
  --panel-btn-border:          rgba(26, 45, 90, 0.09);
  --panel-btn-hover:           rgba(217, 31, 38, 0.08);
  --panel-search-bg:           rgba(26, 45, 90, 0.05);
  --panel-search-border:       rgba(26, 45, 90, 0.1);
  --panel-search-text:         #1A2D5A;
  --panel-empty-text:          rgba(26, 45, 90, 0.3);
  --panel-divider:             rgba(26, 45, 90, 0.07);
  --panel-section-label:       rgba(26, 45, 90, 0.3);
  --panel-result-bg:           rgba(255, 255, 255, 0.7);
  --panel-result-hover:        rgba(255, 255, 255, 0.95);
  --panel-result-border:       rgba(26, 45, 90, 0.06);
  --panel-result-active-bg:    rgba(26, 45, 90, 0.07);
  --panel-result-active-border: rgba(26, 45, 90, 0.13);
  --panel-result-title:        #374151;
  --panel-result-preview:      #9ca3af;
  --panel-option-inactive-bg:  rgba(26, 45, 90, 0.05);
  --panel-option-inactive-border: rgba(26, 45, 90, 0.1);
  --panel-option-inactive-text: #6b7280;
  --panel-option-label:        rgba(26, 45, 90, 0.38);

  /* ── Page card ── */
  --card-border:     rgba(255, 255, 255, 0.7);
  --card-shadow:     0 8px 32px rgba(26, 45, 90, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
  --main-border:     rgba(255, 255, 255, 0.6);
  --main-shadow:     0 8px 40px rgba(26, 45, 90, 0.13), 0 2px 8px rgba(0, 0, 0, 0.05);

  /* ── Icon filters ── */
  --icon-filter-dark:   brightness(0) opacity(0.65);
  --icon-filter-muted:  brightness(0) opacity(0.3);
  --icon-filter-navy:   invert(14%) sepia(55%) saturate(800%) hue-rotate(196deg) brightness(70%) contrast(108%);
  --toggle-icon-filter: invert(14%) sepia(55%) saturate(800%) hue-rotate(196deg) brightness(70%) contrast(108%);
}

/* ── Dark mode ── */
[data-theme="dark"],
html.dark {
  --bg:           #0D1426;
  --bg-card:      #161E33;
  --border:       rgba(255, 255, 255, 0.09);
  --border-light: rgba(255, 255, 255, 0.05);
  --text-primary:   #E6EAF2;
  --text-secondary: rgba(230, 234, 242, 0.60);
  --text-muted:     rgba(230, 234, 242, 0.38);
  --sidebar-bg:     rgba(20, 28, 48, 0.9);
  --sidebar-text:        #E6EAF2;
  --sidebar-text-dim:    rgba(230, 234, 242, 0.55);
  --sidebar-text-muted:  rgba(230, 234, 242, 0.35);

  --chat-outer-bg:       #0A1020;
  --header-bg:           linear-gradient(180deg, #18213A 0%, #141B30 100%);
  --header-border:       rgba(255, 255, 255, 0.08);
  --header-shadow:       0 2px 12px rgba(0, 0, 0, 0.2);
  --header-title:        #8FB2EA;
  --header-subtitle:     #9AA6BC;
  --toggle-bg:           rgba(255, 255, 255, 0.06);
  --toggle-border:       rgba(255, 255, 255, 0.10);
  --toggle-bg-hover:     rgba(255, 255, 255, 0.12);
  --messages-bg:         linear-gradient(180deg, #0E1626 0%, #111A2E 100%);
  --input-footer-bg:     linear-gradient(180deg, #141B30 0%, #18213A 100%);
  --input-footer-border: rgba(255, 255, 255, 0.08);

  --strong-text:        #EDF0F6;
  --ai-bubble-bg:       linear-gradient(145deg, #1B2440 0%, #18213A 100%);
  --ai-bubble-text:     #DDE3EE;
  --ai-bubble-shadow:   0 2px 10px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.07);
  --user-bubble-bg:     linear-gradient(145deg, #2E3340 0%, #252A35 50%, #1E2330 100%);
  --user-bubble-text:   rgba(255, 255, 255, 0.88);
  --user-bubble-shadow: 0 2px 10px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.15);
  --timestamp:          #6E7C94;
  --sqb-label:          #8FB2EA;
  --typing-bg:          #1B2440;
  --typing-shadow:      0 1px 8px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.07);
  --typing-dot:         #8FB2EA;
  --table-bg:           rgba(255, 255, 255, 0.05);
  --table-border:       rgba(255, 255, 255, 0.10);
  --table-row-border:   rgba(255, 255, 255, 0.07);
  --table-row-hover:    rgba(255, 255, 255, 0.04);
  --table-header-bg:    rgba(255, 255, 255, 0.07);
  --table-header-text:  #C8D0E0;
  --table-data-text:    #9DABC0;
  --code-bg:            rgba(255, 255, 255, 0.05);
  --code-border:        rgba(255, 255, 255, 0.08);
  --code-header-bg:     rgba(255, 255, 255, 0.06);
  --code-header-text:   rgba(255, 255, 255, 0.45);

  --input-bg:             rgba(255, 255, 255, 0.08);
  --input-border:         rgba(255, 255, 255, 0.22);
  --input-shadow:         0 4px 24px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.22);
  --input-text:           #E6EAF2;
  --input-placeholder:    rgba(230, 234, 242, 0.40);
  --input-placeholder-disabled: rgba(230, 234, 242, 0.28);
  --send-active-bg:       linear-gradient(145deg, #2A4A8A 0%, #3B62B0 100%);
  --send-active-shadow:   0 4px 16px rgba(0, 0, 0, 0.40), 0 1px 4px rgba(0, 0, 0, 0.20);
  --send-inactive-bg:     rgba(255, 255, 255, 0.07);
  --send-inactive-border: rgba(255, 255, 255, 0.10);
  --chip-bg:              rgba(255, 255, 255, 0.07);
  --chip-border:          rgba(255, 255, 255, 0.13);
  --chip-text:            rgba(230, 234, 242, 0.60);
  --chip-hover-bg:        rgba(255, 255, 255, 0.12);
  --chip-hover-border:    rgba(255, 255, 255, 0.22);
  --input-hint-color:     rgba(230, 234, 242, 0.32);
  --input-focus-glow:     0 0 0 3px rgba(143, 178, 234, 0.15), 0 4px 24px rgba(0, 0, 0, 0.30);

  --conv-item-bg:              rgba(255, 255, 255, 0.04);
  --conv-item-border:          rgba(255, 255, 255, 0.07);
  --conv-item-shadow:          0 1px 4px rgba(0, 0, 0, 0.15);
  --conv-item-active-bg:       rgba(255, 255, 255, 0.09);
  --conv-item-active-border:   rgba(255, 255, 255, 0.13);
  --conv-item-active-shadow:   0 2px 12px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  --conv-item-hover:           rgba(255, 255, 255, 0.07);
  --conv-item-active-hover:    rgba(255, 255, 255, 0.11);
  --conv-time-bg:              rgba(255, 255, 255, 0.07);
  --conv-divider:              rgba(255, 255, 255, 0.08);
  --conv-section-label:        rgba(230, 234, 242, 0.3);
  --conv-title-active:         #8FB2EA;
  --sidebar-footer-bg:         rgba(255, 255, 255, 0.03);
  --sidebar-footer-border:     rgba(255, 255, 255, 0.08);
  --new-chat-shadow:           0 3px 10px rgba(0, 0, 0, 0.3);
  --new-chat-hover-shadow:     0 8px 24px rgba(0, 0, 0, 0.4);

  --panel-bg:                  linear-gradient(180deg, #18213A 0%, #141B30 100%);
  --panel-border:              rgba(255, 255, 255, 0.1);
  --panel-shadow:              0 24px 64px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
  --panel-header-border:       rgba(255, 255, 255, 0.08);
  --panel-title:               #8FB2EA;
  --panel-btn-bg:              rgba(255, 255, 255, 0.07);
  --panel-btn-border:          rgba(255, 255, 255, 0.10);
  --panel-btn-hover:           rgba(217, 31, 38, 0.15);
  --panel-search-bg:           rgba(255, 255, 255, 0.06);
  --panel-search-border:       rgba(255, 255, 255, 0.11);
  --panel-search-text:         #E6EAF2;
  --panel-empty-text:          rgba(230, 234, 242, 0.3);
  --panel-divider:             rgba(255, 255, 255, 0.08);
  --panel-section-label:       rgba(230, 234, 242, 0.3);
  --panel-result-bg:           rgba(255, 255, 255, 0.05);
  --panel-result-hover:        rgba(255, 255, 255, 0.08);
  --panel-result-border:       rgba(255, 255, 255, 0.07);
  --panel-result-active-bg:    rgba(255, 255, 255, 0.09);
  --panel-result-active-border: rgba(255, 255, 255, 0.13);
  --panel-result-title:        #C8D0E0;
  --panel-result-preview:      #6E7C94;
  --panel-option-inactive-bg:  rgba(255, 255, 255, 0.06);
  --panel-option-inactive-border: rgba(255, 255, 255, 0.10);
  --panel-option-inactive-text: #9AA6BC;
  --panel-option-label:        rgba(230, 234, 242, 0.38);

  --card-border:     rgba(255, 255, 255, 0.1);
  --card-shadow:     0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
  --main-border:     rgba(255, 255, 255, 0.1);
  --main-shadow:     0 8px 40px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);

  --icon-filter-dark:   brightness(1) invert(1) opacity(0.7);
  --icon-filter-muted:  brightness(1) invert(1) opacity(0.4);
  --icon-filter-navy:   brightness(1) invert(0.75) sepia(0.3) saturate(0.5);
  --toggle-icon-filter: brightness(1) invert(0.7);
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Orb animations ── */
@keyframes orb-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(6%, -8%) scale(1.06); }
  66%       { transform: translate(-4%, 7%) scale(0.96); }
}
@keyframes orb-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%       { transform: translate(-8%, 6%) scale(1.08); }
  80%       { transform: translate(9%, -4%) scale(0.93); }
}
@keyframes orb-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(4%, 10%) scale(1.04); }
}
.orb-1 { animation: orb-1 18s ease-in-out infinite; }
.orb-2 { animation: orb-2 24s ease-in-out infinite; }
.orb-3 { animation: orb-3 20s ease-in-out infinite; }

/* ── Typing dots ── */
@keyframes bounce-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
  30%           { transform: translateY(-5px); opacity: 1; }
}
.dot-1 { animation: bounce-dot 1.2s ease-in-out infinite; }
.dot-2 { animation: bounce-dot 1.2s ease-in-out infinite 0.2s; }
.dot-3 { animation: bounce-dot 1.2s ease-in-out infinite 0.4s; }

/* ── Status blink ── */
@keyframes status-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
.status-dot { animation: status-blink 2.4s ease-in-out infinite; }

/* ── Pulse ring ── */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(217, 31, 38, 0.3); }
  70%  { box-shadow: 0 0 0 14px rgba(217, 31, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 31, 38, 0); }
}
.ai-pulse { animation: pulse-ring 2s ease-out infinite; }

/* ── Textarea placeholders ── */
.msg-textarea::placeholder          { color: var(--input-placeholder); }
.msg-textarea:disabled::placeholder { color: var(--input-placeholder-disabled); }
.msg-textarea-glass::placeholder          { color: rgba(255, 255, 255, 0.55); }
.msg-textarea-glass:disabled::placeholder { color: rgba(255, 255, 255, 0.3); }

/* ── Toggle icon filter ── */
.toggle-icon { filter: var(--toggle-icon-filter); }

/* ── Auto-adjusting icons (dark mode) ── */
[data-theme="dark"] .icon-auto,
html.dark .icon-auto {
  filter: brightness(0) invert(1) opacity(0.65) !important;
}

/* ── Topic avatars dark mode boost ── */
[data-theme="dark"] .topic-avatar,
html.dark .topic-avatar {
  filter: brightness(2.4) saturate(1.2) !important;
}

/* ── Input focus ring ── */
.input-focused {
  box-shadow: var(--input-focus-glow) !important;
  border-color: rgba(26, 45, 90, 0.28) !important;
}
[data-theme="dark"] .input-focused,
html.dark .input-focused {
  border-color: rgba(100, 160, 255, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(80,140,255,0.18), 0 8px 40px rgba(0,0,0,0.55) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.18); }

/* ── Gradient text ── */
.gradient-text {
  background: linear-gradient(135deg, #1A2D5A 0%, #2A4A8A 60%, #1A2D5A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Scroll fade ── */
.scroll-fade {
  mask-image: linear-gradient(to bottom, transparent 0%, black 4%, black 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 4%, black 93%, transparent 100%);
}

/* ── Streaming cursor blink ── */
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
.streaming-cursor {
  display: inline-block;
  width: 2px;
  height: 13px;
  margin-left: 2px;
  vertical-align: middle;
  border-radius: 1px;
  background: var(--sqb-red);
  animation: cursor-blink 0.7s ease-in-out infinite;
}

/* ── Utility classes ── */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hidden { display: none !important; }

/* ── Transitions ── */
.transition-all { transition: all 0.18s ease; }
.transition-bg { transition: background 0.12s; }

/* ── Dot bounce animation (sidebar placeholder) ── */
@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
  40%            { transform: scale(1);   opacity: 0.7; }
}

/* ── Markdown / GFM output ─────────────────────────────────────────────── */
.markdown-body {
  min-width: 0;
  max-width: 100%;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.markdown-body > :first-child { margin-top: 0 !important; }
.markdown-body > :last-child  { margin-bottom: 0 !important; }
.markdown-body p { margin: 5px 0; }
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  margin: 16px 0 7px;
  line-height: 1.35;
  color: var(--strong-text);
}
.markdown-body h1 { font-size: 17px; padding-bottom: 6px; border-bottom: 1px solid var(--table-border); }
.markdown-body h2 { font-size: 15.5px; }
.markdown-body h3 { font-size: 14.5px; }
.markdown-body h4 { font-size: 13.5px; }
.markdown-body ul,
.markdown-body ol { margin: 7px 0; padding-left: 23px; }
.markdown-body li { margin: 3px 0; }
.markdown-body li > p { margin: 0; }
.markdown-body blockquote {
  margin: 10px 0;
  padding: 9px 14px;
  border-left: 3px solid var(--sqb-navy);
  border-radius: 0 8px 8px 0;
  background: var(--table-bg);
  color: var(--text-muted);
}
.markdown-body hr { margin: 14px 0; border: 0; border-top: 1px solid var(--table-border); }
.markdown-body a {
  color: var(--sqb-navy);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.markdown-body code {
  padding: 2px 5px;
  border: 1px solid var(--code-border);
  border-radius: 5px;
  background: var(--code-bg);
  color: var(--strong-text);
  font: 0.92em Consolas, Monaco, monospace;
}
.markdown-body pre {
  max-width: 100%;
  margin: 10px 0;
  padding: 13px 15px;
  overflow-x: auto;
  border: 1px solid var(--code-border);
  border-radius: 10px;
  background: var(--code-bg);
  white-space: pre;
}
.markdown-body pre code {
  padding: 0;
  border: 0;
  background: transparent;
  white-space: inherit;
}
.markdown-table-scroll {
  width: 100%;
  max-width: 100%;
  margin: 12px 0;
  overflow-x: auto;
  border: 1px solid var(--table-border);
  border-radius: 10px;
  background: var(--table-bg);
  -webkit-overflow-scrolling: touch;
}
.markdown-body table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 12.5px;
}
.markdown-body th,
.markdown-body td {
  padding: 9px 12px;
  border-right: 1px solid var(--table-row-border);
  border-bottom: 1px solid var(--table-row-border);
  text-align: left;
  vertical-align: top;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}
.markdown-body th:last-child,
.markdown-body td:last-child { border-right: 0; }
.markdown-body tr:last-child td { border-bottom: 0; }
.markdown-body th {
  background: var(--table-header-bg);
  color: var(--table-header-text);
  font-weight: 650;
}
.markdown-body td { color: var(--table-data-text); }
.markdown-body tbody tr:hover { background: var(--table-row-hover); }