:root {
  --bg: #0d1117;
  --bg-elev: #161b22;
  --bg-elev-2: #1f242c;
  --border: #30363d;
  --text: #e6edf3;
  --muted: #8b949e;
  --accent: #2ea043;
  --accent-hover: #3fb950;
  --danger: #f85149;
  --warn: #d29922;
  --link: #58a6ff;
  --pending: #d29922;
  --allowed: #2ea043;
  --denied: #f85149;
  --expired: #6e7681;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  /* iOS PWA: prevent rubber-band overscroll bouncing past the layout */
  overscroll-behavior-y: none;
  /* Tap highlight is heavy on iOS — let buttons handle their own pressed state */
  -webkit-tap-highlight-color: transparent;
  /* Hardware-accelerated smooth scrolling on iOS */
  -webkit-overflow-scrolling: touch;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button {
  font: inherit;
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}
button:hover { border-color: #4f5760; }
button.primary { background: var(--accent); border-color: var(--accent); color: white; }
button.primary:hover { background: var(--accent-hover); }
button.danger  { background: transparent; border-color: var(--danger); color: var(--danger); }
button.danger:hover { background: rgba(248, 81, 73, 0.15); }
button[disabled] { opacity: 0.5; cursor: not-allowed; }
/* Keyboard-focus affordance (none existed before). Mouse clicks don't
   trigger :focus-visible, so this only shows for keyboard/AT users. */
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 3px; }
input, textarea, select {
  font: inherit;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  width: 100%;
}
textarea { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; min-height: 80px; }
header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  /* iOS notch / Dynamic Island: push the header down behind the safe-area
     inset so it isn't sitting under the status bar in standalone PWAs.
     env(safe-area-inset-top) is 0 in regular browsers, ~44pt under the
     iPhone notch. */
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  padding-left: calc(20px + env(safe-area-inset-left, 0px));
  padding-right: calc(20px + env(safe-area-inset-right, 0px));
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  position: sticky;
  top: 0;
  z-index: 5;
}
header .brand { font-weight: 600; font-size: 16px; }
header .brand .dot { display: inline-block; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; margin-right: 6px; vertical-align: middle; }
nav { display: flex; gap: 6px; flex: 1; }
nav button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 4px 10px;
}
nav button.active { color: var(--text); border-color: var(--border); background: var(--bg-elev-2); }
header .user { color: var(--muted); font-size: 13px; }
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
  padding-left: calc(20px + env(safe-area-inset-left, 0px));
  padding-right: calc(20px + env(safe-area-inset-right, 0px));
  /* Leave room for the home indicator at the bottom of newer iPhones */
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* ---- bottom navigation (mobile only) ----
   iOS users expect the primary nav at the bottom, not the top. We render
   the same nav buttons in two locations and use CSS to show the
   appropriate one per viewport. The bottom bar gets safe-area-inset-bottom
   so the home indicator doesn't sit on top of the buttons. */
.bottom-nav {
  display: none; /* shown via media query below */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  padding: 6px 8px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(8px + env(safe-area-inset-left, 0px));
  padding-right: calc(8px + env(safe-area-inset-right, 0px));
  z-index: 6;
  /* Backdrop blur for that translucent iOS-native look when content scrolls under */
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background: rgba(22, 27, 34, 0.85);
}
.bottom-nav .row {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 0;
  flex-wrap: nowrap;
  width: 100%;
}
.bottom-nav button {
  background: transparent;
  border: 0;
  color: var(--muted);
  /* 44pt minimum tap target per Apple HIG */
  min-height: 48px;
  min-width: 56px;
  padding: 4px 6px;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1 1 0;
  border-radius: 8px;
  position: relative;
}
.bottom-nav button .icon {
  font-size: 20px;
  line-height: 1;
}
.bottom-nav button.active { color: var(--text); }
.bottom-nav button.active .icon { color: var(--accent); }
.bottom-nav button .badge-count {
  position: absolute;
  top: 4px;
  right: 14px;
  background: var(--danger);
  color: white;
  font-size: 9px;
  font-weight: 600;
  min-width: 16px;
  padding: 1px 4px;
  border-radius: 999px;
  border: 0;
  line-height: 1.2;
}
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}
.card h2 { margin: 0 0 8px 0; font-size: 16px; }
.meta { color: var(--muted); font-size: 12px; }
.badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border);
}
.badge.pending  { color: var(--pending);  border-color: var(--pending); }
.badge.allowed  { color: var(--allowed);  border-color: var(--allowed); }
.badge.denied   { color: var(--denied);   border-color: var(--denied);  }
.badge.expired  { color: var(--expired);  border-color: var(--expired); }
.badge.allow    { color: var(--accent);   border-color: var(--accent); }
.badge.ask      { color: var(--pending);  border-color: var(--pending); }
.badge.deny     { color: var(--danger);   border-color: var(--danger); }
/* 5-segment policy control */
.policy-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.policy-seg .seg {
  border: none; border-radius: 0; background: transparent; color: var(--muted);
  padding: 3px 8px; font-size: 11px; border-right: 1px solid var(--border); cursor: pointer;
}
.policy-seg .seg:last-child { border-right: none; }
.policy-seg .seg:hover { background: var(--bg-elev-2); }
.policy-seg .seg.active { color: var(--text); background: var(--bg-elev-2); font-weight: 600; }
.policy-seg .seg.active.allow { color: var(--accent); }
.policy-seg .seg.active.deny  { color: var(--danger); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
pre.json {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px;
  overflow: auto;
  font-size: 12px;
  margin: 8px 0;
  max-height: 240px;
}
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.empty { color: var(--muted); text-align: center; padding: 20px; }

/* ---- Lake (TUS-104) ------------------------------------------------------
 * 12-col grid with size hints from the manifest. Panels use the existing
 * .card surface so colour, padding, and borders match the rest of the dash.
 */
.lake-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.lake-panel.lake-panel-small  { grid-column: span 4; }
.lake-panel.lake-panel-medium { grid-column: span 6; }
.lake-panel.lake-panel-wide   { grid-column: span 12; }
.lake-panel { min-height: 220px; }
.lake-chart-holder { width: 100%; }
@media (max-width: 800px) {
  .lake-panel.lake-panel-small,
  .lake-panel.lake-panel-medium,
  .lake-panel.lake-panel-wide { grid-column: span 12; }
}
.login-wrap { max-width: 380px; margin: 80px auto; }
.login-wrap label { display: block; margin: 12px 0 4px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.err { color: var(--danger); margin-top: 8px; min-height: 1em; font-size: 13px; }
.ok  { color: var(--accent); margin-top: 8px; min-height: 1em; font-size: 13px; }
.toast {
  position: fixed; bottom: 20px; right: 20px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: opacity 0.3s;
}
.toast.error { border-color: var(--danger); }
.toast.stale {
  border-color: var(--muted);
  color: var(--muted);
  display: flex; gap: 12px; align-items: center;
}
.toast.stale .link { color: var(--text); }
details summary { cursor: pointer; color: var(--muted); }
.mem-value { cursor: text; border-radius: 3px; padding: 2px 4px; margin: -2px -4px; white-space: pre-wrap; }
.mem-value:hover { background: var(--bg-elev-2); outline: 1px dashed var(--border); }
.args-table td { padding: 2px 0; font-size: 13px; }
.args-table td:first-child { font-family: ui-monospace, monospace; }
.approval-card:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
code { background: var(--bg); padding: 1px 4px; border-radius: 3px; font-size: 12px; }
.stream-pill {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted);
}
.stream-pill.live { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.stream-pill.reconnecting { background: #d29922; }
.stream-pill.offline { background: var(--danger); }
.stream-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--muted); cursor: default;
}
.stream-status.reconnecting, .stream-status.offline { cursor: pointer; color: var(--text); }
@keyframes streamPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.stream-pill.reconnecting { animation: streamPulse 1.1s ease-in-out infinite; }
.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.market-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 140px;
  transition: border-color 0.15s, transform 0.15s;
}
.market-card:hover { border-color: #4f5760; }
.market-card .title { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.market-card .cat   { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border: 1px solid var(--border); padding: 1px 6px; border-radius: 999px; }
.market-card .tag   { font-size: 13px; color: var(--text); }
.market-card .desc  { font-size: 12px; color: var(--muted); flex: 1; }
.market-card .actions { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.market-card.installed { border-color: var(--accent); }
.modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.modal {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
  width: min(420px, calc(100% - 24px)); padding: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.modal h3 { margin: 0 0 4px 0; font-size: 16px; }
.modal .meta { margin-bottom: 12px; }
.modal label .meta { margin-top: 8px; }
.modal-wide { width: min(760px, calc(100% - 24px)); }
.snippet {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0;
  margin: 8px 0 4px;
  overflow: hidden;
}
.snippet pre {
  margin: 0;
  padding: 12px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre;
  color: var(--text);
}
.snippet .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}
.copy-btn {
  background: transparent;
  border: 1px solid var(--border);
  padding: 3px 10px;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text);
}
.copy-btn:hover { border-color: var(--accent); color: var(--accent); }
.copy-btn.copied { color: var(--accent); border-color: var(--accent); }
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 16px 0 0 0;
}
.tabs button {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 6px 12px;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  margin-bottom: -1px;
}
.tabs button.active {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border);
}
.warn-pill {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(210, 153, 34, 0.15);
  border: 1px solid var(--warn);
  color: var(--warn);
  border-radius: 4px;
  font-size: 11px;
  margin-bottom: 8px;
}
.agent-add-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.workbench {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 12px;
  align-items: flex-start;
}
.workbench .tool-list {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 6px;
}
.workbench .tool-list .item {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
}
.workbench .tool-list .item:hover { background: var(--bg-elev-2); }
.workbench .tool-list .item.active { background: var(--bg-elev-2); border-color: var(--border); }
.workbench .tool-list .item .name { font-weight: 500; font-size: 13px; }
.workbench .tool-list .item .upstream { font-size: 11px; color: var(--muted); }
.workbench .pane {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.workbench .pane h3 { margin: 0 0 4px; font-size: 15px; }
.workbench .pane .desc { color: var(--muted); margin-bottom: 12px; font-size: 13px; }
.workbench .field { margin-bottom: 10px; }
.workbench .field .label-row { display: flex; gap: 8px; margin-bottom: 3px; align-items: baseline; }
.workbench .field .label-row .name { font-weight: 500; font-size: 13px; }
.workbench .field .label-row .req { color: var(--danger); font-size: 11px; }
.workbench .field .label-row .type { color: var(--muted); font-size: 11px; }
.workbench .field .desc { color: var(--muted); font-size: 12px; margin: 0 0 4px 0; }
.workbench .result {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 10px;
  margin-top: 12px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  max-height: 300px;
  overflow-y: auto;
}
.workbench .result.error   { border-left-color: var(--danger); }
.workbench .result.pending { border-left-color: var(--pending); }
@media (max-width: 800px) {
  .workbench { grid-template-columns: 1fr; }
  .workbench .tool-list { max-height: 220px; }
}

/* Quick-switch toggle for per-tool approval policy. The checkbox itself is
   hidden — the visible pill is the label, recolored via the .on modifier. */
.policy-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  gap: 6px;
}
.policy-toggle input { display: none; }
.policy-toggle .policy-pill {
  display: inline-block;
  min-width: 52px;
  text-align: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 80ms ease, color 80ms ease, border-color 80ms ease;
}
.policy-toggle.on .policy-pill {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.policy-toggle.veto .policy-pill {
  border-color: var(--warn);
  color: var(--warn);
  background: transparent;
}
.policy-toggle:hover .policy-pill { filter: brightness(1.08); }

/* iPhone 11 portrait is 414px; we target 768 and below as "phone or small
   tablet". Layout flips to single column, top nav hides in favor of the
   bottom bar, and content gets enough bottom padding to clear the bar. */
@media (max-width: 768px) {
  /* Compact header — keep brand + status + logout, drop the top nav. */
  header {
    gap: 8px;
    padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
  }
  header .brand { font-size: 15px; flex: 1; }
  header nav { display: none; }
  header .user { font-size: 12px; }

  main {
    padding: 12px;
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
    /* Bottom nav is ~64px tall + safe-area; content has to clear it */
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  /* Bottom nav appears on mobile */
  .bottom-nav { display: block; }

  /* Cards: tighten padding to make more room. */
  .card { padding: 12px; margin-bottom: 10px; }
  .card h2 { font-size: 15px; }

  /* Bigger tap targets across the board — 44pt minimum per Apple HIG. */
  button {
    min-height: 40px;
    padding: 8px 14px;
  }
  /* Buttons inside .row that are explicitly action buttons should be full-touch */
  .card .row button { min-height: 44px; }

  /* Inputs: same minimum height + larger font (≥16px prevents iOS auto-zoom on focus). */
  input, textarea, select {
    min-height: 44px;
    font-size: 16px;
    padding: 10px 12px;
  }
  textarea { min-height: 100px; }

  /* Tables become horizontally scrollable rather than overflowing the card.
     Wrap any table in a card-content div automatically gets this via the card itself. */
  .card { overflow-x: auto; }
  table { min-width: 480px; }
  th, td { padding: 10px 8px; font-size: 13px; }

  /* Marketplace grid → single column to avoid cramped 260px cards squashing. */
  .market-grid { grid-template-columns: 1fr; }

  /* Modal: nearly fullscreen on mobile, slide from bottom feel. */
  .modal {
    width: 100%;
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - 40px);
    overflow-y: auto;
    margin: 0 8px;
    padding: 16px;
  }
  .modal-bg {
    align-items: flex-end;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px));
  }
  .modal { border-radius: 16px 16px 8px 8px; }

  /* Toast: don't sit on top of bottom nav */
  .toast {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    right: 12px;
    left: 12px;
    max-width: none;
  }

  /* Workbench: remove the side panel, stack list above pane */
  .workbench { grid-template-columns: 1fr; gap: 8px; }
  .workbench .tool-list { max-height: 200px; }

  /* Tabs: scroll horizontally rather than wrap */
  .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tabs button { white-space: nowrap; min-height: 40px; }
}

/* Very small phones (iPhone SE 1st gen, etc.) — 375px wide */
@media (max-width: 380px) {
  header .brand { font-size: 14px; }
  .bottom-nav button .icon { font-size: 18px; }
  .bottom-nav button { font-size: 10px; min-width: 48px; }
}

/* Call panel — phase indicator + transcript layout */
.mic-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}
.transcript {
  display: flex; flex-direction: column;
  gap: 6px;
  max-height: 360px; overflow-y: auto;
}
.transcript-row.user { opacity: 0.85; }
.transcript-row.assistant { font-weight: 500; }