/* =================================================================
   Human-less · Design Tokens
   "One Chat. Limitless Growth."
   Desktop tokens are lifted directly from the polished prototype.
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Hedvig+Letters+Serif:opsz@12..24&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ───── Type — matches prototype ───── */
  --serif: "Hedvig Letters Serif", Georgia, serif;
  --display: var(--serif);
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* "mono" is now an alias of sans — the JetBrains robot voice is retired app-wide.
     Sizes / letterSpacing / weights in code remain unchanged. */
  --mono: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ───── Prototype tokens (light) ───── */
  --bg: #FBFAF8;
  --bg-sidebar: #f9f9f9;
  --bg-elevated: #ffffff;
  --bg-hover: rgba(0, 0, 0, 0.04);
  --bg-active: rgba(0, 0, 0, 0.07);
  --bg-bubble-user: rgba(0, 0, 0, 0.05);
  --bg-input: #ffffff;
  --bg-input-fill: rgba(0, 0, 0, 0.02);
  --border: rgba(0, 0, 0, 0.08);
  --border-input: rgba(0, 0, 0, 0.1);
  --text: #0d0d0d;
  --text-secondary: #2a2a2a;
  --text-tertiary: rgba(0, 0, 0, 0.6);
  --text-quaternary: rgba(0, 0, 0, 0.4);
  --text-on-accent: #ffffff;
  --accent: #0d0d0d;
  --accent-soft: rgba(0, 0, 0, 0.08);
  --canvas-dot: rgba(0, 0, 0, 0.18);
  --canvas-dot-bright: rgba(0, 0, 0, 0.72);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06);

  /* sidebar widths */
  --sbw-collapsed: 70px;
  --sbw-expanded: 248px;
  --sb-ease: cubic-bezier(0.32, 0.72, 0, 1);

  /* Pixel proof accent — retired in polish pass; tokens now resolve to neutral white. */
  --pixel: rgba(255,253,247,0.92);
  --pixel-soft: rgba(255,255,255,0.08);
  --moss: #22c55e;

  /* Legacy aliases — kept so prior code references resolve. Map onto prototype tokens. */
  --paper: var(--bg);
  --paper-2: var(--bg-hover);
  --paper-3: var(--bg-active);
  --ink: var(--text);
  --ink-2: var(--text-secondary);
  --ink-3: var(--text-tertiary);
  --ink-4: var(--text-quaternary);
  --rule: var(--border);
  --rule-2: var(--border-input);
  --surface: var(--bg-elevated);
  /* Amber alias — polished pass: retired to neutral white.
     Old --amber/--pixel callsites now resolve to bone, so chrome reads monochrome
     even when downstream JSX still references the tokens. */
  --amber: rgba(255,253,247,0.92);
  --obs: #050505;
  --obs-2: #0c0c0c;
  --obs-3: #1c1c1c;
  --bone: #ffffff;
  --bone-2: rgba(255,255,255,0.85);
  --bone-3: rgba(255,255,255,0.6);
  --bone-4: rgba(255,255,255,0.4);
  --rust: var(--pixel);
}

[data-theme="dark"], .hl-dark {
  --bg: #050505;
  --bg-sidebar: #050505;
  --bg-elevated: #0c0c0c;
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-active: rgba(255, 255, 255, 0.1);
  --bg-bubble-user: #1c1c1c;
  --bg-input: #0c0c0c;
  --bg-input-fill: rgba(255, 255, 255, 0.02);
  --border: rgba(255, 255, 255, 0.08);
  --border-input: rgba(255, 255, 255, 0.1);
  --text: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.85);
  --text-tertiary: rgba(255, 255, 255, 0.6);
  --text-quaternary: rgba(255, 255, 255, 0.4);
  --accent: #ffffff;
  --accent-soft: rgba(255, 255, 255, 0.1);
  --canvas-dot: rgba(255, 255, 255, 0.22);
  --canvas-dot-bright: rgba(255, 255, 255, 0.95);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.6);

  color-scheme: dark;
}

/* Body — exact prototype rule */
html, body, #root { height: 100%; margin: 0; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; }

h1, h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Canvas dotted grid — 28px size, 1px dots, matches prototype */
.hl-canvas {
  background-color: var(--bg);
  background-image: radial-gradient(circle, var(--canvas-dot) 1px, transparent 1.2px);
  background-size: 28px 28px;
}
/* Legacy aliases */
.hl-canvas-light, .hl-canvas-dark { background: var(--bg); }
.hl-canvas-dark { background-color: var(--obs); }
.hl-canvas-light { background-image: radial-gradient(circle, var(--canvas-dot) 1px, transparent 1.2px); background-size: 28px 28px; }
.hl-canvas-dark  { background-image: radial-gradient(circle, rgba(255,255,255,0.22) 1px, transparent 1.2px); background-size: 28px 28px; }

/* Scrollbar hide inside artboards */
.hl-scroll::-webkit-scrollbar { display: none; }
.hl-scroll { scrollbar-width: none; }

.hl-tap { transition: transform .12s ease, background .12s ease, opacity .12s ease, border-color .12s ease; }
.hl-tap:active { transform: scale(0.98); }

.hl-onboarding-step {
  animation: hl-onboarding-step-in 520ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.hl-onboarding-input,
.hl-card-input {
  caret-color: rgba(255,253,247,0.95);
  caret-shape: block;
}

.hl-onboarding-input::placeholder {
  color: rgba(255,253,247,0.42);
}

.hl-card-input::placeholder {
  color: rgba(255,253,247,0.24);
}

/* =================================================================
   Liquid Glass — surface tokens (mirror prototype recipe)
   These vars are not consumed by inline-style React surfaces, but they
   document the canonical recipe in one place and let any future CSS
   surfaces (artifact viewer, settings rows, etc.) match it without
   recomputing the values. Inline obsidian-bundle.jsx is the source of
   truth for the actual rendered surfaces.
   ================================================================= */
:root {
  --lg-blur-pill: 22px;
  --lg-blur-card: 28px;
  --lg-blur-dock: 36px;
  --lg-blur-sheet: 42px;
  --lg-saturate: 200%;
  --lg-brightness: 1.08;
  --lg-tint-default: rgba(255,255,255,0.08);
  --lg-tint-pill: rgba(255,255,255,0.12);
  --lg-tint-sheet: rgba(255,255,255,0.14);
  --lg-sheen:
    radial-gradient(120% 70% at 50% -10%,
      rgba(255,255,255,0.32) 0%,
      rgba(255,255,255,0.12) 28%,
      rgba(255,255,255,0.02) 55%,
      rgba(255,255,255,0) 75%);
  --lg-rim:
    inset 0 0.75px 0.5px rgba(255,255,255,0.55),
    inset 0 -0.5px 0.5px rgba(0,0,0,0.22),
    inset 0 0 0 0.5px rgba(255,255,255,0.16);
  --lg-hairline: 0.5px solid rgba(255,255,255,0.10);
  --lg-shadow-card: 0 1px 1px rgba(0,0,0,0.08), 0 10px 30px rgba(0,0,0,0.22), 0 18px 50px rgba(0,0,0,0.18);
}

/* Honor reduced-motion preference. The spring hooks already integrate
   on rAF, but for any CSS-driven press affordance we kill the implicit
   transform so users with prefers-reduced-motion don't get the tap
   squish. The springs still run, but at this point their transforms
   are effectively no-ops because the visual delta is minimal. */
@media (prefers-reduced-motion: reduce) {
  .hl-tap { transition: none; }
  .hl-tap:active { transform: none; }
  .hl-onboarding-step { animation: none; }
}

@keyframes hl-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes hl-onboarding-step-in {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(0, 18px, 0) scale(0.986);
  }
  62% {
    opacity: 1;
    filter: blur(1.5px);
    transform: translate3d(0, -2px, 0) scale(1.002);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes hl-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}
@keyframes hl-spin { to { transform: rotate(360deg); } }

/* Pixel sonar wave — single brightness pulse that rolls through each pixel
   with a staggered delay (set inline) so the wave ripples outward + around
   instead of flashing as a cross. 1.8s loop. */
@keyframes hl-pixel-wave {
  0%   { opacity: 0.30; }
  35%  { opacity: 1.00; }
  70%  { opacity: 0.45; }
  100% { opacity: 0.30; }
}
.hl-pixel-wave { animation: hl-pixel-wave 1.8s ease-in-out infinite; }
.hl-caret::after {
  content: '';
  display: inline-block;
  width: 5px; height: 1em;
  background: currentColor; vertical-align: -2px;
  margin-left: 4px;
  animation: hl-blink 1s steps(1) infinite;
}

/* ─── Prototype sidebar — full class set ─── */
.sidebar {
  position: relative;
  flex: 0 0 var(--sbw-collapsed);
  height: 100%;
  width: var(--sbw-collapsed);
  background: var(--bg);
  border-right: 1px solid var(--border-input);
  transition: width 200ms var(--sb-ease), flex-basis 200ms var(--sb-ease);
  overflow: hidden;
  z-index: 5;
  font-family: var(--sans);
}
.sidebar:hover, .sidebar.account-menu-open { width: var(--sbw-expanded); flex-basis: var(--sbw-expanded); }
.sb-logo {
  display: flex; align-items: center; height: 56px;
  padding-left: 19px; gap: 12px; cursor: pointer;
}
.sb-logo svg { width: 28px; height: 28px; display: block; color: var(--text); }
.sb-wordmark {
  opacity: 0;
  font-family: var(--serif);
  font-weight: 400; font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--text); white-space: nowrap;
  transition: opacity 160ms var(--sb-ease) 60ms;
}
.sidebar:hover .sb-wordmark { opacity: 1; }

.sb-nav {
  display: flex; flex-direction: column;
  padding: 8px 0; gap: 2px;
  flex: 1 1 auto; min-height: 0;
}
.sb-item-wrap { position: relative; }
.sb-item {
  position: relative; display: block; height: 40px; cursor: pointer;
}
.sb-item-bg {
  position: absolute; top: 0; left: 15px;
  height: 40px; width: 40px;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: width 200ms var(--sb-ease), background-color 120ms var(--sb-ease), border-color 120ms var(--sb-ease);
}
.sidebar:hover .sb-item-bg { width: calc(100% - 30px); }
.sb-item.active .sb-item-bg { background: var(--bg-active); border-color: var(--border-input); }
.sb-item:hover .sb-item-bg { background: var(--bg-hover); }
.sb-icon {
  position: absolute; top: 0; left: 15px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
  z-index: 1;
}
.sb-item.active .sb-icon, .sb-item:hover .sb-icon { color: var(--text); }
.sb-label-wrap {
  position: absolute; top: 0; left: 55px; right: 4px;
  height: 40px;
  display: flex; align-items: center; gap: 8px;
  opacity: 0;
  transition: opacity 200ms var(--sb-ease);
  z-index: 1;
}
.sidebar:hover .sb-label-wrap { opacity: 1; }
.sb-label { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.sb-item.active .sb-label, .sb-item:hover .sb-label { color: var(--text); }
.sb-chevron {
  margin-left: auto; padding-right: 14px;
  display: flex; align-items: center;
  color: var(--text-quaternary);
  transition: transform 200ms var(--sb-ease), color 120ms ease;
}
.sb-item-wrap.open > .sb-item .sb-chevron { transform: rotate(180deg); }

.sb-children {
  max-height: 0; overflow: hidden;
  transition: max-height 300ms ease-out, margin-top 200ms var(--sb-ease);
  padding-left: 25px;
}
.sidebar:hover .sb-item-wrap.open > .sb-children { max-height: 384px; margin-top: 2px; }
.sb-child {
  display: flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px 0 32px;
  border-left: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-tertiary);
  white-space: nowrap; overflow: hidden;
  opacity: 0; transform: translateX(-4px);
  transition: opacity 200ms ease-out, transform 200ms ease-out, color 120ms ease;
  cursor: pointer;
}
.sidebar:hover .sb-item-wrap.open > .sb-children .sb-child { opacity: 1; transform: translateX(0); }
.sb-child:hover, .sb-child.active { color: var(--text); border-left-color: var(--text); }

/* Team / profile footer */
.sb-team {
  position: relative; height: 56px; cursor: pointer;
  border-top: 1px solid var(--border);
}
.sb-team-tile {
  position: absolute; left: 19px; top: 12px;
  width: 32px; height: 32px;
  background: var(--accent); color: var(--text-on-accent);
  border: 1px solid transparent;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  overflow: hidden;
}
.sb-team-label {
  position: absolute; left: 62px; top: 12px; height: 32px;
  display: flex; align-items: center;
  font-size: 13px; color: var(--text); white-space: nowrap;
  opacity: 0;
  transition: opacity 200ms var(--sb-ease);
}
.sidebar:hover .sb-team-label { opacity: 1; }
.sb-team-caret {
  position: absolute; right: 18px; top: 12px; height: 32px;
  display: flex; align-items: center;
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity 200ms var(--sb-ease);
}
.sidebar:hover .sb-team-caret { opacity: 1; }

/* App / layout */
.app {
  display: flex; height: 100%;
  background: var(--bg);
  font-family: var(--sans);
}
.main-col {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  position: relative;
}