/* RAC V1 Web — app shell styles.
 *
 * Layout: one markup tree, three responsive modes.
 *   phone  (<768)  single column, bottom composer, segmented tabs
 *   tablet (>=768) two columns (rail + conversation), changes/activity in a drawer
 *   desktop(>=1080) three columns (rail + conversation + inspector)
 *
 * Design constraints from the review: light default with dark following the system, system fonts,
 * hairline borders, restrained radii, no gradients, status never conveyed by colour alone,
 * touch targets >= 44px, ~16px body text on phones.
 */

:root {
  --bg: #ffffff;
  --bg-raised: #f7f8f9;
  --bg-sunken: #f2f3f5;
  --fg: #14181d;
  --fg-muted: #5b6572;
  --fg-faint: #8b95a1;
  --border: #e3e6ea;
  --border-strong: #cfd4da;
  --accent: #2b6cb0;
  --accent-fg: #ffffff;
  --ok: #1f7a4d;
  --warn: #9a6700;
  --danger: #b42318;
  --radius: 8px;
  --radius-sm: 6px;
  --tap: 44px;
  --rail: 264px;
  --inspector: 360px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111418;
    --bg-raised: #171b20;
    --bg-sunken: #0c0f12;
    --fg: #e6e9ed;
    --fg-muted: #a2acb8;
    --fg-faint: #75808d;
    --border: #262c33;
    --border-strong: #38414b;
    --accent: #6aa9e9;
    --accent-fg: #0b0e11;
    --ok: #5bbd8a;
    --warn: #d8a83a;
    --danger: #f08b80;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-fg);
  padding: 0 14px;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  z-index: 50;
}
.skip-link:focus { left: 8px; }

button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.app {
  display: grid;
  grid-template-columns: 1fr;
  /* --app-height is the VISIBLE height published by the visualViewport handler in app.js. On iOS
     the soft keyboard shrinks only the visual viewport, so a shell sized by 100dvh would leave the
     composer behind the keyboard. The shell is therefore exactly as tall as the area that is really
     visible: long conversations scroll inside the stream, and the composer can never be pushed off
     screen. (min-height first is the fallback for engines without dvh.) */
  min-height: 100vh;
  min-height: var(--app-height, 100dvh);
  height: var(--app-height, 100dvh);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── rail ─────────────────────────────────────────────────────────────────────────── */

.rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid var(--border);
  background: var(--bg-raised);
  padding: 12px;
  min-width: 0;
  /* The shell has a definite height now, so a long session list scrolls inside the rail. */
  overflow-y: auto;
}
.rail[hidden] { display: none; }

.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: -0.01em; }
.brand-mark {
  width: 22px; height: 22px; flex: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; font-family: var(--mono);
}
.brand-sub { font-size: 12px; color: var(--fg-muted); font-weight: 400; }

.connection {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  background: var(--bg);
}
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--fg-faint); }
.dot[data-state='live'] { background: var(--ok); }
.dot[data-state='down'] { background: var(--danger); }
.connection[data-state='down'] { border-color: var(--danger); }

.field { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-faint); }

select, input[type='text'], textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
textarea { min-height: 44px; resize: vertical; font-family: var(--font); }

.btn {
  min-height: var(--tap);
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn:hover:not(:disabled) { border-color: var(--fg-muted); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-block { width: 100%; }
.btn-sm { min-height: 34px; padding: 0 10px; font-size: 13px; }

/* Every interactive control must clear the 44px touch target on touch devices — including the
   compact ones the narrow layout exposes (the phone back button and the inspector tabs). Measured
   by tools/capture-screens.mjs, which fails the review if any rendered control is undersized. */
@media (pointer: coarse), (max-width: 767px) {
  .btn-sm, .tab, .link-btn { min-height: var(--tap); }
}

.engine-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  min-height: var(--tap); padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--bg); cursor: pointer; font-size: 13px;
}
.chip[aria-pressed='true'] { border-color: var(--accent); color: var(--accent); font-weight: 600; }

.rail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.session-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.session-item {
  width: 100%; text-align: left;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; cursor: pointer;
  min-height: var(--tap);
  padding: 8px;
  display: flex; flex-direction: column; gap: 3px;
}
.session-item:hover { background: var(--bg); border-color: var(--border); }
.session-item[aria-current='true'] { background: var(--bg); border-color: var(--accent); }
.session-title { font-size: 14px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--fg-muted); }

.badge {
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 1px 7px; font-size: 11px; color: var(--fg-muted);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.badge[data-tone='ok'] { border-color: var(--ok); color: var(--ok); }
.badge[data-tone='warn'] { border-color: var(--warn); color: var(--warn); }
.badge[data-tone='danger'] { border-color: var(--danger); color: var(--danger); }
.badge[data-tone='accent'] { border-color: var(--accent); color: var(--accent); }
.badge::before { content: ''; }
.badge[data-tone='ok']::before { content: '●'; font-size: 8px; }
.badge[data-tone='warn']::before { content: '▲'; font-size: 8px; }
.badge[data-tone='danger']::before { content: '■'; font-size: 8px; }

/* ── conversation ─────────────────────────────────────────────────────────────────── */

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.main[hidden] { display: none; }

.session-header {
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg);
  position: sticky; top: 0; z-index: 5;
}
.header-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.header-title { font-size: 15px; font-weight: 600; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.header-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; }

.mobile-only { display: flex; }
.desktop-only { display: none; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); padding: 0 8px; overflow-x: auto; }
.tab {
  min-height: var(--tap); padding: 0 12px;
  border: none; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  color: var(--fg-muted); white-space: nowrap;
}
.tab[aria-selected='true'] { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }

/* Rail: the read-only history entry for sessions whose engine left the product. */
.session-retired-head { list-style: none; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 6px; }
.session-retired-head .composer-hint { font-size: 12px; }

/* Conversation: explicit "more journal exists" control (never a silent truncation). */
.journal-more { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px dashed var(--border); }

.stream { flex: 1 1 auto; overflow-y: auto; padding: 14px 12px 20px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }

.msg { display: flex; flex-direction: column; gap: 4px; max-width: 900px; }
.msg-user { align-self: flex-end; align-items: flex-end; }
.msg-assistant { align-self: flex-start; }
.msg-role { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-faint); }
.bubble {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--bg-raised);
  overflow-wrap: anywhere;
}
.msg-user .bubble { background: var(--bg-sunken); }
.bubble.is-streaming::after { content: '▍'; color: var(--fg-faint); }

.md-line, .md-heading { margin: 0 0 2px; }
.md-heading { font-size: 15px; margin: 8px 0 4px; }
.md-gap { height: 8px; }
.md-list { margin: 4px 0 4px 18px; padding: 0; }
.inline-code { font-family: var(--mono); font-size: 13px; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
.code-block { margin: 6px 0; padding: 10px; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow-x: auto; }
.code-block code { font-family: var(--mono); font-size: 13px; white-space: pre; }
.md-link { color: var(--accent); }

.card {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 900px;
  align-self: flex-start;
  width: 100%;
}
.card[data-tone='warn'] { border-color: var(--warn); }
.card[data-tone='danger'] { border-color: var(--danger); }
.card[data-tone='ok'] { border-color: var(--ok); }
.card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-title { font-size: 14px; font-weight: 600; margin: 0; }
.card-kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; font-size: 13px; }
.card-kv dt { color: var(--fg-muted); }
.card-kv dd { margin: 0; overflow-wrap: anywhere; }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.card[data-state='resolved'] { opacity: 0.75; }

details.tool {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  max-width: 900px; align-self: flex-start; width: 100%;
}
details.tool > summary {
  cursor: pointer; padding: 8px 10px; min-height: var(--tap);
  display: flex; align-items: center; gap: 8px; list-style: none;
}
details.tool > summary::-webkit-details-marker { display: none; }
.tool-body { padding: 0 10px 10px; border-top: 1px solid var(--border); }
.tool-meta { font-size: 12px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── composer ─────────────────────────────────────────────────────────────────────── */

.composer {
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 6px;
  position: sticky; bottom: 0;
}
.composer-row { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { flex: 1 1 auto; max-height: 40vh; }
.composer-hint { font-size: 12px; color: var(--fg-muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.composer-hint[data-tone='warn'] { color: var(--warn); }

/* ── inspector ────────────────────────────────────────────────────────────────────── */

.inspector {
  border-left: 1px solid var(--border);
  background: var(--bg-raised);
  display: flex; flex-direction: column; min-width: 0;
}
.inspector[hidden] { display: none; }
.inspector-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.inspector-body { overflow-y: auto; padding: 10px; font-size: 13px; display: flex; flex-direction: column; gap: 10px; }
.diff { font-family: var(--mono); font-size: 12px; white-space: pre; overflow-x: auto; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; margin: 0; }
.file-row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 12px; }
.note { border: 1px solid var(--warn); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 12px; color: var(--fg-muted); background: var(--bg); }

/* ── drawer (tablet) ──────────────────────────────────────────────────────────────── */

.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 30; border: none; padding: 0; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw);
  background: var(--bg-raised); border-left: 1px solid var(--border-strong);
  z-index: 31; display: flex; flex-direction: column;
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; border-bottom: 1px solid var(--border); }

.empty { color: var(--fg-muted); font-size: 14px; padding: 20px 12px; text-align: center; }

.offline-banner {
  background: var(--bg-sunken); border-bottom: 1px solid var(--warn); color: var(--fg-muted);
  font-size: 12px; padding: 6px 10px; display: flex; gap: 8px; align-items: center; justify-content: center;
}

/* ── responsive ───────────────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .app { grid-template-columns: var(--rail) 1fr; }
  .mobile-only { display: none; }
  .desktop-only { display: flex; }
  .rail { position: sticky; top: 0; height: var(--app-height, 100dvh); }
  .tabs { display: none; }
}

@media (min-width: 1080px) {
  .app { grid-template-columns: var(--rail) 1fr var(--inspector); }
  .inspector { position: sticky; top: 0; height: var(--app-height, 100dvh); overflow-y: auto; }
}

@media (max-width: 767px) {
  .app { grid-template-columns: 1fr; }
  .stream { padding-bottom: 8px; }
  .bubble, .card { border-radius: var(--radius-sm); }
  .header-actions .label { display: none; }
}