/* ==================== FONTS ==================== */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');

/* ==================== ANALYTICS HEADER LINK ==================== */
/* Chainlit's UISettings requires icon_url on [[UI.header_links]], so the
   icon is set in .chainlit/config.toml and hidden here instead. Text is
   forced to match the adjacent Readme link in both themes. */
a[href="/analytics/overview"] img {
  display: none !important;
}

a[href="/analytics/overview"],
a[href="/analytics/overview"] span,
button:has(> a[href="/analytics/overview"]) {
  color: #CCCCCC !important;
}

.light a[href="/analytics/overview"],
html.light a[href="/analytics/overview"],
.light a[href="/analytics/overview"] span,
html.light a[href="/analytics/overview"] span,
.light button:has(> a[href="/analytics/overview"]),
html.light button:has(> a[href="/analytics/overview"]) {
  color: #464C55 !important;
}

/* Chainlit wraps header_links in a Button whose inner <a> is inline-flex —
   sized to its text. Clicks on the button's padding fall on <button> and
   don't navigate. Shift the padding onto the anchor so the entire visible
   button surface is the navigation hit-target. */
button:has(> a[href="/analytics/overview"]) {
  padding: 0 !important;
}
button:has(> a[href="/analytics/overview"]) > a[href="/analytics/overview"] {
  height: 100% !important;
  padding: 0.5rem 1rem !important;
}

/* ==================== CODE BLOCKS ==================== */
/* Light mode: override hljs Monokai dark theme */
.light .hljs,
html.light .hljs {
  background: #f6f8fa !important;
  color: #24292e !important;
}

.light .hljs-keyword,
.light .hljs-selector-tag,
.light .hljs-name,
.light .hljs-attr {
  color: #d73a49 !important;
}

.light .hljs-string,
.light .hljs-title,
.light .hljs-section,
.light .hljs-selector-class {
  color: #22863a !important;
}

.light .hljs-number,
.light .hljs-literal,
.light .hljs-symbol,
.light .hljs-bullet,
.light .hljs-link {
  color: #005cc5 !important;
}

.light .hljs-comment,
.light .hljs-meta {
  color: #6a737d !important;
}

/* ==================== SCROLLBAR ==================== */
/* CSS custom properties for theme-aware scrollbar */
:root {
  --scrollbar-track: #1a1a1a;
  --scrollbar-thumb: #4a4a4a;
  --scrollbar-thumb-hover: #5a5a5a;
}

.light,
html.light {
  --scrollbar-track: #f5f5f5;
  --scrollbar-thumb: #c0c0c0;
  --scrollbar-thumb-hover: #a0a0a0;
}

/* Webkit scrollbar (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Firefox scrollbar */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* ==================== TYPOGRAPHY ==================== */
/* Base typography - optimized for readability */
html {
  font-size: 18px;
}

/* Message content - let the font breathe */
.markdown-body,
[class*="message"] p,
[class*="Message"] p {
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: 0.005em;
}

/* Spacing between paragraphs in messages */
.markdown-body p,
article p {
  margin-bottom: 1rem;
}

/* Override Tailwind border-b on headings */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
article h1,
article h2,
article h3,
article h4,
h1.border-b,
h2.border-b,
h3.border-b,
h4.border-b,
h1[class*="border-b"],
h2[class*="border-b"],
h3[class*="border-b"],
h4[class*="border-b"] {
  border-bottom: none !important;
  border-bottom-width: 0 !important;
  border-bottom-style: none !important;
  padding-bottom: 0 !important;
}

/* Heading sizes — scaled for chat, not a document */
.markdown-body h1,
article h1,
h1[class*="scroll-m"] {
  font-size: 1.375rem !important;
  line-height: 1.75rem !important;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.markdown-body h2,
article h2,
h2[class*="scroll-m"] {
  font-size: 1.2rem !important;
  line-height: 1.625rem !important;
  margin-top: 1.5rem;
  margin-bottom: 0.625rem;
}

.markdown-body h3,
article h3,
h3[class*="scroll-m"] {
  font-size: 1.05rem !important;
  line-height: 1.5rem !important;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.markdown-body h4,
article h4,
h4[class*="scroll-m"] {
  font-size: 1rem !important;
  line-height: 1.375rem !important;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/* Spacing for lists */
.markdown-body ul,
.markdown-body ol,
article ul,
article ol {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

/* Spacing for list items */
.markdown-body li,
article li {
  margin-bottom: 0.5rem;
}

/* Spacing for blockquotes */
.markdown-body blockquote,
article blockquote {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

/* Style Chainlit's separator divs (rendered from markdown ---) */
div[data-orientation="horizontal"][role="none"][class*="bg-border"] {
  margin-top: 1.5rem !important;
  margin-bottom: 1.25rem !important;
  opacity: 0.25 !important;
}

/* Spacing for horizontal rules / separators */
/* Multiple selectors to ensure Chainlit renders with proper spacing */
hr,
.markdown-body hr,
article hr,
[class*="message"] hr,
[class*="Message"] hr,
div[class*="step"] hr {
  margin-top: 2.5rem !important;
  margin-bottom: 2rem !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  height: 0 !important;
}

/* Light mode horizontal rules */
.light hr,
html.light hr,
.light .markdown-body hr,
html.light .markdown-body hr {
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* ==================== LOGO OVERRIDE ==================== */
/* Hide the default logo when shimmer logo is active */
img[alt="logo"] {
  display: none !important;
}

/* ==================== SPARK BRAND TOKENS ==================== */
:root {
  --spark-accent: #00A0FF;
  --spark-accent-hi: #6FCBFF;
  --spark-accent-soft: rgba(0, 160, 255, 0.55);
  --spark-accent-faint: rgba(0, 160, 255, 0.12);
  --spark-tagline: #7A8A9A;
  --spark-prompt-text: #8A9AAA;
  --spark-prompt-border: rgba(255, 255, 255, 0.12);
  --spark-input-bg: rgba(255, 255, 255, 0.05);
  --spark-input-border: rgba(255, 255, 255, 0.1);
  --spark-bg: #1A1A2E;
}

.light, html.light {
  --spark-tagline: #88949E;
  --spark-prompt-text: #5A6A7A;
  --spark-prompt-border: rgba(0, 0, 0, 0.1);
  --spark-input-bg: #F8F9FA;
  --spark-input-border: rgba(0, 0, 0, 0.1);
  --spark-bg: #FFFFFF;
}

/* ==================== SPARK LOGO MOUNT ==================== */
/* Wrapper around <spark-logo> on the welcome screen */
.spark-logo-wrapper {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  /* Generous breathing room between the wordmark and the input field below
     (mirrors the L.I.S.A. landing rhythm — same ratio, different identity) */
  margin-bottom: clamp(28px, 5vh, 64px);
}

.spark-logo-wrapper spark-logo {
  width: 100%;
  display: block;
}

/* Mobile responsiveness — keep typography readable on phones */
@media (max-width: 600px) {
  html { font-size: 16px; }
  .spark-logo-wrapper { margin-bottom: clamp(20px, 3.5vh, 40px); }
}

/* ==================== DEBUG BANNER (JS-generated) ==================== */
/* Styles for the debug banner created by custom.js - matches TriageDebug.jsx styling */

/* Dark mode (default) — zinc palette, matching TriageDebug */
.debug-banner {
  width: 100%;
  margin-top: 2rem;
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.95) 0%, rgba(24, 24, 27, 0.9) 100%);
  border: 1px solid rgba(63, 63, 70, 0.5);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* Header bar */
.debug-banner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.6);
  border-bottom: 1px solid rgba(63, 63, 70, 0.35);
}

.debug-banner-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #60a5fa;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.debug-banner-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
  font-size: 10px;
  font-weight: 600;
}

.debug-banner-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 0 6px rgba(96, 165, 250, 0.5);
}

.debug-banner-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.debug-banner-device {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #a1a1aa;
  background: rgba(113, 113, 122, 0.15);
  border-radius: 4px;
}

.debug-banner-device svg {
  color: #71717a;
}

/* Metrics row - 4 equal columns */
.debug-banner-metrics {
  display: flex;
  background: rgba(10, 10, 10, 0.8);
}

.debug-banner-metric {
  flex: 1;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-right: 1px solid rgba(63, 63, 70, 0.25);
}

.debug-banner-metric:last-child {
  border-right: none;
}

.debug-banner-metric-icon {
  color: #71717a;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.debug-banner-metric-icon.accent {
  color: #60a5fa;
}

.debug-banner-metric-label {
  color: #71717a;
  font-size: 9px;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}

.debug-banner-metric-value {
  color: #e4e4e7;
  font-weight: 500;
  font-size: 12px;
}

.debug-banner-metric-value.accent {
  color: #60a5fa;
  font-weight: 600;
}

/* Footer bar */
.debug-banner-footer {
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.4);
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(63, 63, 70, 0.35);
  color: #a1a1aa;
  font-size: 10px;
}

.debug-banner-footer-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.debug-banner-footer-divider {
  width: 1px;
  height: 12px;
  background: rgba(63, 63, 70, 0.5);
}

/* Status indicators */
.debug-banner .status-live {
  color: #4ade80;
}

.debug-banner .status-mock {
  color: #a1a1aa;
}

/* Light mode styling — matching TriageDebug light theme */
.light .debug-banner,
html.light .debug-banner {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 250, 250, 0.95) 100%);
  border-color: rgba(209, 213, 219, 0.8);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

.light .debug-banner-header,
html.light .debug-banner-header {
  background: rgba(241, 245, 249, 0.8);
  border-bottom-color: rgba(209, 213, 219, 0.6);
}

.light .debug-banner-title,
html.light .debug-banner-title {
  color: #2563eb;
}

.light .debug-banner-badge,
html.light .debug-banner-badge {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}

.light .debug-banner-badge-dot,
html.light .debug-banner-badge-dot {
  background: #2563eb;
  box-shadow: 0 0 6px rgba(37, 99, 235, 0.5);
}

.light .debug-banner-device,
html.light .debug-banner-device {
  background: rgba(113, 113, 122, 0.1);
  color: #52525b;
}

.light .debug-banner-device svg,
html.light .debug-banner-device svg {
  color: #71717a;
}

.light .debug-banner-metrics,
html.light .debug-banner-metrics {
  background: rgba(249, 250, 251, 0.9);
}

.light .debug-banner-metric,
html.light .debug-banner-metric {
  border-right-color: rgba(209, 213, 219, 0.5);
}

.light .debug-banner-metric-icon.accent,
html.light .debug-banner-metric-icon.accent {
  color: #2563eb;
}

.light .debug-banner-metric-label,
html.light .debug-banner-metric-label {
  color: #71717a;
}

.light .debug-banner-metric-value,
html.light .debug-banner-metric-value {
  color: #18181b;
}

.light .debug-banner-metric-value.accent,
html.light .debug-banner-metric-value.accent {
  color: #2563eb;
}

.light .debug-banner-footer,
html.light .debug-banner-footer {
  background: rgba(241, 245, 249, 0.6);
  border-top-color: rgba(209, 213, 219, 0.6);
  color: #52525b;
}

.light .debug-banner .status-live,
html.light .debug-banner .status-live {
  color: #16a34a;
}

.light .debug-banner .status-mock,
html.light .debug-banner .status-mock {
  color: #71717a;
}

/* ==================== WELCOME BANNER ==================== */
/* Shown when debug_ui_enabled is false */

.welcome-banner {
  padding: 1rem 1.5rem;
  margin-top: 2rem;
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 0.5rem;
  font-family: 'IBM Plex Mono', monospace;
  text-align: center;
}

.welcome-banner-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #60a5fa;
  margin-bottom: 0.375rem;
}

.welcome-banner-message {
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.4;
}

/* Light mode welcome banner */
.light .welcome-banner,
html.light .welcome-banner {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.2);
}

.light .welcome-banner-title,
html.light .welcome-banner-title {
  color: #2563eb;
}

.light .welcome-banner-message,
html.light .welcome-banner-message {
  color: #4b5563;
}

/* Mobile responsiveness for banners */
@media (max-width: 600px) {
  .debug-banner,
  .welcome-banner {
    padding: 0.75rem 1rem;
    margin-top: 1.5rem;
  }

  .debug-banner-title,
  .welcome-banner-title {
    font-size: 0.8rem;
  }

  .debug-banner-metrics,
  .debug-banner-footer,
  .welcome-banner-message {
    font-size: 0.7rem;
  }
}

/* ==================== LINKS ==================== */
/* SPARK accent for in-content links (chat messages, knowledge-base hits) */
.markdown-body a,
article a,
[class*="message"] a:not([class*="thread"]):not([class*="sidebar"]),
[class*="Message"] a:not([class*="thread"]):not([class*="sidebar"]) {
  color: var(--spark-accent) !important;
}

.markdown-body a:hover,
article a:hover {
  color: var(--spark-accent-hi) !important;
}

/* Light mode link hover stays in accent family */
.light .markdown-body a,
html.light .markdown-body a,
.light article a,
html.light article a {
  color: var(--spark-accent) !important;
}

.light .markdown-body a:hover,
html.light .markdown-body a:hover,
.light article a:hover,
html.light article a:hover {
  color: var(--spark-accent-hi) !important;
}

/* ==================== FOOTNOTES ==================== */
/* Target footnotes section - uses [data-footnotes] attribute in GFM */
section[data-footnotes],
.footnotes,
[class*="footnote"] {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Light mode footnotes border */
.light section[data-footnotes],
html.light section[data-footnotes] {
  border-top-color: rgba(0, 0, 0, 0.1);
}

/* Footnotes heading - more breathing room */
section[data-footnotes] h2,
.footnotes h2,
.markdown-body h2:last-of-type,
article h2:last-of-type {
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
}

/* Footnotes ordered list spacing */
section[data-footnotes] ol,
.footnotes ol,
.markdown-body ol,
article ol {
  padding-left: 1.5rem;
  margin-top: 1rem;
}

/* Footnotes list items - more breathing room */
section[data-footnotes] li,
.footnotes li,
.markdown-body ol > li,
article ol > li {
  margin-bottom: 0.6rem;
  padding-left: 0.25rem;
  line-height: 1.5;
}

/* ==================== AVATAR ==================== */
/* Using native Chainlit avatar from /public/avatars/spark.png */

/* ==================== ACTION BUTTONS ==================== */
/* Style action choice buttons (text buttons) with SPARK accent */
/* Action buttons have px-3 padding (text), copy/icon buttons have w-9 (square) */
button.px-3.text-muted-foreground {
  color: var(--spark-accent) !important;
}

button.px-3.text-muted-foreground:hover {
  color: var(--spark-accent-hi) !important;
}

/* ==================== STARTER BUTTONS ==================== */
/* Add spacing between symbol and text in starter buttons (mirrors LISA) */
.welcome-screen button {
  white-space: pre-wrap;
}

/* ==================== INPUT FIELD ==================== */

/* Message input container — soft surface, accent ring on focus */
#message-composer {
  background: var(--spark-input-bg) !important;
  border: 1px solid var(--spark-input-border) !important;
  box-shadow: none !important;
  border-radius: 0.75rem !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

#message-composer:focus-within {
  border-color: var(--spark-accent) !important;
  box-shadow: 0 0 0 4px rgba(0, 160, 255, 0.12) !important;
}

/* ==================== ONBOARDING MODAL ==================== */
/* First-time user onboarding tour modal */

.onboarding-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: onboarding-fade-in 0.25s ease-out;
}

.onboarding-modal {
  width: 100%;
  max-width: 580px;
  margin: 1rem;
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.5);
}

.onboarding-card-container {
  padding: 56px 48px 48px;
  height: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

/* ===== SCOPE CARD (Slide 1) ===== */
.onboarding-scope {
  display: flex;
  gap: 16px;
  width: 100%;
  margin-top: 20px;
}

.scope-column {
  flex: 1;
  padding: 14px 16px;
  border-radius: 12px;
  text-align: left;
}

.scope-can {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.scope-cant {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.scope-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.scope-can .scope-header {
  color: #4ade80;
}

.scope-cant .scope-header {
  color: #f87171;
}

.scope-icon {
  display: flex;
}

.scope-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.scope-list li {
  padding: 5px 0;
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: 14px;
  color: #e4e4e7;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0;
  animation: scope-item-in 0.3s ease-out forwards;
}

.scope-list li:last-child {
  border-bottom: none;
}

@keyframes scope-item-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Scope icon animations */
.scope-icon svg {
  transition: transform 0.2s ease;
}

.scope-can .scope-icon svg {
  animation: check-draw 0.5s ease-out 0.2s both;
}

.scope-cant .scope-icon svg {
  animation: x-draw 0.4s ease-out 0.2s both;
}

@keyframes check-draw {
  from {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    opacity: 0;
  }
  to {
    stroke-dasharray: 20;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes x-draw {
  from {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    opacity: 0;
  }
  to {
    stroke-dasharray: 30;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* ===== HERO ICON (standardized for all slides) ===== */
.onboarding-hero {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  flex-shrink: 0;
  margin-bottom: 20px;
  border-radius: 18px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hero-fade-in 0.4s ease-out;
  aspect-ratio: 1 / 1;
}

.onboarding-hero-icon {
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hero-icon-breathe 3s ease-in-out infinite;
}

.onboarding-hero-icon svg {
  width: 36px;
  height: 36px;
}

@keyframes hero-fade-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes hero-icon-breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

.onboarding-title-large {
  margin: 0 0 10px 0;
  color: #fafafa;
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.onboarding-title-medium {
  margin: 0 0 24px 0;
  color: #fafafa;
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.onboarding-subtitle {
  margin: 0 0 28px 0;
  color: #a1a1aa;
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  max-width: 400px;
}

/* ===== DO / DON'T POINTS ===== */
.onboarding-points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 340px;
}

.onboarding-point {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  opacity: 0;
  animation: point-fade-in 0.3s ease-out forwards;
}

.onboarding-point:nth-child(1) { animation-delay: 0.1s; }
.onboarding-point:nth-child(2) { animation-delay: 0.2s; }

.onboarding-point.positive {
  background: rgba(34, 197, 94, 0.1);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.onboarding-point.negative {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.onboarding-point .point-icon {
  flex-shrink: 0;
  display: flex;
}

@keyframes point-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== INTENT CARDS ===== */
.onboarding-intents {
  display: flex;
  gap: 14px;
  margin-top: 20px;
  width: 100%;
}

.onboarding-intent {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  border-radius: 12px;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.2s ease, background 0.2s ease;
  opacity: 0;
  animation: intent-fade-in 0.3s ease-out forwards;
}

.intent-content {
  display: flex;
  flex-direction: column;
  order: 2;
}

.onboarding-intent:nth-child(1) { animation-delay: 0.1s; }
.onboarding-intent:nth-child(2) { animation-delay: 0.15s; }
.onboarding-intent:nth-child(3) { animation-delay: 0.2s; }

.onboarding-intent:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Orange - Incident/Report */
.onboarding-intent--orange {
  border-color: rgba(249, 115, 22, 0.3);
}

.onboarding-intent--orange:hover {
  border-color: rgba(249, 115, 22, 0.5);
}

.onboarding-intent--orange .intent-icon {
  color: #f97316;
}

/* Blue - Service Request */
.onboarding-intent--blue {
  border-color: rgba(59, 130, 246, 0.3);
}

.onboarding-intent--blue:hover {
  border-color: rgba(59, 130, 246, 0.5);
}

.onboarding-intent--blue .intent-icon {
  color: #3b82f6;
}

/* Grey - Ask */
.onboarding-intent--grey {
  border-color: rgba(113, 113, 122, 0.3);
}

.onboarding-intent--grey:hover {
  border-color: rgba(113, 113, 122, 0.5);
}

.onboarding-intent--grey .intent-icon {
  color: #a1a1aa;
}

.intent-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.intent-icon svg {
  width: 28px;
  height: 28px;
  transition: transform 0.25s ease;
}

/* Hover animations for intent icons */
.onboarding-intent:hover .intent-icon svg {
  transform: scale(1.15);
}

.onboarding-intent--orange:hover .intent-icon svg {
  animation: icon-shake 0.4s ease;
}

.onboarding-intent--blue:hover .intent-icon svg {
  animation: icon-bounce 0.4s ease;
}

.onboarding-intent--grey:hover .intent-icon svg {
  animation: icon-pulse 0.4s ease;
}

@keyframes icon-shake {
  0%, 100% { transform: scale(1.15) rotate(0deg); }
  25% { transform: scale(1.15) rotate(-8deg); }
  75% { transform: scale(1.15) rotate(8deg); }
}

@keyframes icon-bounce {
  0%, 100% { transform: scale(1.15) translateY(0); }
  50% { transform: scale(1.15) translateY(-4px); }
}

@keyframes icon-pulse {
  0%, 100% { transform: scale(1.15); }
  50% { transform: scale(1.25); }
}

.intent-label {
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #fafafa;
  margin-bottom: 6px;
}

.intent-desc {
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: 12px;
  color: #a1a1aa;
  line-height: 1.4;
}

@keyframes intent-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== TIPS LIST ===== */
.onboarding-tips {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 440px;
  margin-top: 20px;
}

.onboarding-tip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0;
  animation: tip-fade-in 0.3s ease-out forwards;
}

.onboarding-tip:nth-child(1) { animation-delay: 0.1s; }
.onboarding-tip:nth-child(2) { animation-delay: 0.15s; }
.onboarding-tip:nth-child(3) { animation-delay: 0.2s; }

.tip-icon {
  flex-shrink: 0;
  color: #3b82f6;
  display: flex;
}

.tip-text {
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #e4e4e7;
  text-align: left;
}

@keyframes tip-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== BEST PRACTICES LIST (Slide 3) ===== */
.onboarding-practices {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  margin-top: 28px;
}

.onboarding-practice {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  opacity: 0;
  animation: practice-fade-in 0.3s ease-out forwards;
}

.onboarding-practice--do {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: #e4e4e7;
}

.onboarding-practice--dont {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #e4e4e7;
}

.practice-icon {
  flex-shrink: 0;
  display: flex;
}

.onboarding-practice--do .practice-icon {
  color: #4ade80;
}

.onboarding-practice--dont .practice-icon {
  color: #f87171;
}

.practice-text {
  line-height: 1.5;
}

@keyframes practice-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Light mode best practices */
.light .onboarding-practice--do,
html.light .onboarding-practice--do {
  background: rgba(22, 163, 74, 0.06);
  border-color: rgba(22, 163, 74, 0.2);
  color: #3f3f46;
}

.light .onboarding-practice--dont,
html.light .onboarding-practice--dont {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.2);
  color: #3f3f46;
}

.light .onboarding-practice--do .practice-icon,
html.light .onboarding-practice--do .practice-icon {
  color: #16a34a;
}

.light .onboarding-practice--dont .practice-icon,
html.light .onboarding-practice--dont .practice-icon {
  color: #dc2626;
}

/* ===== TIPS CAROUSEL (Slide 3) ===== */
.tips-carousel {
  width: 100%;
  max-width: 520px;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: carousel-fade-in 0.4s ease-out 0.15s forwards;
}

@keyframes carousel-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tips-carousel-arrow {
  flex-shrink: 0;
  align-self: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #a1a1aa;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.tips-carousel-arrow:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #e4e4e7;
}

.light .tips-carousel-arrow,
html.light .tips-carousel-arrow {
  background: rgba(0, 0, 0, 0.04);
  color: #71717a;
}

.light .tips-carousel-arrow:hover,
html.light .tips-carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #3f3f46;
}

.tips-carousel-track {
  flex: 1;
  position: relative;
  height: 152px;
  min-width: 0;
}

.tips-carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.tips-carousel-item.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.carousel-tip-pair {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.carousel-tip {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  text-align: left;
}

.carousel-tip--do {
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.25);
}

.carousel-tip--dont {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.carousel-tip-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-tip-icon svg {
  width: 20px;
  height: 20px;
}

.carousel-tip--do .carousel-tip-icon {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

.carousel-tip--dont .carousel-tip-icon {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.carousel-tip-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.carousel-tip-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.carousel-tip-badge svg {
  width: 12px;
  height: 12px;
}

.carousel-tip-badge--do {
  color: #4ade80;
}

.carousel-tip-badge--dont {
  color: #f87171;
}

.carousel-tip-text {
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #e4e4e7;
  line-height: 1.4;
}

/* Light mode tips carousel */
.light .carousel-tip--do,
html.light .carousel-tip--do {
  background: rgba(5, 150, 105, 0.06);
  border-color: rgba(5, 150, 105, 0.2);
}

.light .carousel-tip--dont,
html.light .carousel-tip--dont {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.2);
}

.light .carousel-tip--do .carousel-tip-icon,
html.light .carousel-tip--do .carousel-tip-icon {
  background: rgba(5, 150, 105, 0.12);
  color: #059669;
}

.light .carousel-tip--dont .carousel-tip-icon,
html.light .carousel-tip--dont .carousel-tip-icon {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

.light .carousel-tip-badge--do,
html.light .carousel-tip-badge--do {
  color: #059669;
}

.light .carousel-tip-badge--dont,
html.light .carousel-tip-badge--dont {
  color: #dc2626;
}

.light .carousel-tip-text,
html.light .carousel-tip-text {
  color: #3f3f46;
}

/* ===== PROGRESS & NAVIGATION ===== */
.onboarding-progress {
  padding: 0 24px 20px;
  display: flex;
  justify-content: center;
}

.onboarding-dots {
  display: flex;
  gap: 10px;
}

.onboarding-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all 0.2s ease;
}

.onboarding-dot:hover {
  background: rgba(255, 255, 255, 0.3);
}

.onboarding-dot.active {
  background: #3b82f6;
}

.onboarding-dot.completed {
  background: #60a5fa;
}

.onboarding-footer {
  display: flex;
  justify-content: space-between;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.onboarding-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.onboarding-btn-back {
  background: transparent;
  color: #71717a;
}

.onboarding-btn-back:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
  color: #a1a1aa;
}

.onboarding-btn-back:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.onboarding-btn-primary {
  background: #3b82f6;
  color: #ffffff;
}

.onboarding-btn-primary:hover {
  background: #60a5fa;
}

.onboarding-btn-complete {
  background: #2563eb;
  color: #ffffff;
}

.onboarding-btn-complete:hover {
  background: #1d4ed8;
}

/* ===== ANIMATIONS ===== */
@keyframes onboarding-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.onboarding-modal-fade-out {
  animation: onboarding-fade-out 0.25s ease-out forwards;
}

@keyframes onboarding-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ===== LIGHT MODE ===== */
.light .onboarding-modal-overlay,
html.light .onboarding-modal-overlay {
  background: rgba(0, 0, 0, 0.5);
}

.light .onboarding-modal,
html.light .onboarding-modal {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.25);
}

.light .onboarding-hero,
html.light .onboarding-hero {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.15);
}

.light .onboarding-hero-icon,
html.light .onboarding-hero-icon {
  color: #2563eb;
}

.light .onboarding-title-large,
.light .onboarding-title-medium,
html.light .onboarding-title-large,
html.light .onboarding-title-medium {
  color: #18181b;
}

.light .onboarding-subtitle,
html.light .onboarding-subtitle {
  color: #71717a;
}

.light .onboarding-point.positive,
html.light .onboarding-point.positive {
  background: rgba(22, 163, 74, 0.08);
  color: #16a34a;
  border-color: rgba(22, 163, 74, 0.2);
}

.light .onboarding-point.negative,
html.light .onboarding-point.negative {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.2);
}

/* Scope card light mode */
.light .scope-can,
html.light .scope-can {
  background: rgba(22, 163, 74, 0.06);
  border-color: rgba(22, 163, 74, 0.2);
}

.light .scope-cant,
html.light .scope-cant {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.2);
}

.light .scope-can .scope-header,
html.light .scope-can .scope-header {
  color: #16a34a;
}

.light .scope-cant .scope-header,
html.light .scope-cant .scope-header {
  color: #dc2626;
}

.light .scope-list li,
html.light .scope-list li {
  color: #3f3f46;
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.light .onboarding-intent,
html.light .onboarding-intent {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

.light .onboarding-intent:hover,
html.light .onboarding-intent:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Orange - Incident/Report (light mode) */
.light .onboarding-intent--orange,
html.light .onboarding-intent--orange {
  border-color: rgba(234, 88, 12, 0.25);
}

.light .onboarding-intent--orange:hover,
html.light .onboarding-intent--orange:hover {
  border-color: rgba(234, 88, 12, 0.4);
}

.light .onboarding-intent--orange .intent-icon,
html.light .onboarding-intent--orange .intent-icon {
  color: #ea580c;
}

/* Blue - Service Request (light mode) */
.light .onboarding-intent--blue,
html.light .onboarding-intent--blue {
  border-color: rgba(37, 99, 235, 0.25);
}

.light .onboarding-intent--blue:hover,
html.light .onboarding-intent--blue:hover {
  border-color: rgba(37, 99, 235, 0.4);
}

.light .onboarding-intent--blue .intent-icon,
html.light .onboarding-intent--blue .intent-icon {
  color: #2563eb;
}

/* Grey - Ask (light mode) */
.light .onboarding-intent--grey,
html.light .onboarding-intent--grey {
  border-color: rgba(82, 82, 91, 0.25);
}

.light .onboarding-intent--grey:hover,
html.light .onboarding-intent--grey:hover {
  border-color: rgba(82, 82, 91, 0.4);
}

.light .onboarding-intent--grey .intent-icon,
html.light .onboarding-intent--grey .intent-icon {
  color: #52525b;
}

.light .intent-label,
html.light .intent-label {
  color: #18181b;
}

.light .intent-desc,
html.light .intent-desc {
  color: #71717a;
}

.light .onboarding-tip,
html.light .onboarding-tip {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

.light .tip-icon,
html.light .tip-icon {
  color: #2563eb;
}

.light .tip-text,
html.light .tip-text {
  color: #3f3f46;
}

.light .onboarding-dot,
html.light .onboarding-dot {
  background: rgba(0, 0, 0, 0.1);
}

.light .onboarding-dot:hover,
html.light .onboarding-dot:hover {
  background: rgba(0, 0, 0, 0.2);
}

.light .onboarding-dot.active,
html.light .onboarding-dot.active {
  background: #2563eb;
}

.light .onboarding-dot.completed,
html.light .onboarding-dot.completed {
  background: #60a5fa;
}

.light .onboarding-footer,
html.light .onboarding-footer {
  background: rgba(0, 0, 0, 0.02);
  border-top-color: rgba(0, 0, 0, 0.06);
}

.light .onboarding-btn-back,
html.light .onboarding-btn-back {
  color: #71717a;
}

.light .onboarding-btn-back:hover:not(:disabled),
html.light .onboarding-btn-back:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
  color: #52525b;
}

.light .onboarding-btn-primary,
html.light .onboarding-btn-primary {
  background: #2563eb;
  color: #ffffff;
}

.light .onboarding-btn-primary:hover,
html.light .onboarding-btn-primary:hover {
  background: #1d4ed8;
}

.light .onboarding-btn-complete,
html.light .onboarding-btn-complete {
  background: #1d4ed8;
  color: #ffffff;
}

.light .onboarding-btn-complete:hover,
html.light .onboarding-btn-complete:hover {
  background: #1e40af;
}

/* ===== MOBILE ===== */
@media (max-width: 600px) {
  .onboarding-modal {
    max-width: 100%;
    margin: 0.75rem;
    border-radius: 16px;
  }

  .onboarding-card-container {
    padding: 28px 20px 24px;
    min-height: 420px;
    height: auto;
  }

  .onboarding-hero {
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 14px;
  }

  .onboarding-hero-icon svg {
    width: 28px;
    height: 28px;
  }

  .onboarding-title-large {
    font-size: 20px;
    margin-bottom: 6px;
  }

  .onboarding-subtitle {
    font-size: 13px;
    margin-bottom: 16px;
  }

  /* Scope card mobile - stack columns */
  .onboarding-scope {
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
  }

  .scope-column {
    padding: 14px;
  }

  .scope-header {
    font-size: 12px;
    margin-bottom: 10px;
  }

  .scope-list li {
    font-size: 13px;
    padding: 5px 0;
  }

  .onboarding-intents {
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
  }

  .onboarding-intent {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 16px 20px;
  }

  .intent-content {
    flex: 1;
    order: 1;
  }

  .intent-icon {
    order: 2;
    margin-bottom: 0;
    margin-left: 20px;
    opacity: 0.85;
  }

  .intent-icon svg {
    width: 36px;
    height: 36px;
  }

  .intent-label {
    font-size: 16px;
    margin-bottom: 4px;
  }

  .intent-desc {
    font-size: 13px;
  }

  .onboarding-tips {
    margin-top: 16px;
    gap: 10px;
  }

  .onboarding-tip {
    padding: 12px 14px;
    gap: 12px;
  }

  .tip-text {
    font-size: 13px;
  }

  .onboarding-practices {
    margin-top: 16px;
    gap: 10px;
  }

  .onboarding-practice {
    padding: 14px 16px;
    gap: 12px;
    font-size: 14px;
  }

  .tips-carousel {
    margin-top: 16px;
    gap: 6px;
  }

  .tips-carousel-arrow {
    width: 28px;
    height: 28px;
  }

  .tips-carousel-track {
    height: 120px;
  }

  .carousel-tip-pair {
    gap: 6px;
  }

  .carousel-tip {
    padding: 10px 12px;
    gap: 10px;
  }

  .carousel-tip-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .carousel-tip-icon svg {
    width: 16px;
    height: 16px;
  }

  .carousel-tip-badge {
    font-size: 10px;
  }

  .carousel-tip-text {
    font-size: 12px;
  }

  .onboarding-btn {
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* ==================== FLOATING TOUR BUTTON ==================== */
/* Always-visible button to replay onboarding tour */

.floating-tour-btn {
  position: fixed;
  bottom: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--spark-accent);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 9999;
  animation: tour-btn-remind 8s ease-in-out infinite;
}

.floating-tour-btn:hover {
  transform: scale(1.08);
  background: var(--spark-accent-hi);
  box-shadow: 0 4px 12px rgba(0, 160, 255, 0.4);
  animation: none;
}

.floating-tour-btn:active {
  transform: scale(0.95);
}

/* Subtle reminder pulse every 8 seconds */
@keyframes tour-btn-remind {
  0%, 90%, 100% {
    box-shadow: 0 2px 8px rgba(0, 160, 255, 0.3);
  }
  93%, 97% {
    box-shadow: 0 2px 8px rgba(0, 160, 255, 0.3), 0 0 0 4px rgba(0, 160, 255, 0.15);
  }
  95% {
    box-shadow: 0 2px 8px rgba(0, 160, 255, 0.3), 0 0 0 8px rgba(0, 160, 255, 0);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .floating-tour-btn {
    bottom: 160px;
    right: 14px;
    width: 36px;
    height: 36px;
  }

  .floating-tour-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* ==================== LOGIN PAGE SPARK LOGO ==================== */
/* <spark-logo> Web Component on the SSO/OAuth login right column.
   Mirrors LISA's pattern (ai-servicedesk) — same Web Component as the
   welcome screen, wrapped with credit + particles + Lucanet watermark. */

.login-shimmer-container {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, #14142a 0%, #1A1A2E 50%, #1d2342 100%);
  overflow: visible;
  z-index: 1;
}

/* ==================== THREAD MASCOT ==================== */
/* Fixed-positioned mascot beside the chat composer (LISA-equivalent of
   #lisa-thread-portal). Position computed in JS; this just controls
   visual transform + responsive hide. */
#spark-thread-portal {
  position: fixed;
  z-index: 50;
  width: 80px;
  height: 80px;
  transform: translateY(-50%) scale(0.7);
  transform-origin: center center;
  pointer-events: auto;
}
#spark-thread-portal spark-logo {
  display: block;
  width: 100%;
  height: 100%;
}

/* Hide on narrow viewports — no room beside composer */
@media (max-width: 900px) {
  #spark-thread-portal { display: none; }
}

/* Wrapper around <spark-logo> on the login page.
   transform: scale(1.2) mirrors LISA's login-lisa-wrapper — bumps the lockup
   for hero presence on the login right column. */
.login-spark-logo-wrapper {
  z-index: 2;
  animation: fadeInLogin 0.6s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 720px;
  padding: 0 24px;
  transform: scale(1.2);
  transform-origin: center center;
  margin-bottom: 4px;
}
.login-spark-logo-wrapper spark-logo { display: block; }
@keyframes fadeInLogin {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.login-spark-mascot {
  width: 84px;
  height: 84px;
  color: var(--spark-accent);
  filter: drop-shadow(0 4px 14px rgba(0, 160, 255, 0.35));
  z-index: 2;
  margin-bottom: 14px;
  animation: spark-pulse 4.5s ease-in-out infinite, fadeInLogin 0.6s ease;
}
.login-spark-mascot .login-sparkle { width: 100%; height: 100%; }
@keyframes spark-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.07) rotate(6deg); }
}
@keyframes fadeInLogin {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.login-shimmer-logo {
  font-family: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 3.4rem;
  letter-spacing: 0.04em;
  color: var(--spark-accent);
  animation: fadeInLogin 0.6s ease;
  z-index: 2;
  line-height: 1;
}

/* Tagline below the wordmark */
.login-shimmer-subtitle {
  margin-top: 16px;
  max-width: 420px;
  text-align: center;
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.62);
  text-transform: uppercase;
  z-index: 2;
}

/* Team credit - subtle positioning */
.login-shimmer-credit {
  position: absolute;
  bottom: 28px;
  left: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  z-index: 2;
}

.login-shimmer-credit svg {
  opacity: 0.7;
}

/* Lucanet watermark in bottom right */
.login-shimmer-watermark {
  position: absolute;
  bottom: 28px;
  right: 28px;
  z-index: 2;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.login-shimmer-watermark:hover {
  opacity: 0.9;
}

.login-shimmer-watermark img {
  height: 28px;
  width: auto;
  object-fit: contain;
}

/* Floating particles container */
.login-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.login-particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: particle-float linear infinite;
}

.login-particle--green {
  background: rgba(96, 165, 250, 0.5);
  box-shadow: 0 0 6px rgba(96, 165, 250, 0.3);
}

.login-particle--blue {
  background: rgba(96, 165, 250, 0.4);
  box-shadow: 0 0 6px rgba(96, 165, 250, 0.25);
}

@keyframes particle-float {
  0% {
    opacity: 0;
    transform: translateY(100vh) scale(0);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-20vh) scale(1);
  }
}

/* Light mode styling */
.light .login-shimmer-container,
html.light .login-shimmer-container {
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #e6ecff 100%);
}

.light .login-spark-mascot,
html.light .login-spark-mascot {
  color: var(--spark-accent);
  filter: drop-shadow(0 4px 14px rgba(0, 160, 255, 0.28));
}

.light .login-shimmer-logo,
html.light .login-shimmer-logo {
  color: var(--spark-accent);
}

.light .login-shimmer-subtitle,
html.light .login-shimmer-subtitle {
  color: rgba(64, 80, 96, 0.65);
}

.light .login-shimmer-credit,
html.light .login-shimmer-credit {
  color: rgba(64, 64, 64, 0.45);
}

/* Light mode particles - no glow/shadow */
.light .login-particle--green,
html.light .login-particle--green {
  background: rgba(59, 130, 246, 0.5);
  box-shadow: none;
}

.light .login-particle--blue,
html.light .login-particle--blue {
  background: rgba(59, 130, 246, 0.4);
  box-shadow: none;
}

/* Responsive adjustments - hide on mobile (login page is single column) */
@media (max-width: 1023px) {
  .login-shimmer-container {
    display: none;
  }
}

/* ==================== README HERO ==================== */

.prose .readme-hero {
  margin-top: 0;
  margin-bottom: 0;
}

.readme-hero {
  text-align: center;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
}

.readme-hero spark-logo {
  display: block;
  margin: 0 auto;
}

.readme-hero-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: block;
  object-fit: cover;
}

.readme-hero-title {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #fafafa;
  margin-bottom: 4px;
}

.readme-hero-subtitle {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}

/* Light mode */
.light .readme-hero-title,
html.light .readme-hero-title {
  color: #18181b;
}

.light .readme-hero-subtitle,
html.light .readme-hero-subtitle {
  color: rgba(64, 64, 64, 0.5);
}

/* ==================== ONBOARDING INTENTS ==================== */

.prose .onboarding-intents {
  margin-top: 1.25rem;
  margin-bottom: 0;
}

.onboarding-intents {
  display: flex;
  gap: 14px;
  margin-top: 20px;
  width: 100%;
}

.onboarding-intent {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  border-radius: 12px;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.2s ease, background 0.2s ease;
  opacity: 0;
  animation: intent-fade-in 0.3s ease-out forwards;
}

.intent-content {
  display: flex;
  flex-direction: column;
  order: 2;
}

.onboarding-intent:nth-child(1) { animation-delay: 0.1s; }
.onboarding-intent:nth-child(2) { animation-delay: 0.15s; }
.onboarding-intent:nth-child(3) { animation-delay: 0.2s; }

.onboarding-intent:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Blue - Ask */
.onboarding-intent--blue {
  border-color: rgba(59, 130, 246, 0.3);
}

.onboarding-intent--blue:hover {
  border-color: rgba(59, 130, 246, 0.5);
}

.onboarding-intent--blue .intent-icon {
  color: #3b82f6;
}

/* Orange - Request */
.onboarding-intent--orange {
  border-color: rgba(249, 115, 22, 0.3);
}

.onboarding-intent--orange:hover {
  border-color: rgba(249, 115, 22, 0.5);
}

.onboarding-intent--orange .intent-icon {
  color: #f97316;
}

/* Grey - Ask */
.onboarding-intent--grey {
  border-color: rgba(113, 113, 122, 0.3);
}

.onboarding-intent--grey:hover {
  border-color: rgba(113, 113, 122, 0.5);
}

.onboarding-intent--grey .intent-icon {
  color: #a1a1aa;
}

.intent-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.intent-icon svg {
  width: 28px;
  height: 28px;
  transition: transform 0.25s ease;
}

/* Hover animations for intent icons */
.onboarding-intent:hover .intent-icon svg {
  transform: scale(1.15);
}

.onboarding-intent--blue:hover .intent-icon svg {
  animation: icon-pulse 0.4s ease;
}

.onboarding-intent--orange:hover .intent-icon svg {
  animation: icon-bounce 0.4s ease;
}

.onboarding-intent--grey:hover .intent-icon svg {
  animation: icon-shake 0.4s ease;
}

@keyframes icon-shake {
  0%, 100% { transform: scale(1.15) rotate(0deg); }
  25% { transform: scale(1.15) rotate(-8deg); }
  75% { transform: scale(1.15) rotate(8deg); }
}

@keyframes icon-bounce {
  0%, 100% { transform: scale(1.15) translateY(0); }
  50% { transform: scale(1.15) translateY(-4px); }
}

@keyframes icon-pulse {
  0%, 100% { transform: scale(1.15); }
  50% { transform: scale(1.25); }
}

.intent-label {
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #fafafa;
  margin-bottom: 6px;
}

.intent-desc {
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: 12px;
  color: #a1a1aa;
  line-height: 1.4;
}

@keyframes intent-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Light mode */
.light .onboarding-intent,
html.light .onboarding-intent {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

.light .onboarding-intent:hover,
html.light .onboarding-intent:hover {
  background: rgba(0, 0, 0, 0.04);
}

.light .onboarding-intent--blue,
html.light .onboarding-intent--blue {
  border-color: rgba(37, 99, 235, 0.25);
}

.light .onboarding-intent--blue:hover,
html.light .onboarding-intent--blue:hover {
  border-color: rgba(37, 99, 235, 0.4);
}

.light .onboarding-intent--blue .intent-icon,
html.light .onboarding-intent--blue .intent-icon {
  color: #2563eb;
}

.light .onboarding-intent--orange,
html.light .onboarding-intent--orange {
  border-color: rgba(234, 88, 12, 0.25);
}

.light .onboarding-intent--orange:hover,
html.light .onboarding-intent--orange:hover {
  border-color: rgba(234, 88, 12, 0.4);
}

.light .onboarding-intent--orange .intent-icon,
html.light .onboarding-intent--orange .intent-icon {
  color: #ea580c;
}

.light .onboarding-intent--grey,
html.light .onboarding-intent--grey {
  border-color: rgba(82, 82, 91, 0.25);
}

.light .onboarding-intent--grey:hover,
html.light .onboarding-intent--grey:hover {
  border-color: rgba(82, 82, 91, 0.4);
}

.light .onboarding-intent--grey .intent-icon,
html.light .onboarding-intent--grey .intent-icon {
  color: #52525b;
}

.light .intent-label,
html.light .intent-label {
  color: #18181b;
}

.light .intent-desc,
html.light .intent-desc {
  color: #71717a;
}

/* Mobile: stack intents vertically */
@media (max-width: 600px) {
  .onboarding-intents {
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
  }

  .onboarding-intent {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 16px 20px;
  }

  .intent-content {
    flex: 1;
    order: 1;
  }

  .intent-icon {
    order: 2;
    margin-bottom: 0;
    margin-left: 20px;
    opacity: 0.85;
  }

  .intent-icon svg {
    width: 36px;
    height: 36px;
  }

  .intent-label {
    font-size: 16px;
    margin-bottom: 4px;
  }

  .intent-desc {
    font-size: 13px;
  }
}

/* ==================== CAROUSEL TIP CARDS ==================== */

.carousel-tip-pair {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.carousel-tip {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  text-align: left;
}

.carousel-tip--do {
  background: rgba(31, 173, 129, 0.08);
  border: 1px solid rgba(31, 173, 129, 0.25);
}

.carousel-tip--dont {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.carousel-tip-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-tip-icon svg {
  width: 20px;
  height: 20px;
}

.carousel-tip--do .carousel-tip-icon {
  background: rgba(31, 173, 129, 0.15);
  color: #1fad81;
}

.carousel-tip--dont .carousel-tip-icon {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.carousel-tip-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.carousel-tip-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.carousel-tip-badge svg {
  width: 12px;
  height: 12px;
}

.carousel-tip-badge--do {
  color: #1fad81;
}

.carousel-tip-badge--dont {
  color: #f87171;
}

.carousel-tip-text {
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #e4e4e7;
  line-height: 1.4;
}

/* Light mode tip cards */
.light .carousel-tip--do,
html.light .carousel-tip--do {
  background: rgba(0, 133, 41, 0.06);
  border-color: rgba(0, 133, 41, 0.2);
}

.light .carousel-tip--dont,
html.light .carousel-tip--dont {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.2);
}

.light .carousel-tip--do .carousel-tip-icon,
html.light .carousel-tip--do .carousel-tip-icon {
  background: rgba(0, 133, 41, 0.12);
  color: #008529;
}

.light .carousel-tip--dont .carousel-tip-icon,
html.light .carousel-tip--dont .carousel-tip-icon {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

.light .carousel-tip-badge--do,
html.light .carousel-tip-badge--do {
  color: #008529;
}

.light .carousel-tip-badge--dont,
html.light .carousel-tip-badge--dont {
  color: #dc2626;
}

.light .carousel-tip-text,
html.light .carousel-tip-text {
  color: #3f3f46;
}

/* Mobile tip cards */
@media (max-width: 600px) {
  .carousel-tip-pair {
    gap: 6px;
  }

  .carousel-tip {
    padding: 10px 12px;
    gap: 10px;
  }

  .carousel-tip-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .carousel-tip-icon svg {
    width: 16px;
    height: 16px;
  }

  .carousel-tip-badge {
    font-size: 10px;
  }

  .carousel-tip-text {
    font-size: 12px;
  }
}

/* ==================== README TIPS CAROUSEL ==================== */

.prose .readme-tips {
  margin-top: 1.25rem;
  margin-bottom: 0;
  font-size: 14px;
}

.readme-tips {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 1rem 0;
  padding: 1.25rem 1.5rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.readme-tips-header-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 20%;
  padding: 0.5rem 1rem;
}

.readme-tips-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.readme-tips-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #3b82f6;
  white-space: nowrap;
}

.readme-tips-carousel {
  flex: 0 0 80%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.readme-tips-track {
  position: relative;
  height: 120px;
}

.readme-tips-track .tips-carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.readme-tips-track .tips-carousel-item.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.readme-tips-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.readme-tips-arrow {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #a1a1aa;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.readme-tips-arrow:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #e4e4e7;
}

.readme-tips-dots {
  display: flex;
  gap: 6px;
}

.readme-tips-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}

.readme-tips-dot.active {
  background: #3b82f6;
  transform: scale(1.3);
}

.readme-tips-dot:hover:not(.active) {
  background: rgba(255, 255, 255, 0.3);
}

/* Tip card sizing inside readme-tips */
.readme-tips-track .carousel-tip {
  padding: 10px 14px;
  border-radius: 8px;
  gap: 10px;
}

.readme-tips-track .carousel-tip-pair {
  gap: 6px;
}

.readme-tips-track .carousel-tip-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.readme-tips-track .carousel-tip-icon svg {
  width: 14px;
  height: 14px;
}

.readme-tips-track .carousel-tip-text {
  font-size: 13px;
}

.readme-tips-track .carousel-tip-badge {
  font-size: 9px;
}

.readme-tips-track .carousel-tip-badge svg {
  width: 10px;
  height: 10px;
}

/* Light mode tips carousel */
.light .readme-tips,
html.light .readme-tips {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

.light .readme-tips-label,
html.light .readme-tips-label {
  color: #2563eb;
}

.light .readme-tips-arrow,
html.light .readme-tips-arrow {
  background: rgba(0, 0, 0, 0.04);
  color: #71717a;
}

.light .readme-tips-arrow:hover,
html.light .readme-tips-arrow:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #3f3f46;
}

.light .readme-tips-dot,
html.light .readme-tips-dot {
  background: rgba(0, 0, 0, 0.12);
}

.light .readme-tips-dot.active,
html.light .readme-tips-dot.active {
  background: #2563eb;
}

.light .readme-tips-dot:hover:not(.active),
html.light .readme-tips-dot:hover:not(.active) {
  background: rgba(0, 0, 0, 0.25);
}

/* Mobile tips carousel */
@media (max-width: 600px) {
  .readme-tips {
    flex-direction: column;
  }

  .readme-tips-header-row {
    flex-direction: row;
    flex: none;
    width: 100%;
    justify-content: center;
  }

  .readme-tips-carousel {
    flex: none;
    width: 100%;
  }

  .readme-tips-track {
    height: 120px;
  }
}

/* ==================== GOOD TO KNOW ==================== */

.prose .readme-good-to-know {
  margin-top: 1.25rem;
  margin-bottom: 0;
  font-size: 14px;
}

.readme-good-to-know {
  margin: 0.75rem 0;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.readme-good-to-know-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.readme-good-to-know-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
}

.readme-good-to-know-item strong {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  white-space: nowrap;
  min-width: 90px;
}

.readme-good-to-know-icon {
  display: flex;
  align-items: center;
  color: #3b82f6;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Light mode */
.light .readme-good-to-know,
html.light .readme-good-to-know {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

.light .readme-good-to-know-item,
html.light .readme-good-to-know-item {
  color: rgba(0, 0, 0, 0.5);
}

.light .readme-good-to-know-item strong,
html.light .readme-good-to-know-item strong {
  color: rgba(0, 0, 0, 0.7);
}

.light .readme-good-to-know-icon,
html.light .readme-good-to-know-icon {
  color: #2563eb;
}

/* ==================== PROSE OVERRIDES (Chainlit wraps readme in .prose) ==================== */

.prose .itsd-info-item--link a,
.prose .itsd-info a {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  color: inherit !important;
  text-decoration: none !important;
  white-space: nowrap;
  flex-wrap: nowrap;
}

.prose .itsd-info-item--link a:hover {
  color: #3b82f6 !important;
}

.light .prose .itsd-info-item--link a:hover,
html.light .prose .itsd-info-item--link a:hover {
  color: #2563eb !important;
}

.prose .itsd-info-item--link a > * {
  flex-shrink: 0;
}

.prose .onboarding-intents,
.prose .readme-tips,
.prose .readme-good-to-know,
.prose .itsd-info {
  margin-top: 1.25rem;
  margin-bottom: 0;
}

.prose .readme-credits {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.prose .itsd-info {
  font-size: 14px;
}

/* ==================== INFO BAR ==================== */

.itsd-info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0.75rem 0;
  padding: 0.6rem 0.5rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

.itsd-info-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 1.2rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.itsd-info-item--link {
  flex-shrink: 1;
  min-width: 0;
}

.itsd-info-icon {
  display: flex;
  align-items: center;
  color: #3b82f6;
  flex-shrink: 0;
}

.itsd-info-text {
  white-space: nowrap;
}

.itsd-info-text strong {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}

.itsd-info-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.itsd-info-external {
  opacity: 0.4;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

/* Light mode */
.light .itsd-info,
html.light .itsd-info {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.45);
}

.light .itsd-info-icon,
html.light .itsd-info-icon {
  color: #2563eb;
}

.light .itsd-info-text strong,
html.light .itsd-info-text strong {
  color: rgba(0, 0, 0, 0.7);
}

.light .itsd-info-divider,
html.light .itsd-info-divider {
  background: rgba(0, 0, 0, 0.08);
}

/* Mobile: stack vertically */
@media (max-width: 600px) {
  .itsd-info {
    flex-direction: column;
    gap: 0;
    padding: 0.75rem;
  }

  .itsd-info-item {
    padding: 0.5rem 0.75rem;
    width: 100%;
    justify-content: center;
  }

  .itsd-info-divider {
    width: 60%;
    height: 1px;
    margin: 0 auto;
  }
}

/* ==================== TIPS HEADER MASCOT SIZING ==================== */
/* <spark-logo mascot-only> in the tips header column. The mascot SVG fills
   its host, so without an explicit size it would expand to the column width.
   LISA's bunny has natural canvas dimensions and doesn't need this. */
.readme-tips-header-row spark-logo[mascot-only] {
  display: block;
  width: 56px;
  height: 56px;
}

/* ==================== README CREDITS ==================== */

.readme-credits {
  text-align: center;
  padding: 2rem 0 0.5rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  line-height: 1.6;
}

.readme-credits p {
  margin: 0.25rem 0;
}

.readme-credits strong {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
}

.light .readme-credits,
html.light .readme-credits {
  color: rgba(0, 0, 0, 0.3);
}

.light .readme-credits strong,
html.light .readme-credits strong {
  color: rgba(0, 0, 0, 0.5);
}