:root {
  --bg: #0e0e14;
  --surface: #181822;
  --surface-2: #20202e;
  --surface-3: #2a2a3a;
  --border: #2c2c3c;
  --text: #ecedf3;
  --muted: #9a9bb0;
  --faint: #6c6d82;
  --accent: #7c6cff;
  --accent-2: #9b8dff;
  --codex: #4dd4ac; /* agent identity: Codex chats, vs --accent for Claude */
  --accent-press: #6957f0;
  --danger: #ff6b6b;
  --radius: 16px;
  --radius-sm: 10px;
  --header-h: 56px;
  --drawer-w: 300px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}
body { overflow: hidden; }
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }
/* shared monochrome stroke icon (see svgIcon() / ICONS in app.js) */
.ic { width: 22px; height: 22px; display: block; flex: none; }

/* ---------- Login ---------- */
.login {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--safe-top) + 24px) 24px calc(var(--safe-bottom) + 24px);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(124,108,255,.22), transparent 60%),
    var(--bg);
}
.login-card { width: 100%; max-width: 360px; text-align: center; }
.login-mark {
  width: 76px; height: 76px; margin: 0 auto 22px;
  display: grid; place-items: center;
  font-size: 38px; line-height: 1;
  border-radius: 22px;
  background: linear-gradient(160deg, var(--accent), var(--accent-press));
  box-shadow: 0 12px 40px rgba(124,108,255,.4);
  color: #fff;
}
.login-title { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.login-sub { margin: 8px 0 32px; color: var(--muted); font-size: 15px; }
.btn-login {
  width: 100%; min-height: 52px; border: none; border-radius: 14px;
  background: var(--accent); color: #fff;
  font-size: 16px; font-weight: 600;
  transition: background .15s, transform .05s;
}
.btn-login:hover { background: var(--accent-2); }
.btn-login:active { transform: scale(.985); background: var(--accent-press); }

/* ---------- App shell ---------- */
.app { display: flex; flex-direction: column; height: 100%; width: 100%; position: relative; }

/* Top-level surfaces (Home / Chat) stacked above the bottom tab bar. */
.surface { flex: 1; min-height: 0; }
#chatSurface { display: flex; }                          /* drawer | pane */
#homeSurface { display: flex; flex-direction: column; }

/* Bottom tab bar */
/* No backdrop-filter here (nor on .topbar / .composer). All three are flex siblings
   of the scroller — nothing ever passes behind them, so at 82–94% opacity the blur
   was blurring a static gradient for no visible gain. It was not free: Chrome
   re-runs a backdrop blur whenever anything in the backdrop root changes, and the
   "working" indicator animates every frame for the whole turn. That pinned the
   *shared* GPU process, which is one per browser — so it stuttered video in other
   tabs. Blur that overlays moving content (.sheet-overlay) is fine and stays. */
.tabbar {
  flex: 0 0 auto; display: flex; z-index: 40;
  border-top: 1px solid var(--border);
  background: rgba(14,14,20,.97);
  padding-bottom: var(--safe-bottom);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 0 9px; border: none; background: transparent;
  color: var(--faint); font-size: 11px; font-weight: 600;
  transition: color .12s;
}
.tab .tab-ic { font-size: 20px; line-height: 1; display: grid; place-items: center; }
.tab .tab-ic .ic { width: 23px; height: 23px; }
.tab.active { color: var(--accent-2); }
.tab[data-tab="chat"].active { color: var(--agent-accent-2, var(--accent-2)); }
.tab[data-tab="chat"].attention { color: var(--agent-accent-2, var(--accent-2)); font-weight: 800; }
.tab[data-tab="chat"].attention .tab-ic { position: relative; }
.tab[data-tab="chat"].attention .tab-ic::after {
  content: ""; position: absolute; top: -3px; right: -6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--agent-accent, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--agent-accent, var(--accent)) 18%, transparent);
  animation: attentionPulse 1.6s ease-in-out infinite;
}
.app.family-mode .tabbar { display: none; }
.app.family-mode .home-cards { padding-bottom: calc(var(--safe-bottom) + 28px); }
/* with the tab bar owning the bottom safe area, the composer no longer needs it */
.composer { padding-bottom: 10px; }

/* Home hub */
.home-hub { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.home-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: calc(var(--safe-top) + 22px) 20px 10px;
}
.home-greeting { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.home-sub { font-size: 13px; color: var(--faint); margin-top: 2px; }
.home-cards { display: flex; flex-direction: column; padding: 10px 20px 24px; }
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.home-section-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin: 20px 2px 10px;
}
/* keep the hub readable on wide screens (mobile-first app, desktop is secondary) */
.home-head, .home-cards { max-width: 720px; margin-left: auto; margin-right: auto; width: 100%; }
.hv-body { max-width: 760px; margin: 0 auto; width: 100%; }
.home-card {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px; min-height: 104px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  text-align: left; color: var(--text);
  transition: border-color .12s, transform .05s;
}
.home-card:hover { border-color: var(--accent); }
.home-card:active { transform: scale(.98); }
.home-card.disabled { opacity: .55; pointer-events: none; }
.hc-ico {
  width: 40px; height: 40px; margin-bottom: 4px; border-radius: 11px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent-2);
}
.hc-ico .ic { width: 22px; height: 22px; }
.hc-title { font-size: 16px; font-weight: 600; }
.hc-sub { font-size: 12.5px; color: var(--muted); margin-top: auto; }
/* live status dot on Sessions/Health cards (set by refreshHomeStatus) */
.hc-dot { position: absolute; top: 15px; right: 15px; width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.hc-dot.up { background: #3ecf8e; box-shadow: 0 0 6px rgba(62,207,142,.6); }
.hc-dot.down { background: #f0506e; box-shadow: 0 0 6px rgba(240,80,110,.6); }
.hc-dot.neutral { background: var(--faint); }


/* Home sub-views (Lists, …) */
.home-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hv-head {
  display: flex; align-items: center; gap: 6px;
  padding: calc(var(--safe-top) + 8px) 12px 8px;
  border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.hv-back { width: 36px; height: 36px; border: none; background: transparent; color: var(--text); font-size: 26px; line-height: 1; border-radius: 9px; }
.hv-back:hover { background: var(--surface-2); }
.hv-title { flex: 1; margin: 0; font-size: 18px; font-weight: 700; }
.hv-action { padding: 7px 12px; border: none; border-radius: 9px; background: var(--surface-2); color: var(--accent-2); font-weight: 600; font-size: 13px; }
.hv-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }

.scrim {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(0,0,0,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.app.drawer-open .scrim { opacity: 1; pointer-events: auto; }

/* ---------- Drawer ---------- */
.drawer {
  width: var(--drawer-w); flex: 0 0 var(--drawer-w);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding-top: var(--safe-top);
  padding-left: var(--safe-left);
}
.drawer-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; font-size: 17px; letter-spacing: -.01em; flex: 1; }
.btn-new {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); color: var(--text);
  font-size: 14px; font-weight: 600; padding: 9px 12px;
  min-height: 40px; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.btn-new:hover { background: var(--surface-3); border-color: var(--accent); }
.btn-new:active { transform: scale(.98); }

.chat-list { flex: 1; overflow-y: auto; padding: 8px; }
.chat-item {
  display: block; width: 100%; text-align: left;
  border: none; background: transparent; color: var(--text);
  padding: 11px 12px; border-radius: 12px; margin-bottom: 2px;
  min-height: 48px;
  transition: background .12s;
}
.chat-item:hover { background: var(--surface-2); }
.chat-item.active { background: var(--surface-3); }
.chat-item .ci-title {
  font-size: 14.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block;
}
.chat-item .ci-time { font-size: 12px; color: var(--faint); margin-top: 2px; display: block; }

/* Chat-list status: working (live turn) + unread (new results back). */
.ci-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.ci-dot.unread { background: var(--accent); }
.ci-dot.working { background: var(--accent-2); animation: ciPulse 1s ease-in-out infinite; }
.chat-row.unread .ci-title { font-weight: 700; color: var(--text); }
.chat-row.working .ci-time { color: var(--accent-2); }
@keyframes ciPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.list-empty { color: var(--faint); font-size: 13px; padding: 16px 12px; text-align: center; }

/* ---------- Main pane ---------- */
.pane {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--bg);
  position: relative; isolation: isolate;
  transition: background-color .2s ease;
}
.pane > * { position: relative; z-index: 1; }

/* ---------- Active agent identity ----------
   Portal owns the shell; Claude/Codex own the conversation. These scoped tokens
   recolour only the pane, leaving Home and the mixed-provider drawer neutral. */
.pane:not(.agent-none)::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: 0; opacity: .78;
}
.pane[data-agent-texture="glow"]::before {
  background:
    radial-gradient(540px 260px at 18% -5%, var(--agent-soft), transparent 68%),
    radial-gradient(420px 300px at 102% 42%, color-mix(in srgb, var(--agent-accent-2) 5%, transparent), transparent 72%);
}
.pane[data-agent-texture="grid"]::before {
  background:
    linear-gradient(color-mix(in srgb, var(--agent-accent) 2%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--agent-accent) 2%, transparent) 1px, transparent 1px),
    radial-gradient(560px 280px at 82% -5%, var(--agent-soft), transparent 68%);
  background-size: 24px 24px, 24px 24px, auto;
}
.topbar {
  display: flex; align-items: center; gap: 8px;
  height: calc(var(--header-h) + var(--safe-top));
  padding: var(--safe-top) calc(12px + var(--safe-right)) 0 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(14,14,20,.9);
  position: relative; z-index: 10;
  flex: 0 0 auto;
}
.pane:not(.agent-none) .topbar {
  background: color-mix(in srgb, var(--accent) 4%, rgba(14,14,20,.88));
}
.pane:not(.agent-none) .topbar::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .55;
}
.icon-btn {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: grid; place-items: center;
  border: none; background: transparent; color: var(--text);
  font-size: 20px; border-radius: 10px;
  transition: background .12s;
}
.icon-btn:hover { background: var(--surface-2); }
.chat-title {
  margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agent-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  min-height: 28px; padding: 3px 8px 3px 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: 999px;
  color: var(--accent-2); background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  font-size: 11.5px; font-weight: 750; letter-spacing: .01em;
  box-shadow: 0 3px 14px color-mix(in srgb, var(--accent) 9%, transparent);
}
.agent-badge-icon {
  width: 20px; height: 20px; display: grid; place-items: center;
  color: #fff; background: var(--accent); border-radius: 50%;
  font-size: 11px; line-height: 1;
}
.agent-badge[data-agent-shape="geometric"],
.pane[data-agent-shape="geometric"] .agent-badge { border-radius: 9px; }
.pane[data-agent-shape="geometric"] .agent-badge-icon { border-radius: 6px; font-size: 9px; }
.agent-badge-name { line-height: 1; }
.topbar-spacer { flex: 1; }

.home-head-actions { display: flex; align-items: center; gap: 6px; }
.notif-btn {
  position: relative; width: 38px; height: 38px; padding: 0; font-size: 18px;
  border: none; background: transparent; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--muted);
  transition: color .12s, background .12s;
}
.notif-btn:hover { background: var(--surface-2); color: var(--text); }
.notif-btn .ic { width: 20px; height: 20px; }
.notif-badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: #f0506e; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}
.notif-badge.hidden { display: none; }

.notif-empty { padding: 28px 16px; text-align: center; color: var(--faint); font-size: 14px; }

/* image review inbox — approve/deny cards */
.review-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; margin-bottom: 14px; transition: border-color .3s, opacity .2s;
}
.review-card.rv-focus { border-color: var(--accent); }
.review-card.rv-busy { opacity: .5; pointer-events: none; }
.rv-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.rv-source { font-size: 13px; font-weight: 700; color: var(--accent-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-time { font-size: 11.5px; color: var(--faint); flex: none; }
.rv-note { font-size: 14px; color: var(--text); margin-bottom: 10px; line-height: 1.4; }
.rv-imgwrap { display: block; }
.rv-img {
  display: block; width: 100%; max-height: 60vh; object-fit: contain;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.rv-feedback {
  width: 100%; margin-top: 10px; padding: 10px; box-sizing: border-box; resize: vertical;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font: inherit; font-size: 14px;
}
.rv-feedback:focus { border-color: var(--accent); outline: none; }
.rv-actions { display: flex; gap: 10px; margin-top: 10px; }
.rv-btn {
  flex: 1; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  font-size: 15px; font-weight: 700; cursor: pointer; transition: filter .15s, transform .1s;
}
.rv-btn:active { transform: scale(.985); }
.rv-approve { background: var(--accent); color: #fff; border-color: var(--accent); }
.rv-approve:hover { background: var(--accent-2); }
.rv-deny { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.rv-deny:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); }

/* morning-brief subscriptions — what the 8am brief keeps you posted on */
.bsub {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px; margin-bottom: 10px;
}
.bsub-muted { opacity: .5; }
.bsub-main { flex: 1; min-width: 0; }
.bsub-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bsub-label { font-size: 15px; font-weight: 600; }
.bsub-kind {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; flex: none;
}
.bsub-open { color: var(--accent-2); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.bsub-pinned { color: var(--muted); background: var(--surface-2); }
.bsub-instr { font-size: 13px; color: var(--muted); line-height: 1.4; margin-top: 4px; }
.bsub-meta { font-size: 11.5px; color: var(--faint); margin-top: 5px; word-break: break-all; }
.bsub-actions { display: flex; flex-direction: column; gap: 6px; flex: none; }
.bsub-btn {
  min-width: 62px; min-height: 32px; padding: 6px 10px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 9px;
}
.bsub-btn:hover { border-color: var(--accent); color: var(--text); }
.bsub-del { color: var(--danger); font-size: 17px; line-height: 1; }
.bsub-del:hover { border-color: var(--danger); color: var(--danger); }

.bsub-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bsub-chip {
  padding: 9px 13px; font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
}
.bsub-chip:hover { border-color: var(--accent); }
.bsub-chip:disabled { opacity: .5; }

.bsub-form {
  display: flex; flex-direction: column; gap: 9px;
  background: var(--surface); border: 1px solid var(--accent); border-radius: 14px;
  padding: 13px; margin-bottom: 14px;
}
.bsub-form input[type="text"], .bsub-form textarea {
  width: 100%; box-sizing: border-box; padding: 10px;
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px;
}
.bsub-form textarea { resize: vertical; }
.bf-open { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.bf-open input { margin-top: 1px; flex: none; }
.bf-actions { display: flex; gap: 9px; }
.bf-actions button {
  flex: 1; padding: 11px; border-radius: 9px; font-size: 14.5px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--border);
}
.bf-cancel { background: transparent; color: var(--muted); }
.bf-save { background: var(--accent); color: #fff; border-color: var(--accent); }
.bf-save:disabled { opacity: .6; }
.bf-err:empty { display: none; }
.bf-err { font-size: 12.5px; color: var(--danger); line-height: 1.4; }
.notif-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px;
  border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px;
  background: var(--surface); text-decoration: none; color: var(--text); cursor: pointer;
}
a.notif-row:hover { border-color: var(--accent); }
.notif-row.unread { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.notif-ico { font-size: 18px; line-height: 1.3; flex: none; }
.notif-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.notif-title { font-size: 14px; font-weight: 600; }
.notif-body { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif-time { font-size: 11px; color: var(--faint); white-space: nowrap; flex: none; }

.avatar-wrap { position: relative; }
.avatar-btn {
  width: 38px; height: 38px; padding: 0;
  border: none; background: transparent; border-radius: 50%;
}
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--accent), var(--accent-press));
  color: #fff; font-weight: 600; font-size: 15px;
  background-size: cover; background-position: center;
  border: 1px solid rgba(255,255,255,.12);
}
.menu {
  position: absolute; top: 46px; right: 0; z-index: 40;
  min-width: 180px;
  background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 6px; box-shadow: 0 16px 48px rgba(0,0,0,.5);
}
.menu-name {
  font-size: 13px; color: var(--muted);
  padding: 8px 10px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu-item {
  display: block; width: 100%; text-align: left;
  border: none; background: transparent; color: var(--text);
  padding: 10px; border-radius: 9px; font-size: 14px; min-height: 40px;
}
.menu-item:hover { background: var(--surface-3); }

/* ---------- Messages ---------- */
.messages {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Scroll-up pagination adjusts scrollTop itself when it prepends a page.
     Chromium's scroll anchoring would ALSO compensate, double-counting the
     prepend and throwing the view down the transcript. Safari/iOS doesn't
     implement anchoring at all, so doing it by hand is the portable answer —
     but only once. */
  overflow-anchor: none;
  padding: 16px calc(14px + var(--safe-right)) 8px calc(14px + var(--safe-left));
  display: flex; flex-direction: column; gap: 10px;
}
.row { display: flex; width: 100%; flex-wrap: wrap; }
.row.user { justify-content: flex-end; }
.row.assistant { justify-content: flex-start; }
.row.assistant::before {
  flex: 0 0 22px; width: 22px; height: 22px; margin: 3px 7px 0 0;
  display: grid; place-items: center; align-self: flex-start;
  border: 1px solid transparent; border-radius: 50%;
  font-size: 10px; line-height: 1;
}
.row.assistant::before {
  content: attr(data-agent-icon); color: var(--agent-accent-2);
  background: var(--agent-soft); border-color: var(--agent-border);
}
.row.assistant[data-agent-shape="geometric"]::before { border-radius: 6px; font-size: 8px; }
.msg-time {
  flex-basis: 100%;
  font-size: 11px;
  color: var(--muted, #767b8e);
  margin-top: 3px;
  padding: 0 4px;
  opacity: .7;
}
.row.user .msg-time { text-align: right; }
.row.assistant .msg-time, .row.tool .msg-time { text-align: left; }
.row.assistant .msg-time { padding-left: 33px; }

.bubble {
  max-width: min(82%, 640px);
  padding: 10px 14px; border-radius: 18px;
  font-size: 15.5px; line-height: 1.45;
  word-wrap: break-word; overflow-wrap: anywhere;
}
.row.user .bubble {
  background: var(--accent); color: #fff;
  border-bottom-right-radius: 6px;
}
.row.assistant .bubble {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 6px;
  position: relative;
}
.pane:not(.agent-none) .row.assistant .bubble {
  max-width: min(calc(82% - 30px), 640px);
  background: color-mix(in srgb, var(--accent) 5.5%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 58%, transparent);
}
/* live-typing caret: a slim bar that softly blinks at the end of the stream */
.stream-caret {
  display: inline-block; vertical-align: text-bottom;
  width: 2px; height: 1.05em; margin-left: 1px; border-radius: 1px;
  background: var(--accent-2);
  animation: caretBlink 1.05s steps(1) infinite;
}
@keyframes caretBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .18; } }

/* per-message copy — faint until you hover the bubble (or always, on touch) */
.msg-copy {
  position: absolute; bottom: 4px; right: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border-radius: 7px;
  border: none; background: transparent; color: var(--faint); cursor: pointer;
  opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
.row.assistant .bubble:hover .msg-copy { opacity: .8; }
.msg-copy:hover { background: var(--surface-2); color: var(--text); }
@media (hover: none) { .msg-copy { opacity: .45; } }

.bubble p { margin: 0 0 8px; }
.bubble p:last-child { margin-bottom: 0; }
.bubble a { color: var(--accent-2); text-decoration: underline; }
.row.user .bubble a { color: #fff; }
.bubble code.inline {
  background: rgba(255,255,255,.1); padding: 1px 5px; border-radius: 6px;
  font-family: var(--mono); font-size: .88em;
}
.bubble pre {
  background: #0b0b12; border: 1px solid var(--border);
  border-radius: 12px; padding: 12px; margin: 8px 0;
  overflow-x: auto;
}
.bubble pre code { font-family: var(--mono); font-size: 13px; line-height: 1.5; color: #d6d8e6; }
.bubble strong { font-weight: 700; }

/* tool chip (legacy pre-card rows) */
.row.tool { justify-content: flex-start; }
.tool-chip {
  max-width: min(88%, 640px);
  font-family: var(--mono); font-size: 12.5px;
  color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 7px 11px;
  white-space: pre-wrap; word-break: break-word;
  display: flex; align-items: center; gap: 6px;
}

/* tool call card — a compact chip that expands to the full call on tap */
.tool-card {
  max-width: min(90%, 640px); align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border); border-left: 2px solid var(--accent);
  border-radius: 10px; overflow: hidden;
}
.tool-card-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 7px 11px; background: transparent; border: none;
  cursor: pointer; font-family: inherit; color: var(--muted);
  transition: background .12s ease;
}
.tool-card-head.no-body { cursor: default; }
.tool-card-head:not(.no-body):hover { background: var(--surface-3); }
.tc-icon { font-size: 13px; line-height: 1; flex: none; }
.tc-name {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .02em; color: var(--text);
  background: var(--surface-3); border-radius: 6px; padding: 1px 6px; flex: none;
}
.tc-title {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A refused call. Base rule on purpose: "the tool didn't run" is not a
   desktop-only thing to know. */
.tool-card.is-failed { border-left-color: var(--danger); }
.tool-card.is-failed .tc-title, .tool-card.is-failed .tc-icon { color: var(--danger); }
.tc-chev {
  flex: none; color: var(--faint); font-size: 15px; line-height: 1;
  transition: transform .18s ease;
}
.tool-card.open .tc-chev { transform: rotate(90deg); }
.tool-card-body { max-height: 0; overflow: hidden; transition: max-height .22s ease; }
.tool-card.open .tool-card-body { max-height: 340px; overflow: auto; }
.tool-card-body pre {
  margin: 0; padding: 9px 11px 11px; border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  color: #d6d8e6; white-space: pre-wrap; word-break: break-word;
}
/* per-tool accent — the left rail + icon tint by tool family */
.tool-card.tool-bash { border-left-color: #7ee787; }
.tool-card.tool-read { border-left-color: #79c0ff; }
.tool-card.tool-write, .tool-card.tool-edit { border-left-color: #f0b866; }
.tool-card.tool-grep, .tool-card.tool-glob { border-left-color: #d2a8ff; }
.tool-card.tool-webfetch, .tool-card.tool-websearch { border-left-color: #58c4dd; }

/* run-command action card — a proposed shell command with a Run button that
   streams output live and settles into a pass/fail summary */
.row.action { justify-content: flex-start; }
.row.action .msg-time { text-align: left; }
.action-card {
  width: 100%; max-width: min(92%, 640px); align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 12px; overflow: hidden;
}
.action-card.danger { border-left-color: var(--danger); }
.action-card.status-running { border-left-color: var(--accent-2); }
.action-card.status-done { border-left-color: #7ee787; }
.action-card.status-failed { border-left-color: var(--danger); }
.action-card.status-stopped { border-left-color: #f0b866; }

/* A task card is agent-run background work rather than a command with a button.
   The dashed left edge reads as "in flight elsewhere" — distinct at a glance from
   a command portal itself ran. */
.action-card.task { border-left-style: dashed; }
.action-card.task .ac-cmd { color: var(--muted); font-family: inherit; font-size: 12.5px; }

/* A subagent card: solid edge in the accent (it's a real agent, not a shell job),
   with its own tool stream folded away inside until you open it. */
.action-card.subagent { border-left-style: solid; border-left-color: var(--accent); }
.action-card.subagent.status-done { border-left-color: #7ee787; }

/* A spawn proposes a whole child chat, so the edge branches (double) rather than
   reading as one job. Its ac-cmd is the brief — prose, like a task's detail, not
   a shell command, and never rendered with a $ prefix. */
.action-card.spawn { border-left-style: double; border-left-width: 4px; }
.action-card.spawn .ac-cmd { color: var(--muted); font-family: inherit; font-size: 12.5px; }
/* A spawn's status carries the mode, so it's longer than "tap to run". .ac-status
   is flex:none, which would make the TITLE — the child chat's name — absorb every
   pixel and ellipsis away to nothing at 390px. Let the status shrink instead; the
   title's flex-basis of 0 means it keeps what it has. Spawn-scoped on purpose:
   command and task cards keep the base behaviour. */
.action-card.spawn .ac-status {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sa-count { flex: none; font-size: 11px; color: var(--faint); }
.ac-steps:empty { display: none; }
/* An agent still working has steps but no result yet — don't reserve a void for it. */
.ac-out:empty { display: none; }
.ac-steps { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 2px; }
.sa-step {
  display: flex; align-items: baseline; gap: 7px; min-width: 0;
  font-size: 12px; color: var(--muted);
}
.sa-icon { flex: none; font-size: 11px; }
.sa-label {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono);
}
/* A subagent's prose is what it decided, not what it ran — worth reading as text. */
.sa-step.sa-say .sa-label { font-family: inherit; white-space: normal; color: var(--text); }

/* Suggestion cards: one proposal, its evidence, and the two taps that resolve it. */
.sg-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--accent-2); border-radius: 12px;
  padding: 11px 13px; margin-bottom: 10px;
}
.sg-card.sg-busy { opacity: .5; pointer-events: none; }
.sg-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.sg-icon { font-size: 12px; }
.sg-kind {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent-2);
}
.sg-scope { flex: 1; min-width: 0; font-size: 11px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-conf { flex: none; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.sg-age { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-bottom: 5px; }
.sg-age.cold { color: #f0b866; }
.sg-title { font-size: 14px; font-weight: 650; line-height: 1.3; margin-bottom: 4px; }
.sg-more {
  display: block; width: 100%; margin-top: 4px; padding: 9px;
  background: transparent; color: var(--muted);
  border: 1px dashed var(--border); border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 12.5px;
}
.sg-detail { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.sg-target {
  margin-top: 5px; font-family: var(--mono); font-size: 11px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sg-eviwrap { margin-top: 7px; }
.sg-eviwrap summary {
  font-size: 11.5px; color: var(--faint); cursor: pointer; list-style: none;
}
.sg-eviwrap summary::before { content: "▸ "; }
.sg-eviwrap[open] summary::before { content: "▾ "; }
.sg-quote {
  font-size: 11.5px; color: var(--muted); line-height: 1.5;
  padding: 3px 0 3px 9px; border-left: 2px solid var(--border); margin-top: 4px;
}
.sg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.sg-btn {
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
}
.sg-dismiss { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.sg-accept { background: var(--accent); color: #fff; border: none; }

/* Stall bar: portal noticed the silence, the user decides what to do about it. */
.stall-bar {
  display: flex; align-items: center; gap: 9px;
  margin: 0 12px 8px; padding: 8px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid #f0b866; border-radius: 10px;
}
.stall-bar.hidden { display: none; }
.stall-dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: #f0b866; animation: stallPulse 1.8s ease-in-out infinite;
}
@keyframes stallPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.stall-text { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); }
.stall-btn {
  flex: none; padding: 5px 14px; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: #fff; border: none;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
}
.stall-btn:disabled { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .stall-dot { animation: none; } }

.ac-head {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 9px 12px; background: transparent; border: none; cursor: pointer;
  font-family: inherit; color: var(--text);
}
.ac-icon { flex: none; width: 16px; text-align: center; font-size: 13px; line-height: 1; color: var(--accent-2); }
.action-card.status-done .ac-icon { color: #7ee787; }
.action-card.status-failed .ac-icon { color: var(--danger); }
.action-card.status-stopped .ac-icon { color: #f0b866; }
.ac-title {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ac-status { flex: none; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.ac-chev { flex: none; color: var(--faint); font-size: 15px; transition: transform .18s ease; }
.action-card.open .ac-chev { transform: rotate(90deg); }
/* running: spinner in place of the icon glyph */
.action-card.spin .ac-icon::before {
  content: ""; display: inline-block; width: 11px; height: 11px; vertical-align: middle;
  border: 2px solid var(--accent); border-top-color: transparent; border-radius: 50%;
  animation: acspin .7s linear infinite;
}
@keyframes acspin { to { transform: rotate(360deg); } }

.ac-cmd {
  display: block; margin: 0 12px 10px;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 9px; white-space: pre-wrap; word-break: break-word;
}
.ac-body { max-height: 0; overflow: hidden; margin: 0 12px; transition: max-height .22s ease; }
.action-card.open .ac-body { max-height: 320px; overflow: auto; margin-bottom: 10px; }
.ac-out {
  margin: 0; padding: 9px 10px;
  background: #0b0b11; border: 1px solid var(--border); border-radius: 8px;
  font-family: var(--mono); font-size: 12px; line-height: 1.45; color: #cdd0de;
  white-space: pre-wrap; word-break: break-word;
}
.ac-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 0 12px 11px; }
.ac-btn {
  border: none; border-radius: 9px; padding: 8px 18px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700;
  background: var(--accent); color: #fff; transition: background .12s, transform .1s;
}
.ac-btn:hover { background: var(--accent-2); }
.ac-btn:active { transform: scale(.97); }
.ac-btn:disabled { opacity: .6; cursor: default; }
.ac-btn.secondary { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.ac-btn.secondary:hover { background: var(--surface-3); }
.ac-btn.run.danger, .ac-btn.armed { background: var(--danger); color: #fff; box-shadow: none; }
.ac-btn.run.danger:hover, .ac-btn.armed:hover { background: #ff8585; }
.ac-btn.stop { background: var(--surface-3); color: var(--text); }
.ac-btn.stop:hover { background: var(--border); }

/* multiple-choice question card — ask_user_question rendered as tap targets.
   Options are full-width rows because this is answered one-handed on a phone. */
.q-card {
  width: 100%; max-width: min(92%, 640px); align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border); border-left: 3px solid var(--accent-2);
  border-radius: 12px; padding: 10px 12px 11px;
}
.q-card.status-answered, .q-card.status-skipped { border-left-color: var(--border); padding: 8px 12px; }
.q-card.q-busy { opacity: .6; pointer-events: none; }
/* typed past: still answerable, but no longer what the conversation is waiting on */
.q-card.status-stale { border-left-color: var(--border); opacity: .72; }
.q-card.status-stale .q-chip { color: var(--muted); background: var(--surface-3); }

.q-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
/* answered steps sit above the live one — rule them off so the card doesn't read
   as one undifferentiated stack of chips */
.q-done + .q-head { margin-top: 9px; padding-top: 10px; border-top: 1px solid var(--border); }
.q-chip {
  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 14%, transparent);
  border-radius: 999px; padding: 2px 8px;
}
.q-step { flex: none; margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.q-text { font-size: 14px; font-weight: 600; line-height: 1.35; margin-bottom: 9px; }

.q-opts { display: flex; flex-direction: column; gap: 6px; }
.q-opt {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 9px 11px; cursor: pointer; font-family: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 9px;
  transition: border-color .12s, background .12s, transform .1s;
}
.q-opt:hover { border-color: var(--accent-2); background: var(--surface-3); }
.q-opt:active { transform: scale(.99); }
.q-opt-label { font-size: 13.5px; font-weight: 600; }
.q-opt-desc { font-size: 12px; line-height: 1.35; color: var(--muted); }
/* Selection indicator. Nothing commits until the Answer button, so what's staged
   has to be unmistakable: a radio for pick-one, a checkbox for pick-many — the
   shape itself says whether tapping another one replaces or adds. */
.q-opt { padding-left: 34px; position: relative; }
.q-opt::before {
  content: ""; position: absolute; left: 11px; top: 11px; width: 14px; height: 14px;
  border: 1.5px solid var(--border); border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--surface-2);
}
.q-opt.on::before { background: var(--accent-2); border-color: var(--accent-2); }
.q-opts.multi .q-opt::before { border-radius: 4px; box-shadow: none; }
.q-opts.multi .q-opt.on::before {
  content: "✓"; color: #fff; font-size: 10px; font-weight: 800; line-height: 14px; text-align: center;
}
.q-opt.on { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, var(--bg)); }

/* per-option preview: a disclosure, since touch has no "focused option" to
   reveal on the way the TUI does */
.q-opt-wrap { display: flex; flex-direction: column; }
.q-prev-btn {
  /* indented to the option's own text inset, so it reads as belonging to the
     option above it rather than floating between two of them */
  align-self: flex-start; display: flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 6px 4px 0 11px; cursor: pointer;
  font-family: inherit; font-size: 12px; color: var(--muted);
}
.q-prev-btn:hover { color: var(--text); }
.q-prev-chev { display: inline-block; font-size: 14px; line-height: 1; transition: transform .18s ease; }
.q-opt-wrap.open .q-prev-chev { transform: rotate(90deg); }
.q-prev { max-height: 0; overflow: hidden; transition: max-height .22s ease; }
.q-opt-wrap.open .q-prev { max-height: 320px; overflow: auto; margin-top: 6px; }
.q-prev > :first-child { margin-top: 0; }
.q-prev > :last-child { margin-bottom: 0; }
.q-prev pre {
  margin: 0; padding: 9px 10px;
  background: #0b0b11; border: 1px solid var(--border); border-radius: 8px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
}
.q-prev p, .q-prev li { font-size: 12.5px; line-height: 1.45; color: var(--muted); }

.q-staged-note {
  margin-top: 8px; color: var(--muted); font-size: 12.5px; font-style: italic;
  line-height: 1.4; overflow-wrap: anywhere;
}

.q-foot { display: flex; align-items: center; gap: 14px; margin-top: 9px; }
.q-link {
  background: none; border: none; padding: 2px 0; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--muted);
}
.q-link:hover { color: var(--text); }
.q-submit {
  margin-left: auto; border: none; border-radius: 9px; padding: 7px 16px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; background: var(--accent); color: #fff;
}
.q-submit:disabled { opacity: .45; cursor: default; }

/* resolved: one scannable line per question */
.q-done { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; }
.q-done + .q-done { margin-top: 3px; }
.q-pick { font-size: 13px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.q-pick.muted { font-weight: 500; color: var(--faint); }
/* the note that rode along with a choice — an aside, not a second answer */
.q-note { font-size: 12.5px; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }

/* system / status centered */
.row.system { justify-content: center; }
.system-note {
  font-size: 12.5px; color: var(--faint);
  background: var(--surface); border: 1px solid var(--border);
  padding: 5px 12px; border-radius: 999px; text-align: center;
}

/* ---------- Empty state ---------- */
.empty {
  margin: auto; text-align: center; padding: 40px 20px; color: var(--muted);
}
.empty-mark { font-size: 34px; color: var(--accent-2); }
.empty-title { font-size: 18px; font-weight: 600; color: var(--text); margin: 12px 0 4px; }
.empty-sub { font-size: 14px; margin: 0 0 18px; }

/* ---------- Turn bar: "Working" + Stop/Undo, one line ---------- */
.handoff-bar {
  flex: 0 0 auto; align-self: stretch;
  display: flex; align-items: center; gap: 11px;
  margin: 6px calc(10px + var(--safe-right)) 4px calc(10px + var(--safe-left));
  padding: 10px 12px; min-height: 58px;
  color: var(--text); text-align: left;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, transparent);
  border-radius: 15px;
  background: linear-gradient(112deg,
    color-mix(in srgb, var(--accent) 24%, var(--surface-2)),
    color-mix(in srgb, var(--accent) 8%, var(--surface)));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent),
    0 10px 30px color-mix(in srgb, var(--accent) 12%, transparent);
  animation: handoffIn .28s cubic-bezier(.2,.8,.2,1);
}
.pane[data-agent-shape="geometric"] .handoff-bar { border-radius: 10px; }
.handoff-icon {
  flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center;
  color: #fff; background: var(--accent); border-radius: 50%; font-size: 15px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent);
}
.pane[data-agent-shape="geometric"] .handoff-icon { border-radius: 8px; font-size: 11px; }
.handoff-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 2px; }
.handoff-kicker { color: var(--accent-2); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .09em; }
.handoff-copy b { font-size: 13.5px; line-height: 1.25; }
.handoff-arrow { color: var(--accent-2); font-size: 26px; line-height: 1; }
.pane.attention .topbar {
  border-bottom-color: color-mix(in srgb, var(--accent) 72%, var(--border));
  box-shadow: 0 5px 24px color-mix(in srgb, var(--accent) 10%, transparent);
}
@keyframes handoffIn { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes attentionPulse {
  0%, 100% { opacity: .55; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.12); }
}

.turn-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 0 calc(12px + var(--safe-right)) 0 calc(20px + var(--safe-left));
}

.typing {
  display: flex; gap: 6px; align-items: center; width: fit-content;
  margin: 2px 0 6px;
  padding: 7px 14px;
  background: var(--surface-2);
  border: 1px solid var(--accent);
  border-radius: 14px;
  box-shadow: 0 0 0 3px rgba(124, 108, 255, .12);
}
.typing::before {
  content: attr(data-label); color: var(--accent-2); font-weight: 600; font-size: 13px;
}
.pane[data-agent-shape="round"] .typing {
  border-radius: 15px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
}
.pane[data-agent-shape="geometric"] .typing {
  border-radius: 9px;
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 13%, transparent);
}
.typing-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2);
  animation: bounce 1.3s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: .18s; }
.typing-dot:nth-child(3) { animation-delay: .36s; }
.pane[data-agent-motion="step"] .typing-dot {
  width: 6px; height: 6px; border-radius: 1px;
  animation-name: codexStep;
}
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-5px); opacity: 1; }
}
@keyframes codexStep {
  0%, 70%, 100% { transform: rotate(45deg) scale(.65); opacity: .35; }
  28% { transform: rotate(45deg) scale(1); opacity: 1; }
}

/* ---------- Composer ---------- */
.composer {
  flex: 0 0 auto;
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px calc(12px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(12px + var(--safe-left));
  border-top: 1px solid var(--border);
  background: rgba(14,14,20,.96);
}
.input {
  flex: 1; resize: none;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 11px 15px; font-size: 16px; line-height: 1.4;
  font-family: inherit; max-height: 140px; min-height: 44px;
  outline: none;
  transition: border-color .15s;
}
.input::placeholder { color: var(--faint); }
.input:focus { border-color: var(--accent); }
.pane:not(.agent-none) .input:focus {
  background: color-mix(in srgb, var(--accent) 3%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 9%, transparent);
}
.send-btn {
  flex: 0 0 44px; width: 44px; height: 44px;
  display: grid; place-items: center;
  position: relative;
  border: none; border-radius: 50%;
  background: var(--accent); color: #fff;
  transition: background .15s, transform .05s, opacity .15s;
  -webkit-touch-callout: none; user-select: none; touch-action: manipulation;
}
.send-btn:hover:not(:disabled) { background: var(--accent-2); }
.send-btn:active:not(:disabled) { transform: scale(.92); }
.send-btn:disabled { opacity: .4; cursor: default; }
.send-btn[hidden] { display: none; }
.send-btn svg { transform: translateX(1px); }
.send-btn::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit;
  padding: 2px; opacity: 0; pointer-events: none;
  background: conic-gradient(var(--accent-2) 0turn, transparent 0turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.send-btn.holding::after { opacity: 1; animation: holdRing .48s linear forwards; }
@keyframes holdRing { to { background: conic-gradient(var(--accent-2) 1turn, transparent 1turn); } }
.attach-btn {
  flex: 0 0 40px; width: 40px; height: 44px;
  display: grid; place-items: center;
  border: none; background: transparent; color: var(--muted);
  font-size: 20px; border-radius: 12px;
  transition: background .12s, color .12s;
}
.attach-btn:hover { background: var(--surface-2); color: var(--text); }

/* Staged-attachment tray above the composer. */
.attach-tray {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 8px calc(12px + var(--safe-right)) 0 calc(12px + var(--safe-left));
}
.attach-tray.hidden { display: none; }
.attach-chip {
  display: flex; align-items: center; gap: 6px;
  max-width: 200px;
  padding: 4px 6px 4px 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.attach-thumb { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; }
.attach-ic { width: 32px; height: 32px; display: grid; place-items: center; font-size: 18px; }
.attach-label {
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.attach-rm {
  flex: 0 0 auto; width: 20px; height: 20px;
  display: grid; place-items: center;
  border: none; background: transparent; color: var(--faint);
  font-size: 12px; border-radius: 6px;
}
.attach-rm:hover { background: var(--surface-3); color: var(--text); }

/* Image/file messages in the transcript. */
.bubble-media { padding: 4px; background: transparent; border: none; }
.msg-img {
  display: block; max-width: 100%; max-height: 320px;
  border-radius: 12px; border: 1px solid var(--border);
}
.msg-file {
  display: inline-block; padding: 8px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; color: var(--accent-2);
  font-size: 14px; text-decoration: none;
}
.messages.drag-over { outline: 2px dashed var(--accent); outline-offset: -8px; }

/* Voice mic button (swaps with the send button when the composer is empty). */
.mic-btn {
  flex: 0 0 44px; width: 44px; height: 44px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: var(--surface-2); color: var(--muted);
  transition: background .15s, color .15s, transform .05s;
}
.mic-btn:hover { background: var(--surface-3); color: var(--text); }
.mic-btn[hidden] { display: none; }
.mic-btn.listening { background: #f0506e; color: #fff; animation: micpulse 1.2s ease-in-out infinite; }
@keyframes micpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(240,80,110,.5); } 50% { box-shadow: 0 0 0 7px rgba(240,80,110,0); } }

/* Above the composer: "Question waiting ↓" leads back to a card you've scrolled
   past; "Answering “X” ✕" is the armed state, showing where your next message goes. */
.q-pending {
  flex: 0 0 auto; align-self: center; margin: 8px auto 0;
  display: inline-flex; align-items: center; gap: 6px;
  max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 13%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent-2) 34%, transparent);
}
.q-pending:hover { background: color-mix(in srgb, var(--accent-2) 20%, var(--surface-2)); }
.q-pending.hidden { display: none; }
.q-pending.armed {
  color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
/* the armed "Something else" on the card itself */
.q-link.on { color: var(--accent); font-weight: 600; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(96px + var(--safe-bottom));
  transform: translateX(-50%) translateY(8px);
  background: var(--danger); color: #fff;
  padding: 11px 16px; border-radius: 12px;
  font-size: 14px; font-weight: 500; z-index: 60;
  max-width: 90%; text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  opacity: 0; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.ok { background: var(--accent); }

/* Connection status pill — shown when the stream drops or we go offline. */
.conn-bar {
  position: fixed; left: 50%; top: calc(8px + var(--safe-top));
  transform: translateX(-50%) translateY(-10px);
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-3); color: var(--text);
  border: 1px solid var(--border);
  padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500; z-index: 70;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  opacity: 0; transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.conn-bar.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.conn-bar::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #e0a020; /* amber: reconnecting */
}
.conn-bar.offline::before { background: var(--danger); }

/* Optimistic-send status under a queued/failed user bubble. */
.msg-status {
  flex-basis: 100%; text-align: right;
  font-size: 11px; margin-top: 2px; padding: 0 4px;
}
.msg-status.pending { color: var(--muted); }
.msg-status.failed { color: var(--danger); cursor: pointer; }
.msg-status.failed::before { content: "⚠ "; }
/* held = in the undo window: a tappable "Undo" with a thin bar that depletes over
   the cancel window, so it's clear the message is about to go. */
.msg-status.held {
  color: var(--accent-2); cursor: pointer; font-weight: 600;
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
}
.msg-status.held::before { content: "↩"; }
.msg-status.held::after {
  content: ""; width: 34px; height: 2px; border-radius: 2px;
  background: linear-gradient(to right, var(--accent-2) 50%, var(--border) 50%);
  background-size: 200% 100%; background-position: left;
  animation: undoDeplete 2.5s linear forwards;
}
@keyframes undoDeplete { from { background-position: left; } to { background-position: right; } }

/* Durable scheduled user messages. A dashed bubble follows the familiar
   "not sent yet" convention; its status is a real control, not transient text. */
.row.deferred-row .bubble {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
}
.row.deferred-row .msg-time { display: none; }
.deferred-status {
  flex-basis: 100%; display: flex; justify-content: flex-end; align-items: center; gap: 6px;
  padding: 3px 4px 0 20%; color: var(--accent-2); font-size: 11px; font-weight: 650;
}
.deferred-clock { font-size: 13px; }
.deferred-status.failed { color: var(--danger); }
.deferred-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deferred-cancel {
  flex: 0 0 auto; border: 0; padding: 3px 6px; border-radius: 6px;
  color: var(--muted); background: transparent; font-size: 11px; font-weight: 700;
}
.deferred-cancel:hover { color: var(--text); background: var(--surface-3); }

/* Send-later bottom sheet: reachable by a send-button long press, sized for a
   390px thumb zone first and centered as a dialog on larger screens. */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(3,3,8,.68); opacity: 0;
  transition: opacity .2s ease;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.sheet-overlay.open { opacity: 1; }
.send-later-sheet {
  width: 100%; max-width: 520px; max-height: min(82vh, 680px); overflow-y: auto;
  padding: 8px 14px calc(16px + var(--safe-bottom));
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-bottom: 0;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -18px 60px rgba(0,0,0,.48);
  transform: translateY(24px); transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.sheet-overlay.open .send-later-sheet { transform: translateY(0); }
.send-later-sheet[data-agent-shape="geometric"] { border-radius: 15px 15px 0 0; }
.send-later-sheet[data-agent-shape="geometric"] .send-later-option { border-radius: 9px; }
.send-later-sheet.busy { opacity: .65; pointer-events: none; }
.sheet-grab { width: 38px; height: 4px; margin: 0 auto 12px; border-radius: 999px; background: var(--border); }
.send-later-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 10px; }
.sheet-kicker { color: var(--accent-2); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.send-later-head h2 { margin: 2px 0 0; font-size: 21px; letter-spacing: -.02em; }
.sheet-close { width: 38px; height: 38px; border: 0; border-radius: 50%; color: var(--muted); background: var(--surface-2); }
.send-later-options { display: flex; flex-direction: column; gap: 7px; }
.send-later-option {
  width: 100%; min-height: 58px; display: flex; align-items: center; gap: 10px;
  padding: 9px 13px; color: var(--text); text-align: left;
  border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2);
}
.send-later-option:hover:not(:disabled) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); }
.send-later-option:disabled { opacity: .4; cursor: default; }
.slo-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.slo-main b { font-size: 14px; }
.slo-main span { color: var(--muted); font-size: 12px; }
.slo-arrow { color: var(--faint); font-size: 24px; }
.send-later-note { margin: 11px 5px 0; color: var(--faint); font-size: 11.5px; line-height: 1.35; }
.send-later-custom { display: flex; flex-direction: column; gap: 10px; padding: 4px; }
.send-later-custom label { color: var(--muted); font-size: 12px; font-weight: 700; }
.send-later-custom input {
  width: 100%; min-height: 50px; padding: 10px 12px;
  color: var(--text); color-scheme: dark; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 12px; font: inherit;
}
.send-later-custom input:focus { border-color: var(--accent); outline: 0; }
.send-later-actions { display: flex; justify-content: flex-end; gap: 8px; }
.send-later-actions button { min-height: 42px; padding: 0 15px; border: 0; border-radius: 11px; color: var(--text); background: var(--surface-3); font-weight: 700; }
.send-later-actions button[type="submit"] { color: #fff; background: var(--accent); }

@media (min-width: 561px) {
  .sheet-overlay { align-items: center; padding: 24px; }
  .send-later-sheet { border-bottom: 1px solid var(--border); border-radius: 20px; padding-bottom: 18px; }
  .send-later-sheet[data-agent-shape="geometric"] { border-radius: 14px; }
}

/* ---------- Mobile ---------- */
.only-mobile { display: none; }
@media (max-width: 560px) {
  .only-mobile { display: grid; }
  .drawer {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 35;
    width: 86vw; max-width: var(--drawer-w);
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.4,0,.2,1);
    padding-bottom: var(--safe-bottom);
    box-shadow: 0 0 40px rgba(0,0,0,.5);
  }
  .app.drawer-open .drawer { transform: translateX(0); }
  .drawer.dragging { transition: none; }
  .pane { width: 100%; }
  .bubble { max-width: 86%; font-size: 16px; }
  .pane:not(.agent-none) .row.assistant .bubble { max-width: calc(86% - 30px); }
}

@media (min-width: 561px) {
  .scrim { display: none; }
  /* Use the wide screen: a roomy conversation column (the pane already loses ~300px
     to the drawer). The composer bar stays full-width; its input row is centred via
     padding to match. */
  .messages { max-width: 1700px; margin-left: auto; margin-right: auto; width: 100%; }
  .composer { padding-left: max(12px, calc((100% - 1700px) / 2)); padding-right: max(12px, calc((100% - 1700px) / 2)); }
  .bubble { max-width: min(78%, 1040px); font-size: 16px; }
  .pane:not(.agent-none) .row.assistant .bubble { max-width: min(calc(78% - 30px), 1040px); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* trust-tier badge (shown for restricted, non-owner users) */
.tier-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #f0b429;
  background: rgba(240, 180, 41, .12);
  border: 1px solid rgba(240, 180, 41, .35);
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}
.tier-badge[hidden] { display: none; }

/* Workspace chip (owner-only): current project dir, click to switch. */
.ws-chip {
  flex: 0 0 auto;
  margin-left: 6px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
  max-width: 140px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--accent);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: border-color .12s, background .12s;
}
.ws-chip:hover { border-color: var(--accent); background: var(--surface-3); }

/* Model chip doubles as the agent identity: which of Claude/Codex is answering
   should be readable at a glance, so the provider is named (not just an icon)
   and colour-coded. Wider than a plain ws-chip because it carries two parts —
   the chip row scrolls, so it never squeezes the title. */
.model-chip {
  max-width: 240px; display: inline-flex; align-items: baseline; gap: 5px;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
}
.model-chip .mc-prov { font-weight: 700; }
.model-chip .mc-model { color: var(--muted); font-weight: 600; }
.model-chip { color: var(--agent-accent-2, var(--accent-2)); }
.model-chip:hover { border-color: var(--accent); }
.ws-chip[hidden] { display: none; }
/* let the title shrink so the chip stays on-screen with a long title */
.chat-title { flex: 0 1 auto; min-width: 0; }

/* Provider marker on every chat row. Warm rounded Claude and cool geometric
   Codex read as two systems even when titles and workspaces are similar. */
.chat-item .ci-prov {
  width: 17px; height: 17px; margin-right: 6px;
  display: inline-grid; place-items: center;
  border: 1px solid; border-radius: 50%;
  font-size: 8px; line-height: 1; vertical-align: -2px;
}
.chat-item .ci-prov {
  color: var(--agent-accent-2); background: var(--agent-soft); border-color: var(--agent-border);
}
.chat-row[data-agent-shape="geometric"] .ci-prov { border-radius: 5px; font-size: 7px; }

.chat-item .ci-ws {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 11px; font-weight: 600;
  color: var(--accent);
  background: var(--surface-3);
  border-radius: 999px;
  vertical-align: middle;
}

/* ---------- Drawer actions / folders ---------- */
.drawer-actions { display: flex; align-items: center; gap: 6px; }

.folder-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px 6px; margin-top: 4px;
  color: var(--muted); font-size: 12px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
  border-radius: 8px; cursor: pointer; user-select: none;
}
.folder-head:hover { background: var(--surface-2); }
.folder-head.plain { cursor: default; }
.folder-head.plain:hover { background: transparent; }
.folder-caret { width: 12px; font-size: 10px; color: var(--faint); }
.folder-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.folder-count {
  font-size: 11px; color: var(--faint);
  background: var(--surface-2); border-radius: 999px;
  padding: 1px 7px; min-width: 18px; text-align: center;
}
.folder-menu-btn {
  border: none; background: transparent; color: var(--faint);
  font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.folder-menu-btn:hover { background: var(--surface-3); color: var(--text); }
.folder-empty { font-size: 12px; color: var(--faint); padding: 6px 12px 8px 28px; }

/* chat row = a sliding foreground (item + ⋯) over a revealed Archive action.
   The foreground is opaque and rounded and sits ON TOP; the action behind is
   rounded on its right edge to match. No clip on the row itself, so there's no
   compositing/rounded-clip mismatch that could bleed the red action at a corner. */
.chat-row {
  position: relative; margin-bottom: 2px;
}
.chat-row-main {
  position: relative; z-index: 1;
  display: flex; align-items: stretch; gap: 2px;
  background: var(--surface); border-radius: 12px;
  transition: transform .18s ease;
}
.chat-row.active .chat-row-main { background: var(--surface-3); }
.chat-row.active .chat-row-main { box-shadow: inset -2px 0 color-mix(in srgb, var(--agent-accent) 62%, transparent); }
.chat-row .ci-dot.unread, .chat-row .ci-dot.attention { background: var(--agent-accent); }
.chat-row .ci-dot.working { background: var(--agent-accent-2); }
.chat-row.working .ci-time { color: var(--agent-accent-2); }
.chat-row.attention .chat-row-main {
  background: color-mix(in srgb, var(--agent-accent) 12%, var(--surface-2));
  outline: 1px solid color-mix(in srgb, var(--agent-accent) 62%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--agent-accent) 11%, transparent),
    inset -3px 0 var(--agent-accent);
}
.chat-row.attention .ci-title { font-weight: 800; }
.chat-row.attention .ci-time { color: var(--agent-accent-2); font-weight: 700; }
.chat-row .ci-dot.attention { animation: attentionPulse 1.6s ease-in-out infinite; }
.chat-row.swiping .chat-row-main { transition: none; }
.chat-row-main .chat-item { flex: 1; min-width: 0; margin-bottom: 0; }
.chat-row.active .chat-row-main .chat-item { background: transparent; }
/* Inset the action into a floating pill so its edges never sit under the
   foreground's rounded corners — that overlap is what left a faint AA seam. */
.chat-row-actions {
  position: absolute; top: 4px; right: 4px; bottom: 4px;
  display: flex; align-items: stretch;
  border-radius: 12px; overflow: hidden;
}
.row-action {
  border: none; color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 0 18px; display: flex; align-items: center; cursor: pointer;
}
.row-action.archive { background: var(--danger); }
.row-action.unarchive { background: var(--surface-3); color: var(--text); }
.chat-menu-btn {
  flex: 0 0 32px; border: none; background: transparent;
  color: var(--faint); font-size: 18px; line-height: 1;
  border-radius: 10px; opacity: 0; transition: opacity .12s, background .12s;
}
.chat-row:hover .chat-menu-btn, .chat-row.active .chat-menu-btn { opacity: 1; }
.chat-menu-btn:hover { background: var(--surface-2); color: var(--text); }
@media (max-width: 560px) { .chat-menu-btn { opacity: 1; } }

/* Drawer drill-in: back header + tappable workspace rows */
.ws-back {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 6px 8px; margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
}
.ws-back-btn {
  border: none; background: transparent; color: var(--text);
  font-size: 24px; line-height: 1; padding: 2px 8px; border-radius: 8px;
}
.ws-back-btn:hover { background: var(--surface-2); }
.ws-back-name {
  flex: 1; font-weight: 700; font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* "+ new chat in this workspace" — sits between the name and the ⋯ menu */
.ws-new-btn {
  border: none; background: transparent; color: var(--accent-2);
  font-size: 22px; line-height: 1; padding: 0 8px; border-radius: 8px;
  cursor: pointer; transition: background .12s ease, transform .1s ease;
}
.ws-new-btn:hover { background: var(--surface-2); color: var(--accent); }
.ws-new-btn:active { transform: scale(.9); }
.ws-row { cursor: pointer; }
.ws-row .folder-caret { font-size: 14px; width: 18px; }
.ws-row .folder-name {
  text-transform: none; letter-spacing: 0;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.ws-chevron { color: var(--faint); font-size: 16px; margin-left: 2px; }
.archived-entry { margin-top: 6px; }
.archived-entry .folder-name { color: var(--faint); font-weight: 500; }

/* ---------- Popup menu (chat / folder actions) ---------- */
.popmenu {
  position: fixed; z-index: 70; min-width: 184px; max-width: 240px;
  background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 6px; box-shadow: 0 16px 48px rgba(0,0,0,.55);
  /* Any menu can outgrow the screen (the workspace list is ~20 rows). Without
     this it just runs off the bottom edge and the tail is unreachable — the
     height is set by popMenu() from the space actually available. */
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.popmenu[hidden] { display: none; }
.popmenu-header {
  font-size: 11px; color: var(--faint); text-transform: uppercase;
  letter-spacing: .04em; padding: 6px 10px 4px;
}
.popmenu-item {
  display: block; width: 100%; text-align: left;
  border: none; background: transparent; color: var(--text);
  padding: 10px; border-radius: 9px; font-size: 14px; min-height: 40px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.popmenu-item:hover { background: var(--surface-3); }
.popmenu-item.danger { color: var(--danger); }

/* ---------- Context meter ---------- */
.ctx-meter {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 999px; padding: 4px 10px 4px 8px;
  color: var(--muted); font-size: 12px; font-weight: 600;
  transition: border-color .15s, background .15s;
}
.ctx-meter:hover { border-color: var(--accent); }
.ctx-bar {
  width: 38px; height: 6px; border-radius: 999px;
  background: var(--surface-3); overflow: hidden;
}
.ctx-fill {
  display: block; height: 100%; width: 0;
  background: var(--accent); border-radius: 999px;
  transition: width .3s ease, background .3s;
}
.ctx-fill.warm { background: #f0b429; }
.ctx-fill.hot { background: var(--danger); }
.ctx-text { font-variant-numeric: tabular-nums; }

.ctx-detail {
  position: absolute; top: calc(var(--header-h) + var(--safe-top) - 4px);
  right: calc(56px + var(--safe-right)); z-index: 40;
  min-width: 210px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
  font-size: 13px;
}
.ctx-detail[hidden] { display: none; }
.ctx-detail .cd-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 4px 0; color: var(--muted);
}
.ctx-detail .cd-row b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ctx-detail .cd-sep { height: 1px; background: var(--border); margin: 8px 0 4px; }
.ctx-detail .cd-row b.lim.ok { color: #38b26a; }
.ctx-detail .cd-row b.lim.warm { color: #f0b429; }
.ctx-detail .cd-row b.lim.hot { color: var(--danger); }
.ctx-detail .cd-row b.lim em { color: var(--muted); font-weight: 500; font-style: normal; margin-left: 4px; }

/* ---- markdown readability inside assistant bubbles ---- */
.bubble h1, .bubble h2, .bubble h3, .bubble h4, .bubble h5, .bubble h6 {
  margin: 14px 0 6px; line-height: 1.25; font-weight: 700;
}
.bubble h1:first-child, .bubble h2:first-child, .bubble h3:first-child,
.bubble h4:first-child, .bubble h5:first-child, .bubble h6:first-child { margin-top: 0; }
.bubble h1 { font-size: 20px; }
.bubble h2 { font-size: 18px; }
.bubble h3 { font-size: 17px; }
.bubble h4 { font-size: 15px; color: var(--accent-2); }
.bubble h5 { font-size: 13.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.bubble h6 { font-size: 13px; color: var(--muted); }
.bubble ul, .bubble ol { margin: 6px 0; padding-left: 22px; }
.bubble li { margin: 3px 0; }
.bubble li::marker { color: var(--accent-2); }
.bubble em { font-style: italic; }
.bubble del { opacity: .65; }
.bubble blockquote {
  margin: 8px 0; padding: 2px 12px;
  border-left: 3px solid var(--accent-2); color: var(--muted);
}
.bubble hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }

/* GFM tables — .table-wrap lets wide tables scroll instead of overflowing the bubble */
.bubble .table-wrap { overflow-x: auto; margin: 8px 0; -webkit-overflow-scrolling: touch; }
.bubble table { border-collapse: collapse; font-size: 13px; width: auto; }
.bubble th, .bubble td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; vertical-align: top; }
.bubble th { background: var(--surface-2); font-weight: 700; white-space: nowrap; }
.bubble tbody tr:nth-child(even) td { background: rgba(255,255,255,.02); }

/* GFM task lists — hide the bullet, keep the checkbox */
.bubble ul:has(> li > input[type="checkbox"]) { list-style: none; padding-left: 4px; }
.bubble li > input[type="checkbox"] { margin-right: 7px; vertical-align: middle; }

/* ---- code blocks with copy button ---- */
.bubble .codeblock { position: relative; margin: 8px 0; }
.bubble .codeblock pre { margin: 0; }
.copy-btn {
  position: absolute; top: 6px; right: 6px;
  font: 600 11px var(--font, inherit);
  padding: 3px 9px; border-radius: 7px;
  background: var(--surface-3); color: var(--muted);
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer; opacity: .65; transition: opacity .15s, background .15s, color .15s;
}
.bubble .codeblock:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.copy-btn.copied { background: #2e7d4f; color: #fff; border-color: #2e7d4f; opacity: 1; }
@media (hover: none) { .copy-btn { opacity: 1; } }  /* always visible on touch */

/* ---- owner web terminal overlay ---- */
.term-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  background: #0b0b11;
  padding-top: var(--safe-top); padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left); padding-right: var(--safe-right);
}
.term-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface);
  flex: 0 0 auto;
}
.term-title { font: 600 13px var(--mono); color: var(--accent-2); }
.term-close {
  width: 34px; height: 34px; border: none; border-radius: 9px;
  background: var(--surface-2); color: var(--text); font-size: 15px;
}
.term-close:hover { background: var(--surface-3); }
.term-body { flex: 1; min-height: 0; padding: 6px 8px; overflow: hidden; }
.term-body .xterm, .term-body .xterm-viewport, .term-body .xterm-screen { height: 100% !important; }

/* ---------- Ops + brain dashboard overlay ---------- */
.dash-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  background: #0b0b11;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}
.dash-tabs { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.dash-tabs::-webkit-scrollbar { display: none; }
.dash-tab {
  padding: 6px 14px; border: none; border-radius: 9px;
  background: transparent; color: var(--muted); font-size: 14px; font-weight: 600;
}
.dash-tab.active { background: var(--surface-3); color: var(--text); }
.dash-pane { flex: 1; min-height: 0; overflow: hidden; }
.dash-pane.hidden { display: none; }
/* Health + Apps panes scroll their overflow (the shared .dash-pane clips it). */
#dashHealth, #dashRuntime, #dashPalworld, #dashApps { overflow-y: auto; padding: 16px; }
/* Desktop: use the wide screen — a generous (but readable) content column, and
   everything scaled up from the phone-first sizes. Mobile is untouched. */
@media (min-width: 561px) {
  #dashHealth, #dashRuntime, #dashPalworld, #dashApps { padding: 30px max(24px, calc((100% - 1180px) / 2)); }
  .dash-section { margin-bottom: 30px; }
  .dash-section h3 { font-size: 13px; margin-bottom: 14px; }

  /* Health cards + gauges bigger */
  .st-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
  .st-card { padding: 14px 16px; }
  .st-name { font-size: 15px; }
  .st-meta { font-size: 13px; }
  .gauge-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
  .gauge-card { padding: 22px 12px; }
  .gauge { width: 120px; height: 120px; }
  .gauge-pct { font-size: 17px; }
  .gauge-label { font-size: 15px; }
  .gauge-sub { font-size: 13px; }
  .load-card .load-bars, .lbar-track { height: 120px; }
  .poke-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .pk-stat { padding: 18px 10px; }
  .pk-stat b { font-size: 26px; }
  .pk-stat span { font-size: 12px; }

  /* App detail scaled up */
  .app-dhead { gap: 16px; margin-bottom: 28px; }
  .app-mono.lg { width: 58px; height: 58px; border-radius: 16px; font-size: 26px; }
  .app-htitle { font-size: 26px; }
  .app-htag { font-size: 15px; }
  .app-hmetatext { font-size: 14px; }
  .app-rows { gap: 10px; }
  .app-row { padding: 15px 16px; gap: 16px; }
  .app-mono { width: 46px; height: 46px; font-size: 20px; }
  .app-rname { font-size: 17px; }
  .app-rmeta { font-size: 13.5px; }
  .app-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .app-stats .pk-stat { min-height: 96px; }
  .app-stats .pk-stat b { font-size: 24px; }
  .app-stats .pk-stat.wide b { font-size: 18px; }
  .app-act { font-size: 14px; padding: 10px 16px; }
  .app-act .ic { width: 17px; height: 17px; }
  .app-vault-open { font-size: 15.5px; padding: 16px; }
  .app-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .app-link-row { font-size: 15px; padding: 14px 16px; }

  /* Doc reader text bigger + wider for comfortable reading */
  .vault-md, .brain-md { font-size: 16px; max-width: 820px; }
}

/* Logs pane: unit picker bar + scrollable monospace tail. */
#dashLogs { display: flex; flex-direction: column; min-height: 0; }
#dashLogs.hidden { display: none; }
.logs-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.logs-select { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; font-size: 13px; }
.logs-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); cursor: pointer; }
.logs-spacer { flex: 1; }
.logs-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; }
.log-row { display: flex; gap: 8px; padding: 1px 0; white-space: pre-wrap; word-break: break-word; }
.log-t { color: var(--faint); flex: none; }
.log-lvl { flex: none; font-weight: 700; min-width: 42px; }
.log-kv { color: var(--muted); }
.log-row.err .log-lvl, .log-row.err .log-msg { color: #f0506e; }
.log-row.warn .log-lvl { color: #e0a030; }
.log-row.info .log-lvl { color: var(--muted); }
.log-row.dim { color: var(--faint); }

.dash-section { margin-bottom: 22px; }
.dash-section h3 {
  margin: 0 0 10px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.st-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; text-decoration: none; color: var(--text);
}
a.st-card:hover { border-color: var(--accent); }
/* Name + dot + action buttons share the top row; status text gets its own row
   below so it never has to fight the name for space in a narrow grid column
   (that fight used to collapse names like "poke" down to "p"). */
.st-top { display: flex; align-items: center; gap: 8px; }
.st-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; }
.st-dot.up { background: #3ecf8e; box-shadow: 0 0 6px rgba(62,207,142,.6); }
.st-dot.down { background: #f0506e; box-shadow: 0 0 6px rgba(240,80,110,.6); }
.st-name { font-size: 14px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-meta { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 17px; }

.svc-btn {
  flex: none; width: 30px; height: 30px; padding: 0; border-radius: 8px;
  display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
  cursor: pointer; transition: color .12s, border-color .12s;
}
.svc-btn .ic { width: 15px; height: 15px; }
.svc-btn:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.svc-btn.stop:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }
.svc-btn.start:hover:not(:disabled) { color: #3ecf8e; border-color: #3ecf8e; }
.svc-btn:disabled { opacity: .5; cursor: default; }
.svc-btn.busy { animation: svc-pulse .9s ease-in-out infinite; }
@keyframes svc-pulse { 0%, 100% { opacity: .4; } 50% { opacity: .85; } }
/* ↗ affordance on linkable Site cards */
.st-ext { margin-left: auto; color: var(--faint); font-size: 13px; flex: none; }
a.st-card:hover .st-ext { color: var(--accent); }

.poke-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pk-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.pk-stat b { font-size: 20px; font-variant-numeric: tabular-nums; }
.pk-stat span { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.pw-players { margin-top: 8px; font-size: 13px; color: var(--muted); }

/* Resources: radial gauges (disk/memory) + load bar-trio */
.gauge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.gauge-card { display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.gauge { width: 96px; height: 96px; }
.gauge-track { fill: none; stroke: var(--surface-3); stroke-width: 7; }
.gauge-fill { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.gauge.warm .gauge-fill { stroke: #e0a83a; }
.gauge.hot .gauge-fill { stroke: #f0506e; }
.gauge-pct { fill: var(--text); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gauge-label { font-size: 13px; font-weight: 600; margin-top: 4px; }
.gauge-sub { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.load-card .load-bars { display: flex; align-items: flex-end; gap: 10px; height: 96px; padding: 6px 0; }
.lbar { display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; justify-content: flex-end; }
.lbar-val { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lbar-track { width: 12px; flex: 1; min-height: 0; background: var(--surface-3); border-radius: 999px; display: flex; align-items: flex-end; overflow: hidden; }
.lbar-fill { width: 100%; background: var(--accent-2); border-radius: 999px; transition: height .4s ease; }
.lbar small { font-size: 10px; color: var(--faint); }
.dash-err { padding: 16px; color: #f0506e; font-size: 14px; }

/* Overall status strip at the top of the Health pane. */
.dash-status { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 10px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; border: 1px solid var(--border); }
.dash-status .ds-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dash-status .ds-ts { margin-left: auto; color: var(--faint); font-weight: 400; font-variant-numeric: tabular-nums; }
.dash-status.ok { color: #3ecf8e; background: rgba(62, 207, 142, .1); border-color: rgba(62, 207, 142, .32); }
.dash-status.ok .ds-dot { background: #3ecf8e; box-shadow: 0 0 6px rgba(62, 207, 142, .6); }
.dash-status.bad { color: #f0506e; background: rgba(240, 80, 110, .12); border-color: rgba(240, 80, 110, .32); }
.dash-status.bad .ds-dot { background: #f0506e; box-shadow: 0 0 6px rgba(240, 80, 110, .6); }

/* Runtime: a config-backed control plane over live ports, systemd, Docker,
   timers, and Prometheus. Dense enough for ops, calm enough for a phone. */
.runtime-loading { min-height: 50vh; display: grid; place-items: center; color: var(--faint); font-size: 14px; }
.rt-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px; padding: 22px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 20px;
  background: radial-gradient(500px 220px at 85% -20%, rgba(124,108,255,.25), transparent 70%), var(--surface);
}
.rt-hero::after { content: ""; position: absolute; width: 180px; height: 180px; right: -100px; bottom: -120px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 50%; pointer-events: none; }
.rt-hero.ok { border-color: rgba(62,207,142,.28); }
.rt-hero.attention { border-color: rgba(240,80,110,.38); background:
  radial-gradient(500px 220px at 85% -20%, rgba(240,80,110,.18), transparent 70%), var(--surface); }
.rt-hero-copy { min-width: 0; }
.rt-eyebrow { display: block; margin-bottom: 7px; color: var(--accent-2); font: 700 10px var(--mono);
  letter-spacing: .11em; text-transform: uppercase; }
.rt-hero h2 { margin: 0; font-size: clamp(22px, 4vw, 32px); line-height: 1.05; letter-spacing: -.035em; }
.rt-hero p { max-width: 650px; margin: 9px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.rt-refresh { align-self: start; width: 38px; height: 38px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--border); border-radius: 11px; background: rgba(255,255,255,.04); color: var(--muted); }
.rt-refresh:hover { border-color: var(--accent); color: var(--text); }
.rt-refresh .ic { width: 17px; height: 17px; }
.rt-refresh.busy .ic { animation: rt-spin .8s linear infinite; }
@keyframes rt-spin { to { transform: rotate(360deg); } }
.rt-summary { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rt-summary button { min-width: 0; display: flex; align-items: baseline; gap: 7px; padding: 10px 11px;
  text-align: left; border: 1px solid rgba(255,255,255,.07); border-radius: 11px; background: rgba(0,0,0,.16); color: var(--text); }
.rt-summary button:hover { border-color: var(--accent); }
.rt-summary button.warn { border-color: rgba(240,80,110,.32); }
.rt-summary b { font-size: 19px; font-variant-numeric: tabular-nums; }
.rt-summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); font-size: 11px; }
.rt-nav { position: sticky; top: -16px; z-index: 2; display: flex; gap: 5px; margin: 0 -4px 20px; padding: 8px 4px;
  overflow-x: auto; scrollbar-width: none; background: linear-gradient(#0b0b11 80%, transparent); }
.rt-nav::-webkit-scrollbar { display: none; }
.rt-nav-btn { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid transparent;
  border-radius: 10px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 650; }
.rt-nav-btn small { min-width: 18px; padding: 2px 5px; border-radius: 999px; background: var(--surface-2); color: var(--faint);
  font-size: 9px; text-align: center; font-variant-numeric: tabular-nums; }
.rt-nav-btn.active { border-color: var(--border); background: var(--surface); color: var(--text); }
.rt-nav-btn.active small { background: color-mix(in srgb, var(--accent) 20%, var(--surface-2)); color: var(--accent-2); }
.rt-body { min-height: 180px; }
.rt-section { margin-bottom: 25px; }
.rt-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.rt-section-head h3 { margin: 0 0 3px; color: var(--text); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.rt-section-head p { margin: 0; color: var(--faint); font-size: 11.5px; line-height: 1.4; }
.rt-list { display: grid; gap: 7px; }
.rt-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-width: 0; padding: 12px 13px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.rt-row.attention { border-color: rgba(240,80,110,.28); background: linear-gradient(90deg, rgba(240,80,110,.055), var(--surface) 35%); }
.rt-main { min-width: 0; }
.rt-titleline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.rt-titleline > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.rt-meta { margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font: 11.5px var(--mono); }
.rt-secondary, .rt-description { margin: 5px 0 0; color: var(--faint); font-size: 11.5px; line-height: 1.4; }
.rt-image { margin-top: 5px; color: var(--faint); font: 10.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-state-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.rt-state-dot.up { background: #3ecf8e; box-shadow: 0 0 7px rgba(62,207,142,.45); }
.rt-state-dot.down { background: #f0506e; box-shadow: 0 0 7px rgba(240,80,110,.38); }
.rt-badge { flex: none; display: inline-flex; align-items: center; max-width: 150px; padding: 3px 7px; border: 1px solid var(--border);
  border-radius: 999px; color: var(--faint); background: var(--surface-2); font: 700 9px var(--mono); text-transform: uppercase; letter-spacing: .035em; }
.rt-badge.production { color: #63dca4; border-color: rgba(62,207,142,.28); background: rgba(62,207,142,.08); }
.rt-badge.development { color: #a99fff; border-color: rgba(124,108,255,.35); background: rgba(124,108,255,.1); }
.rt-badge.unknown { color: #ff8b98; border-color: rgba(240,80,110,.35); background: rgba(240,80,110,.1); }
.rt-badge.exposure, .rt-badge.scope { color: #a7acc3; }
.rt-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.rt-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text); font-size: 11.5px;
  font-weight: 650; text-decoration: none; white-space: nowrap; }
.rt-action:hover:not(:disabled) { border-color: var(--accent); }
.rt-action .ic { width: 13px; height: 13px; }
.rt-action.subtle { background: transparent; color: var(--muted); }
.rt-action.positive { color: #63dca4; }
.rt-action.danger, .rt-action.danger-ghost { color: #ff7c8c; }
.rt-action.danger { border-color: rgba(240,80,110,.48); background: rgba(240,80,110,.13); }
.rt-action:disabled, .rt-action.busy { opacity: .5; cursor: default; }
.rt-managed { padding: 5px 8px; color: var(--faint); font: 700 9px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.rt-port-num { width: 50px; display: flex; flex-direction: column; align-items: flex-start; }
.rt-port-num small { color: var(--faint); font: 700 8px var(--mono); letter-spacing: .08em; }
.rt-port-num b { margin-top: 1px; font: 700 17px var(--mono); font-variant-numeric: tabular-nums; }
.rt-detail { margin-top: 5px; min-width: 0; }
.rt-detail summary { width: fit-content; color: var(--faint); font-size: 10.5px; cursor: pointer; }
.rt-detail code, .rt-detail span { display: block; margin-top: 6px; padding: 7px 9px; overflow: auto; border-radius: 7px;
  background: #111119; color: #bfc0cf; font: 10.5px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.rt-detail span { margin-top: 2px; color: var(--faint); }
.rt-proc-meta { display: block; margin-top: 5px; color: var(--faint); font-size: 10.5px; }
.rt-drift { display: flex; align-items: center; gap: 5px; margin-top: 7px; color: #ff8594; font-size: 11px; }
.rt-drift .ic { width: 13px; height: 13px; }
.rt-empty { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 24px; border: 1px dashed var(--border); border-radius: 15px; color: var(--faint); text-align: center; }
.rt-empty.compact { min-height: 90px; }
.rt-empty-mark { width: 28px; height: 28px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 50%;
  background: rgba(62,207,142,.1); color: #63dca4; }
.rt-empty b { color: var(--text); font-size: 13px; }
.rt-empty span { font-size: 11.5px; }
.rt-alerts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.rt-alert { padding: 13px; border: 1px solid rgba(240,80,110,.3); border-radius: 13px; background: rgba(240,80,110,.06); }
.rt-alert > div { display: flex; align-items: center; gap: 7px; }
.rt-alert b { font-size: 13px; }
.rt-alert p { margin: 8px 0 5px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.rt-alert > span { color: var(--faint); font-size: 10px; }
.rt-target-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.rt-target { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.rt-target.attention { border-color: rgba(240,80,110,.3); }
.rt-target > div { display: flex; align-items: center; gap: 7px; }
.rt-target b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.rt-target code { display: block; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 10.5px; }
.rt-target p, .rt-target > span { display: block; margin: 6px 0 0; color: var(--faint); font-size: 10.5px; line-height: 1.4; }
.rt-timeline { border-left: 1px solid var(--border); margin-left: 5px; padding-left: 17px; }
.rt-timeline article { position: relative; display: flex; gap: 10px; padding: 0 0 17px; }
.rt-timeline .rt-state-dot { position: absolute; left: -22px; top: 3px; }
.rt-timeline article > div { min-width: 0; }
.rt-timeline b { display: block; font-size: 12.5px; }
.rt-timeline span { display: block; margin-top: 3px; color: var(--faint); font-size: 10.5px; }
.rt-timeline code { display: block; max-width: 760px; margin-top: 6px; padding: 7px 9px; border-radius: 7px; background: #111119;
  color: var(--muted); font: 10.5px/1.4 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.rt-config { display: flex; align-items: center; gap: 7px; margin: 28px 0 5px; padding-top: 13px; border-top: 1px solid var(--border);
  color: var(--faint); font: 10px/1.4 var(--mono); overflow-wrap: anywhere; }
.rt-config .ic { flex: none; width: 13px; height: 13px; }
.rt-config.bad { color: #ff7c8c; }
.rt-config.bad span { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 700px) {
  .rt-hero { padding: 18px 15px 15px; }
  .rt-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt-nav { top: -16px; margin-bottom: 15px; }
  .rt-row { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px; }
  .rt-actions { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
  .rt-port .rt-actions { grid-column: 2; }
  .rt-action { min-height: 34px; }
  .rt-section-head { align-items: flex-start; }
  .rt-port-num { width: 43px; }
  .rt-port-num b { font-size: 15px; }
}

/* Palworld: a purpose-built game-server console over the official REST API.
   The warmer palette distinguishes game operations from the purple infra UI. */
#hcPalworld .hc-ico { color: #f6c85f; background: rgba(246,200,95,.12); }
#dashPalworld {
  --pw-gold: #f6c85f; --pw-teal: #58d6c6; --pw-ink: #10171b;
  background: radial-gradient(700px 420px at 85% -80px, rgba(88,214,198,.08), transparent 70%);
}
.pw-hero {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-start; gap: 18px;
  min-height: 176px; margin-bottom: 12px; padding: 27px 28px; border: 1px solid rgba(88,214,198,.23);
  border-radius: 22px; background:
    linear-gradient(112deg, rgba(23,43,48,.93), rgba(18,25,31,.98) 60%), var(--surface);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 18px 55px rgba(0,0,0,.16);
}
.pw-hero::before { content: ""; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(350px 190px at 78% 12%, rgba(246,200,95,.12), transparent 70%); }
.pw-hero.offline { border-color: rgba(240,80,110,.3); filter: saturate(.8); }
.pw-hero-copy { position: relative; z-index: 1; flex: 1; min-width: 0; }
.pw-kicker, .pw-label { color: var(--pw-teal); font: 750 9.5px var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.pw-titleline { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; margin-top: 10px; }
.pw-titleline h2 { margin: 0; font-size: clamp(25px, 4vw, 38px); line-height: 1.05; letter-spacing: -.04em; }
.pw-live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid rgba(88,214,198,.27);
  border-radius: 999px; background: rgba(88,214,198,.08); color: #92e8dd; font: 700 9px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.pw-live-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--pw-teal); box-shadow: 0 0 8px rgba(88,214,198,.8); }
.pw-offline .pw-live-pill, .pw-hero.offline .pw-live-pill { color: #ff8d9b; border-color: rgba(240,80,110,.3); background: rgba(240,80,110,.08); }
.pw-hero.offline .pw-live-pill i { background: #f0506e; box-shadow: 0 0 8px rgba(240,80,110,.65); }
.pw-hero p { max-width: 680px; margin: 11px 0 0; color: #abb9bd; font-size: 13.5px; line-height: 1.45; }
.pw-version { margin-top: 13px; color: #708186; font: 10.5px var(--mono); }
.pw-icon-btn { position: relative; z-index: 2; flex: none; width: 39px; height: 39px; display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(255,255,255,.11); border-radius: 12px; background: rgba(0,0,0,.16); color: #a5b4b8; }
.pw-icon-btn:hover { color: #fff; border-color: rgba(88,214,198,.5); }
.pw-icon-btn .ic { width: 16px; height: 16px; }
.pw-icon-btn.busy .ic { animation: rt-spin .8s linear infinite; }
.pw-orbit { position: absolute; right: 32px; bottom: -88px; width: 250px; height: 250px; border: 1px solid rgba(88,214,198,.13); border-radius: 50%; }
.pw-orbit::before, .pw-orbit::after { content: ""; position: absolute; inset: 30px; border: 1px solid rgba(246,200,95,.1); border-radius: 50%; }
.pw-orbit::after { inset: 65px; border-color: rgba(88,214,198,.13); }
.pw-orbit span { position: absolute; width: 13px; height: 13px; left: 28px; top: 50px; border: 2px solid var(--pw-gold); border-radius: 50%; box-shadow: 0 0 15px rgba(246,200,95,.35); }
.pw-orbit i { position: absolute; width: 6px; height: 6px; right: 45px; top: 69px; border-radius: 50%; background: var(--pw-teal); }

.pw-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; margin-bottom: 12px; }
.pw-metric { min-width: 0; padding: 13px 14px; border: 1px solid var(--border); border-radius: 14px; background: rgba(24,24,34,.88); }
.pw-metric b { display: block; overflow: hidden; text-overflow: ellipsis; color: #f3f4f6; font-size: 17px; line-height: 1.15;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.pw-metric > span { display: block; margin-top: 6px; color: #8d969f; font-size: 9.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.pw-metric small { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; color: #5f6b74; font-size: 9.5px; white-space: nowrap; }
.pw-layout { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(280px, .82fr); align-items: start; gap: 12px; }
.pw-layout > div, .pw-layout > aside { min-width: 0; }
.pw-panel { margin-bottom: 12px; padding: 17px; border: 1px solid var(--border); border-radius: 17px; background: rgba(24,24,34,.88); }
.pw-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.pw-panel-head h3 { margin: 5px 0 0; font-size: 16px; letter-spacing: -.015em; }
.pw-safe, .pw-count { padding: 4px 7px; border-radius: 999px; background: rgba(88,214,198,.08); color: #83dcd1;
  font: 700 8px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.pw-count { color: #9aa5ae; background: var(--surface-2); }
.pw-announce-label { display: block; margin-bottom: 6px; color: #808b94; font-size: 10.5px; font-weight: 650; }
.pw-announce-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.pw-announce-row textarea { width: 100%; min-height: 62px; resize: vertical; padding: 11px 12px; border: 1px solid var(--border); border-radius: 11px;
  outline: none; background: #11151b; color: var(--text); font: 13px/1.4 var(--font); }
.pw-announce-row textarea:focus { border-color: rgba(88,214,198,.6); box-shadow: 0 0 0 3px rgba(88,214,198,.07); }
.pw-primary { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 68px;
  padding: 8px 12px; border: 0; border-radius: 11px; background: linear-gradient(145deg, #4fc6b8, #3ba79b); color: #071411; font-size: 10px; font-weight: 800; }
.pw-primary:hover { filter: brightness(1.08); }
.pw-primary .ic { width: 17px; height: 17px; }
.pw-primary:disabled, .pw-primary.busy { opacity: .55; }
.pw-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 9px; }
.pw-controls > button { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 56px; padding: 9px 10px; text-align: left;
  border: 1px solid var(--border); border-radius: 11px; background: #171a22; color: var(--text); }
.pw-controls > button:hover { border-color: rgba(88,214,198,.45); background: #1b2028; }
.pw-controls > button.caution:hover { border-color: rgba(246,200,95,.5); }
.pw-controls .ic { flex: none; width: 16px; height: 16px; color: var(--pw-gold); }
.pw-controls button > span { min-width: 0; }
.pw-controls b, .pw-controls small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-controls b { font-size: 10.5px; }
.pw-controls small { margin-top: 3px; color: #69737c; font-size: 8.5px; }
.pw-controls button.busy { opacity: .55; }

.pw-player-list { display: grid; gap: 6px; }
.pw-player { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px;
  border: 1px solid rgba(255,255,255,.065); border-radius: 12px; background: #151820; }
.pw-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg, rgba(246,200,95,.18), rgba(88,214,198,.1));
  color: #f8d982; font-size: 14px; font-weight: 800; }
.pw-player-main { min-width: 0; }
.pw-player-main > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.pw-player-main b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; white-space: nowrap; }
.pw-player-main span { color: var(--pw-gold); font: 700 8.5px var(--mono); text-transform: uppercase; }
.pw-player-main small { display: block; margin-top: 4px; color: #6e7881; font-size: 9.5px; }
.pw-player-actions { display: flex; gap: 5px; }
.pw-player-actions button, .pw-small-btn { min-height: 29px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); color: #b2bac1; font-size: 9.5px; font-weight: 700; }
.pw-player-actions button:hover, .pw-small-btn:hover { border-color: rgba(88,214,198,.45); color: #fff; }
.pw-player-actions button.danger { color: #ff8795; }
.pw-player-actions button.danger:hover { border-color: rgba(240,80,110,.5); }
.pw-empty { min-height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #68737c; text-align: center; }
.pw-empty.compact { min-height: 85px; }
.pw-empty b { color: #bbc1c7; font-size: 12px; }
.pw-empty small { font-size: 10.5px; }
.pw-empty-orb { width: 25px; height: 25px; margin-bottom: 3px; border: 1px solid rgba(88,214,198,.35); border-radius: 50%; box-shadow: inset 0 0 0 6px rgba(88,214,198,.05); }

.pw-activity { display: grid; gap: 1px; }
.pw-activity article { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.045); }
.pw-activity article:last-child { border-bottom: 0; }
.pw-event-icon { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2);
  color: #8d969f; font: 700 13px var(--mono); }
.pw-event-icon.join { color: var(--pw-teal); background: rgba(88,214,198,.09); }
.pw-event-icon.leave { color: #f0b76c; background: rgba(246,200,95,.08); }
.pw-activity article > div { min-width: 0; }
.pw-activity b, .pw-activity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-activity b { font-size: 10.5px; font-weight: 650; }
.pw-activity small { margin-top: 3px; color: #626d75; font-size: 8.5px; }
.pw-settings { max-height: 300px; margin: 0; overflow-y: auto; scrollbar-width: thin; }
.pw-settings > div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 1px; border-bottom: 1px solid rgba(255,255,255,.045); }
.pw-settings > div:last-child { border-bottom: 0; }
.pw-settings dt { color: #727d86; font-size: 9.5px; }
.pw-settings dd { margin: 0; color: #c3c8cd; font: 650 9.5px var(--mono); text-align: right; }
.pw-world-intro { padding: 2px 0 3px; color: #727d86; font-size: 10.5px; line-height: 1.5; }
.pw-world-meta { margin-bottom: 9px; color: #69747d; font: 9px var(--mono); }
.pw-world-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pw-world-grid > div { min-width: 0; padding: 8px 9px; border-radius: 9px; background: #151820; }
.pw-world-grid b { display: block; color: var(--pw-gold); font-size: 14px; }
.pw-world-grid span { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; color: #69747d; font-size: 8.5px; white-space: nowrap; }
.pw-footnote { padding: 6px 2px 1px; color: #505b64; font: 9px/1.5 var(--mono); text-align: center; }

.pw-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.pw-tab { padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: rgba(24,24,34,.7);
  color: #8d969f; font-size: 11px; font-weight: 650; cursor: pointer; }
.pw-tab.active { border-color: rgba(88,214,198,.4); background: rgba(88,214,198,.09); color: var(--pw-teal); }
.pw-event-icon.server { color: #9b8dff; background: rgba(124,108,255,.1); }

.pw-chat { display: grid; gap: 2px; }
.pw-chat-day { display: flex; align-items: center; gap: 10px; padding: 10px 0 5px; color: #626d75; font: 650 9px var(--mono);
  text-transform: uppercase; letter-spacing: .08em; }
.pw-chat-day::before, .pw-chat-day::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.05); }
.pw-chat-msg { display: flex; gap: 9px; padding: 6px 0; }
.pw-chat-avatar { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px;
  background: hsl(var(--pw-hue) 45% 55% / .16); border: 1px solid hsl(var(--pw-hue) 45% 62% / .35);
  color: hsl(var(--pw-hue) 60% 74%); font-size: 11px; font-weight: 700; }
.pw-chat-body { min-width: 0; }
.pw-chat-meta { display: flex; align-items: baseline; gap: 7px; }
.pw-chat-meta b { color: hsl(var(--pw-hue) 42% 72%); font-size: 10.5px; font-weight: 700; }
.pw-chat-meta span { color: #58636c; font-size: 8.5px; }
.pw-chat-msg p { margin: 2px 0 0; color: #c9ced3; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.pw-chat-older { display: block; margin: 10px auto 0; }

.pw-range { display: flex; gap: 6px; margin-bottom: 12px; }
.pw-lb { display: grid; gap: 9px; }
.pw-lb-head { display: flex; align-items: baseline; gap: 8px; }
.pw-lb-head > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 650; }
.pw-lb-head > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #626d75; font-size: 8.5px; }
.pw-lb-time { color: var(--pw-teal); font: 700 11px var(--mono); }
.pw-lb-bar { height: 5px; margin-top: 4px; border-radius: 4px; background: rgba(255,255,255,.05); overflow: hidden; }
.pw-lb-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, rgba(88,214,198,.5), var(--pw-teal)); }
.pw-online-dot { display: inline-block; width: 6px; height: 6px; margin: 0 5px 1px 0; border-radius: 50%; background: #39d98a;
  box-shadow: 0 0 6px rgba(57,217,138,.7); }
.pw-chart { display: block; width: 100%; height: 110px; }
.pw-chart-meta { display: flex; gap: 14px; margin-bottom: 7px; color: #727d86; font-size: 9.5px; }
.pw-chart-meta b { color: #c3c8cd; font: 700 10px var(--mono); }
.pw-axis { display: flex; justify-content: space-between; margin-top: 5px; color: #58636c; font: 8.5px var(--mono); }
.pw-webhook { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.05); }
.pw-webhook-state { width: 7px; height: 7px; border-radius: 50%; background: #454b58; }
.pw-webhook-state.on { background: #39d98a; box-shadow: 0 0 6px rgba(57,217,138,.6); }
.pw-webhook-label { flex: 1; color: #8d969f; font-size: 10.5px; }
.pw-webhook-label b { color: #c3c8cd; }
.pw-safe.warn { color: #f0b76c; border-color: rgba(246,200,95,.35); }
.pw-pal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; margin-bottom: 12px; }
.pw-pal-card { margin-bottom: 0; }
.pw-pal-head { display: flex; align-items: center; gap: 10px; }
.pw-pal-head > div { flex: 1; min-width: 0; }
.pw-pal-head b { display: block; font-size: 13px; }
.pw-pal-head small { color: #727d86; font-size: 9px; }
.pw-pal-count { color: var(--pw-teal); font: 700 11px var(--mono); white-space: nowrap; }
.pw-pal-stats { margin: 9px 0 0; color: #8d969f; font-size: 10px; }
.pw-pal-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.pw-pal-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: #151820; color: #b9bfc6; font-size: 9.5px; }
.pw-pal-chip i { color: #727d86; font-style: normal; }
.pw-guilds { display: grid; gap: 1px; }
.pw-guild-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.045); }
.pw-guild-row:last-child { border-bottom: 0; }
.pw-guild-row > div { flex: 1; min-width: 0; }
.pw-guild-row b { display: block; font-size: 11.5px; }
.pw-guild-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #626d75; font-size: 8.5px; margin-top: 2px; }
.pw-guild-row > span { color: #8d969f; font: 650 9.5px var(--mono); white-space: nowrap; }
.pw-guild-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 3px;
  background: hsl(var(--pw-hue) 50% 60% / .85); box-shadow: 0 0 6px hsl(var(--pw-hue) 60% 55% / .5); }
.pw-map-wrap { position: relative; }
.pw-map { display: block; width: 100%; height: auto; max-height: 74vh; touch-action: none; cursor: grab; }
.pw-map:active { cursor: grabbing; }
.pw-map-controls { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; }
.pw-map-controls button { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 10px;
  background: rgba(16,19,27,.88); color: #c3c8cd; font-size: 16px; font-weight: 700; cursor: pointer; }
.pw-map-controls button:hover { border-color: rgba(88,214,198,.4); color: var(--pw-teal); }
.pw-map-bg { fill: #10131b; stroke: rgba(255,255,255,.07); }
.pw-map-grid line { stroke: rgba(255,255,255,.04); stroke-width: 2; }
.pw-map-grid .pw-map-axis { stroke: rgba(255,255,255,.1); stroke-dasharray: 14 14; }
.pw-map-base { fill: hsl(var(--pw-hue) 50% 58% / .8); stroke: #0c0e14; stroke-width: 6; }
.pw-map-player circle { fill: #39d98a; stroke: #0c0e14; stroke-width: 8; }
.pw-map-player text { fill: #d9dee3; font-size: 72px; font-weight: 650; text-anchor: middle; paint-order: stroke; stroke: #0c0e14; stroke-width: 14; }
.pw-map-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.pw-map-legend span { display: inline-flex; align-items: center; gap: 6px; color: #8d969f; font-size: 9.5px; }
.pw-map-counts { margin-top: 7px; color: #58636c; font: 9px var(--mono); }
.pw-warnings { display: grid; gap: 6px; margin-bottom: 11px; }
.pw-warnings > div { padding: 8px 10px; border: 1px solid rgba(246,200,95,.25); border-radius: 9px;
  background: rgba(246,200,95,.06); color: #e8c88a; font-size: 10.5px; line-height: 1.45; }

@media (max-width: 900px) {
  .pw-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pw-layout { grid-template-columns: 1fr; }
  .pw-layout > aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .pw-layout > aside .pw-panel { margin-bottom: 0; }
  .pw-layout > aside .pw-panel:last-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .pw-hero { min-height: 155px; padding: 21px 17px; }
  .pw-orbit { right: -80px; opacity: .65; }
  .pw-titleline { padding-right: 28px; }
  .pw-hero p { max-width: 88%; font-size: 12px; }
  .pw-icon-btn { width: 36px; height: 36px; margin-right: -2px; }
  .pw-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-metric { padding: 11px 12px; }
  .pw-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-layout > aside { display: block; }
  .pw-layout > aside .pw-panel { margin-bottom: 12px; }
  .pw-player { grid-template-columns: auto minmax(0, 1fr); }
  .pw-player-actions { grid-column: 2; justify-content: flex-start; }
}

/* Brain tab: file tree + reader, two columns. */
#dashBrain { display: flex; }
.brain-sidebar {
  flex: 0 0 260px; display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--border);
}
.brain-search {
  margin: 10px; padding: 9px 12px; flex: 0 0 auto;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; font-size: 14px; outline: none;
}
.brain-search:focus { border-color: var(--accent); }
.brain-tree { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 12px; }
.brain-dir {
  padding: 10px 8px 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--faint);
}
.brain-file {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border: none; border-radius: 8px;
  background: transparent; color: var(--text); font-size: 13.5px;
}
.brain-file:hover { background: var(--surface-2); }
.brain-file.active { background: var(--surface-3); }
.bf-name { display: block; font-weight: 500; }
.bf-snip { display: block; font-size: 11.5px; color: var(--faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brain-empty, .brain-loading { padding: 16px 12px; color: var(--faint); font-size: 13px; }
.brain-reader { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px; }
.brain-path { font: 600 12px var(--mono); color: var(--accent-2); margin-bottom: 12px; }
.brain-md { max-width: 760px; line-height: 1.55; }
.brain-md .md-h { margin: 16px 0 8px; font-weight: 700; }
.brain-md h3.md-h { font-size: 19px; }
.brain-md h4.md-h { font-size: 16px; color: var(--accent-2); }
.brain-md p { margin: 0 0 10px; }
.brain-md ul, .brain-md ol { margin: 8px 0; padding-left: 22px; }
.brain-md li { margin: 3px 0; }
.brain-md code.inline { font-family: var(--mono); font-size: 12.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
.brain-md a { color: var(--accent-2); }

@media (max-width: 560px) {
  .brain-sidebar { flex-basis: 150px; }
  .brain-reader { padding: 14px; }
  .poke-stats { grid-template-columns: repeat(2, 1fr); }
}

/* floating turn control: "Stop" while a reply streams, "Undo" during the send
   window. Rides the right end of .turn-bar, just above the composer. */
.turn-fab {
  display: block; margin: 2px 0 6px auto;
  padding: 6px 18px 6px 30px; position: relative;
  font-size: 13px; font-weight: 600; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  animation: fabIn .16s ease;
}
.turn-fab.hidden { display: none; }
.turn-fab::before { /* a small square "stop" glyph */
  content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 2px; background: var(--danger);
}
.turn-fab.undo::before { /* an undo arrow instead */
  content: "↩"; width: auto; height: auto; background: none;
  color: var(--accent-2); font-size: 13px; border-radius: 0;
}
.turn-fab:hover { border-color: var(--accent); }
.turn-fab:active { transform: scale(.97); }
@keyframes fabIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- import terminal session picker ---- */
.import-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.import-box {
  width: 100%; max-width: 520px; max-height: 80vh;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.import-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.import-close {
  background: transparent; border: 0; color: var(--muted);
  font-size: 16px; cursor: pointer; line-height: 1;
}
.import-close:hover { color: var(--text); }
.import-sub {
  padding: 10px 16px; font-size: 12.5px; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.import-list { overflow-y: auto; padding: 6px; }
.import-row {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; margin: 2px 0;
  background: transparent; border: 0; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text);
}
.import-row:hover { background: var(--surface-2); }
.import-row.busy { opacity: 0.5; }
.import-row.imported { opacity: 0.62; }
.ir-title {
  font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ir-meta {
  display: flex; gap: 8px; margin-top: 3px;
  font-size: 11.5px; color: var(--faint);
}
.ir-cwd {
  font-family: var(--mono); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.ir-stat { white-space: nowrap; flex-shrink: 0; }

/* ---------------- sessions browser (owner-only) ---------------- */
.sess-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; margin-bottom: 8px; border-radius: 14px;
  background: var(--card, rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer; text-align: left;
}
.sess-row.live { border-color: rgba(74, 222, 128, 0.35); }
.sess-main { flex: 1; min-width: 0; }
.sess-title { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.sess-prov { opacity: 0.7; font-size: 12px; }
.sess-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-meta { display: flex; gap: 8px; margin-top: 3px; font-size: 12px; color: var(--muted, #9aa0ae); min-width: 0; }
.sess-cwd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.sess-stat { white-space: nowrap; }
.sess-badges { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.sess-badge {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.08); color: var(--muted, #9aa0ae); white-space: nowrap;
}
.sess-badge.live { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.sess-badge.attached { background: rgba(250, 204, 21, 0.12); color: #facc15; }
.sess-empty { padding: 32px 0; text-align: center; color: var(--muted, #9aa0ae); }
.sess-live-pill { font-size: 12px; color: #4ade80; white-space: nowrap; }
.watch-body { display: flex; flex-direction: column; gap: 2px; }
/* Per-chat settings chips: their own strip under the topbar, so the title row
   can never overflow. Scrolls sideways (scrollbar hidden) if it ever must. */
.chip-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; flex: 0 0 auto;
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip-row[hidden] { display: none; }
.chip-row .ws-chip { flex: 0 0 auto; }

/* ---------- Open-chat tabs ----------
   One tab per retained pane. Scrolls sideways rather than wrapping, so the strip
   is always exactly one row tall no matter how many chats are open. Only the
   active tab carries a ✕ — at 390px, six close buttons cost more width than
   they're worth, and closing a background chat is a two-tap job either way. */
.tab-strip {
  display: flex; align-items: stretch; gap: 4px;
  padding: 5px 10px; flex: 0 0 auto;
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
  scroll-behavior: smooth;
}
.tab-strip::-webkit-scrollbar { display: none; }
.tab-strip[hidden] { display: none; }

.ctab {
  flex: 0 0 auto;
  display: flex; align-items: center;
  max-width: 150px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color .12s, background .12s;
}
.ctab:hover { background: var(--surface-3); }
.ctab[data-agent-shape="geometric"] { border-radius: 6px; }
.ctab.active {
  border-color: var(--tab-agent, var(--accent)); background: var(--surface-3);
  box-shadow: inset 0 -2px color-mix(in srgb, var(--tab-agent, var(--accent)) 75%, transparent);
}

.ctab-open {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  background: none; border: 0;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.ctab.active .ctab-open { color: var(--text); }
.ctab.unread .ctab-open { color: var(--text); font-weight: 700; }
.ctab.attention {
  border-color: var(--tab-agent); background: color-mix(in srgb, var(--tab-agent) 13%, var(--surface-3));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tab-agent) 13%, transparent), inset 0 -3px var(--tab-agent);
}
.ctab.attention .ctab-open { color: var(--text); font-weight: 800; }
.ctab-prov {
  flex: 0 0 15px; width: 15px; height: 15px;
  display: grid; place-items: center;
  border: 1px solid; border-radius: 50%;
  font-size: 7px; line-height: 1;
}
.ctab-prov {
  color: var(--agent-accent-2); background: var(--agent-soft); border-color: var(--agent-border);
}
.ctab[data-agent-shape="geometric"] .ctab-prov { border-radius: 4px; font-size: 6px; }
.ctab-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctab-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--tab-agent, var(--accent)); }
.ctab.working .ctab-dot { background: var(--tab-agent, var(--accent-2)); animation: ciPulse 1s ease-in-out infinite; }
.ctab.attention .ctab-dot { animation: attentionPulse 1.6s ease-in-out infinite; }

.ctab-close {
  flex: 0 0 auto;
  padding: 4px 8px 4px 2px;
  background: none; border: 0;
  font-size: 11px; line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.ctab-close:hover { color: var(--text); }

/* Each open chat keeps its own transcript inside #messages; only one is shown.
   The pane reproduces the column layout the rows used to get from .messages
   directly, so wrapping them changes nothing visually. */
.msg-pane { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; }
.msg-pane[hidden] { display: none; }
.pane[data-agent-motion="breathe"] .msg-pane:not([hidden]) { animation: claudePaneIn .22s ease-out; }
.pane[data-agent-motion="step"] .msg-pane:not([hidden]) { animation: codexPaneIn .18s ease-out; }
@keyframes claudePaneIn {
  from { opacity: .45; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes codexPaneIn {
  from { opacity: .4; transform: translateX(4px); filter: saturate(.65); }
  to { opacity: 1; transform: translateX(0); filter: saturate(1); }
}

/* ---------- Workspace accents ----------
   Each workspace owns a hue. Chats carry it as a rail on their row and tab, so
   "which project is this" survives the title being cut to fourteen characters.
   One accent per workspace and nothing else tinted — on a dark UI, more than a
   rail and a glyph reads as confetti. */
.acc-violet { --acc: #7c6cff; }
.acc-cyan   { --acc: #22c1c3; }
.acc-amber  { --acc: #e0a33e; }
.acc-rose   { --acc: #e0566f; }
.acc-green  { --acc: #3fb950; }
.acc-blue   { --acc: #4b93f5; }
.acc-orange { --acc: #e07a3e; }
.acc-pink   { --acc: #d268c8; }

/* The rail. Drawn inside the row's own padding so it doesn't shift the text. */
.chat-row.acc-violet, .chat-row.acc-cyan, .chat-row.acc-amber, .chat-row.acc-rose,
.chat-row.acc-green, .chat-row.acc-blue, .chat-row.acc-orange, .chat-row.acc-pink {
  border-left: 3px solid var(--acc);
}
.ctab[class*="acc-"] { border-left: 3px solid var(--acc); }
.ctab[class*="acc-"].active { border-color: var(--acc); }
.ws-chip[class*="acc-"] { color: var(--acc); }
.ws-chip[class*="acc-"]:hover { border-color: var(--acc); }

/* Emoji sit before the name everywhere a chat is listed. Kept INLINE, not a
   flex item, inside .chat-title / .ci-title — both truncate with text-overflow,
   which a flex container can't do. */
.ci-emoji, .ct-emoji {
  display: inline-block;
  margin-right: 6px;
  font-size: 13px;
  line-height: 1;
}
.ct-emoji { font-size: 15px; }
/* The tab strip IS a flex row, so its glyph is a flex item and the row's own
   gap spaces it — a margin here would double up against the dot's spacing. */
.ctab-emoji { flex: 0 0 auto; font-size: 12px; line-height: 1; }

/* Colour picker in the workspace menu. */
.popmenu-swatches { display: flex; gap: 6px; padding: 8px 12px 10px; }
.swatch {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--acc);
  cursor: pointer;
  padding: 0;
}
.swatch.on { border-color: var(--text); }
.swatch:hover { transform: scale(1.12); }

/* ---------- Workspace directory picker ----------
   A sheet, not a dropdown: ~20 directories don't fit under a chip, and the list
   only grows. Bounded height with an internal scroll, a sticky filter, and one
   "Work" header instead of the prefix repeated on every row. */
.wsp-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.wsp-box {
  width: 100%; max-width: 460px; max-height: min(78vh, 620px);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.wsp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 15px; font-weight: 600; font-size: 15px;
  border-bottom: 1px solid var(--border);
}
.wsp-close { background: none; border: 0; color: var(--muted); font-size: 15px; cursor: pointer; line-height: 1; }
.wsp-close:hover { color: var(--text); }
.wsp-searchwrap { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.wsp-search {
  width: 100%; padding: 9px 12px;
  font: inherit; font-size: 14px;
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px;
  outline: none;
}
.wsp-search:focus { border-color: var(--accent); }
.wsp-list { overflow-y: auto; overscroll-behavior: contain; padding: 6px; -webkit-overflow-scrolling: touch; }
.wsp-list.empty::after {
  content: "No matching directories";
  display: block; padding: 18px 12px; text-align: center;
  color: var(--faint); font-size: 13px;
}
.wsp-group {
  padding: 10px 12px 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--faint);
}
.wsp-group[hidden], .wsp-row[hidden] { display: none; }
.wsp-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 10px 12px; margin: 1px 0; min-height: 44px;
  background: transparent; color: var(--text);
  border: 0; border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit; font-size: 14px;
  cursor: pointer;
}
.wsp-row:hover { background: var(--surface-2); }
.wsp-row.on { background: var(--surface-2); font-weight: 600; }
/* The bound workspace's accent, same rail as its chats wear in the drawer. */
.wsp-row[class*="acc-"] { border-left-color: var(--acc); }
.wsp-tick {
  flex: 0 0 auto; width: 18px;
  font-size: 13px; line-height: 1; text-align: center;
  color: var(--accent);
}
.wsp-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A chip, so a long server name can't squeeze out the directory name itself. */
.wsp-mcp {
  flex: 0 0 auto; max-width: 42%;
  padding: 2px 8px;
  font-size: 11px; font-weight: 600;
  color: var(--muted); background: var(--surface-3);
  border-radius: 999px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Top-of-pane affordance for scroll-up pagination. Also tappable, so a short
   chat (or a desktop wheel that never quite reaches the trigger) can page up. */
.pane-older {
  align-self: center;
  margin: 2px 0 4px;
  padding: 5px 14px;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.pane-older:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.pane-older:disabled { opacity: .6; cursor: default; }

/* Dashboard/terminal topbar buttons are desktop-only — on mobile they live on
   the Home cards instead. (display:none must also beat the JS hidden toggle.) */
@media (max-width: 560px) {
  .only-desktop { display: none !important; }
}

/* ---------------- native-app touch feel ---------------- */
/* No blue tap flash anywhere; no double-tap-zoom delay or long-press text
   selection on UI chrome. Message bubbles stay selectable (copyable). */
* { -webkit-tap-highlight-color: transparent; }
button, .tab, .home-card, .chat-item, .sess-row, .today-event, .import-row,
.popmenu-item, .tabbar, .topbar, .hv-head, .drawer-head {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------------- settings view ---------------- */
.set-section {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin: 6px 2px 10px;
}
.set-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  cursor: pointer;
}
.set-label { flex: 1; font-size: 14.5px; font-weight: 500; display: flex; flex-direction: column; gap: 2px; }
.set-label small { font-size: 12px; color: var(--muted); font-weight: 400; }
/* checkbox → switch */
.set-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto;
  width: 44px; height: 26px; border-radius: 999px; position: relative;
  background: var(--surface-3); border: 1px solid var(--border);
  transition: background .15s; cursor: pointer;
}
.set-row input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--muted); transition: transform .15s, background .15s;
}
.set-row input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.set-row input[type="checkbox"]:checked::after { transform: translateX(18px); background: #fff; }
.set-row input[type="checkbox"]:disabled { opacity: .45; }
.set-hint { font-size: 12.5px; color: var(--faint); padding: 6px 4px 0; line-height: 1.5; }
.set-action {
  flex: none; border: 0; border-radius: 9px; padding: 8px 13px;
  color: #fff; background: var(--accent); font-size: 13px; font-weight: 700;
}

@media (min-width: 561px) {
  .household-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  .household-grid .home-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* --- Apps tab (manifest-driven per-app pages) --- */
.st-dot.neutral { background: var(--muted); }

/* Per-app identity monogram (tint varies by app name — see appHue) */
.app-mono { flex: none; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; font-size: 17px; font-weight: 700; }
.app-mono.lg { width: 46px; height: 46px; border-radius: 13px; font-size: 20px; }

/* List: full-width rows (the old 2-col grid truncated names and wasted space) */
.app-rows { display: flex; flex-direction: column; gap: 8px; }
.app-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; color: var(--text); cursor: pointer; font: inherit;
  transition: border-color .12s, transform .05s; }
.app-row:hover { border-color: var(--accent); }
.app-row:active { transform: scale(.99); }
.app-rmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.app-rname { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-rmeta { font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-rside { flex: none; display: flex; align-items: center; gap: 6px; }
.app-rchev { flex: none; color: var(--faint); font-size: 20px; line-height: 1; }

/* Status pill — list rows + detail header */
.app-pill { flex: none; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  border: 1px solid transparent; text-transform: capitalize; }
.app-pill.up { color: #3ecf8e; background: rgba(62,207,142,.12); border-color: rgba(62,207,142,.3); }
.app-pill.down { color: #f0506e; background: rgba(240,80,110,.12); border-color: rgba(240,80,110,.3); }
.app-pill.neutral { color: var(--muted); background: var(--surface-2); border-color: var(--border); }

.app-badge { flex: none; background: var(--accent); color: #fff; font-size: 11px;
  font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center; }

.app-back { background: none; border: none; color: var(--accent); cursor: pointer;
  font: inherit; font-size: 14px; padding: 4px 2px; margin-bottom: 10px; }

/* Detail header — never clips: title wraps, Open is a flex:none chip that wraps below */
.app-dhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.app-htext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.app-htitle { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.app-htag { font-size: 13px; color: var(--muted); }
.app-hmeta { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.app-hmetatext { font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.app-open { flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--accent-2); text-decoration: none;
  padding: 8px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.app-open:hover { border-color: var(--accent); }

/* Live stat tiles — smaller than Health's; auto-fill so odd counts pack evenly */
.app-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.app-stats .pk-stat { padding: 14px 10px; min-height: 82px; justify-content: center; text-align: center; }
.app-stats .pk-stat b { font-size: 19px; line-height: 1.15; }
/* Long values (uptime, disk summary, version) get a wider tile + a calmer size
   so they wrap to ~2 lines instead of a cramped 4-line column. */
.app-stats .pk-stat.wide { grid-column: span 2; }
.app-stats .pk-stat.wide b { font-size: 15px; font-weight: 600; line-height: 1.3; }

/* Actions — leading icon + legible risk tier */
.app-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.app-act { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px;
  font-weight: 500; padding: 8px 13px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-3); color: var(--text);
  transition: border-color .12s; }
.app-act .ic { width: 15px; height: 15px; }
.app-act:hover:not(:disabled) { border-color: var(--accent); }
.app-act:disabled { opacity: .5; cursor: default; }
.app-act.busy { animation: svc-pulse .9s ease-in-out infinite; }
.app-act.tier-caution { color: #e0a83a; border-color: rgba(224,168,58,.4); }
.app-act.tier-caution:hover:not(:disabled) { border-color: #e0a83a; }
.app-act.tier-info { color: #6ba8f0; border-color: rgba(107,168,240,.4); }
.app-act.tier-info:hover:not(:disabled) { border-color: #6ba8f0; }
.app-act.tier-danger { color: #f0506e; border-color: rgba(240,80,110,.45); background: rgba(240,80,110,.08); }
.app-act.tier-danger:hover:not(:disabled) { border-color: #f0506e; }

.app-manual { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--muted);
  padding: 10px 12px; margin-top: 8px; border-radius: 10px;
  background: rgba(224,168,58,.08); border: 1px solid rgba(224,168,58,.3); }
.app-manual .ic { width: 15px; height: 15px; color: #e0a83a; flex: none; margin-top: 1px; }
.app-manual b { color: var(--text); font-weight: 600; }

/* Links — tidy stacked rows */
.app-links { display: flex; flex-direction: column; gap: 8px; }
.app-link-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); text-decoration: none; font-size: 14px; }
.app-link-row:hover { border-color: var(--accent); }
.app-lr-ext { color: var(--faint); font-size: 14px; }
.app-link-row:hover .app-lr-ext { color: var(--accent); }

.app-out { white-space: pre-wrap; word-break: break-word; background: var(--surface-3);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-top: 10px;
  font-size: 12px; line-height: 1.45; max-height: 320px; overflow: auto; }

/* App knowledge vault (docs/vault or vault) — reader reuses .brain-md styling */
.app-vault-open { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 13px 14px; margin-bottom: 22px; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--text); border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); transition: border-color .12s; }
.app-vault-open:hover { border-color: var(--accent); }
.app-vault-open .ic { width: 18px; height: 18px; color: var(--accent-2); flex: none; }
.app-vault-open > span:first-of-type { flex: 1; }
.app-vault-open .app-rchev { flex: none; }

.vault-list { display: flex; flex-direction: column; gap: 6px; }
.vault-dir { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--faint); margin: 14px 2px 4px; }
.vault-dir:first-child { margin-top: 0; }
.vault-file { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 11px 12px; cursor: pointer; font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; transition: border-color .12s; }
.vault-file:hover { border-color: var(--accent); }
.vault-file .ic { width: 15px; height: 15px; color: var(--faint); flex: none; }
.vf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vault-path { font: 600 12px var(--mono); color: var(--accent-2); margin: 2px 0 14px; word-break: break-all; }
.vault-md { padding-bottom: 24px; }

/* Obsidian [[wikilinks]] — clickable in-KB navigation (vault + brain readers) */
.wikilink { color: var(--accent-2); text-decoration: none; cursor: pointer;
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); }
.wikilink:hover { border-bottom-style: solid; }
.wikilink.missing { color: var(--faint); cursor: default; border-bottom: 1px dashed var(--border); }

/* Doc header (path + Edit) and the raw-markdown editor */
.vault-dochead, .vault-editbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.vault-dochead .vault-path, .vault-editbar .vault-path { margin: 0; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-btn { flex: none; font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer;
  transition: border-color .12s, background .12s; }
.vault-btn:hover { border-color: var(--accent); }
.vault-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.vault-btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.vault-btn:disabled { opacity: .6; cursor: default; }
.vault-edit { width: 100%; min-height: 62vh; resize: vertical; box-sizing: border-box;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px; font: 13px/1.6 var(--mono); }
.vault-edit:focus { outline: none; border-color: var(--accent); }
.vault-btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.vault-btn.danger:hover { background: #ff8080; border-color: #ff8080; }

/* Action confirm modal — shows exactly what will run before anything mutating. */
.act-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  padding: 20px; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.act-modal.hidden { display: none; }
.act-card { width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.act-title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.act-risk { font-size: 13.5px; color: var(--muted); margin-top: 8px; line-height: 1.45; }
.act-risk.danger { color: var(--danger); font-weight: 600; }
.act-cmd-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--faint); margin: 16px 0 6px; }
.act-cmd { margin: 0; background: var(--surface-3); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font: 12.5px/1.5 var(--mono); color: var(--text);
  white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow: auto; }
.act-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ---------- File viewer (web/file.html) ----------
   Standalone page for a URL that is a path on the box; shares the app's tokens
   but not its shell (no drawer/tabs), so everything here is .fv-*. */
/* One knob drives every body: the reading scale. The measure is derived from it,
   so bigger text gets a wider column instead of a narrower one, and Wide releases
   the cap for the times a table wants the whole window. */
.fv-body {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  --fv-base: 15px; --fv-scale: 1; --fv-fs: calc(var(--fv-base) * var(--fv-scale));
  --fv-measure: calc(var(--fv-fs) * 62);
}
.fv-body.fv-wide { --fv-measure: none; }
.fv-head {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: calc(var(--safe-top) + 10px) 14px 10px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.fv-home {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  font-size: 17px; color: var(--text); text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
}
.fv-titles { flex: 1; min-width: 0; }
.fv-name {
  margin: 0; font: 650 16px/1.3 var(--mono); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fv-crumbs { margin-top: 2px; font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.fv-crumbs::-webkit-scrollbar { display: none; }
.fv-crumbs a { color: var(--muted); text-decoration: none; }
.fv-sep { padding: 0 3px; color: var(--faint); }

.fv-bar {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: var(--bg); border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.fv-bar::-webkit-scrollbar { display: none; }
.fv-bar[hidden] { display: none; }
.fv-meta { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.fv-bar-sp { flex: 1; min-width: 8px; }
.fv-chip {
  flex: none; font-size: 12px; color: var(--muted); text-decoration: none; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px;
}
.fv-chip.on { color: var(--text); border-color: var(--accent); }
.fv-chip[hidden] { display: none; }
.fv-chip:disabled { opacity: .35; }

.fv-main { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 14px calc(var(--safe-bottom) + 40px); }
/* Every body sits on the measure and is centred: a wide desktop reads as a page,
   not as content pinned to the left edge with dead space beside it. */
.fv-md, .fv-code, .fv-entries, .fv-note { max-width: var(--fv-measure); margin-inline: auto; }

/* Code: one row per line so the gutter, wrapping and the :line target all work. */
.fv-code {
  font-family: var(--mono); font-size: calc(var(--fv-fs) * .8); line-height: 1.55;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 8px 0; overflow-x: auto;
}
.fv-row { display: grid; grid-template-columns: 52px 1fr; min-width: max-content; }
.fv-ln {
  position: sticky; left: 0; z-index: 1; text-align: right; padding: 0 10px 0 8px;
  color: var(--faint); background: var(--surface); text-decoration: none; user-select: none;
}
.fv-lc { white-space: pre; padding-right: 14px; }
.fv-row.target { background: rgba(124,108,255,.16); }
.fv-row.target .fv-ln {
  color: var(--accent-2); font-weight: 700;
  background: linear-gradient(rgba(124,108,255,.16), rgba(124,108,255,.16)), var(--surface);
}
.fv-code.wrap .fv-row { min-width: 0; }
.fv-code.wrap .fv-lc { white-space: pre-wrap; overflow-wrap: anywhere; }
.hljs, code.hljs { background: transparent; padding: 0; }

/* Directory listing */
.fv-entries { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.fv-entry {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border);
}
.fv-entry:last-child { border-bottom: none; }
.fv-entry:active { background: var(--surface-2); }
.fv-ext, .fv-thumb { flex: none; width: 34px; height: 26px; border-radius: 6px; background: var(--surface-2); }
.fv-ext { display: grid; place-items: center; font: 10px/1 var(--mono); text-transform: uppercase; color: var(--muted); }
.fv-ext.dir { color: var(--accent-2); font-size: 13px; }
.fv-thumb { object-fit: cover; }
.fv-ename { flex: 1; min-width: 0; font-family: var(--mono); font-size: calc(var(--fv-fs) * .93);
  line-height: 1.35; overflow-wrap: anywhere; }
.fv-esize { flex: none; font-size: 11.5px; color: var(--faint); }

/* Markdown page — sizes are em so the whole page scales from --fv-fs. */
.fv-md { font-size: var(--fv-fs); line-height: 1.6; }
.fv-md h1 { font-size: 1.47em; margin: 2px 0 12px; }
.fv-md h2 { font-size: 1.27em; margin: 24px 0 10px; }
.fv-md h3 { font-size: 1.1em; margin: 20px 0 8px; }
.fv-md h4 { font-size: 1em; color: var(--accent-2); margin: 16px 0 6px; }
.fv-md h5, .fv-md h6 { font-size: .87em; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 14px 0 6px; }
.fv-md p { margin: 0 0 12px; }
.fv-md ul, .fv-md ol { margin: 8px 0 12px; padding-left: 22px; }
.fv-md li { margin: 4px 0; }
.fv-md li::marker { color: var(--accent-2); }
.fv-md a { color: var(--accent-2); }
.fv-md strong { font-weight: 700; }
.fv-md del { opacity: .65; }
.fv-md hr { border: none; border-top: 1px solid var(--border); margin: 22px 0; }
.fv-md blockquote { margin: 0 0 12px; padding: 2px 0 2px 12px; border-left: 3px solid var(--surface-3); color: var(--muted); }
.fv-md code.inline { font-family: var(--mono); font-size: .84em; background: var(--surface-2); padding: 1.5px 5px; border-radius: 5px; }
.fv-md .fv-pre { background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin: 0 0 14px; overflow-x: auto;
  font-family: var(--mono); font-size: .84em; line-height: 1.55; }
.fv-md .table-wrap { overflow-x: auto; margin: 0 0 14px; }
.fv-md table { border-collapse: collapse; font-size: .84em; }
/* Cells wrap where there's room to wrap into; the phone keeps nowrap + scroll
   below, because a stacked cell there is worse than a swipe. */
.fv-md th, .fv-md td { border: 1px solid var(--border); padding: 5px 9px; text-align: left; vertical-align: top; }
.fv-md th { background: var(--surface-2); }
.fv-md .fv-reference-target {
  scroll-margin-block: 24vh;
  border-radius: 6px;
  background: rgba(124,108,255,.16);
  box-shadow: 0 0 0 5px rgba(124,108,255,.08);
}
.fv-mdimg { display: block; max-width: 100%; margin: 4px 0 14px; border: 1px solid var(--border); border-radius: 10px; }

/* Image / binary / error states */
.fv-imgwrap { display: flex; justify-content: center; }
.fv-img { max-width: 100%; border: 1px solid var(--border); border-radius: 12px; }
.fv-loading, .fv-empty { color: var(--muted); font-size: 13.5px; }
.fv-note { color: var(--muted); font-size: 12.5px; padding: 0 2px 8px; }
.fv-note-btn { background: none; border: none; padding: 0; color: var(--accent-2); font-size: 12.5px; text-decoration: underline; }
.fv-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  max-width: 520px; padding: 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
}
.fv-card p { margin: 0; font-size: 14px; }
.fv-cardpath { font-family: var(--mono); font-size: 12px; color: var(--muted); word-break: break-all; }
.fv-btn { padding: 8px 16px; border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 13.5px; font-weight: 600; text-decoration: none; border: none; }
.fv-btn.ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.fv-toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-bottom) + 22px);
  padding: 8px 16px; font-size: 13px; color: var(--text);
  background: var(--surface-3); border: 1px solid var(--border); border-radius: 999px;
}
.fv-toast[hidden] { display: none; }

@media (max-width: 560px) {
  .fv-body { --fv-base: 15.5px; }
  .fv-bar { flex-wrap: wrap; overflow-x: visible; }
  .fv-meta { flex-basis: 100%; }
  .fv-bar-sp { display: none; }
  .fv-main { padding: 12px 10px calc(var(--safe-bottom) + 40px); }
  .fv-row { grid-template-columns: 42px 1fr; }
  .fv-deskonly { display: none; }
  .fv-md th, .fv-md td { white-space: nowrap; }
}

/* Chat: a file path Claude linked reads as a path, not prose. */
.bubble a.file-link {
  font-family: var(--mono); font-size: 12.5px; text-decoration: none;
  background: rgba(124,108,255,.12); border: 1px solid rgba(124,108,255,.28);
  border-radius: 6px; padding: 1px 6px; white-space: nowrap;
}
.row.user .bubble a.file-link { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }

.sg-discuss { background: transparent; color: var(--accent-2); border: 1px solid var(--accent-2); }