@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond-latin.woff2") format("woff2");  /* landing: Agent_UI ships the Cyrillic subset of this font (no Latin glyphs), so this is the Latin variable file */
  font-weight: 500 600; font-style: normal; font-display: swap;
}

/*
 * The FounderStack design system, taken verbatim from the prototype in
 * `FounderStack/demo/styles.css` rather than reimplemented. Two changes were
 * needed to host it in a React app, both marked below:
 *
 *   1. The prototype sets data-theme on <body>. Theme state here lives on
 *      <html>, so the dark selectors accept either.
 *   2. The prototype is toggle-only and defaults to light. A
 *      prefers-color-scheme block was added so a system dark setting is
 *      respected before anyone touches the toggle.
 *
 * Everything else is the prototype's, including its comments. Keep it that
 * way: edits belong upstream in the prototype so the two cannot drift.
 */

/* FounderStack demo. Minimal luxury in two moods: pure white and super
   black. Borderless, separation through tone, color drawn from the app
   palette, monospace throughout. */

:root {
  --bg: #ffffff;
  --sidebar: rgba(250,250,250,.70);
  --surface: rgba(255,255,255,.78);  /* elevated pieces: active nav, chips */
  --panel: rgba(255,255,255,.72);    /* floating panels: docks, drawer, canvas */
  --mix: transparent;                /* tints mix into transparency: the art ghosts through */
  --veil: rgba(255,255,255,.34);     /* the screen the art sits behind */
  --plate: rgba(255,255,255,.72);    /* backing for text that sits on the ground */
  --plate-row: rgba(255,255,255,.90); /* list rows need to be opaque enough to read */
  --ink: #141416;
  --ink-soft: #4b4b50;
  --muted: #8e8e93;
  --faint: #c9c9cf;
  --hairline: #ececee;          /* used very sparingly */
  --shift-1: rgba(20,20,22,.035);    /* one step off the ground */
  --shift-2: rgba(20,20,22,.06);
  --shift-3: rgba(20,20,22,.09);
  --scrim: rgba(20,20,22,.08);
  --gold: #a8852e;
  --blue: #3b5ea8;
  --green: #3d7a4e;
  --plum: #7a3d6e;
  --rust: #a8552e;
  --red: #a03b3b;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Cormorant Garamond", Georgia, serif;
  --radius: 18px;
}

/* super black: same architecture, tones fall instead of rise,
   accents turn jewel so they pop against the black */
:root[data-theme="dark"] body, body[data-theme="dark"] {
  --bg: #0a0a0b;
  --sidebar: rgba(4,4,5,.62);        /* the panel sits deeper than the ground */
  --surface: rgba(255,255,255,.08);
  --panel: rgba(15,15,17,.66);
  --mix: transparent;
  --veil: rgba(10,10,11,.30);
  --plate: rgba(14,14,16,.68);
  --plate-row: rgba(24,24,28,.92);
  --ink: #ededef;
  --ink-soft: #b4b4ba;
  --muted: #7e7e86;
  --faint: #4c4c53;
  --hairline: #222226;
  --shift-1: rgba(255,255,255,.05);
  --shift-2: rgba(255,255,255,.075);
  --shift-3: rgba(255,255,255,.105);
  --scrim: rgba(0,0,0,.55);
  --gold: #d9ad4b;
  --blue: #7d9fe8;
  --green: #63b07e;
  --plum: #c77ab2;
  --rust: #d98a5a;
  --red: #d96a6a;
}
/* Added for the React app: system dark, unless light was chosen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
  --bg: #0a0a0b;
  --sidebar: rgba(4,4,5,.62);        /* the panel sits deeper than the ground */
  --surface: rgba(255,255,255,.08);
  --panel: rgba(15,15,17,.66);
  --mix: transparent;
  --veil: rgba(10,10,11,.30);
  --plate: rgba(14,14,16,.68);
  --plate-row: rgba(24,24,28,.92);
  --ink: #ededef;
  --ink-soft: #b4b4ba;
  --muted: #7e7e86;
  --faint: #4c4c53;
  --hairline: #222226;
  --shift-1: rgba(255,255,255,.05);
  --shift-2: rgba(255,255,255,.075);
  --shift-3: rgba(255,255,255,.105);
  --scrim: rgba(0,0,0,.55);
  --gold: #d9ad4b;
  --blue: #7d9fe8;
  --green: #63b07e;
  --plum: #c77ab2;
  --rust: #d98a5a;
  --red: #d96a6a;
}
}


/* app colours are lifted per luminance in app.js (resolveColor), so the
   darkest ones stay legible on black without washing out the rest */

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

html, body { height: 100%; }

body {
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-weight: var(--fw-body, 400);
}

/* readability presets, cycled by the Aa button in the strip.
   Heavier presets also lift the grey text for contrast. */
body { --zoom: 1; zoom: var(--zoom); }
body[data-type="sleek"] { --fw-body: 400; --fw-strong: 500; }
body[data-type="standard"] { --fw-body: 500; --fw-strong: 600; --ink-soft: #3f3f44; --muted: #7a7a80; }
body[data-type="bold"] { --fw-body: 600; --fw-strong: 600; --ink-soft: #333338; --muted: #6a6a70; --faint: #a9a9b0; --zoom: 1.06; }
body[data-type="large"] { --fw-body: 600; --fw-strong: 600; --ink-soft: #333338; --muted: #6a6a70; --faint: #a9a9b0; --zoom: 1.18; }

/* the same presets in the dark mood lift toward white instead */
:root[data-theme="dark"] body, body[data-theme="dark"][data-type="sleek"] { --ink-soft: #b4b4ba; --muted: #7e7e86; --faint: #4c4c53; }
:root[data-theme="dark"] body, body[data-theme="dark"][data-type="standard"] { --ink-soft: #c6c6cc; --muted: #90909a; --faint: #4c4c53; }
:root[data-theme="dark"] body, body[data-theme="dark"][data-type="bold"],
:root[data-theme="dark"] body, body[data-theme="dark"][data-type="large"] { --ink-soft: #d4d4da; --muted: #a0a0aa; --faint: #5c5c64; }

button {
  font-family: var(--mono);
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input, textarea {
  font-family: var(--mono);
  font-size: inherit;
  font-weight: inherit;
  color: var(--ink);
  border: none;
  outline: none;
  background: transparent;
}

svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

::selection { background: var(--shift-3); }

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

/* text fields live inside soft containers that shift tone on focus,
   so the ring would read as a border */
.chat-field:focus, .chat-field:focus-visible,
.dock-input input:focus, .dock-input input:focus-visible,
.instructions:focus, .instructions:focus-visible { outline: none; }

.hidden { display: none !important; }

/* ============ SHELL ============ */

/* generative background: colored walkers drawing behind the app.
   The shell sits above it; solid surfaces cover it locally, empty
   ground lets it show through. */
#bg-art {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* the art frames the content: full strength at the periphery, gone
     through the middle where reading happens */
  -webkit-mask-image: radial-gradient(ellipse 46% 52% at 56% 46%,
    transparent 0%, transparent 42%, rgba(0,0,0,.45) 68%, #000 100%);
  mask-image: radial-gradient(ellipse 46% 52% at 56% 46%,
    transparent 0%, transparent 42%, rgba(0,0,0,.45) 68%, #000 100%);
}

/* frosted glass: the surfaces that sit on the ground stay translucent
   and blur the art running beneath them, so no line is ever lost */
.sidebar, .strip, .chat-input, .demo-pill,
.dock-panel, .drawer, .app-canvas,
.card, .worker-card, .app-tile, .msg-user,
.instructions, .dock-input {
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

.shell {
  position: relative;
  z-index: 1;
  /* a slightly translucent screen between the art and everything else */
  background: var(--veil);
  display: grid;
  grid-template-columns: 256px 1fr;
  grid-template-rows: 1fr 48px;
  grid-template-areas: "sidebar main" "strip strip";
  /* zoom multiplies vh lengths, so divide it back out to stay one viewport tall */
  height: calc(100vh / var(--zoom, 1));
}

/* ============ SIDEBAR ============ */

.sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  padding: 28px 14px 18px;
  background: var(--sidebar);
}

.wordmark { padding: 0 13px 30px; }

.wordmark-name {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 25px;
  letter-spacing: 0.04em;
}

.wordmark-sub {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  border-radius: 11px;
  color: var(--ink-soft);
  text-align: left;
  transition: background .15s ease, color .15s ease;
}

/* each destination carries its own color through its icon */
.nav-item[data-view="chat"] svg { color: var(--blue); }
.nav-item[data-view="workforce"] svg { color: var(--gold); }
.nav-item[data-view="apps"] svg:first-child { color: var(--green); }
.nav-item[data-view="settings"] svg { color: var(--plum); }
.nav-item[data-view="profile"] svg { color: var(--rust); }

.nav-item:hover { background: var(--shift-2); }

.nav-item.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.05); }

.nav-item .chev { margin-left: auto; width: 14px; height: 14px; color: var(--faint) !important; transition: transform .2s ease; }

.nav-item.open .chev { transform: rotate(90deg); }

.nav-sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height .25s ease;
  display: flex;
  flex-direction: column;
}

.nav-sub.open { max-height: 460px; overflow-y: auto; }

.nav-sub button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 13px 6px 43px;
  font-size: 13.5px;
  color: var(--ink-soft);
  border-radius: 8px;
  text-align: left;
}

.nav-sub button:hover { background: var(--shift-2); color: var(--ink); }

.app-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.sidebar-foot { padding-top: 14px; }

.user-chip { display: flex; align-items: center; gap: 11px; padding: 8px 13px; border-radius: 11px; }

.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--plum));
  color: #fff;
  font-size: 11.5px;
  letter-spacing: .05em;
  display: flex; align-items: center; justify-content: center;
}

.user-chip-meta { display: flex; flex-direction: column; line-height: 1.35; }
.user-chip-name { font-size: 14px; }
.user-chip-role { font-size: 11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }

/* ============ MAIN ============ */

.main {
  grid-area: main;
  position: relative;
  overflow: hidden;
  background: transparent;
}

.view { position: relative; z-index: 1; }

.view { height: 100%; overflow-y: auto; }

.demo-pill {
  position: absolute;
  top: 16px; right: 22px;
  z-index: 40;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  padding: 6px 13px;
  border-radius: 20px;
  cursor: default;
}

/* section scaffolding shared by non-chat views */

.page { max-width: 1100px; margin: 0 auto; padding: 58px 48px 90px; }

.page-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 40px;
  letter-spacing: .02em;
}

.page-title::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  border-radius: 2px;
  margin-top: 10px;
  background: var(--accent, var(--gold));
}

.page-sub { margin-top: 12px; color: var(--muted); font-size: 14.5px; }

.section-label {
  margin: 46px 0 16px;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============ CHAT ============ */

#view-chat { display: flex; flex-direction: column; }

.chat-scroll { flex: 1; overflow-y: auto; }

.chat-thread { max-width: 760px; margin: 0 auto; padding: 64px 24px 24px; display: flex; flex-direction: column; gap: 24px; }

.chat-empty { text-align: center; margin-top: 11vh; }

.chat-empty h1 { font-family: var(--serif); font-weight: 500; font-size: 46px; letter-spacing: .02em; }

.chat-empty h1 em { font-style: normal; color: var(--blue); }

.chat-empty p { margin-top: 12px; color: var(--muted); font-size: 15px; }

.chat-empty .ai-note { margin-top: 28px; font-size: 12px; color: var(--faint); }

.suggestions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 32px; }

.suggestion {
  padding: 10px 18px;
  border-radius: 22px;
  font-size: 13.5px;
  transition: filter .15s ease, transform .15s ease;
}

.suggestion:hover { filter: saturate(1.6); transform: translateY(-1px); }

.suggestions .suggestion:nth-child(1) { background: color-mix(in srgb, var(--blue) 9%, var(--mix)); color: var(--blue); }
.suggestions .suggestion:nth-child(2) { background: color-mix(in srgb, var(--plum) 9%, var(--mix)); color: var(--plum); }
.suggestions .suggestion:nth-child(3) { background: color-mix(in srgb, var(--gold) 11%, var(--mix)); color: var(--gold); }
.suggestions .suggestion:nth-child(4) { background: color-mix(in srgb, var(--green) 9%, var(--mix)); color: var(--green); }

/* user message: no border, but reads as bounded through tone + shadow */
.msg-user {
  align-self: flex-end;
  max-width: 78%;
  padding: 12px 18px;
  border-radius: 18px 18px 5px 18px;
  background: color-mix(in srgb, var(--blue) 6%, var(--mix));
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 0 0 0.5px color-mix(in srgb, var(--blue) 8%, transparent);
  white-space: pre-wrap;
}

.msg-user img { max-width: 240px; border-radius: 12px; display: block; margin-bottom: 8px; }

.msg-agent { align-self: flex-start; max-width: 92%; white-space: pre-wrap; }

.msg-agent .agent-tag {
  display: block;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 7px;
}

/* MCP tool trace */
.trace { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }

.trace-step {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: var(--muted);
  opacity: 0;
  animation: rise .3s ease forwards;
}

.trace-step svg { width: 13px; height: 13px; }
.trace-step .ok { color: var(--green); }
.trace-step .spin { animation: spin 1s linear infinite; }

@keyframes rise { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

.thinking { display: inline-flex; gap: 5px; padding: 6px 0; }
.thinking i { width: 5px; height: 5px; border-radius: 50%; background: var(--faint); animation: pulse 1.2s ease infinite; }
.thinking i:nth-child(1) { background: var(--blue); }
.thinking i:nth-child(2) { background: var(--gold); animation-delay: .2s; }
.thinking i:nth-child(3) { background: var(--green); animation-delay: .4s; }
@keyframes pulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

/* input: large curved rectangle, completely borderless */
.chat-input-wrap { padding: 10px 24px 26px; }

.chat-input {
  max-width: 760px;
  margin: 0 auto;
  border-radius: 28px;
  background: var(--shift-1);
  padding: 9px 11px 9px 22px;
  display: flex;
  flex-direction: column;
  transition: background .2s ease, box-shadow .2s ease;
}

.chat-input:focus-within { background: var(--shift-2); box-shadow: 0 2px 16px color-mix(in srgb, var(--blue) 8%, transparent); }

.chat-attach { display: none; padding: 10px 0 2px; }
.chat-attach.show { display: block; }

.chat-attach .thumb {
  position: relative; display: inline-block;
}
.chat-attach img { height: 68px; border-radius: 11px; display: block; }
.chat-attach .thumb button {
  position: absolute; top: -6px; right: -6px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--ink); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.chat-attach .thumb button svg { width: 9px; height: 9px; stroke-width: 2.2; }

.chat-row { display: flex; align-items: flex-end; gap: 6px; }

.chat-field {
  flex: 1;
  resize: none;
  max-height: 170px;
  padding: 10px 0;
  line-height: 1.5;
}

.chat-field::placeholder { color: var(--faint); }

.icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  transition: background .15s ease, color .15s ease;
}

.icon-btn:hover { background: var(--shift-3); color: var(--ink); }

.icon-btn.listening { color: var(--red); animation: pulse 1.2s ease infinite; }

.send-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--plum));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s ease, filter .15s ease;
}

.send-btn:hover { filter: brightness(1.1); }
.send-btn:disabled { opacity: .25; cursor: default; filter: grayscale(1); }

.chat-footnote {
  max-width: 760px; margin: 10px auto 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--faint);
}

/* ============ WORKFORCE ============ */

.wf-grid { display: grid; grid-template-columns: 1fr 360px; gap: 56px; align-items: start; }

.worker-card {
  padding: 20px 22px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--tint, #8e8e93) 6%, var(--mix));
  margin-bottom: 12px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.worker-card:hover { background: color-mix(in srgb, var(--tint, #8e8e93) 12%, var(--mix)); transform: translateY(-1px); }

.worker-head { display: flex; align-items: baseline; gap: 10px; }

.worker-name { font-size: 18px; font-weight: var(--fw-strong, 500); color: color-mix(in srgb, var(--tint, var(--ink)) 60%, var(--ink)); }

.worker-state { margin-left: auto; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 7px; }

.state-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.state-dot.on { background: var(--tint, var(--gold)); }

.worker-desc { margin-top: 6px; color: var(--ink-soft); font-size: 14px; }

.worker-meta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 7px; }

.chip {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 13px;
  background: var(--surface);
  color: var(--muted);
}

.chip.gold { color: var(--gold); }

.new-worker {
  width: 100%;
  padding: 16px 22px;
  border-radius: 18px;
  color: var(--muted);
  text-align: left;
  display: flex; align-items: center; gap: 11px;
  transition: background .15s ease, color .15s ease;
}

.new-worker:hover { background: color-mix(in srgb, var(--gold) 8%, var(--mix)); color: var(--gold); }

/* event stream */
.stream-head { display: flex; align-items: center; gap: 9px; }

.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2s ease infinite; }

.stream { margin-top: 14px; display: flex; flex-direction: column; }

.event {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 13px;
  border-radius: 11px;
  font-size: 13px;
  animation: rise .3s ease;
}

.event:nth-child(odd) { background: var(--shift-1); }

.event .app-dot { transform: translateY(-1px); }
.event-app { white-space: nowrap; }
.event-text { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.event-time { color: var(--faint); font-size: 11px; white-space: nowrap; }

/* worker detail drawer */
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 48px;
  width: 500px;
  background: var(--panel);
  box-shadow: -12px 0 44px rgba(0,0,0,.14);
  z-index: 60;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.3,.8,.3,1);
  display: flex; flex-direction: column;
}

.drawer.open { transform: none; }

.drawer-head { padding: 32px 34px 18px; display: flex; align-items: flex-start; gap: 12px; }

.drawer-title { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--tint, var(--ink)); }

.drawer-sub { color: var(--muted); font-size: 13px; margin-top: 3px; }

.drawer-body { flex: 1; overflow-y: auto; padding: 0 34px 34px; }

.drawer .section-label { margin-top: 30px; }

.sub-chips { display: flex; flex-wrap: wrap; gap: 7px; }

.sub-chip {
  font-size: 12.5px;
  padding: 6px 14px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--tint, #8e8e93) 8%, var(--mix));
  color: color-mix(in srgb, var(--tint, var(--ink-soft)) 70%, var(--ink));
  display: flex; align-items: center; gap: 7px;
  cursor: pointer;
}

.sub-chip svg { width: 12px; height: 12px; color: var(--faint); }
.sub-chip:hover svg { color: var(--red); }

.sub-chip.add { color: var(--muted); background: transparent; }
.sub-chip.add:hover { background: var(--shift-1); }

.instructions {
  width: 100%;
  min-height: 96px;
  border-radius: 15px;
  background: var(--shift-1);
  padding: 14px 17px;
  resize: vertical;
  color: var(--ink-soft);
  font-size: 14px;
}

.approval-note { margin-top: 12px; font-size: 12.5px; color: var(--gold); display: flex; gap: 9px; align-items: baseline; }

.history-item { display: flex; gap: 14px; padding: 11px 0; }

.history-time { color: var(--faint); font-size: 11.5px; white-space: nowrap; width: 98px; }

.history-text { color: var(--ink-soft); font-size: 13.5px; flex: 1; }

.history-text .outcome { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.history-text .outcome.ok { color: var(--green); }
.history-text .outcome.wait { color: var(--gold); }

.scrim {
  position: fixed; inset: 0 0 48px 0;
  background: var(--scrim);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.scrim.show { opacity: 1; pointer-events: auto; }

/* ============ APPS ============ */

.suite { margin-bottom: 8px; }

.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 11px; }

.app-tile {
  padding: 20px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--tint, #8e8e93) 7%, var(--mix));
  text-align: left;
  display: flex; flex-direction: column; gap: 9px;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.app-tile:hover {
  background: color-mix(in srgb, var(--tint, #8e8e93) 14%, var(--mix));
  transform: translateY(-2px);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--tint, #8e8e93) 16%, transparent);
}

.app-tile .app-dot { width: 9px; height: 9px; }

.app-tile-name { font-size: 15.5px; font-weight: var(--fw-strong, 500); color: color-mix(in srgb, var(--tint, var(--ink)) 55%, var(--ink)); }

.app-tile-use { font-size: 12.5px; color: var(--muted); }

.app-tile.soon { opacity: .45; cursor: default; background: var(--shift-1); }
.app-tile.soon:hover { background: var(--shift-1); transform: none; box-shadow: none; }

/* inline app canvas */
.app-canvas {
  position: fixed;
  inset: 42px 42px 92px 298px;
  background: var(--panel);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,.22), 0 0 0 0.5px rgba(127,127,135,.10);
  z-index: 70;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: canvas-in .25s cubic-bezier(.3,.8,.3,1);
}

@keyframes canvas-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

.canvas-head { display: flex; align-items: center; gap: 11px; padding: 22px 28px; }

.canvas-title { font-size: 17px; font-weight: var(--fw-strong, 500); display: flex; align-items: center; gap: 10px; color: var(--tint, var(--ink)); }

.canvas-head .icon-btn { margin-left: auto; }

.canvas-body {
  flex: 1; overflow-y: auto; padding: 6px 28px 32px;
  background: linear-gradient(color-mix(in srgb, var(--tint, #8e8e93) 6%, var(--panel)), var(--panel) 140px);
}

.mock-row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 17px;
  border-radius: 13px;
  font-size: 14px;
}
.mock-row:nth-child(odd) { background: color-mix(in srgb, var(--panel) 70%, transparent); }
.mock-row:nth-child(even) { background: var(--shift-1); }
.mock-row .k { color: color-mix(in srgb, var(--tint, var(--muted)) 70%, var(--muted)); font-size: 12.5px; width: 150px; flex-shrink: 0; }
.mock-row .v { color: var(--ink-soft); }

/* ============ SETTINGS ============ */

.iam-row {
  display: grid;
  grid-template-columns: 26px 1fr 160px 150px;
  align-items: center;
  gap: 14px;
  padding: 13px 17px;
  border-radius: 13px;
  font-size: 14.5px;
}

.iam-row:nth-child(even) { background: var(--shift-1); }

.iam-app { display: flex; align-items: center; gap: 10px; }

.iam-level { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.iam-level.full { color: var(--green); }
.iam-level.none { color: var(--faint); }

.req-btn {
  justify-self: end;
  font-size: 12.5px;
  padding: 7px 15px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--plum) 9%, var(--mix));
  color: var(--plum);
  transition: background .15s ease;
}
.req-btn:hover { background: color-mix(in srgb, var(--plum) 16%, var(--mix)); }
.req-btn.requested { background: transparent; color: var(--gold); cursor: default; }

.person {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 17px;
  border-radius: 15px;
}
.person:nth-child(even) { background: var(--shift-1); }

.person .avatar { background: linear-gradient(135deg, var(--green), var(--blue)); color: #fff; }
.person.tree-pad .avatar { background: linear-gradient(135deg, var(--gold), var(--rust)); }

.person-meta { flex: 1; }
.person-name { font-size: 15px; }
.person-role { font-size: 12.5px; color: var(--muted); }

.person-tags { display: flex; gap: 7px; }
.person-tags .chip { background: var(--shift-2); }

.tree-pad { padding-left: 46px; }

/* ============ PROFILE ============ */

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.card { padding: 24px 26px; border-radius: 20px; background: var(--shift-1); }

.card h3 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-bottom: 18px; }

.meter { margin-bottom: 18px; }

.meter-head { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 8px; }
.meter-head .n { color: var(--muted); font-size: 12px; }

.bar { height: 5px; border-radius: 3px; background: var(--shift-3); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 3px; background: var(--ink); }
.bar i.c1 { background: var(--blue); }
.bar i.c2 { background: var(--green); }
.bar i.warm { background: var(--gold); }

.plan-name {
  font-family: var(--serif); font-size: 30px; font-weight: 600;
  background: linear-gradient(100deg, var(--gold), var(--rust));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-block;
}
.plan-line { font-size: 14px; color: var(--ink-soft); margin-top: 8px; }
.plan-fine { font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.6; }

.kv { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; font-size: 14.5px; }
.kv .k { color: var(--muted); }

.rights { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; }

.rights button {
  font-size: 13px;
  padding: 9px 17px;
  border-radius: 17px;
  background: var(--surface);
  color: var(--rust);
  transition: background .15s ease;
}
.rights button:hover { background: color-mix(in srgb, var(--rust) 10%, var(--mix)); }

/* ============ BOTTOM STRIP ============ */

.strip {
  grid-area: strip;
  display: flex;
  align-items: center;
  padding: 0 18px 0 26px;
  background: var(--sidebar);
  box-shadow: 0 -1px 0 var(--hairline);
  z-index: 80;
}

.strip-status { font-size: 12px; color: var(--faint); letter-spacing: .06em; }

.strip-actions { margin-left: auto; display: flex; gap: 5px; }

.strip-btn {
  position: relative;
  width: 38px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  transition: background .15s ease, color .15s ease;
}

#strip-zap:hover, #strip-zap.active { background: color-mix(in srgb, var(--gold) 12%, var(--mix)); color: var(--gold); }
#strip-chat:hover, #strip-chat.active { background: color-mix(in srgb, var(--blue) 11%, var(--mix)); color: var(--blue); }

.strip-btn svg { width: 17px; height: 17px; }

.strip-type {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
}
.strip-type:hover, .strip-type.active { background: var(--shift-2); color: var(--ink); }

.strip-theme:hover { background: var(--shift-2); color: var(--ink); }

.strip-art:hover { background: var(--shift-2); color: var(--ink); }
.strip-art.active { background: color-mix(in srgb, var(--green) 12%, var(--mix)); color: var(--green); }

.badge {
  position: absolute;
  top: 2px; right: 3px;
  min-width: 14px; height: 14px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--gold);
  color: #fff;
  font-size: 9px;
  line-height: 14px;
  text-align: center;
}

#badge-chat { background: var(--blue); }

/* ============ DOCKS ============ */

.dock-panel {
  position: fixed;
  right: 14px; bottom: 58px;
  width: 396px;
  height: min(600px, calc(100vh / var(--zoom, 1) - 100px));
  background: var(--panel);
  border-radius: 22px;
  box-shadow: 0 18px 64px rgba(0,0,0,.22), 0 0 0 0.5px rgba(127,127,135,.10);
  z-index: 90;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: canvas-in .22s cubic-bezier(.3,.8,.3,1);
}

#dock-pulse .dock-head { background: linear-gradient(color-mix(in srgb, var(--gold) 9%, var(--panel)), var(--panel)); }
#dock-team .dock-head { background: linear-gradient(color-mix(in srgb, var(--blue) 8%, var(--panel)), var(--panel)); }

.dock-head { display: flex; align-items: baseline; gap: 9px; padding: 20px 22px 14px; }

.dock-title { font-family: var(--serif); font-size: 23px; font-weight: 600; }

#dock-pulse .dock-title { color: var(--gold); }
#dock-team .dock-title { color: var(--blue); }

.dock-sub { font-size: 11.5px; color: var(--muted); letter-spacing: .08em; }

.dock-close { margin-left: auto; align-self: center; width: 32px; height: 32px; }
.dock-close svg { width: 14px; height: 14px; }

.dock-body { flex: 1; overflow-y: auto; padding: 8px 22px; display: flex; flex-direction: column; gap: 13px; }

.dock-msg { display: flex; flex-direction: column; max-width: 88%; animation: rise .25s ease; }

.dock-msg .who { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; display: flex; gap: 7px; align-items: center; }
.dock-msg .who .app-dot { width: 6px; height: 6px; }

.dock-msg .body { font-size: 13.5px; color: var(--ink-soft); background: var(--shift-1); border-radius: 5px 13px 13px 13px; padding: 10px 14px; }

.dock-msg.me { align-self: flex-end; }
.dock-msg.me .body { background: color-mix(in srgb, var(--blue) 8%, var(--mix)); border-radius: 13px 5px 13px 13px; color: var(--ink); }
.dock-msg.me .who { align-self: flex-end; }

.dock-msg .act {
  margin-top: 7px;
  display: flex; gap: 7px;
}
.dock-msg .act button {
  font-size: 11.5px;
  padding: 6px 14px;
  border-radius: 13px;
  background: var(--gold);
  color: #fff;
}
.dock-msg .act button.ghost { background: var(--shift-2); color: var(--ink-soft); }

.dock-input {
  display: flex; align-items: center; gap: 6px;
  margin: 10px 15px 15px;
  padding: 5px 5px 5px 17px;
  border-radius: 22px;
  background: var(--shift-1);
}

.dock-input input { flex: 1; padding: 9px 0; font-size: 13.5px; }
.dock-input input::placeholder { color: var(--faint); }
.dock-input .icon-btn { width: 34px; height: 34px; background: var(--ink); color: var(--bg); }
#dock-pulse .dock-input .icon-btn { background: var(--gold); color: #fff; }
#dock-team .dock-input .icon-btn { background: var(--blue); color: #fff; }
.dock-input .icon-btn svg { width: 14px; height: 14px; }

/* scrollbars: keep them quiet */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--shift-3); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 980px) {
  .shell { grid-template-columns: 214px 1fr; }
  .wf-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .app-canvas { inset: 24px 16px 66px 230px; }
  .drawer { width: min(500px, 92vw); }
}

/* ============ READABILITY PLATES ============ */
/* text that sits straight on the ground gets its own translucent
   backing, so a stroke passing behind it never fights the words */

.msg-agent {
  padding: 15px 19px;
  border-radius: 5px 18px 18px 18px;
  background: var(--plate);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
}

.chat-empty .ai-note {
  display: inline-block;
  padding: 9px 17px;
  border-radius: 15px;
  background: var(--plate);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.chat-footnote {
  width: fit-content;
  max-width: 100%;
  padding: 6px 15px;
  border-radius: 13px;
  background: var(--plate);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* rows and labels across the other views */
.event, .iam-row, .person, .mock-row {
  background: var(--plate-row);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.event:nth-child(odd), .iam-row:nth-child(even),
.person:nth-child(even), .mock-row:nth-child(even) {
  background: color-mix(in srgb, var(--ink) 5%, var(--plate-row));
}
.stream, .history-item { border-radius: 12px; }

/* headings keep the borderless look: a halo of the ground colour
   instead of a plate */
.chat-empty h1, .chat-empty p,
.page-title, .page-sub, .section-label,
.history-item, .drawer-sub, .approval-note {
  text-shadow: 0 0 10px var(--bg), 0 0 22px var(--bg);
}

/* ============================================================
 * Bridge to the component kit.
 *
 * Components/ is styled with --fs-* tokens. Rather than restyle every
 * component, those tokens are redefined in terms of the prototype's palette,
 * so a tile, a plan card and the shell all come from one source of truth.
 * ============================================================ */
:root {
  --fs-bg: var(--bg);
  --fs-surface: var(--sidebar);
  --fs-surface-raised: var(--surface);
  --fs-surface-sunken: var(--shift-1);
  --fs-border: var(--hairline);
  --fs-border-strong: var(--shift-3);
  --fs-plate: var(--plate);
  --fs-plate-row: var(--plate-row);

  --fs-text: var(--ink);
  --fs-text-muted: var(--ink-soft);
  --fs-text-faint: var(--muted);

  --fs-accent: var(--blue);
  --fs-accent-hover: var(--blue);
  --fs-focus: var(--blue);

  --fs-ok: var(--green);
  --fs-warn: var(--gold);
  --fs-danger: var(--red);
  --fs-ok-bg: color-mix(in srgb, var(--green) 12%, var(--mix));
  --fs-warn-bg: color-mix(in srgb, var(--gold) 14%, var(--mix));
  --fs-danger-bg: color-mix(in srgb, var(--red) 12%, var(--mix));

  --fs-cap-default: var(--muted);
  --fs-cap-atlas: var(--gold);
  --fs-cap-chronos: var(--blue);
  --fs-cap-capital: var(--green);
  --fs-cap-turbotick: var(--red);
  --fs-cap-search: var(--blue);
  --fs-cap-mail: var(--blue);
  --fs-cap-drive: var(--green);
  --fs-cap-ping: var(--plum);
  --fs-cap-safe: var(--ink-soft);
  --fs-cap-sign: var(--rust);

  --fs-font: var(--mono);
  --fs-font-mono: var(--mono);
  --fs-font-display: var(--serif);

  --fs-radius: var(--radius);
  --fs-radius-sm: 10px;
  --fs-radius-lg: 24px;
}