@font-face {
  font-family: "Space Grotesk";
  src: url("space-grotesk-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
:root {
  color-scheme: light dark;
  --bg: var(--dm-background, #090e17);
  --panel: var(--dm-surface, #111925);
  --ink: var(--dm-text, #f5f0e6);
  --muted: color-mix(in srgb, var(--ink) 78%, var(--bg));
  --accent: var(--dm-accent, #87d7ee);
  --line: color-mix(in srgb, var(--ink) 30%, var(--bg));
  --warn: var(--dm-accent, #f4c283);
  --secondary: var(--dm-accent, #dcb3c3);
  --good: var(--dm-accent, #a8dac6);
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font:
    16px/1.5 var(--dm-body-font, "Space Grotesk", system-ui, sans-serif);
}
main {
  height: 100vh;
  height: var(--tg-viewport-stable-height, 100dvh);
  display: flex;
  flex-direction: column;
  max-width: 620px;
  margin: auto;
  padding: max(10px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom));
  padding-top: max(10px, var(--tg-content-safe-area-inset-top, 0px));
}
main > :not(#work) {
  flex-shrink: 0;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
  border-bottom: 4px solid var(--warn);
  border-radius: 0 0 0 14px;
  padding-bottom: 5px;
}
.identity {
  display: flex;
  align-items: center;
  gap: 8px;
}
.resonance {
  width: 28px;
  height: 28px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.2;
}
h1 {
  font-family: var(--dm-heading-font, inherit);
  font-size: 20px;
  line-height: 1.15;
  margin: 0;
}
h2 {
  font-family: var(--dm-heading-font, inherit);
  font-size: 20px;
  margin: 0 0 10px;
}
h3 {
  font-family: var(--dm-heading-font, inherit);
  font-size: 18px;
  margin: 0;
  overflow-wrap: anywhere;
}
p {
  margin: 8px 0;
}
#provider {
  font-size: 14px;
  color: var(--muted);
  max-width: 60%;
  overflow-wrap: anywhere;
}
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#overview {
  font-size: 14px;
  color: var(--accent);
}
button,
a {
  touch-action: manipulation;
}
button {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  min-height: 44px;
  padding-top: 10px;
}
#host {
  margin-top: 4px;
}
#host-summary {
  padding: 6px 0;
  line-height: 1.4;
  min-height: 44px;
  color: var(--muted);
}
#work {
  display: flex;
  flex-direction: column;
  flex: 1 0 132px;
  min-height: 132px;
  padding: 6px 0 6px 8px;
  border-left: 4px solid var(--accent);
  border-top: 2px solid var(--accent);
  border-radius: 16px 0 0 0;
  margin-top: 6px;
}
#work::before {
  content: "";
  display: block;
  height: 4px;
  flex-shrink: 0;
  margin-bottom: 6px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(
    to right,
    var(--accent) 0 50%, transparent 50% 52%,
    var(--secondary) 52% 75%, transparent 75% 77%,
    var(--warn) 77% 100%
  );
}
#work .section-title {
  display: none;
}
.filters {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
.filters button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg);
}
#sessions {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.session {
  border-left: 3px solid var(--line);
  padding: 0 8px;
  margin-bottom: 2px;
  background: var(--panel);
  border-radius: 0 8px 8px 0;
}
.session.active {
  border-left-color: var(--good);
}
.session-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 6px;
  min-height: 44px;
  padding: 4px 0;
  color: var(--ink);
}
.session-title {
  font-size: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.badge {
  font-size: 14px;
  color: var(--accent);
}
.goal-chip,
.child-chip {
  font-size: 14px;
  color: var(--warn);
}
.child-chip {
  grid-column: 2;
  text-align: right;
  color: var(--accent);
}
.goal-chip {
  grid-column: 1;
}
.session[open] {
  padding-bottom: 10px;
}
.full-title {
  padding-top: 8px;
}
.session-goal {
  margin: 10px 0 6px;
  overflow-wrap: anywhere;
}
.goal-label {
  color: var(--warn);
  font-size: 14px;
}
.session-meta {
  font-size: 14px;
  color: var(--muted);
  margin: 8px 0;
}
.children {
  list-style: none;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--line);
  margin: 10px 0;
}
.children li {
  padding: 6px 0;
  overflow-wrap: anywhere;
}
.children .children {
  margin: 4px 0;
}
.session details {
  margin-top: 8px;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.metric {
  padding: 10px;
  background: var(--panel);
  border-radius: 8px;
}
.metric-label,
.metric-detail {
  color: var(--muted);
  font-size: 14px;
}
.metric-value {
  font-size: 20px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
#control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.control-info {
  font-size: 14px;
  flex: 1;
}
#control summary {
  padding: 0;
  display: flex;
  align-items: center;
}
#control .control-info[open] {
  flex-basis: 100%;
}
.stop {
  border-color: var(--warn);
  color: var(--warn);
}
#stop {
  border-radius: 22px 6px 6px 22px;
  background: var(--warn);
  color: var(--bg);
}
#feedback {
  font-size: 16px;
  overflow-wrap: anywhere;
}
#receipt {
  padding-top: 8px;
  flex-basis: 100%;
  overflow-wrap: anywhere;
}
#receipt:empty {
  display: none;
}
.note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}
footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding-top: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
}
dialog {
  max-width: 480px;
  width: calc(100% - 32px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  color: var(--ink);
  padding: 20px;
}
dialog::backdrop {
  background: #0009;
}
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 12px;
  margin-top: 20px;
}
@media (min-width: 720px) {
  .metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#operations { flex: 0 0 auto; border-block: 1px solid var(--line, #28404b); }
#operations summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
#operations[data-attention="true"] {
  border-color: var(--warn);
  background: color-mix(in srgb,var(--warn) 10%,transparent);
  border-inline-start: 3px solid var(--warn);
  padding-inline-start: 10px;
}
#operations[data-attention="true"] > summary { color: var(--warn); font-weight: 700; }
#incidents { max-height: 36vh; overflow-y: auto; }
#alerts-state { font-size: 14px; line-height: 1.4; padding: 6px 0; }
.incident { padding: 12px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.incident p { font-size: 16px; line-height: 1.4; margin: 8px 0; }
.incident .note { font-size: 14px; }
.incident button { min-height: 44px; }
.incident-group-title { font-size: 15px; color: var(--muted); margin: 12px 0; }
.incident { padding-inline: 10px; margin-block: 10px; border-radius: 6px; }
.incident--open { border-inline-start: 3px solid var(--warn); background: color-mix(in srgb,var(--warn) 6%,transparent); }
.incident--resolved { border-inline-start: 3px solid var(--good); }
.incident-status { display: flex; flex-wrap: wrap; gap: 6px; }
.incident-badge { font-size: 13px; font-weight: 700; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; }
.incident-badge--open { color: var(--warn); border-color: var(--warn); }
.incident-badge--resolved { color: var(--good); border-color: var(--good); }
.incident-history { border-top: 1px solid var(--line); margin-block-start: 12px; }
.incident-history > summary { color: var(--muted); font-size: 15px; }

.header-tools { display:flex;align-items:center;gap:8px;min-width:0; }
.header-tools #provider { max-width:120px; }
.apps-return { display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--dm-radius,8px);color:var(--ink);font-size:14px;text-decoration:none;white-space:nowrap; }
.apps-return:focus-visible { outline:2px solid var(--accent);outline-offset:3px; }

#traffic { border-bottom: 1px solid var(--line); }
#traffic > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
#traffic[data-attention="true"] > summary { color: var(--warn); font-weight: 700; }
#traffic-content { max-height: 48vh; overflow-y: auto; padding: 0 4px 12px; }
#traffic h3 { font-size: 15px; margin: 14px 0 6px; }
#traffic-status { margin: 6px 0; }
.traffic-chart { margin: 12px 0; }
.traffic-chart figcaption { font-size: 13px; color: var(--muted); }
#traffic-chart { height: 60px; display: flex; gap: 2px; align-items: end; border-bottom: 1px solid var(--line); }
.traffic-bar { flex: 1; min-width: 1px; background: var(--accent); }
.traffic-bar[data-limited="true"] { background: var(--warn); }
.traffic-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.traffic-row span:first-child { min-width: 0; overflow-wrap: anywhere; }
.traffic-row span:last-child { flex-shrink: 0; font-variant-numeric: tabular-nums; }

.toolbar-actions,.conversation-tools { display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap; }
body.conversation-mode .toolbar,body.conversation-mode #host,body.conversation-mode #operations,
body.conversation-mode #traffic,body.conversation-mode #work,body.conversation-mode #control,
body.conversation-mode footer,body.conversation-mode #provider { display:none!important; }
main > #conversation { display:flex;flex:1;flex-direction:column;min-height:0; }
#conversation-state { font-size:14px;color:var(--muted); }
#conversation-replies { flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px; }
#conversation-replies h2 { font-size:16px;color:var(--muted);margin:16px 0 8px; }
.reply { margin-bottom:var(--dm-gap,12px);padding:var(--dm-gap,14px);border:1px solid var(--line);border-radius:var(--dm-radius,12px);background:var(--panel);overflow-wrap:anywhere; }
.reply h3 { font-size:17px; }
.reply-status { font-size:14px;color:var(--muted); }
.reply[data-pending="true"] { border-inline-start:3px solid var(--warn); }
.reply-text { white-space:pre-wrap;font-size:16px;line-height:1.55; }
.reply-actions { display:flex;gap:8px;flex-wrap:wrap;margin-top:12px; }
.message-time { display:block; margin-top:6px; text-align:right; font-size:11px; line-height:1.4; opacity:.65; font-variant-numeric:tabular-nums; white-space:nowrap; }
.message-time[hidden] { display:none; }
.reply-error { font-size:14px;color:var(--warn); }
#conversation-player { flex-shrink:0;border-top:2px solid var(--accent);padding:10px 0 0; }
#conversation-player strong { overflow-wrap:anywhere;min-width:0; }
#conversation-audio { width:100%;max-width:100%;margin-top:8px; }
#conversation-audio-state { font-size:14px; }
#conversation > .note { font-size:14px;margin-bottom:0; }

#conversation-compose { margin: 12px 0; }
#conversation-compose label { display: block; margin-bottom: 6px; font-weight: 600; }
#conversation-message {
  display: block; width: 100%; min-height: 88px; resize: vertical;
  padding: 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); font: inherit;
}
#conversation-message:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#conversation-compose .conversation-tools { margin-top: 8px; }
#conversation-compose .note { flex: 1; }
#conversation-sent { border-block: 1px solid var(--line); padding-block: 10px; margin-block: 10px; }
#conversation-sent summary { cursor: pointer; min-height: 44px; padding-block: 10px; }
#conversation-inputs .reply { margin-block: 8px; }

/* Keep replies reachable when message history or the software keyboard is open. */
main > #conversation { overflow: auto; overscroll-behavior: contain; }
#conversation-replies { flex: 1 0 180px; }
#conversation-sent { flex-shrink: 0; max-height: 28dvh; overflow: auto; }

#conversation-requests { flex-shrink: 0; max-height: 38dvh; overflow: auto; padding: 10px 2px; border-block: 2px solid var(--accent); }
#conversation-requests h2 { font-size: 18px; margin-bottom: 6px; }
.request-card > button { margin-block: 8px; }
.request-card form label { display: block; margin-block: 10px 6px; }
.request-card textarea { width: 100%; min-height: 88px; padding: 10px; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.request-card textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.request-card form button { margin-top: 8px; }
.request-card details summary { min-height: 44px; padding-block: 10px; cursor: pointer; }
.request-card .reply-actions button { white-space: normal; overflow-wrap: anywhere; }

#conversation-voice { flex-shrink: 0; padding-block: 8px; }
#conversation-talk { min-width: 112px; font-weight: 600; }
#conversation-talk[aria-pressed="true"] { border: 3px solid var(--accent); }

#conversation-focus { margin-bottom: 8px; padding: 8px; border-inline-start: 3px solid var(--accent); }
.reply-route select { width: 100%; min-height: 44px; margin-block: 8px; font: inherit; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px; }

#conversation-visual { margin-block: 10px; padding: 8px; border: 1px solid var(--line); border-radius: var(--dm-radius, 8px); }
#conversation-visual summary { cursor: pointer; min-height: 44px; padding-block: 10px; }
#conversation-image { max-width: 100%; min-height: 44px; font: inherit; }
.visual-preview { max-height: 320px; overflow: auto; margin-block: 8px; }
#conversation-image-view { display: block; max-width: 100%; height: auto; cursor: crosshair; }
#conversation-image-view[hidden] { display: none; }
#conversation-image-view:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
#conversation-visual input[type="number"] { width: 90px; min-height: 44px; padding: 8px; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }

.input-visual { display: block; max-width: 100%; height: auto; margin-block: 8px; }
.input-visual[hidden] { display: none; }
.routing-trace { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.routing-trace summary { cursor: pointer; color: var(--accent); font-size: 16px; }
.routing-trace h3 { font-size: 16px; margin: 12px 0 6px; overflow-wrap: anywhere; }
.routing-trace .route-step { margin: 14px 0; border-left: 3px solid var(--accent); padding-left: 12px; }
.route-identity { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
#conversation-sent[open] { max-height: none; overflow: visible; }

/* The enrolled standalone monitor shares the conversation renderer. */
.monitor-mode #conversation-compose,
.monitor-mode #conversation-back,
.monitor-mode #conversation-open,
.monitor-mode #conversation-stop,
.monitor-mode #conversation-play,
.monitor-mode #conversation-audio-state,
.monitor-mode #conversation-requests { display:none !important; }


/* Temporal routing view: the server owns evidence, this pane only observes it. */
.monitor-mode main { max-width: none; }
#routing-graph { margin-block: 12px 20px; }
#routing-graph h2 { font-size: 20px; margin: 0; }
#routing-graph-viewport {
  overflow: auto; height: min(65vh, 640px); min-height: 320px;
  border: 1px solid var(--line); border-radius: var(--dm-radius, 10px);
  background: var(--bg); overscroll-behavior: contain;
}
#routing-graph-viewport:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#routing-graph-surface { position: relative; isolation: isolate; }
.routing-edges { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.routing-edge { fill: none; stroke: var(--accent); stroke-width: 2; opacity: .75; }
.routing-edge.incorporated { stroke-width: 3; }
.routing-arrow { fill: var(--accent); }
.routing-node {
  position: absolute; width: 292px; height: 248px; padding: 14px;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--dm-radius, 10px); text-align: start; font: inherit;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--bg) 65%, transparent);
}
.routing-node:hover { border-color: var(--accent); }
.routing-node:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.routing-route { border-inline-start: 4px solid var(--accent); }
.routing-response { border-inline-start: 4px solid var(--good); }
.routing-decision { border-style: dashed; }
.routing-node-title { font-size: 16px; font-weight: 600; line-height: 1.3; }
.routing-node-text { font-size: 14px; line-height: 1.4; overflow: hidden; overflow-wrap: anywhere; flex: 1; min-height: 0; white-space: pre-wrap; }
.routing-node-status { font-size: 14px; color: var(--muted); line-height: 1.3; }
.routing-lane-label {
  position: absolute; left: 0; z-index: 2; padding: 1px 10px; font-size: 14px;
  color: var(--muted); background: var(--bg); pointer-events: none;
}
@media (max-width: 480px) { #routing-graph-viewport { height: 60vh; } }
@media (prefers-reduced-motion: reduce) { #routing-graph-viewport { scroll-behavior: auto; } }

/* The standalone client keeps human inputs and attributed session updates together. */
#conversation-timeline { flex: 1 0 min(58dvh, 32rem); min-height: 180px; max-height: 58dvh; overflow-y: auto; overscroll-behavior: contain; padding: .5rem; }
#conversation-timeline .reply { margin-block: .75rem; }
#conversation-timeline .human-message { margin-inline-start: min(10%, 3rem); }

#conversation-timeline:empty { display: none; }


/* Independent conversation. A living presence, readable chat, one voice action. */
.timeline-history { display:none; position:sticky; top:0; z-index:1; background:var(--bg); padding-block:4px; }
.timeline-history:has(button:not([hidden])) { display:flex; }
.timeline-history button { min-height:44px; font-size:14px; }
#conversation-diagnostics { display:contents; }
#conversation-diagnostics > summary { display:none; }
#conversation-companion { display:flex; flex-wrap:wrap; align-items:center; gap:20px; min-width:0; }
#conversation-companion pre { flex:none; margin:0; font:12px/1.05 ui-monospace,monospace; color:var(--accent); transform-origin:50% 50%; }
#conversation-companion pre[data-fallback="true"] { white-space:normal; overflow-wrap:anywhere; max-width:100%; }
#conversation-companion > div { min-width:0; flex:1 1 140px; }
.companion-name { display:block; color:var(--muted); font-size:11px; letter-spacing:.18em; font-weight:600; }
.companion-name > span { color:var(--accent); }
.companion-caption { font-size:20px; font-weight:500; line-height:1.25; margin:8px 0; }
.companion-phases { display:flex; flex-wrap:wrap; gap:6px; }
.companion-phases > span { display:inline-flex; align-items:center; gap:5px; font-size:14px; color:var(--muted); }
.companion-phases > span > span { color:var(--accent); font-size:17px; }
#conversation-goals { padding:10px 2px; border-block:2px solid var(--accent); }
#conversation-goals h2 { font-size:18px; margin-bottom:6px; }
#conversation-attention { flex-shrink:0; max-height:38dvh; overflow:auto; }
#conversation-attention:has(> section:not([hidden])) { min-height:min(120px,30dvh); }
.monitor-mode #conversation-attention { display:none!important; }
.artifact-files { margin-top:.8rem; padding-top:.7rem; border-top:1px solid var(--line); }
.artifact-files h4 { margin:.15rem 0 .6rem; font-size:14px; }
.artifact-file { display:flex; align-items:center; flex-wrap:wrap; gap:.55rem; margin:.4rem 0; min-width:0; }
.artifact-file button { max-width:100%; overflow-wrap:anywhere; text-align:left; }
#conversation-audio-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; flex-shrink:0; }
#conversation-sound summary { display:flex; flex-wrap:wrap; gap:8px; }
#conversation-sound-status { color:var(--muted); font-size:14px; }
#conversation-sound label { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
#conversation-sound-score { padding-inline-start:1.4em; overflow-wrap:anywhere; }

.standalone-conversation { background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--accent) 7%,var(--bg)),var(--bg) 65%); }
.standalone-conversation main { max-width:960px; gap:8px; padding-inline:24px; }
.standalone-conversation header { border:0; padding:8px 0; margin:0; }
.standalone-conversation .identity h1 { font-size:16px; font-weight:500; letter-spacing:.02em; }
.standalone-conversation header .resonance { width:24px; height:24px; }
.standalone-conversation .apps-return { border-color:transparent; color:var(--muted); }
.standalone-conversation #feedback { font-size:14px; color:var(--muted); margin:0; }
.standalone-conversation #feedback > span { display:block; padding:0 0 4px; }
.standalone-conversation main > #conversation {
 display:grid; grid-template-rows:auto auto minmax(160px,1fr) auto auto auto auto;
 gap:10px; overflow:auto; min-height:0;
}
.standalone-conversation #conversation-companion {
 grid-row:1; position:relative; padding:18px 24px; gap:24px;
 border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
 border-radius:24px; background:radial-gradient(ellipse at 12% 50%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%);
}
.standalone-conversation #conversation-companion pre { text-shadow:0 0 14px color-mix(in srgb,var(--accent) 45%,transparent); }
.standalone-conversation #conversation-companion[data-pose="listening"] { border-color:var(--accent); }
.standalone-conversation #conversation-companion[data-pose="speaking"] { background:radial-gradient(ellipse at 15% 50%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 80%); }
.standalone-conversation #conversation-attention { grid-row:2; max-height:30dvh; }
.standalone-conversation #conversation-attention #conversation-requests { max-height:none; }
.standalone-conversation #conversation-timeline { grid-row:3; min-height:160px; max-height:none; padding:4px 10px; scrollbar-gutter:stable; }
.standalone-conversation #conversation-timeline .reply { border:0; border-radius:18px; background:transparent; padding:14px 16px; margin-block:10px; }
.standalone-conversation #conversation-timeline .human-message { margin-inline-start:min(10%,3rem); background:color-mix(in srgb,var(--accent) 9%,var(--panel)); border:1px solid color-mix(in srgb,var(--accent) 20%,transparent); }
.standalone-conversation #conversation-timeline h3 { color:var(--accent); font-size:14px; font-weight:500; margin-bottom:8px; }
.standalone-conversation .reply-text { line-height:1.65; }
.standalone-conversation .reply-status { margin:4px 0 8px; }
.standalone-conversation .reply-actions { gap:6px; }
.standalone-conversation .reply-actions button { min-height:44px; font-size:14px; border-color:transparent; background:color-mix(in srgb,var(--ink) 5%,transparent); }
.standalone-conversation .reply-actions button:hover { border-color:var(--accent); }
.standalone-conversation #conversation-compose { grid-row:4; margin:0; padding:12px; border:1px solid var(--line); border-radius:22px; background:var(--panel); }
.standalone-conversation #conversation-compose > label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.standalone-conversation #conversation-message { height:60px; min-height:60px; max-height:24dvh; border:0; padding:6px; resize:vertical; background:transparent; }
.standalone-conversation #conversation-compose > .conversation-tools { margin-top:4px; }
.standalone-conversation #conversation-compose .note { display:none; }
.standalone-conversation #conversation-visual { padding:0; margin:0; border:0; }
.standalone-conversation #conversation-visual > summary { min-height:44px; padding:10px 8px; font-size:14px; color:var(--muted); }
.standalone-conversation #conversation-visual[open] { width:100%; }
.standalone-conversation #conversation-send { min-height:44px; min-width:72px; border-color:transparent; background:var(--accent); color:var(--bg); }
.standalone-conversation #conversation-audio-tools { grid-row:5; justify-content:center; gap:8px; }
.standalone-conversation #conversation-voice { padding:0; min-width:0; max-width:100%; }
.standalone-conversation #conversation-voice .conversation-tools { justify-content:center; }
.standalone-conversation #conversation-audio-tools button { padding-inline:14px; font-size:14px; min-height:44px; }
.standalone-conversation #conversation-voice #conversation-talk { border-radius:100px; min-width:108px; min-height:52px; color:var(--accent); border-color:var(--accent); }
.standalone-conversation #conversation-talk[aria-pressed="true"] { background:var(--accent); color:var(--bg); box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 14%,transparent); }
.standalone-conversation #conversation-sound-feedback,.standalone-conversation #conversation-voice-state { flex-basis:100%; margin:0; font-size:14px; overflow-wrap:anywhere; }
.standalone-conversation #conversation-send-state:empty,.standalone-conversation #conversation-voice-state:empty { display:none; }
.standalone-conversation #conversation-player:not([hidden]) { grid-row:6; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 8px; padding-top:4px; min-height:max-content; max-height:none; overflow:visible; }
.standalone-conversation #conversation-player > .conversation-tools { display:contents; }
.standalone-conversation #conversation-playing { grid-column:1; grid-row:1; font-size:14px; }
.standalone-conversation #conversation-stop { grid-column:2; grid-row:2; }
.standalone-conversation #conversation-play { grid-column:1; grid-row:2; }
.standalone-conversation #conversation-audio { grid-column:1; grid-row:2; height:44px; margin:0; }
.standalone-conversation #conversation-audio-state { grid-column:2; grid-row:1; margin:0; font-size:14px; }
.standalone-conversation #conversation-diagnostics { grid-row:7; display:block; min-width:0; border-top:1px solid var(--line); margin-top:2px; }
.standalone-conversation #conversation-diagnostics > summary { display:flex; align-items:center; justify-content:space-between; cursor:pointer; min-height:44px; color:var(--muted); font-size:14px; }
.standalone-conversation #conversation-diagnostics[open] > summary { color:var(--accent); }
.standalone-conversation .conversation-diagnostics-content .timeline-history { position:static; }
.standalone-conversation .conversation-diagnostics-content { padding:16px 0; max-height:none; overflow:visible; }
.standalone-conversation #conversation-flow { max-height:none; overflow:visible; }
.standalone-conversation #conversation > .note { display:none; }
.standalone-conversation main:has(#conversation-diagnostics[open]) { height:auto; min-height:100dvh; }
.standalone-conversation #conversation:has(#conversation-diagnostics[open]) { overflow:visible; grid-template-rows:auto auto minmax(300px,55dvh) auto auto auto auto; }
@media(max-width:480px) {
 .standalone-conversation main { padding-inline:12px; gap:4px; }
 .standalone-conversation main > #conversation { gap:6px; }
 .standalone-conversation #conversation-companion { padding:12px; gap:12px; border-radius:18px; }
 .standalone-conversation #conversation-companion pre { font-size:9px; }
 .standalone-conversation .companion-caption { font-size:17px; }
 .standalone-conversation .companion-name { font-size:10px; letter-spacing:.12em; }
 .standalone-conversation #conversation-audio-tools button { padding-inline:10px; }
 .standalone-conversation #conversation-audio-state { grid-column:1 / -1; grid-row:3; }
 .standalone-conversation #conversation:has(#conversation-diagnostics[open]) { grid-template-rows:auto auto minmax(220px,50dvh) auto auto auto auto; }
}
@media(max-height:650px) {
 .standalone-conversation main > #conversation { overflow:auto; }
 .standalone-conversation #conversation-companion { padding-block:4px; }
 .standalone-conversation #conversation-companion pre { font-size:8px; }
 .standalone-conversation #conversation-timeline { min-height:160px; }
}
@media(prefers-reduced-motion:reduce) { #conversation-companion pre { animation:none; } }

/* Listening controls belong to the independent conversation, not diagnostics. */
#conversation-sound-controls { display:flex; align-items:center; justify-content:center; gap:12px; flex-basis:100%; color:var(--muted); font-size:14px; }
#conversation-sound-controls input { width:min(180px,45vw); min-height:36px; accent-color:var(--accent); }

/* Worker commentary is inspectable below; the chat keeps one latest update per session. */
.standalone-conversation #conversation-replies { overflow:visible; min-height:0; }
.standalone-conversation #conversation-replies > section:has(#conversation-answers) { display:none; }
.standalone-conversation .session-update { border-inline-start:2px solid var(--line)!important; border-radius:0!important; padding-block:6px!important; }
.standalone-conversation .session-update .reply-text { font-size:14px; color:var(--muted); }
.standalone-conversation .session-update button { min-height:44px; font-size:14px; background:transparent; color:var(--muted); border-color:transparent; padding-inline:0; }

/* Long durable actions read in the document, outside a small attention scroller. */
.standalone-conversation main:has(.task-card[data-expanded="true"]) { height:auto; min-height:100dvh; }
.standalone-conversation #conversation:has(.task-card[data-expanded="true"]) { overflow:visible; grid-template-rows:auto auto minmax(300px,55dvh) auto auto auto auto; }
.standalone-conversation #conversation-attention:has(.task-card[data-expanded="true"]) { max-height:none; overflow:visible; }
.task-card > button { margin:8px 6px 0 0; }
.task-card p,.task-card a { overflow-wrap:anywhere; }

/* One composer for writing, attaching and speaking; the same capture state machine. */
#conversation-compose > .conversation-tools { align-items:center; }
#conversation-compose #conversation-voice { margin-left:auto; padding:0; }
#conversation-compose #conversation-voice .conversation-tools { margin:0; gap:8px; }
.standalone-conversation #conversation-compose #conversation-talk { min-width:48px; width:auto; min-height:48px; padding:8px 12px; border-radius:50%; font-size:20px; }
#conversation-compose #conversation-voice-state { display:block; margin:6px 0 0; }
#conversation-compose #conversation-voice-state:empty { display:none; }
.image-choices { display:flex; flex-wrap:wrap; gap:10px; margin:8px 0; }
#conversation-compose .image-choice { display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:500; min-width:0; flex:1 1 160px; }
.image-choice input { max-width:100%; width:100%; font-size:14px; }
@media(max-width:480px) {
 #conversation-compose > .conversation-tools { gap:8px; }
 #conversation-compose #conversation-voice { margin-left:0; flex:1; }
 #conversation-compose #conversation-voice .conversation-tools { justify-content:flex-end; }
}

.composer-actions { display:grid; grid-template-columns:minmax(44px,1fr) auto auto; gap:8px; }
#conversation-compose .composer-actions > #conversation-voice { grid-column:2; }
#conversation-compose .composer-actions > #conversation-send { grid-column:3; }
#conversation-compose .composer-actions:has(#conversation-visual[open]) > #conversation-voice { grid-column:1 / 3; }
#conversation-compose .composer-actions #conversation-voice .conversation-tools { flex-wrap:nowrap; }
#conversation-compose .composer-actions #conversation-visual[open] { grid-column:1 / -1; }
.standalone-conversation #conversation-visual > summary { width:44px; text-align:center; font-size:22px; color:var(--accent); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#conversation-compose .image-choice { position:relative; flex:1 1 120px; align-items:center; justify-content:center; min-height:46px; padding:10px; border:1px solid var(--line); border-radius:12px; cursor:pointer; }
#conversation-compose .image-choice:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.image-choice input { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
#conversation-compose #conversation-image-state { display:block; font-size:14px; }
@media(max-height:650px) {
 .standalone-conversation main > #conversation { grid-template-rows:auto auto minmax(40px,1fr) auto auto auto auto; }
 .standalone-conversation #conversation-timeline { min-height:40px; }
}

/* Keep controls anchored while replies and observer labels change. */
.standalone-conversation main > #conversation { flex-shrink:1; grid-template-rows:auto auto minmax(0,1fr) auto 88px 0px 44px; overflow:hidden; }
.standalone-conversation #conversation-timeline { min-height:0; overflow:auto; }
.standalone-conversation #conversation-audio-tools { height:88px; align-content:start; overflow:auto; }
.standalone-conversation #conversation-player:not([hidden]) { position:fixed; bottom:12px; left:50%; transform:translateX(-50%); z-index:5; width:min(92vw,700px); padding:8px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.standalone-conversation #conversation-compose { position:relative; }
.standalone-conversation #conversation-message { height:60px; resize:none; }
.standalone-conversation #conversation-compose #conversation-talk { width:48px; height:48px; min-width:48px; padding:6px; font-size:22px; }
.standalone-conversation #conversation-compose #conversation-talk[aria-pressed="true"] { color:var(--ink); background:var(--panel); border:3px solid var(--accent); }
#conversation-compose-status { height:40px; overflow:auto; flex:0 0 40px; font-size:14px; line-height:20px; }
#conversation-compose #conversation-send-state,#conversation-compose #conversation-voice-state { position:static; margin:0; padding:0; font-size:14px; }
#conversation-visual > summary { list-style:none; }
#conversation-visual > summary::-webkit-details-marker { display:none; }
#conversation-visual > summary > span:first-child { display:inline; }
@media(max-height:650px) {
 .standalone-conversation main > #conversation { grid-template-rows:auto auto minmax(0,1fr) auto 56px 0px 44px; }
 .standalone-conversation #conversation-audio-tools { height:56px; }
}
.standalone-conversation #conversation:has(#conversation-diagnostics[open]),.standalone-conversation #conversation:has(#conversation-visual[open]) { overflow:auto; }

.standalone-conversation #conversation-audio-tools #conversation-player:not([hidden]) { position:static; transform:none; width:100%; padding:0; border:0; border-radius:0; grid-row:auto; }
.standalone-conversation #conversation:has(#conversation-diagnostics[open]) { grid-template-rows:auto auto minmax(220px,50dvh) auto auto auto auto; }

#conversation-visual > summary .attachment-icon { display:block; width:24px; height:24px; flex:none; }

#conversation-compose #conversation-voice-discard { width:48px; min-width:48px; height:48px; padding:6px; border-radius:50%; font-size:28px; color:var(--ink); background:var(--panel); border:2px solid #bd4949; }
#conversation-compose #conversation-voice-discard:hover { background:color-mix(in srgb,#bd4949 16%,var(--panel)); }

/* Compact fixed presence above the large, independently scrolling conversation. */
.standalone-conversation header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; min-height:88px; height:88px; padding:4px 0; }
.standalone-conversation header .identity { min-width:0; }
.standalone-conversation header .identity > .resonance,.standalone-conversation header .identity > h1,.standalone-conversation header #provider { display:none; }
.standalone-conversation header #conversation-companion { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; width:100%; min-width:0; padding:0; border:0; border-radius:0; background:none; }
.standalone-conversation header #conversation-companion pre { font-size:7px; line-height:1.05; white-space:pre; }
.standalone-conversation header #conversation-companion > div { min-width:0; }
.standalone-conversation header .companion-name { font-size:14px; line-height:20px; letter-spacing:0; }
.standalone-conversation header .companion-caption { font-size:14px; line-height:1.2; margin:4px 0; }
.standalone-conversation header .companion-phases { gap:3px 8px; max-height:32px; overflow:auto; }
.standalone-conversation header .companion-phases > span { font-size:12px; }
.standalone-conversation header .header-tools { align-self:start; padding-top:4px; }
.standalone-conversation main > #conversation { grid-template-rows:auto minmax(0,1fr) auto 72px 44px; }
.standalone-conversation #conversation-attention { grid-row:1; }
.standalone-conversation #conversation-timeline { grid-row:2; }
.standalone-conversation #conversation-compose { grid-row:3; }
.standalone-conversation #conversation-audio-tools { grid-row:4; height:72px; }
.standalone-conversation #conversation-diagnostics { grid-row:5; }
.standalone-conversation #conversation:has(#conversation-diagnostics[open]) { grid-template-rows:auto minmax(220px,50dvh) auto auto auto; }
@media(max-height:650px) {
 .standalone-conversation header { height:76px; min-height:76px; }
 .standalone-conversation header #conversation-companion pre { font-size:6px; }
 .standalone-conversation main > #conversation { grid-template-rows:auto minmax(0,1fr) auto 56px 44px; }
 .standalone-conversation #conversation-audio-tools { height:56px; }
}

.standalone-conversation header .identity > h1 { display:block; position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* Familiar two-row chat composer. Routine phases belong to the header presence. */
.standalone-conversation #conversation-compose { padding:8px; border-radius:20px; }
.standalone-conversation #conversation-message { display:block; width:100%; height:44px; min-height:44px; max-height:44px; padding:10px 8px; line-height:22px; resize:none; }
.standalone-conversation #conversation-compose > .composer-actions { margin-top:4px; grid-template-columns:44px minmax(0,1fr) 64px; gap:4px; min-height:44px; }
.standalone-conversation #conversation-compose #conversation-voice { min-width:0; margin:0; }
.standalone-conversation #conversation-compose #conversation-voice .conversation-tools { justify-content:flex-end; gap:6px; flex-wrap:nowrap; }
/* One vector vocabulary, independent of platform emoji fonts. */
.control-icon { width:24px; height:24px; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#conversation-voice-replies { display:grid; place-items:center; width:44px; min-width:44px; height:44px; padding:0; border-radius:14px; color:var(--muted); }
#conversation-voice-replies[data-voice-state="on"] { color:var(--bg); background:var(--accent); border-color:var(--accent); }
#conversation-voice-replies .voice-waves,#conversation-voice-replies .voice-paused { display:none; }
#conversation-voice-replies[data-voice-state="on"] .voice-waves,#conversation-voice-replies[data-voice-state="paused"] .voice-paused { display:block; }
#conversation-voice-replies[data-voice-state="on"] .voice-muted,#conversation-voice-replies[data-voice-state="paused"] .voice-muted { display:none; }
#conversation-voice-replies[data-voice-state="paused"] { color:var(--accent); border-color:var(--accent); }
.image-choice .control-icon { flex:none; width:28px; height:28px; }
.standalone-conversation #conversation-compose #conversation-talk { display:grid; place-items:center; padding:0; font-size:0; }
.standalone-conversation #conversation-talk::before { content:""; display:block; width:24px; height:24px; background:currentColor; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%229%22%20y%3D%222%22%20width%3D%226%22%20height%3D%2213%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M5%2010v2a7%207%200%200%200%2014%200v-2M12%2019v3m-4%200h8%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.standalone-conversation #conversation-compose #conversation-talk,.standalone-conversation #conversation-compose #conversation-voice-discard { width:44px; height:44px; min-width:44px; min-height:44px; padding:6px; }
.standalone-conversation #conversation-send { width:64px; min-width:64px; height:44px; padding:8px; }
.standalone-conversation #conversation-compose-status { height:auto; flex-basis:auto; overflow:visible; }
.standalone-conversation #conversation-compose-status p { display:block; }
.standalone-conversation #conversation-compose-status:has([data-attention="true"]:not(:empty)) p:not([data-attention="true"]) { display:none; }
.standalone-conversation #conversation-compose-status p[data-attention="true"]:not(:empty) { display:block; margin:0 0 8px; color:var(--warn); overflow-wrap:anywhere; }
.standalone-conversation #conversation-compose-status:not(:has([data-attention="true"]:not(:empty))) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
/* Attachment choices open from the paperclip; their sheet does not stretch the dock. */
.standalone-conversation #conversation-visual[open] { position:static; width:auto; }
.standalone-conversation #conversation-compose .composer-actions #conversation-visual[open] { grid-column:1; }
.standalone-conversation #conversation-compose .composer-actions:has(#conversation-visual[open]) > #conversation-voice { grid-column:2; }
.standalone-conversation #conversation-visual[open] > :not(summary) { position:relative; }
.standalone-conversation #conversation-attachment-sheet { position:absolute!important; bottom:calc(100% + 8px); left:0; width:100%; max-height:min(55dvh,420px); overflow:auto; padding:12px; border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:0 10px 30px #0006; z-index:6; }
.standalone-conversation #conversation-attachment-sheet .image-choices { margin:0; }
.standalone-conversation #conversation-visual > summary { width:44px; height:44px; padding:10px; }
.standalone-conversation #conversation:has(#conversation-visual[open]):not(:has(#conversation-diagnostics[open])) { overflow:visible; }

/* Beacon belongs to the fixed presence; its detailed controls stay under the hood. */
.standalone-conversation header #conversation-sound-toggle { width:44px; height:44px; min-width:44px; padding:6px; font-size:0; }
.standalone-conversation header #conversation-sound-toggle::before { content:"≈"; font-size:24px; }
.standalone-conversation header #conversation-sound-toggle[aria-pressed="true"] { color:var(--bg); background:var(--accent); }
.standalone-conversation main > #conversation { grid-template-rows:auto minmax(0,1fr) auto auto 44px; }
.standalone-conversation #conversation-audio-tools { height:auto; }
.standalone-conversation #conversation-audio-tools:has(#conversation-player[hidden]) { display:none; }

.standalone-conversation header .companion-name { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.standalone-conversation header .companion-caption { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.standalone-conversation header .companion-phases { max-height:16px; overflow:hidden; flex-wrap:nowrap; }
.standalone-conversation header .companion-phases > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* The conversational caption has the full row formerly occupied by the login label. */
.standalone-conversation #feedback:empty { display:none; }
.standalone-conversation #conversation-presence { flex-shrink:0; height:24px; min-height:24px; overflow:hidden; }
.standalone-conversation #conversation-presence > .companion-caption { margin:0; font-size:16px; line-height:24px; white-space:nowrap; width:max-content; max-width:none; }
.standalone-conversation header .header-tools { flex-wrap:wrap; justify-content:flex-end; max-width:150px; }
.standalone-conversation #conversation-account { display:block; text-align:left; color:var(--muted); font-size:14px; line-height:20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

#conversation-compose #conversation-voice-discard { position:relative; display:grid; place-items:center; font-size:0; border-radius:14px; border-width:1px; background:color-mix(in srgb,#bd4949 12%,var(--panel)); color:#ffb5b5; }
#conversation-compose #conversation-voice-discard::before,#conversation-compose #conversation-voice-discard::after { content:""; position:absolute; left:50%; top:50%; width:16px; height:2px; border-radius:2px; background:currentColor; transform:translate(-50%,-50%) rotate(45deg); }
#conversation-compose #conversation-voice-discard::after { transform:translate(-50%,-50%) rotate(-45deg); }

/* One full-width status lane below all header tools; keep a generous touch target. */
.standalone-conversation #conversation-presence { margin-top:6px; }
.standalone-conversation .companion-status-track { display:flex; align-items:center; width:max-content; min-width:100%; height:24px; white-space:nowrap; }
.standalone-conversation #conversation-presence .companion-phases { margin:0; padding:0; display:flex; flex-wrap:nowrap; gap:12px; overflow:visible; max-height:none; line-height:24px; }
.standalone-conversation #conversation-presence .companion-phases > span { flex:none; white-space:nowrap; font-size:14px; }
.standalone-conversation .companion-status-track > .companion-caption { margin:0; font-size:16px; line-height:24px; white-space:nowrap; }
.standalone-conversation .companion-status-track:has(.companion-phases > span) > .companion-caption { display:none; }
.standalone-conversation header #conversation-sound-toggle { display:grid; place-items:center; padding:0; border:0; background:transparent; }
.standalone-conversation header #conversation-sound-toggle::before { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--line); border-radius:50%; font-size:17px; }
.standalone-conversation header #conversation-sound-toggle[aria-pressed="true"] { background:transparent; color:var(--bg); }
.standalone-conversation header #conversation-sound-toggle[aria-pressed="true"]::before { background:var(--accent); }

/* Reply playback sits beside the composer; its controls never create a bottom row. */
.standalone-conversation main > #conversation { grid-template-rows:auto minmax(0,1fr) auto 44px; }
.standalone-conversation #conversation:has(#conversation-diagnostics[open]),.standalone-conversation #conversation:has(.task-card[data-expanded="true"]) { grid-template-rows:auto minmax(220px,50dvh) auto auto; }
.standalone-conversation #conversation-dock { grid-row:3; display:grid; grid-template-columns:minmax(0,1fr); align-items:end; gap:8px; min-width:0; }
.standalone-conversation #conversation-dock:has(#conversation-player:not([hidden])) { grid-template-columns:96px minmax(0,1fr); }
.standalone-conversation #conversation-dock #conversation-compose { grid-row:1; grid-column:1; min-width:0; }
.standalone-conversation #conversation-dock:has(#conversation-player:not([hidden])) #conversation-compose { grid-column:2; }
.standalone-conversation #conversation-dock #conversation-audio-tools { grid-row:1; grid-column:1; min-width:0; width:96px; }
.standalone-conversation #conversation-audio-tools #conversation-player:not([hidden]) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; width:100%; padding:0; }
.standalone-conversation #conversation-player #conversation-playing { grid-column:1 / -1; grid-row:1; min-width:0; font-size:12px; overflow-wrap:anywhere; }
.standalone-conversation #conversation-player #conversation-play { grid-column:1; grid-row:2; }
.standalone-conversation #conversation-player #conversation-stop { grid-column:2; grid-row:2; }
.standalone-conversation #conversation-player #conversation-play,.standalone-conversation #conversation-player #conversation-stop { min-width:44px; width:44px; min-height:44px; padding:4px; font-size:11px; line-height:15px; border-radius:12px; }
.standalone-conversation #conversation-player #conversation-audio-state { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.standalone-conversation #conversation-diagnostics { grid-row:4; }
@media(max-width:380px) {
 .standalone-conversation #conversation-dock #conversation-compose { padding:6px; }
 .standalone-conversation #conversation-dock .composer-actions { grid-template-columns:44px minmax(0,1fr) 56px; gap:2px; }
 .standalone-conversation #conversation-dock #conversation-send { width:56px; min-width:56px; }
}

/* Familiar audio glyphs keep their full keyboard/screen-reader labels and touch targets. */
.standalone-conversation #conversation-player #conversation-play,.standalone-conversation #conversation-player #conversation-stop { position:relative; display:grid; place-items:center; padding:0; font-size:0; }
.standalone-conversation #conversation-play::before { content:""; display:block; width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:12px solid currentColor; }
.standalone-conversation #conversation-play[data-playback-state="pause"]::before { width:12px; height:14px; border:0; background:linear-gradient(to right,currentColor 0 4px,transparent 4px 8px,currentColor 8px 12px); }
.standalone-conversation #conversation-stop::before { content:""; display:block; width:12px; height:12px; border-radius:1px; background:currentColor; }
.standalone-conversation #conversation-play::before,.standalone-conversation #conversation-stop::before { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.standalone-conversation #conversation-play[data-playback-state="play"]::before { transform:translate(calc(-50% + 1px),-50%); }
.standalone-conversation #conversation-follow-control:not([hidden]) { grid-column:1 / -1; grid-row:4; display:flex; align-items:center; justify-content:center; gap:6px; min-height:28px; font-size:12px; font-weight:400; }
.standalone-conversation #conversation-follow { width:18px; height:18px; margin:0; accent-color:var(--accent); }

/* The inspector owns a readable overlay, leaving the underlying chat/capture mounted. */
.standalone-conversation main > #conversation { grid-template-rows:auto minmax(0,1fr) auto; }
.standalone-conversation main:has(#conversation-diagnostics[open]) { height:100dvh; min-height:0; }
.standalone-conversation #conversation:has(#conversation-diagnostics[open]) { overflow:hidden; grid-template-rows:auto minmax(0,1fr) auto; }
.standalone-conversation #conversation-diagnostics:not([open]) { display:none; }
.standalone-conversation #conversation-diagnostics[open] { position:fixed; inset:var(--inspector-top,100px) 12px 12px; z-index:20; overflow:auto; overscroll-behavior:contain; margin:0; padding:12px 16px 24px; border:1px solid var(--line); border-radius:18px; background:var(--bg); box-shadow:0 16px 60px #0008; }
.standalone-conversation #conversation-diagnostics[open] > summary { position:sticky; top:-12px; z-index:1; background:var(--bg); min-height:44px; }
.standalone-conversation #conversation-diagnostics[open] > summary > span { font-size:0; }
.standalone-conversation #conversation-diagnostics[open] > summary > span::after { content:"×"; font-size:24px; }
.standalone-conversation header #conversation-inspect { display:grid; place-items:center; width:44px; height:44px; padding:8px; }
.standalone-conversation header #conversation-inspect[hidden] { display:none; }
.standalone-conversation header #conversation-inspect[aria-expanded="true"] { color:var(--accent); border-color:var(--accent); }
.standalone-conversation header .header-tools { gap:4px; }
.standalone-conversation header .apps-return { display:grid; place-items:center; width:44px; height:44px; padding:4px; font-size:0; }
.standalone-conversation header .apps-return::before { content:"▦"; font-size:22px; }

@media(max-width:480px) {
 .standalone-conversation header { gap:6px; padding-block:0; height:88px; min-height:88px; }
 .standalone-conversation header #conversation-companion { gap:6px; }
 .standalone-conversation header #conversation-companion pre { font-size:6px; }
 .standalone-conversation header .header-tools { display:grid; grid-template-columns:44px 44px; width:88px; max-width:88px; gap:0; padding-top:0; }
}

@media(max-width:380px) {
 .standalone-conversation header #conversation-companion pre { font-size:5px; }
}