:root {
  --bg: #000;
  --card: #111;
  --card-border: #1f1f1f;
  --green: #22e06b;
  --text: #e6e6e6;
  --muted: #8a8a8a;
  --radius: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  overscroll-behavior: none;
}

body {
  user-select: none;
}

input, textarea, .chat-list, .msg-tool-body {
  user-select: text;
}

button {
  font-family: inherit;
  cursor: pointer;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.screen {
  display: none;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.screen.active { display: flex; }

/* --- shared header --- */
.header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--card-border);
}
.header-title { font-size: 17px; font-weight: 600; flex: 1; min-width: 0; }
.header-sub { font-size: 12px; color: var(--muted); }
.icon-btn {
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--text); font-size: 20px;
  border-radius: 12px;
}
.icon-btn:active { background: var(--card); }

/* --- home --- */
.home-title { padding: 20px 16px 8px; font-size: 24px; font-weight: 700; }
.section-label { padding: 16px 16px 8px; font-size: 13px; color: var(--muted); }
.list { flex: 1 1 auto; overflow-y: auto; padding: 0 16px 100px; }
/* Lists that sit directly under a .header (host, agent screens) need top spacing the header's
   border-bottom doesn't provide; home's list already has home-title/section-label above it. */
.header + .list { padding-top: 16px; }

/* --- install hint (home) --- */
.install-hint { margin: 12px 16px 0; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.install-hint-text { flex: 1; font-size: 13px; line-height: 1.4; }
.install-hint-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.install-hint-btn { background: var(--green); color: #000; border: none; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; min-height: 36px; white-space: nowrap; }
.install-hint-dismiss { background: transparent; border: none; color: var(--muted); font-size: 18px; min-width: 32px; min-height: 32px; }
.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.card:active { background: #161616; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--muted); }
.dot.online { background: var(--green); box-shadow: 0 0 6px var(--green); }
.card-main { flex: 1; min-width: 0; }
.card-title { font-size: 15px; font-weight: 600; }
.card-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.card-menu { font-size: 20px; color: var(--muted); padding: 10px; }

.empty-state { padding: 32px 24px; color: var(--muted); font-size: 14px; line-height: 1.6; text-align: center; }

.fab {
  position: absolute;
  right: 20px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--green);
  color: #000;
  border: none;
  font-size: 28px;
  font-weight: 300;
  box-shadow: 0 4px 16px rgba(34, 224, 107, 0.35);
}
.fab:active { transform: scale(0.95); }

/* --- bottom sheet --- */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: none; z-index: 10;
}
.sheet-backdrop.open { display: block; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--card);
  border-top: 1px solid var(--card-border);
  border-radius: 20px 20px 0 0;
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.2s ease-out;
  z-index: 11;
}
.sheet-backdrop.open .sheet { transform: translateY(0); }
.sheet-handle { width: 36px; height: 4px; background: var(--card-border); border-radius: 2px; margin: 6px auto 14px; }
.sheet-title { font-size: 15px; font-weight: 600; margin-bottom: 10px; padding: 0 4px; }
.sheet-option {
  display: block;
  width: 100%;
  text-align: left;
  background: #1a1a1a;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 14px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
.sheet-option:active { background: #202020; }

/* --- pairing screen --- */
.pairing-screen { position: relative; background: #000; }
#pairingVideo { width: 100%; flex: 1; object-fit: cover; background: #000; }
.pairing-frame {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  width: 70vw; height: 70vw; max-width: 280px; max-height: 280px;
  border: 2px solid var(--green); border-radius: 20px; pointer-events: none;
}
.pairing-hint {
  position: absolute; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom));
  text-align: center; color: #fff; font-size: 13px; padding: 0 24px;
}
.pairing-form { padding: 20px 16px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%; background: var(--card); border: 1px solid var(--card-border);
  border-radius: 12px; padding: 12px; color: var(--text); font-size: 15px;
}
.btn-primary {
  width: 100%; background: var(--green); color: #000; border: none;
  border-radius: 12px; padding: 14px; font-size: 15px; font-weight: 600; min-height: 44px;
}
.btn-primary:active { opacity: 0.85; }
.btn-secondary {
  width: 100%; background: transparent; color: var(--text); border: 1px solid var(--card-border);
  border-radius: 12px; padding: 14px; font-size: 14px; min-height: 44px;
}

/* --- status chip --- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 3px 9px; border-radius: 10px; white-space: nowrap;
}
.chip-idle { background: #2a2a2a; color: var(--muted); }
.chip-working { background: rgba(34,224,107,0.15); color: var(--green); }
.chip-working .chip-pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  animation: pulse 1.2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.chip-blocked { background: rgba(224,170,34,0.18); color: #e0aa22; }
.chip-done { background: #1c3a2a; color: #6fcf97; }
.chip-unknown { background: #222; color: var(--muted); }

/* --- host screen agent rows (one line: badge, name, status dot, ⋯) --- */
.agent-row { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 10px 8px 10px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; }
.agent-row:active { background: #161616; }
.agent-icon { width: 36px; height: 36px; border-radius: 10px; background: #1a1a1a; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: var(--green); flex: 0 0 auto; }
.agent-icon-accent { background: var(--green); color: #000; }
.agent-main { flex: 1; min-width: 0; }
.agent-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-cwd { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.agent-status { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.agent-status-text { font-size: 11px; color: #e0aa22; white-space: nowrap; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--muted); }
.status-dot-working { background: var(--green); animation: pulse 1.2s infinite; }
.status-dot-blocked { background: #e0aa22; }
.agent-more-btn { flex: 0 0 auto; min-width: 40px; min-height: 40px; background: transparent; border: none; color: var(--muted); font-size: 20px; border-radius: 10px; }
.agent-more-btn:active { background: #1a1a1a; }

/* --- agent details sheet --- */
.agent-details-body { margin-bottom: 14px; }
.agent-details-row { display: flex; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--card-border); font-size: 13px; }
.agent-details-row:last-child { border-bottom: none; }
.agent-details-label { flex: 0 0 76px; color: var(--muted); }
.agent-details-value { flex: 1; min-width: 0; word-break: break-all; }
.sheet-option + .sheet-option { margin-top: 8px; }
.sheet-option.sheet-danger { margin-top: 16px; color: #ff6b6b; }

/* --- secondary (demoted) row, e.g. "herdr 全体を見る" --- */
.agent-row-secondary { background: transparent; border: none; opacity: 0.6; }
.agent-row-secondary .agent-icon { background: transparent; color: var(--muted); }
.agent-row-secondary .agent-name { font-weight: 500; font-size: 13px; color: var(--muted); }

/* --- new-session sheet --- */
.segmented { display: flex; background: #1a1a1a; border-radius: 12px; padding: 3px; margin-bottom: 16px; gap: 2px; }
.segmented-btn { flex: 1; min-height: 40px; background: transparent; border: none; border-radius: 10px; color: var(--muted); font-size: 13px; font-weight: 600; font-family: inherit; }
.segmented-btn.active { background: var(--green); color: #000; }

.dir-list-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; padding: 0 4px; }
.dir-list { max-height: 240px; overflow-y: auto; margin-bottom: 16px; }
.dir-row { background: #1a1a1a; border: 1px solid var(--card-border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.dir-row.selected { border-color: var(--green); background: rgba(34,224,107,0.08); }
.dir-row-main { font-size: 14px; font-weight: 600; }
.dir-row-full { font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.spinner { width: 24px; height: 24px; margin: 12px auto; border: 3px solid var(--card-border); border-top-color: var(--green); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- agent screen --- */
.tabs { flex: 0 0 auto; display: flex; border-bottom: 1px solid var(--card-border); }
.tab-btn { flex: 1; padding: 12px; background: transparent; border: none; color: var(--muted); font-size: 14px; border-bottom: 2px solid transparent; min-height: 44px; }
.tab-btn.active { color: var(--green); border-bottom-color: var(--green); }
.tab-panels { flex: 1 1 auto; min-height: 0; position: relative; }
.tab-panel { position: absolute; inset: 0; display: none; flex-direction: column; min-height: 0; }
.tab-panel.active { display: flex; }

.chat-list { flex: 1 1 auto; overflow-y: auto; padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 10px; user-select: text; }
/* Children must not shrink: the list scrolls, and a shrunk run summary (overflow: hidden) collapses to a hairline. */
.chat-list > * { flex-shrink: 0; }
.msg-row { display: flex; }
.msg-row-right { justify-content: flex-end; }
.msg-row-left { justify-content: flex-start; }
.bubble { max-width: 82%; padding: 10px 13px; border-radius: 16px; font-size: 14px; line-height: 1.5; word-wrap: break-word; }
.bubble p { margin: 0 0 6px; }
.bubble p:last-child { margin-bottom: 0; }
.bubble code { background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 5px; font-size: 13px; }
.bubble pre code { background: none; padding: 0; border-radius: 0; }
.bubble pre { background: rgba(255,255,255,0.06); padding: 8px; border-radius: 8px; overflow-x: auto; font-size: 12.5px; }
/* --- copy buttons: always visible (no hover on phones), an icon drawn by CSS (no font to miss), 32px --- */
:root {
  --icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}
.code-wrap { position: relative; }
.code-wrap pre { padding-right: 44px; min-height: 40px; }
.copy-btn { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0; background: #222; border: 1px solid #2e2e2e; border-radius: 8px; color: var(--text); user-select: none; }
.copy-btn::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--icon-copy) center / contain no-repeat; mask: var(--icon-copy) center / contain no-repeat; }
.copy-btn:active { background: #333; }
.copy-btn.done { color: var(--green); }
.copy-btn.done::before { -webkit-mask-image: var(--icon-check); mask-image: var(--icon-check); }
.msg-row > .copy-btn { position: static; align-self: flex-end; flex: 0 0 auto; background: none; border: none; color: var(--muted); }
.msg-row > .copy-btn::before { width: 18px; height: 18px; }
.bubble-user { background: var(--green); color: #000; border-bottom-right-radius: 4px; }
.bubble-assistant { background: var(--card); border: 1px solid var(--card-border); border-bottom-left-radius: 4px; }

.msg { font-size: 13px; }
.msg-thinking summary { color: var(--muted); font-size: 12px; cursor: pointer; padding: 2px 4px; }
.msg-thinking .msg-body { color: var(--muted); font-size: 12.5px; padding: 6px 8px; }
.msg-tool summary { cursor: pointer; font-size: 12.5px; color: #9ac9ff; background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: 6px 10px; }
.msg-tool-body { font-size: 11.5px; color: var(--muted); white-space: pre-wrap; max-height: 160px; overflow-y: auto; background: #0a0a0a; border-radius: 8px; padding: 8px; margin-top: 4px; }

/* --- collapsed run (thinking/tool_use/tool_result between two bubbles) --- */
.msg-run-summary {
  font-size: 12px; color: var(--muted); padding: 6px 10px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-run-summary:active { background: rgba(255,255,255,0.04); border-radius: 8px; }
.msg-run-expanded { display: flex; flex-direction: column; gap: 6px; }
.msg-run-expanded > .msg-run-summary { padding-bottom: 0; }

.chat-empty { padding: 32px 24px; color: var(--muted); font-size: 13px; line-height: 1.6; text-align: center; }

.detail-toggle-btn { color: var(--muted); font-weight: 600; }
.detail-toggle-btn.active-mode { color: var(--green); }

.approval-bar { display: none; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--card-border); }
.approval-bar.visible { display: flex; }
.approval-bar button { flex: 1; min-height: 44px; border-radius: 12px; font-size: 14px; font-weight: 600; border: none; }
.btn-approve { background: var(--green); color: #000; }
.btn-reject { background: #2a1a1a; color: #e07676; border: 1px solid #3a2222; }

.composer { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--card-border); }
.composer textarea {
  flex: 1; resize: none; background: var(--card); border: 1px solid var(--card-border);
  border-radius: 14px; padding: 11px 13px; color: var(--text); font-size: 15px; max-height: 116px;
  min-height: 44px; line-height: 20px; user-select: text;
}
.send-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--green); border: none; color: #000; font-size: 18px; flex: 0 0 auto; }
.send-btn:active { opacity: 0.85; }
.image-btn {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  background: var(--card); border: 1px solid var(--card-border); color: var(--text); font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.image-btn:active { background: #1a1a1a; }

/* --- composer image chips (picked files, mid-shrink/upload/error) --- */
.composer-chips { display: flex; gap: 8px; padding: 10px 12px 0; overflow-x: auto; }
.composer-chips:empty { display: none; }
.composer-chip { position: relative; width: 56px; height: 56px; flex: 0 0 auto; border-radius: 10px; overflow: hidden; background: #1a1a1a; }
.composer-chip-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.composer-chip-progress-track { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,0.12); }
.composer-chip-progress-fill { height: 100%; background: var(--green); transition: width 0.15s linear; }
.composer-chip.state-error .composer-chip-thumb { opacity: 0.3; filter: grayscale(1); }
.composer-chip-error-badge {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #e07676; text-align: center; padding: 4px; line-height: 1.3; background: rgba(0,0,0,0.35);
}
.composer-chip-cancel {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,0.7); color: #fff; border: none; font-size: 12px; line-height: 20px; padding: 0;
}

/* --- image pill in a user chat bubble, in place of the raw uploaded path --- */
.image-pill {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600;
  background: rgba(0,0,0,0.12); color: #063; border-radius: 10px; padding: 4px 9px; margin: 0 4px 4px 0;
}

.term-header { flex: 0 0 auto; display: flex; justify-content: flex-end; padding: 8px 12px; border-bottom: 1px solid var(--card-border); }
.operate-toggle-btn { min-height: 36px; padding: 6px 14px; border-radius: 10px; background: #1a1a1a; border: 1px solid var(--card-border); color: var(--text); font-size: 13px; font-weight: 600; }
.operate-toggle-btn.active { background: rgba(224,170,34,0.18); border-color: #5a4010; color: #e0aa22; }
.operate-amber-bar { flex: 0 0 auto; background: rgba(224,170,34,0.18); color: #e0aa22; font-size: 12px; text-align: center; padding: 6px 10px; }
.sheet-text { font-size: 14px; color: var(--text); line-height: 1.6; padding: 0 4px; margin-bottom: 16px; }

#termWrap { flex: 1 1 auto; min-height: 0; position: relative; background: #000; }
.term-instance { position: absolute; inset: 0; user-select: text; display: none; overflow-x: auto; }
.term-instance.active { display: block; }
.term-instance .xterm-viewport { scrollbar-width: none; }
.term-instance .xterm-viewport::-webkit-scrollbar { display: none; }
.keybar { flex: 0 0 auto; display: flex; gap: 4px; padding: 6px; background: #0a0a0a; border-top: 1px solid var(--card-border); overflow-x: auto; }
.keybar-btn { flex: 0 0 auto; min-width: 44px; min-height: 36px; padding: 6px 10px; background: var(--card); color: var(--text); border: 1px solid var(--card-border); border-radius: 8px; font-size: 13px; }
.keybar-btn.active { background: var(--green); color: #000; }

/* --- misc --- */
.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom));
  background: var(--card); border: 1px solid var(--card-border); border-radius: 12px;
  padding: 12px 16px; font-size: 13px; text-align: center; z-index: 20; display: none;
}
.toast.visible { display: block; }
.error-text { color: #e07676; font-size: 13px; padding: 8px 16px; }

.md-h { margin: 12px 0 4px; font-size: 1em; font-weight: 700; }

/* --- choices and keys under the chat --- */
.choice-bar { display: none; flex-direction: column; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--card-border); }
.choice-bar.visible { display: flex; max-height: 70vh; overflow: auto; }
.choice-question { font-size: 13px; color: var(--muted); padding: 0 2px 2px; }
.choice-btn { text-align: left; min-height: 44px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--card-border); color: var(--text); font-size: 14px; }
.choice-btn.selected { border-color: var(--green); }
.choice-btn:active { background: rgba(255,255,255,0.06); }
.key-row { display: none; gap: 6px; padding: 6px 12px; border-top: 1px solid var(--card-border); overflow-x: auto; }
.key-row.visible { display: flex; }
.keyrow-btn { flex: 1 0 auto; min-width: 52px; min-height: 40px; border-radius: 10px; background: #1a1a1a; border: 1px solid var(--card-border); color: var(--text); font-size: 14px; }
#composerKeysBtn.active { border-color: var(--green); color: var(--green); }
.md-table { overflow-x: auto; margin: 4px 0 8px; }
.md-table table { border-collapse: collapse; font-size: 12.5px; }
.md-table th, .md-table td { border: 1px solid var(--card-border); padding: 4px 8px; text-align: left; white-space: nowrap; }
.md-table th { color: var(--muted); font-weight: 600; }
.msg-pending { flex-direction: column; align-items: flex-end; opacity: 0.6; }
.msg-pending-tag { font-size: 11px; color: var(--muted); margin-top: 3px; }
.agent-harness { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.app-version { margin: 24px 16px 0; text-align: center; font-size: 11px; color: var(--muted); opacity: 0.6; user-select: text; }

.log-body { max-height: 60vh; overflow: auto; font-size: 11px; white-space: pre-wrap; word-break: break-all; color: var(--muted); margin: 0; }
.msg-call > summary { display: flex; gap: 8px; align-items: baseline; overflow: hidden; }
.call-name { flex-shrink: 0; }
.call-state { flex-shrink: 0; font-size: 12px; }
.call-state.done { color: var(--green); }
.call-state.failed { color: #ff6b6b; }
.call-state.running { color: var(--muted); }
.call-hint { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.call-label { font-size: 11px; color: var(--muted); margin: 6px 0 2px; }
.msg-subagent { display: flex; align-items: center; gap: 10px; width: 100%; margin: 6px 0; padding: 10px 12px; border: 1px solid #2a2a2a; border-radius: 12px; background: #111; color: inherit; font: inherit; text-align: left; flex-shrink: 0; }
.msg-subagent:disabled { opacity: 0.8; }
.msg-subagent .dot { flex-shrink: 0; }
.msg-subagent-main { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-subagent-kind { color: var(--muted); font-size: 12px; margin-right: 4px; }
.msg-subagent-state { flex-shrink: 0; font-size: 12px; color: var(--muted); }
.choice-context, .choice-call pre { margin: 0 0 8px; padding: 10px; background: #0b0b0b; border: 1px solid #2a2a2a; border-radius: 10px; font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; max-height: 32vh; overflow: auto; color: #ddd; }
.choice-call { margin: 0 0 8px; }
.choice-call summary { color: var(--muted); font-size: 12px; margin-bottom: 6px; cursor: pointer; }