@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@1,9..144,400..700&family=Geist:wght@400;500;600;700&display=swap');

/* ─── Design Tokens (from Figma: Obra shadcn UI Kit) ────────────────── */
:root {
  --color-background:    #ffffff;
  --color-foreground:    #0a0a0a;
  --color-muted:         #525252;
  --color-border:        #e5e5e5;
  --color-accent:        #f5f5f5;
  --color-foreground-alt:#404040;

  --font-family:         'Geist', system-ui, sans-serif;
  --font-display:        'Fraunces', Georgia, serif;
  --text-display-size:   72px;
  --text-display-lh:     1.05;
  --text-display-ls:     -2px;
  --text-h1-size:        48px;
  --text-h1-lh:          48px;
  --text-h1-ls:          -1.5px;
  --text-h3-size:        24px;
  --text-h3-lh:          28.8px;
  --text-h3-ls:          -1px;
  --text-body-size:      16px;
  --text-body-lh:        24px;
  --text-sm-size:        14px;
  --text-sm-lh:          20px;
  --text-xs-size:        12px;
  --text-xs-lh:          16px;

  /* Tiers added to close the 48→24 gap that every page was improvising
     (h2 / large-title / stat / lead / micro). Same px values the pages
     already used in practice — now referenceable instead of hardcoded. */
  --text-h2-size:          32px;
  --text-h2-lh:            1.15;
  --text-h2-ls:            -1px;
  --text-large-title-size: 28px;
  --text-large-title-lh:   1.15;
  --text-large-title-ls:   -0.6px;
  --text-stat-size:        40px;
  --text-stat-lh:          1;
  --text-stat-ls:          -1.5px;
  --text-lead-size:        18px;
  --text-lead-lh:          1.4;
  --text-lead-ls:          -0.3px;
  --text-micro-size:       10px;
  --text-micro-lh:         1.3;

  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-5xl: 64px;
  --space-page: 48px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 16px;

  --sidebar-width: 260px;

  /* Semantic z-index scale — use these instead of arbitrary integers */
  --z-sticky:    100;   /* sticky headers */
  --z-sidebar:   200;   /* fixed sidebar */
  --z-dropdown:  300;   /* dropdowns, menus */
  --z-popover:   400;   /* floating popovers */
  --z-overlay:   500;   /* dialogs, overlays */
  --z-tooltip:   700;   /* tooltips (above overlays) */
  --z-cursor:    900;   /* custom cursor */

  /* Blue accent — matches the orb palette */
  --color-purple:    #2563eb;
  --color-purple-bg: rgba(37, 99, 235, 0.08);

  /* shadcn-style semantic roles (added for cross-check audit) */
  --color-primary:               var(--color-foreground);
  --color-primary-foreground:    var(--color-background);
  --color-destructive:           #ef4444;
  --color-destructive-foreground:#ffffff;
  --color-ring:                  var(--color-purple);
  --color-success:               #22c55e;
  --color-warning:               #f59e0b;
}

/* ─── Dark mode tokens ───────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-background:     #0a0a0a;
  --color-foreground:     #fafafa;
  --color-muted:          #b5b5b5;
  --color-border:         #262626;
  --color-accent:         #171717;
  --color-foreground-alt: #d4d4d4;

  /* Blue shifts lighter for dark backgrounds */
  --color-purple:    #60a5fa;
  --color-purple-bg: rgba(96, 165, 250, 0.10);

  /* Destructive shifts slightly lighter on dark for contrast */
  --color-destructive:           #f87171;
  --color-destructive-foreground:#0a0a0a;
}

/* ─── Custom cursor (gated on .has-custom-cursor — JS sets this only
       after initCursor() succeeds, so a JS failure leaves the system
       pointer visible for accessibility) ─────────────────────────────── */
@media (hover: hover) {
  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button,
  body.has-custom-cursor [role="button"],
  body.has-custom-cursor input,
  body.has-custom-cursor select,
  body.has-custom-cursor label { cursor: none; }
}

#cursor-dot {
  position: fixed;
  left: 0; top: 0;
  width: 9px;
  height: 9px;
  background: var(--color-foreground);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  /* transform set by JS — compositor-only movement, no layout paint */
}

#cursor-ring {
  position: fixed;
  left: 0; top: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-foreground);
  border-radius: 50%;
  pointer-events: none;
  z-index: calc(var(--z-cursor) - 1);
  /* transform set by JS — opacity only transition, width/height never change */
  transition: opacity 0.18s ease;
}

@media (hover: none) {
  #cursor-dot, #cursor-ring { display: none; }
}

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

/* Heading balance + long-word resilience (i18n: German runs ~30% longer) */
h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; }
p, li, td, th, figcaption { overflow-wrap: break-word; }

body {
  font-family: var(--font-family);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-foreground);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  transition: margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.25s ease, color 0.25s ease;
  /* Content area shifts right to clear the fixed sidebar */
  margin-left: var(--sidebar-width);
  /* Compositor hint — margin-left animates on sidebar toggle */
  will-change: margin-left;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ─── Accessibility: focus ring + skip link + sr-only ───────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Buttons and inputs already have border-radius — let outline follow shape */
button:focus-visible,
.btn:focus-visible,
.sidebar-btn:focus-visible,
.sidebar-nav-link:focus-visible,
.sidebar-section-link:focus-visible,
.sidebar-linkedin:focus-visible,
.sidebar-icon-btn:focus-visible,
.nav-link:focus-visible,
.nav-lang-trigger:focus-visible,
.nav-lang-option:focus-visible,
.theme-toggle:focus-visible,
.convo-item:focus-visible,
.convo-menu-btn:focus-visible,
.ds-switch-btn:focus-visible {
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: var(--z-cursor);
  padding: 8px 16px;
  background: var(--color-foreground);
  color: var(--color-background);
  border-radius: var(--radius-md);
  font-size: var(--text-sm-size);
  font-weight: 600;
  transform: translateY(calc(-100% - var(--space-md) - 8px));
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--color-ring); outline-offset: 2px; }

/* ─── Layout helpers ─────────────────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-page);
}

/* ─── Sidebar (fixed left, always visible on desktop) ───────────────── */
.chat-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: var(--sidebar-width);
  background: var(--color-background);
  border-right: 1px solid var(--color-border);
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  /* No background-color transition — during the post-loader slide-in
     the smooth bg fade caught intermediate states (the orb halo
     bleeding through a partly-transparent sidebar) and read as a
     blue→pink gradient strip. Snap-switch on theme toggle is fine. */
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.25s ease;
  /* Compositor hints — width animates on desktop collapse, transform on mobile */
  contain: layout style;
  will-change: width, transform;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 var(--space-md);
  flex-shrink: 0;
  /* No border — section labels handle visual grouping below */
}

.sidebar-logo {
  font-size: var(--text-sm-size);
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--color-foreground);
}

.sidebar-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}

/* Shadcn-style ghost hover — subtle wash, no accent color. */
.sidebar-icon-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-foreground);
}
[data-theme="dark"] .sidebar-icon-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px var(--space-xs);
  flex-shrink: 0;
}

.sidebar-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: 6px var(--space-md); /* 6px vertical — shadcn py-1.5 */
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  color: var(--color-muted);
  font-family: var(--font-family);
  font-size: var(--text-sm-size);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Shadcn-style ghost hover — subtle wash, no accent color. */
.sidebar-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-foreground);
}
[data-theme="dark"] .sidebar-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-xs) var(--space-xs) 0;
  flex-shrink: 0;
}

/* ─── Sidebar section labels (replaces dividers as group headers) ────── */
.sidebar-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-muted);
  /* Top padding 16px gives breathing room above each group header so
     sections read as distinct segments — ChatGPT-style. 4pt grid.       */
  padding: var(--space-md) var(--space-md) var(--space-2xs);
  margin: 0;
  flex-shrink: 0;
  line-height: 1;
}

/* ─── "Vera" — brand-blue sidebar label ─────────────────────────────── */
.vera-name {
  color: var(--color-purple);
  transition: filter 0.22s ease;
  cursor: default;
  user-select: none;
}

.vera-name:hover {
  filter: brightness(1.2) drop-shadow(0 0 6px rgba(96, 165, 250, 0.4));
}

[data-theme="light"] .vera-name:hover {
  filter: brightness(0.85) drop-shadow(0 0 4px rgba(37, 99, 235, 0.3));
}

/* ─── Vera tooltip ───────────────────────────────────────────────────── */
/*
 * position: fixed so the card floats to the RIGHT of the sidebar,
 * completely outside the sidebar column — no overlap with nav buttons.
 * Vertical position is set by JS (initVeraTooltip) based on the
 * .vera-label bounding rect. Shown via .is-visible class toggle.
 */
.vera-name-wrap { display: inline-block; }

.vera-tooltip {
  position: fixed;
  /* left and top are set dynamically by JS */
  width: 220px;
  /* Subtle blue wash fading to card background */
  background: linear-gradient(
    160deg,
    rgba(37,99,235,0.07) 0%,
    var(--color-background) 55%
  );
  border: 1px solid rgba(96,165,250,0.28);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow:
    0 4px 24px rgba(0,0,0,0.10),
    0 0 0 1px rgba(96,165,250,0.06);
  z-index: var(--z-tooltip); /* above all GSAP stacking contexts — tooltip is at body level */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-8px);
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
  overflow: hidden;

  /* reset inherited label styles */
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

/* Gradient accent bar across the top of the card */
.vera-tooltip::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, #3b82f6, #60a5fa, #93c5fd);
}

[data-theme="dark"] .vera-tooltip {
  box-shadow:
    0 4px 28px rgba(0,0,0,0.45),
    0 0 0 1px rgba(96,165,250,0.10);
}

/* left-pointing caret — points back toward the sidebar */
.vera-tooltip::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 18px;
  transform: rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--color-background);
  border-bottom: 1px solid rgba(96,165,250,0.28);
  border-left: 1px solid rgba(96,165,250,0.28);
}

/* show — toggled via JS .is-visible class */
.vera-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.vera-tooltip-title {
  font-size: var(--text-sm-size);
  font-weight: 600;
  color: var(--color-foreground);
  margin-bottom: var(--space-xs);
}

.vera-tooltip-body {
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color: var(--color-muted);
}

/* ─── Sidebar section drawers ────────────────────────────────────────── */
.sidebar-section {
  display: flex;
  flex-direction: column;
}

.sidebar-section-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px var(--space-md); /* 6px vertical — shadcn py-1.5 */
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  color: var(--color-foreground-alt);
  font-family: var(--font-family);
  font-size: var(--text-xs-size);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease;
}

.sidebar-section-trigger:hover { color: var(--color-foreground); }

.sidebar-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  color: var(--color-muted);
}

.sidebar-section.is-open .sidebar-chevron {
  transform: rotate(180deg);
}

.sidebar-section-items {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 2px var(--space-xs) var(--space-xs);
}

.sidebar-section.is-open .sidebar-section-items {
  display: flex;
}

.sidebar-section-link {
  display: block;
  padding: 6px var(--space-md);
  font-size: var(--text-sm-size);
  color: var(--color-muted);
  border-radius: var(--radius-lg);
  transition: background 0.1s ease, color 0.1s ease;
}

/* Shadcn-style ghost hover — subtle wash, no accent color. */
.sidebar-section-link:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-foreground);
}
[data-theme="dark"] .sidebar-section-link:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* ─── Sidebar conversation list ─────────────────────────────────────── */
.sidebar-convo-list {
  flex: 1 1 0;
  min-height: 0;         /* lets flex shrink below content height */
  overflow-y: auto;
  padding: var(--space-xs);
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE / Edge */
}
.sidebar-convo-list::-webkit-scrollbar { display: none; } /* Chrome / Safari */

/* Connect-with-me pinned just above the user footer */
.sidebar-connect {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--space-xs) var(--space-xs);
}

/* ─── Convo item row (wraps button + menu trigger) ──────────────────── */
.convo-item-row {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: var(--radius-lg);
}

.convo-item-row:hover .convo-menu-btn,
.convo-item-row.menu-open .convo-menu-btn { opacity: 1; }

.convo-menu-btn {
  position: absolute;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
  z-index: 1;
}
.convo-menu-btn:hover { background: var(--color-accent); color: var(--color-foreground); }

.convo-menu-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 2px);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  z-index: var(--z-overlay);
  min-width: 120px;
  overflow: hidden;
}
[data-theme="dark"] .convo-menu-dropdown { box-shadow: 0 4px 20px rgba(0,0,0,0.45); }
.convo-item-row.menu-open .convo-menu-dropdown { display: block; }

.convo-menu-action {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  font-family: var(--font-family);
  font-size: var(--text-xs-size);
  font-weight: 500;
  color: var(--color-destructive);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
}
.convo-menu-action:hover { background: color-mix(in srgb, var(--color-destructive) 8%, transparent); }

.convo-item {
  display: block;
  width: 100%;
  padding: 6px var(--space-md); /* 6px vertical — shadcn py-1.5 */
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  color: var(--color-muted);
  font-family: var(--font-family);
  font-size: var(--text-sm-size);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Hover: subtle wash. Active state keeps the accent colour to signal
   "this is the selected conversation" — but hover is muted.            */
.convo-item:hover { background: rgba(0, 0, 0, 0.04); }
[data-theme="dark"] .convo-item:hover { background: rgba(255, 255, 255, 0.05); }
.convo-item.active { background: var(--color-purple-bg); color: var(--color-purple); font-weight: 500; }

/* ─── Sidebar footer: user area + CTA ───────────────────────────────── */
.sidebar-footer {
  flex-shrink: 0;
  padding: var(--space-xs) var(--space-xs) var(--space-md);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
}

.sidebar-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-foreground);
  color: var(--color-background);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-user-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sidebar-user-name {
  font-size: var(--text-sm-size);
  font-weight: 600;
  color: var(--color-foreground);
  line-height: 1.2;
}

.sidebar-user-plan {
  font-size: 11px;
  color: var(--color-muted);
  line-height: 1;
}

.sidebar-cta-text {
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color: var(--color-muted);
  padding: 0 var(--space-md);
}

.sidebar-contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-foreground);
  color: var(--color-background);
  font-size: var(--text-sm-size);
  font-weight: 500;
  font-family: var(--font-family);
  transition: opacity 0.15s ease;
}

/* Shadcn-style: solid button → opacity drop. No transform. */
.sidebar-contact-btn:hover {
  opacity: 0.9;
}

.sidebar-linkedin {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 6px var(--space-md); /* 6px vertical — shadcn py-1.5 */
  border-radius: var(--radius-lg);
  color: var(--color-muted);
  font-size: var(--text-sm-size);
  font-weight: 500;
  position: relative;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Shadcn-style ghost hover — subtle wash, no accent color. */
.sidebar-linkedin:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-foreground);
}
[data-theme="dark"] .sidebar-linkedin:hover {
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-linkedin-icon { flex-shrink: 0; }

.sidebar-export-icon {
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.5;
}

.sidebar-linkedin:hover .sidebar-export-icon { opacity: 1; }

/* ─── Search popover ─────────────────────────────────────────────────── */
.search-chats-wrap { position: relative; }

/* Moved to <body> by JS to escape GSAP-transformed sidebar containing block.
   left/top are set dynamically from getBoundingClientRect() so the popover
   floats correctly relative to the viewport regardless of sidebar transforms. */
.sidebar-popover {
  position: fixed;
  /* left / top injected by JS */
  transform: translateY(-50%) translateX(-6px);
  width: 230px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}

.sidebar-popover::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--color-background);
  border-left: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.sidebar-popover.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.popover-title {
  font-size: var(--text-sm-size);
  font-weight: 600;
  color: var(--color-foreground);
  margin-bottom: var(--space-xs);
}

.popover-body {
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color: var(--color-muted);
}

/* ─── New chat tooltip ───────────────────────────────────────────────── */
.new-chat-wrap { position: relative; }

.new-chat-tip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: var(--color-foreground);
  color: var(--color-background);
  font-size: var(--text-xs-size);
  font-weight: 500;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  z-index: var(--z-popover);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.new-chat-tip::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 7px;
  height: 7px;
  background: var(--color-foreground);
}

.new-chat-tip.is-visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ─── Sidebar flat nav ───────────────────────────────────────────────── */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px var(--space-xs) var(--space-xs);
}

.sidebar-nav-link {
  display: block;
  padding: 6px var(--space-md); /* 6px vertical — shadcn py-1.5 */
  font-size: var(--text-sm-size);
  font-weight: 500;
  color: var(--color-muted);
  border-radius: var(--radius-lg);
  position: relative;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Shadcn-style ghost hover — subtle wash, no accent color.
   Active state keeps the accent to signal current section.            */
.sidebar-nav-link:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-foreground);
}
[data-theme="dark"] .sidebar-nav-link:hover {
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-nav-link.is-active {
  background: var(--color-purple-bg);
  color: var(--color-purple);
  font-weight: 600;
}

/* Short vertical accent bar on the selected item — sits inside the left
   padding, centered vertically so it spans roughly half the row height. */
.sidebar-nav-link.is-active::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 55%;
  border-radius: 2px;
  background: var(--color-purple);
}

/* ─── Liquid glass border animation (@property) ──────────────────────── */
/*
 * @property registers --lg-angle as an animatable <angle>.
 * The conic-gradient on .suggestion-chip::after uses this value so the
 * browser engine can interpolate it smoothly — producing a crisp white
 * specular arc that sweeps counterclockwise around the border ring.
 *
 * Graceful degradation: if @property is unsupported the ::after is
 * invisible (opacity:0); the colour/background hover shift still works.
 */
@property --lg-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes lg-border-sweep {
  from { --lg-angle: 0deg; }
  to   { --lg-angle: -360deg; } /* counterclockwise revolution */
}

/* lg-border-sweep drives .suggestion-chip::after — see index.html */

/* ─── App bar (sticky top of content area) ───────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-background);
  /* No bg transition — same reason as .chat-sidebar: smooth bg fade
     during the post-loader slide-in caught mid-states that read as
     gradient strips. The .scrolled state below still transitions
     (different rule, scoped to scroll). */
}

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.60);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}

[data-theme="dark"] .site-header.scrolled {
  background: rgba(10, 10, 10, 0.80);
}

.app-bar {
  border-bottom: 1px solid var(--color-border);
}

.app-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 var(--space-xl);  /* 24px — tighter than --space-page */
}

/* ─── App bar nav links ──────────────────────────────────────────────── */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);  /* 16px — down from 24px */
  margin-left: var(--space-xs);
}

.nav-link {
  font-size: var(--text-sm-size);
  font-weight: 500;
  color: var(--color-muted);
  transition: color 0.15s ease;
  white-space: nowrap;
}

.nav-link:hover { color: var(--color-foreground); }

/* ─── Resume nav link — recruiter-facing CTA ──────────────────────────
 * Outlined pill — reads as "button" not "selected page". Thin border,
 * transparent fill, faint blue wash on hover. ✦ glyph in Vera blue
 * carries the brand cohesion; label sits at regular nav weight.
 */
.nav-link-resume {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  color: var(--color-foreground);
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.nav-link-resume:hover {
  color: var(--color-foreground);
  border-color: rgba(96, 165, 250, 0.55);
  background-color: rgba(96, 165, 250, 0.08);
}

[data-theme="light"] .nav-link-resume:hover {
  border-color: rgba(37, 99, 235, 0.45);
  background-color: rgba(37, 99, 235, 0.06);
}

.nav-resume-glyph {
  font-size: 13px;
  line-height: 1;
  color: var(--color-purple);
  transition: filter 0.22s ease, transform 0.22s ease;
}

.nav-link-resume:hover .nav-resume-glyph {
  filter: brightness(1.25) drop-shadow(0 0 4px rgba(96, 165, 250, 0.45));
  transform: rotate(72deg);
}

/* ─── Hamburger (mobile only — reveals sidebar) ──────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  /* UA stylesheet sets `color: ButtonText` on <button>, which doesn't
     follow our theme tokens — in dark mode the SVG stroke="currentColor"
     was resolving to pure black, making the icon invisible against the
     dark canvas. Force inherit so it picks up --color-foreground. */
  color: inherit;
}

.nav-hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--color-foreground);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform-origin: center;
}

.nav-hamburger.is-open span:nth-child(1) { transform: translateY(6.5px)  rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── Nav right group ────────────────────────────────────────────────── */
.nav-left  { display: flex; align-items: center; gap: var(--space-xs); }
.nav-right { display: flex; align-items: center; gap: var(--space-2xl); }

/* ─── Mobile menu split — Phase 1 (markup only, hidden until Phase 2) ──
   Right-side .nav-menu-trigger button + .nav-menu-overlay full-screen
   panel are shipped as DOM scaffolding. They are kept hidden until
   their CSS + JS handler land in a future pass. Without these display:
   none defaults, both would render as visible-but-broken elements.    */
.nav-menu-trigger { display: none; }
.nav-menu-overlay { display: none; }

/* ─── Theme toggle ───────────────────────────────────────────────────── */
.theme-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background: #d4d4d4;
  border: 1px solid #b8b8b8;
  border-radius: 999px;
  padding: 3px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
  flex-shrink: 0;
}

[data-theme="dark"] .theme-toggle {
  background: #3a3a3a;
  border-color: #4a4a4a;
}

.theme-toggle-thumb {
  position: relative;
  width: 16px;
  height: 16px;
  background: var(--color-foreground);
  border-radius: 50%;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-background);
}

[data-theme="dark"] .theme-toggle-thumb { transform: translateX(22px); }

.theme-icon-sun,
.theme-icon-moon {
  position: absolute;
  width: 9px;
  height: 9px;
  transition: opacity 0.2s ease;
}

.theme-icon-moon { opacity: 0; }
.theme-icon-sun  { opacity: 1; }

[data-theme="dark"] .theme-icon-sun  { opacity: 0; }
[data-theme="dark"] .theme-icon-moon { opacity: 1; }

/* ─── Language dropdown ──────────────────────────────────────────────── */
.nav-lang { position: relative; }

.nav-lang-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-family);
  font-size: var(--text-sm-size);
  color: var(--color-foreground-alt);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease;
  line-height: 1;
}

.nav-lang-trigger:hover { color: var(--color-foreground); }

.nav-lang-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 4px;
  min-width: 128px;
  list-style: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}

.nav-lang-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-lang-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  text-align: center;
  font-family: var(--font-family);
  font-size: var(--text-sm-size);
  color: var(--color-foreground-alt);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}

.nav-lang-option:hover { background: var(--color-accent); color: var(--color-foreground); }
.nav-lang-option.active { color: var(--color-foreground); font-weight: 600; }

/* ─── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-family);
  font-size: var(--text-sm-size);
  font-weight: 500;
  line-height: var(--text-sm-lh);
  border-radius: var(--radius-lg);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
              opacity 0.15s ease;
}

.btn-primary {
  background: linear-gradient(145deg, #0a0a0a 0%, #0a0a0a 100%);
  color: var(--color-background);
  border-color: var(--color-foreground);
}

/* Shadcn-standard hover: opacity drop on solid buttons, subtle wash on
   outlines. No transform, no extra shadow. Same shape, slightly different
   surface — predictable across the page.                                  */
.btn-primary:hover {
  opacity: 0.9;
}

.btn-outline {
  background: transparent;
  color: var(--color-foreground);
  border-color: var(--color-border);
}

.btn-outline:hover {
  /* Subtle black wash — best-practice 4% opacity for light-mode hover. */
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .btn-primary {
  background: linear-gradient(145deg, #fafafa 0%, #e5e5e5 100%);
  color: #0a0a0a;
  border-color: #e5e5e5;
}

/* Dark mode: same opacity drop for solid; lighten wash for outline. */
[data-theme="dark"] .btn-outline:hover {
  /* Subtle white wash — best-practice 6% opacity for dark-mode hover. */
  background: rgba(255, 255, 255, 0.06);
}

/* ─── New-chat scroll dialog ─────────────────────────────────────────── */
.nchat-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: var(--space-md);
}

.nchat-dialog[hidden] { display: none; }

.nchat-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  max-width: 340px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.nchat-title {
  font-size: var(--text-body-size);
  font-weight: 600;
  color: var(--color-foreground);
  margin-bottom: var(--space-xs);
}

.nchat-body {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-lh);
  color: var(--color-muted);
  margin-bottom: var(--space-xl);
}

.nchat-actions {
  display: flex;
  gap: var(--space-xs);
  justify-content: flex-end;
}

/* ─── Pending link state (source links awaiting real URL) ────────────── */
/* Muted until a real URL is wired in. Links still navigate to #reviews
   (the endorsements section) so keyboard users get meaningful action. */
.review-source--pending {
  opacity: 0.35;
}

/* ─── Footer ─────────────────────────────────────────────────────────── */
footer { padding: var(--space-2xl) 0; }

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-page);
}

footer p { font-size: var(--text-xs-size); color: var(--color-muted); }

.footer-links { display: flex; gap: var(--space-xl); }

.footer-links a {
  font-size: var(--text-xs-size);
  color: var(--color-muted);
  transition: color 0.15s ease;
}

.footer-links a:hover { color: var(--color-foreground); }

/* ─── Sidebar collapse (desktop — thin icon strip) ──────────────────── */
@media (min-width: 961px) {
  body.sidebar-collapsed { margin-left: 54px; }
  body.sidebar-collapsed .chat-sidebar { width: 54px; }

  body.sidebar-collapsed .sidebar-logo,
  body.sidebar-collapsed .sidebar-section-label,
  body.sidebar-collapsed .sidebar-nav,
  body.sidebar-collapsed .sidebar-convo-list,
  body.sidebar-collapsed .sidebar-connect,
  body.sidebar-collapsed .sidebar-divider,
  body.sidebar-collapsed .sidebar-footer,
  body.sidebar-collapsed .sidebar-btn > span,
  body.sidebar-collapsed .new-chat-tip { display: none !important; }

  body.sidebar-collapsed .sidebar-header {
    justify-content: center;
    padding: 0;
  }

  body.sidebar-collapsed .sidebar-actions {
    padding: 8px 0;
    align-items: center;
  }

  body.sidebar-collapsed .sidebar-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
  }
}


/* ─── Mobile: sidebar slides in, hamburger visible ───────────────────── */
/* tablet: 601px – 960px  |  phone: max-width: 600px                      */

@media (max-width: 960px) {
  :root { --space-page: 32px; }
  body { margin-left: 0; }

  .nav-hamburger { display: flex; }

  .chat-sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow   0.25s ease,
                background-color 0.25s ease, border-color 0.25s ease;
    /* No shadow while off-canvas — a 24px blur on a fixed-position panel
       sitting at translateX(-100%) was still bleeding a faint streak
       past the left viewport edge on narrow phones. Shadow now only
       paints when the sidebar is actually open (and visible).         */
    box-shadow: none;
  }

  .chat-sidebar.is-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
  }
}



@media (max-width: 600px) {
  :root { --space-page: 16px; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  /* Resume + Contact stay visible on phones — earlier this block hid
     them with `.nav-links { display: none }`, which left no way to
     reach those CTAs on mobile. Tighten their typography + gap so
     they fit in the 44px bar alongside the icon, lang dropdown, and
     theme toggle.                                                      */
  .nav-links { display: flex; gap: 12px; margin-left: 8px; }
  .nav-link  { font-size: 13px; }
  /* Compact mobile nav — py-2 px-4 equivalent. The 52px desktop bar
     reads as desktop chrome on phones; tightening it to 44px lets the
     hero claim more vertical real-estate. (Hero offsets are anchored
     to 52px, so we keep the bar at 44px and live with a 4px breathing
     buffer rather than touching every offset calc across the file.) */
  .app-bar-inner { height: 44px; padding: 0 12px; }
  /* Tighten the right-side group too — language dropdown padding eats
     real estate the nav links now need.                                */
  .nav-right { gap: 12px; }
}

/* ─── Design system page navigation ─────────────────────────────────── */
.ds-switcher {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.ds-switch-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: var(--text-xs-size);
  font-weight: 500;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  background: transparent;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  cursor: pointer;
}

.ds-switch-btn:hover:not(.is-active) {
  border-color: var(--color-foreground-alt);
  color: var(--color-foreground);
}

.ds-switch-btn.is-active {
  background: var(--color-foreground);
  color: var(--color-background);
  border-color: var(--color-foreground);
}

.ds-nav-footer {
  border-top: 1px solid var(--color-border);
  padding: 32px var(--space-page);
}

.ds-nav-row {
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.ds-nav-spacer { flex: 1; }

.ds-nav-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  background: var(--color-background);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* No container hover — plain card. */

.ds-nav-next { text-align: right; }

.ds-nav-dir {
  font-size: var(--text-xs-size);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.ds-nav-title {
  font-size: var(--text-body-size);
  font-weight: 600;
  color: var(--color-foreground);
  margin-top: 2px;
}

.ds-nav-sub {
  font-size: var(--text-sm-size);
  color: var(--color-muted);
  margin-top: 2px;
}

@media (max-width: 600px) {
  .ds-nav-row { flex-direction: column; }
}

/* ─── Impact stats grid ─────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 24px 0 8px;
}

.stat-item {
  padding: 24px 20px;
  border-right: 1px solid var(--color-border);
}

.stat-item:last-child { border-right: none; }

.stat-value {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 6px;
  color: var(--color-foreground);
}

.stat-label {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-lh);
  color: var(--color-muted);
}

@media (max-width: 600px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-item { border-right: none; border-bottom: 1px solid var(--color-border); }
  .stat-item:last-child { border-bottom: none; }
}

/* ─── Shared animation for chat bubbles ─────────────────────────────── */
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes typing-bounce {
  0%, 55%, 100% { opacity: 0.45; transform: translateY(0); }
  27%            { opacity: 1;    transform: translateY(-5px); }
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
}

.typing-indicator span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-purple);
  animation: typing-bounce 1.1s ease-in-out infinite;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.18s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.36s; }

/* ─── Related projects grid ─────────────────────────────────────────── */
.project-related {
  padding: 40px 0;
  border-bottom: 1px solid var(--color-border);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 20px;
}

.related-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
  color: inherit;
}

/* No container hover — plain card. Consistent with home-page card
   policy: per-element mouse feedback added later, deliberately.        */

.related-card-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--color-accent);
  display: flex;
  align-items: flex-end;
  padding: 10px;
  gap: 4px;
  flex-wrap: wrap;
}

.related-card-body {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.related-card-title {
  font-size: var(--text-sm-size);
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-foreground);
}

.related-card-desc {
  font-size: var(--text-xs-size);
  line-height: 1.45;
  color: var(--color-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Cover-backed related thumb — when a "More Projects" card points at a
   project that has a real Studio cover, shared.js injects that same cover
   here (single source of truth: COVER_MAP). The category tags stay, now as
   frosted chips over the image so they read on light or dark covers alike.
   Swapping a cover file propagates to every related card automatically. */
.related-card-thumb.has-cover {
  position: relative;
}
.related-card-thumb.has-cover .project-cover { z-index: 0; }
.related-card-thumb.has-cover .tag {
  position: relative;
  z-index: 1;
  color: #fff;
  background: rgba(10, 12, 20, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  line-height: 1.2;
}
.related-card-thumb.has-cover .tag:not(:last-child)::after { content: none; }

@media (max-width: 860px) {
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .related-grid { grid-template-columns: 1fr; }
}

/* Project-page FAB chatbot styles live in components/shared.js (PROJ_FAB_STYLE).
   Nothing needed here — keeping this comment as a breadcrumb. */

/* ─── Project covers (blueprint-style system diagrams) ───────────────
   Each cover is a standalone SVG in /assets/covers/, referenced via <img>.
   The SVG's xMidYMid slice preserveAspectRatio handles cropping between
   16:10 (gallery card), 16:9 (more-projects card), and 16:6 (banner) —
   all critical content sits inside the central safe rect (x∈[200,1400],
   y∈[120,680]) so it survives the strictest crop. */
.project-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--cover-bg, #050608);
  overflow: hidden;
}
.project-cover > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  /* SVG renders crisply at any scale — turn off any potential
     smoothing so the 1px stroke lines stay razor-thin. */
  image-rendering: auto;
}

/* Per-project background colour — shows during SVG load and matches the
   canvas inside each SVG (so there's no flash of a different colour). */
.project-cover--agentic  { --cover-bg: #081225; }
.project-cover--medical  { --cover-bg: #eef3fb; }
.project-cover--mavera   { --cover-bg: #f5f6f8; }
.project-cover--auto     { --cover-bg: #f4f6fb; }
.project-cover--shopify  { --cover-bg: #f3efe9; }

/* Host containers — positioning context + suppress the legacy
   "Project cover image" placeholder text that lives in the markup. */
.project-row-thumb,
.project-banner,
.card-thumb {
  position: relative;
}
.project-row-thumb:has(> .project-cover),
.project-banner:has(> .project-cover),
.card-thumb:has(> .project-cover) {
  background: var(--cover-bg, transparent);
  border-color: transparent;
  color: transparent;
  font-size: 0;
}

/* ─── Project banner caption ────────────────────────────────────────
   Subtle footnote that sits directly below the hero cover image on
   every case-study page. Establishes — at the moment the eye lands
   on the visual — that NDA covers prevent showing real assets, so
   the cover is representative. Reads as a photo credit / footnote,
   not a banner. Pairs with the existing .nda-notice block above the
   cover (which sets prose-level expectations); this caption sets
   image-level expectations.                                          */
.project-banner-caption {
  font-size: var(--text-xs-size);
  line-height: 1.5;
  font-style: italic;
  color: var(--color-muted);
  text-align: center;
  margin: var(--space-md) auto 0;
  max-width: 720px;
}

/* ─── NDA notice (case-study preface) ───────────────────────────────── */
/* Sits between the project hero and the cover banner. Sets the tone:
   confidentiality is established up front so the reader can recalibrate
   expectations before scanning for missing assets.                       */
.nda-notice {
  border-bottom: 1px solid var(--color-border);
  padding: 24px 0;
}

.nda-notice-inner {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  max-width: 720px;
  background: var(--color-accent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg, 20px);
}

.nda-notice-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
}

.nda-notice-body { min-width: 0; }

.nda-notice-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-foreground);
  margin: 0 0 var(--space-xs);
}

.nda-notice-text {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-lh);
  color: var(--color-muted);
  margin: 0 0 var(--space-xs);
  max-width: 640px;
}

.nda-notice-cta {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-lh);
  color: var(--color-muted);
  margin: 0;
}

.nda-notice-cta a {
  color: var(--color-foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.15s ease;
}

.nda-notice-cta a:hover { text-decoration-color: var(--color-muted); }

/* ─── Accessibility: reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Accessibility: touch target minimums (WCAG 2.5.5 / 2.5.8) ─────── */
.btn { min-height: 44px; }
.sidebar-btn,
.sidebar-nav-link,
.sidebar-section-link,
.sidebar-linkedin { min-height: 36px; } /* shadcn py-1.5 row; expands to 44px on touch below */
.sidebar-icon-btn { min-width: 36px; min-height: 36px; }
.convo-menu-btn { min-width: 28px; min-height: 28px; } /* WCAG 2.5.8 floor; 44px on touch below */
.nav-hamburger { min-width: 44px; min-height: 44px; }
.theme-toggle { /* 44×24 — WCAG 2.5.8 AA passes (24px floor); design-led, keep */ }

/* Coarse pointer (touch) — bump all sidebar targets to WCAG 2.5.5 44px.
   On touch screens the sidebar slides in as an overlay, so every button
   inside it must be fingertip-reachable. convo-menu-btn is also forced
   visible here — hover-triggered opacity is meaningless on touch. */
@media (pointer: coarse) {
  .sidebar-icon-btn { min-width: 44px; min-height: 44px; }
  .sidebar-btn,
  .sidebar-nav-link,
  .sidebar-section-link,
  .sidebar-linkedin { min-height: 44px; }
  .convo-menu-btn { min-width: 44px; min-height: 44px; opacity: 1; }
}

/* ─── Light-mode cool tint ────────────────────────────────────────────
   The light theme is otherwise a flat white→gray→black stack with no hue,
   which reads as stark. These rules add a faint brand-blue wash so tags
   land as a deliberate accent and the sidebar feels alive. Everything is
   scoped to :not([data-theme="dark"]) and purely additive — dark mode is
   untouched and keeps its existing neutral surfaces. To dial the wash up
   or down, edit the four tokens below.                                   */
:root {
  --color-tag-tint-bg:     #eef4ff;   /* faint blue fill for boxed tags  */
  --color-tag-tint-border: #dbe4ff;   /* soft blue border                */
  --color-tag-tint-text:   #3b5bdb;   /* muted indigo tag text           */
  --color-sidebar-hover:   rgba(37, 99, 235, 0.05); /* ghost-hover wash   */
}

/* Tags → soft blue text everywhere (home cards + project chips) */
html:not([data-theme="dark"]) .card-tag,
html:not([data-theme="dark"]) .tag {
  color: var(--color-tag-tint-text);
}

/* Boxed tags also take the blue fill + border (home selected-work cards) */
html:not([data-theme="dark"]) .card-tag {
  background: var(--color-tag-tint-bg);
  border-color: var(--color-tag-tint-border);
}

/* Sidebar ghost-hover → faint blue wash (the active item is already blue) */
html:not([data-theme="dark"]) .sidebar-icon-btn:hover,
html:not([data-theme="dark"]) .sidebar-btn:hover,
html:not([data-theme="dark"]) .sidebar-section-link:hover,
html:not([data-theme="dark"]) .convo-item:hover,
html:not([data-theme="dark"]) .sidebar-linkedin:hover,
html:not([data-theme="dark"]) .sidebar-nav-link:hover {
  background: var(--color-sidebar-hover);
}