/* Design tokens — kept in sync with ../designs/*.html. */
:root {
  --bg: #FAFAF7;
  --surface: #FFFFFF;
  --ink: #1A1A1F;
  --mute: #6B6B70;
  --soft-mute: #A0A0A6;
  --hair: #ECECEE;
  --accent: #4F6B4D;
  --accent-soft: #DCE4D2;
  --warm: #E08A5F;
  --warm-soft: #FCE7DC;
  --ok: #5B8F6B;
  --working: #C9933F;
  --alert: #B5604E;
  --shadow-sm: 0 1px 2px rgba(26, 26, 31, .04);
  --shadow-md: 0 1px 2px rgba(26, 26, 31, .04), 0 12px 32px rgba(26, 26, 31, .05);
  --r: 14px;
  --r-sm: 10px;
  --r-xs: 8px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

/* ─────────────────────────  scrollbars  ──────────────────────────
   One pretty default applied to everything that scrolls. Track stays
   transparent so the panel chrome reads through. Thumb starts subtle,
   reveals on element hover, deepens on direct hover. WebKit gets the
   3-state treatment via background-clip:content-box + transparent
   border so the thumb feels detached from the track.                */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(160, 160, 166, .35) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(160, 160, 166, .35);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
  min-height: 36px;
  transition: background-color .15s;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 107, 112, .65);
  background-clip: content-box;
  border: 2px solid transparent;
}
*::-webkit-scrollbar-corner { background: transparent; }
/* On hover-capable parents, give a hint that the thumb exists.       */
@media (hover: hover) {
  *:hover::-webkit-scrollbar-thumb {
    background: rgba(107, 107, 112, .45);
    background-clip: content-box;
    border: 2px solid transparent;
  }
}

/* Aurora — soft, warm, fixed under everything. Four corner radial-gradients in
   sage / coral / gold blending into the warm-white base. The aurora itself is
   on a fixed pseudo-element so it doesn't move when the user scrolls. */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  position: relative;
  isolation: isolate; /* keeps backdrop-filter scoped to the body's stacking context */
}
body::before {
  content: "";
  position: fixed; inset: -10vmax;
  z-index: -1;
  background:
    radial-gradient(circle at 12% 18%, rgb(224 95 133 / 55%), transparent 38%),
    radial-gradient(circle at 92% 12%, rgb(77 94 107 / 55%), transparent 40%),
    radial-gradient(circle at 8% 92%, rgba(221, 183, 141, .60), transparent 42%),
    radial-gradient(circle at 90% 88%, rgba(165, 124, 93, .50), transparent 40%),
    radial-gradient(circle at 50% 60%, rgba(245, 218, 188, .35), transparent 55%),
    var(--bg);
  filter: blur(40px) saturate(120%);
  pointer-events: none;
}
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

/* ───────────────────────────  topbar  ────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 12px;
  height: 44px;
  padding: 0 14px;
  /* Liquid glass — the aurora bleeds through, a 24px blur makes it soft. */
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  border-bottom: 1px solid rgba(236, 236, 238, .6);
}
.logo {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--warm), var(--accent));
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
}
.logo.is-link { text-decoration: none; }
.brand { font-weight: 600; font-size: 13px; }
.crumb { color: var(--soft-mute); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.crumb a { color: var(--mute); }
.crumb-sep { color: var(--soft-mute); opacity: .7; }
.ws-name { font-weight: 600; font-size: 13.5px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.branch-pill {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--soft-mute);
  background: var(--bg); border: 1px solid var(--hair);
  padding: 3px 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
}
.branch-pill .pill-prefix {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--soft-mute); opacity: .8;
}

/* Repo pill — replaces the old branch pill in the workspace topbar. Shows
   main repo + branch, with a "+N" badge if the workspace has multiple repos.
   Click to open a dropdown with per-repo info and a "manage repos" link. */
.repo-pill-wrap { position: relative; display: inline-flex; }
.repo-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px;
  padding: 0 8px 0 10px;
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  cursor: pointer;
  transition: all .12s;
  color: var(--ink);
  font-size: 12.5px;
}
.repo-pill:hover { background: rgba(255, 255, 255, .8); border-color: var(--ink); }
.repo-pill-wrap.open .repo-pill { background: rgba(255, 255, 255, .85); border-color: var(--accent); }
.repo-pill-icon {
  font-size: 14px !important;
  color: var(--mute);
}
.repo-pill-wrap.open .repo-pill-icon { color: var(--accent); }
.repo-pill-name { font-weight: 600; }
.repo-pill-sep { color: var(--soft-mute); }
.repo-pill-branch {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--mute);
  max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.repo-pill-more {
  font-size: 10.5px; font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
}
.repo-pill-chev {
  font-size: 16px !important;
  color: var(--soft-mute);
  transition: transform .15s;
  margin-left: -2px;
}
.repo-pill-wrap.open .repo-pill-chev { transform: rotate(180deg); color: var(--mute); }

.repo-menu {
  min-width: 320px; max-width: 420px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(26, 26, 31, .15);
  overflow: hidden;
}
/* Body-attached overlay variant — fixed coords are set inline from the pill rect. */
.repo-menu.floating {
  position: fixed;
  z-index: 1000;
}
.repo-menu-item {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(236, 236, 238, .6);
}
.repo-menu-item:last-of-type { border-bottom: none; }
.repo-menu-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.repo-menu-name { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.repo-menu-tag {
  font-size: 10px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 7px; border-radius: 999px;
}
.repo-menu-branch {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 4px;
  color: var(--mute); font-size: 12px;
}
.repo-menu-branch .material-symbols-outlined { font-size: 13px !important; }
.repo-menu-branch code {
  background: var(--bg);
  border: 1px solid var(--hair);
  padding: 1px 7px; border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--ink);
}
.repo-menu-url {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--soft-mute);
  margin-bottom: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.repo-menu-link {
  display: inline-block;
  font-size: 11.5px; color: var(--accent);
  text-decoration: none;
}
.repo-menu-link:hover { text-decoration: underline; }
.repo-menu-empty {
  padding: 16px; text-align: center;
  color: var(--mute); font-size: 12.5px;
}

.repo-menu-footer {
  padding: 10px 14px;
  background: rgba(0, 0, 0, .025);
  border-top: 1px solid rgba(236, 236, 238, .6);
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.repo-menu-action {
  background: transparent; border: none;
  color: var(--accent);
  font-family: inherit;
  font-size: 12.5px; font-weight: 500;
  cursor: pointer;
  padding: 0;
}
.repo-menu-action:hover { text-decoration: underline; }
.repo-menu-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  text-align: right;
}
.top-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.idle-tag {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--mute); font-size: 12px;
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .55);
  padding: 5px 10px; border-radius: 999px;
}
.idle-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.icon-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--hair); border-radius: var(--r-sm);
  background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--mute);
  transition: all .15s;
}
.icon-btn:hover { border-color: var(--ink); color: var(--ink); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn .material-symbols-outlined { font-size: 18px; }

/* Material Symbols (font icons) — global base. Pages opt in by setting class
   "material-symbols-outlined" on a span; the span's textContent is the icon
   name (e.g. "settings", "refresh"). Color inherits from the parent. */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  user-select: none;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.service-action .material-symbols-outlined { font-size: 16px; }
.send-btn .material-symbols-outlined { font-size: 16px; }
.settings-close .material-symbols-outlined { font-size: 20px; }

/* ───────────────────────  buttons / form  ────────────────────────── */
.btn-primary {
  background: var(--accent); color: white; border: none;
  border-radius: var(--r-sm); padding: 10px 18px;
  font-weight: 500; font-size: 13.5px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .15s;
}
.btn-primary:hover { background: #3F5A3D; }
.btn-primary:disabled { opacity: .5; pointer-events: none; }
.btn-secondary {
  background: var(--surface); color: var(--ink); border: 1px solid var(--hair);
  border-radius: var(--r-sm); padding: 10px 16px;
  font-weight: 500; font-size: 13.5px;
}
.btn-secondary:hover { border-color: var(--ink); }
.input {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-sm); padding: 10px 14px;
  font-size: 14px; color: var(--ink); width: 100%;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ─────────────────────────  dashboard  ───────────────────────────── */
.app { display: grid; grid-template-rows: 64px 1fr; height: 100vh; }
.dashboard { padding: 48px 32px; overflow-y: auto; }
.dashboard-inner { max-width: 1080px; margin: 0 auto; }
.hero h1 {
  font-size: 32px; font-weight: 600;
  margin: 0 0 6px; letter-spacing: -.01em;
}
.hero p { color: var(--mute); margin: 0 0 28px; }
.row-actions { display: flex; gap: 12px; align-items: center; margin-bottom: 28px; }

.ws-list { display: flex; flex-direction: column; gap: 10px; }
.ws-row {
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r);
  padding: 16px 22px;
  display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 18px;
  align-items: center;
  transition: all .15s;
}
.ws-row:hover { border-color: var(--accent); cursor: pointer; box-shadow: var(--shadow-sm); }
.ws-state { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.ws-state.suspended { background: var(--soft-mute); }
.ws-state.failed    { background: var(--alert); }
.ws-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-title { font-weight: 500; font-size: 14.5px; }
.ws-meta { color: var(--mute); font-size: 12.5px; }
.ws-branch { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--mute); }
.ws-time { color: var(--mute); font-size: 12.5px; }
.ws-open {
  color: var(--accent); font-weight: 500; font-size: 13px;
  padding: 6px 12px; border-radius: var(--r-sm); background: var(--accent-soft);
}

.empty {
  text-align: center; padding: 56px 24px; color: var(--mute);
  background: var(--surface); border: 1px dashed var(--hair); border-radius: var(--r);
}
.empty h3 { color: var(--ink); margin: 0 0 6px; font-size: 18px; }

/* ─────────────────────────  workspace  ───────────────────────────── */
.workspace {
  display: grid;
  /* 1-2 grid: chat on the left (resizable, default ~420), iframe takes the rest. */
  grid-template-columns: var(--left-w, 420px) 14px minmax(0, 1fr);
  gap: 0;
  padding: 12px;
  min-height: 0;
  overflow: hidden;
}

.resize-handle {
  position: relative;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}
/* Permanent hairline so the column reads as "draggable" even before hover. */
.resize-handle::after {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 1px; height: 100%;
  background: var(--hair);
  opacity: .6;
}
.resize-handle::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 3px; height: 36px;
  background: var(--soft-mute);
  border-radius: 2px;
  opacity: .5;
  transition: background .15s, height .15s, opacity .15s;
  z-index: 1;
}
.resize-handle:hover::before { background: var(--mute); height: 48px; opacity: 1; }
.resize-handle.dragging::before { background: var(--accent); height: 64px; opacity: 1; }
/* (hover/drag rules consolidated above) */

/* While dragging, prevent iframes/text from intercepting pointer events. */
body.resizing { cursor: col-resize; }
body.resizing iframe { pointer-events: none; }
body.resizing * { user-select: none; }
.panel {
  /* Liquid glass: translucent fill + backdrop blur lets the aurora warm the
     panel edges. Tuned for legible text on top while still feeling like glass. */
  background: rgba(255, 255, 255, .42);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 1px 2px rgba(26, 26, 31, .04), 0 8px 32px rgba(26, 26, 31, .06);
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.panel-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px 12px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--soft-mute);
}

/* sessions dropdown (in chat panel header) */
.sessions-dropdown {
  position: relative;
  margin: 12px 16px 0;
}
.sessions-trigger {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all .12s;
  text-align: left;
}
.sessions-trigger:hover { background: rgba(255, 255, 255, .75); border-color: var(--accent); }
.sessions-trigger .trigger-title { flex: 1; font-weight: 500; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sessions-trigger .trigger-count { color: var(--soft-mute); font-size: 11px; }
.sessions-trigger .chev {
  color: var(--mute); font-size: 12px;
  transition: transform .15s;
}
.sessions-dropdown.open .sessions-trigger .chev { transform: rotate(180deg); }

.sessions-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--r-sm);
  box-shadow: 0 12px 32px rgba(26, 26, 31, .15);
  z-index: 30;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.sessions-menu .session {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(236, 236, 238, .5);
  transition: background .1s;
}
.sessions-menu .session:last-of-type { border-bottom: none; }
.sessions-menu .session:hover { background: var(--accent-soft); }
.sessions-menu .session.active { background: var(--accent-soft); color: var(--accent); }
.sessions-menu .session-body { flex: 1; min-width: 0; }
.sessions-menu .session-title { font-weight: 500; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sessions-menu .session.active .session-title { color: var(--accent); }
.sessions-menu .session-time { color: var(--soft-mute); font-size: 11px; margin-top: 2px; }
.sessions-menu .session-delete {
  flex-shrink: 0;
  width: 22px; height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--soft-mute);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, background .12s, color .12s;
}
.sessions-menu .session:hover .session-delete { opacity: 1; }
.sessions-menu .session-delete:hover { background: rgba(193, 67, 42, .12); color: var(--alert); }

.sessions-menu .session-menu-footer {
  display: flex;
  border-top: 1px solid var(--hair);
}
.sessions-menu .new-session,
.sessions-menu .wipe-sessions {
  flex: 1;
  display: block;
  text-align: left;
  padding: 10px 14px;
  border: none;
  background: transparent;
  font-weight: 500; font-size: 13px;
  cursor: pointer;
}
.sessions-menu .new-session { color: var(--accent); }
.sessions-menu .new-session:hover { background: var(--accent-soft); }
.sessions-menu .wipe-sessions {
  color: var(--soft-mute);
  border-left: 1px solid var(--hair);
  text-align: center;
  font-size: 11.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  flex: 0 0 auto; padding: 10px 14px;
}
.sessions-menu .wipe-sessions:hover { color: var(--alert); background: rgba(193, 67, 42, .06); }

/* chat */
.chat-panel { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; }
.chat-banner {
  padding: 8px 16px;
  background: var(--warm-soft);
  color: #A04D24;
  font-size: 12.5px;
  border-bottom: 1px solid var(--hair);
  display: flex; align-items: center; gap: 8px;
}
.chat-banner.hidden { display: none; }
.chat-banner code { background: var(--surface); padding: 1px 6px; border-radius: 6px; }

.chat-stream {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 15px;
  display: flex; flex-direction: column; gap: 12px;
  scroll-behavior: smooth;
}
/* Stick messages to the bottom of the chat panel until the conversation
   actually overflows. Lovable-style: your message + the streaming response
   appear right above the composer, not floating at the top. `auto` margins
   on flex items collapse to 0 once content fills the container, so normal
   scroll behaviour kicks in for long chats. */
.chat-stream > .msg:first-of-type { margin-top: auto; }
.chat-empty {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  color: var(--mute);
  text-align: center;
  padding: 48px 32px;
}
.chat-empty h3 { color: var(--ink); margin: 0; font-size: 18px; font-weight: 600; }
/* Default empty-state copy stays narrow for readability. The onboarding
   cards have their own (wider) typography and shouldn't be clamped. */
.chat-empty > p { margin: 0; max-width: 36ch; }
.chat-empty .starters {
  margin-top: 24px;
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; max-width: 460px;
}
.chat-empty .starter {
  text-align: left;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 13.5px;
  cursor: pointer;
  transition: all .15s;
}
.chat-empty .starter:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.chat-empty .empty-events {
  margin-top: 24px;
  background: var(--bg);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  width: 100%; max-width: 460px;
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
}
.chat-empty .empty-events .label {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--soft-mute);
}
.empty-events .ev-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--mute); }
.empty-events .ev-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--soft-mute); }
.empty-events .ev-dot.ok { background: var(--ok); }
.empty-events .ev-dot.working { background: var(--working); animation: pulse 1.4s ease-in-out infinite; }
.empty-events .ev-dot.alert { background: var(--alert); }

.msg { display: flex; gap: 6px; max-width: 100%; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}
.avatar.assistant { background: var(--accent-soft); color: var(--accent); }
.avatar.user { background: var(--warm-soft); color: #A04D24; }
.msg-body {
  flex: 1; min-width: 0;
  padding: 6px 10px;
  background: var(--surface);
  border-radius: 12px;
}
.msg-author { font-weight: 600; font-size: 12.5px; color: var(--mute); }
.msg-text { margin-top: 4px; line-height: 1.65; color: var(--ink); word-wrap: break-word; }
.msg-text > *:first-child { margin-top: 0; }
.msg-text > *:last-child { margin-bottom: 0; }
.msg-text p { margin: 0 0 10px; }
.msg-text h3, .msg-text h4, .msg-text h5, .msg-text h6 { margin: 14px 0 6px; font-weight: 600; line-height: 1.35; }
.msg-text h3 { font-size: 16px; }
.msg-text h4 { font-size: 15px; }
.msg-text h5, .msg-text h6 { font-size: 14px; }
.msg-text strong { font-weight: 600; }
.msg-text em { font-style: italic; }
.msg-text ul, .msg-text ol { margin: 4px 0 10px; padding-left: 22px; }
.msg-text li { margin-bottom: 4px; }
.msg-text a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-soft); }
.msg-text a:hover { text-decoration-color: var(--accent); }
.msg-text code { background: var(--bg); border: 1px solid var(--hair); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.msg-text pre {
  background: var(--bg); border: 1px solid var(--hair); border-radius: var(--r-sm);
  padding: 12px 14px; margin: 8px 0;
  overflow-x: auto; font-size: 12.5px; line-height: 1.5;
}
.msg-text pre code { border: none; padding: 0; background: transparent; }

/* "thinking" stage label, replaced on each new tool call */
.thinking-stage {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 12.5px;
}
.thinking-stage::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.4s ease-in-out infinite;
}

/* Tools chip — wrench + counter inline with the message author. Click opens
   a small popover with the tool-call timeline. */
.tools-chip-wrap { position: relative; display: inline-flex; margin-left: 6px; }
.tools-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px 1px 4px;
  height: 18px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(236, 236, 238, .8);
  border-radius: 999px;
  cursor: pointer;
  transition: all .12s;
  vertical-align: middle;
}
.tools-chip:hover { border-color: var(--accent); background: var(--accent-soft); }
.tools-chip.open { border-color: var(--accent); background: var(--accent-soft); }
.tools-chip.active { border-color: var(--accent); }
.tools-chip-icon {
  font-size: 13px !important;
  color: var(--mute);
  line-height: 1;
}
.tools-chip:hover .tools-chip-icon,
.tools-chip.open .tools-chip-icon { color: var(--accent); }
/* Active state — colored accent on icon + count. No spin: the chip is an
   informational counter, not a progress indicator. The thinking-stage line
   in the chat panel handles "what's running right now". */
.tools-chip.active .tools-chip-icon { color: var(--accent); }
.tools-chip.active .tools-chip-count { color: var(--accent); }
.tools-chip-count {
  font-size: 10.5px; font-weight: 600;
  color: var(--mute);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1;
}
.tools-chip:hover .tools-chip-count,
.tools-chip.open .tools-chip-count { color: var(--accent); }

.tool-popover {
  position: absolute;
  top: calc(100% + 6px); left: 0;
  min-width: 320px; max-width: 460px;
  max-height: 360px;
  overflow-y: auto;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(26, 26, 31, .15);
  z-index: 30;
  padding: 8px 0;
}
.tool-popover-head {
  padding: 4px 14px 8px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--soft-mute);
}
.tool-popover .tool-step {
  padding: 6px 14px;
  border-bottom: 1px solid rgba(236, 236, 238, .5);
}
.tool-popover .tool-step:last-child { border-bottom: none; }
.tool-step {
  display: grid; grid-template-columns: 16px 1fr auto;
  gap: 10px; align-items: start;
  padding: 8px 0;
  border-bottom: 1px dashed var(--hair);
  font-size: 12.5px;
}
.tool-step:last-child { border-bottom: none; }
.tool-step-icon {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent); margin-top: 2px;
}
.tool-step-name { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }
.tool-step-args { color: var(--mute); font-size: 11.5px; margin-top: 2px; word-break: break-all; }
.tool-step-time { color: var(--soft-mute); font-size: 11px; white-space: nowrap; }
.tool-step.failed { color: var(--alert); }
.tool-step.failed .tool-step-icon { color: var(--alert); }

.commit-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-soft); color: var(--accent);
  padding: 6px 12px; border-radius: 999px;
  font-size: 12.5px; margin-top: 8px;
  font-weight: 500;
}
.commit-chip .sha { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; opacity: .7; }

/* composer */
.composer {
  border-top: 1px solid rgba(236, 236, 238, .6);
  padding: 12px 14px 14px;
  /* Slightly more opaque than the panel — text in the textarea needs full contrast. */
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  display: flex; flex-direction: column;
  gap: 8px;
}

/* slim toolbar above the textarea — currently just the model picker */
.composer-toolbar {
  position: relative;
  display: flex; align-items: center; gap: 8px;
}
.model-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(236, 236, 238, .8);
  border-radius: 999px;
  color: var(--mute);
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: all .12s;
  max-width: 240px;
}
.model-chip:hover { color: var(--ink); border-color: var(--ink); background: rgba(255, 255, 255, .85); }
.model-chip.open { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); }
.model-chip .material-symbols-outlined { font-size: 14px; }
.model-chip > :not(.material-symbols-outlined) {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 160px;
}
.model-chev { transition: transform .15s; }
.model-chip.open .model-chev { transform: rotate(180deg); }

.model-menu {
  position: absolute;
  bottom: calc(100% + 6px); left: 0;
  min-width: 240px; max-width: 320px;
  max-height: 280px; overflow-y: auto;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(26, 26, 31, .12);
  z-index: 20;
  padding: 6px;
}
.model-item {
  display: block; width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: transparent; border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .1s;
}
.model-item:hover { background: var(--accent-soft); }
.model-item.active { background: var(--accent-soft); }
.model-item.disabled { opacity: .5; cursor: not-allowed; }
.model-item.disabled:hover { background: transparent; }
.model-name { font-weight: 500; font-size: 13px; color: var(--ink); }
.model-item.active .model-name { color: var(--accent); }
.model-meta { font-size: 11px; color: var(--soft-mute); margin-top: 2px; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.composer .queue-chip {
  align-self: start;
  font-size: 11.5px; color: var(--working);
  background: var(--surface); border: 1px solid var(--hair);
  padding: 4px 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
}
.composer-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 10px; align-items: end;
}
.composer textarea {
  min-height: 48px; max-height: 200px;
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  font-family: inherit; font-size: 14px; line-height: 1.5;
  resize: none;
  background: var(--bg);
  color: var(--ink);
  transition: all .15s;
  /* Hide the scrollbar entirely until the user types past the max-height —
     autoGrow expands the textarea up to 200px, then overflow:auto kicks in. */
  overflow-y: hidden;
}
.composer textarea:not([data-overflowing="false"]):focus { outline: none; }
.composer textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.send-btn {
  background: var(--accent); color: white;
  border: none; border-radius: var(--r-sm);
  padding: 0 20px; height: 44px;
  font-weight: 500; font-size: 13px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s;
}
.send-btn:hover { background: #3F5A3D; }
.send-btn:disabled { opacity: .5; cursor: default; }
.send-btn.stop { background: var(--alert); }
.send-btn.stop:hover { background: #983F2F; }

/* events feed kept for backward compat (used in iframe try-to-fix flows etc) */
.events-panel { padding: 24px 28px; }
.events-panel .panel-label { padding: 0 0 16px; }
.events-stream { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; flex: 1; }
.event {
  display: grid; grid-template-columns: 12px 1fr auto;
  gap: 14px; align-items: start;
}
.event-dot {
  width: 8px; height: 8px; border-radius: 50%; margin-top: 7px;
  background: var(--soft-mute);
}
.event-dot.ok       { background: var(--ok); }
.event-dot.working  { background: var(--working); animation: pulse 1.4s ease-in-out infinite; }
.event-dot.alert    { background: var(--alert); }
.event-body { min-width: 0; }
.event-title { font-weight: 500; }
.event-detail { color: var(--mute); font-size: 12.5px; margin-top: 2px; line-height: 1.5; }
.event-time { color: var(--soft-mute); font-size: 11px; white-space: nowrap; padding-top: 2px; }
.event-detail code {
  background: var(--bg); border: 1px solid var(--hair);
  padding: 1px 6px; border-radius: 6px; font-size: 11.5px;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* preview */
.preview-panel { display: grid; grid-template-rows: auto 1fr; }
.tabs {
  display: flex; gap: 2px;
  padding: 8px 12px 0;
  border-bottom: 1px solid rgba(236, 236, 238, .6);
  overflow-x: auto;
  /* Hide the scrollbar — the tabs already have visual edges, a scrollbar
     here is visual noise. */
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 10px 14px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  color: var(--mute); font-weight: 500; font-size: 13px;
  border: none; background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .15s;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.tab-refresh {
  margin-left: auto;
  background: transparent; border: none;
  color: var(--soft-mute);
  padding: 8px 10px;
  cursor: pointer;
  display: inline-flex; align-items: center;
  border-radius: 8px;
  transition: all .12s;
}
.tab-refresh:hover { color: var(--ink); background: rgba(0, 0, 0, .04); }
.tab-refresh .material-symbols-outlined { font-size: 16px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--soft-mute); box-shadow: 0 0 0 0 transparent; }
.tab .status-dot { width: 10px; height: 10px; }
.tab .status-dot.working { box-shadow: 0 0 0 4px var(--accent-soft); }
.status-dot.ok      { background: var(--ok); }
.status-dot.working { background: var(--working); animation: pulse 1.4s ease-in-out infinite; }
.status-dot.alert   { background: var(--alert); }

.iframe-wrap { padding: 16px; min-height: 0; display: flex; flex-direction: column; }
.iframe-wrap {
  position: relative;
  /* No gradient on the wrapper — only the empty-state inner div uses the warm
     gradient. Avoids the brand-mismatched flash before iframe paints. */
  background: var(--surface);
}
.iframe-wrap iframe {
  flex: 1;
  background: var(--surface);
  border-radius: var(--r-sm);
  border: 1px solid var(--hair);
  width: 100%;
  min-height: 320px;
  transition: opacity .25s ease;
}
.iframe-wrap iframe.compiling { opacity: .55; }
.iframe-wrap .iframe-fix {
  position: absolute;
  bottom: 24px; right: 24px;
  background: var(--alert); color: white;
  padding: 10px 16px; border-radius: var(--r-sm);
  font-weight: 500; font-size: 13px;
  border: none; cursor: pointer;
  box-shadow: 0 6px 24px rgba(181, 96, 78, .3);
  display: inline-flex; align-items: center; gap: 8px;
}
.iframe-wrap .iframe-fix:hover { background: #983F2F; }
.iframe-empty {
  flex: 1;
  background: linear-gradient(160deg, #FFFFFF 0%, var(--accent-soft) 100%);
  border-radius: var(--r-sm);
  border: 1px solid var(--hair);
  padding: 40px 32px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  color: var(--mute);
}
.iframe-empty .url { color: var(--soft-mute); margin-bottom: 12px; font-size: 12px; }
.iframe-empty h3 { color: var(--accent); margin: 0; font-size: 22px; font-weight: 600; }

/* Services pill in the header — compact dot row.  */
.services-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px;
  padding: 0 10px;
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
  color: var(--mute); font-size: 12px;
}
.services-pill:hover { background: rgba(255, 255, 255, .75); border-color: var(--ink); color: var(--ink); }
.services-pill .dots { display: inline-flex; gap: 4px; }
.services-pill .dots .status-dot { width: 7px; height: 7px; }

/* Services popover — slides down from the header pill on click. */
.services-popover {
  position: fixed;
  top: 50px; right: 14px;
  min-width: 320px; max-width: 420px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  backdrop-filter: blur(32px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(26, 26, 31, .15);
  z-index: 40;
  padding: 14px 18px 16px;
}
.services-popover .panel-label { padding: 0; }
.services-popover-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 12px;
}
.stack-actions { display: flex; gap: 6px; }
.stack-action {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--hair);
  border-radius: 7px;
  background: rgba(255, 255, 255, .6);
  color: var(--mute);
  font-family: inherit;
  font-size: 11.5px; font-weight: 500;
  cursor: pointer;
  transition: all .12s;
}
.stack-action:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.stack-action.danger:hover {
  color: var(--alert);
  border-color: var(--alert);
  background: rgba(193, 67, 42, .08);
}
.stack-action .material-symbols-outlined { font-size: 14px !important; }
.service-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 12px; align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--hair);
}
.service-row:last-child { border-bottom: none; }
.service-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.service-name { font-weight: 500; font-size: 13.5px; }
.service-status {
  color: var(--mute); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.service-actions {
  display: flex; gap: 4px;
  opacity: .8; transition: opacity .15s;
}
.service-row:hover .service-actions,
.service-actions:focus-within { opacity: 1; }
.service-action {
  width: 28px; height: 28px;
  border-radius: var(--r-xs);
  background: var(--bg);
  border: 1px solid var(--hair);
  color: var(--mute);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.service-action:hover { color: var(--ink); border-color: var(--ink); background: var(--surface); }
.service-action svg { width: 12px; height: 12px; }

/* log slide-over */
.logs-overlay {
  position: fixed; inset: 0;
  background: rgba(26, 26, 31, .25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex; justify-content: flex-end;
  z-index: 50;
}
.logs-panel {
  width: min(720px, 92vw); height: 100%;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  backdrop-filter: blur(32px) saturate(160%);
  border-left: 1px solid rgba(255, 255, 255, .55);
  display: grid; grid-template-rows: auto 1fr;
  box-shadow: -16px 0 48px rgba(26, 26, 31, .15);
}
.logs-head {
  padding: 16px 20px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--hair);
}
.logs-title { font-weight: 600; }
.logs-sub { color: var(--mute); font-size: 12.5px; }
.logs-stream {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; line-height: 1.55;
  padding: 16px 20px;
  overflow-y: auto;
  background: var(--bg);
  white-space: pre-wrap;
}
.log-line { color: var(--ink); }
.log-line.error { color: var(--alert); }

/* ─────────────────────────  login  ───────────────────────────────── */
.login-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  /* Aurora reaches the login screen too. */
  background: transparent;
}
.login-left {
  padding: 48px 56px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  background: rgba(255, 255, 255, .15);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border-right: 1px solid rgba(255, 255, 255, .25);
}
.login-left .brand-line { display: flex; align-items: center; gap: 12px; }
.login-left .pitch { margin-top: 80px; max-width: 460px; }
.login-left .pitch h1 {
  font-size: 44px; font-weight: 600;
  margin: 0 0 18px;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.login-left .pitch h1 em { font-style: normal; color: var(--accent); }
.login-left .pitch p { color: var(--mute); font-size: 16px; line-height: 1.6; margin: 0; }
.login-left .footnote { color: var(--soft-mute); font-size: 12px; }

.login-right {
  padding: 48px 56px;
  display: flex; align-items: center; justify-content: center;
}
.login-card {
  background: rgba(255, 255, 255, .65);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  backdrop-filter: blur(32px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 18px;
  padding: 40px 36px;
  width: 100%; max-width: 420px;
  box-shadow: 0 16px 48px rgba(26, 26, 31, .12), 0 2px 6px rgba(26, 26, 31, .06);
}
.login-card h2 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.login-card .subtitle { color: var(--mute); margin: 0 0 28px; font-size: 14px; }
.gitlab-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%;
  background: var(--ink); color: white;
  border: none; border-radius: var(--r-sm);
  padding: 14px 18px;
  font-family: inherit; font-weight: 500; font-size: 14.5px;
  text-decoration: none;
  transition: background .15s;
}
.gitlab-btn:hover { background: #0F0F14; text-decoration: none; }
.gitlab-icon { width: 18px; height: 18px; flex-shrink: 0; }
.login-card .terms {
  margin-top: 28px;
  text-align: center;
  color: var(--soft-mute); font-size: 11.5px; line-height: 1.5;
}

/* user chip in topbar */
.user-chip-wrap { position: relative; display: inline-flex; }
.user-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px;
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
  height: 30px;
  font-family: inherit;
}
.user-chip:hover { border-color: var(--ink); background: rgba(255, 255, 255, .8); }
.user-chip-wrap.open .user-chip { border-color: var(--accent); background: rgba(255, 255, 255, .85); }
.user-role-badge {
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: 999px;
}

.user-menu {
  position: absolute;
  top: calc(100% + 6px); right: 0;
  min-width: 240px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(26, 26, 31, .15);
  z-index: 30;
  overflow: hidden;
}
.user-menu-head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(236, 236, 238, .6);
}
.user-menu-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.user-menu-meta {
  margin-top: 2px;
  font-size: 11.5px; color: var(--mute);
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.user-menu-meta .dot { color: var(--soft-mute); }
.user-menu-items { padding: 6px; }
.user-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px; color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background .1s;
}
.user-menu-item:hover { background: var(--accent-soft); }
.user-menu-item.danger { color: var(--alert); }
.user-menu-item.danger:hover { background: rgba(181, 96, 78, .1); }
.user-menu-item .material-symbols-outlined { font-size: 16px !important; opacity: .7; }
.user-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
  font-weight: 600; font-size: 11px;
  object-fit: cover;
}
.user-name { font-size: 13px; font-weight: 500; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* dialog tabs + project picker */
.dialog.wide { max-width: 520px; width: min(520px, 92vw); }
.dialog-tabs {
  display: flex; gap: 4px;
  margin: 4px 0 18px;
  padding: 4px;
  background: var(--bg);
  border-radius: var(--r-sm);
}
.dialog-tab {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--r-xs);
  background: transparent;
  border: none;
  font-size: 13px; font-weight: 500;
  color: var(--mute);
  transition: all .12s;
}
.dialog-tab:hover:not(.active):not(.disabled) { color: var(--ink); background: rgba(255, 255, 255, .4); }
.dialog-tab.active {
  background: var(--accent);
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(79, 107, 77, .25);
}
.dialog-tab.disabled { opacity: .4; cursor: not-allowed; }

.project-input-wrap { position: relative; }
.project-results {
  margin-top: 8px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--hair) transparent;
}
.project-results.loading,
.project-results.empty {
  padding: 14px 16px;
  color: var(--mute); font-size: 12.5px; text-align: center;
  background: var(--bg);
}
.project-row {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hair);
  cursor: pointer;
  transition: background .12s;
}
.project-row:last-child { border-bottom: none; }
.project-row:hover { background: var(--accent-soft); }
.project-name { font-weight: 500; font-size: 13.5px; color: var(--ink); }
.project-path { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--mute); }

.selected-repos {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 10px;
}
.project-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(236, 236, 238, .8);
  border-radius: var(--r-sm);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--ink);
}
.project-chip.is-main {
  background: var(--accent-soft);
  border-color: rgba(79, 107, 77, .25);
}
.project-chip .repo-tag {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent);
  background: rgba(255, 255, 255, .6);
  padding: 1px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
/* Non-main repos get a muted "extra" tag for visual symmetry. */
.project-chip .repo-tag.extra {
  color: var(--soft-mute);
  background: rgba(0, 0, 0, .04);
}

/* ── creating-workspace view ───────────────────────────────────────── */
.dialog.creating-view {
  text-align: center;
  padding: 28px 28px 24px;
}
.dialog.creating-view h2 {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 600;
}
.creating-title-name { color: var(--accent); }

.creating-hero {
  margin: 18px -8px 12px;
  display: flex; justify-content: center;
}
.creating-svg {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
}
.creating-node circle,
.creating-node rect {
  fill: rgba(255, 255, 255, .9);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.creating-node.container rect {
  fill: var(--accent-soft);
  stroke: var(--accent);
  animation: creating-container-glow 1.8s ease-in-out infinite;
}
.creating-node.container rect:nth-child(2) { animation-delay: .3s; }
.creating-node.container rect:nth-child(3) { animation-delay: .6s; }
.creating-node.container rect:nth-child(4) { animation-delay: .9s; }
@keyframes creating-container-glow {
  0%, 100% { fill: rgba(255,255,255,.85); }
  50% { fill: var(--accent-soft); }
}
.creating-node text {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  fill: var(--accent);
  font-weight: 600;
}
.creating-wire {
  fill: none;
  stroke: var(--hair);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
.creating-packet {
  fill: var(--accent);
  filter: drop-shadow(0 0 4px rgba(79, 107, 77, .5));
}
.packet-1 { animation: creating-packet-flow-a 1.6s linear infinite; }
.packet-2 { animation: creating-packet-flow-b 1.6s linear infinite; animation-delay: .5s; }
.packet-3 { animation: creating-packet-flow-c 1.6s linear infinite; animation-delay: 1s; }
@keyframes creating-packet-flow-a {
  0%   { transform: translate(62px, 40px); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(160px, 40px); opacity: 1; }
  100% { transform: translate(280px, 30px); opacity: 0; }
}
@keyframes creating-packet-flow-b {
  0%   { transform: translate(62px, 40px); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(290px, 48px); opacity: 0; }
}
@keyframes creating-packet-flow-c {
  0%   { transform: translate(62px, 40px); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(268px, 24px); opacity: 0; }
}
.creating-ground {
  stroke: var(--hair);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.creating-files rect {
  fill: var(--accent-soft);
  animation: creating-file-shimmer 2s ease-in-out infinite;
}
.creating-files rect:nth-child(2) { animation-delay: .2s; }
.creating-files rect:nth-child(3) { animation-delay: .4s; }
.creating-files rect:nth-child(4) { animation-delay: .6s; }
.creating-files rect:nth-child(5) { animation-delay: .8s; }
.creating-files rect:nth-child(6) { animation-delay: 1.0s; }
.creating-files rect:nth-child(7) { animation-delay: 1.2s; }
@keyframes creating-file-shimmer {
  0%, 100% { opacity: .3; }
  50% { opacity: 1; }
}

.creating-repos {
  display: flex; flex-direction: column;
  gap: 6px;
  margin: 14px 0 18px;
  text-align: left;
}
.creating-repo-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--hair);
  border-radius: 8px;
  font-size: 12.5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--ink);
  animation: creating-row-fade 600ms ease-out both;
}
@keyframes creating-row-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.creating-repo-icon {
  font-size: 16px !important;
  color: var(--accent);
}
.creating-repo-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creating-repo-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: creating-pulse 1.2s ease-in-out infinite;
}
@keyframes creating-pulse {
  0%, 100% { transform: scale(1); opacity: .4; box-shadow: 0 0 0 0 rgba(79, 107, 77, .4); }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 0 6px rgba(79, 107, 77, 0); }
}

.creating-status {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--mute);
}
.creating-status-spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--hair);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: creating-spin .9s linear infinite;
}
@keyframes creating-spin { to { transform: rotate(360deg); } }
.creating-status-text {
  position: relative;
  display: inline-block;
  height: 18px;
  min-width: 180px;
  text-align: left;
}
.creating-status-text .creating-status-line {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  animation: creating-status-cycle 14s linear infinite;
}
.creating-status-text .creating-status-line:nth-child(1) { animation-delay:  0s; }
.creating-status-text .creating-status-line:nth-child(2) { animation-delay:  2s; }
.creating-status-text .creating-status-line:nth-child(3) { animation-delay:  4s; }
.creating-status-text .creating-status-line:nth-child(4) { animation-delay:  6s; }
.creating-status-text .creating-status-line:nth-child(5) { animation-delay:  8s; }
.creating-status-text .creating-status-line:nth-child(6) { animation-delay: 10s; }
.creating-status-text .creating-status-line:nth-child(7) { animation-delay: 12s; }
@keyframes creating-status-cycle {
  0%, 1%   { opacity: 0; transform: translateY(4px); }
  2%, 13%  { opacity: 1; transform: translateY(0); }
  14%, 100%{ opacity: 0; transform: translateY(-4px); }
}

/* ── stack hints (optional form during workspace creation) ─────────── */
.field.stack-hints {
  background: rgba(0, 0, 0, .02);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}
.stack-hints-head { padding: 0; }
.stack-hints-toggle {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 12.5px; font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.stack-hints-toggle:hover { background: rgba(0, 0, 0, .03); }
.stack-hints-toggle .material-symbols-outlined { font-size: 16px !important; color: var(--soft-mute); }
.stack-hints-title { flex: 1; }
.stack-hints-grid {
  padding: 4px 14px 14px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.stack-hints-row {
  display: grid;
  grid-template-columns: 130px 1fr 1fr;
  gap: 8px;
  align-items: center;
}
.stack-hints-label {
  font-size: 12px; font-weight: 500;
  color: var(--ink);
}
.stack-hints-label .small { display: block; font-weight: 400; margin-top: 1px; }
.stack-hints-select,
.stack-hints-path {
  font-size: 12.5px;
  padding: 6px 10px;
  background: white;
  border: 1px solid var(--hair);
  border-radius: 7px;
}
.stack-hints-select-wide { grid-column: 2 / span 2; }
.stack-hints-select:focus,
.stack-hints-path:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.project-chip > span:not(.repo-tag) {
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.project-chip .chip-x {
  background: transparent; border: none;
  color: var(--mute); cursor: pointer;
  font-size: 18px; line-height: 1;
  padding: 0 4px;
  flex-shrink: 0;
}
.project-chip .chip-x:hover { color: var(--alert); }

/* settings dialog */
.settings-overlay {
  position: fixed; inset: 0;
  background: rgba(26, 26, 31, .25);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 60;
}
.settings-dialog {
  display: grid;
  grid-template-columns: 220px 1fr;
  width: min(880px, 92vw);
  height: min(640px, 88vh);
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  backdrop-filter: blur(32px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(26, 26, 31, .18), 0 2px 6px rgba(26, 26, 31, .08);
  overflow: hidden;
}

.settings-rail {
  border-right: 1px solid rgba(236, 236, 238, .6);
  padding: 18px 12px;
  display: flex; flex-direction: column; gap: 18px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--hair) transparent;
}
.settings-section { display: flex; flex-direction: column; gap: 2px; }
.settings-section-label {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--soft-mute);
  padding: 0 10px 6px;
}
.settings-rail-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: none; background: transparent;
  border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: all .12s;
  text-align: left;
  width: 100%;
}
.settings-rail-item:hover { background: rgba(0, 0, 0, .04); }
.settings-rail-item.active { background: var(--accent-soft); color: var(--accent); }
.settings-rail-item.disabled { color: var(--soft-mute); cursor: default; }
.settings-rail-item.disabled:hover { background: transparent; }
.settings-rail-icon { width: 18px; display: inline-flex; justify-content: center; flex-shrink: 0; }
.settings-rail-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-rail-soon {
  font-size: 10px; font-weight: 500;
  color: var(--soft-mute);
  background: rgba(0, 0, 0, .04);
  padding: 2px 6px; border-radius: 999px;
  letter-spacing: .04em;
  text-transform: lowercase;
}

.settings-content {
  position: relative;
  padding: 32px 36px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--hair) transparent;
}
.settings-close {
  position: absolute; top: 16px; right: 16px;
  width: 30px; height: 30px;
  border: none; background: transparent;
  border-radius: 8px;
  color: var(--mute);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  transition: all .12s;
}
.settings-close:hover { background: rgba(0, 0, 0, .05); color: var(--ink); }

.settings-tab h2 {
  margin: 0 0 4px; font-size: 22px; font-weight: 600;
  letter-spacing: -.01em;
}
.settings-tab .sub { color: var(--mute); margin: 0 0 26px; font-size: 14px; }
.settings-section-h {
  margin: 24px 0 6px; font-size: 14px; font-weight: 600;
}
.settings-section-h.danger { color: var(--alert); }
.settings-tab .small { font-size: 12.5px; }
.settings-tab .muted { color: var(--mute); margin: 0 0 14px; }

.knowledge-input {
  width: 100%;
  min-height: 240px;
  padding: 14px 16px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; line-height: 1.55;
  color: var(--ink);
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(236, 236, 238, .8);
  border-radius: var(--r-sm);
  resize: vertical;
}
.knowledge-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.settings-footer {
  margin-top: 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.knowledge-status {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--mute); font-size: 12.5px;
}
.knowledge-dirty {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--soft-mute);
  transition: background .15s;
}
.knowledge-dirty.visible { background: var(--working); }

.settings-error {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(181, 96, 78, .08);
  border: 1px solid rgba(181, 96, 78, .35);
  border-radius: var(--r-sm);
  color: var(--alert);
  font-size: 12.5px;
}

.danger-zone {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(236, 236, 238, .8);
}
.btn-danger {
  background: rgba(181, 96, 78, .08);
  color: var(--alert);
  border: 1px solid rgba(181, 96, 78, .35);
  border-radius: var(--r-sm);
  padding: 8px 14px;
  font-weight: 500; font-size: 13px;
  cursor: pointer;
  transition: all .12s;
}
.btn-danger:hover { background: var(--alert); color: white; border-color: var(--alert); }

/* Repos tab */
.repo-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px;
}
.repo-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(236, 236, 238, .8);
  border-radius: var(--r-sm);
}
.repo-meta { flex: 1; min-width: 0; }
.repo-name {
  font-weight: 600; font-size: 14px;
  display: flex; align-items: center; gap: 10px;
}
.repo-tag {
  font-size: 11px; font-weight: 500;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 8px; border-radius: 999px;
  letter-spacing: .02em;
}
.repo-url {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; color: var(--mute);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.repo-branch { font-size: 12px; color: var(--soft-mute); margin-top: 2px; }
.repo-branch code {
  background: var(--bg);
  border: 1px solid var(--hair);
  padding: 1px 6px; border-radius: 6px;
  font-size: 11px;
}
.repo-remove { padding: 6px 12px; font-size: 12px; }

.add-repo-picker { margin-top: 24px; }

/* ─────────────────────────  setup wizard  ────────────────────────
   First-run flow shown when no GitLab config exists. Two-pane layout:
   left = pitch + registration walkthrough, right = form.
*/
.setup-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  background: transparent;
}
.setup-left {
  padding: 48px 56px;
  display: flex; flex-direction: column;
  gap: 28px;
  background: rgba(255, 255, 255, .15);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border-right: 1px solid rgba(255, 255, 255, .25);
  overflow-y: auto;
}
.setup-left .brand-line { display: flex; align-items: center; gap: 12px; }
.setup-left .pitch h1 {
  font-size: 38px; font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 16px; line-height: 1.15;
}
.setup-left .pitch h1 em { font-style: normal; color: var(--accent); }
.setup-left .pitch p { color: var(--mute); margin: 0; line-height: 1.6; max-width: 460px; }
.setup-steps h3 {
  font-size: 13px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--soft-mute);
  margin: 0 0 12px;
}
.setup-steps ol {
  margin: 0; padding-left: 22px;
  color: var(--ink); line-height: 1.6; font-size: 13.5px;
}
.setup-steps li { margin-bottom: 14px; }
.setup-steps strong { font-weight: 600; }
.setup-field {
  display: grid; grid-template-columns: 110px 1fr auto;
  gap: 8px; align-items: center;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(236, 236, 238, .8);
  border-radius: 8px;
}
.setup-field-key { font-size: 11.5px; color: var(--mute); font-weight: 500; }
.setup-field-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--hair);
  padding: 2px 8px; border-radius: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.setup-copy {
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 3px 10px;
  font-family: inherit;
  font-size: 11px; color: var(--mute);
  cursor: pointer;
  transition: all .12s;
}
.setup-copy:hover { color: var(--ink); border-color: var(--ink); }
.setup-copy.ok { color: var(--ok); border-color: var(--ok); }

.setup-right {
  padding: 48px 56px;
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto;
}
.setup-card {
  background: rgba(255, 255, 255, .65);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  backdrop-filter: blur(32px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 18px;
  padding: 36px 32px;
  width: 100%; max-width: 420px;
  box-shadow: 0 16px 48px rgba(26, 26, 31, .12), 0 2px 6px rgba(26, 26, 31, .06);
}
.setup-card h2 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.setup-card .subtitle { color: var(--mute); margin: 0 0 24px; font-size: 14px; }
.setup-form-field { margin-bottom: 14px; }
.setup-form-field label {
  display: block;
  font-size: 12px; font-weight: 500;
  color: var(--mute);
  margin-bottom: 6px;
}
.setup-advanced { margin: 4px 0 14px; }
.setup-advanced summary {
  cursor: pointer;
  font-size: 12.5px; color: var(--mute);
  padding: 6px 0;
  user-select: none;
}
.setup-advanced summary:hover { color: var(--ink); }
.setup-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; margin-top: 18px; }
.setup-skip {
  background: transparent; border: none;
  padding: 8px;
  font-family: inherit;
  font-size: 12.5px; color: var(--soft-mute);
  cursor: pointer;
  transition: color .12s;
}
.setup-skip:hover { color: var(--mute); text-decoration: underline; }

.gitlab-edit { margin-top: 8px; }

/* In-app setup guide */
.guide {
  margin-top: 20px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(236, 236, 238, .8);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.guide-head {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background .12s;
}
.guide-head:hover { background: rgba(0, 0, 0, .03); }
.guide-head .material-symbols-outlined { font-size: 18px; color: var(--accent); }
.guide-title { flex: 1; font-weight: 600; font-size: 14px; }
.guide-chev {
  color: var(--soft-mute);
  transition: transform .15s;
}
.guide.open .guide-chev { transform: rotate(90deg); }
.guide-body {
  padding: 6px 22px 22px;
  border-top: 1px solid rgba(236, 236, 238, .6);
}

.guide-steps {
  list-style: none;
  padding: 0; margin: 14px 0 0;
  counter-reset: step;
}
.guide-steps li {
  position: relative;
  padding: 0 0 22px 0;
}
.guide-steps li:last-child { padding-bottom: 0; }
.guide-steps h4 {
  margin: 14px 0 6px;
  font-size: 14px; font-weight: 600;
  color: var(--ink);
}
.guide-steps p {
  margin: 0 0 8px;
  font-size: 13px; line-height: 1.55;
  color: var(--mute);
}
.guide-steps strong { color: var(--ink); font-weight: 600; }
.guide-steps code {
  background: var(--bg);
  border: 1px solid var(--hair);
  padding: 1px 6px; border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--ink);
}

.guide-grid {
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(236, 236, 238, .8);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 8px;
}
.guide-field {
  display: grid; grid-template-columns: 130px 1fr;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(236, 236, 238, .6);
  align-items: center;
}
.guide-field:last-child { border-bottom: none; }
.guide-field-key {
  font-size: 11.5px; color: var(--mute);
  font-weight: 500;
}
.guide-field-value {
  font-size: 12.5px;
  display: flex; align-items: center; gap: 8px;
  overflow: hidden;
}
.guide-field-value code {
  background: var(--bg);
  border: 1px solid var(--hair);
  padding: 2px 8px; border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.guide-field-value.with-copy { justify-content: space-between; }
.guide-copy {
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 3px 10px;
  font-family: inherit;
  font-size: 11px; color: var(--mute);
  cursor: pointer;
  transition: all .12s;
  flex-shrink: 0;
}
.guide-copy:hover { color: var(--ink); border-color: var(--ink); }
.guide-copy.ok { color: var(--ok); border-color: var(--ok); }

.guide-code {
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 8px 0 0;
  overflow-x: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink);
}
.guide-code code { background: transparent; border: none; padding: 0; }

.guide-troubleshoot {
  margin-top: 22px;
  padding: 14px 16px;
  background: rgba(245, 218, 188, .25);
  border: 1px solid rgba(224, 138, 95, .35);
  border-radius: 10px;
}
.guide-troubleshoot h4 {
  margin: 0 0 8px;
  font-size: 13px; font-weight: 600;
  color: #A04D24;
}
.guide-troubleshoot ul {
  margin: 0; padding-left: 18px;
  font-size: 12.5px; line-height: 1.55;
  color: var(--mute);
}
.guide-troubleshoot li { margin-bottom: 4px; }
.guide-troubleshoot strong { color: var(--ink); }
.guide-troubleshoot code {
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(224, 138, 95, .25);
  padding: 1px 5px; border-radius: 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
}

/* GitLab tab */
.gitlab-grid {
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(236, 236, 238, .8);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.gitlab-row {
  display: grid; grid-template-columns: 140px 1fr;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(236, 236, 238, .6);
  align-items: center;
}
.gitlab-row:last-child { border-bottom: none; }
.gitlab-key { font-size: 12px; color: var(--mute); font-weight: 500; }
.gitlab-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gitlab-value code {
  background: var(--bg);
  border: 1px solid var(--hair);
  padding: 2px 8px; border-radius: 6px;
  font-size: 12px;
}

/* Placeholder tabs */
.settings-tab.placeholder .placeholder-card {
  margin-top: 16px;
  padding: 32px 28px;
  background: rgba(255, 255, 255, .4);
  border: 1px dashed rgba(160, 160, 166, .4);
  border-radius: var(--r-sm);
  text-align: center;
}
.placeholder-eyebrow {
  color: var(--accent);
  font-weight: 500; font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 10px;
}
.placeholder-body { color: var(--mute); font-size: 13.5px; max-width: 44ch; margin: 0 auto; line-height: 1.5; }

/* db explorer slide-over */
.db-overlay {
  position: fixed; inset: 0;
  background: rgba(26, 26, 31, .25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex; justify-content: flex-end;
  z-index: 55;
}
.db-panel {
  width: min(1080px, 92vw); height: 100%;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  backdrop-filter: blur(32px) saturate(160%);
  border-left: 1px solid rgba(255, 255, 255, .55);
  display: grid; grid-template-rows: auto 1fr;
  box-shadow: -16px 0 48px rgba(26, 26, 31, .15);
}
.db-head {
  padding: 16px 20px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--hair);
}
.db-title { font-weight: 600; }
.db-sub { color: var(--mute); font-size: 12.5px; }
.db-body {
  display: grid;
  grid-template-columns: 200px 220px 1fr;
  min-height: 0;
}
.db-col {
  display: flex; flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--hair);
  overflow: hidden;
}
.db-col:last-child { border-right: none; }
.db-col-head {
  padding: 14px 16px 8px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--soft-mute);
}
.db-list { overflow-y: auto; padding: 0 8px 12px; flex: 1; }
.db-item {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13.5px;
  display: flex; flex-direction: column; gap: 2px;
  transition: background .12s;
}
.db-item:hover { background: var(--bg); }
.db-item.active { background: var(--accent-soft); color: var(--accent); }
.db-item .kind { font-size: 11px; color: var(--soft-mute); font-family: 'JetBrains Mono', ui-monospace, monospace; }
.db-item.active .kind { color: var(--accent); opacity: .75; }

.db-query {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
}
.db-sql-row {
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  border-bottom: 1px solid var(--hair);
}
.db-sql {
  width: 100%;
  min-height: 60px; max-height: 200px;
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  background: var(--bg);
  color: var(--ink);
  resize: vertical;
}
.db-sql:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); }
.db-run {
  align-self: end;
}
.db-result {
  overflow: auto;
  background: var(--bg);
}
.db-result table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.db-result th, .db-result td {
  padding: 8px 14px;
  text-align: left;
  border-bottom: 1px solid var(--hair);
  vertical-align: top;
  white-space: pre-wrap;
  max-width: 380px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-result th {
  background: var(--surface);
  font-weight: 600;
  color: var(--mute);
  position: sticky; top: 0;
  border-bottom: 2px solid var(--hair);
  letter-spacing: .02em;
}
.db-result tr:hover td { background: rgba(220, 228, 210, .35); }
.db-message {
  padding: 16px 20px; color: var(--mute);
}
.db-error {
  padding: 16px 20px;
  color: var(--alert);
  background: var(--surface);
  border-bottom: 1px solid var(--hair);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
}
.db-truncated {
  padding: 8px 20px;
  color: var(--working);
  font-size: 12px;
  background: var(--surface);
  border-top: 1px solid var(--hair);
}

/* dialog */
.dialog-backdrop {
  position: fixed; inset: 0;
  background: rgba(26, 26, 31, .25);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 60;
}
.dialog {
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  backdrop-filter: blur(32px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 18px;
  width: min(440px, 92vw);
  /* Cap height to viewport so tall dialogs (long project picker results +
     expanded stack-hints form) don't overflow off-screen. Scroll inside the
     dialog body instead. */
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
  box-shadow: 0 24px 64px rgba(26, 26, 31, .18), 0 2px 6px rgba(26, 26, 31, .08);
}
.dialog h2 { margin: 0 0 6px; font-size: 20px; font-weight: 600; }
.dialog .sub { color: var(--mute); margin: 0 0 20px; font-size: 14px; }
.dialog .field { margin-bottom: 14px; }
.dialog .field label { display: block; font-size: 12px; color: var(--mute); margin-bottom: 6px; }
.dialog .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

/* ─────────────────────────  onboarding card  ──────────────────────── */
.onboarding-card {
  max-width: 520px;
  margin: 24px auto;
  padding: 28px 28px 24px;
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(26, 26, 31, .08);
  text-align: center;
}
.onboarding-icon {
  font-size: 36px !important;
  color: var(--accent);
  margin-bottom: 8px;
  display: block;
}
.onboarding-card h3 {
  margin: 0 0 8px; font-size: 20px; font-weight: 600;
  color: var(--ink);
}
.onboarding-card p {
  margin: 0 0 20px;
  color: var(--mute);
  font-size: 13.5px; line-height: 1.55;
}
.onboarding-cta {
  font-size: 13.5px;
  padding: 10px 22px;
}

/* Variant for the no-compose first-run setup. Slightly wider, with a list of
   what the AI is about to do so the user knows what they're signing up for. */
.onboarding-card.setup-card { max-width: 600px; text-align: left; padding: 28px 32px 26px; }
.onboarding-card.setup-card h3 { text-align: center; }
.onboarding-card.setup-card > p { text-align: center; margin-bottom: 18px; }
.setup-card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.setup-card-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px; align-items: start;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--hair);
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.45;
}
.setup-card-list li .material-symbols-outlined {
  font-size: 18px !important;
  color: var(--accent);
  margin-top: 1px;
}
.setup-card-list li code {
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.onboarding-card.setup-card .setup-card-foot {
  text-align: center;
  margin: 0 0 18px;
  font-size: 12.5px;
}
.onboarding-card.setup-card .onboarding-cta { display: block; margin: 0 auto; }

/* Canned user messages (from the onboarding / tour buttons) get a muted,
   italic treatment so they read as an action label, not a typed message. */
.msg-text.canned {
  font-style: italic;
  color: var(--mute);
}

/* Workflow chip — replaces the canned-prompt wall of text on user rows. */
.workflow-chip-wrap { display: inline-flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.workflow-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 8px;
  background: rgba(255, 255, 255, .65);
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px; font-weight: 500;
  color: var(--ink);
}
.workflow-chip-icon { font-size: 15px !important; color: var(--accent); }
.workflow-chip-label { letter-spacing: .01em; }
.workflow-chip-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--soft-mute);
  cursor: pointer;
  transition: color .12s, background .12s;
}
.workflow-chip-info:hover { color: var(--accent); background: var(--accent-soft); }
.workflow-chip-info .material-symbols-outlined { font-size: 14px !important; }
.workflow-info-pop {
  max-width: 480px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--hair);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--mute);
  line-height: 1.45;
}

/* ─────────────────────────  tour CTA  ──────────────────────────────── */
.tour-row { margin: 8px 0 18px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.tour-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--accent-soft);
  border-radius: 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: all .14s;
  box-shadow: 0 6px 20px rgba(26, 26, 31, .05);
}
.tour-btn:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, .9);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(26, 26, 31, .08);
}
.tour-btn .material-symbols-outlined {
  font-size: 24px !important;
  color: var(--accent);
}
.tour-btn-body { display: flex; flex-direction: column; }
.tour-btn-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.tour-btn-sub {
  font-size: 11.5px;
  color: var(--mute);
  margin-top: 1px;
}

/* ─────────────────────────  agent action cards  ───────────────────── */
.action-card {
  margin: 10px 0;
  padding: 14px 16px 16px;
  background: rgba(255, 255, 255, .65);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  font-size: 13px;
}
.action-card.bootstrap-card { border-left-color: #c89a4a; }
.action-card.secret-card { border-left-color: #6c7a89; }
.action-card-kind.secret-kind { color: #6c7a89; }
.action-card.file-card { border-left-color: #4a90c8; }
.action-card-kind.file-kind { color: #4a90c8; }
textarea.file-contents {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  background: #1f2426;
  color: #e7eae5;
  border-color: #2c3236;
  min-height: 200px;
  resize: vertical;
  line-height: 1.4;
}
textarea.file-contents:focus {
  box-shadow: 0 0 0 3px rgba(74, 144, 200, .2);
  border-color: #4a90c8;
}
.secret-input-row { display: flex; gap: 6px; align-items: stretch; }
.secret-input-row .secret-input {
  flex: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .08em;
}
.secret-peek {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px;
  background: white;
  border: 1px solid var(--hair);
  border-radius: 7px;
  color: var(--mute);
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.secret-peek:hover { color: var(--ink); border-color: var(--accent); }
.secret-peek .material-symbols-outlined { font-size: 17px !important; }
.action-card.status-saved { background: rgba(220, 230, 215, .55); border-left-color: var(--accent); }
.action-card.status-skipped { opacity: .55; }
.action-card.status-error { border-left-color: var(--alert); }

.action-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
  font-size: 12.5px;
}
.action-card-kind {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 600;
  color: var(--accent);
}
.action-card-kind.bootstrap-kind { color: #c89a4a; }
.action-card-kind .material-symbols-outlined { font-size: 15px !important; }
.action-card-topic {
  flex: 1;
  color: var(--ink);
  font-weight: 500;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.action-card-status {
  font-size: 11px; font-weight: 500;
  padding: 2px 9px;
  border-radius: 999px;
}
.action-card-status.saved   { color: var(--accent);  background: var(--accent-soft); }
.action-card-status.skipped { color: var(--soft-mute); background: rgba(0,0,0,.04); }
.action-card-status.saving  { color: var(--mute);   background: rgba(0,0,0,.04); }
.action-card-status.error   { color: var(--alert);  background: rgba(193, 67, 42, .1); }

.action-card-intro {
  color: var(--mute);
  font-size: 12px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.action-card-fields {
  display: flex; flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.action-field { display: flex; flex-direction: column; gap: 4px; }
.action-field-label {
  font-size: 11.5px; font-weight: 500;
  color: var(--mute);
  letter-spacing: .01em;
}
.action-field-input {
  width: 100%;
  padding: 7px 10px;
  background: white;
  border: 1px solid var(--hair);
  border-radius: 7px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  transition: border-color .12s;
}
.action-field-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.action-field-input:disabled {
  background: rgba(0, 0, 0, .03);
  color: var(--mute);
  cursor: not-allowed;
}
textarea.action-field-input {
  resize: vertical;
  min-height: 130px;
  font-family: inherit;
  line-height: 1.5;
  padding: 10px 12px;
}
textarea.bootstrap-commands {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  background: #1f2426;
  color: #e7eae5;
  border-color: #2c3236;
}
textarea.bootstrap-commands:focus { box-shadow: 0 0 0 3px rgba(196, 144, 60, .2); border-color: #c89a4a; }
.action-field-checkbox-row {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  color: var(--ink);
}
.action-card-error {
  margin-top: -4px; margin-bottom: 12px;
  padding: 8px 10px;
  background: rgba(193, 67, 42, .08);
  border-radius: 7px;
  color: var(--alert);
  font-size: 12px;
}
.action-card-actions {
  display: flex; justify-content: flex-end;
  gap: 8px;
}
.action-card-actions button {
  font-size: 12.5px;
  padding: 6px 14px;
}

/* ─────────────────────────  save-to-knowledge button  ─────────────── */
.save-knowledge-btn {
  margin-left: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  color: var(--mute);
  font-family: inherit;
  font-size: 11px; font-weight: 500;
  cursor: pointer;
  transition: all .14s;
  vertical-align: middle;
}
.save-knowledge-btn:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.save-knowledge-btn .material-symbols-outlined { font-size: 14px !important; }
.save-knowledge-btn.saved {
  color: var(--accent);
  border-color: var(--accent-soft);
  background: var(--accent-soft);
  cursor: default;
}

/* tiny utilities */
.muted { color: var(--mute); }
.spacer-12 { height: 12px; }
.dim { opacity: .65; }

/* ─────────────────────────  secrets settings tab  ──────────────────── */
.secrets-list {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-bottom: 22px;
}
.settings-loading,
.settings-empty {
  padding: 14px 16px;
  color: var(--mute);
  font-size: 13px;
  background: rgba(0, 0, 0, .02);
  border: 1px dashed var(--hair);
  border-radius: 10px;
  text-align: center;
}
.secret-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px; align-items: center;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--hair);
  border-radius: 10px;
}
.secret-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.secret-row-key {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink);
  letter-spacing: .02em;
}
.secret-row-hint { color: var(--mute); font-size: 12px; }
.secret-row-meta {
  display: flex; flex-direction: column; gap: 2px;
  text-align: right;
  font-size: 11px;
  color: var(--soft-mute);
}
.secret-row-source {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.secret-row-actions { display: flex; gap: 6px; }
.secret-row-actions .small { font-size: 11.5px; padding: 5px 10px; }

.secret-editor {
  padding: 16px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--hair);
  border-radius: 12px;
}
.secret-editor-row {
  display: flex; gap: 8px; align-items: stretch;
  margin-bottom: 10px;
}
.secret-editor-row:last-of-type { margin-bottom: 0; }
.secret-editor-key { flex: 1; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.secret-editor-hint { flex: 2; }
.secret-editor-value {
  flex: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .08em;
}
.secret-editor-peek {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px;
  background: white;
  border: 1px solid var(--hair);
  border-radius: 7px;
  color: var(--mute);
  cursor: pointer;
}
.secret-editor-peek:hover { color: var(--ink); border-color: var(--accent); }
.secret-editor-peek .material-symbols-outlined { font-size: 17px !important; }
.secret-editor-error { margin-top: 8px; color: var(--alert); min-height: 16px; }

/* ─────────────────────────  toast notifications  ───────────────────── */
.toast-container {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 2000;
  display: flex; flex-direction: column;
  gap: 10px;
  max-width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 22px 1fr 22px;
  gap: 12px; align-items: flex-start;
  padding: 14px 14px 14px 16px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .55);
  border-left: 3px solid var(--mute);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(26, 26, 31, .15);
  font-size: 13px; line-height: 1.45;
  color: var(--ink);
  /* Slide in from the right. */
  transform: translateX(calc(100% + 24px));
  opacity: 0;
  transition: transform .26s cubic-bezier(.2, .8, .25, 1), opacity .2s;
}
.toast.in { transform: translateX(0); opacity: 1; }
.toast.out { transform: translateX(calc(100% + 24px)); opacity: 0; }

.toast-icon {
  font-size: 20px !important;
  margin-top: 1px;
  color: var(--mute);
}
.toast-body {
  word-break: break-word;
  white-space: pre-wrap;
}
.toast-x {
  background: transparent; border: none;
  color: var(--soft-mute);
  cursor: pointer;
  font-size: 18px; line-height: 1;
  padding: 0; margin-top: -2px;
  transition: color .12s;
}
.toast-x:hover { color: var(--ink); }

/* Per-kind accents — left border + icon color tell the story at a glance. */
.toast-error { border-left-color: var(--alert, #c1432a); }
.toast-error .toast-icon { color: var(--alert, #c1432a); }
.toast-success { border-left-color: var(--accent); }
.toast-success .toast-icon { color: var(--accent); }
.toast-info { border-left-color: #4a90c8; }
.toast-info .toast-icon { color: #4a90c8; }
.toast-warn { border-left-color: #c89a4a; }
.toast-warn .toast-icon { color: #c89a4a; }