/* ============================================================
   Notiva — the site is a macOS desktop.
   Tokens first; everything derives from them.
   ============================================================ */

:root {
  /* palette */
  --wall-abyss: #070d1a;
  --wall-deep:  #0b1220;
  --wall-tide:  #16294d;
  --wall-crest: #4a8fe0;
  --accent:     #0a84ff;               /* app default accent (switchable) */
  --accent-soft: rgba(10, 132, 255, .38);
  --rec:        #ff453a;
  --frost:      #f2f6fc;
  --frost-70:   rgba(235, 242, 252, .72);
  --frost-50:   rgba(230, 238, 250, .52);
  --frost-35:   rgba(226, 236, 252, .36);
  --glass-tint: rgba(23, 27, 37, .60);
  --glass-line: rgba(255, 255, 255, .09);
  --glass-hi:   rgba(255, 255, 255, .07);

  /* speakers (diarization) */
  --sc-maya:  #6bb4ff;
  --sc-sam:   #43d0b4;
  --sc-diego: #ffb25e;

  /* type */
  --f-display: "SF Pro Rounded", ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* geometry — the app's own constants */
  --shelf-w: 300px;         /* ShelfManager.panelWidth */
  --open-t: .22s;           /* expandDuration, ease-out */
  --close-t: .18s;          /* collapseDuration, ease-in */
  --glow-top: 25%;          /* hoverZoneOffset */
  --glow-span: 35%;         /* hoverZoneSpan */
  --menubar-h: 34px;
  --win-r: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

html { color-scheme: dark; height: 100%; }

body {
  height: 100%;
  overflow: hidden;
  font-family: var(--f-ui);
  color: var(--frost);
  background: var(--wall-deep);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
svg { display: block; }

/* stroke icon defaults */
svg use { pointer-events: none; }
.sh-ic, .mb-ic, .btn svg, .wbtn svg, .pchip svg, .req-row svg, .win-head-note svg,
.meet-btn svg, .try-arrow, .dmg-arrow, .ai-btn svg, .ai-card-head svg, .rec-mic, .rec-stop {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* thin scrollbars inside panels */
.sh-rows::-webkit-scrollbar, .ed-scroll::-webkit-scrollbar, .transcript::-webkit-scrollbar,
.writeup::-webkit-scrollbar, .spaces::-webkit-scrollbar { width: 7px; }
.sh-rows::-webkit-scrollbar-thumb, .ed-scroll::-webkit-scrollbar-thumb, .transcript::-webkit-scrollbar-thumb,
.writeup::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 99px; }
.spaces::-webkit-scrollbar { width: 0; }

/* ============ glass ============ */
.glass {
  background: linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.015)), var(--glass-tint);
  -webkit-backdrop-filter: blur(30px) saturate(1.65);
  backdrop-filter: blur(30px) saturate(1.65);
  border: 1px solid var(--glass-line);
  box-shadow: 0 26px 60px -18px rgba(2, 6, 16, .65), inset 0 1px 0 var(--glass-hi);
}
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(22, 26, 36, .96); }
}

.glass-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 500; color: var(--frost-70);
  background: rgba(255,255,255,.055);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid var(--glass-line);
}

/* ============ wallpaper — Pro Black ============ */
.wallpaper {
  position: fixed; inset: 0; z-index: 0;
  background: #101114;
}
.wallpaper img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wallpaper::before {  /* faint pull toward the hover edge */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(30vmax 40vmax at 100% 42%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
}
.wallpaper::after {   /* grain */
  content: ""; position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ boot ============ */
.boot {
  position: fixed; inset: 0; z-index: 100; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px;
}
.boot-ring { width: 84px; height: 84px; color: #fff; opacity: 0; transform: scale(.92); }
.boot-bar { width: 150px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.18); overflow: hidden; opacity: 0; }
.boot-bar span { display: block; height: 100%; width: 0; border-radius: 99px; background: #fff; }
.boot.boot-run .boot-ring { animation: bootRing .55s ease-out forwards; }
.boot.boot-run .boot-bar { animation: bootFade .3s .25s ease-out forwards; }
.boot.boot-run .boot-bar span { animation: bootFill 1s .3s ease-in-out forwards; }
.boot.boot-out { opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.booted .boot { display: none; }
@keyframes bootRing { to { opacity: 1; transform: scale(1); } }
@keyframes bootFade { to { opacity: 1; } }
@keyframes bootFill { to { width: 100%; } }