*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* type=search hides Chrome Android's password/card/address VK bar - unstyle it. */
input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

:root {
  --bg:      #e8e6e0;
  --surface: #fff;
  --border:  #dddbd6;
  --text:    #111;
  --muted:   #888;
  --venn-accent: #7b4bb7;
  --venn-accent-dark: #653d9c;
  --venn-accent-soft: #f1eafa;
  --venn-accent-rgb: 123,75,183;
  --user-accent: #3f61aa;
  --venn-response-accent: #c86b1c;
  --circle-situation-text: #1f6b34;
  --circle-world-text: #8c4a16;
  --circle-self-fill: rgba(100,149,237,0.13);
  --circle-situation-fill: rgba(46,160,67,0.13);
  --circle-world-fill: rgba(230,126,34,0.13);
  --toast-success: #18864b;
  --toast-warning: #426273;
  --toast-error: #bd3d31;
  --nav-h:   54px;
  --chrome-bar-h: 54px;
  --chrome-control-h: 42px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  height: 100vh;
  min-height: 100dvh;
}

/* Keep controls and modal chrome from entering browser selection/context-menu
   states; only real edit fields remain selectable. */
button, svg, .logo, .venn-label, .modal-header, .drawer-header,
.modal-drag-handle, .decision-item, .filter-pill, .utility-button,
.modal-card, .slide-drawer, .modal-overlay, .modal-body, .drawer-body,
#venn-wrap, #venn-svg, #venn-svg *, #venn-bottom-tools, #topbar,
#transcript-box, #log, .msg, .msg-text, .msg-meta {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
input, textarea, [contenteditable="true"], .msg-edit {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}
#venn-svg, #venn-svg * {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
#venn-svg circle, #venn-svg text, #venn-svg g {
  outline: none !important;
  user-select: none;
  -webkit-user-select: none;
}

/* ════════════════════ TOP BAR ════════════════════ */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
  display: flex; align-items: center;
  padding: 0 18px; gap: 12px;
}

.logo {
  font-size: 18px; font-weight: 800; letter-spacing: -0.03em; color: #111;
  flex-shrink: 0; margin-right: 4px; display: inline-flex; align-items: center; gap: 7px;
  position: relative; z-index: 121; background: var(--surface); cursor:pointer;
  min-height: 42px; padding: 0 12px 0 8px; border-radius: 7px;
  transition: background .16s ease, color .16s ease;
}
.logo:hover { background: #f0efe9; color: #222; }
.logo-mark { width: 23px; height: 23px; flex-shrink: 0; transform:rotate(180deg); transform-origin:center; }
.logo-word { white-space: nowrap; }
#topbar.topbar-minimal { justify-content: center; }
#topbar.topbar-minimal .logo { margin:0; }
#topbar.topbar-minimal .tb-actions { display:none; }
body.auth-locked #topbar { justify-content:center; }
body.auth-locked #topbar .logo { margin:0; position:static; transform:none; animation:none; }
body.auth-locked #topbar #decision-label-btn,
body.auth-locked #topbar .tb-actions,
body.auth-locked #venn-begin-btn { display:none !important; }
body.auth-locked #topbar.controls-entering .logo {
  position:static; left:auto; margin:0; transform:none; animation:none;
}
#topbar.controls-entering .logo {
  position:absolute;
  left:50%;
  margin:0;
  animation: topbar-logo-to-left .38s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes topbar-logo-to-left {
  from { left:50%; transform:translateX(-50%); }
  to { left:18px; transform:translateX(0); }
}

#decision-label-btn {
  flex: 1; min-width: 0; text-align: center;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 600;
  color: var(--muted); height: 42px; min-height: 42px; padding: 0 12px; border-radius: 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: background .16s ease, color .16s ease;
}
#decision-label-btn:hover { background: #f0efe9; color: #333; }
#decision-label-btn.active { color: #111; }
#decision-label-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; }
.dl-chevron { font-size: 10px; flex-shrink: 0; opacity: 0.5; }

.tb-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
.tb-sep { display: none; }

button {
  padding: 7px 16px; cursor: pointer; border: none; border-radius: 6px;
  font-family: inherit; font-size: 13px; font-weight: 600;
}
button:disabled { opacity: 0.35; cursor: default; }

#talk-btn { position:relative; overflow:hidden; background: var(--venn-accent); color: #fff; border: 1px solid var(--venn-accent); min-width: 145px; height: 42px; padding: 3px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease, color .45s ease; }
#talk-btn:focus { outline:none; }
#talk-btn:hover:not(:disabled) { background: var(--venn-accent-dark); border-color: var(--venn-accent-dark); }
#talk-btn.active { color: #fff; border-color: var(--venn-accent); background: var(--venn-accent); }
#talk-btn.active:hover:not(:disabled) { background: var(--venn-accent-dark); border-color: var(--venn-accent-dark); }
#talk-btn .talk-icon { width: 18px; height: 18px; display: inline-flex; flex-shrink: 0; }
#talk-btn .talk-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#talk-btn .talk-label { font-size: 15px; flex-shrink: 0; }
#self-btn  { background: rgba(100,149,237,0.12); color: #3a5a9a; border: 1px solid rgba(100,149,237,0.3); }
#self-btn:hover { background: rgba(100,149,237,0.22); }
#decisions-btn { background: #f2f1ed; color: #555; border: 1px solid #d5d3ce; }
#decisions-btn:hover { background: #e8e6e0; color: #111; }

/* ── Conversation state indicators ── */
/* Mic open, nobody speaking - purple outline (distinct from Vennio's filled pulse). */
#talk-btn.state-listening { color: var(--venn-accent); background: #fff; border-color: var(--venn-accent); box-shadow: inset 0 0 0 1px rgba(var(--venn-accent-rgb),.28); }
#talk-btn.state-listening:hover:not(:disabled) { color: var(--venn-accent); background: #f7f3fb; border-color: var(--venn-accent); }
#talk-btn.state-thinking { color: #fff; background: var(--venn-accent); border-color: var(--venn-accent); animation:talk-thinking-pulse 2.4s ease-in-out infinite; }
#talk-btn.preparing, #talk-btn.preparing:disabled { color:#fff; background:var(--venn-accent); border-color:var(--venn-accent); opacity:1; animation:talk-thinking-pulse 2.4s ease-in-out infinite; }
@keyframes talk-thinking-pulse {
  0%,100% { background:#7b4bb7; box-shadow:inset 0 0 0 2px rgba(220,190,255,.18),inset 0 0 10px rgba(220,190,255,.24); }
  50% { background:#a77dcc; box-shadow:inset 0 0 0 3px rgba(240,224,255,.5),inset 0 0 24px rgba(220,190,255,.62); }
}

@keyframes pulse-dot {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.4); }
}

/* ════════════════════ VENN MAIN ════════════════════ */
#main {
  margin-top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
  display: block;
  overflow: hidden;
  position: relative;
}

.col {
  overflow-y: auto;
  padding: 20px;
}
.col + .col { border-left: 1px solid var(--border); }

.col-header {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #aaa; margin-bottom: 12px;
}

/* ── Col 1: Venn ── */
#col-venn { display: flex; flex-direction: column; }
#col-venn { height: 100%; min-height: 0; overflow: hidden; padding: 14px 20px 20px; }

#venn-tools {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; margin-bottom: 10px;
}
#chat-btn.available { animation: tool-available-in .38s cubic-bezier(.2,.8,.2,1) both; }
@keyframes tool-available-in { from { opacity:0; transform:translateY(5px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
#venn-bottom-tools[hidden], #chat-btn[hidden], #talk-btn[hidden], #decision-label-btn[hidden] { display:none !important; }
.utility-button {
  width: 42px; height: 36px; padding: 0; flex-shrink: 0;
  background: #f2f1ed; border: 1px solid #e4e2dc; color: #777;
  border-radius: 8px; font-size: 16px; line-height: 1;
}
.utility-button:hover { background: #e8e6e0; color: #333; }
#venn-bottom-tools { display: flex; flex-direction: column; align-items: stretch; gap: 8px; flex-shrink: 0; margin-top: 10px; }
.canonical-attribution {
  display:none !important;
}
.canonical-attribution[hidden] { display:none !important; }
.canonical-attr-label {
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#999; margin-right:2px;
}
.canonical-attr-chip {
  display:inline-flex; align-items:center; gap:4px; max-width:100%;
  padding:4px 9px; border-radius:999px; border:1px solid #e0deda; background:#fff;
  font-size:12px; font-weight:600; color:#555; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.canonical-attr-chip em { font-style:normal; color:#222; font-weight:700; }
.canonical-attr-count {
  font-size:12px; font-weight:600; color:#888; margin-right:2px;
}
.session-view-banner {
  width:100%; padding:8px 12px; border-radius:10px; border:1px solid #e4e0d8;
  background:#f7f5f0; color:#555; font-size:13px; font-weight:600;
}
.session-view-banner[hidden] { display:none !important; }
.point-attr {
  margin-top:4px; font-size:11px; font-weight:600; color:#999; letter-spacing:.02em;
}
.point-attr-wrap {
  display:inline-flex; align-items:center; gap:6px; margin-top:6px; vertical-align:middle;
}
.point-attr-btn {
  width:26px; height:26px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #ddd9d0; border-radius:7px; background:#fafaf8; color:#888; cursor:pointer;
  flex-shrink:0;
}
.point-attr-btn svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.point-attr-btn:hover, .point-attr-wrap.is-open .point-attr-btn {
  border-color:#c4bed3; color:#6b4f9a; background:#f6f2fb;
}
.point-attr-detail {
  font-size:11px; font-weight:600; color:#888; letter-spacing:.02em; white-space:nowrap;
}

#chat-btn { display: inline-flex; align-items: center; justify-content: center; position: static; }
#chat-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#chat-btn { width: auto; min-width: 112px; height: 36px; padding: 0 14px; gap: 8px; font-size: 15px; }
#chat-btn .chat-label { font-size: 15px; font-weight: 600; }
#talk-btn.talking-user { color: #fff; background: #e67e22; border-color: #e67e22; animation:voice-user-orange-pulse 2.2s ease-in-out infinite; }
#talk-btn.talking-venn { color: #fff; background: var(--venn-accent); border-color: var(--venn-accent); animation:talk-thinking-pulse 2.2s ease-in-out infinite; }
#talk-btn.voice-silence { background:var(--venn-accent); border-color:var(--venn-accent); }
#talk-btn.voice-noise { background:#252a31; border-color:#252a31; }
#talk-btn.voice-both { background:linear-gradient(100deg,var(--venn-accent) 0 48%,#e67e22 52% 100%); border-color:#e67e22; animation:voice-both-pulse 1.8s ease-in-out infinite; }
#talk-btn.voice-user { background:#e67e22; border-color:#e67e22; box-shadow:inset 0 0 0 2px rgba(255,224,176,.35),inset 0 0 16px rgba(255,224,176,.42); animation:voice-user-orange-pulse 2.2s ease-in-out infinite; }
#talk-btn.voice-venn { background:var(--venn-accent); border-color:var(--venn-accent); box-shadow:inset 0 0 0 2px rgba(220,190,255,.35),inset 0 0 16px rgba(220,190,255,.42); animation:voice-venn-purple-pulse 2.2s ease-in-out infinite; }
#talk-btn.voice-error { background:#c0392b; border-color:#c0392b; color:#fff; }
#talk-btn.voice-noise::after { content:""; position:absolute; inset:7px; border-radius:inherit; pointer-events:none; background:radial-gradient(circle at 22% 32%,#111 0 1.5px,transparent 2px),radial-gradient(circle at 68% 28%,#111 0 1.5px,transparent 2px),radial-gradient(circle at 42% 70%,#111 0 1.5px,transparent 2px),radial-gradient(circle at 80% 68%,#111 0 1.5px,transparent 2px); opacity:.75; animation:noise-dots 1.2s steps(2,end) infinite; }
@keyframes voice-user-pulse { 0%,100%{box-shadow:inset 0 0 0 2px rgba(220,190,255,.12),inset 0 0 8px rgba(220,190,255,.2)} 50%{box-shadow:inset 0 0 0 3px rgba(220,190,255,.25),inset 0 0 22px rgba(220,190,255,.48)} }
@keyframes voice-user-orange-pulse { 0%,100%{background:#e67e22;box-shadow:inset 0 0 0 2px rgba(255,224,176,.25),inset 0 0 8px rgba(255,224,176,.3)} 50%{background:#eea15d;box-shadow:inset 0 0 0 3px rgba(255,241,218,.48),inset 0 0 18px rgba(255,224,176,.58)} }
@keyframes voice-venn-purple-pulse { 0%,100%{background:#7b4bb7;box-shadow:inset 0 0 0 2px rgba(220,190,255,.18),inset 0 0 8px rgba(220,190,255,.24)} 50%{background:#986dc3;box-shadow:inset 0 0 0 3px rgba(240,224,255,.42),inset 0 0 18px rgba(220,190,255,.52)} }
@keyframes voice-both-pulse { 0%,100%{box-shadow:inset 0 0 0 2px rgba(230,126,34,.25),inset 0 0 10px rgba(255,255,255,.16)} 50%{box-shadow:inset 0 0 0 3px rgba(230,126,34,.55),inset 0 0 24px rgba(255,255,255,.38)} }
@keyframes noise-dots { 50%{opacity:.35; transform:translateY(-1px)} }

#hand-indicator {
  display: none;
  background: #f39c12; color: #fff;
  padding: 8px 14px; border-radius: 8px;
  font-size: 14px; font-weight: 700; text-align: center;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(243,156,18,0.3);
  cursor: pointer;
  user-select: none;
}
#hand-indicator:hover { background: #e67e22; }

#feedback-mode-banner {
  background: #1a1a1a; color: #fff;
  padding: 8px 14px; border-radius: 8px;
  font-size: 14px; font-weight: 600; text-align: center;
  margin-bottom: 14px;
}
#feedback-mode-banner[hidden] { display: none !important; }

#notif-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; min-width: 42px; height: 42px; padding: 0; box-sizing: border-box; }
#notif-btn[hidden] { display: none !important; }
#notif-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#notif-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: #c0392b; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
#notif-badge[hidden] { display: none !important; }
.notif-empty {
  flex: 1; min-height: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; color: #888; font-size: 15px;
}
.notif-empty p { margin: 0; }
.notif-empty-icon, .notif-empty svg {
  width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; opacity: .55;
}
.notif-list { display: flex; flex-direction: column; width: 100%; }
.notif-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eee; }
.notif-item-main { flex: 1; min-width: 0; }
.notif-item-text { margin: 0 0 4px; font-size: 15px; color: #222; line-height: 1.4; }
.notif-item-time { font-size: 12px; color: #888; }
.notif-dismiss {
  flex-shrink: 0; width: 36px; height: 36px; min-width: 36px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: #888;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.notif-dismiss:hover { color: #111; background: #f3f2ee; }
.notif-dismiss svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.notif-modal-footer {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #e5e2db; background: rgba(255,255,255,.98);
  box-sizing: border-box;
}
.notif-modal-footer .circle-footer-close { flex: 0 0 46px; }
.notif-modal-footer #notif-clear-all {
  flex: 1 1 auto; min-width: 0; height: 46px; min-height: 46px;
  padding: 0 16px; border: 1px solid var(--venn-accent); border-radius: 10px;
  background: var(--venn-accent); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.notif-modal-footer #notif-clear-all:hover:not(:disabled) { background: var(--venn-accent-dark); border-color: var(--venn-accent-dark); color: #fff; }
.notif-modal-footer #notif-clear-all:disabled { opacity: .45; cursor: default; }

.venn-view-bar {
  position: absolute;
  top: 24px;
  left: 20px;
  right: 20px;
  z-index: 6;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 34px;
  margin: 0;
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-120%);
  transition:
    transform .32s cubic-bezier(.22,.8,.24,1),
    opacity .24s ease,
    visibility 0s linear .32s;
}
#col-venn { position: relative; }
#col-venn.has-view-toggle .venn-view-bar {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    transform .32s cubic-bezier(.22,.8,.24,1),
    opacity .24s ease,
    visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .venn-view-bar { transition: none; }
}
.venn-view-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 78px 78px;
  align-items: stretch;
  flex-shrink: 0;
  width: 162px;
  height: 34px;
  margin: 0;
  padding: 3px;
  gap: 0;
  border-radius: 999px;
  background: #eceae4;
  border: 1px solid #e0ddd5;
  box-sizing: border-box;
  transition: width .18s ease;
}
.venn-view-toggle[data-mode="shared"] {
  grid-template-columns: 78px 78px 28px;
  width: 190px;
}
.venn-view-toggle::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  width: 72px;
  height: 26px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  pointer-events: none;
  z-index: 0;
  transition: left .18s ease;
}
.venn-view-toggle[data-mode="shared"]::before {
  left: 84px;
}
.venn-view-btn {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: #666;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 26px;
  height: 26px;
  width: 78px;
  min-width: 78px;
  max-width: 78px;
  padding: 0 !important;
  border-radius: 999px;
  cursor: pointer;
}
.venn-view-btn:hover { color: #333; }
.venn-view-btn.active {
  color: #222;
  background: transparent !important;
  box-shadow: none !important;
}
.venn-view-btn:disabled { opacity: .55; cursor: wait; }
.venn-view-btn.is-loading { opacity: .7; }
.venn-canonical-regen {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
  width: 28px;
  height: 26px;
  min-width: 28px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #555;
  cursor: pointer;
  flex-shrink: 0;
}
.venn-canonical-regen svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.venn-canonical-regen:hover { color: #222; }
.venn-canonical-regen:disabled { opacity: .55; cursor: wait; }
.venn-canonical-regen.is-loading svg { animation: venn-regen-spin 0.9s linear infinite; }
.venn-canonical-regen[hidden] { display: none !important; }
@keyframes venn-regen-spin { to { transform: rotate(360deg); } }

#venn-wrap {
  position: relative;
  background: var(--surface);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  flex: 1; min-height: 0; overflow: hidden;
}
#venn-svg { display: block; width: 100%; height: 100%; }
#venn-svg circle, #venn-svg text { cursor: pointer; }
#venn-svg > #c-self,
#venn-svg > #c-situation,
#venn-svg > #c-world,
#venn-svg > #label-self,
#venn-svg > #label-situation,
#venn-svg > #label-world { transition:opacity .28s ease; }
#venn-svg.circle-focus-self > #c-situation,
#venn-svg.circle-focus-self > #c-world,
#venn-svg.circle-focus-self > #label-situation,
#venn-svg.circle-focus-self > #label-world,
#venn-svg.circle-focus-situation > #c-self,
#venn-svg.circle-focus-situation > #c-world,
#venn-svg.circle-focus-situation > #label-self,
#venn-svg.circle-focus-situation > #label-world,
#venn-svg.circle-focus-world > #c-self,
#venn-svg.circle-focus-world > #c-situation,
#venn-svg.circle-focus-world > #label-self,
#venn-svg.circle-focus-world > #label-situation { opacity:.28; }
#venn-svg.pre-context > #c-self,
#venn-svg.pre-context > #c-situation,
#venn-svg.pre-context > #c-world {
  transform-box: fill-box;
  transform-origin: center;
  animation: venn-precontext-breathe 6.4s ease-in-out infinite;
}
#venn-svg.empty-topic > #c-self {
  fill:#fff !important;
  stroke:#d8d8d8;
  stroke-width:2;
}
#venn-svg.empty-topic.empty-topic-active > #c-self {
  fill:#8d9399 !important;
  fill-opacity:.12;
  animation:venn-empty-circle-breathe 6s ease-in-out infinite;
}
@keyframes venn-empty-circle-breathe {
  0%,100% { fill-opacity:.10; }
  50% { fill-opacity:.20; }
}
#venn-svg.empty-topic:not(.empty-topic-warming) > #c-situation,
#venn-svg.empty-topic:not(.empty-topic-warming) > #c-world,
#venn-svg.empty-topic:not(.empty-topic-warming) > #label-self,
#venn-svg.empty-topic:not(.empty-topic-warming) > #label-situation,
#venn-svg.empty-topic:not(.empty-topic-warming) > #label-world,
#venn-svg.empty-topic:not(.empty-topic-warming) > .venn-label-bg {
  display:none;
}
/* First user input on a fresh topic - show the 3-circle canvas before LLM labels. */
#venn-svg.empty-topic.empty-topic-warming > #c-self {
  fill:rgba(100,149,237,0.11) !important;
  fill-opacity:1;
  stroke:rgba(80,110,190,0.42);
  stroke-width:2;
  animation:venn-warming-breathe 5.2s ease-in-out infinite;
}
#venn-svg.empty-topic.empty-topic-warming > #c-situation {
  fill:rgba(46,160,67,0.11) !important;
  stroke:rgba(40,140,60,0.42);
  stroke-width:2;
  animation:venn-warming-breathe 5.2s ease-in-out .35s infinite;
}
#venn-svg.empty-topic.empty-topic-warming > #c-world {
  fill:rgba(230,126,34,0.11) !important;
  stroke:rgba(200,100,20,0.42);
  stroke-width:2;
  animation:venn-warming-breathe 5.2s ease-in-out .7s infinite;
}
#venn-svg.empty-topic.empty-topic-warming > .venn-label {
  opacity:.42;
  letter-spacing:.08em;
  font-weight:500;
}
#venn-svg.empty-topic.empty-topic-warming > .venn-label-bg {
  fill-opacity:.55;
  stroke:rgba(210,210,210,.4);
}
#venn-svg.venn-warming-enter > #c-self,
#venn-svg.venn-warming-enter > #c-situation,
#venn-svg.venn-warming-enter > #c-world {
  transform-box:fill-box;
  transform-origin:center;
  transition:cx .72s cubic-bezier(.2,.8,.2,1), cy .72s cubic-bezier(.2,.8,.2,1);
  animation:venn-context-circle-reveal .72s cubic-bezier(.2,.8,.2,1) both;
}
#venn-svg.venn-warming-enter > #label-self,
#venn-svg.venn-warming-enter > #label-situation,
#venn-svg.venn-warming-enter > #label-world {
  transition:x .72s cubic-bezier(.2,.8,.2,1), y .72s cubic-bezier(.2,.8,.2,1);
  animation:venn-context-label-reveal .48s ease-out .18s both;
}
#venn-svg.venn-label-resolving > #label-self,
#venn-svg.venn-label-resolving > #label-situation,
#venn-svg.venn-label-resolving > #label-world {
  animation:venn-label-resolve .42s ease-out both;
}
@keyframes venn-warming-breathe {
  0%,100% { opacity:.88; }
  50% { opacity:1; }
}
@keyframes venn-label-resolve {
  from { opacity:.45; letter-spacing:.06em; }
  to { opacity:1; letter-spacing:-.01em; }
}
#venn-svg.venn-revealing > #c-self,
#venn-svg.venn-revealing > #c-situation,
#venn-svg.venn-revealing > #c-world {
  transform-box:fill-box;
  transform-origin:center;
  transition:cx .72s cubic-bezier(.2,.8,.2,1), cy .72s cubic-bezier(.2,.8,.2,1);
  animation:venn-context-circle-reveal .72s cubic-bezier(.2,.8,.2,1) both;
}
#venn-svg.venn-revealing > #label-self,
#venn-svg.venn-revealing > #label-situation,
#venn-svg.venn-revealing > #label-world {
  transition:x .72s cubic-bezier(.2,.8,.2,1), y .72s cubic-bezier(.2,.8,.2,1);
  animation:venn-context-label-reveal .48s ease-out .22s both;
}
@keyframes venn-context-circle-reveal {
  from { opacity:0; transform:scale(.72); }
  to { opacity:1; transform:scale(1); }
}
@keyframes venn-context-label-reveal {
  from { opacity:0; }
  to { opacity:1; }
}
.venn-label.preparing { opacity:.48; }
@keyframes venn-precontext-breathe {
  0%, 100% { transform: scale(.985); opacity: .88; }
  50% { transform: scale(1.015); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #venn-svg.pre-context > #c-self,
  #venn-svg.pre-context > #c-situation,
  #venn-svg.pre-context > #c-world,
  #venn-svg.empty-topic.empty-topic-warming > #c-self,
  #venn-svg.empty-topic.empty-topic-warming > #c-situation,
  #venn-svg.empty-topic.empty-topic-warming > #c-world,
  #venn-svg.venn-warming-enter > #c-self,
  #venn-svg.venn-warming-enter > #c-situation,
  #venn-svg.venn-warming-enter > #c-world,
  #venn-svg.venn-warming-enter > #label-self,
  #venn-svg.venn-warming-enter > #label-situation,
  #venn-svg.venn-warming-enter > #label-world,
  #venn-svg.venn-label-resolving > #label-self,
  #venn-svg.venn-label-resolving > #label-situation,
  #venn-svg.venn-label-resolving > #label-world { animation:none; }
}
.venn-label {
  stroke: none;
  fill:#242424 !important;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 18px;
  font-weight: 700;
  font-stretch: normal;
  font-synthesis: none;
  font-kerning: normal;
  letter-spacing: -.01em;
  text-rendering: geometricPrecision;
}
.venn-label-bg { fill:#fff; fill-opacity:1; stroke:rgba(210,210,210,.75); stroke-width:1; pointer-events:none; }
@media (min-width: 701px) {
  .venn-label-bg {
    fill-opacity: 0.5;
    stroke: rgba(210, 210, 210, 0.45);
  }
}
#self-trait-bubble, #self-trait-bubble-close { cursor: pointer; }
.venn-begin { position: absolute; z-index: 4; left: 50%; top: 50%; width: 156px; height: 156px; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; border-radius: 50%; background: var(--venn-accent); color: #fff; border: 4px solid #fff; box-shadow: 0 8px 22px rgba(var(--venn-accent-rgb),.28); font-size: 22px; font-weight: 800; transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease; animation: venn-begin-breathe 4.8s ease-in-out infinite; }
.venn-begin:hover { background: var(--venn-accent-dark); box-shadow: 0 10px 28px rgba(var(--venn-accent-rgb),.38); transform: translate(-50%,-50%) scale(1.04); }
.venn-begin svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.venn-begin.launching { animation: venn-begin-collapse .36s ease-in forwards; pointer-events: none; }
.venn-begin.preparing { background:#e67e22; box-shadow:0 8px 24px rgba(230,126,34,.32); }
@keyframes venn-begin-breathe { 0%,100% { transform: translate(-50%,-50%) scale(1); box-shadow: 0 8px 22px rgba(var(--venn-accent-rgb),.28); } 50% { transform: translate(-50%,-50%) scale(1.035); box-shadow: 0 10px 28px rgba(var(--venn-accent-rgb),.36); } }
@keyframes venn-begin-collapse { to { transform: translate(-50%,-50%) scale(.08); opacity: 0; } }
.venn-begin[hidden] { display: none; }
.writeup-canvas-btn {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 40px;
  padding: 4px 6px 4px 12px;
  border-radius: 999px;
  border: 1px solid #d8d6d0;
  background: rgba(255,255,255,.94);
  color: #444;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.writeup-canvas-btn:hover { border-color: var(--venn-accent); color: var(--venn-accent); }
.writeup-canvas-btn[hidden] { display: none !important; }
@media (max-width: 640px) {
  .writeup-canvas-btn { display: none !important; }
}
.writeup-canvas-btn[data-writeup="stale"] { border-color: #e0a51a; color: #7a5200; background: #fff8ec; }
.writeup-canvas-btn[data-writeup="fresh"] { border-color: #9dceb0; color: #2d6b42; }
.writeup-canvas-btn[data-writeup="missing"] { color: #555; }
.writeup-canvas-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 8px 4px 4px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  cursor: pointer;
  border-radius: 999px;
}
.writeup-canvas-open:hover { color: inherit; }
.writeup-canvas-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.writeup-stale-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e67e22;
  flex: 0 0 8px;
  box-shadow: 0 0 0 2px rgba(230,126,34,.2);
}
.writeup-stale-dot[hidden] { display: none !important; }
.history-modal-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  padding: 12px 10px 12px 14px;
  border-radius: 10px;
  background: #f3f1ec;
  color: #555;
  flex-shrink: 0;
}
.history-modal-note[hidden] { display: none !important; }
.history-modal-note-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}
.history-modal-note-dismiss {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin: -4px -2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #888;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.history-modal-note-dismiss:hover {
  color: #333;
  background: rgba(0, 0, 0, 0.05);
}
#modal-history .modal-card { display: flex; flex-direction: column; }
#modal-history .history-modal-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0;
}
.history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.history-list.is-empty {
  justify-content: center;
  align-items: center;
}
.history-empty {
  color: #888;
  font-size: 15px;
  font-weight: 600;
  padding: 24px 12px;
  text-align: center;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.history-empty p { margin: 0; }
.history-empty-icon,
.history-empty svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
}
@media (max-width: 640px) {
  #modal-history .history-list:not(.is-empty) {
    justify-content: flex-end;
  }
}
.history-item {
  border: 1px solid #e5e2db;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.history-item-top { display: flex; align-items: center; gap: 8px; }
.history-item-label {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #333;
  padding: 0;
}
.history-item-label:focus { outline: none; box-shadow: 0 1px 0 var(--venn-accent); }
.history-item-meta { color: #888; font-size: 12px; }
.history-item-preview {
  color: #555;
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.history-item-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.history-item-actions button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #d8d6d0;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: #444;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.history-item-actions .history-action-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.history-item-actions .history-restore { border-color: var(--venn-accent); color: var(--venn-accent); }
.history-item-actions .history-delete { color: #a33; }
.history-modal-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 28px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid #e5e2db;
  flex-shrink: 0;
}
.history-modal-close-footer {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d4d2cd;
  border-radius: 10px;
  background: #fff;
  color: #666;
  cursor: pointer;
  margin: 0;
}
.history-modal-close-footer:hover { background: #f3f2ee; border-color: #aaa; color: #333; }
.history-modal-close-footer svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.history-footer-actions {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.history-footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  height: 46px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #d8d6d0;
  background: #fff;
  color: #555;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.history-footer-btn:hover { background: #f2f1ed; }
.history-footer-btn:disabled { opacity: 0.45; cursor: default; }
.history-footer-btn[hidden] { display: none !important; }
.history-footer-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.history-delete-all-btn { color: #a33; border-color: #e0b8b8; }
.history-delete-all-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}
.history-delete-all-confirm[hidden] { display: none !important; }
.history-modal-footer.is-confirming-delete .history-footer-actions {
  flex: 1 1 auto;
}
.history-modal-footer.is-confirming-delete .history-delete-all-confirm {
  flex: 1 1 auto;
  width: 100%;
}
.history-delete-all-confirm .history-footer-btn { flex: 1 1 0; }
.history-confirm-yes { color: #a33; border-color: #c86b6b; background: #fff5f5; }

.slide-drawer {
  position: fixed; z-index: 200; left: 20px; right: 20px;
  background: rgba(255,255,255,.98); border: 1px solid #e2e0db;
  box-shadow: 0 12px 34px rgba(0,0,0,.16); transition: transform .28s ease;
  display: flex; flex-direction: column; overflow: hidden;
}
.slide-drawer.top { top: 0; max-height: 100dvh; transform: translateY(-100%); border-radius: 0; }
.slide-drawer.bottom { bottom: 0; max-height: 100dvh; transform: translateY(100%); border-radius: 0; }
.slide-drawer.open { transform: translateY(0); display: flex; visibility: visible; opacity: 1; }
/* ID selectors in the closed-state rules beat .slide-drawer.open - force open on-screen. */
#transcript-drawer.open,
#logs-drawer.open,
#notif-drawer.open {
  transform: translateY(0) !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Closed chat sheet must not paint a leftover composer over the app. */
#transcript-drawer:not(.open) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.drawer-header { display: flex; align-items: center; justify-content: center; position: relative; min-height: 54px; padding: 11px 16px; border-bottom: 1px solid #eee; flex-shrink: 0; }
.drawer-header h2 { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:calc(100% - 48px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size: 18px; line-height:1.1; font-weight: 700; color: #111; }
.drawer-header-actions { position: absolute; right: 16px; display: flex; align-items: center; gap: 8px; }
.drawer-header > .drawer-header-actions { top: 0; bottom: 0; transform: none; align-items: center; }
.drawer-actions-row { display: flex; align-items: center; justify-content: flex-end; min-height: 0; padding: 4px 16px; border-bottom: 1px solid #eee; flex-shrink: 0; }
.drawer-actions-row .drawer-header-actions { position: static; }
.drawer-body-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 0 2px 10px;
}
.drawer-body-actions .copy-btn {
  font-size: 0;
  width: 44px; min-width: 44px; height: 44px; min-height: 44px;
  padding: 0; display: grid; place-items: center; line-height: 0;
  background: transparent; border-color: transparent; color: #888;
}
.drawer-body-actions .copy-btn:hover { color: #444; background: transparent; }
.drawer-body-actions .copy-label { display: none; }
.drawer-close { display:none; }
.drawer-body { padding: 14px 20px; overflow: auto; min-height: 0; font-size: 17px; color: #444; }
#logs-drawer { height: 100dvh; max-height: 100dvh; }
#transcript-drawer { height: 100dvh; max-height: 100dvh; border-radius: 0; }
#notif-drawer { height: 100dvh; max-height: 100dvh; border-radius: 0; }
#notif-drawer .drawer-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#transcript-drawer .drawer-body, #logs-drawer .drawer-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#logs-drawer .drawer-body { overflow-y:auto; }
#logs-drawer .settings-panel.active { flex:0 0 auto; min-height:0; padding-bottom:0; }
#logs-drawer .drawer-body::after { content:''; display:block; flex:0 0 30px; height:30px; }
#transcript-drawer #chat-scroll { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; }
#transcript-box, #log { min-height: 120px; }
#transcript-box {
  background: #fff;
  border-radius: 12px; padding: 8px 6px;
  font-size: 16px; line-height: 1.5;
  flex: 0 0 auto;
  margin-top: auto;
  overflow-x: hidden;
  overflow-y: visible;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: flex; flex-direction: column; gap: 6px;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: chat-transcript;
}
#stats-system { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; flex-shrink: 0; }
#stats-cost { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; flex-shrink: 0; }
#topic-context-card { margin-bottom: 12px; padding: 12px; border: 1px solid #e5e2dc; border-radius: 10px; background: #f7f6f2; }
.topic-picker { position: relative; margin: 0 0 12px; z-index: 3; }
.topic-picker-toggle {
  width: 100%; display: flex; align-items: center; gap: 10px; min-height: 48px;
  padding: 12px 14px; border: 1px solid #d8d6d0; border-radius: 10px; background: #fff;
  font: inherit; font-size: 16px; font-weight: 700; color: #111; text-align: left; cursor: pointer;
}
.topic-picker-toggle:hover { background: #f7f6f2; border-color: #c9c5bc; }
.topic-picker-toggle[aria-expanded="true"] { border-color: #111; }
#topic-picker-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-picker-chevron { flex-shrink: 0; font-size: 12px; color: #888; }
.topic-picker-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  border: 1px solid #d8d6d0; border-radius: 10px; background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.12); overflow: hidden;
}
#topic-picker-search {
  width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid #eceae4;
  padding: 12px 14px; font: inherit; font-size: 15px; color: #222; background: #faf9f6; outline: none;
}
#topic-picker-list { max-height: 220px; overflow: auto; padding: 6px; }
.topic-picker-option {
  width: 100%; display: block; text-align: left; border: 0; border-radius: 8px;
  background: transparent; padding: 11px 12px; font: inherit; font-size: 15px; font-weight: 600;
  color: #2f2f2f; cursor: pointer;
}
.topic-picker-option:hover { background: #f3f2ee; }
.topic-picker-option.active { background: #111; color: #fff; }
.topic-picker-empty { padding: 14px 12px; font-size: 14px; color: #888; text-align: center; }
#topic-stage-line { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #2f2f2f; }
#topic-blocker-line { margin: 0; font-size: 14px; color: #5a5a5a; }
#topic-blocker-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.topic-blocker-btn { border: 1px solid #d8d6d0; border-radius: 999px; background: #fff; color: #2f2f2f; font: inherit; font-size: 13px; font-weight: 700; padding: 7px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.topic-blocker-btn:hover { background: #f3f2ee; }
.topic-blocker-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.topic-vanity { margin-top: 10px; margin-bottom: 0; }
.topic-vanity .stat-card { padding: 9px 8px; background: #faf9f6; }
.topic-vanity .stat-value { font-size: 16px; }
.topic-vanity .stat-label { font-size: 10px; }
#stats-tactic-matrix { background:#f7f6f2; border-radius:10px; padding:16px; margin-bottom:14px; flex-shrink:0; }
.tactic-phases { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
.tactic-phase { appearance:none; border:1px solid #e0ddd6; background:#fff; color:#999; border-radius:8px; padding:11px 6px; font:inherit; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:default; }
.tactic-phase.active { background:#111; color:#fff; border-color:#111; }
.tactic-phase.reached:not(.active) { color:#444; border-color:#cfcbc3; }
.tactic-phase.muted { opacity:.35; }
.tactic-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.tactic-chip { display:inline-flex; align-items:center; max-width:100%; padding:6px 10px; border-radius:999px; background:#fff; border:1px solid #e5e2dc; font-size:13px; font-weight:600; color:#555; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tactic-chip.practical { color:#3d6b4f; border-color:#c5d9cc; background:#eef6f1; }
.tactic-chip.strategic { color:#5a4a2e; border-color:#e0d4b8; background:#f7f1e4; }
.tactic-chip.critical-active { color:#6b3d3d; border-color:#e0c5c5; background:#f8eeee; }
.tactic-tensions { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.tactic-tension-row { display:grid; grid-template-columns:minmax(104px,124px) minmax(0,1fr) 38px; gap:10px; align-items:center; }
.tactic-tension-label { font-size:13px; font-weight:700; color:#555; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tactic-tension-bar { height:8px; border-radius:999px; background:#e8e5df; overflow:hidden; }
.tactic-tension-fill { display:block; height:100%; border-radius:inherit; background:#888; transition:width .25s ease; }
.tactic-tension-fill.focus { background:#111; }
.tactic-tension-pct { font-size:13px; font-weight:700; color:#777; text-align:right; font-variant-numeric:tabular-nums; }
.tactic-focus { margin:0; font-size:14px; line-height:1.45; color:#666; }
.tactic-focus strong { color:#333; font-weight:700; }
#cost-range-filter { display: flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; width:100%; margin-bottom:12px; }
#cost-total-hero {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; margin: 4px 0 14px; padding: 8px 12px 4px;
}
.cost-total-value {
  font-size: 42px; line-height: 1.05; font-weight: 800; letter-spacing: -0.03em;
  color: #1a1a1a; font-variant-numeric: tabular-nums;
}
.cost-total-label {
  margin-top: 6px; font-size: 12px; font-weight: 600; color: #888;
  text-transform: uppercase; letter-spacing: .08em;
}
.cost-range-btn { flex: none; padding: 4px 10px; border: 1px solid #ddd; border-radius: 20px; background: transparent; font-size: 12px; font-weight: 500; color: #888; cursor: pointer; line-height: 1.4; }
.cost-range-btn.active { background: #333; color: #fff; border-color: #333; }
.stats-section-heading { display:grid; grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr); align-items:center; column-gap:12px; margin:8px 0 10px; color:#555; }
.stats-section-heading h3 { margin:0; font-size:13px; line-height:24px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.stats-heading-line { height:1px; width:100%; background:#e5e1da; }
.stats-heading-icon { width:24px; height:24px; display:flex; align-items:center; justify-content:center; color:#777; }
.stats-heading-icon svg { display:block; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
#cost-model-row { margin-bottom: 10px; flex-shrink: 0; }
.settings-tab-footer { display:flex; align-items:center; gap:10px; flex-shrink:0; padding:10px 20px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid #e5e2dc; background:rgba(248,248,247,.98); box-shadow:0 -5px 14px rgba(0,0,0,.05); }
.settings-footer-close { width:44px; min-width:44px; height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; border:1px solid #d8d6d0; border-radius:9px; background:#fff; color:#666; cursor:pointer; }
.settings-footer-close:hover { background:#f1f0ed; color:#333; }
.settings-footer-close svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.settings-tab-nav { display:flex; gap:10px; flex:1; min-width:0; background:transparent; padding:0; }
.settings-tab { flex:1; min-width:0; min-height:46px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid #d8d6d0; border-radius:10px; background:#fff; color:#666; font:inherit; font-size:15px; font-weight:700; cursor:pointer; transition:background .15s, border-color .15s, color .15s, box-shadow .15s; }
.settings-tab[hidden],
body:not(.cap-usage) .settings-tab[data-tab="usage"] { display:none !important; }
.settings-tab:hover { background:#f3f2ee; color:#333; border-color:#c4c1ba; }
.settings-tab.active { background:var(--venn-accent); color:#fff; border-color:var(--venn-accent-dark); box-shadow:0 2px 5px rgba(var(--venn-accent-rgb),.24); }
.settings-tab svg { width:20px; height:20px; flex:0 0 20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.settings-tab:not(.active) span { display:none; }
.settings-tab-nav { gap:8px; }
.settings-tab { flex:0 0 56px; width:56px; gap:0; padding-left:10px; padding-right:10px; }
.settings-tab.active { flex:1 1 auto; width:auto; min-width:96px; gap:8px; }
@media (min-width:1600px) {
  .settings-tab:not(.active) span { display:inline; }
  .settings-tab-nav { gap:10px; }
  .settings-tab { flex:1; width:auto; gap:8px; padding-left:12px; padding-right:12px; }
}
.settings-panel { display: none; flex-direction: column; min-height: 0; flex: 1; padding-bottom:32px; box-sizing:border-box; }
.settings-panel.active { display: flex; }
.settings-legal-links { margin: 18px 16px 0; text-align: center; font-size: 13px; color: #888; }
.settings-legal-links a { color: inherit; }
.settings-legal-links span { margin: 0 8px; color: #aaa; }
.stats-login-required { display:none; align-items:center; justify-content:center; gap:8px; margin:auto; color:#666; font-size:15px; font-weight:500; line-height:1.4; text-align:center; }
.stats-login-required svg { width:18px; height:18px; flex:0 0 18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
body.auth-locked .settings-list .setting-card:not(:first-child) { display:none; }
body.auth-locked #settings-panel-stats > :not(.stats-login-required) { display:none !important; }
body.auth-locked #settings-panel-stats .stats-login-required { display:flex; }
body.auth-locked #logs-drawer #settings-panel-stats.active { flex:1; min-height:0; padding-bottom:0; }
body.auth-locked #settings-panel-usage > :not(.stats-login-required) { display:none !important; }
body.auth-locked #settings-panel-usage .stats-login-required { display:flex; }
body.auth-locked #logs-drawer #settings-panel-usage.active { flex:1; min-height:0; padding-bottom:0; }
.skills-settings-list { display:flex; flex-direction:column; gap:6px; width:100%; padding:12px 16px 4px 52px; box-sizing:border-box; }
.skills-settings-search-wrap {
  position:relative; width:100%; box-sizing:border-box;
  margin:0 0 14px;
}
.skills-settings-search {
  width:100%; box-sizing:border-box;
  appearance:none; border:1px solid #e0ddd5; background:#fff; color:#222;
  font:inherit; font-size:16px; line-height:1.35;
  padding:12px 44px 12px 14px; border-radius:10px;
}
.skills-settings-search:focus { outline:none; border-color:#cfcbc3; }
.skills-settings-search-clear {
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  width:32px; height:32px; padding:0; margin:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:8px; background:transparent; color:#888;
  cursor:pointer;
}
.skills-settings-search-clear[hidden] { display:none !important; }
.skills-settings-search-clear:hover { color:#222; background:#f0eeea; }
.skills-settings-search-clear svg {
  width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.skills-settings-empty {
  margin:0; padding:8px 2px 4px; font-size:13px; color:#888;
}
.limits-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:12px 16px;
  padding:14px 16px 0 52px;
}
.limits-grid .limits-spend-cell[hidden],
.limits-grid .limits-used-cell[hidden] { display:none !important; }
.limits-grid .model-label { display:block; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#999; margin-bottom:3px; }
.limits-grid strong { font-size:15px; color:#222; font-weight:700; }
.limits-note { padding:10px 16px 0 52px !important; }
.skill-toggle-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid #eceae4; border-radius:10px; background:#faf9f6; cursor:pointer; }
.skill-toggle-row[hidden] { display:none !important; }
.skills-settings-empty[hidden] { display:none !important; }
.skill-toggle-row.skill-toggle-locked { opacity:0.72; }
.skill-toggle-row.skill-toggle-locked input[type="checkbox"] { cursor:not-allowed; }
.skill-toggle-copy { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.skill-toggle-copy strong { font-size:14px; color:#222; font-weight:600; }
.skill-toggle-copy small {
  font-size:12px; color:#888; line-height:1.35;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; text-overflow:ellipsis; white-space:normal;
}
.skill-toggle-row input[type="checkbox"] { width:18px; height:18px; margin:0; flex-shrink:0; accent-color:#111; }
.setting-details-actions {
  display:flex; flex-direction:column; align-items:stretch; gap:10px;
  padding:14px 16px 4px 52px;
}
.setting-detail-note[hidden] { display:none !important; }
.account-meta-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.account-meta-row .setting-detail-note { flex:1; min-width:0; }
.account-meta-row[hidden] { display:none !important; }
.account-row-btn {
  flex:0 0 auto;
  min-height:36px !important;
  padding:0 12px !important;
  font-size:13px !important;
}
.setting-action-btn {
  appearance:none; border:1px solid #e0ddd5; background:#fff; color:#222;
  font-size:14px; font-weight:600; padding:10px 14px; border-radius:10px; cursor:pointer;
}
.setting-action-btn:hover { background:#f3f2ee; }
.setting-action-btn[hidden] { display:none !important; }
.setting-action-btn--secondary {
  color:#666; border-color:#d8d5ce; background:#f3f2ee;
}
.setting-action-btn--secondary:hover {
  color:#444; border-color:#cfcbc3; background:#eeede8;
}
.setting-action-btn--accent {
  color:var(--venn-accent); border-color:var(--venn-accent); background:#fff;
}
.setting-action-btn--accent:hover {
  color:var(--venn-accent-dark); border-color:var(--venn-accent-dark);
  background:var(--venn-accent-soft);
}
.setting-action-btn--danger { color:#c0392b; border-color:#f5c6c3; }
.setting-action-btn--danger:hover { background:#fff5f5; }
.clear-data-wrap { display:flex; flex-direction:column; }
.clear-data-confirm { display:flex; gap:8px; align-items:stretch; }
.clear-data-confirm[hidden] { display:none !important; }
.clear-data-cancel-btn {
  appearance:none; border:1px solid #e0ddd5; background:#f7f6f2; color:#666;
  box-sizing:border-box; height:46px; min-height:46px; padding:0 14px; border-radius:10px; cursor:pointer;
  font-size:15px; font-weight:700; font-family:inherit;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap;
}
.clear-data-cancel-btn svg { width:19px; height:19px; flex:0 0 19px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.clear-data-cancel-btn:hover { background:#eeede8; }
.clear-data-confirm-btn {
  appearance:none; border:none; background:#c0392b; color:#fff;
  box-sizing:border-box; height:46px; min-height:46px; padding:0 16px; border-radius:10px; cursor:pointer;
  font-size:15px; font-weight:700; font-family:inherit;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; flex:1;
}
.clear-data-confirm-btn svg { width:19px; height:19px; flex:0 0 19px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.clear-data-confirm-btn:hover { background:#a93226; }

.setting-summary-sync { padding-right:132px; }
.setting-summary-sync .sync-summary-btn {
  position:absolute; right:16px; top:50%; transform:translateY(-50%); z-index:2;
  display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 12px;
  border:1px solid #1d1d1d; border-radius:9px; background:#1d1d1d; color:#fff;
  font-size:13px; font-weight:700; cursor:pointer; font-family:inherit;
}
.setting-summary-sync .sync-summary-btn svg {
  width:15px; height:15px; flex:0 0 15px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.setting-summary-sync .sync-summary-btn:hover { background:#333; }
.setting-summary-sync .sync-summary-btn[hidden] { display:none !important; }
.setting-summary-sync .sync-summary-btn.is-loading { cursor:wait; opacity:.75; }
.setting-summary-sync .sync-summary-btn.is-loading svg { animation:sync-spin .8s linear infinite; }
@keyframes sync-spin { to { transform:rotate(360deg); } }
.sync-details { padding-top:14px; }
.sync-keys-summary {
  margin:10px 0 0; padding:10px 12px; border:1px solid #e5e2dc; border-radius:9px;
  background:#fff; font-size:13px; color:#444; line-height:1.45;
}
.sync-keys-summary strong { display:block; font-size:12px; color:#666; margin-bottom:6px; font-weight:600; }
.sync-log-list { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.sync-log-item {
  padding:10px 12px; border:1px solid #e5e2dc; border-radius:9px; background:#fff;
  font-size:13px; line-height:1.4; color:#444;
}
.sync-log-item.sync-log-error { border-color:#f0c4c4; background:#fff8f8; }
.sync-log-head { display:flex; justify-content:space-between; gap:8px; margin-bottom:4px; }
.sync-log-head strong { font-size:13px; color:#222; }
.sync-log-head time { font-size:11px; color:#888; white-space:nowrap; }
.sync-log-keys { font-size:12px; color:#666; }
.sync-log-empty { margin:12px 0 0; font-size:13px; color:#888; }
.sync-clear-block {
  margin-top:16px; padding-top:14px; border-top:1px solid #e5e2dc;
  display:flex; flex-direction:column; gap:10px;
}
.sync-clear-block .setting-detail-note { font-size:13px; color:#666; }

.setting-card { background:#f7f6f2; border:1px solid #e5e2dc; border-radius:12px; overflow:hidden; }
.setting-summary { position:relative; list-style:none; min-height:64px; padding:12px 16px 12px 52px; display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; }
.setting-summary::-webkit-details-marker { display:none; }
.setting-summary > span:first-child { min-width:0; display:flex; flex-direction:column; gap:3px; padding-right:8px; }
.setting-summary strong { font-size:16px; font-weight:700; color:#303030; }
.setting-summary small { font-size:15px; color:#555; line-height:1.35; }
.setting-current {
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:7px; min-height:36px; max-width:190px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:0 11px; border:1px solid #1d1d1d; border-radius:9px;
  background:#1d1d1d; color:#fff; font-size:13px; font-style:normal; font-weight:700;
}
.setting-current--link { cursor:pointer; }
.setting-current--link:hover { background:#333; border-color:#333; }
.setting-current--models { max-width:250px; gap:6px; }
.setting-current svg {
  width:14px; height:14px; flex:0 0 14px;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  opacity:0.92;
}
.setting-current .setting-current-part {
  display:inline-flex; align-items:center; gap:5px; min-width:0;
}
.setting-current .setting-current-sep { opacity:0.45; font-weight:600; }
.setting-chevron { position:absolute; left:16px; right:auto; top:50%; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; transform:translateY(-50%); color:#777; font-size:0; line-height:0; transition:transform .16s ease; }
.setting-chevron::before { content:''; width:9px; height:9px; border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); }
.setting-card[open] .setting-chevron { transform:translateY(-50%) rotate(180deg); }
.setting-details { padding:0 0 10px; }
.setting-details .model-selector-row { border:0; border-top:1px solid #e5e2dc; border-radius:0; background:transparent; padding:14px 16px 0 52px; }
.model-options { margin-left:auto; }

/* Settings cards share one readable expanded-body system. */
.setting-details {
  padding:16px 16px 18px 52px;
  border-top:1px solid #e5e2dc;
  color:#444;
}
.setting-details-actions { padding:16px 16px 18px 52px; gap:12px; }
.setting-details .model-selector-row { padding:0; border:0; background:transparent; }
.setting-detail-note { margin:0; color:#555; font-size:15px; line-height:1.45; }
.skills-settings-list { padding:0; gap:8px; }
.skill-toggle-row { padding:12px 14px; background:#fff; }
.skill-toggle-copy strong { font-size:15px; color:#222; }
.skill-toggle-copy small {
  font-size:14px; color:#555; line-height:1.4;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; text-overflow:ellipsis; white-space:normal;
}
.limits-grid { padding:0; gap:16px 20px; }
.limits-grid .model-label { color:#666; font-size:12px; }
.limits-grid strong { color:#222; font-size:17px; }
.limits-note { padding:12px 0 0 !important; }
.model-label { color:#555; }
.model-cost-rate { color:#333; }
.setting-action-btn {
  min-height:46px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  color:#222; font-size:15px; font-weight:700;
}
.setting-action-btn svg { width:19px; height:19px; flex:0 0 19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.usage-state-btn { width:100%; justify-content:flex-start; margin-top:10px; }
.copy-state-card { margin-top:0; padding:0; border:1px solid #e5e2dc; border-radius:12px; background:#f7f6f2; overflow:hidden; }
.copy-state-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.copy-state-heading h3 { margin:0; font-size:18px; color:#292929; }
.copy-state-heading p { margin:4px 0 0; font-size:13px; color:#777; }
.copy-state-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 15px; border:1px solid #222; border-radius:9px; background:#1d1d1d; color:#fff; font:inherit; font-weight:700; cursor:pointer; white-space:nowrap; }
.copy-state-button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.copy-state-counts { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin-top:14px; }
.copy-state-counts::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:#d1cfca; }
.copy-state-counts::after { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:#d1cfca; }
.copy-state-counts span { padding:14px 8px; border-radius:0; background:transparent; text-align:center; color:#777; font-size:12px; }
.copy-state-counts strong { display:block; color:#292929; font-size:20px; line-height:1.05; }
.settings-copy-state { margin-top:0; }
.copy-state-summary { position:relative; list-style:none; min-height:64px; padding:12px 16px 12px 52px; display:flex; align-items:center; gap:12px; cursor:pointer; }
.copy-state-summary::-webkit-details-marker { display:none; }
.copy-state-summary > span:first-child { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.copy-state-summary strong { font-size:18px; color:#292929; }
.copy-state-summary small { font-size:12px; color:#777; }
.copy-state-summary .copy-state-button { flex:0 0 auto; min-height:36px; padding:0 12px; border-radius:9px; font-size:13px; }
.copy-state-actions { display:flex !important; flex-direction:row !important; align-items:center; gap:8px; flex:0 0 auto !important; }
.copy-state-summary .setting-chevron { left:16px; right:auto; }
.settings-copy-state[open] .setting-chevron { transform:translateY(-50%) rotate(180deg); }
.copy-state-details { padding:14px 16px 16px 52px; border-top:1px solid #ece9e3; }
.copy-state-details > p { margin:0 0 12px; font-size:13px; color:#777; }
.copy-state-all-button { margin-top:18px; width:100%; }
.cost-note { font-size: 15px; color: #777; margin: 0 0 18px; line-height: 1.45; display: flex; align-items: center; gap: 10px; }
.cost-note > span { min-width:0; }
.stats-reset-section { margin-top: 8px; padding-top: 0; }
.stats-reset-section p { margin:0 0 12px; font-size:15px; line-height:1.45; color:#666; }
.stats-reset-btn { width:100%; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:6px; font:inherit; font-size:14px; font-weight:700; color:#777; background:#f7f6f3; border:1px solid #d8d6d0; border-radius:8px; padding:0 14px; cursor:pointer; line-height:1.2; }
.stats-reset-btn:hover { color:#444; background:#eeece8; border-color:#bdbab2; }
.stats-reset-btn svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.model-selector-row { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"label cost" "options options"; align-items:center; gap:10px; background:#fff; border:1px solid #e5e2dc; border-radius:10px; padding:12px; }
.model-label { grid-area:label; font-size:13px; line-height:1.2; font-weight:700; color:#666; text-transform:uppercase; letter-spacing:.08em; }
.model-cost-rate { grid-area:cost; font-size:16px; line-height:1.2; color:#444; white-space:nowrap; text-align:right; }
.model-options { grid-area:options; grid-column:1 / -1; display:flex; width:100%; min-width:0; gap:8px; margin:0; }
.model-options .model-opt, .model-options .llm-opt { flex:0 0 calc(50% - 4px); width:auto; height:44px; min-height:44px; box-sizing:border-box; font:inherit; font-size:15px; font-weight:700; padding:0 12px; border-radius:8px; border:1px solid #d8d6d0; background:#fff; color:#555; cursor:pointer; outline:none; box-shadow:none; transition:background .15s, color .15s, border-color .15s; }
.model-options .model-opt:hover:not(:disabled), .model-options .llm-opt:hover:not(:disabled) { background:#eee; color:#111; }
.model-options .model-opt.active, .model-options .llm-opt.active { background:#111; color:#fff; border-color:#111; }
.model-options .model-opt.active:hover, .model-options .llm-opt.active:hover { background:#111; color:#fff; border-color:#111; }
.model-options .model-opt:focus, .model-options .model-opt:focus-visible, .model-options .llm-opt:focus, .model-options .llm-opt:focus-visible { outline:none; box-shadow:none; }
.model-options .model-opt:active, .model-options .llm-opt:active { transform:none; }
.model-options .model-opt:disabled, .model-options .llm-opt:disabled { opacity:.45; cursor:not-allowed; }
.model-options .model-opt.active:disabled, .model-options .llm-opt.active:disabled { opacity:.7; }
.model-options.voice-persona-options { flex-wrap:wrap; margin-bottom:12px; }
.model-options.voice-persona-options .model-opt {
  flex:0 0 calc(50% - 4px);
  display:inline-flex; align-items:flex-start; justify-content:flex-start; gap:10px;
  height:auto; min-height:64px; padding:12px 12px; text-align:left;
}
.model-options.voice-persona-options .model-opt svg,
.model-options.voice-persona-options .model-opt i {
  width:16px; height:16px; flex:0 0 16px; margin-top:2px;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.model-options.voice-persona-options .voice-persona-copy {
  display:flex; flex-direction:column; gap:2px; min-width:0; align-items:flex-start;
}
.model-options.voice-persona-options .voice-persona-copy strong {
  font-size:13px; font-weight:700; line-height:1.2;
}
.model-options.voice-persona-options .voice-persona-copy small {
  font-size:11px; font-weight:500; line-height:1.3; color:#888; white-space:normal;
}
.model-options.voice-persona-options .model-opt.active .voice-persona-copy small { color:rgba(255,255,255,.72); }
.model-options .model-opt.voice-persona-locked { opacity:.45; }
.gemini-vad-row {
  margin-top: 10px; padding: 12px; background: #fff; border: 1px solid #e5e2dc; border-radius: 10px;
}
#models-setting-card .model-selector-row ~ .model-selector-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e2dc;
}
.gemini-vad-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.gemini-vad-slider-row { display: flex; align-items: center; gap: 10px; }
.gemini-vad-end { font-size: 12px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: .04em; flex: 0 0 auto; }
#gemini-vad-slider {
  flex: 1 1 auto; min-width: 0; height: 28px; margin: 0; accent-color: #111; cursor: pointer;
}
#gemini-vad-slider:disabled { opacity: .45; cursor: not-allowed; }
.gemini-vad-note { margin: 8px 0 0; font-size: 12px; line-height: 1.35; color: #999; }
#vk-sim-row { margin-top: 10px; flex-shrink: 0; }
.stat-card { background: #f7f6f2; border-radius: 8px; padding: 12px 10px; text-align: center; }
.stat-value { display: block; font-size: 20px; font-weight: 700; color: #333; }
.stat-label { display: block; margin-top: 3px; font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: .07em; }
.drawer-header .copy-btn { font-size: 0; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; line-height: 0; gap: 0; }
.drawer-actions-row .copy-btn { width:44px; min-width:44px; height:44px; min-height:44px; padding:0; display:grid; place-items:center; line-height:0; }
.drawer-header .copy-btn, .drawer-actions-row .copy-btn, #artefact-copy-btn, #artefact-copy-output-btn, #artefact-publish-btn { box-sizing:border-box; flex:0 0 44px; overflow:hidden; }
.drawer-header .copy-btn, .drawer-actions-row .copy-btn, #artefact-copy-btn, #artefact-copy-output-btn, #artefact-publish-btn { background:transparent; border-color:transparent; }
.drawer-header .copy-btn:hover, .drawer-actions-row .copy-btn:hover, #artefact-copy-btn:hover, #artefact-copy-output-btn:hover, #artefact-publish-btn:hover { background:transparent; color:#444; }
.copy-icon { display:block; width: 22px; height: 22px; margin:0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

#modal-circle { align-items: flex-end; padding: 0; }
#modal-circle .modal-card { transform: translateY(calc(100% + 20px)); opacity: 0; transition: transform .28s ease, opacity .28s ease; }
#modal-circle.open .modal-card { transform: translateY(0); opacity: 1; }
#modal-decisions { align-items: flex-end; padding: 0; }
#modal-decisions .modal-card { display: flex; flex-direction: column; min-height: 0; }
#modal-decisions .modal-body {
  display: flex; flex-direction: column; justify-content: flex-end;
  flex: 1 1 auto; min-height: 0; gap: 0; padding: 0; overflow: hidden;
  overscroll-behavior: contain;
}
#modal-decisions .decision-controls {
  order: 2; flex: 0 0 auto; margin: 0; padding: 8px 20px 10px;
}
@media (max-width: 640px) {
  #modal-decisions .decision-controls { padding-bottom: 18px; }
}
#modal-decisions #decisions-list {
  order: 1; flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; padding: 12px 20px;
}
#modal-decisions #decisions-list::before { content: ''; flex: 1 1 auto; min-height: 0; }
#modal-decisions .topics-modal-footer {
  display:flex;
  align-items:center;
  gap:10px;
  flex: 0 0 auto;
  position: relative;
  z-index: 4;
  padding: 12px 28px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.98);
  border-top: 1px solid #e5e2db;
  box-shadow: 0 -6px 16px rgba(0,0,0,.07);
}
#modal-decisions .topics-modal-footer .modal-new-btn { flex:1 1 auto; margin:0; }
.topics-modal-close-footer { flex:0 0 46px; width:46px; height:46px; min-height:46px; padding:0; display:inline-flex; align-items:center; justify-content:center; border:1px solid #d4d2cd; border-radius:10px; background:#fff; color:#666; cursor:pointer; }
.topics-modal-close-footer svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.topics-modal-close-footer:hover { background:#f3f2ee; border-color:#aaa; color:#333; }
#modal-decisions .modal-card { transform: translateY(calc(100% + 20px)); opacity: 0; transition: transform .28s ease, opacity .28s ease; }
#modal-decisions.open .modal-card { transform: translateY(0); opacity: 1; }
.circle-data-list { display: flex; flex-direction: column; gap: 10px; }
.circle-data-item { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid #e4e2dc; border-radius: 10px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.05); cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease; }
.circle-data-draft { cursor: default; }
.circle-data-item:hover { border-color: #c9c6be; box-shadow: 0 4px 12px rgba(0,0,0,.09); }
.circle-data-main { flex: 1; min-width: 0; }
.circle-data-label { font-size: 12px; color: #aaa; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; }
.circle-data-view { font-size: 16px; color: #222; line-height: 1.5; word-break: break-word; }
.circle-add-trigger-row { display: flex; gap: 8px; flex: 1; }
.circle-add-trigger { flex: 1; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid var(--circle-accent, #c9c6be); border-radius: 10px; background: var(--circle-accent, #fafaf8); color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.circle-add-trigger:hover { filter: brightness(.92); }
.circle-voice-trigger { flex-shrink: 0; width: 52px; min-height: 52px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--circle-accent, #c9c6be); border-radius: 10px; background: transparent; color: var(--circle-accent, #888); cursor: pointer; transition: background .15s, color .15s; }
.circle-voice-trigger:hover { background: var(--circle-accent, #888); color: #fff; }
.circle-voice-trigger svg { width: 22px; height: 22px; }
.circle-add-trigger .new-decision-icon { width: 18px; height: 18px; }
.circle-add-editor { display: none; align-items: center; gap: 8px; width: 100%; }
.circle-add-editor.open { display: flex; }
.circle-add-editor input { flex: 1; min-width: 0; }
#modal-circle .modal-add .circle-add-trigger-row { display: flex; }
#modal-circle .modal-add .circle-add-trigger { display: flex; }
#modal-circle .modal-add .circle-add-trigger {
  background:var(--circle-accent) !important;
  border-color:var(--circle-accent) !important;
  color:#fff !important;
}
#modal-circle .modal-add .circle-voice-trigger { display: flex; }
#modal-circle .circle-add-editor button { display: block; }
.circle-data-text { width: 100%; min-height: 56px; resize: vertical; border: 1px solid #9bb4e9; border-radius: 6px; padding: 10px 11px; font: inherit; font-size: 16px; color: #222; outline: none; }
.circle-data-text:focus { border-color: #9bb4e9; }
.circle-data-delete { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; background:#fff; color:#666; border:1px solid #d8d6d0; border-radius:7px; padding:0; flex-shrink:0; cursor:pointer; }
.circle-data-delete svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.circle-data-delete:hover { color:#333; background:#f2f1ed; border-color:#aaa; }
.circle-data-empty { color: #aaa; font-size: 13px; padding: 10px 0 4px; }
#modal-circle .modal-add button { display: none; }
#modal-circle .modal-add.has-value button { display: block; }
.circle-modal-footer { position:sticky; bottom:0; z-index:20; display:flex; align-items:center; gap:10px; padding:12px 28px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid #e5e2db; background:rgba(255,255,255,.98); box-shadow:0 -6px 16px rgba(0,0,0,.06); flex-shrink:0; }
.circle-footer-close { flex:0 0 46px; width:46px; height:46px; min-height:46px; padding:0; display:inline-flex; align-items:center; justify-content:center; gap:0; border:1.5px solid #aaa; border-radius:10px; background:#fff; color:#666; font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.circle-footer-close span { display:none; }
.circle-footer-close:hover { background:#f3f2ee; border-color:#c9c6be; color:#333; }
.circle-footer-close svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 18px; }
.circle-modal-footer .modal-add { width:100%; margin:0; }
.circle-modal-footer .circle-add-trigger-row { display:flex; width:100%; gap:10px; }
.circle-modal-footer .circle-add-trigger { min-height:46px; height:46px; background:var(--venn-accent); border-color:var(--venn-accent); border-radius:10px; }
.circle-modal-footer .circle-add-trigger,
.circle-modal-footer .circle-voice-trigger { display:inline-flex !important; align-items:center; justify-content:center; }
.circle-modal-footer .circle-add-trigger:hover { background:var(--venn-accent-dark); border-color:var(--venn-accent-dark); filter:none; }
.circle-modal-footer .circle-voice-trigger { width:46px; min-height:46px; height:46px; border-color:var(--venn-accent); color:var(--venn-accent); border-radius:10px; }
.circle-modal-footer .circle-voice-trigger:hover { background:var(--venn-accent); color:#fff; }
.circle-modal-footer .circle-add-editor { width:100%; }
.circle-modal-footer .circle-add-editor button { display:block !important; }
.self-footer-actions { display:flex; width:100%; gap:10px; }
.self-footer-actions[hidden] { display:none !important; }
.self-footer-actions button { flex:1 1 0; min-width:0; height:46px; min-height:46px; padding:10px 16px; border:1px solid var(--venn-accent); border-radius:10px; background:var(--venn-accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.self-footer-actions button:hover { background:var(--venn-accent-dark); border-color:var(--venn-accent-dark); }
.self-footer-actions .self-cleanup-btn { background:#fff; color:#555; border-color:#d8d6d0; }
.self-footer-actions .self-cleanup-btn:hover { background:#f3f2ee; color:#444; border-color:#c9c6be; }
.self-footer-actions button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 18px; }
.self-footer-actions .self-cleanup-btn { order:0; }
.self-footer-actions .self-add-group-btn { order:1; background:var(--venn-accent); color:#fff; border-color:var(--venn-accent); white-space:nowrap; }
.self-group-form { display:flex; flex:1 1 auto; flex-direction:column; gap:12px; width:100%; min-width:0; padding:4px 0 8px; }
.self-group-form[hidden] { display:none !important; }
.self-group-form-row { position:relative; display:flex; align-items:center; }
.self-group-form-row input { width:100%; box-sizing:border-box; min-height:46px; padding:10px 42px 10px 14px; border:1px solid #9bb4e9; border-radius:10px; background:#fff; color:#222; font:inherit; font-size:16px; outline:none; }
.self-group-form-row input:focus { border-color:var(--venn-accent); box-shadow:0 0 0 2px rgba(126,76,190,.12); }
.self-group-form-row button { position:absolute; right:8px; width:30px; height:30px; padding:0; border:0; border-radius:50%; background:transparent; color:#aaa; font:inherit; font-size:24px; line-height:1; cursor:pointer; }
.self-group-form-row button:hover { background:#f2f1ed; color:#555; }
.self-group-icon-label { color:#888; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.self-group-icon-label[hidden], .self-group-icon-picker[hidden] { display:none !important; }
.self-group-icon-picker { display:flex; flex-wrap:wrap; gap:7px; }
.self-group-icon-option { width:36px; height:36px; padding:0; border:1px solid #d8d6d0; border-radius:8px; background:#fff; color:#777; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.self-group-icon-option:hover { border-color:var(--venn-accent); color:var(--venn-accent); background:#faf7ff; }
.self-group-icon-option.selected { border-color:var(--venn-accent); background:#f2eafb; color:var(--venn-accent); box-shadow:0 0 0 2px rgba(126,76,190,.12); }
.self-group-icon-option svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.self-group-form-btns { display:none; flex:1 1 auto; min-width:0; width:100%; gap:8px; }
.self-group-form-btns[hidden] { display:none !important; }
.self-group-form-btns button { flex:1 1 0; min-width:0; min-height:46px; height:46px; padding:0 12px; border:1px solid #d8d6d0; border-radius:10px; background:#fff; color:#555; font:inherit; font-size:15px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; }
.self-group-form-btns button:hover { background:#f3f2ee; }
.self-group-form-btns #self-group-create { border-color:var(--venn-accent); background:var(--venn-accent); color:#fff; }
.self-group-form-btns #self-group-create:hover:not(:disabled) { background:var(--venn-accent-dark); border-color:var(--venn-accent-dark); }
.self-group-form-btns button:disabled { opacity:.4; cursor:default; }
.self-group-form-btns svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 18px; }
#modal-circle.group-form-open #circle-modal-desc-row,
#modal-circle.group-form-open #circle-data-list,
#modal-circle.group-form-open #who-are-you-btn,
#modal-circle.group-form-open #circle-add-area,
#modal-circle.group-form-open .self-footer-actions,
#modal-circle.group-form-open .circle-footer-close { display:none !important; }
#modal-circle.group-form-open .modal-body,
#modal-self.group-form-open .modal-body {
  display:flex; flex-direction:column; justify-content:flex-end; overflow-y:auto;
}
#modal-circle.group-form-open #self-group-form,
#modal-self.group-form-open #self-group-form {
  display:flex !important;
  margin-top:auto;
  flex:0 0 auto;
}
#modal-circle.group-form-open #self-group-form-btns,
#modal-self.group-form-open #self-group-form-btns { display:flex !important; }
#modal-circle.group-form-open .circle-modal-footer,
#modal-self.group-form-open .self-modal-footer {
  gap:8px;
  padding-left:12px;
  padding-right:12px;
}
#modal-self.group-form-open .modal-desc,
#modal-self.group-form-open #self-list,
#modal-self.group-form-open .self-footer-actions { display:none !important; }
@media (min-width: 901px) {
  #modal-circle.group-form-open .modal-body,
  #modal-self.group-form-open .modal-body { justify-content:flex-start; }
  #modal-circle.group-form-open #self-group-form,
  #modal-self.group-form-open #self-group-form { margin-top:0; }
}
.bucket-header { display:flex; align-items:center; gap:7px; }
.bucket-group-del {
  width:28px; height:28px; min-width:28px; padding:0; margin-left:2px;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; background:transparent; color:#bbb; cursor:pointer;
}
.bucket-group-del svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bucket-group-del:hover { color:#c0392b; background:#fdf0ee; }
.profile-group-icon { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:0 0 16px; }
#modal-circle.profile-mode #circle-add-area { display:none; }
#modal-circle:not(.profile-mode) .self-footer-actions { display:none; }
#modal-circle:not(.profile-mode) #self-group-form,
#modal-circle:not(.profile-mode) #self-group-form-btns { display:none !important; }
.self-modal-footer { margin-top:0; }
.self-modal-footer .self-footer-actions { flex:1 1 auto; min-width:0; }

/* Circle/profile modal footers: one primary action on the right. */
#modal-circle .circle-modal-footer .circle-add-trigger-row { flex-direction:row-reverse; }
#modal-circle .circle-modal-footer .circle-add-trigger {
  background:var(--venn-accent) !important;
  border-color:var(--venn-accent) !important;
  color:#fff !important;
  order:0;
}
#modal-circle .circle-modal-footer .circle-add-trigger:hover {
  background:var(--venn-accent-dark) !important;
  border-color:var(--venn-accent-dark) !important;
}
#modal-circle .circle-modal-footer .circle-voice-trigger {
  flex:0 0 46px !important;
  width:46px !important;
  min-width:46px !important;
  min-height:46px !important;
  height:46px !important;
  background:#fff !important;
  border:1.5px solid #aaa !important;
  color:var(--venn-accent) !important;
  order:1;
}
#modal-circle .circle-modal-footer .circle-voice-trigger svg {
  display:block !important;
  width:22px !important;
  height:22px !important;
  color:#666 !important;
  stroke:#666 !important;
  fill:none !important;
}
#modal-circle .circle-modal-footer .circle-voice-trigger svg * { stroke:#666 !important; stroke-width:1.6 !important; fill:none !important; }
#modal-circle .circle-modal-footer .circle-voice-trigger .talk-icon { display:inline-flex; width:22px; height:22px; flex:0 0 22px; }
#modal-circle .circle-modal-footer .circle-voice-trigger:hover {
  background:#faf7ff !important;
  border-color:var(--venn-accent) !important;
  color:#666 !important;
}

#modal-circle .circle-modal-footer .circle-voice-trigger svg,
#modal-circle .circle-modal-footer .circle-voice-trigger .talk-icon {
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
}
#modal-circle .circle-modal-footer .circle-voice-trigger svg * {
  stroke-width:2 !important;
}

#modal-circle .circle-modal-footer .circle-footer-close,
#modal-circle .circle-modal-footer .circle-voice-trigger {
  box-sizing:border-box !important;
  width:46px !important;
  min-width:46px !important;
  height:46px !important;
  min-height:46px !important;
  flex:0 0 46px !important;
}
#modal-circle .circle-modal-footer .circle-voice-trigger svg,
#modal-circle .circle-modal-footer .circle-voice-trigger .talk-icon {
  width:20px !important;
  height:20px !important;
  flex:0 0 20px !important;
}
@media (max-width:640px) {
  .venn-view-bar { top:20px; left:8px; right:8px; width:auto; }
  #modal-circle .circle-modal-footer .circle-footer-close,
  #modal-circle .circle-modal-footer .circle-voice-trigger {
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    flex-basis:42px !important;
  }
}

@media (min-width: 701px) {
  /* Keep the unused media area as a direct upload target. On cards with
     existing media, reveal the affordance on hover; empty cards show it
     immediately. Height matches .topic-file-thumb (52px); width fills the row. */
  .decision-item:not(.is-deleted) .topic-upload-dropzone {
    display:flex !important;
    box-sizing:border-box;
    flex:1 1 72px;
    width:auto;
    min-width:72px;
    max-width:none;
    height:52px;
    min-height:52px;
    max-height:52px;
    margin:0;
    padding:0;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:12px;
    font-weight:600;
    line-height:1.15;
    gap:6px;
    border:1px dashed transparent;
    border-radius:6px;
    opacity:0;
    background:transparent;
    color:transparent;
    overflow:hidden;
    white-space:nowrap;
  }
  .decision-item:not(.is-deleted) .topic-upload-dropzone::before {
    content:'+';
    font-size:18px;
    font-weight:600;
    line-height:1;
    color:inherit;
    flex:0 0 auto;
  }
  .decision-item.no-media:not(.is-deleted) .topic-upload-dropzone {
    flex:1 1 100%;
    width:100%;
    min-width:100%;
    font-size:13px;
  }
  .decision-item.no-media:not(.is-deleted) .topic-upload-dropzone::before {
    font-size:18px;
  }
  .decision-item.no-media:not(.is-deleted) .topic-upload-dropzone,
  .decision-item:not(.is-deleted):hover .topic-upload-dropzone,
  .decision-item.file-drop-target:not(.is-deleted) .topic-upload-dropzone {
    opacity:1;
    border-color:#c9c6be;
    background:#faf9f7;
    color:#999;
  }
  #modal-decisions .decision-actions .btn-attach { display:none !important; }
  #modal-decisions .decision-actions.more-visible > .decision-action-icons > .btn-attach {
    display: inline-flex !important;
  }
  #modal-decisions .decision-actions .btn-artefact { width:auto; min-width:0; height:36px; padding:9px 15px; }
  #modal-decisions .decision-actions .btn-artefact .action-label { display:inline; }
}
#who-are-you-btn { width:100%; margin-top:14px; padding:11px 14px; background:none; border:1.5px dashed #c9c6be; border-radius:10px; color:#999; font-size:13px; cursor:pointer; text-align:center; transition:border-color .18s,color .18s; }
#who-are-you-btn:hover { border-color:#6b82c4; color:#6b82c4; }

#toast-region { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 1000000; isolation: isolate; display: flex; pointer-events: none; overflow: hidden; }
.toast { position: absolute; inset: 0; width: 100%; height: var(--nav-h); display: flex; align-items: center; justify-content: center; padding: 10px 16px; color: #fff; font-size: 14px; font-weight: 700; text-align: center; box-shadow: 0 5px 18px rgba(0,0,0,.2); z-index: 1; }
.toast.toast-current { animation: toast-enter .24s ease-out both; }
.toast.toast-queued { top: 6px; opacity: .82; transform: translateY(6px) scale(.985); z-index: 0; }
.toast.toast-exiting { animation: toast-exit .22s ease-in both; }
.toast-success { background: var(--toast-success); }
.toast-info { background: var(--venn-accent); }
.toast-warning { background: var(--toast-warning); }
.toast-error { background: var(--toast-error); }
.toast { gap: 10px; pointer-events: all; }
.toast-action-btn { background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 6px; padding: 3px 10px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; flex-shrink: 0; }
.toast-action-btn:hover { background: rgba(255,255,255,.35); }
#mute-btn { color: #777; background:#f2f1ed; border-color:#e4e2dc; }
#mute-btn.noisy-mode { color: #111; background:#fff; border-color:#d8d8d8; }
#mute-btn { width:48px; min-width:48px; height:42px; padding:0; display:inline-flex; align-items:center; justify-content:center; user-select:none; -webkit-user-select:none; }
#mute-btn[hidden] { display:none !important; }
#mute-btn svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#mute-btn svg[hidden] { display:none !important; }
#mute-btn[aria-pressed="false"] { background:#f2f1ed; border-color:#e4e2dc; color:#777; }
#mute-btn[aria-pressed="true"] { opacity:1 !important; background:#20252b !important; border-color:#20252b !important; color:#fff !important; }
#mute-btn[aria-pressed="true"] svg { stroke:#fff !important; }
#mute-btn.noisy-mode[aria-pressed="true"], #mute-btn.noisy-mode[aria-pressed="false"] { background:#fff; border-color:#d8d8d8; color:#111; }
#mute-btn.noisy-mode svg { stroke:#111 !important; }
/* Always show crossed-mic; muted = black bg via aria-pressed */
#mute-btn #mute-icon-on { display:block !important; }
#mute-btn #mute-icon-off { display:none !important; }
#mute-btn:hover:not([aria-pressed="true"]) { background:#e8e6e0; border-color:#c8c5be; color:#555; }
#mute-btn:hover[aria-pressed="true"] { background:#20252b !important; border-color:#20252b !important; color:#fff !important; }
@keyframes toast-enter { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-exit { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-100%); } }

#mic-recovery {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 10060;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
#mic-recovery[hidden] { display: none !important; }
.mic-recovery-card {
  position: relative;
  pointer-events: auto;
  width: min(440px, 100%);
  background: #1c1f24;
  color: #fff;
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  display: grid;
  gap: 14px;
}
#mic-recovery-msg {
  margin: 0;
  padding-right: 28px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}
.mic-recovery-actions {
  display: grid;
  gap: 10px;
}
.mic-recovery-actions button {
  appearance: none;
  border: 0;
  border-radius: 12px;
  min-height: 48px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.mic-recovery-actions button svg {
  width: 20px; height: 20px; flex: 0 0 20px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.mic-recovery-primary {
  background: #fff;
  color: #111;
}
.mic-recovery-primary:hover { background: #f2f2f2; }
.mic-recovery-secondary {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22) !important;
}
.mic-recovery-secondary:hover { background: rgba(255,255,255,.18); }
.mic-recovery-dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255,255,255,.7);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.mic-recovery-dismiss:hover { color: #fff; background: rgba(255,255,255,.1); }
@media (max-width: 640px) {
  #mic-recovery {
    left: 10px;
    right: 10px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  body.chat-drawer-open #mic-recovery {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Field detail cards ── */

.point-dim { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dim-color, #888); margin-bottom: 4px; }
.point-dim svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.point-dim-generic { color:#aaa; }
.point-dim-generic svg { width:11px; height:11px; }
.point-dim-generic svg circle:last-child { fill:currentColor; stroke:none; }

/* ── Drawer detail panels ── */
#col-debug { display: none; }

.debug-block { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }

.block-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.copy-btn {
  font-size: 0; font-weight: 600; padding: 0; min-width: 42px; min-height: 40px; border-radius: 7px;
  background: #f0efe9; border: 1px solid #dddbd6; color: #888; cursor: pointer;
  font-family: inherit; display:inline-flex; align-items:center; justify-content:center; line-height:0; gap:0;
}
.copy-btn .copy-icon { width: 22px; height: 22px; }
.copy-btn:hover { background: #e4e2dc; color: #444; }
.copy-btn.copied { background: #d4edda; color: #1e6e33; border-color: #b8dfc4; }

#log {
  background: #fff;
  border-radius: 12px; padding: 16px 14px;
  font-size: 16px; line-height: 1.5;
  flex: 1; overflow-y: auto;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: flex; flex-direction: column; gap: 6px;
}
.transcript-stored .msg-text { line-height: 1.65; }
.msg { position: relative; padding: 12px 14px; border-radius: 12px; max-width: calc(100% - 34px); width: fit-content; text-align: left; box-sizing: border-box; }
.msg-venn  { background: #f3ecfb; color: #4d2f72; align-self: flex-start; border: 1px solid #d9c8ee; border-radius: 4px 14px 14px 14px; }
.msg-user  { background: #fff; color: #263a68; align-self: flex-end; border: 1px solid #d8dfe9; border-radius: 14px 4px 14px 14px; }
.msg:not(.msg-pending) { cursor: text; }
.msg:not(.msg-pending):hover { box-shadow: 0 2px 8px rgba(30,45,70,.08); }
.msg.editing {
  cursor: default;
  width:100%;
  max-width:100%;
  align-self:stretch;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:10px;
}
.msg.editing .msg-speak { display: none !important; }
.msg.editing .msg-meta { display: none !important; }
.msg.editing .msg-edit {
  flex:0 0 auto;
  width:100%;
  min-width:0;
  order:1;
}
.msg.editing .msg-tools {
  position:static !important;
  inset:auto !important;
  transform:none !important;
  display:flex !important;
  flex:0 0 auto;
  flex-direction:row;
  flex-wrap:wrap;
  gap:8px;
  width:100%;
  margin:0;
  padding:0;
  background:transparent;
  box-shadow:none;
  border:0;
  order:2;
}
.msg.editing .msg-delete,
.msg.editing .msg-debug,
.msg.editing .msg-empty,
.msg.editing .msg-cancel,
.msg.editing .msg-save {
  flex:1 1 calc(33.33% - 6px);
  min-width:96px;
  height:44px;
  min-height:44px;
  padding:0 12px;
  border-radius:10px;
  background:#fff;
  border:1px solid #e0ded8;
  box-shadow:none;
}
.msg.editing .msg-empty { display:inline-flex; }
.msg.editing .msg-cancel,
.msg.editing .msg-save { display:none; }
.msg.editing .msg-cancel {
  flex:1 1 calc(50% - 4px);
}
.msg.editing .msg-save {
  flex:1 1 calc(50% - 4px);
  color:var(--venn-accent);
  border-color:rgba(123,75,183,.28);
  background:var(--venn-accent-soft);
}
.msg.editing.msg-dirty .msg-delete,
.msg.editing.msg-dirty .msg-debug,
.msg.editing.msg-dirty .msg-empty { display:none !important; }
.msg.editing.msg-dirty .msg-cancel,
.msg.editing.msg-dirty .msg-save { display:inline-flex !important; }
.msg.editing .msg-source,
.msg.editing .msg-actions {
  order:3;
  flex:0 0 auto;
  width:100%;
  max-width:100%;
  min-width:0;
  margin-top:0;
  box-sizing:border-box;
}
.msg-edit { display:block; width:100%; min-height:48px; max-height:min(55vh,480px); box-sizing:border-box; resize:vertical; border:1px solid currentColor; border-radius:8px; padding:8px 10px; font:inherit; line-height:1.5; color:inherit; background:rgba(255,255,255,.78); outline:2px solid rgba(82,121,199,.18); }

/* Speak stays in the left gutter (user only) - known-good hit target. */
.msg-speak { position:absolute; top:8px; left:-32px; width:28px; height:28px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:transparent; color:#c86b1c; cursor:pointer; z-index:3; }
.msg-speak svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.msg-speak:hover { color:#a65312; background:#fff4ea; }

/* Delete + debug share one labeled tools row. */
.msg-tools {
  display:none;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px;
  z-index:5;
  pointer-events:auto;
}
.msg-delete,
.msg-debug,
.msg-empty,
.msg-cancel,
.msg-save {
  position:static;
  width:auto;
  min-width:96px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 12px;
  border:1px solid rgba(30,45,70,.12);
  border-radius:10px;
  background:rgba(255,255,255,.96);
  color:#444;
  font:inherit;
  font-size:14px;
  font-weight:650;
  line-height:1;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(30,45,70,.14);
  flex:0 0 auto;
}
.msg-empty,
.msg-cancel,
.msg-save { display:none; }
.msg-empty { order:1; }
.msg-delete { order:2; }
.msg-debug { order:3; }
.msg-cancel { order:4; }
.msg-save { order:5; }
.msg-delete svg,
.msg-debug svg,
.msg-empty svg,
.msg-cancel svg,
.msg-save svg,
.msg-delete .msg-action-trash {
  width:18px; height:18px; flex:0 0 18px;
}
.msg-delete .msg-action-trash,
.msg-empty svg,
.msg-cancel svg,
.msg-save svg {
  display:inline-flex; align-items:center; justify-content:center;
}
.msg-delete svg,
.msg-debug svg,
.msg-empty svg,
.msg-cancel svg,
.msg-save svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.msg-tool-label { pointer-events:none; }
.msg-delete:hover { color:#222; background:#f3f2ef; }
.msg-debug:hover { color:#a85c23; background:#fff4ea; border-color:#f1d6bd; }
.msg-empty:hover { color:#555; background:#f3f2ef; }
.msg-cancel:hover { color:#555; background:#f3f2ef; }
.msg-save:hover { color:var(--venn-accent-dark); background:var(--venn-accent-soft); }

/* Tools only while editing — one row: Empty | Delete | Debug (or Cancel | Save when dirty). */

.msg-label { display:flex; align-items:center; gap:6px; font-size: 11px; font-weight: 800; letter-spacing: 0.07em; opacity: 0.68; margin-bottom: 6px; }
.msg-label time { margin-left:auto; font-size:10px; font-weight:600; letter-spacing:0; opacity:.55; text-transform:none; }
.msg-meta { min-height: 0; display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; font-size:12px; line-height:1.2; font-weight:700; opacity:.82; }
.msg-venn .msg-meta { justify-content:flex-start; color:var(--venn-accent); }
.msg-user .msg-meta { justify-content:flex-start; flex-direction:row; color:#c86b1c; }
.msg-meta-badges { display:inline-flex; align-items:center; gap:4px; flex-shrink:0; }
.msg-venn .msg-label { color:var(--venn-accent); }
.msg-user .msg-label { color:#c86b1c; justify-content:flex-end; }
.msg-user .msg-label time { margin-left:8px; }
.msg-source { display:inline-flex; align-items:center; gap:5px; margin-top:8px; padding:5px 9px; border-radius:6px; background:rgba(200,107,28,.08); border:1px solid rgba(200,107,28,.18); color:#a85c23; font-size:11px; font-weight:600; text-decoration:none; line-height:1.3; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-source:hover { background:rgba(200,107,28,.14); border-color:rgba(200,107,28,.32); }
.msg-venn > .msg-source { background:var(--venn-accent-soft); border-color:rgba(123,75,183,.22); color:var(--venn-accent-dark); }
.msg-venn > .msg-source:hover { background:#e9dcf8; border-color:rgba(123,75,183,.42); }
.msg-source svg { width:12px; height:12px; flex-shrink:0; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.msg-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.msg-actions .msg-source { margin-top:0; }
button.msg-action { cursor:pointer; font:inherit; appearance:none; }
.msg-actions button.msg-action {
  min-height:42px;
  padding:9px 14px;
  border:1px solid #d8d3df;
  border-radius:10px;
  background:#fff;
  color:#3f3f46;
  font-size:15px;
  font-weight:650;
  line-height:1.2;
  box-shadow:0 1px 2px rgba(50,35,70,.08);
}
.msg-actions button.msg-action:hover { background:#faf9fc; border-color:#a995bd; color:#28232e; box-shadow:0 2px 6px rgba(50,35,70,.14); }
.msg-actions .msg-action-icon { width:17px; height:17px; margin-right:7px; vertical-align:-3px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.msg-text strong { font-weight:700; }

/* Bubbles with saved debug notes. */
.msg.msg-has-debug {
  border-style: dashed;
  border-width: 1.5px;
  box-shadow: inset 0 0 0 1px rgba(194,65,12,.06);
}
.msg-venn.msg-has-debug {
  background: #fff0e4;
  border-color: #d97706;
}
.msg-user.msg-has-debug {
  background: #f7f4ff;
  border-color: #7b4bb7;
}
.msg-debug-badge {
  position: static;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff4ea;
  border: 1px solid #f1d6bd;
  color: #c86b1c;
  pointer-events: auto;
  appearance:none;
  font:inherit;
  padding:0;
  flex-shrink: 0;
}
.msg-user .msg-debug-badge {
  background: #fff4ea;
  border-color: #f1d6bd;
  color: #c86b1c;
}
.msg-venn .msg-debug-badge {
  background: var(--venn-accent-soft);
  border-color: rgba(123,75,183,.28);
  color: var(--venn-accent);
}
.msg-debug-badge svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.msg.editing .msg-debug-badge { display: none; }

.msg-log-badge {
  position: static;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f1f1f1;
  border: 1px solid #d2d2d2;
  color: #777;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.msg-log-badge:hover { background:#e8e8e8; border-color:#bdbdbd; color:#555; }
.msg-venn .msg-log-badge {
  background:var(--venn-accent-soft);
  border-color:rgba(123,75,183,.28);
  color:var(--venn-accent);
}
.msg-venn .msg-log-badge:hover {
  background:#e9dcf8;
  border-color:rgba(123,75,183,.45);
  color:var(--venn-accent-dark);
}
.msg-user .msg-log-badge {
  background:#fff4ea;
  border-color:#f1d6bd;
  color:#c86b1c;
}
.msg-user .msg-log-badge:hover {
  background:#ffeadb;
  border-color:#e3b995;
  color:#a65312;
}
.msg-has-debug .msg-log-badge { right: auto; }
.msg-log-badge svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.msg.editing .msg-log-badge { display: none; }

body.msg-tech-log-open { overflow: hidden; }

#modal-tech-log .modal-card { display: flex; flex-direction: column; min-height: 0; }
.tech-log-modal-body {
  padding: 12px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.tech-log-modal-context {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #666;
  flex-shrink: 0;
}
.tech-log-filter-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 20px 8px;
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid #ece9e3;
}
.tech-log-filter-bar[hidden] { display: none !important; }
.tech-log-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
  flex: 1 1 auto;
}
.tech-log-filter-chip {
  appearance: none;
  border: 1px solid #e5e2db;
  border-radius: 999px;
  background: #fff;
  color: #555;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  padding: 6px 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tech-log-filter-chip-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.tech-log-filter-chip-icon {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tech-log-filter-chip.is-active { font-weight: 800; }
.tech-log-filter-chip--err { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.tech-log-filter-chip--err.is-active { background: #fee2e2; box-shadow: inset 0 0 0 1px #fca5a5; }
.tech-log-filter-chip--warn { border-color: #fde68a; background: #fffbeb; color: #d97706; }
.tech-log-filter-chip--warn.is-active { background: #fef3c7; box-shadow: inset 0 0 0 1px #fcd34d; }
.tech-log-filter-chip--info { border-color: #bfdbfe; background: #eff6ff; color: #2563eb; }
.tech-log-filter-chip--info.is-active { background: #dbeafe; box-shadow: inset 0 0 0 1px #93c5fd; }
.tech-log-filter-chip--debug { border-color: #fed7aa; background: #fff7ed; color: #ea580c; }
.tech-log-filter-chip--debug.is-active { background: #ffedd5; box-shadow: inset 0 0 0 1px #fdba74; }
.tech-log-filter-count {
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.tech-log-filter-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}
.tech-log-filter-actions[hidden] { display: none !important; }
.tech-log-filter-copy {
  appearance: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #d8d6d0;
  border-radius: 8px;
  background: #fff;
  color: #555;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.tech-log-filter-copy:hover { background: #f3f2ef; color: #333; }
.tech-log-filter-copy svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tech-log-filter-clear {
  appearance: none;
  border: 1px solid #e5e2db;
  border-radius: 8px;
  background: #fff;
  color: #555;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  padding: 7px 10px;
  cursor: pointer;
  flex: 0 0 auto;
}
.tech-log-filter-clear:hover { background: #f3f2ef; color: #333; border-color: #d8d6d0; }
@media (max-width: 640px) {
  .tech-log-filter-bar {
    gap: 6px;
    padding: 6px 16px 8px;
  }
  .tech-log-filter-chip-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .tech-log-filter-chip { padding: 6px 7px; gap: 4px; }
  .tech-log-filter-copy { width: 28px; height: 28px; border-radius: 7px; }
  .tech-log-filter-clear { padding: 6px 8px; font-size: 11px; }
}
.tech-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
}
.tech-log-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: start;
  padding: 10px 8px;
  font-size: 15px;
  line-height: 1.45;
  border-bottom: 1px solid #ece9e3;
  color: #666;
  opacity: 0.72;
}
.tech-log-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.tech-log-ts {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: #888;
  line-height: 1.2;
}
.tech-log-row--focus .tech-log-ts { color: #5b4d7a; font-weight: 600; }
.tech-log-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4338ca;
  line-height: 1.25;
  word-break: break-word;
}
.tech-log-row--focus {
  opacity: 1;
  color: #292929;
  background: #f7f4ff;
  border-bottom-color: #e4ddf5;
}
.tech-log-row--focus .tech-log-tag { color: #6d28d9; }
.tech-log-row--err {
  opacity: 1;
  background: #fef2f2;
  border-bottom-color: #fecaca;
  color: #7f1d1d;
}
.tech-log-row--err .tech-log-ts { color: #b45353; }
.tech-log-row--err .tech-log-tag { color: #b91c1c; }
.tech-log-row--focus.tech-log-row--err {
  background: #fee2e2;
  border-bottom-color: #fca5a5;
}
.tech-log-row--warn {
  opacity: 1;
  background: #fffbeb;
  border-bottom-color: #fde68a;
  color: #92400e;
}
.tech-log-row--warn .tech-log-ts { color: #b45309; }
.tech-log-row--warn .tech-log-tag { color: #d97706; }
.tech-log-row--focus.tech-log-row--warn {
  background: #fef3c7;
  border-bottom-color: #fcd34d;
}
.tech-log-row--info {
  opacity: 1;
  background: #eff6ff;
  border-bottom-color: #bfdbfe;
  color: #1e3a8a;
}
.tech-log-row--info .tech-log-ts { color: #3b82f6; }
.tech-log-row--info .tech-log-tag { color: #2563eb; }
.tech-log-row--focus.tech-log-row--info {
  background: #dbeafe;
  border-bottom-color: #93c5fd;
}
.tech-log-row--debug {
  opacity: 1;
  background: #fff7ed;
  border-bottom-color: #fed7aa;
  color: #9a3412;
}
.tech-log-row--debug .tech-log-ts { color: #c2410c; }
.tech-log-row--debug .tech-log-tag { color: #ea580c; }
.tech-log-row--focus.tech-log-row--debug {
  background: #ffedd5;
  border-bottom-color: #fdba74;
}
.tech-log-row--pulse { animation: tech-log-row-pulse 1.4s ease; }
@keyframes tech-log-row-pulse {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(194,65,12,0); }
  35% { box-shadow: inset 0 0 0 3px rgba(194,65,12,.35); }
}
.tech-log-tag-row {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.tech-log-sev-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tech-log-row--err .tech-log-sev-icon { color: #dc2626; }
.tech-log-row--warn .tech-log-sev-icon { color: #d97706; }
.tech-log-msg {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}
.tech-log-anchor {
  list-style: none;
  margin: 8px 0 4px;
  padding: 8px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7b4bb7;
  background: #f1eafa;
  border-radius: 8px;
}
.tech-log-turn-copy {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #d8ccef;
  border-radius: 8px;
  background: #fff;
  color: #6d28d9;
  cursor: pointer;
  padding: 0;
}
.tech-log-turn-copy:hover { background: #faf7ff; border-color: #b9a2e8; }
.tech-log-turn-copy svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tech-log-anchor--pulse {
  animation: tech-log-anchor-pulse 1.2s ease;
}
@keyframes tech-log-anchor-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(123,75,183,.35); }
  50% { box-shadow: 0 0 0 6px rgba(123,75,183,0); }
}
.tech-log-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid #e5e2db;
  flex-shrink: 0;
  background: rgba(255,255,255,.98);
}
.tech-log-footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.tech-log-reset-btn {
  flex: 0 0 auto;
  min-width: 96px;
  color: #a33;
  border-color: #e4caca;
  background: #fff8f8;
}
.tech-log-reset-btn:hover { background: #fff0f0; border-color: #d9aaaa; color: #922; }
.tech-log-copy-btn {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: auto;
  gap: 8px;
  border-color: var(--venn-accent);
  background: var(--venn-accent);
  color: #fff;
}
.tech-log-copy-btn:hover { background: var(--venn-accent-dark); border-color: var(--venn-accent-dark); color: #fff; }
.tech-log-copy-btn .history-footer-icon { width: 18px; height: 18px; flex-basis: 18px; stroke: #fff; }

/* ── Topic links ─────────────────────────────────────────────────────────── */
.decision-actions > .btn-links { position:relative; gap:0; }
.decision-actions > .btn-links .action-icon { margin:0; }
.decision-actions > .btn-links .links-count {
  position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px;
  border-radius:8px; background:var(--venn-accent,#c86b1c); color:#fff;
  font-size:10px; font-weight:700; line-height:16px; text-align:center;
}
.decision-actions > .btn-share { position:relative; }
.decision-actions > .btn-share .share-count {
  position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px;
  border-radius:8px; background:var(--venn-accent,#c86b1c); color:#fff;
  font-size:0; font-weight:700; line-height:16px; text-align:center;
}
.decision-actions > .btn-share .share-count[hidden] { display:none !important; }
.decision-actions:not(.more-visible) > .btn-share .share-count:not([data-badge]),
.decision-actions:not(.more-visible) > .btn-share .share-count[data-badge=""] {
  display:none !important;
}
.decision-actions:not(.more-visible) > .btn-share .share-count::before {
  content:attr(data-badge);
  font-size:10px; font-weight:700; color:#fff; line-height:16px;
}
.links-modal-list { display:flex; flex-direction:column; gap:10px; margin-top:auto; }
.links-modal-list[hidden],
.links-modal-add[hidden],
.links-modal-footer [hidden] { display:none !important; }
#modal-links .modal-card { display:flex; flex-direction:column; min-height:0; }
#modal-links .modal-body {
  display:flex; flex-direction:column; gap:12px; min-height:0; flex:1;
}
.links-modal-search-wrap {
  display:flex; align-items:center; gap:8px; flex:0 0 auto;
  padding:9px 12px; border:1px solid #d8d6d0; border-radius:9px;
  background:#fff; color:#888;
}
.links-modal-search-wrap[hidden] { display:none !important; }
.links-modal-search-wrap svg { width:18px; height:18px; flex:0 0 18px; stroke:currentColor; stroke-width:2; }
.links-modal-search-wrap input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:#333; font:inherit; font-size:15px; }
.links-modal-search-wrap input::placeholder { color:#999; }
.links-modal-search-clear { display:inline-flex; align-items:center; justify-content:center; flex:0 0 28px; width:28px; height:28px; padding:0; border:0; border-radius:6px; background:transparent; color:#888; cursor:pointer; }
.links-modal-search-clear[hidden] { display:inline-flex !important; visibility:hidden; pointer-events:none; }
.links-modal-search-clear:hover { background:#f1f0ed; color:#444; }
.links-modal-search-clear svg { width:18px; height:18px; stroke:currentColor; stroke-width:2; }
.links-modal-empty { margin:8px 0 0; color:#888; font-size:14px; line-height:1.45; }
.links-modal-row {
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:12px; border:1px solid #e8e4df; border-radius:10px; background:#faf9f7;
}
.links-modal-row-main { min-width:0; flex:1; }
.links-modal-row-title { font-size:15px; font-weight:700; color:#333; line-height:1.3; }
.links-modal-row-summary { margin-top:4px; font-size:13px; color:#666; line-height:1.4; }
.links-modal-row-url { margin-top:6px; font-size:12px; color:#9a7a55; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.links-modal-row-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.links-modal-open,
.links-modal-remove {
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid #e0deda; background:#fff; padding:0; cursor:pointer;
  text-decoration:none; color:#666;
}
.links-modal-open:hover { background:#f7f1ea; border-color:#d9c3a8; color:#a85c23; }
.links-modal-remove { color:#c0392b; }
.links-modal-remove:hover { background:#fdf0ee; border-color:#e8b4ae; }
.links-modal-action-icon {
  width:16px; height:16px; flex:0 0 16px;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.links-modal-add {
  display:flex; flex-direction:column; gap:8px;
  margin-top:auto; padding-top:8px;
}
.links-modal-add-status { margin:0; font-size:13px; color:#888; display:flex; align-items:center; gap:8px; min-height:18px; }
.links-modal-add-status.is-loading::before { content:""; width:13px; height:13px; flex:0 0 13px; border:2px solid #d8d6d0; border-top-color:var(--venn-accent); border-radius:50%; animation:links-status-spin .8s linear infinite; }
@keyframes links-status-spin { to { transform:rotate(360deg); } }
.links-modal-footer { gap:10px; flex-shrink:0; }
.links-modal-footer #links-modal-topic-btn { order:0; }
.links-modal-footer #links-modal-cancel-btn { order:0; }
.links-modal-footer #links-modal-add-btn,
.links-modal-footer #links-modal-save-btn { order:1; flex:1; }
.artefact-include-opts { display:flex; flex-wrap:wrap; gap:12px 18px; margin:0 0 14px; padding:10px 12px; border:1px solid #ebe7e1; border-radius:10px; background:#faf9f7; }
.artefact-include-label { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#555; cursor:pointer; user-select:none; }
.artefact-include-label input { width:15px; height:15px; accent-color:var(--venn-accent,#c86b1c); }
.chat-speaker-icon { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.msg-text  { font-size: 16px; line-height: 1.5; }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.msg-research { max-width: calc(100% - 34px); width: 100%; }
.msg.msg-research .msg-text { cursor: text; }
.msg .msg-text, .msg .msg-text a { font-size:16px; line-height:1.5; font-family:inherit; }
.transcript-stored { align-self: stretch; max-width: 100%; text-align: left; background: #f7f6f2; color: #222; border-radius: 10px; }
.transcript-stored .msg-label { text-align: left; }
.msg-pending { opacity: 0.45; font-style: italic; }
/* Vennio live speech: reveal at full contrast as text streams (Claude-style), not faint until done. */
.msg-venn.msg-pending:not(.msg-research-progress):not(.msg-reply-progress) {
  opacity: 1;
  font-style: normal;
}
.msg.msg-research-progress,
.msg.msg-reply-progress {
  opacity: 1;
  font-style: normal;
  border-color: var(--venn-accent-dark);
  background: var(--venn-accent-dark);
  color: #fff;
}
.msg.msg-research-progress .msg-text,
.msg.msg-reply-progress .msg-text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  font-style: normal;
  color: #fff;
}
.msg.msg-research-progress .msg-meta,
.msg.msg-reply-progress .msg-meta { color:#fff; opacity:.9; }
.msg.msg-research-progress .research-activity-label,
.msg.msg-reply-progress .research-activity-label { min-width: 0; }
.research-activity {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.38);
  border-top-color: #fff;
  border-radius: 50%;
  animation: topic-upload-spin .75s linear infinite;
}
.msg-unclear { opacity: 0.6; border-color: #c8b4a0; border-style: dashed; background: #fdf9f6; }
.msg-unclear .msg-text { font-style: italic; color: #9a8070; }
.msg-junk { opacity: 0.55; border-style: dashed; border-color: #c4b8a8; background: #f7f4f0; }
.msg-junk .msg-text { color: #8a7d70; }
.msg-junk-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a7d70;
  border: 1px solid #c4b8a8;
  border-radius: 3px;
  padding: 0 0.35em;
  line-height: 1.4;
  margin-left: 0.35em;
  vertical-align: middle;
}
.msg-file { display:flex; align-items:center; gap:12px; background:#fff; color:#263a68; border:1px solid #d8dfe9; border-radius:14px 4px 14px 14px; padding:12px 46px 12px 14px; max-width:calc(100% - 34px); width:fit-content; cursor:pointer; align-self:flex-end; position:relative; font-style:normal; opacity:1; }
.msg-file:not(.msg-pending):hover { box-shadow:0 2px 8px rgba(30,45,70,.08); }
.msg-file.msg-pending { opacity:0.55; cursor:default; padding-right:14px; }
.msg-file .msg-delete {
  position:absolute; left:auto; right:8px; top:8px; display:none;
  width:28px; height:28px; min-width:0; padding:0; border:0; border-radius:50%;
  background:transparent; box-shadow:none; font-size:0;
}
.msg-file:hover .msg-delete { display:grid; }
.msg-file .msg-tool-label { display:none; }
.file-msg-thumb { flex-shrink:0; width:72px; height:72px; border-radius:8px; overflow:hidden; position:relative; background:#edf0f7; }
.file-msg-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.file-msg-thumb-loading { display:grid; place-items:center; }
.file-msg-thumb-loading::after { content:''; width:18px; height:18px; border:2px solid #d0d9ed; border-top-color:#5279c7; border-radius:50%; animation:topic-upload-spin .75s linear infinite; }
.file-msg-icon { flex-shrink:0; width:26px; height:26px; display:grid; place-items:center; color:#a0b0cc; }
.file-msg-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.file-msg-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.file-msg-name { font-size:15px; font-weight:600; color:#263a68; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:280px; }
.file-msg-detail { font-size:13px; color:#6b82a4; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:280px; }
.file-msg-view { display:inline-flex; align-items:center; gap:5px; margin-top:6px; padding:5px 12px; border:1px solid #d0d9ed; border-radius:6px; background:#f0f3f9; color:#5279c7; font-size:13px; font-weight:600; cursor:pointer; }
.file-msg-view svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.file-msg-view:hover { background:#e4eaf7; border-color:#b0bedf; }
.partial { color: #bbb; font-style: italic; }
.chat-turn-break { display:flex; align-items:center; gap:9px; margin: 8px 0 2px; color:#aaa; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.chat-turn-break::before, .chat-turn-break::after { content:""; height:1px; flex:1; background:#e7e4de; }
.chat-turn-break .chat-speaker-icon { width:18px; height:18px; padding:2px; border-radius:50%; background:#fff; }
.chat-turn-break.venn { color:var(--venn-accent); }
.chat-turn-break.user { color:#c86b1c; }

#chat-composer-home {
  flex-shrink: 0;
  background: rgba(255,255,255,.98);
  border-top: 1px solid #e5e2db;
}
#chat-composer {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "close voice input attach";
  gap: 8px;
  align-items: center;
  padding: 10px 8px calc(12px + env(safe-area-inset-bottom, 0px));
}
#chat-composer.is-expanded {
  grid-template-columns: auto auto auto minmax(96px, 1fr);
  grid-template-areas:
    "input input input input"
    "close voice attach send";
  align-items: end;
}
#chat-composer.voice-live:not(.is-expanded) {
  grid-template-columns: auto 188px minmax(0, 1fr) auto;
  grid-template-areas: "close voice input attach";
}
#chat-composer.voice-live.is-expanded {
  grid-template-columns: auto 188px auto minmax(96px, 1fr);
  grid-template-areas:
    "input input input input"
    "close voice attach send";
}
#chat-composer.voice-live.is-expanded #chat-voice-state {
  width:92px;
  min-width:92px;
  flex:0 0 92px;
}
#chat-close-btn { grid-area: close; }
#chat-voice-cluster { grid-area: voice; min-width: 0; }
#chat-input-shell { grid-area: input; }
#chat-attach-btn { grid-area: attach; }
#chat-send-btn { grid-area: send; }

#chat-input-shell { position:relative; min-width:0; display:flex; align-items:stretch; }
#chat-input {
  flex: 1; width:100%; box-sizing:border-box; border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 42px 9px 12px; font: inherit; font-size: 16px; color: var(--text);
  resize: none; line-height: 1.4; min-height:42px; max-height: 154px; overflow-y: auto;
  background: var(--surface); outline: none; appearance:none; -webkit-appearance:none; field-sizing: content;
}
#chat-composer:not(.is-expanded) #chat-input {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 12px;
  line-height: 40px; /* 42px box − 1px borders */
  overflow: hidden;
  white-space: nowrap;
  field-sizing: fixed;
}
#chat-composer:not(.is-expanded) #chat-input-shell {
  align-items: stretch;
  height: 42px;
  min-height: 42px;
}
#chat-input:focus { border-color: var(--border); box-shadow: inset 0 0 0 1px #5279c7; }
#chat-clear-btn { position:absolute; top:50%; right:8px; transform:translateY(-50%); width:32px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:50%; background:transparent; color:#777; cursor:pointer; }
#chat-clear-btn:hover { background:#eeeae4; color:#333; }
#chat-clear-btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
#chat-clear-btn[hidden] { display:none !important; }

#chat-close-btn,
#chat-attach-btn {
  width:42px; height:42px; min-height:42px; flex:0 0 auto; display:grid; place-items:center; padding:0;
  border:1px solid #c8c5be; border-radius:10px; background:#fff; color:#777; cursor:pointer;
  box-sizing:border-box;
}
#chat-close-btn:hover,
#chat-attach-btn:hover { background:#f7f6f2; color:#555; }
#chat-close-btn svg,
#chat-attach-btn svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

#chat-voice-cluster {
  display:flex; align-items:stretch; gap:0; width:100%;
  height:42px; min-height:42px; max-height:42px;
  border:1px solid #c8c5be; border-radius:10px; background:#fff; overflow:hidden;
  box-sizing:border-box;
}
#chat-composer.voice-live #chat-voice-cluster { min-width:188px; }
#chat-voice-cluster button {
  position:relative; width:42px; height:100%; min-height:0; padding:0; display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:0; background:#fff; color:#777; cursor:pointer; flex:0 0 auto;
  box-sizing:border-box;
}
#chat-voice-cluster button + button { border-left:1px solid #e1ded8; }
#chat-voice-cluster button[hidden] { display:none !important; }
#chat-voice-cluster button:hover { background:#f7f6f2; color:#555; }
#chat-voice-cluster button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#chat-voice-cluster button svg[hidden] { display:none !important; }
#chat-voice-state.is-cta {
  flex: 1 1 auto;
  min-width: 96px;
  width: auto;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
}
#chat-voice-state.is-cta::after { content: attr(data-cta-label); }

#chat-composer.voice-user #chat-voice-state { color:#fff; background:#e67e22; box-shadow:inset 0 0 0 2px rgba(255,224,176,.35),inset 0 0 16px rgba(255,224,176,.42); animation:voice-user-orange-pulse 2.2s ease-in-out infinite; }
#chat-composer.voice-venn #chat-voice-state { color:#fff; background:var(--venn-accent); box-shadow:inset 0 0 0 2px rgba(220,190,255,.35),inset 0 0 16px rgba(220,190,255,.42); animation:voice-venn-purple-pulse 2.2s ease-in-out infinite; }
#chat-composer.voice-thinking #chat-voice-state { color:#fff; background:var(--venn-accent); border-color:var(--venn-accent); box-shadow:inset 0 0 0 2px rgba(220,190,255,.35),inset 0 0 16px rgba(220,190,255,.42); animation:talk-thinking-pulse 2.4s ease-in-out infinite; }
#chat-composer.voice-thinking #chat-voice-cluster { border-color: var(--venn-accent); }
#chat-composer.voice-both #chat-voice-state { color:#fff; background:linear-gradient(100deg,var(--venn-accent) 0 48%,#e67e22 52% 100%); animation:voice-both-pulse 1.8s ease-in-out infinite; }
#chat-composer.voice-user #chat-voice-state:hover,
#chat-composer.voice-venn #chat-voice-state:hover,
#chat-composer.voice-both #chat-voice-state:hover,
#chat-composer.voice-noise #chat-voice-state:hover { color:#fff; }
#chat-composer.voice-noise #chat-voice-state { color:#fff; background:#252a31; }
/* Mic open + quiet: purple icon + cluster border (not the filled Vennio-speaking look). */
#chat-composer.voice-silence #chat-voice-cluster { border-color: var(--venn-accent); }
#chat-composer.voice-silence #chat-voice-state {
  color: var(--venn-accent); background: #fff;
  box-shadow: none; animation: none;
}
#chat-composer.voice-silence #chat-voice-state:hover {
  color: var(--venn-accent); background: #f7f3fb;
}
#chat-voice-mute {
  color:#777; background:#fff;
  width:92px !important; min-width:92px !important; flex:0 0 92px !important;
  display:block !important;
  position:relative !important;
  padding:0 !important;
  margin:0 !important;
  line-height:0 !important;
  text-align:center !important;
  box-sizing:border-box;
}
#chat-composer.muted #chat-voice-mute { color:#fff; background:#20252b; }
#chat-composer.muted #chat-voice-mute:hover { color:#fff; background:#20252b; }
/* Center the plain wrapper; Lucide can replace its SVG child safely. */
#chat-voice-mute .chat-voice-mute-glyph {
  position:absolute !important;
  left:36px !important;
  top:10px !important;
  right:auto !important;
  bottom:auto !important;
  width:20px;
  height:20px;
  display:block;
  margin:0 !important;
  padding:0;
  line-height:0;
  pointer-events:none;
  transform:none !important;
}
#chat-voice-mute .chat-voice-mute-glyph svg,
#chat-voice-mute .chat-voice-mute-glyph .lucide {
  display:block !important;
  width:20px !important;
  height:20px !important;
  margin:0 !important;
}
#chat-send-btn {
  height: 42px; min-height:42px; width: 100%; justify-self: stretch;
  background: #e67e22; color: #fff;
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  padding: 0 14px; border: none; cursor: pointer; transition: background .15s;
  font: inherit; font-size: 14px; font-weight: 600; gap: 8px;
}
#chat-send-btn.is-cta::after { content: 'Send'; }
#chat-send-btn:hover:not(:disabled) { background: #d35400; }
#chat-send-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#chat-send-btn[hidden] { display:none; }
#chat-send-btn:disabled { opacity: 0.35; cursor: default; }

#transcript-drawer .drawer-body { position:relative; }

@media (min-width:641px) {
  /* Desktop chat stays a compact single-row text composer. Voice controls and
     the minimize control remain available on mobile only. */
  #transcript-drawer #chat-composer,
  #transcript-drawer #chat-composer.is-expanded,
  #transcript-drawer #chat-composer.voice-live,
  #transcript-drawer #chat-composer.voice-live.is-expanded {
    grid-template-columns:42px minmax(0,1fr) 42px;
    grid-template-areas:"attach input send";
    align-items:center;
  }
  #transcript-drawer #chat-close-btn,
  #transcript-drawer #chat-voice-cluster { display:none !important; }
  #transcript-drawer #chat-composer:not(.has-text) {
    grid-template-columns:42px minmax(0,1fr);
    grid-template-areas:"attach input";
  }
  #transcript-drawer #chat-composer:not(.has-text) #chat-attach-btn {
    grid-column:1;
  }
  #transcript-drawer #chat-composer:not(.has-text) #chat-input-shell {
    grid-column:2;
  }
  #transcript-drawer #chat-send-btn,
  #transcript-drawer #chat-send-btn.is-cta {
    width:42px;
    min-width:42px;
    padding:0;
    font-size:0;
  }
  #transcript-drawer #chat-send-btn.is-cta::after { display:none; }
}

#log {
  flex: 1; overflow-y: auto;
  background: var(--surface);
  border-radius: 10px; padding: 12px 14px;
  font-size: 13px; color: #555; line-height: 1.7;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.log-row { border-bottom: 1px solid #f2f2f2; padding: 5px 0; font-size: 14px; color: #555; }
.log-row:last-child { border-bottom: none; }
.ts  { color: #ccc; margin-right: 3px; }
.tag { font-weight: 700; margin-right: 4px; font-size: 10px; }
.tag.info    { color: #bbb; }
.tag.extract { color: var(--venn-accent); }
.tag.hand    { color: #e67e22; }
.tag.boom    { color: #e74c3c; }
.tag.ask     { color: #2980b9; }
.tag.err     { color: #c0392b; }
.tag.warn    { color: #d97706; }
.tag.tactic  { color: #0ea5e9; }
.tag.voice   { color: #64748b; }
.tag.debug   { color: #c2410c; font-weight: 700; }
.log-row pre { font-size: 12px; color: #aaa; white-space: pre-wrap; margin-top: 3px; padding-left: 10px; font-family: 'SF Mono', monospace; }

#topic-debug-panel {
  position: fixed;
  left: max(10px, env(safe-area-inset-left, 0px));
  right: max(10px, env(safe-area-inset-right, 0px));
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  /* Above chat sheet (10000) and mic-recovery (10060) so debug isn't trapped under the drawer. */
  z-index: 10080;
  pointer-events: none;
  max-height: min(70dvh, 560px);
  box-sizing: border-box;
}
#topic-debug-panel[hidden] { display: none !important; }
#topic-debug-panel:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.topic-debug-open #topic-debug-panel { pointer-events: none; }
.topic-debug-card {
  pointer-events: auto;
  background: #fff; border: 1px solid #e5e2dc; border-radius: 16px;
  box-shadow: 0 14px 36px rgba(30,45,70,.18);
  padding: 18px 18px 16px; display: grid; gap: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.topic-debug-head { display: grid; gap: 6px; }
.topic-debug-head strong { font-size: 16px; letter-spacing: .05em; text-transform: uppercase; color: #a85c23; }
.topic-debug-about { font-size: 15px; color: #555; line-height: 1.45; }
#topic-debug-input {
  width: 100%; min-height: 120px; resize: vertical; box-sizing: border-box;
  border: 1px solid #d8d6d0; border-radius: 12px; padding: 14px 14px;
  font: inherit; font-size: 17px; line-height: 1.5; color: #222; background: #fafaf8;
}
#topic-debug-input:focus { outline: none; border-color: #c86b1c; box-shadow: 0 0 0 3px rgba(200,107,28,.16); background: #fff; }
.topic-debug-status { min-height: 1.35em; font-size: 15px; color: #555; line-height: 1.4; }
.topic-debug-actions { display: flex; gap: 10px; flex-wrap: nowrap; align-items: stretch; }
.topic-debug-actions button {
  appearance: none;
  border-radius: 10px;
  border: 1px solid rgba(30,45,70,.12);
  background: rgba(255,255,255,.96);
  color: #444;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  padding: 0 14px;
  cursor: pointer;
  height: 44px;
  min-width: 112px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  box-shadow: 0 2px 8px rgba(30,45,70,.14);
}
.topic-debug-actions button:hover { color: #222; background: #f3f2ef; }
.topic-debug-actions button svg {
  width: 18px; height: 18px; flex: 0 0 18px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.topic-debug-btn-label { pointer-events: none; line-height: 1; }
.topic-debug-rec {
  background: var(--venn-accent) !important;
  border-color: var(--venn-accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(123,75,183,.28);
}
.topic-debug-rec:hover {
  background: var(--venn-accent-dark) !important;
  border-color: var(--venn-accent-dark) !important;
  color: #fff !important;
}
.topic-debug-rec.is-recording {
  background: #fff !important;
  border-color: var(--venn-accent) !important;
  color: var(--venn-accent) !important;
  box-shadow: inset 0 0 0 1px rgba(123,75,183,.28), 0 2px 8px rgba(123,75,183,.14);
}
.topic-debug-rec.is-recording:hover { background: #f7f3fb !important; color: var(--venn-accent) !important; }
.topic-debug-cancel:hover { color: #555; background: #f3f2ef; }
.topic-debug-save {
  margin-left: auto;
  flex: 1 1 auto;
}
.topic-debug-save:hover {
  color: var(--venn-accent-dark);
  background: var(--venn-accent-soft);
}
@media (max-width: 640px) {
  #topic-debug-panel {
    left: 8px; right: 8px;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    max-height: min(68dvh, 520px);
  }
  .topic-debug-card {
    padding: 20px 18px 18px; gap: 14px; border-radius: 18px;
    max-height: inherit; overflow: auto; -webkit-overflow-scrolling: touch;
  }
  .topic-debug-head strong { font-size: 17px; }
  .topic-debug-about { font-size: 16px; }
  #topic-debug-input { min-height: 120px; font-size: 18px; padding: 16px; }
  .topic-debug-status { font-size: 16px; }
  .topic-debug-actions { gap: 10px; }
}

/* ════════════════════ MODALS ════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  /* The sheet itself owns its visual state. Keep this wrapper as a click
     catcher, but never leave a persistent dimming layer behind. */
  background: transparent;
  display: flex; align-items: flex-end; justify-content: center; padding: 0;
}
.modal-card {
  background: #fff; border-radius: 14px;
  width: 100%; max-width: none; height: 100dvh; max-height: 100dvh;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 52px rgba(0,0,0,0.2);
}
.modal-drag-handle { display: none; width: 80px; height: 5px; border-radius: 99px; background: #d0cec8; margin: 5px auto 0; flex-shrink: 0; touch-action: none; }
.modal-drag-handle.grabbed { background: var(--venn-accent); box-shadow: 0 0 0 3px rgba(var(--venn-accent-rgb),.16); }
.modal-card.grabbed, .slide-drawer.grabbed { background: var(--venn-accent); }
.modal-card.grabbed > .modal-body, .slide-drawer.grabbed > .drawer-body { background: #fff; }
.modal-header.grabbed, .drawer-header.grabbed {
  background: var(--venn-accent);
  border-bottom-color: var(--venn-accent-dark);
  color: #fff;
}
.modal-header.grabbed h2, .drawer-header.grabbed h2,
.modal-header.grabbed .copy-btn, .drawer-header.grabbed .copy-btn { color: #fff; }
.modal-drag-handle.grabbed { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.22); }
.modal-header {
  display: flex; justify-content: center; align-items: center; position: relative;
  min-height: 54px; padding: 11px 16px; border-bottom: 1px solid #eee; flex-shrink: 0;
}
.modal-header h2 { max-width: calc(100% - 60px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; line-height: 1.1; font-weight: 700; color: #111; }
.modal-close { display:none; }
.modal-body { padding: 22px 28px; overflow-y: auto; flex: 1; font-size: 16px; position: relative; }
.modal-body-loader {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 6;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  color: #888;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 24px;
  box-sizing: border-box;
}
.modal-body.is-loading {
  min-height: 220px;
  flex: 1 1 auto;
}
.modal-body.is-loading > .modal-body-loader { display: flex; }
.modal-body.is-loading > :not(.modal-body-loader) {
  visibility: hidden;
  pointer-events: none;
}
.modal-body-spinner {
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border: 3px solid #e2e2e2;
  border-top-color: var(--venn-accent, #7c5cbf);
  border-radius: 50%;
  animation: modal-body-spin .75s linear infinite;
  flex: 0 0 auto;
}
.modal-body-loader.is-error .modal-body-spinner { display: none; }
.modal-body-loader-label {
  line-height: 1.35;
  max-width: 22em;
}
@keyframes modal-body-spin { to { transform: rotate(360deg); } }
.modal-desc { font-size: 17px; color: #888; margin-bottom: 18px; line-height: 1.6; }
.circle-modal-desc-row {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 18px;
}
.circle-modal-desc-row .modal-desc { flex: 1; min-width: 0; margin-bottom: 0; }
.circle-label-edit {
  flex: 0 0 36px; width: 36px; height: 36px; margin-top: -2px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #d8d6d0; border-radius: 9px; background: #fff; color: #777;
  cursor: pointer; padding: 0;
}
.circle-label-edit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.circle-label-edit:hover { background: #f2f1ed; color: #333; border-color: #aaa; }
.circle-label-edit[hidden] { display: none !important; }
#circle-modal-title-input {
  width: 100%; max-width: calc(100% - 48px); box-sizing: border-box;
  margin: 0; padding: 6px 10px; border: 1px solid #5279c7; border-radius: 8px;
  font: inherit; font-size: 21px; font-weight: 700; color: #111; background: #fff;
  outline: 2px solid rgba(82,121,199,.18);
}

.modal-add { display: flex; gap: 8px; margin-top: 14px; }
.modal-add input {
  flex: 1; padding: 11px 14px; border: 1px solid #ddd; border-radius: 6px;
  font-family: inherit; font-size: 16px; outline: none; color: #111;
}
.modal-add input:focus { border-color: #999; }
.modal-add button { background: #1a1a1a; color: #fff; padding: 11px 18px; border-radius: 6px; font-size: 16px; border: none; font-family: inherit; cursor: pointer; }
/* Profile bucket / pill UI */
.profile-bucket { margin-bottom: 24px; }
.bucket-header { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #888; margin-bottom: 10px; }
.location-get-btn { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; background: transparent; border: 1px solid #d0cdc6; border-radius: 10px; padding: 2px 9px; cursor: pointer; color: #666; line-height: 1.6; font-family: inherit; }
.location-get-btn:hover:not(:disabled) { background: #f0ede8; }
.location-get-btn:disabled { opacity: .45; cursor: default; }
.location-geo-status { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: #25a06a; font-weight: 600; letter-spacing: .05em; }
.location-geo-update { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; color:#25a06a; padding:0; line-height:0; opacity:.75; }
.location-geo-update svg { width:18px; height:18px; display:block; }
.location-geo-update:hover:not(:disabled) { opacity: 1; }
.location-geo-update:disabled { opacity: .35; cursor: default; }
.location-geo-update.spinning svg { animation: geo-spin .7s linear infinite; }
.location-conflict-flag {
  margin-left: 8px;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid #cf4a4a;
  border-radius: 999px;
  background: #fff4f4;
  color: #b43636;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}
.location-conflict-flag:hover { background: #ffeaea; }
@keyframes geo-spin { to { transform: rotate(360deg); } }
.location-geo-clear { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; color:#aaa; font-size:18px; padding:0; line-height:1; }
.location-geo-clear:hover { color: #555; }
.bucket-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.profile-pill { display: inline-flex; align-items: center; gap: 4px; background: #f2f1ed; border: 1px solid #e0ddd6; border-radius: 20px; padding: 7px 10px 7px 14px; transition: border-color .15s; }
.profile-pill.editing { background: #fff; border-color: #888; }
.pill-text { font-size: 15px; color: #111; cursor: pointer; line-height: 1.3; }
.pill-text:hover { text-decoration: underline; text-decoration-style: dotted; }
.pill-del { background: none; border: none; color: #bbb; font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0; transition: color .12s; }
.pill-del:hover { color: #c0392b; }
.pill-edit-input { font: inherit; font-size: 15px; color: #111; border: none; outline: none; background: transparent; min-width: 40px; }
.bucket-add-pill { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: none; border: 1.5px dashed #ccc; border-radius: 50%; color: #bbb; font-size: 17px; line-height: 1; cursor: pointer; padding: 0; transition: border-color .15s, color .15s; }
.bucket-add-pill:hover { border-color: #6b82c4; color: #6b82c4; }
.bucket-add-area { display: none; margin-top: 10px; align-items: center; gap: 6px; }
.bucket-add-area.open { display: flex; }
.bucket-add-input { flex: 1; font: inherit; font-size: 15px; padding: 7px 11px; border: 1px solid #ddd; border-radius: 6px; outline: none; color: #111; }
.bucket-add-input:focus { border-color: #999; }
.bucket-add-cancel { background: none; border: none; color: #bbb; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; transition: color .12s; }
.bucket-add-cancel:hover { color: #c0392b; }
.profile-update-btn { display: block; width: 100%; margin-top: 8px; padding: 11px 14px; background: none; border: 1.5px dashed #ccc; border-radius: 10px; color: #aaa; font-size: 13px; font-family: inherit; cursor: pointer; text-align: center; transition: border-color .18s, color .18s; }
.profile-update-btn:hover:not(:disabled) { border-color: #6b82c4; color: #6b82c4; }
@media (max-width:640px) {
  .profile-bucket { margin-bottom:16px; }
  .bucket-header { margin-bottom:6px; }
  .bucket-pills { gap:6px; }
}
.profile-update-btn:disabled { opacity: 0.5; cursor: default; }

.modal-new-btn {
  width: 100%; margin-bottom: 14px; padding: 14px;
  background: var(--venn-accent); border: 1px solid var(--venn-accent-dark); border-radius: 9px;
  color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.modal-new-btn:hover { background: var(--venn-accent-dark); }
.new-decision-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.decision-item {
  padding: 14px 16px; margin-bottom: 10px; border: 1px solid #e4e2dc;
  border-radius: 12px; background: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.06);
  display: flex; align-items: stretch; cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.decision-item:hover { border-color: #c9c6be; box-shadow: 0 5px 14px rgba(0,0,0,.1); transform: translateY(-1px); }
.decision-item.is-current { border-color: var(--venn-accent); }
.decision-item.is-current:hover { border-color: var(--venn-accent-dark); }
.decision-item:last-child { margin-bottom: 0; }
.decision-load-more {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:fit-content; margin:16px auto 4px; padding:10px 18px;
  border:1px solid #9a9790; border-radius:9px; background:#fff; color:#555;
  font:inherit; font-size:14px; font-weight:700; cursor:pointer;
}
.decision-load-more .action-icon {
  width:16px; height:16px; flex:0 0 16px; margin:0;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.decision-load-more:hover { background:#fff; border-color:#6f6c66; color:#222; }
.btn-collapse-topic,
.decision-actions .btn-more { display:none !important; }
.decision-item.is-collapsed { min-height: 52px; padding: 12px 16px; align-items:center; }
.decision-item.is-collapsed .decision-content { gap:0; }
.decision-item.is-collapsed .decision-title-row .btn-rename { display:none; }
.decision-item.is-collapsed .decision-title { width:100%; }
.decision-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.decision-title-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.decision-item.is-expanded .decision-title-row { padding: 6px 0; }
.decision-title-row .btn-rename { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.decision-title-row .btn-load { margin-left: auto; width: 36px; height: 36px; min-height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0; color: #fff; border-color: var(--venn-accent); background: var(--venn-accent); }
.decision-title-row .btn-load:hover { color: #fff; border-color: var(--venn-accent-dark); background: var(--venn-accent-dark); }
.decision-title-row .action-icon, .decision-actions .btn-delete .action-icon, .decision-actions .btn-archive .action-icon { margin: 0; }
.decision-title-row .action-label, .decision-actions .btn-delete .action-label, .decision-actions .btn-archive .action-label { display: none; }
@media (min-width: 641px) {
  .decision-title-row .btn-load { width: auto; min-width: 0; height: 36px; padding: 0 14px; gap: 7px; }
  .decision-title-row .btn-load .action-label { display: inline; font-size: 14px; font-weight: 700; }
}
.decision-actions .btn-rename { width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.decision-actions .btn-rename .action-icon, .decision-actions .btn-rename .action-label { margin:0; }
.decision-actions .btn-rename .action-label { display:none; }
.decision-title { font-size: 17px; font-weight: 700; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 641px) {
  #modal-decisions .decision-item.is-collapsed .decision-title { font-size: 15px; }
}
.decision-title-edit-field { position:relative; flex:1 1 auto; min-width:0; }
.decision-rename-input { width: 100%; box-sizing:border-box; border: 1px solid #9bb4e9; border-radius: 7px; padding: 9px 38px 9px 10px; font: inherit; font-size: 16px; font-weight: 700; color: #111; outline: none; }
.decision-title-clear { position:absolute; inset-inline-end:6px; inset-block-start:50%; width:28px; height:28px; padding:0; border:0; border-radius:50%; background:transparent; color:#aaa; display:inline-flex; align-items:center; justify-content:center; font:inherit; font-size:24px; line-height:1; cursor:pointer; transform:translateY(-50%); }
.decision-title-clear:hover { color:#333; background:#f1f0ec; }
.decision-title-row:has(.decision-title-edit-field) { gap:8px; }
.decision-title-row:has(.decision-title-edit-field) .btn-rename { min-height:44px; padding:0 16px; }
.decision-title-row:has(.decision-title-edit-field) .btn-rename .action-label { display:inline; }
.decision-title-row:has(.decision-title-edit-field) .btn-rename {
  width:auto !important;
  min-width:86px;
  height:44px;
  min-height:44px;
  padding:0 14px;
  gap:7px;
}
.decision-title-row:has(.decision-title-edit-field) .btn-rename:not(.save-ready) { display:none; }
.decision-title-row:has(.decision-title-edit-field) .btn-rename.save-ready {
  background:#2d8f4b;
  border-color:#2d8f4b;
  color:#fff;
}
.decision-title-row:has(.decision-title-edit-field) .btn-rename.save-ready:hover { background:#24783d; border-color:#24783d; }
.decision-instructions-label { display:block; margin-top:2px; color:#999; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.decision-second-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.decision-sub   { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; font-size: 13px; color: #999; }
.decision-sub .filled { color: var(--venn-accent); font-weight: 600; }
#modal-decisions .decision-item.is-expanded .decision-second-row {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
#modal-decisions .decision-item.is-expanded .decision-sub {
  width: 100%;
  padding: 0 0 10px;
  border-bottom: 1px solid #ebe8e2;
}
.decision-fields-pill { color: var(--venn-accent); font-weight: 700; }
.decision-progress { color: #555; font-weight: 600; }
.decision-activity-hint {
  color: #888; font-weight: 600; max-width: 42vw; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.decision-activity-hint[hidden] { display: none !important; }
.decision-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.decision-actions:not(.more-visible) > .btn-project.no-project,
.decision-actions:not(.more-visible) > .btn-history,
.decision-actions:not(.more-visible) > .btn-publish,
.decision-actions:not(.more-visible) > .btn-archive { display:none !important; }
.decision-actions:not(.more-visible) > .decision-action-icons {
  display: contents;
}
.decision-actions:not(.more-visible) > .decision-action-icons > .btn-description-toggle,
.decision-actions:not(.more-visible) > .decision-action-icons > .btn-links,
.decision-actions:not(.more-visible) > .decision-action-icons > .btn-topic-stats,
.decision-actions:not(.more-visible) > .decision-action-icons > .decision-favorite { display:none !important; }
.decision-actions .btn-more {
  width:36px; min-width:36px; height:36px; min-height:36px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:#666; border:1px solid #d8d6d0; border-radius:7px;
}
.decision-actions .btn-more:hover { background:#f2f1ed; color:#333; border-color:#aaa; }
.decision-actions .btn-more[hidden] { display:none; }
.decision-actions.more-visible {
  flex-direction:column; align-items:stretch; gap:6px; min-width:132px;
}
.decision-actions.more-visible > .btn-sm {
  width:auto; min-width:0; justify-content:flex-start; gap:8px; padding:4px 0;
  background:transparent; border:0; border-radius:0; color:#666;
}
.decision-actions.more-visible > .btn-sm:hover { background:transparent; border:0; color:#333; }
.decision-actions.more-visible > .btn-sm .action-label { display:inline !important; font-size:14px; font-weight:700; }
.decision-actions.more-visible > .btn-share::after { content:'Collaborate'; font-size:14px; font-weight:700; }
.decision-actions.more-visible > .btn-share.is-team::after { content:'Team'; font-size:14px; font-weight:700; }
.decision-actions.more-visible > .btn-share .share-count {
  position:static; order:2; min-width:0; width:auto; height:auto; padding:0;
  border-radius:0; background:transparent; color:inherit; font-size:14px; line-height:1.4;
  margin-left:0.35em;
}
.decision-actions.more-visible > .btn-share .share-count::before,
.decision-actions.more-visible > .btn-share .share-count::after { content:none; }
.decision-actions.more-visible > .btn-artefact::after { content:'Write-up' !important; position:static; width:auto; height:auto; border:0; border-radius:0; font-size:14px; font-weight:700; }
.decision-actions.more-visible > .btn-history::after { content:none; }
.decision-actions.more-visible > .btn-publish::after { content:'Publish'; font-size:14px; font-weight:700; }
.decision-actions.more-visible > .btn-archive::after { content:'Archive'; font-size:14px; font-weight:700; }
.decision-actions.more-visible > .btn-project.has-project .action-label::before { content:none; }
.decision-actions.more-visible > .btn-project {
  width:auto;
  min-width:0;
  height:auto;
  min-height:0;
  padding:4px 0;
  justify-content:flex-start;
  font-size:14px;
}
.decision-actions.more-visible > .btn-project .action-label { display:inline !important; }
.decision-actions.more-visible > .btn-history .action-label { display:inline !important; }
.decision-actions.more-visible > .btn-share .action-label,
.decision-actions.more-visible > .btn-artefact .action-label,
.decision-actions.more-visible > .btn-publish .action-label,
.decision-actions.more-visible > .btn-archive .action-label { display:none !important; }
.decision-actions.more-visible > .btn-more[hidden] { display:none; }

/* Utility strip: icon + label on desktop; icon-only on mobile */
.decision-actions.more-visible > .decision-action-icons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #ebe8e2;
  align-self: stretch !important;
}
.decision-actions.more-visible > .decision-action-icons > .btn-sm {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px 0 8px !important;
  margin: 0 !important;
  gap: 6px !important;
  background: #fff !important;
  border: 1px solid #d8d6d0 !important;
  border-radius: 7px !important;
  color: #666 !important;
  align-self: auto !important;
}
.decision-actions.more-visible > .decision-action-icons > .btn-sm:hover {
  background: #f2f1ed !important;
  border-color: #aaa !important;
  color: #333 !important;
}
.decision-actions.more-visible > .decision-action-icons > .btn-sm::before,
.decision-actions.more-visible > .decision-action-icons > .btn-sm::after {
  content: none !important;
  display: none !important;
}
.decision-actions.more-visible > .decision-action-icons > .btn-sm .action-label {
  display: inline !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}
.decision-actions.more-visible > .decision-action-icons > .btn-sm > .action-icon {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex: 0 0 16px !important;
  margin: 0 !important;
}
.decision-actions.more-visible > .decision-action-icons > .btn-sm > .action-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--venn-accent, #c86b1c);
  color: #fff;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 16px !important;
  text-align: center;
  pointer-events: none;
}
.decision-actions.more-visible > .decision-action-icons > .btn-description-toggle > .desc-count {
  min-width: 8px;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  top: -2px;
  right: -2px;
}
.decision-actions.more-visible > .decision-action-icons > .btn-description-toggle.active {
  border-color: var(--venn-accent, #c86b1c) !important;
  color: var(--venn-accent, #c86b1c) !important;
}
.decision-actions.more-visible > .decision-action-icons > .btn-sm .action-count[hidden] {
  display: none !important;
}
.decision-actions.more-visible > .decision-action-icons > .decision-favorite {
  width: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  gap: 0 !important;
  justify-content: center !important;
}
.decision-actions.more-visible > .decision-action-icons > .decision-favorite::after {
  content: none !important;
  display: none !important;
}
.decision-actions.more-visible > .decision-action-icons > .decision-favorite > .favorite-icon {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex: 0 0 16px !important;
  margin: 0 !important;
}
@media (max-width:640px) {
  #modal-decisions .decision-item.is-expanded {
    padding:10px 12px;
  }
  #modal-decisions .decision-item.is-expanded .decision-content {
    gap:6px;
  }
  #modal-decisions .decision-item.is-expanded .decision-title-row {
    padding:2px 0;
  }
  #modal-decisions .decision-second-row {
    gap:8px;
  }
  #modal-decisions .decision-actions.more-visible {
    gap:1px;
    min-width:0;
  }
  #modal-decisions .decision-actions.more-visible > .btn-sm,
  #modal-decisions .decision-actions.more-visible > .btn-project {
    padding:1px 0 !important;
    min-height:28px;
    line-height:1.25;
  }
  #modal-decisions .decision-actions.more-visible > .btn-sm > .action-icon,
  #modal-decisions .decision-actions.more-visible > .btn-sm > .favorite-icon {
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    flex:0 0 18px !important;
  }
  #modal-decisions .decision-actions.more-visible > .btn-sm:not(.btn-share) {
    grid-template-columns:22px max-content;
    column-gap:5px;
  }
  #modal-decisions .decision-actions.more-visible > .btn-share > .action-icon {
    margin:0 6px 0 0 !important;
  }
  #modal-decisions .decision-actions.more-visible > .decision-action-icons {
    gap: 8px !important;
    margin-top: 6px;
    padding-top: 8px;
  }
  #modal-decisions .decision-actions.more-visible > .decision-action-icons > .btn-sm {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: center !important;
  }
  #modal-decisions .decision-actions.more-visible > .decision-action-icons > .btn-sm .action-label {
    display: none !important;
  }
  #modal-decisions .decision-actions.more-visible > .decision-action-icons > .btn-sm > .action-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    flex: 0 0 18px !important;
  }
  #modal-decisions .topic-files-list {
    padding:4px 0 0;
    gap:6px;
  }
  #modal-decisions .btn-collapse-topic {
    padding:4px 0 0;
  }
}
#modal-decisions .decision-actions:not(.more-visible) .btn-links { display:none !important; }
.decision-actions .btn-delete, .decision-actions .btn-archive { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.decision-actions > .btn-rename,
.decision-actions > .decision-favorite,
.decision-actions > .btn-project.no-project,
.decision-actions > .btn-description-toggle,
.decision-actions > .btn-attach,
.decision-actions > .btn-links,
.decision-actions > .btn-delete, .decision-actions > .btn-archive { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.decision-actions .btn-project { display: inline-flex; align-items: center; justify-content:center; gap: 5px; }
.decision-actions .btn-project .action-icon { margin-right:0; }
.decision-actions .btn-project .action-label { display: inline; font-size: 14px; }
.decision-actions .btn-project.no-project .action-label { display:none; }
.decision-actions:not(.has-project-label) .btn-artefact .action-label { display:inline; }
.decision-actions > .btn-sm { box-sizing:border-box; }
.decision-actions > .btn-sm > .action-icon,
.decision-actions > .btn-sm > .favorite-icon { width:18px; height:18px; margin:0; flex:0 0 18px; }
.decision-actions > .btn-sm > .action-icon { stroke-width:2; }
.decision-actions:not(.more-visible) > .btn-share {
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.decision-actions > .btn-description-toggle { color:#666; }
.decision-actions > .btn-description-toggle.active { color:var(--venn-accent); border-color:var(--venn-accent); background:#f5effb; }
.btn-sm { padding: 9px 15px; font-size: 15px; font-weight: 700; border-radius: 7px; cursor: pointer; font-family: inherit; border: 1px solid #ddd; background: #fafafa; }
.decision-favorite { width:36px; height:36px; padding:0; border:1px solid #d8d6d0; border-radius:7px; background:#fff; color:#666; font-size:15px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.decision-favorite .favorite-icon { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.decision-favorite:hover { color: #111; border-color: #aaa; background: #f2f1ed; }
.decision-favorite.active { color: #666; border-color: #d8d6d0; background: #fff; }
.decision-favorite.active .favorite-icon { fill:currentColor; }
.btn-rename, .btn-project, .btn-attach, .btn-links, .btn-artefact, .btn-delete, .btn-archive { background: #fff; color: #666; border-color: #d8d6d0; }
.btn-rename:hover, .btn-project:hover, .btn-attach:hover, .btn-links:hover, .btn-artefact:hover, .btn-delete:hover, .btn-archive:hover { background: #f2f1ed; color: #333; border-color: #aaa; }
.btn-rename-cancel { background: #fff; color: #888; border-color: #ddd; }
.btn-rename-cancel:hover { background: #f5f5f5; color: #444; }
.decision-item.delete-confirming { border-color: #e7b0aa; box-shadow: 0 4px 14px rgba(192,57,43,.12); }
.decision-item.delete-confirming .decision-desc-wrap { display:none !important; }
.delete-confirm-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; width: 100%; }
.delete-confirm-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.delete-confirm-actions button { height:36px; min-height:36px; padding:0 14px; font-size:15px; line-height:1; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.delete-confirm-icon { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 16px; }
.delete-confirm-yes { background: #c0392b; color: #fff; border-color: #c0392b; }
.delete-confirm-yes:hover { background: #a93226; }
.delete-confirm-no { background: #fff; color: #555; border-color: #d8d6d0; }
.delete-confirm-no:hover { background: #f2f1ed; }
.action-icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; margin-right: 5px; }
.decision-item.is-deleted .decision-desc-readonly { cursor:default; color:#777; background:#faf9f7; }
.decision-item.is-expanded .decision-desc-wrap { display:none; }
.decision-item.is-expanded.description-visible .decision-desc-wrap { display:block; }
.decision-item.is-deleted .decision-title { cursor:default; }
.decision-item.is-deleted .decision-actions .btn-restore,
.decision-item.is-deleted .decision-actions .btn-project-select,
.decision-item.is-deleted .decision-actions .btn-delete-forever { height:36px; min-height:36px; min-width:0; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; gap:7px; font-size:15px; font-weight:700; line-height:1; }
.decision-item.is-deleted .decision-actions .btn-project-select { width:auto; color:#666; }
.decision-item.is-deleted .decision-actions .btn-delete-forever { color:#c0392b; border-color:#d8d6d0; }
.decision-item.is-deleted .decision-actions .btn-delete-forever:hover { color:#a93226; background:#fff4f2; border-color:#e2aaa2; }

/* ── Topic file attachments ─────────────────────────────────────────────── */
.topic-files-list { display:flex; flex-wrap:wrap; gap:8px; padding:8px 0 2px; min-height:0; }
.topic-files-banner {
  flex: 1 1 100%;
  margin: 0 0 4px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f3f0ea;
  color: #5c564c;
  font-size: 12px;
  line-height: 1.35;
}
.decision-item.no-media .topic-files-list { padding:0; }
.topic-upload-dropzone { display:none; width:100%; min-height:54px; box-sizing:border-box; margin-top:4px; padding:12px; border:1px dashed #c9c6be; border-radius:9px; background:#faf9f7; color:#999; font:inherit; font-size:13px; cursor:pointer; }
.topic-upload-dropzone:hover { border-color:var(--venn-accent); color:var(--venn-accent); background:#faf7ff; }
.decision-item.no-media .topic-files-list { display:flex; }
.decision-item.media-uploading .topic-files-list { display:flex; }
.decision-item.file-drop-target { border-color:var(--venn-accent); box-shadow:0 0 0 3px rgba(126,76,190,.14), 0 5px 14px rgba(0,0,0,.1); }
.decision-item.file-drop-target .topic-upload-dropzone { border-color:var(--venn-accent); color:var(--venn-accent); background:#faf7ff; }
body.file-drag-active { cursor:copy; }
@media (min-width:701px) {
  /* Height locked to media thumbs; width flexes to fill the rest of the row. */
  .decision-item:not(.is-deleted):not(.no-media) .topic-upload-dropzone {
    display:flex !important;
    box-sizing:border-box;
    flex:1 1 72px;
    width:auto;
    min-width:72px;
    max-width:none;
    height:52px;
    min-height:52px;
    max-height:52px;
    margin:0;
    padding:0;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:12px;
    font-weight:600;
    line-height:1.15;
    gap:6px;
    border-radius:6px;
    white-space:nowrap;
  }
}
.topic-file-card { position:relative; display:flex; flex-direction:column; align-items:center; width:72px; user-select:none; }
.topic-file-card.has-sync-issue .topic-file-thumb,
.topic-file-card.has-sync-issue .topic-file-icon {
  box-shadow: 0 0 0 2px #d64545;
}
.media-modal-remote-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 0;
  width: 100%;
  justify-content: stretch;
}
.media-modal-remote-btn {
  appearance: none;
  flex: 1 1 0;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  border: 1px solid #e0deda;
  background: #fff;
  color: #555;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}
.media-modal-remote-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.media-modal-remote-btn:hover { background: #f3f2ee; border-color: #c9c6be; color: #333; }
.media-modal-remote-btn:disabled { opacity: .55; cursor: wait; }
.media-modal-remote-view {
  color: #555;
  border-color: #e0deda;
  background: #fff;
}
.media-modal-remote-view:hover { background: #f3f2ee; border-color: #c9c6be; color: #333; }
.media-modal-remote-download {
  color: #fff;
  border-color: var(--venn-accent);
  background: var(--venn-accent);
  box-shadow: none;
}
.media-modal-remote-download:hover {
  background: var(--venn-accent-dark);
  border-color: var(--venn-accent-dark);
  color: #fff;
}
.decision-item .topic-file-name { display:none; }
.topic-file-del {
  display: none;
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e0deda;
  border: none;
  cursor: pointer;
  font-size: 14px;
  align-items: center;
  justify-content: center;
  color: #555;
  padding: 0;
  line-height: 1;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.topic-file-card:hover .topic-file-del,
.topic-file-card:focus-within .topic-file-del { display: flex; }
.topic-file-del:hover,
.topic-file-del:active { background: #d0cdc8; color: #111; }
@media (hover: none), (max-width: 700px) {
  .topic-file-del { display: flex; }
}
.topic-file-thumb { width:72px; height:52px; object-fit:cover; border-radius:6px; background:#eee; display:block; }
.topic-file-icon { width:72px; height:52px; border-radius:6px; background:#f0ede8; display:flex; align-items:center; justify-content:center; }
.topic-file-icon svg { width:22px; height:22px; stroke:#999; stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.topic-file-name { font-size:10px; color:#999; margin-top:4px; text-align:center; width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topic-file-uploading { width:72px; height:52px; border-radius:6px; background:#f0ede8; display:flex; align-items:center; justify-content:center; font-size:10px; color:#aaa; animation:pulse 1.4s ease-in-out infinite; }
.topic-file-uploading::before { content:""; width:18px; height:18px; box-sizing:border-box; border:2px solid #d8d6d0; border-top-color:var(--venn-accent); border-radius:50%; animation:topic-upload-spin .8s linear infinite; }
.topic-file-uploading { font-size:0; }
@keyframes topic-upload-spin { to { transform:rotate(360deg); } }
.topic-file-card { cursor:pointer; }

/* ── Media modal ─────────────────────────────────────────────────────────── */
#modal-media .modal-card { display:flex; flex-direction:column; }
#modal-media .modal-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 0;
  min-height: 0;
}
#media-modal-preview { display:flex; flex-direction:column; align-items:center; gap:10px; }
.media-modal-sync-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
  min-width: 0;
}
.media-modal-sync-row[hidden] { display: none !important; }
.media-modal-sync {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: none;
  color: #8a847a;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
}
.media-modal-sync-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: inherit;
}
.media-modal-sync-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.media-modal-sync-copy {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}
.media-modal-sync-label {
  color: inherit;
  font-weight: 600;
}
.media-modal-sync-meta {
  color: #a39c90;
  font-weight: 500;
  white-space: nowrap;
}
.media-modal-sync-meta:not([hidden])::before {
  content: '·';
  margin-right: 6px;
  color: #c2bbb0;
}
.media-modal-sync[data-state="synced"] { color: #5f7a66; }
.media-modal-sync[data-state="remote"] { color: #6a7588; }
.media-modal-sync[data-state="local"] { color: #8a847a; }
.media-modal-sync[data-state="error"] { color: #9a4a40; }
.media-modal-sync-row.has-action .media-modal-sync {
  padding: 4px 0;
}
.media-modal-sync-btn {
  flex-shrink: 0;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid #2f6fed;
  border-radius: 7px;
  background: #2f6fed;
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
}
.media-modal-sync-btn:hover:not(:disabled) {
  background: #2563d9;
  border-color: #2563d9;
}
.media-modal-sync-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}
.media-modal-sync-btn[hidden] { display: none !important; }
.media-modal-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 10px;
  background: #f0ede8;
  cursor: zoom-in;
}
#media-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 14, .94);
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}
#media-image-lightbox[hidden] { display: none !important; }
.media-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transform-origin: center center;
  will-change: transform;
  cursor: zoom-out;
  -webkit-user-drag: none;
  pointer-events: auto;
}
html.media-lightbox-open,
html.media-lightbox-open body {
  overflow: hidden !important;
  overscroll-behavior: none;
}
html.media-lightbox-open body {
  touch-action: none;
}
.media-modal-icon { width:80px; height:80px; border-radius:10px; background:#f0ede8; display:flex; align-items:center; justify-content:center; }
.media-modal-icon svg { width:36px; height:36px; stroke:#aaa; stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.media-modal-preview-text { font-size:12px; color:#888; background:#f8f6f3; border-radius:6px; padding:8px 12px; max-height:80px; overflow:hidden; white-space:pre-wrap; word-break:break-all; margin:0; width:100%; box-sizing:border-box; }
.media-modal-reader {
  width:100%; max-height:min(52vh, 440px); overflow:auto; text-align:left;
  background:#f8f6f3; border:1px solid #e8e4dc; border-radius:10px;
  padding:14px 16px; box-sizing:border-box; color:#333; font-size:14px; line-height:1.5;
}
.media-modal-reader-plain {
  margin:0; white-space:pre-wrap; word-break:break-word; font:inherit; color:inherit;
}
.media-modal-reader--md > *:first-child { margin-top:0; }
.media-modal-reader--md > *:last-child { margin-bottom:0; }
.media-modal-reader--md h1 { font-size:1.25em; margin:0 0 0.55em; line-height:1.25; }
.media-modal-reader--md h2 { font-size:1.1em; margin:1em 0 0.4em; line-height:1.3; }
.media-modal-reader--md h3 { font-size:1em; margin:0.9em 0 0.35em; line-height:1.3; }
.media-modal-reader--md p { margin:0 0 0.7em; }
.media-modal-reader--md ul, .media-modal-reader--md ol { margin:0 0 0.7em; padding-left:1.25em; }
.media-modal-reader--md li { margin:0.15em 0; }
.media-modal-reader--md blockquote {
  margin:0 0 0.7em; padding:0.2em 0 0.2em 0.85em; border-left:3px solid #cfc8bc; color:#666;
}
.media-modal-reader--md pre {
  margin:0 0 0.7em; padding:10px 12px; border-radius:8px; background:#efece6;
  overflow:auto; white-space:pre-wrap; word-break:break-word; font-size:12px;
}
.media-modal-reader--md code { font-size:0.92em; }
.media-modal-reader--md a { color:var(--venn-accent, #7b4bb7); }
.media-modal-fields { display:flex; flex-direction:column; gap:6px; }
.media-modal-thumbs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin-top: auto;
  position: sticky;
  bottom: 0;
  z-index: 2;
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 28%, #fff 100%);
  scrollbar-width: none;
}
.media-modal-thumbs::-webkit-scrollbar { display: none; }
.media-modal-thumbs[hidden] { display: none !important; }
.media-modal-thumb {
  appearance: none;
  flex: 0 0 auto;
  width: 72px;
  height: 52px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: #f0ede8;
  overflow: hidden;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.media-modal-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  border-radius: 4px;
}
.media-modal-thumb.is-file svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #999;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.media-modal-thumb.is-active {
  border-color: var(--venn-accent);
  box-shadow: 0 0 0 1px rgba(123,75,183,.18);
  cursor: default;
}
.media-modal-thumb:not(.is-active):hover {
  border-color: rgba(123,75,183,.35);
}
.media-field-label { font-size:12px; font-weight:600; color:#888; text-transform:uppercase; letter-spacing:.04em; margin-top:6px; }
.media-modal-input { width:100%; box-sizing:border-box; border:1px solid #e4e0db; border-radius:8px; padding:10px 12px; font-size:15px; color:#222; background:#faf9f7; outline:none; font-family:inherit; }
.media-modal-input:focus { border-color:var(--user-accent); background:#fff; }
.media-modal-textarea { width:100%; box-sizing:border-box; border:1px solid #e4e0db; border-radius:8px; padding:10px 12px; font-size:14px; color:#444; background:#faf9f7; resize:vertical; outline:none; font-family:inherit; line-height:1.5; }
.media-modal-textarea:focus { border-color:var(--user-accent); background:#fff; }
.media-modal-footer { display:flex; align-items:center; justify-content:space-between; padding:14px 28px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid #f0ede8; gap:12px; flex-shrink:0; }
.media-modal-save-btn, .media-modal-delete-btn, .media-modal-topic-btn { min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.media-modal-save-btn { flex:1; padding:11px 18px; border-radius:10px; border:1px solid var(--venn-accent); background:var(--venn-accent); color:#fff; }
.media-modal-save-btn:hover { filter:brightness(1.08); }
.media-modal-save-btn:disabled { border-color:#d8d6d0; background:#eeece8; color:#aaa; cursor:not-allowed; filter:none; }
.media-modal-delete-btn { padding:11px 18px; border-radius:10px; border:1px solid #e0deda; background:#fff; color:#c0392b; }
.media-modal-delete-btn:hover { background:#fdf0ee; border-color:#e8b4ae; }
.media-modal-topic-btn { padding:11px 18px; border-radius:10px; border:1px solid #e0deda; background:#fff; color:#555; }
.media-modal-topic-btn:hover { background:#f3f2ee; border-color:#c9c6be; }
.media-modal-topic-btn { order:-1; }

/* ── Project modal ───────────────────────────────────────────────────────── */
#modal-project .modal-card { display:flex; flex-direction:column; }
#modal-project .modal-body { display:flex; flex-direction:column; justify-content:flex-end; flex:1 1 auto; min-height:0; gap:0; padding:0; }
.project-modal-search-wrap { position:relative; display:block; flex:0 0 auto; margin:0; padding:8px 20px 10px; order:2; }
.project-modal-search-wrap[hidden] { display:none !important; }
.project-modal-search { display:block; width:100%; height:44px; box-sizing:border-box; padding:10px 42px 10px 12px; border:1px solid #d9d7d1; border-radius:8px; color:#222; background:#fff; outline:none; font-family:inherit; font-size:17px; }
.project-modal-search::placeholder { color:#aaa; }
.project-modal-search:focus { border-color:#8caee8; box-shadow:0 0 0 3px rgba(100,149,237,.14); }
.project-modal-search-clear { position:absolute; top:50%; right:36px; width:30px; height:30px; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:7px; background:transparent; color:#777; cursor:pointer; }
.project-modal-search-clear[hidden] { display:none !important; }
.project-modal-search-clear:hover { background:#eeeae5; color:#333; }
.project-modal-search-clear svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#project-modal-list { order:1; flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; padding:12px 20px; }
#project-modal-list::before { content:''; flex:1 1 auto; min-height:0; }
.proj-modal-item { display:flex; align-items:center; gap:10px; min-height:58px; padding:11px 14px; margin-bottom:8px; cursor:pointer; transition:background .12s; border:1px solid #e4e2dc; border-radius:10px; }
.proj-modal-item:last-child { margin-bottom:0; }
.proj-modal-item:hover { background:#f8f6f3; }
.proj-modal-item.curr { background:#f0ede8; }
.proj-modal-item-name { flex:1; font-size:16px; color:#222; font-weight:500; }
.proj-modal-item.curr .proj-modal-item-name { font-weight:700; }
.proj-system { cursor:default; opacity:0.8; }
.proj-system:hover { background:transparent; }
.proj-modal-system-badge { font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#aaa; background:#f0efeb; border:1px solid #e4e2dc; border-radius:4px; padding:2px 6px; flex-shrink:0; }
.proj-modal-none { color:#888; }
.proj-modal-none .proj-modal-item-name { color:#888; font-weight:400; font-style:italic; }
.proj-modal-none-icon { width:12px; height:12px; border-radius:50%; border:1.5px solid #ccc; flex-shrink:0; }
.proj-modal-actions { display:flex; gap:4px; flex-shrink:0; margin-left:auto; margin-right:-8px; }
.proj-modal-edit, .proj-modal-delete { width:34px; height:34px; border-radius:8px; border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#aaa; padding:0; transition:background .12s, color .12s; }
.proj-modal-edit svg, .proj-modal-delete svg { width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.proj-modal-edit:hover { background:#eef3ff; color:var(--user-accent); }
.proj-modal-delete:hover { background:#fdf0ee; color:#c0392b; }
.proj-modal-confirm-row { display:flex; align-items:center; gap:8px; margin-right:0; }
.proj-modal-cancel-del, .proj-modal-confirm-del { min-height:36px; padding:6px 12px; border-radius:8px; border:none; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap; }
.proj-modal-cancel-del { background:#f0ede8; color:#555; }
.proj-modal-confirm-del { background:#c0392b; color:#fff; font-weight:600; }
.proj-modal-empty { padding:24px 28px; color:#aaa; font-size:15px; font-style:italic; }
#new-proj-form { border-top:2px solid #f0ede8; margin-top:4px; padding:8px 20px 10px; gap:8px; order:3; }
#new-proj-form:not(.open) { display:none; }
#modal-project #new-proj-form-btns { gap:10px; }
#modal-project #new-proj-form { border-top:none; margin-top:0; padding:8px 20px 10px; gap:8px; }
#modal-project #new-proj-form-btns button,
#modal-project .project-modal-return-btn,
#modal-project .project-modal-new-btn { box-sizing:border-box; height:42px; min-height:42px; padding:8px 14px; border-radius:10px; font-size:15px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
#modal-project .project-modal-return-btn,
#modal-project #new-proj-save { background:var(--user-accent); color:#fff; border:1px solid var(--user-accent); }
#modal-project .project-modal-return-btn:hover,
#modal-project #new-proj-save:hover:not(:disabled) { filter:brightness(1.08); }
#modal-project .project-modal-new-btn,
#modal-project #new-proj-cancel { background:#fff; color:#555; border:1px solid #d8d6d0; }
#modal-project .project-modal-new-btn:hover,
#modal-project #new-proj-cancel:hover { background:#f3f2ee; }
#modal-project.project-form-open #project-modal-list,
#modal-project.project-form-open .project-modal-search-wrap { display:none !important; }
#modal-project.project-form-open .modal-body { justify-content:flex-end; overflow-y:auto; }
#modal-project.project-form-open #new-proj-form {
  display:flex; flex:0 0 auto; width:100%; margin-top:auto; min-height:0;
  flex-direction:column; justify-content:flex-end; gap:8px;
  border-top:none; padding:8px 20px 10px;
}
#modal-project.project-form-open #new-proj-form-row1,
#modal-project.project-form-open .project-context-textarea-wrap,
#modal-project.project-form-open .new-proj-desc { flex-shrink:0; }
.project-modal-footer { position:relative; bottom:auto; z-index:20; display:flex; align-items:center; justify-content:space-between; padding:8px 20px calc(8px + env(safe-area-inset-bottom)); border-top:1px solid #f0ede8; background:#fff; gap:10px; flex-shrink:0; }
.project-modal-footer #new-proj-form-btns { display:none; flex:1 1 auto; min-width:0; gap:12px; }
.project-modal-footer #new-proj-form-btns button { flex:1 1 0; min-width:0; }
#modal-project.project-form-open .project-modal-footer > .project-modal-return-btn,
#modal-project.project-form-open .project-modal-footer > .project-modal-new-btn { display:none; }
#modal-project.project-form-open .project-modal-footer #new-proj-form-btns { display:flex; }
.project-modal-footer > .project-modal-return-btn,
.project-modal-footer > .project-modal-new-btn { flex:1 1 0; min-width:0; }
.project-modal-return-btn { flex:1; padding:8px 0; border-radius:10px; border:1px solid var(--venn-accent); background:var(--venn-accent); color:#fff; font-size:15px; font-weight:600; cursor:pointer; font-family:inherit; text-align:center; }
.project-modal-return-btn:hover { background:var(--venn-accent-dark); border-color:var(--venn-accent-dark); }
.project-modal-new-btn { padding:8px 14px; border-radius:10px; border:1.5px solid #e0deda; background:#fff; color:#444; font-size:15px; font-weight:500; cursor:pointer; font-family:inherit; white-space:nowrap; }
.project-modal-new-btn:hover { background:#f8f6f3; }
.media-modal-btn-icon { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 18px; }
@keyframes pulse { 0%,100%{opacity:.5} 50%{opacity:1} }

@media (max-width: 640px) {
  .media-modal-img { width:auto; height:auto; max-height:260px; }
  .copy-state-heading { align-items:flex-start; flex-direction:column; }
  .copy-state-button { width:100%; }
  .copy-state-counts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats-section-heading { margin-top:10px; }
  .copy-state-summary { min-height:58px; gap:8px; }
  .copy-state-summary strong { font-size:16px; }
  .copy-state-summary small { font-size:11px; }
  .copy-state-summary .copy-state-button { width:auto; min-height:36px; padding:0 10px; }
  .copy-state-details { padding-left:48px; }
  .setting-summary { min-height:60px; padding:12px 16px 12px 48px; }
  .setting-summary-sync { padding-right:118px; }
  .setting-summary-sync .sync-summary-btn { min-height:32px; padding:0 9px; font-size:12px; }
  .setting-summary strong { font-size:15px; }
  .setting-summary small { font-size:13px; }
  .setting-current { right:16px; max-width:160px; min-height:32px; padding:0 9px; font-size:12px; gap:5px; }
  .setting-current--models { max-width:210px; }
  .setting-current svg { width:13px; height:13px; flex:0 0 13px; }
  .setting-chevron { left:14px; right:auto; }
  .setting-details { padding:0 8px 8px; }
  .setting-details .model-selector-row { flex-wrap:wrap; gap:8px; }
  .setting-details .model-cost-rate { margin-left:auto; }
  .setting-details .model-options { width:100%; order:3; margin-left:0; }
  .setting-details .model-options .model-opt,
  .setting-details .model-options .llm-opt { flex:0 0 calc(50% - 4px); }
  .setting-details .model-options.voice-persona-options .model-opt {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    min-height: 56px;
    padding: 12px 14px;
  }
  .setting-details .model-options.voice-persona-options .voice-persona-copy strong { font-size: 14px; }
  .setting-details .model-options.voice-persona-options .voice-persona-copy small { font-size: 12px; }
  .filter-pill.proj-pill { flex-basis:160px; width:160px; max-width:160px; }
  .decision-item { padding: 10px 12px; margin-bottom: 8px; }
  .decision-item.is-collapsed { min-height:44px; padding:9px 12px; }
  .decision-content { gap: 5px; }
  .decision-title-row { gap: 5px; }
  .decision-title-row .btn-rename { width: 28px; height: 28px; }
  .decision-title-row .btn-load { width: 32px; height: 32px; min-height: 32px; padding: 0; }
  .decision-title-row .btn-load .action-label { display: none; }
  .decision-title-row .action-icon { width: 14px; height: 14px; }
  .decision-title { font-size: 15px; }
  .decision-title-row:has(.decision-title-edit-field) .btn-rename { min-height:42px; padding:0 11px; }
  .decision-rename-input { font-size:16px; min-height:42px; }
  .delete-confirm-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .delete-confirm-actions { width: 100%; margin-left: 0; }
  .delete-confirm-actions button { flex: 1; }
  .decision-second-row { align-items: flex-start; flex-direction: row; gap: 6px; }
  .decision-sub { display: none; }
  .decision-sub > span { margin-right: 3px; }
  .decision-sub > span:nth-child(1), .decision-sub > span:nth-child(2),
  .decision-sub > span:nth-child(3), .decision-sub > span:nth-child(4) { display: none; }
  .decision-sub .decision-progress { display: block; font-size: 13px; }
  .decision-actions { align-self: flex-start; gap: 8px; }
  .decision-actions .btn-sm { width: 32px; height: 32px; min-width: 32px; padding: 0; }
  .decision-actions .action-icon { width: 15px; height: 15px; }
  .decision-actions .btn-sm { font-size: 0; display: inline-flex; align-items: center; justify-content: center; }
  .decision-actions .btn-project .action-label { display: none; }
  .decision-actions .decision-favorite { font-size: 20px; }
  .decision-item.is-deleted .decision-actions .btn-restore,
  .decision-item.is-deleted .decision-actions .btn-project-select,
  .decision-item.is-deleted .decision-actions .btn-delete-forever { width:32px; min-width:32px; height:32px; min-height:32px; padding:0; gap:0; font-size:0; }
  .decision-item.is-deleted .decision-actions .action-label { display:none; }
  .decision-item.is-deleted .decision-actions .btn-delete-forever { width:auto; min-width:0; padding:0 10px; gap:7px; font-size:15px; }
  .decision-item.is-deleted .decision-actions .btn-delete-forever .action-label { display:inline; }
}

.modal-empty, .circle-data-empty { font-size: 16px; color: #bbb; text-align: center; padding: 28px 0; }
.decision-no-results { display:flex; flex-direction:column; align-items:center; gap:10px; }
.decision-clear-all { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; padding:0 13px; border:1px solid #d8d6d0; border-radius:8px; background:#f3f2ef; color:#666; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.decision-clear-all:hover { border-color:#bdbab2; background:#eae8e3; color:#333; }
.decision-clear-all svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.decision-controls { display:flex; align-items:center; gap:10px; margin-bottom:10px; min-width:0; flex-wrap:wrap; }
.decision-search-wrap { position:relative; flex:1 1 180px; width:auto; min-width:120px; }
.decision-search { width:100%; height:44px; box-sizing:border-box; margin:0; padding:10px 42px 10px 12px; border: 1px solid #d9d7d1; border-radius: 8px; background: #fff; color: #111; font: inherit; font-size: 16px; outline: none; }
.decision-search:focus { border-color: #8caee8; box-shadow: 0 0 0 3px rgba(100,149,237,.14); }
.decision-search::placeholder { color: #aaa; }
.decision-search::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; }
.decision-search-clear { position:absolute; top:50%; right:8px; width:30px; height:30px; padding:0; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:7px; background:transparent; color:#777; cursor:pointer; }
.decision-search-clear[hidden] { display:none !important; }
.decision-search-clear:hover { background:#f2f1ed; color:#333; }
.decision-search-clear svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
#decision-filter-row { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex:0 0 auto; flex-wrap:nowrap; overflow:visible; margin:0; min-height:44px; scrollbar-width:none; }
#decision-filter-row::-webkit-scrollbar { display:none; }
.filter-pill { height:44px; box-sizing:border-box; padding:0 11px; border-radius:9px; font-size:12px; font-weight:500; cursor:pointer; border:1.5px solid #e4e2dc; background:#fff; color:#666; transition:all .15s; white-space:nowrap; line-height:1.2; }
.filter-pill:hover { border-color:#bbb; color:#333; }
.filter-pill.active { background:#1a1a1a; color:#fff; border-color:#1a1a1a; }
.filter-pill.proj-pill { display:inline-flex; align-items:center; gap:5px; flex:0 0 132px; width:132px; box-sizing:border-box; padding-right:6px; max-width:132px; min-width:0; font-size:14px; }
#decision-filter-row:not(.project-delete-confirming) .filter-pill.proj-pill {
  background:var(--project-color) !important; border-color:var(--project-color) !important; color:#fff !important;
}
#decision-filter-row:not(.project-delete-confirming) .filter-pill.proj-pill .proj-pill-del { color:#fff; }
#decision-filter-row:not(.project-delete-confirming) .filter-pill.proj-pill .proj-pill-del:hover { color:#fff; opacity:.72; }
.proj-pill-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.filter-pill.proj-pill.confirming { gap:8px; padding-right:8px; }
.filter-pill.proj-pill.confirming { white-space:nowrap; }
.project-delete-confirming > *:not(.confirming) { display:none !important; }
#decision-filter-row.project-delete-confirming { width:100%; align-self:stretch; display:flex; flex-wrap:wrap; overflow:visible; }
#decision-filter-row.project-delete-confirming .proj-pill.confirming {
  width:100% !important; max-width:none !important; height:30px; min-height:30px; flex:1 1 100% !important; justify-content:flex-start;
  gap:8px; padding:0; border-radius:0; background:transparent !important;
  border-color:transparent !important; color:#555 !important;
}
#decision-filter-row.project-delete-confirming .proj-pill-name { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#decision-filter-row.project-delete-confirming .proj-pill-name {
  height:30px; display:flex; align-items:center; padding:0 11px; border-radius:9px;
  background:var(--project-color); color:#fff;
}
#decision-filter-row.project-delete-confirming .proj-delete-actions { flex:0 0 auto; margin-left:auto; gap:8px; height:100%; }
.proj-delete-actions { display:inline-flex; align-items:center; gap:5px; margin-left:3px; }
.proj-delete-actions button { height:100%; min-height:0; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:0; border-radius:9px; padding:0 12px; font:inherit; font-size:12px; font-weight:700; line-height:1.35; cursor:pointer; }
.proj-delete-actions .project-form-icon { width:14px; height:14px; margin:0; }
.proj-delete-cancel { background:#f2f1ed; color:#555; }
.proj-delete-confirm { background:#c0392b; color:#fff; }
.proj-delete-actions button:hover { filter:brightness(.95); }
.proj-dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.proj-pill-del { background:none; border:none; cursor:pointer; font-size:11px; color:#ccc; padding:0 2px; line-height:1; margin-left:auto; flex:0 0 auto; }
.proj-pill-del:hover { color:#e05c5c; }
#new-proj-btn { padding:4px 10px; border-radius:9px; font-size:12px; color:#666; border:1.5px dashed #aaa; background:none; cursor:pointer; white-space:nowrap; transition:all .15s; line-height:1.6; }
#new-proj-btn:hover { color:#333; border-color:#777; }
.context-textarea-wrap { position:relative; width:100%; }
.context-textarea-expand { display:none; position:absolute; z-index:2; right:10px; bottom:10px; width:34px; height:34px; padding:0; border:1px solid #d8d6d0; border-radius:8px; background:rgba(255,255,255,.96); color:#666; font:inherit; font-size:18px; line-height:1; cursor:pointer; align-items:center; justify-content:center; }
.context-textarea-expand:not([hidden]) { display:inline-flex; }
.context-expand-icon { width:17px; height:17px; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.context-textarea-expand:hover { color:var(--venn-accent); border-color:var(--venn-accent); background:#faf7ff; }
.context-textarea-counter { display:block; margin:3px 4px 0; color:#999; font-size:11px; line-height:1.2; text-align:right; }
.context-textarea-counter[hidden] { display:none; }
.context-textarea-wrap:has(.context-textarea-counter:not([hidden])) .context-textarea-expand { bottom:24px; }
.decision-desc { display:block; width:100%; height:48px; margin-top:8px; padding:10px 14px; box-sizing:border-box; border:1px solid #e5e2da; border-radius:8px; background:#faf9f7; font:inherit; font-size:16px; color:#444; line-height:1.35; resize:none; overflow:hidden; min-height:48px; transition:border-color .15s, height .12s ease, max-height .15s ease; }
.decision-desc.context-textarea-collapsed { max-height:calc(3 * 1.35em + 20px); overflow:hidden; }
.decision-desc:focus { outline:none; border-color:#aac0e8; background:#fff; }
.decision-desc::placeholder { color:#85827c; opacity:1; }
.new-proj-desc { display:none; width:100%; min-height:72px; padding:10px 12px; box-sizing:border-box; border:1px solid #ddd; border-radius:8px; background:#faf9f7; font:inherit; font-size:14px; color:#333; line-height:1.5; resize:none; max-height:none; overflow:hidden; transition:max-height .15s ease,border-color .15s ease; }
.new-proj-desc.context-textarea-collapsed { max-height:calc(3 * 1.5em + 20px); overflow:hidden; }
#new-proj-form.has-name .new-proj-desc { display:block; }
.new-proj-desc:focus { outline:none; border-color:#aac0e8; }
.new-proj-desc::placeholder { color:#85827c; opacity:1; }
#new-proj-form { display:none; flex-direction:column; gap:8px; padding:8px 0 10px; }
#new-proj-form.open { display:flex; }
#new-proj-form-row1 { display:flex; flex-direction:column; gap:12px; align-items:stretch; }
.project-name-control { position:relative; display:flex; align-items:center; flex:1; min-width:0; }
#new-proj-color-preview { width:18px; height:18px; border-radius:50%; position:absolute; left:14px; z-index:2; cursor:pointer; }
#new-proj-name { width:100%; border:1px solid #d4d1ca; border-radius:9px; padding:10px 42px 10px 42px; font-size:17px; flex:1; outline:none; min-width:0; font:inherit; min-height:44px; }
#new-proj-name:focus { border-color:#9bb4e9; }
#new-proj-name::placeholder { color:#85827c; opacity:1; }
.project-name-clear { position:absolute; right:10px; width:28px; height:28px; padding:0; display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; color:#aaa; cursor:pointer; border-radius:50%; }
.project-name-clear { display:none; }
#new-proj-form.has-name .project-name-clear { display:inline-flex; }
.project-name-clear:hover { color:#333; background:#f1f0ec; }
.project-name-clear svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
#new-proj-colors { display:none; order:1; gap:16px; padding:4px 0 8px; box-sizing:border-box; justify-content:flex-start; align-items:center; flex-wrap:wrap; flex-shrink:0; }
#new-proj-form.colors-expanded #new-proj-colors { display:flex; }
.project-name-control { order:2; }
.proj-color-sw.only { display:block; }
.proj-color-sw { flex:0 0 18px; width:18px; height:18px; aspect-ratio:1 / 1; padding:0; border-radius:50%; cursor:pointer; border:2px solid transparent; flex-shrink:0; transition:box-shadow .1s, transform .1s; }
.proj-color-sw:hover { transform:scale(1.08); }
.proj-color-sw.sel { box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(60,60,60,.28); }
#new-proj-form-btns { display:flex; justify-content:flex-end; gap:8px; }
#new-proj-form-btns button { flex:0 0 calc(50% - 4px); min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 14px; border-radius:8px; font-size:16px; font-weight:700; cursor:pointer; font:inherit; }
#new-proj-form-btns #new-proj-attach { flex:0 0 46px; padding:0; background:#f7f6f2; color:#777; border:1px solid #d8d6d0; }
#new-proj-form-btns #new-proj-attach:hover { background:#efeee9; color:#333; }
#new-proj-form-btns #new-proj-cancel, #new-proj-form-btns #new-proj-save { flex:1 1 0; }
#new-proj-save { order:2; background:#1a1a1a; color:#fff; border:1px solid #1a1a1a; }
#new-proj-save:disabled { opacity:.45; cursor:not-allowed; }
#new-proj-cancel { order:1; background:#fff; color:#666; border:1px solid #d8d6d0; }
#new-proj-form-btns button:hover { filter:brightness(.96); }
.project-form-icon { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.dec-proj-badge { display:none; align-items:center; gap:4px; font-size:11px; font-weight:650; padding:0; border-radius:0; cursor:pointer; letter-spacing:.01em; vertical-align:middle; margin-right:6px; background:transparent !important; }
.proj-picker { background:#fff; border:1px solid #e4e2dc; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.14); min-width:170px; overflow:hidden; z-index:9999; position:fixed; }
.proj-picker-search { display:block; width:100%; border:0; border-bottom:1px solid #eee; padding:12px 14px; font:inherit; font-size:15px; outline:none; color:#333; }
.proj-picker-list { max-height:280px; overflow:auto; }
.proj-picker-item { display:flex; align-items:center; gap:8px; padding:11px 14px; cursor:pointer; font-size:15px; color:#333; }
.proj-picker-item:hover { background:#f7f6f2; }
.proj-picker-item.curr { font-weight:600; }
.proj-picker-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.proj-picker-actions { display:inline-flex; gap:4px; margin-left:auto; }
.proj-picker-actions button { width:34px; height:34px; padding:0; border:0; border-radius:8px; background:transparent; color:#666; cursor:pointer; font:inherit; display:inline-flex; align-items:center; justify-content:center; }
.proj-picker-actions button svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.proj-picker-actions button:hover { background:#eceae5; color:#111; }
.project-picker-add { width:calc(100% - 20px); margin:10px; min-height:42px; border:1.5px dashed #aaa; border-radius:9px; background:#fff; color:#555; font:inherit; font-weight:700; cursor:pointer; }
.project-picker-add:hover { background:#f7f6f2; border-color:#777; }
.proj-picker-item.confirming { background:#fff6f5; }
.proj-picker-item.confirming .proj-picker-name { color:#555; }
.proj-picker-item.confirming .proj-delete-actions { margin-left:auto; display:flex; gap:6px; }
.proj-picker-item.confirming .proj-delete-actions button { min-height:30px; padding:4px 10px; border:0; border-radius:7px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.picker-delete-cancel { background:#eee; color:#555; }
.picker-delete-confirm { background:#c0392b; color:#fff; }
.filter-toggle { width:44px; height:44px; padding:8px; display:inline-flex; align-items:center; justify-content:center; }
.filter-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.filter-toggle.active { color:#fff; background:#1a1a1a; border-color:#1a1a1a; }
.filter-clear { width:44px; min-width:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }
.filter-clear svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.proj-pill-count { opacity:.78; font-size:11px; margin-left:auto; }
.filter-toggle { position:relative; }
.filter-count { position:absolute; top:3px; right:4px; min-width:14px; height:14px; padding:0 3px; box-sizing:border-box; border-radius:8px; background:#fff; color:#1a1a1a; font-size:10px; line-height:14px; font-weight:800; }
@media (max-width: 640px) {
  .decision-controls { gap:8px; }
  .decision-search-wrap { flex-basis:140px; min-width:100px; }
  .filter-pill.proj-pill { flex-basis:116px; width:116px; max-width:116px; font-size:13px; }
  #decision-filter-row { gap:6px; }
  /* Bottom-aligned topics: Load More sits above cards; filters expand upward */
  #modal-decisions #decisions-list::before { order:0; }
  #modal-decisions #decisions-list .decision-load-more { order:1; margin:4px auto 16px; }
  #modal-decisions #decisions-list .decision-item,
  #modal-decisions #decisions-list .modal-empty { order:2; }
  #modal-decisions .project-filter-menu { order:-1; margin-top:0; margin-bottom:8px; }
}
.project-filter-menu { position:static; flex:1 0 100%; width:100%; box-sizing:border-box; z-index:2; background:#fff; border:1px solid #ddd9d1; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.14); padding:4px; margin-top:2px; order:3; }
#decision-filter-row:has(.project-filter-menu) { flex-wrap:wrap; }
.project-filter-option { display:flex; align-items:center; gap:8px; width:100%; padding:9px 11px; border:0; border-radius:7px; background:#fff; color:#555; font:inherit; text-align:left; cursor:pointer; }
.project-filter-option > .filter-option-icon { width:22px; flex:0 0 22px; display:inline-flex; align-items:center; justify-content:center; }
.project-filter-option > .proj-dot { width:8px; height:8px; margin-left:7px; margin-right:7px; flex:0 0 8px; }
.project-filter-option:hover, .project-filter-option.active { background:#f2f1ed; color:#111; }
.decision-collapsed-project-dot { width:11px; height:11px; border-radius:50%; flex:0 0 auto; margin-right:8px; }

/* Compact project picker: use the same control rhythm as the topic search. */
.proj-picker {
  box-sizing:border-box;
  padding:8px;
  min-width:0;
  max-height:min(520px, calc(100dvh - 24px));
  overflow:auto;
}
.proj-picker-search {
  box-sizing:border-box;
  height:40px;
  margin:0 0 6px;
  padding:0 10px;
  border:1px solid #d9d7d1;
  border-radius:8px;
  font-size:14px;
}
.proj-picker-list { max-height:220px; overflow:auto; }
.proj-picker-item {
  min-height:34px;
  box-sizing:border-box;
  padding:3px 8px;
  border-radius:0;
  font-size:13px;
}
.proj-picker-item + .proj-picker-item { border-top:1px solid #e8e6e1; }
.proj-picker-item > .proj-dot { width:10px; height:10px; }
.proj-picker-item > span[style*="width:8px"] { width:10px !important; height:10px; display:inline-flex !important; align-items:center; justify-content:center; flex:0 0 10px; color:#777; font-size:17px; line-height:10px; }
.proj-picker-item > span[style*="width:8px"]::before { content:'×'; }
.proj-picker-item:hover { background:#f2f1ed; }
.proj-picker-actions { gap:3px; }
.proj-picker-actions button { width:28px; height:28px; }
.project-picker-add {
  width:100%;
  min-height:40px;
  box-sizing:border-box;
  margin:6px 0 0;
  padding:0 10px;
  border-radius:8px;
  font-size:14px;
}
.proj-picker #new-proj-form {
  gap:6px;
  padding:6px 0 0;
  border-top:1px solid #eee;
  margin-top:6px;
}
.proj-picker #new-proj-form-row1 { gap:6px; }
.proj-picker #new-proj-colors { gap:16px; padding:4px 0 8px; justify-content:flex-start; }
.proj-picker .proj-color-sw { flex-basis:18px; width:18px; height:18px; }
.proj-picker #new-proj-colors { flex-wrap:wrap; }
.proj-picker #new-proj-name { min-height:40px; padding:8px 36px 8px 38px; font-size:14px; border-radius:8px; }
.proj-picker #new-proj-color-preview { left:12px; width:16px; height:16px; }
.proj-picker .project-name-clear { right:6px; width:26px; height:26px; }
.proj-picker #new-proj-desc { min-height:56px; padding:8px 10px; font-size:14px; border-radius:8px; }
.proj-picker #new-proj-form-btns { gap:6px; }
.proj-picker #new-proj-form-btns button { min-height:40px; padding:7px 10px; border-radius:8px; font-size:14px; }
.proj-picker #new-proj-form-btns #new-proj-attach { flex:0 0 40px; padding:0; }
.proj-picker .project-form-icon { width:16px; height:16px; }
.proj-picker-inline {
  position:static;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  margin-top:8px;
  border-radius:10px;
  box-shadow:none;
  overflow:visible;
}
.proj-picker.is-creating > .proj-picker-search,
.proj-picker.is-creating > .proj-picker-list,
.proj-picker.is-creating > .project-picker-add,
.proj-picker.is-editing > .proj-picker-search,
.proj-picker.is-editing > .proj-picker-list,
.proj-picker.is-editing > .project-picker-add { display:none; }
.decision-item.project-picker-open {
  overflow:visible;
  flex-direction:column;
}
.decision-item.project-picker-open > .proj-picker-inline {
  flex:0 0 auto;
  align-self:stretch;
}
.btn-project.has-project {
  color:#666;
  background:#fff;
  border-color:#d8d6d0;
  border-width:1px;
}
.btn-project.has-project .action-icon { color:var(--project-color); stroke:var(--project-color); fill:none; }
.btn-project.has-project:hover { background:#f2f1ed; border-color:#aaa; filter:none; }
.decision-actions .btn-project.no-project { color:#666; background:#fff; border-color:#d8d6d0; }
.btn-artefact { background: #fff; color: #666; border-color: #d8d6d0; position: relative; }
.btn-artefact:hover { background: #f2f1ed; color: #111; border-color: #aaa; }
.btn-artefact[data-artefact]::after { content:''; position:absolute; top:4px; right:4px; width:8px; height:8px; border-radius:50%; border:1.5px solid #fff; pointer-events:none; }
.btn-artefact[data-artefact="fresh"]::after { background:#2d8f4b; }
.btn-artefact[data-artefact="stale"]::after { background:#e67e22; }
#modal-decisions .btn-artefact[data-artefact="fresh"]::after { display:none; }
#artefact-stale-bar { display:none; background:#fff8ec; border-bottom:1px solid #f0dda0; padding:9px 22px; color:#7a5200; font-size:13px; flex-shrink:0; gap:8px; }
#artefact-stale-bar.visible { display:flex; align-items:center; }
#artefact-stale-bar .artefact-stale-message { flex:1 1 auto; min-width:0; }
.artefact-stale-update { display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:0 0 auto; height:34px; min-height:34px; padding:0 12px; border:1px solid #e0a51a; border-radius:8px; background:#fff4e0; color:#7a5200; font:inherit; font-size:13px; font-weight:700; line-height:1; cursor:pointer; }
.artefact-stale-update:hover { background:#ffe9bd; border-color:#cc8f00; }
.artefact-stale-update .artefact-control-icon { width:16px; height:16px; flex:0 0 16px; }
@media (max-width:640px) {
  #modal-artefact #artefact-stale-bar { order:2; border-bottom:0; border-top:1px solid #f0dda0; }
  #modal-artefact .modal-body { order:1; }
  #modal-artefact .artefact-modal-footer { order:3; }
}
#artefact-update-btn { font-size:14px; padding:10px 15px; display:inline-flex; align-items:center; gap:6px; }
#artefact-update-btn.stale { background:#fff4e0; color:#7a5200; border-color:#f0c84a; font-weight:700; }
#modal-artefact .modal-body { min-height:0; }
.artefact-modal-footer { position:sticky; bottom:0; z-index:20; display:flex; align-items:center; gap:8px; padding:10px 28px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid #e5e2db; background:rgba(248,248,247,.98); box-shadow:0 -6px 16px rgba(0,0,0,.06); flex-shrink:0; }
.artefact-options-panel { display:none; position:absolute; left:28px; right:28px; bottom:calc(100% + 8px); z-index:30; min-width:0; padding:14px 16px; flex-direction:column; gap:12px; border:1px solid #dedbd4; border-radius:12px; background:#fff; box-shadow:0 12px 32px rgba(0,0,0,.16); }
.artefact-options-panel.open { display:flex; }
.artefact-options-title { color:#333; font-size:14px; font-weight:700; margin-bottom:2px; }
.artefact-options-panel .artefact-include-label[hidden] { display:none; }
#artefact-options-panel .artefact-include-label { gap:10px; font-size:16px; }
#artefact-options-panel .artefact-include-label input { width:18px; height:18px; }
#modal-artefact #artefact-options-btn[hidden] { display:none !important; }
#artefact-instruction-row { display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0; padding:0; border:0; background:transparent; flex-shrink:1; position:static; flex-wrap:wrap; }
#artefact-header-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
#artefact-header-actions .copy-btn, #artefact-instr-templates-btn, #artefact-new-btn { min-height:42px; }
#artefact-new-btn { background:#fff; color:#555; border:1px solid #d4d1ca; border-radius:9px; padding:10px 16px; font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
#artefact-new-btn:hover { background:#f2f1ed; }
.artefact-control-icon { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 18px; }
.artefact-topic-btn { box-sizing:border-box; height:44px; min-height:44px; padding:0 14px; border:1px solid #d4d2cd; border-radius:10px; background:#fff; color:#5d5e5e; display:inline-flex; align-items:center; justify-content:center; gap:7px; font:inherit; font-size:15px; font-weight:700; line-height:1; cursor:pointer; flex:0 0 auto; }
.artefact-topic-btn:hover { background:#f3f2ee; color:#4f5050; }
.artefact-topic-btn { order:-1; }
#modal-artefact .artefact-modal-footer button { box-sizing:border-box; height:46px; min-height:46px; border-radius:10px; border:1px solid #e0deda; background:#fff; color:#555; font-family:inherit; font-size:15px; font-weight:700; }
#modal-artefact .artefact-modal-footer button:hover { background:#f3f2ee; color:#444; border-color:#c9c6be; }
#modal-artefact #artefact-update-btn,
#modal-artefact #artefact-new-btn,
#modal-artefact #artefact-topic-btn { width:46px; min-width:46px; padding:0; gap:0; }
#modal-artefact #artefact-update-btn .artefact-control-label,
#modal-artefact #artefact-new-btn .artefact-control-label,
#modal-artefact #artefact-topic-btn .artefact-control-label,
#modal-artefact #artefact-pin-btn .artefact-control-label,
#modal-artefact #artefact-history-btn .artefact-control-label { display:none; }
#artefact-instr-templates-btn { order:0; }
#modal-artefact #artefact-pin-btn { order:1; }
#modal-artefact #artefact-history-btn { order:2; }
#modal-artefact #artefact-copy-output-btn { height:46px !important; min-height:46px !important; background:#fff; border:1px solid #e0deda !important; border-radius:10px; color:#555; }
#modal-artefact #artefact-copy-output-btn { order:3; }
#modal-artefact #artefact-pin-btn,
#modal-artefact #artefact-history-btn { width:46px; min-width:46px; padding:0; gap:0; }
#modal-artefact #artefact-copy-output-btn { margin-left:8px; }

#modal-publish .publish-modal-card { display:flex; flex-direction:column; min-height:0; }
#modal-publish .publish-modal-body { min-height:0; overflow:auto; }
.publish-modal-intro { margin:0 0 18px; color:#777; font-size:15px; }
.publish-options { display:flex; flex-direction:column; gap:9px; }
.publish-option.is-secondary { display:none; }
#modal-publish.is-publish-expanded .publish-option.is-secondary { display:flex; }
.publish-view-more { width:100%; margin-top:10px; padding:10px 12px; border:0; background:transparent; color:#777; font:inherit; font-size:14px; font-weight:600; cursor:pointer; text-align:center; }
.publish-view-more:hover { color:var(--venn-accent,#c86b1c); }
@media (max-width:640px) {
  #modal-publish .publish-modal-body {
    display:flex; flex-direction:column;
  }
  #modal-publish .publish-modal-body::before {
    content:''; flex:1 1 auto; min-height:0;
  }
  #modal-publish .publish-modal-intro,
  #modal-publish .publish-options { flex:0 0 auto; }
}
.publish-option { width:100%; min-height:48px; display:flex; align-items:center; gap:12px; padding:0 14px; border:1px solid #d8d6d0; border-radius:10px; background:#fff; color:#555; font:inherit; font-size:16px; font-weight:700; text-align:left; cursor:pointer; }
.publish-option:hover { background:#faf7ff; border-color:var(--venn-accent); color:var(--venn-accent); }
.publish-option.is-locked { opacity:0.55; }
.publish-option.is-locked:hover { background:#fff; border-color:#d8d6d0; color:#555; }
.artefact-template-new-trigger.is-locked { opacity:0.7; }
.publish-option i, .publish-parent-btn i { width:18px; height:18px; flex:0 0 18px; stroke-width:2; }
.publish-option-state { margin-left:auto; color:#aaa; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.publish-modal-footer { position:sticky; bottom:0; z-index:2; display:flex; gap:10px; padding:12px 28px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid #e5e2db; background:rgba(248,248,247,.98); box-shadow:0 -6px 16px rgba(0,0,0,.06); }
.artefact-modal-close-footer, .publish-modal-close-footer { flex:0 0 46px; width:46px; height:46px; min-height:46px; padding:0; display:inline-flex; align-items:center; justify-content:center; border:1px solid #d4d2cd; border-radius:10px; background:#fff; color:#666; cursor:pointer; }
.artefact-modal-close-footer { order:-2; }
.artefact-modal-close-footer svg, .publish-modal-close-footer svg, .publish-modal-close-footer i { width:20px; height:20px; stroke:currentColor; stroke-width:2; fill:none; }
.artefact-modal-close-footer:hover, .publish-modal-close-footer:hover { background:#f3f2ee; border-color:#aaa; color:#333; }
.publish-parent-btn { flex:1 1 0; height:46px; min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid #d4d2cd; border-radius:10px; background:#fff; color:#555; font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.publish-parent-btn:hover { background:#f3f2ee; border-color:var(--venn-accent); color:var(--venn-accent); }
#artefact-new-instruction-panel { display:none; width:100%; align-items:flex-end; gap:8px; }
#artefact-new-instruction-panel.open { display:flex; }
#artefact-instr-input { flex:1; min-width:0; min-height:78px; resize:vertical; }
#artefact-new-instruction-panel #artefact-instr-save-btn { min-height:42px; }
#artefact-instr-input { flex:1; border:1px solid #d4d1ca; border-radius:9px; padding:11px 14px; font:inherit; font-size:16px; outline:none; color:#333; background:#fff; min-width:0; box-shadow:0 1px 2px rgba(0,0,0,.04); }
#artefact-instr-input:focus { border-color:#9bb4e9; }
#artefact-instr-input::placeholder { color:#bbb; font-style:italic; }
.artefact-instr-btn { font-size:15px; padding:11px 16px; min-height:44px; white-space:nowrap; flex-shrink:0; border-radius:9px; }
#artefact-instr-templates-btn { background:#fff; color:#3a5a9a; border-color:#b9ccef; }
#artefact-instr-templates-btn:hover { background:#f0f5ff; }
#artefact-instr-save-btn { background:var(--venn-accent); color:#fff; border-color:var(--venn-accent); }
#artefact-instr-save-btn:hover { background:var(--venn-accent-dark); }
#artefact-header-actions .copy-btn,
#artefact-instr-templates-btn,
#artefact-new-btn,
#artefact-output-actions .copy-btn,
#artefact-instr-save-btn {
  box-sizing:border-box;
  height:44px;
  min-height:44px;
  padding:0 14px;
  border:1px solid #d4d2cd;
  border-radius:10px;
  background:#fff;
  color:#5d5e5e;
  font-size:15px;
  font-weight:700;
  line-height:1;
}
#artefact-header-actions .copy-btn:hover,
#artefact-instr-templates-btn:hover,
#artefact-new-btn:hover,
#artefact-output-actions .copy-btn:hover {
  background:#f3f2ee;
  color:#4f5050;
}
#artefact-output-actions .copy-btn {
  width:44px !important;
  min-width:44px !important;
  height:44px !important;
  min-height:44px !important;
  padding:0;
}
#artefact-output-actions .copy-icon {
  width:22px !important;
  height:22px !important;
  transform:none !important;
}
#artefact-instr-save-btn { background:#fff; color:#5d5e5e; }
#artefact-instr-save-btn:hover { background:#f3f2ee; color:#4f5050; }
#artefact-header-actions .copy-btn:disabled { opacity:1; background:#f1f0ec; color:#777; }
#artefact-instr-panel { display:none; position:absolute; top:auto; bottom:calc(100% + 6px); left:0; right:0; z-index:30; padding:12px; background:#fff; border:1px solid #d8d5ce; border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.16); max-height:min(60vh,420px); overflow-y:auto; }
#artefact-instr-panel.open { display:block; }
#artefact-instr-search { width:100%; box-sizing:border-box; border:1px solid #e4e2dc; padding:11px 14px; margin:0 0 10px; font:inherit; font-size:15px; outline:none; color:#333; background:#fff; border-radius:10px; }
.artefact-instr-item { display:flex; align-items:center; gap:12px; min-height:58px; box-sizing:border-box; padding:11px 14px; margin-bottom:8px; border:1px solid #e4e2dc; border-radius:10px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.04); cursor:pointer; transition:background .1s, border-color .1s, box-shadow .1s; }
.artefact-instr-item:last-child { margin-bottom:0; }
.artefact-instr-item:hover { background:#f8f6f3; border-color:#c9c6be; box-shadow:0 3px 9px rgba(0,0,0,.07); }
.artefact-instr-name { font-size:15px; font-weight:700; color:#333; flex-shrink:0; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.artefact-instr-preview { font-size:14px; color:#888; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.artefact-instr-custom .artefact-instr-preview { font-size:15px; font-weight:700; color:#333; }
.artefact-instr-del { width:34px; height:34px; min-width:34px; padding:0; border:0; border-radius:8px; background:transparent; color:#777; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; line-height:0; }
.artefact-instr-del svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.artefact-instr-del:hover { color:#c0392b; background:#fdf0ee; }
.artefact-instr-new { color:var(--venn-accent); font-weight:700; justify-content:center; border-style:dashed; }
.artefact-instr-new .artefact-control-icon { width:18px; height:18px; }
.artefact-template-new-form { display:flex; flex-direction:column; gap:10px; width:100%; }
.artefact-template-new-form label { display:none; }
.artefact-template-new-form textarea { width:100%; min-height:150px; box-sizing:border-box; resize:vertical; border:1px solid #b9ccef; border-radius:10px; padding:12px 14px; font:inherit; font-size:16px; color:#333; outline:none; }
.artefact-template-new-trigger { width:100%; min-height:52px; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border:1px solid #d4d2cd; border-radius:10px; background:#fff; color:#555; font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.artefact-template-new-trigger:hover { background:#f3f2ee; border-color:var(--venn-accent); color:var(--venn-accent); }
.artefact-template-new-form textarea:focus { border-color:var(--venn-accent); box-shadow:0 0 0 2px rgba(126,76,190,.14); }
#artefact-template-edit-actions { display:none; align-items:center; gap:8px; flex:1 1 100%; width:100%; min-width:0; }
#artefact-template-edit-actions.open { display:flex; }
#modal-artefact .artefact-modal-footer.template-editing { flex-wrap:wrap; }
#modal-artefact .artefact-modal-footer.template-editing #artefact-instruction-row { flex:0 0 100%; width:100%; }
#modal-artefact .artefact-modal-footer.template-editing #artefact-template-edit-actions { flex:0 0 100%; width:100%; }
#artefact-instruction-row.template-editing #artefact-copy-output-btn,
#artefact-instruction-row.template-editing #artefact-pin-btn,
#artefact-instruction-row.template-editing #artefact-history-btn { display:none !important; }
#modal-artefact .artefact-modal-footer.template-editing #artefact-copy-output-btn,
#modal-artefact .artefact-modal-footer.template-editing #artefact-pin-btn,
#modal-artefact .artefact-modal-footer.template-editing #artefact-history-btn { display:none !important; }
#artefact-instruction-row.template-editing #artefact-instr-panel { width:100% !important; flex:1 1 100%; }
#artefact-instruction-row.template-editing #artefact-instr-list,
#artefact-instruction-row.template-editing .artefact-template-new-form { width:100%; }
#modal-artefact .artefact-modal-footer.template-editing .artefact-topic-btn { display:none; }
#artefact-template-edit-actions button { flex:1 1 50%; width:50%; height:46px; min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid #d4d2cd; border-radius:10px; background:#fff; color:#555; font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
#artefact-template-edit-actions button:hover { background:#f3f2ee; border-color:var(--venn-accent); color:var(--venn-accent); }
#artefact-template-save-btn { background:var(--venn-accent) !important; border-color:var(--venn-accent) !important; color:#fff !important; }
#artefact-template-save-btn:hover { background:var(--venn-accent-dark) !important; color:#fff !important; }
#artefact-instruction-row.template-editing { display:block; }
#artefact-instruction-row.template-editing > :not(#artefact-instr-panel) { display:none; }
#artefact-instruction-row.template-editing #artefact-instr-panel { position:static; display:block; max-height:none; padding:0; border:0; box-shadow:none; overflow:visible; }
#artefact-instruction-row.template-editing #artefact-instr-search { display:none !important; }
.artefact-instr-empty { padding:20px; text-align:center; color:#999; font-size:15px; }

@media (max-width: 640px) {
  :root {
    --chrome-bar-h: 62px;
    --chrome-control-h: 42px;
  }
  #modal-decisions .topic-upload-dropzone { display:none !important; }
  #modal-decisions .decision-item:not(.no-media):not(.is-deleted) .topic-upload-dropzone {
    display:flex !important;
    box-sizing:border-box;
    flex:1 1 72px;
    width:auto;
    min-width:72px;
    max-width:none;
    height:52px;
    min-height:52px;
    max-height:52px;
    margin:0;
    padding:0;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:12px;
    font-weight:600;
    line-height:1.15;
    gap:6px;
    border-radius:6px;
    white-space:nowrap;
  }
  #modal-decisions .decision-item:not(.no-media):not(.is-deleted) .topic-upload-dropzone::before {
    content:'+';
    font-size:18px;
    font-weight:600;
    line-height:1;
    color:inherit;
    flex:0 0 auto;
  }
  #modal-decisions .decision-actions .btn-attach { display:inline-flex !important; }
  #modal-decisions .decision-actions .btn-links { display:inline-flex !important; }
  /* Equilateral layout: all three circles share the same central intersection. */
  #venn-svg #c-self, #venn-svg #label-self { cx: 200px; cy: 111px; x: 200px; y: 111px; }
  #venn-svg #c-situation, #venn-svg #label-situation { cx: 114px; cy: 260px; x: 114px; y: 260px; }
  #venn-svg #c-world, #venn-svg #label-world { cx: 286px; cy: 260px; x: 286px; y: 260px; }
  .dec-proj-badge { display: inline-flex; }
  #new-proj-colors { justify-content: flex-start; width: auto; gap: 16px; }
  #topbar {
    top: auto; bottom: 0; height: calc(var(--chrome-bar-h) + env(safe-area-inset-bottom, 0px));
    padding: 0 14px env(safe-area-inset-bottom); gap: 8px;
    align-items: center;
  }
  #main { margin-top: 0; margin-bottom: calc(var(--chrome-bar-h) + env(safe-area-inset-bottom, 0px)); height: calc(100dvh - var(--chrome-bar-h) - env(safe-area-inset-bottom, 0px)); }
  .logo { gap: 5px; margin-right: 0; padding-left: 0; overflow: hidden; }
  .logo-mark { width: 21px; height: 21px; position: relative; z-index: 2; }
  .logo-word {
    display: inline-block;
    max-width: 4.5em;
    opacity: 1;
    transform: translateX(0);
    transition:
      max-width .5s cubic-bezier(.2,.8,.2,1),
      opacity .4s ease,
      transform .5s cubic-bezier(.2,.8,.2,1),
      margin .5s cubic-bezier(.2,.8,.2,1);
  }
  #topbar.logo-word-tucked:not(.topbar-minimal) .logo { gap: 0; padding: 0 8px; }
  #topbar.logo-word-tucked:not(.topbar-minimal) .logo-word {
    max-width: 0;
    opacity: 0;
    margin: 0;
    transform: translateX(-110%);
    pointer-events: none;
  }
  /* Hold topic title until brand tuck finishes, then slide/fade in. */
  #topbar:not(.topbar-minimal):not(.topic-ready) #decision-label-btn {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    max-width: 0;
    opacity: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
  }
  #topbar.topic-ready:not(.topbar-minimal) #decision-label-btn {
    animation: topic-label-in .3s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes topic-label-in {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .logo-word { transition: none; }
    #topbar.topic-ready:not(.topbar-minimal) #decision-label-btn { animation: none; }
  }
  #decision-label-btn { font-size: 15px; padding: 4px 14px 4px 4px; }
  #decision-label-btn[hidden] ~ .tb-actions { margin-left: auto; }
  .dl-chevron { display: none; }
  #talk-btn { width: var(--chrome-control-h); min-width: var(--chrome-control-h); height: var(--chrome-control-h); min-height: var(--chrome-control-h); padding: 0; gap: 0; }
  #talk-btn .talk-label { display: none; }
  #talk-btn .talk-icon, #talk-btn .talk-icon svg { width: 20px; height: 20px; }
  #chat-btn { width: var(--chrome-control-h); min-width: var(--chrome-control-h); height: var(--chrome-control-h); min-height: var(--chrome-control-h); padding: 0; gap: 0; }
  #chat-btn .chat-label { display: none; }
  #notif-btn { width: var(--chrome-control-h); min-width: var(--chrome-control-h); height: var(--chrome-control-h); min-height: var(--chrome-control-h); padding: 0; }
  #notif-btn svg { width: 20px; height: 20px; }
  #notif-drawer .notif-list { margin-top: auto; }
  .notif-modal-footer { padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); }
  #main, #col-venn { background: #fff; }
  #col-venn { padding: 10px 8px 12px; }
  #venn-wrap { border-radius: 0; padding: 0; box-shadow: none; }
  #venn-svg { transform: scale(.97); transform-origin: center; }
  .venn-begin { width: 148px; height: 148px; font-size: 21px; }
  #venn-bottom-tools { order: -1; gap: 5px; margin-top: 0; margin-bottom: 7px; }
  .artefact-modal-footer { gap:6px; padding:8px 20px calc(8px + env(safe-area-inset-bottom)); }
  .circle-modal-footer { padding:10px 20px calc(10px + env(safe-area-inset-bottom)); }
  .circle-modal-footer .circle-footer-close { width:46px; min-width:46px; padding:0; gap:0; }
  .circle-modal-footer .circle-footer-close span { display:none; }
  #artefact-instruction-row { gap: 6px; padding: 0; }
  #artefact-header-actions { gap: 6px; }
  #artefact-header-actions .copy-btn, #artefact-instr-templates-btn, #artefact-new-btn { min-height: 42px; padding: 9px 11px; }
  #artefact-header-actions .copy-btn,
  #artefact-instr-templates-btn,
  #artefact-new-btn,
  #artefact-copy-output-btn,
  #artefact-publish-btn,
  .artefact-topic-btn,
  .artefact-modal-close-footer,
  .publish-modal-close-footer { width:42px !important; min-width:42px !important; height:42px !important; min-height:42px !important; padding:0 !important; gap:0; }
  .artefact-control-label { display:none; }
  .artefact-control-icon { width:19px; height:19px; }
  #artefact-new-instruction-panel { align-items:stretch; flex-direction:column; }
  #artefact-instr-input { padding: 10px 11px; font-size: 14px; }
  .artefact-instr-btn { min-height: 42px; padding: 9px 10px; font-size: 13px; }
  #artefact-instr-panel { left:20px; right:20px; max-height:60vh; }
}

#modal-artefact .modal-card { max-width: none; height: 100dvh; max-height: 100dvh; transform: translateY(100%); opacity: 0; transition: transform .28s ease, opacity .28s ease; }
#modal-artefact.open .modal-card { transform: translateY(0); opacity: 1; }
.modal-card { transform: translateY(calc(100% + 20px)); opacity: 0; transition: transform .28s ease, opacity .28s ease; }
.modal-overlay.open .modal-card { transform: translateY(0); opacity: 1; }
.modal-card.dragging, .slide-drawer.dragging { transition: none !important; }
#artefact-body { font-size: 16px; line-height: 1.75; color: #222; padding-bottom: clamp(160px, 25vh, 360px); }
#artefact-body h2 { font-size: 16px; font-weight: 700; color: #111; margin: 20px 0 7px; letter-spacing: 0.01em; }
#artefact-body h2:first-child { margin-top: 0; }
#artefact-body ul { padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
#artefact-body li { color: #444; }

@media (min-width: 701px) {
  #modal-decisions .decision-actions .btn-artefact {
    width:auto !important;
    min-width:0 !important;
    height:36px !important;
    min-height:36px !important;
    padding:9px 15px !important;
  }
  #modal-decisions .decision-actions .btn-artefact .action-label { display:inline !important; }
}
#artefact-body p { color: #444; margin-bottom: 6px; }
#artefact-body h1 { font-size: 28px; line-height: 1.2; margin: 0 0 18px; color: #111; }
#artefact-body h3 { font-size: 19px; margin: 20px 0 8px; color: #111; }
#artefact-body ol { padding-left: 22px; display: flex; flex-direction: column; gap: 5px; }
#artefact-body blockquote { margin: 14px 0; padding: 8px 16px; border-left: 4px solid #d7d5ce; color: #666; }
#artefact-body pre { overflow-x: auto; padding: 14px; border-radius: 8px; background: #f5f4f0; font-size: 14px; }
#artefact-body code { padding: 1px 4px; border-radius: 4px; background: #f2f1ed; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
#artefact-body pre code { padding: 0; background: none; }
#artefact-body a { color: #2d62a8; text-decoration: underline; }
#artefact-copy-btn, #artefact-copy-output-btn, #artefact-publish-btn { font-size: 0 !important; padding: 0 !important; width:44px; min-width: 44px; height:44px; min-height: 44px; display:inline-flex; align-items:center; justify-content:center; line-height:0; }
#artefact-modal-title { max-width: calc(100% - 48px); }
#artefact-header-actions { display: flex; align-items: center; gap: 8px; }
#modal-artefact .modal-header h2 { max-width: calc(100% - 60px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* No dimmed backdrop behind drawers - sheets are opaque and full-height. */
body > .slide-drawer.open {
  position: fixed !important;
  z-index: 10000 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* Chat-only shield under the sheet (other modals already have .modal-overlay). */
#transcript-backdrop {
  display: none !important;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: transparent;
  pointer-events: none;
  touch-action: none;
}
#transcript-backdrop.open {
  display: block !important;
  pointer-events: auto;
}
#transcript-drawer.open {
  z-index: 10000 !important;
}
#transcript-drawer.open #chat-panel,
#transcript-drawer.open #chat-scroll,
#transcript-drawer.open #transcript-box,
#transcript-drawer.open #chat-composer-home {
  pointer-events: auto !important;
}
#transcript-drawer.open #chat-panel {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  align-self: stretch;
  width: 100%;
}
#transcript-drawer.open #chat-scroll {
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-height: 0;
}

/* Every modal uses the same full-width bottom-sheet geometry. Keep these
   declarations last so legacy per-modal rules cannot reintroduce gutters. */
#modal-circle, #modal-self, #modal-decisions, #modal-artefact, #modal-media, #modal-project, #modal-links, #modal-history {
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
#modal-circle .modal-card, #modal-self .modal-card, #modal-decisions .modal-card, #modal-artefact .modal-card, #modal-media .modal-card, #modal-project .modal-card, #modal-links .modal-card, #modal-history .modal-card {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 16px 16px 0 0;
}
#modal-circle.open .modal-card, #modal-self.open .modal-card, #modal-decisions.open .modal-card, #modal-artefact.open .modal-card, #modal-media.open .modal-card, #modal-project.open .modal-card, #modal-links.open .modal-card, #modal-history.open .modal-card {
  transform: translateY(0);
  opacity: 1;
}
#transcript-drawer.open, #logs-drawer.open, #notif-drawer.open {
  display: flex;
  visibility: visible;
  opacity: 1;
}

/* Copy controls are icon-only everywhere: keep the hit area square and the
   glyph mathematically centered, including high-density mobile displays. */
#copy-transcript, #copy-log, #artefact-copy-btn, #artefact-copy-output-btn, #artefact-publish-btn {
  box-sizing: border-box !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  line-height: 0 !important;
  overflow: hidden;
}
#copy-transcript .copy-icon, #copy-log .copy-icon, #artefact-copy-btn .copy-icon, #artefact-copy-output-btn .copy-icon, #artefact-publish-btn .copy-icon {
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
}
#copy-transcript .copy-icon, #copy-log .copy-icon, #artefact-copy-btn .copy-icon, #artefact-copy-output-btn .copy-icon, #artefact-publish-btn .copy-icon {
  transform: translateY(3px);
}
#artefact-copy-output-btn { margin-left: auto !important; }
#artefact-copy-output-btn, #artefact-publish-btn { border:1px solid #d4d2cd !important; border-radius:8px; }
#copy-transcript, #copy-log {
  background: transparent !important;
  border: 0 !important;
  color: #888;
}

@media (max-width: 1024px) {
  #transcript-drawer {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh;
    max-height: 100dvh;
    top: auto;
    bottom: 0;
    border-radius: 0;
  }
  #logs-drawer {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh;
    max-height: 100dvh;
    top: auto;
    bottom: 0;
    border-radius: 16px 16px 0 0;
  }
  #transcript-drawer .drawer-body {
    padding-left: 0;
    padding-right: 0;
  }
  #transcript-drawer #chat-scroll {
    padding-left: 4px;
    padding-right: 4px;
  }
  #transcript-drawer #transcript-box {
    padding-left: 6px;
    padding-right: 6px;
  }
  #chat-composer-dock {
    left: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  .modal-overlay { padding: 0 !important; align-items: flex-end; }
  #modal-circle, #modal-self, #modal-decisions, #modal-artefact, #modal-media, #modal-project, #modal-links, #modal-history { padding: 0 !important; }
  #modal-circle .modal-card, #modal-self .modal-card, #modal-decisions .modal-card, #modal-artefact .modal-card, #modal-media .modal-card, #modal-project .modal-card, #modal-links .modal-card, #modal-history .modal-card {
    width: 100%; max-width: none; height: 100dvh; max-height: 100dvh;
    border-radius: 16px 16px 0 0; transform: translateY(100%); transition: transform .28s ease, opacity .28s ease;
  }
  #modal-circle.open .modal-card, #modal-self.open .modal-card, #modal-decisions.open .modal-card, #modal-artefact.open .modal-card, #modal-media.open .modal-card, #modal-project.open .modal-card, #modal-links.open .modal-card, #modal-history.open .modal-card { transform: translateY(0); opacity: 1; }
  .slide-drawer, .slide-drawer.top, .slide-drawer.bottom, #logs-drawer {
    left: 0; right: 0; top: auto; bottom: 0; width: 100%;
    height: 100dvh; max-height: 100dvh;
    border-radius: 16px 16px 0 0; transform: translateY(100%); z-index: 200;
  }
  #transcript-drawer {
    left: 0; right: 0; top: auto; bottom: 0; width: 100%;
    height: 100dvh; max-height: 100dvh;
    border-radius: 0; transform: translateY(100%); z-index: 200;
  }
  .slide-drawer.open,
  #transcript-drawer.open,
  #logs-drawer.open,
  #notif-drawer.open {
    transform: translateY(0) !important;
  }
  .modal-drag-handle { display: block; }
  .modal-header, .drawer-header {
    min-height: 44px;
    height: 44px;
    padding: 4px 16px;
    touch-action: none;
    cursor: grab;
  }
  .modal-header:active, .drawer-header:active, .modal-drag-handle.grabbed {
    cursor: grabbing;
  }
  .modal-header.grabbed, .drawer-header.grabbed {
    background: var(--venn-accent);
    border-bottom-color: var(--venn-accent-dark);
  }
  .drawer-header { padding-left: 16px; padding-right: 16px; }
  .drawer-header h2, .modal-header h2 { max-width: calc(100% - 24px); }
  .drawer-actions-row { min-height: 0; padding: 4px 12px; }
  .drawer-body-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 0 4px 8px;
  }
  .drawer-body-actions .copy-btn {
    font-size: 0;
    width: 44px; min-width: 44px; height: 44px; min-height: 44px;
    padding: 0; display: grid; place-items: center; line-height: 0;
    background: transparent; border-color: transparent; color: #888;
  }
  .drawer-body-actions .copy-btn:hover { color: #444; background: transparent; }
  .drawer-body-actions .copy-label, .drawer-body-actions .artefact-copy-label { display: none; }
  .modal-body { padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); }
  .media-modal-footer,
  .project-modal-footer,
  #modal-decisions .topics-modal-footer { padding-left:20px; padding-right:20px; }
  #project-modal-list,
  #new-proj-form,
  #modal-project #new-proj-form { padding-left:20px; padding-right:20px; padding-top:8px; padding-bottom:10px; }
  .drawer-body { padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); }
  /* Chat panel: header + scrollable messages + in-flow composer. */
  #transcript-drawer .drawer-body#chat-panel,
  #transcript-drawer #chat-panel {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 4px 0 0;
  }
  #transcript-drawer #chat-scroll {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 4px 4px 8px;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  #transcript-drawer #transcript-box {
    min-height: 0;
    flex: 0 0 auto;
    margin-top: auto;
    padding: 6px 6px;
    overflow-x: hidden;
    overflow-y: visible;
  }
  #chat-composer-home {
    flex-shrink: 0;
    background: rgba(255,255,255,.98);
    border-top: 1px solid #e5e2db;
  }
  #transcript-drawer #chat-composer {
    position: relative;
    flex-shrink: 0;
    margin: 0;
  }
  #chat-input-shell { min-width:0; }
  html.chat-kb-open #transcript-drawer #chat-composer {
    padding-bottom: 10px;
  }
  html.chat-composer-pinned #transcript-drawer #chat-scroll {
    padding-bottom: var(--chat-scroll-pad-bottom, 8px) !important;
    touch-action: pan-y;
  }
  /* Legacy dock unused - composer stays in-flow. */
  #chat-composer-dock { display: none !important; }
  /* Closed chat must never leave a floating composer/input on the page. */
  #transcript-drawer:not(.open) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  #transcript-drawer:not(.open) #chat-composer,
  #transcript-drawer:not(.open) #chat-composer-home,
  #transcript-drawer:not(.open) #chat-input {
    pointer-events: none !important;
  }
  .drawer-header-actions { right: 12px; }
}

/* ════════════════════ AUTH OVERLAY ════════════════════ */
/* Above desktop #topbar (z-index 10001) so login chrome is self-contained. */
#auth-overlay {
  position: fixed; inset: 0; z-index: 10002;
  background: var(--bg);
  display: flex; flex-direction: column;
  padding: 0;
}
#auth-overlay.auth-hidden { display: none; }
.auth-stage {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 44px 36px 36px;
  max-width: 360px; width: 100%;
  text-align: center;
}
.auth-logo { margin-bottom: 2px; color:#111; line-height: 0; }
.auth-logo-mark { display:inline-block; width:44px; height:44px; transform:rotate(180deg); transform-origin:center; }
.auth-card h1 {
  font-size: 26px; font-weight: 800; letter-spacing: -0.03em;
  margin-bottom: 6px;
}
.auth-card h1::after {
  content:''; display:block; width:80%; height:3px; margin:6px auto 0;
  border-radius:999px; background:#111;
}
.auth-tagline { color: var(--muted); font-size: 14px; margin:0 0 25px; line-height:1.5; }
.auth-access-prompt { color:var(--muted); font-size:14px; margin:0 0 12px; line-height:1.5; }
.auth-access-prompt[hidden] { display:none; }
.auth-email-input {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 15px; background: var(--bg); color: var(--text);
  margin-bottom: 10px; display: block;
  font-family: inherit; text-align:center;
}
.auth-email-input:focus { outline: 2px solid #6495ed; border-color: transparent; }
.auth-code-input { letter-spacing: 0.18em; font-weight: 700; font-variant-numeric: tabular-nums; }
.auth-code-input[hidden] { display: none; }
.auth-email-input[readonly] { opacity: 0.7; }
.auth-submit-btn {
  width: 100%; padding: 11px;
  background: #111; color: #fff;
  border: none; border-radius: 10px;
  font-size: 15px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background .15s;
}
.auth-submit-btn:hover:not(:disabled) { background: #333; }
.auth-submit-btn:disabled { opacity: 0.45; cursor: default; }
.auth-have-code {
  display: block; width: 100%; margin-top: 12px; padding: 0;
  border: none; background: transparent; color: var(--muted);
  font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer;
}
.auth-have-code[hidden] { display: none; }
.auth-msg { font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.6; }
.auth-msg:empty { display: none; }
.auth-legal { font-size: 12px; color: var(--muted); margin-top: 16px; text-align: center; }
.auth-legal a { color: var(--muted); text-decoration: underline; }
.auth-legal a:hover { color: var(--text); }

@media (min-width: 641px) {
  #toast-region {
    top:var(--nav-h);
    left:0;
    right:auto;
    width:60%;
  }
  #topbar {
    left:0;
    right:0;
    width:100%;
    z-index:10001;
    padding-left:max(18px, calc((100vw - 960px) / 2 + 18px));
    padding-right:max(18px, calc((100vw - 960px) / 2 + 18px));
    transform:none;
  }
  #chat-btn {
    width:88px;
    min-width:88px;
    gap:8px;
    padding:0 12px;
  }
  #decision-label-btn[hidden] ~ .tb-actions { margin-left:auto; }
  #chat-btn::after { content:none; }
  #talk-btn {
    width:auto;
    min-width:0;
    justify-content:flex-start;
    text-align:left;
  }
  #main {
    width:100%;
    max-width:none;
    background:#fff;
    margin-left:auto;
    margin-right:auto;
    display:block;
  }
  #col-venn {
    background:#fff;
    width:60%;
    border-right:1px solid var(--border);
    transition:width .36s cubic-bezier(.22,.8,.24,1);
  }
  body:not(.desktop-side-panel-open) #col-venn {
    width:100%;
    border-right:0;
  }
  #venn-wrap {
    width:min(calc(100% - 32px), 792px);
    max-width:none;
    margin-left:auto;
    margin-right:auto;
    border-radius:0;
    box-shadow:none;
  }
  .venn-view-bar {
    width:auto;
  }
  #venn-svg {
    /* Scale the complete SVG so circles, labels and ripples stay aligned. */
    transform:scale(.7918);
    transform-origin:center;
  }
  #venn-svg #c-self, #venn-svg #label-self { cx:200px; cy:95px; x:200px; y:95px; }
  /* Keep only a small safety margin over the minimum three-way overlap at
     the 100px circle radius, preventing a white center gap without crowding
     the circles together. */
  #venn-svg #c-situation, #venn-svg #label-situation { cx:120px; cy:250px; x:120px; y:250px; }
  #venn-svg #c-world, #venn-svg #label-world { cx:280px; cy:250px; x:280px; y:250px; }
  .modal-overlay .modal-card {
    width:40vw;
    max-width:none;
    height:calc(100dvh - var(--nav-h));
    max-height:none;
    border-radius:0;
    box-shadow:-8px 0 32px rgba(0,0,0,.08);
  }
  #modal-circle .modal-card,
  #modal-self .modal-card,
  #modal-decisions .modal-card,
  #modal-artefact .modal-card,
  #modal-media .modal-card,
  #modal-project .modal-card,
  #modal-links .modal-card,
  #modal-history .modal-card {
    width:40vw;
    max-width:none;
    height:calc(100dvh - var(--nav-h));
    max-height:none;
  }
  .slide-drawer {
    left:60%;
    right:0;
    width:40vw;
    height:calc(100dvh - var(--nav-h));
    max-height:none;
    margin-left:0;
    margin-right:0;
    top:var(--nav-h);
    bottom:auto;
    border-radius:0;
    box-shadow:-8px 0 32px rgba(0,0,0,.08);
  }
  #transcript-drawer {
    left:60% !important;
    right:0 !important;
    top:var(--nav-h) !important;
    bottom:auto !important;
    width:40vw !important;
    max-width:none !important;
    height:calc(100dvh - var(--nav-h)) !important;
    max-height:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    border-radius:0;
    transform:translateX(100%);
  }
  #transcript-drawer.open {
    transform:translateX(0) !important;
  }
  /* Debug note stays inside the chat side panel (JS also pins left/right on open). */
  body.desktop-side-panel-open #topic-debug-panel {
    left: calc(60% + 10px);
    right: 10px;
    max-width: calc(40vw - 20px);
  }
  #logs-drawer {
    height:calc(100dvh - var(--nav-h)) !important;
    max-height:none !important;
  }
  .modal-overlay {
    top:var(--nav-h);
    right:0;
    bottom:0;
    left:60%;
    width:40vw;
    height:calc(100dvh - var(--nav-h));
    align-items:stretch;
    justify-content:stretch;
    pointer-events:none;
  }
  #transcript-backdrop {
    top:var(--nav-h);
    right:0;
    bottom:0;
    left:60%;
    width:40vw;
    height:calc(100dvh - var(--nav-h));
  }
  .modal-overlay .modal-card { width:100%; height:100%; pointer-events:auto; }
  /* The topics card is narrower in the desktop half-panel. Keep its metadata
     full-width and place the action buttons beneath it instead of allowing
     the action row to squeeze the metadata into a narrow column. */
  #modal-decisions .decision-second-row {
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  #modal-decisions .decision-actions {
    flex-wrap:wrap;
    justify-content:flex-start;
  }
  #modal-decisions .decision-actions .btn-attach,
  #modal-decisions .decision-actions .btn-links,
  #modal-decisions .decision-actions .btn-artefact {
    width:36px;
    min-width:36px;
    height:36px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  #modal-decisions .decision-actions .btn-attach .action-label,
  #modal-decisions .decision-actions .btn-artefact .action-label {
    display:none;
  }
  #modal-decisions .decision-actions:not(.has-project-label) .btn-artefact {
    width:auto;
    min-width:0;
    padding:9px 15px;
  }
  #modal-decisions .decision-actions:not(.has-project-label) .btn-artefact .action-label { display:inline; }
  /* Project modal: desktop top-aligned; search above list */
  #modal-project .modal-body { justify-content:flex-start; }
  #modal-project .project-modal-search-wrap { order:1; }
  #modal-project #project-modal-list { order:2; }
  #modal-project #project-modal-list::before { display:none; }
  #modal-project.project-form-open .modal-body { justify-content:flex-start; }
  #modal-project.project-form-open #new-proj-form { margin-top:0; }
  /* Topics modal: desktop top-aligned; search/filters above list */
  #modal-decisions .modal-body { justify-content:flex-start; }
  #modal-decisions .decision-controls { order:1; }
  #modal-decisions #decisions-list { order:2; }
  #modal-decisions #decisions-list::before { display:none; }
}

@media (min-width: 1600px) {
  #modal-decisions .decision-actions .btn-attach,
  #modal-decisions .decision-actions .btn-artefact {
    width:auto;
    min-width:0;
    height:auto;
    padding:9px 15px;
  }
  #modal-decisions .decision-actions .btn-attach .action-label,
  #modal-decisions .decision-actions .btn-artefact .action-label {
    display:inline;
  }
}

/* Keep Artefact footer glyphs on one visual grid. */
#modal-artefact .artefact-modal-footer .artefact-control-icon,
#modal-artefact .artefact-modal-footer .copy-icon {
  width:18px !important;
  height:18px !important;
  margin:0 !important;
  transform:none !important;
  stroke-width:2 !important;
}
#modal-artefact .artefact-modal-footer .artefact-control-icon,
#modal-artefact .artefact-modal-footer .copy-icon {
  flex:0 0 18px !important;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#modal-artefact .artefact-modal-footer button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  line-height:1;
}
#modal-artefact .artefact-modal-footer button {
  transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
#modal-artefact .artefact-modal-footer button:hover:not(:disabled),
#modal-artefact .artefact-modal-footer button:focus-visible:not(:disabled) {
  background:#f3f2ee !important;
  border-color:#c9c6be !important;
  color:#444 !important;
  box-shadow:none;
}
#modal-artefact .artefact-modal-footer button:active:not(:disabled) {
  background:#eceae5 !important;
  border-color:#bdb9b0 !important;
  color:#333 !important;
}
#modal-artefact .artefact-modal-footer button:focus-visible {
  outline:2px solid var(--venn-accent);
  outline-offset:2px;
}
#modal-artefact .artefact-modal-footer button:disabled {
  cursor:not-allowed;
}

/* Desktop topic cards show the Artefact action label at every width. */
@media (min-width: 701px) {
  #modal-decisions .decision-actions .btn-artefact {
    width:auto !important;
    min-width:0 !important;
    height:36px !important;
    min-height:36px !important;
    padding:9px 15px !important;
    gap:8px !important;
  }
  #modal-decisions .decision-actions .btn-artefact .action-label {
    display:inline !important;
  }
  #modal-decisions .decision-actions .btn-artefact .action-icon {
    margin-right:0 !important;
  }
}

/* An outdated Artefact is signalled by the document icon itself, not only a dot. */
#modal-decisions .decision-actions .btn-artefact[data-artefact="stale"] .action-icon {
  color:#e67e22 !important;
  stroke:#e67e22 !important;
}
#modal-decisions .decision-actions .btn-artefact[data-artefact="stale"]::after {
  display:none;
}

/* Artefact layout polish. */
#artefact-stale-bar .artefact-stale-message {
  font-size:17px;
  white-space:nowrap;
}
#artefact-instr-templates-btn {
  flex:1 1 0 !important;
  min-width:0;
  width:auto !important;
}
#artefact-instr-templates-btn .artefact-control-label.ui-label-full { display:inline !important; }
#artefact-instr-templates-btn .artefact-control-label.ui-label-short { display:none; }
#artefact-body { padding-bottom:64px; }
#artefact-copy-output-btn { margin-left:auto !important; }
#artefact-publish-btn { margin-left:0 !important; }
#modal-artefact #artefact-instr-templates-btn { box-sizing:border-box !important; height:46px !important; min-height:46px !important; padding:0 14px !important; }
#modal-artefact .artefact-instr-del { border:0 !important; }
#modal-artefact .artefact-instr-del:hover { border:0 !important; }

/* Keep modal footers visually interchangeable. */
#modal-decisions .topics-modal-footer,
#modal-artefact .artefact-modal-footer,
#modal-publish .publish-modal-footer,
#modal-share .share-modal-footer {
  gap:10px;
  padding:12px 28px calc(12px + env(safe-area-inset-bottom));
  box-sizing:border-box;
}
#modal-decisions .topics-modal-close-footer,
#modal-artefact .artefact-modal-close-footer,
#modal-publish .publish-modal-close-footer,
#modal-share .topics-modal-close-footer,
#modal-artefact .artefact-topic-btn,
#modal-publish .publish-parent-btn {
  box-sizing:border-box;
  height:46px;
  min-height:46px;
}
#modal-decisions .topics-modal-close-footer svg,
#modal-artefact .artefact-modal-close-footer svg,
#modal-publish .publish-modal-close-footer svg,
#modal-share .topics-modal-close-footer svg,
#modal-publish .publish-parent-btn svg,
#modal-publish .publish-parent-btn i {
  width:20px;
  height:20px;
  flex:0 0 20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#modal-artefact .artefact-modal-footer .artefact-control-icon,
#modal-artefact .artefact-modal-footer .copy-icon {
  width:20px;
  height:20px;
  flex:0 0 20px;
  stroke-width:2;
}
#modal-artefact .artefact-modal-close-footer { order:-2; }
#modal-decisions .topics-modal-close-footer,
#modal-artefact .artefact-modal-close-footer,
#modal-publish .publish-modal-close-footer,
#modal-share .topics-modal-close-footer { flex:0 0 46px; }

@media (max-width:640px) {
  #modal-decisions .topics-modal-footer,
  #modal-artefact .artefact-modal-footer,
  #modal-publish .publish-modal-footer,
  #modal-share .share-modal-footer {
    gap:6px;
    padding:8px 20px calc(8px + env(safe-area-inset-bottom));
  }
  #modal-decisions .topics-modal-close-footer,
  #modal-artefact .artefact-modal-close-footer,
  #modal-publish .publish-modal-close-footer,
  #modal-artefact .artefact-topic-btn {
    width:42px;
    min-width:42px;
    height:42px;
    min-height:42px;
  }
}

#modal-publish .publish-modal-footer > button {
  box-sizing:border-box !important;
  height:46px !important;
  min-height:46px !important;
  padding:0 !important;
  margin:0 !important;
  line-height:1 !important;
}
#modal-publish .publish-modal-footer > .publish-modal-close-footer {
  flex:0 0 46px !important;
  width:46px !important;
}
@media (max-width:640px) {
  #modal-publish .publish-modal-footer > button {
    height:42px !important;
    min-height:42px !important;
  }
  #modal-publish .publish-modal-footer > .publish-modal-close-footer {
    flex-basis:42px !important;
    width:42px !important;
  }
}

/* One footer control rhythm across every modal, including circle and topic
   footers whose original controls had different intrinsic heights. */
#modal-circle .circle-modal-footer button,
#modal-self .self-footer-actions > button,
#modal-decisions .topics-modal-footer > button,
#modal-artefact .artefact-modal-footer > button,
#modal-publish .publish-modal-footer > button {
  box-sizing:border-box !important;
  height:46px !important;
  min-height:46px !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}
#modal-decisions .topics-modal-footer > .modal-new-btn {
  padding:0 14px !important;
}
#modal-circle .circle-footer-close,
#modal-self .circle-footer-close,
#modal-decisions .topics-modal-close-footer,
#modal-artefact .artefact-modal-close-footer,
#modal-publish .publish-modal-close-footer,
#notif-drawer-close {
  width:46px !important;
  min-width:46px !important;
  padding:0 !important;
  border-width:1px !important;
}
#modal-circle .circle-footer-close svg,
#modal-self .circle-footer-close svg,
#modal-decisions .topics-modal-close-footer svg,
#modal-artefact .artefact-modal-close-footer svg,
#modal-publish .publish-modal-close-footer svg,
#notif-drawer-close svg {
  width:20px !important;
  height:20px !important;
  flex:0 0 20px !important;
  stroke-width:2 !important;
}
@media (max-width:640px) {
  #modal-circle .circle-modal-footer button,
  #modal-self .self-footer-actions > button,
  #modal-decisions .topics-modal-footer > button,
  #modal-artefact .artefact-modal-footer > button,
  #modal-publish .publish-modal-footer > button {
    height:42px !important;
    min-height:42px !important;
  }
  #modal-circle .circle-footer-close,
  #modal-self .circle-footer-close,
  #modal-decisions .topics-modal-close-footer,
  #modal-artefact .artefact-modal-close-footer,
  #modal-publish .publish-modal-close-footer {
    width:42px !important;
    min-width:42px !important;
  }
}

@media (max-width:640px) {
  #modal-project .project-modal-search-wrap { margin:0 !important; padding:8px 20px 10px !important; }
  #modal-project .project-modal-search-clear { right:28px; }
  .artefact-options-panel { left:20px; right:20px; }
  #artefact-instr-templates-btn {
    width:auto !important;
    min-width:0 !important;
    flex:1 1 0 !important;
  }
  #artefact-instr-templates-btn .artefact-control-label.ui-label-full { display:inline; }
  #artefact-instr-templates-btn .artefact-control-label.ui-label-short { display:none; }
}

/* Share modal */
#modal-share { align-items:flex-end; padding:0; }
#modal-share .modal-card { display:flex; flex-direction:column; min-height:0; transform:translateY(calc(100% + 20px)); opacity:0; transition:transform .28s ease, opacity .28s ease; }
#modal-share.open .modal-card { transform:translateY(0); opacity:1; }
#modal-share .modal-body.share-modal-body { min-height:0; display:flex; flex-direction:column; }
#modal-share .modal-body.share-modal-body.share-modal-body--warn {
  display:flex; align-items:center; justify-content:center; min-height:220px; text-align:center;
}
.share-sync-warn {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; margin:auto; max-width:28em; padding:0 12px; color:#666;
}
.share-sync-warn[hidden] { display:none !important; }
.share-sync-warn-icon,
.share-sync-warn > svg {
  width:36px; height:36px; flex:0 0 36px;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; opacity:.55;
}
.share-sync-warn p { margin:0; font-size:17px; line-height:1.5; color:#666; }
#modal-share .share-invite-section {
  flex:1 1 auto; min-height:220px; display:flex; flex-direction:column; gap:0;
}
#modal-share .share-invite-section[hidden] { display:none !important; }
.share-invite-bottom {
  flex:0 0 auto; margin-top:auto; padding-top:12px; padding-bottom:10px;
  display:flex; flex-direction:column; gap:12px; min-height:0;
}
#share-members-list {
  flex:0 1 auto; max-height:36vh; min-height:0;
  display:flex; flex-direction:column; gap:8px; overflow:auto;
}
#share-members-list:has(.share-empty) {
  display:none;
}
.share-activity-section {
  display:flex; flex-direction:column; gap:8px; margin-bottom:4px;
}
.share-activity-section[hidden] { display:none !important; }
.share-activity-heading {
  font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#999;
}
.share-activity-list {
  display:flex; flex-direction:column; gap:8px;
  max-height:32vh; overflow:auto; padding-right:2px;
}
.share-activity-row {
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:8px 10px; border:1px solid #ebe7e1; border-radius:10px; background:#faf9f7;
}
.share-activity-text { font-size:13px; line-height:1.4; color:#333; min-width:0; }
.share-activity-when { flex:0 0 auto; font-size:11px; font-weight:600; color:#999; white-space:nowrap; }
.share-activity-empty { margin:0; color:#aaa; font-size:14px; text-align:center; padding:10px 0; }
.share-members-sep {
  display:none; border:0; border-top:1px solid #e5e2db; margin:0;
}
#share-members-list:has(.share-member-row) + .share-members-sep {
  display:block;
}
.share-topic-card {
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid #e8e4df; border-radius:12px; background:#faf9f7;
  text-decoration:none; color:inherit; transition:background .15s, border-color .15s;
}
.share-topic-card:hover { background:#f3f1ec; border-color:#d8d3cb; }
.share-public-row {
  display:flex; align-items:flex-start; gap:10px; margin:4px 0 10px;
  padding:10px 12px; border:1px solid #e4e0d8; border-radius:12px; background:#faf9f6;
  cursor:pointer;
}
.share-public-row[hidden] { display:none !important; }
.share-public-row input {
  margin-top:3px; width:16px; height:16px; accent-color:#5279c7; flex-shrink:0;
}
.share-public-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
.share-public-copy strong { font-size:14px; font-weight:700; color:#222; }
.share-public-copy em { font-style:normal; font-size:12px; color:#888; }
.share-note-field {
  display:flex; flex-direction:column; gap:6px; margin:10px 0 8px;
}
.share-note-label {
  font-size:13px; font-weight:600; color:#444;
}
.share-note-label em { font-style:normal; font-weight:500; color:#999; }
#share-note-input {
  width:100%; box-sizing:border-box; resize:vertical; min-height:72px;
  border:1px solid #e0deda; border-radius:10px; padding:10px 12px;
  font:inherit; font-size:14px; line-height:1.4; color:#222; background:#fff;
}
#share-note-input:focus { outline:none; border-color:#9bb4e9; }
.share-invite-note {
  position:absolute; z-index:5; left:16px; right:16px; top:16px;
  margin:0; padding:12px 14px; border-radius:12px;
  background:rgba(246,243,251,0.96); border:1px solid #e4dcf2; color:#3a2f4d;
  display:flex; gap:12px; align-items:flex-start;
  box-shadow:0 8px 24px rgba(60,40,90,0.08);
}
.share-invite-note[hidden] { display:none !important; }
#share-invite-note-text {
  margin:0; flex:1; min-width:0; font-size:14px; line-height:1.45; white-space:pre-wrap;
}
#share-invite-note-dismiss {
  flex:0 0 auto; border:0; background:transparent; color:#7b4bb7;
  font:inherit; font-size:13px; font-weight:600; cursor:pointer; padding:2px 0;
}
#share-invite-note-dismiss:hover { text-decoration:underline; }
.share-member-view {
  border:1px solid #e0deda !important; background:#fff !important; color:#555 !important;
  font-size:12px !important; font-weight:600 !important; padding:4px 8px !important;
  border-radius:8px !important; cursor:pointer;
}
.share-member-view:hover { background:#f3f2ee !important; color:#333 !important; }
.share-topic-card-icon {
  flex:0 0 40px; width:40px; height:40px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #e5e2db; color:#666;
}
.share-topic-card-icon svg {
  width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.share-topic-card-text { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.share-topic-card-title {
  font-size:15px; font-weight:700; color:#222; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.share-topic-card-hint { font-size:12px; color:#888; }
.share-email-error {
  margin:0; font-size:13px; font-weight:600; color:#c0392b; line-height:1.3;
}
.share-email-error[hidden] { display:none !important; }
.share-invite-row { position:relative; margin-bottom:4px; }
.share-invite-row input {
  width:100%; box-sizing:border-box; padding:12px 44px 12px 14px; border:1px solid #e0deda; border-radius:10px;
  font:inherit; font-size:16px; color:#222; background:#fff;
}
.share-invite-row input:focus { outline:none; border-color:#9bb4e9; }
.share-invite-row input.is-invalid { border-color:#e2a8a0; }
.share-invite-row input.is-invalid:focus { border-color:#c0392b; }
.share-email-clear {
  position:absolute; top:50%; right:8px; width:30px; height:30px; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:7px;
  background:transparent; color:#777; cursor:pointer;
}
.share-email-clear[hidden] { display:none !important; }
.share-email-clear:hover { background:#f2f1ed; color:#333; }
.share-email-clear svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.share-member-row {
  display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid #e4e2dc;
  border-radius:10px; background:#fff;
}
.share-member-row span:first-child { flex:1; min-width:0; font-size:15px; color:#222; }
.share-member-status { font-size:12px; color:#888; text-transform:uppercase; letter-spacing:.05em; }
.share-member-row button {
  border:1px solid #d8d6d0; border-radius:8px; background:#fff; color:#666; font:inherit; font-size:13px;
  font-weight:700; padding:6px 10px; cursor:pointer;
}
.share-member-row button:hover { background:#f3f2ee; color:#333; }
.share-member-remove {
  flex:0 0 34px; width:34px; height:34px; min-height:34px; padding:0 !important;
  display:inline-flex; align-items:center; justify-content:center; color:#c0392b;
}
.share-member-remove:hover { background:#fdf0ee; border-color:#e8b4ae; color:#a93226; }
.share-member-remove-icon {
  width:16px; height:16px; flex:0 0 16px;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.share-empty { margin:0; color:#aaa; font-size:15px; text-align:center; padding:12px 0; }
#modal-share .share-modal-footer {
  display:flex; align-items:center; gap:10px; flex:0 0 auto; position:relative; z-index:4;
  padding:12px 28px calc(12px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.98);
  border-top:1px solid #e5e2db; box-shadow:0 -6px 16px rgba(0,0,0,.07);
}
#modal-share .share-footer-actions {
  display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0;
}
#modal-share .share-footer-actions[hidden] { display:none !important; }
#modal-share .share-footer-actions .modal-new-btn {
  flex:1 1 auto; margin:0; width:auto;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
#venn-svg > #label-self.has-attribution,
#venn-svg > #label-situation.has-attribution,
#venn-svg > #label-world.has-attribution {
  /* attribution via title tooltip; keep label clean */
}
#modal-share .share-footer-secondary-btn {
  flex:0 0 auto; min-height:46px; padding:11px 14px; border-radius:10px; border:1.5px solid #e0deda;
  background:#fff; color:#444; font:inherit; font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap;
}
#modal-share .share-footer-secondary-btn:hover { background:#f3f2ee; }
#modal-share .share-footer-secondary-btn[hidden] { display:none !important; }

#modal-share .share-footer-icon-btn {
  flex:0 0 46px; width:46px; height:46px; min-height:46px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid #e0deda; border-radius:10px; background:#fff; color:#555; cursor:pointer;
}
#modal-share .share-footer-icon-btn:hover { background:#f3f2ee; border-color:#c9c6be; color:#333; }
#modal-share .share-modal-footer .topics-modal-close-footer { order:0; }
#modal-share .share-modal-footer .media-modal-topic-btn {
  flex:0 0 auto; min-height:46px; order:1;
}
#modal-share .share-footer-actions { order:2; }
#modal-share #share-sync-btn,
#modal-share #share-invite-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
#modal-share #share-invite-btn:disabled {
  opacity:.45; cursor:not-allowed; box-shadow:none;
}

/* Every modal footer control uses the same vertical rhythm, regardless of
   whether it contains an icon only or an icon and a label. */
#modal-circle .circle-modal-footer button,
#modal-self .self-modal-footer button,
#modal-decisions .topics-modal-footer button,
#modal-artefact .artefact-modal-footer button,
#modal-publish .publish-modal-footer button,
#modal-share .share-modal-footer button,
#modal-media .media-modal-footer button,
#modal-project .project-modal-footer button {
  box-sizing:border-box !important;
  height:46px !important;
  min-height:46px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

@media (max-width:640px) {
  #modal-circle .circle-modal-footer button,
  #modal-self .self-modal-footer button,
  #modal-decisions .topics-modal-footer button,
  #modal-artefact .artefact-modal-footer button,
  #modal-publish .publish-modal-footer button,
  #modal-share .share-modal-footer button,
  #modal-media .media-modal-footer button,
  #modal-project .project-modal-footer button {
    height:42px !important;
    min-height:42px !important;
  }
}

/* Keep viewport-edge controls aligned: the topbar and modal footers should
   each own one horizontal inset, without nested padding on the controls. */
#topbar { padding-left:18px; padding-right:18px; }
#modal-decisions .topics-modal-footer,
#modal-artefact .artefact-modal-footer,
#modal-publish .publish-modal-footer,
#modal-share .share-modal-footer,
#modal-circle .circle-modal-footer,
#modal-self .self-modal-footer,
#modal-media .media-modal-footer,
#modal-project .project-modal-footer {
  padding-left:20px;
  padding-right:20px;
}

/* Final settings alignment overrides: every expanded card uses the same
   body inset, divider, rhythm, and readable secondary text. */
.settings-list .setting-details,
.settings-list .setting-details-actions {
  padding:16px 16px 18px 52px;
  border-top:1px solid #e5e2dc;
  gap:12px;
}
.settings-list .setting-details .model-selector-row { padding:0; border:0; }
.settings-list .skills-settings-list,
.settings-list .limits-grid { padding:0; }
.settings-list .skills-settings-search-wrap { padding:0; }
.settings-list .limits-note { padding:12px 0 0 !important; }
.settings-list .setting-detail-note { color:#555; font-size:15px; line-height:1.45; }
.settings-list .skill-toggle-copy small {
  color:#555; font-size:14px; line-height:1.4;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; text-overflow:ellipsis; white-space:normal;
}
.settings-list .skill-toggle-row { padding:12px 14px; background:#fff; }
.settings-list .skill-toggle-copy strong { color:#222; font-size:15px; }
.settings-list .limits-grid .model-label { color:#666; font-size:12px; }
.settings-list .limits-grid strong { color:#222; font-size:17px; }
.settings-list .model-label { color:#555; }
.settings-list .model-cost-rate { color:#333; }
.settings-list .setting-action-btn {
  min-height:46px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  color:#222; font-size:15px; font-weight:700;
}
.settings-list .setting-action-btn--secondary {
  color:#666; border-color:#d8d5ce; background:#f3f2ee;
}
.settings-list .setting-action-btn--secondary:hover {
  color:#444; border-color:#cfcbc3; background:#eeede8;
}
.settings-list .setting-action-btn--accent {
  color:var(--venn-accent); border-color:var(--venn-accent); background:#fff;
}
.settings-list .setting-action-btn--accent:hover {
  color:var(--venn-accent-dark); border-color:var(--venn-accent-dark);
  background:var(--venn-accent-soft);
}
.settings-list .setting-action-btn.account-row-btn {
  min-height:36px; padding:0 12px; font-size:13px; white-space:nowrap;
}
.settings-list .setting-action-btn.account-row-btn svg { width:16px; height:16px; flex:0 0 16px; }
.settings-list .setting-action-btn svg { width:19px; height:19px; flex:0 0 19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.settings-list .setting-action-btn.is-loading { cursor:wait; }
.settings-list .setting-action-btn.is-loading svg { display:none; }
.settings-list .setting-action-btn.is-loading::before {
  content:''; width:18px; height:18px; flex:0 0 18px; box-sizing:border-box;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation:settings-button-spin .7s linear infinite;
}
@keyframes settings-button-spin { to { transform:rotate(360deg); } }
@media (max-width:640px) {
  .settings-list .setting-details,
  .settings-list .setting-details-actions { padding:16px; }
}

/* Archive confirmation: keep cancel compact and give the destructive action
   the remaining row width. */
.delete-confirm-actions { width:100%; margin-left:0; }
.delete-confirm-actions .delete-confirm-no {
  flex:0 0 46px !important; width:46px; min-width:46px; padding:0;
}
.delete-confirm-actions .delete-confirm-no span { display:none; }
.delete-confirm-actions .delete-confirm-yes {
  flex:1 1 auto !important; min-width:0; white-space:nowrap;
}

/* Expanded topic actions use the Write-up button's pseudo-element for its
   saved-state marker, so explicitly restore the text label here. */
#modal-decisions .decision-actions.more-visible > .btn-artefact::after {
  content:'Write-up' !important;
  display:inline !important;
  position:static !important;
  width:auto !important;
  height:auto !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  font-size:14px;
  font-weight:700;
}
/* Pin + manage pinned write-ups on one row — removed; History is a normal action row */

/* The no-project action has real text in the expanded view. Override the
   compact icon-button dimensions after all mobile/desktop card rules so its
   label stays in the same aligned row as the other expanded actions. */
#modal-decisions .decision-actions.more-visible > .btn-project {
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  padding:4px 0 !important;
  justify-content:flex-start !important;
  font-size:14px !important;
  display:grid !important;
  grid-template-columns:22px max-content;
  column-gap:5px;
  align-items:center;
  gap:5px !important;
}
#modal-decisions .decision-actions.more-visible > .btn-project > .action-icon {
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  flex:0 0 18px !important;
  margin:0 !important;
  justify-self:start;
}
#modal-decisions .decision-actions.more-visible > .btn-project .action-label {
  display:inline !important;
  font-size:14px;
  font-weight:700;
}

/* Expanded actions are a vertical list, never a centered/wrapped toolbar. */
#modal-decisions .decision-actions.more-visible {
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  width:100% !important;
  min-width:0 !important;
  gap:12px !important;
  padding-left:1px;
}
#modal-decisions .decision-actions.more-visible > .btn-sm {
  align-self:flex-start !important;
  width:max-content !important;
  max-width:100%;
  margin:0 !important;
  text-align:left !important;
}
#modal-decisions .decision-actions.more-visible > .btn-artefact .action-label {
  display:none !important;
}
#modal-decisions .decision-actions.more-visible > .btn-artefact {
  width:max-content !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  padding:4px 0 !important;
}
#modal-decisions .decision-actions.more-visible > .btn-sm,
#modal-decisions .decision-actions.more-visible > .btn-sm::before,
#modal-decisions .decision-actions.more-visible > .btn-sm::after,
#modal-decisions .decision-actions.more-visible > .btn-sm .action-label,
#modal-decisions .decision-actions.more-visible > .btn-sm .links-count,
#modal-decisions .decision-actions.more-visible > .btn-sm .share-count {
  font-family:inherit !important;
  font-size:14px !important;
  font-weight:700 !important;
  font-style:normal !important;
  line-height:1.4 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
}
#modal-decisions .decision-actions.more-visible > .btn-sm {
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  padding:4px 0 !important;
}
#modal-decisions .decision-actions.more-visible > .btn-sm > .action-icon,
#modal-decisions .decision-actions.more-visible > .btn-sm > .favorite-icon {
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  flex:0 0 18px !important;
  margin:0 !important;
}
#modal-decisions .decision-actions.more-visible > .btn-sm:not(.btn-share) {
  display:grid !important;
  grid-template-columns:22px max-content;
  column-gap:5px;
  align-items:center;
  justify-content:start;
}
#modal-decisions .decision-actions.more-visible > .btn-sm:not(.btn-share) > .action-icon,
#modal-decisions .decision-actions.more-visible > .btn-sm:not(.btn-share) > .favorite-icon {
  grid-column:1;
  grid-row:1;
  justify-self:start;
}
#modal-decisions .decision-actions.more-visible > .btn-sm:not(.btn-share) > .action-label,
#modal-decisions .decision-actions.more-visible > .btn-sm:not(.btn-share)::before,
#modal-decisions .decision-actions.more-visible > .btn-sm:not(.btn-share)::after {
  grid-column:2;
  grid-row:1;
}
/* Share: icon in same column; label + count on one text line. */
#modal-decisions .decision-actions.more-visible > .btn-share {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:0 !important;
  width:max-content !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
}
#modal-decisions .decision-actions.more-visible > .btn-share > .action-icon {
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  flex:0 0 18px !important;
  margin:0 6px 0 0 !important;
  order:0;
}
#modal-decisions .decision-actions.more-visible > .btn-share::after { order:1; }
#modal-decisions .decision-actions.more-visible > .btn-share > .share-count { order:2; }
/* Utility strip: labeled chips on desktop */
#modal-decisions .decision-actions.more-visible > .decision-action-icons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px !important;
  width: 100% !important;
  align-self: stretch !important;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid #ebe8e2;
}
#modal-decisions .decision-actions.more-visible > .decision-action-icons > .btn-sm {
  display: inline-flex !important;
  grid-template-columns: none !important;
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px 0 8px !important;
  margin: 0 !important;
  gap: 6px !important;
  align-self: auto !important;
  justify-content: flex-start !important;
  background: #fff !important;
  border: 1px solid #d8d6d0 !important;
  border-radius: 7px !important;
  color: #666 !important;
}
#modal-decisions .decision-actions.more-visible > .decision-action-icons > .btn-sm::before,
#modal-decisions .decision-actions.more-visible > .decision-action-icons > .btn-sm::after {
  content: none !important;
  display: none !important;
}
#modal-decisions .decision-actions.more-visible > .decision-action-icons > .btn-sm .action-label {
  display: inline !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}
#modal-decisions .decision-actions.more-visible > .decision-action-icons > .btn-sm > .action-icon {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex: 0 0 16px !important;
  margin: 0 !important;
}
#modal-decisions .decision-actions.more-visible > .decision-action-icons > .btn-sm > .action-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--venn-accent, #c86b1c);
  color: #fff;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 16px !important;
  letter-spacing: normal !important;
  text-align: center;
}
#modal-decisions .decision-actions.more-visible > .decision-action-icons > .decision-favorite {
  width: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  gap: 0 !important;
  justify-content: center !important;
}
#modal-decisions .decision-actions.more-visible > .decision-action-icons > .decision-favorite::after {
  content: none !important;
  display: none !important;
}
#modal-decisions .decision-actions.more-visible > .decision-action-icons > .decision-favorite > .favorite-icon {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex: 0 0 16px !important;
  margin: 0 !important;
}
@media (max-width: 640px) {
  #modal-decisions .decision-actions.more-visible > .decision-action-icons > .btn-sm {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: center !important;
  }
  #modal-decisions .decision-actions.more-visible > .decision-action-icons > .btn-sm .action-label {
    display: none !important;
  }
  #modal-decisions .decision-actions.more-visible > .decision-action-icons > .btn-sm > .action-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    flex: 0 0 18px !important;
  }
}
#modal-decisions .decision-actions.more-visible > .btn-more {
  display:none !important;
}
#modal-decisions .decision-actions.more-visible .btn-more {
  display:none !important;
}

/* Active mode: short labels where Office keeps the long copy. */
.ui-label-short { display: none; }
@media (max-width: 768px) {
  html[data-ui-mode="active"] .ui-label-full { display: none !important; }
  html[data-ui-mode="active"] .ui-label-short { display: inline !important; }
  html[data-ui-mode="active"] #artefact-instr-templates-btn .ui-label-full.artefact-control-label { display: none !important; }
  html[data-ui-mode="active"] #artefact-instr-templates-btn .ui-label-short.artefact-control-label { display: inline !important; }
  html[data-ui-mode="active"] .history-item-actions {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  html[data-ui-mode="active"] .history-item-actions button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
}

/* ════════════════════ UI MODE: Office / Active (mobile only) ════════════════════ */
@media (min-width: 769px) {
  #ui-mode-setting-card { display: none !important; }
}

#ui-mode-setting-card .setting-details > .model-selector-row:first-child {
  margin-bottom: 16px;
}
#ui-mode-setting-card .setting-details > .setting-detail-note {
  margin-top: 4px;
}
#ui-mode-setting-card .model-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
#ui-mode-setting-card .model-opt svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 768px) {
  /*
   * Shared chrome: brand bar + modal/drawer headers/footers use --chrome-bar-h.
   * Controls (talk/chat/composer) use --chrome-control-h / --chat-row-h.
   * Type scale is softer on chat body so messages don't balloon.
   */
  html[data-ui-mode="active"] {
    --ui-type-scale: 1.5;
    --ui-touch-scale: var(--ui-type-scale);
    --ui-chrome-pad-y: 10px;
    --chrome-control-h: calc(42px * var(--ui-touch-scale));
    /* Bar = control + equal top/bottom pad (safe-area added on footers separately). */
    --chrome-bar-h: calc(var(--chrome-control-h) + (2 * var(--ui-chrome-pad-y)));
    --chat-row-h: var(--chrome-control-h);
    --ui-control-min: var(--chrome-control-h);
    --ui-footer-control: var(--chrome-control-h);
    --nav-h: var(--chrome-bar-h);
    --ui-space: calc(8px * (0.85 + 0.15 * var(--ui-type-scale)));
  }

  html[data-ui-mode="active"] .slide-drawer,
  html[data-ui-mode="active"] .modal-card { max-height: 100dvh; }
  html[data-ui-mode="active"] .drawer-body,
  html[data-ui-mode="active"] .modal-body,
  html[data-ui-mode="active"] .settings-panel.active {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  html[data-ui-mode="active"] #logs-drawer .drawer-body::after {
    height: 40px;
    flex-basis: 40px;
  }

  /* Type + spacing (chat body uses softer scale) */
  html[data-ui-mode="active"] .setting-summary strong { font-size: calc(16px * var(--ui-type-scale)) !important; }
  html[data-ui-mode="active"] .setting-detail-note,
  html[data-ui-mode="active"] .skill-toggle-copy small {
    font-size: calc(14px * var(--ui-type-scale)) !important;
    line-height: 1.35;
  }
  /* Hide card sublabels — they collide with status badges at Active scale. */
  html[data-ui-mode="active"] .setting-summary small {
    display: none !important;
  }
  html[data-ui-mode="active"] .setting-summary > span:first-child {
    padding-right: calc(12px + min(52vw, 210px)) !important;
  }
  html[data-ui-mode="active"] .setting-action-btn,
  html[data-ui-mode="active"] .model-opt,
  html[data-ui-mode="active"] .llm-opt,
  html[data-ui-mode="active"] .skill-toggle-copy strong,
  html[data-ui-mode="active"] .settings-tab,
  html[data-ui-mode="active"] .limits-grid strong {
    font-size: calc(15px * var(--ui-type-scale)) !important;
  }
  html[data-ui-mode="active"] .decision-item {
    font-size: calc(15px * (1 + (var(--ui-type-scale) - 1) * 0.28)) !important;
    line-height: 1.35;
  }
  /* Topic cards — modest bump (not full 1.5×) so icons/text stay readable without crowding. */
  html[data-ui-mode="active"] #modal-decisions .decision-item.is-expanded {
    padding: 12px 14px !important;
  }
  html[data-ui-mode="active"] #modal-decisions .decision-item.is-expanded .decision-content {
    gap: 8px !important;
  }
  html[data-ui-mode="active"] #modal-decisions .decision-title {
    font-size: calc(17px * (1 + (var(--ui-type-scale) - 1) * 0.28)) !important;
  }
  html[data-ui-mode="active"] #modal-decisions .decision-item.is-collapsed .decision-title {
    font-size: calc(15px * (1 + (var(--ui-type-scale) - 1) * 0.28)) !important;
  }
  html[data-ui-mode="active"] #modal-decisions .decision-title-row .btn-load {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
  html[data-ui-mode="active"] #modal-decisions .decision-title-row .btn-load .action-icon {
    width: 18px !important;
    height: 18px !important;
  }
  html[data-ui-mode="active"] #modal-decisions .decision-actions.more-visible {
    gap: 4px !important;
  }
  html[data-ui-mode="active"] #modal-decisions .decision-actions.more-visible > .btn-sm,
  html[data-ui-mode="active"] #modal-decisions .decision-actions.more-visible > .btn-project {
    min-height: 32px !important;
    padding: 3px 0 !important;
    gap: 10px !important;
    line-height: 1.3 !important;
  }
  html[data-ui-mode="active"] #modal-decisions .decision-actions.more-visible > .btn-sm:not(.btn-share),
  html[data-ui-mode="active"] #modal-decisions .decision-actions.more-visible > .btn-project {
    grid-template-columns: 24px max-content !important;
    column-gap: 10px !important;
  }
  html[data-ui-mode="active"] #modal-decisions .decision-actions.more-visible > .btn-share {
    gap: 10px !important;
  }
  html[data-ui-mode="active"] #modal-decisions .decision-actions.more-visible > .btn-share > .action-icon {
    margin: 0 !important;
  }
  html[data-ui-mode="active"] #modal-decisions .decision-actions.more-visible > .btn-sm > .action-icon,
  html[data-ui-mode="active"] #modal-decisions .decision-actions.more-visible > .btn-sm > .favorite-icon,
  html[data-ui-mode="active"] #modal-decisions .decision-actions.more-visible > .btn-project > .action-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    flex: 0 0 20px !important;
  }
  html[data-ui-mode="active"] #modal-decisions .decision-actions.more-visible > .btn-sm .action-label,
  html[data-ui-mode="active"] #modal-decisions .decision-actions.more-visible > .btn-project .action-label,
  html[data-ui-mode="active"] #modal-decisions .decision-actions.more-visible > .btn-share::after,
  html[data-ui-mode="active"] #modal-decisions .decision-actions.more-visible > .btn-artefact::after,
  html[data-ui-mode="active"] #modal-decisions .decision-actions.more-visible > .btn-publish::after,
  html[data-ui-mode="active"] #modal-decisions .decision-actions.more-visible > .btn-archive::after {
    font-size: calc(14px * (1 + (var(--ui-type-scale) - 1) * 0.28)) !important;
  }
  html[data-ui-mode="active"] #modal-decisions .decision-actions.more-visible > .decision-action-icons {
    gap: 9px !important;
    margin-top: 6px !important;
    padding-top: 10px !important;
  }
  html[data-ui-mode="active"] #modal-decisions .decision-actions.more-visible > .decision-action-icons > .btn-sm {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }
  html[data-ui-mode="active"] #modal-decisions .decision-actions.more-visible > .decision-action-icons > .btn-sm > .action-icon,
  html[data-ui-mode="active"] #modal-decisions .decision-actions.more-visible > .decision-action-icons > .decision-favorite > .favorite-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    flex: 0 0 20px !important;
  }
  html[data-ui-mode="active"] #modal-decisions .decision-actions.more-visible > .decision-action-icons > .btn-sm > .action-count {
    min-width: 18px !important;
    height: 18px !important;
    font-size: 11px !important;
    line-height: 18px !important;
  }
  html[data-ui-mode="active"] #modal-decisions .topic-file-del {
    width: 24px !important;
    height: 24px !important;
    font-size: 16px !important;
    top: -6px !important;
    right: -6px !important;
  }
  html[data-ui-mode="active"] #modal-decisions .topic-upload-dropzone {
    font-size: calc(13px * (1 + (var(--ui-type-scale) - 1) * 0.28)) !important;
    min-height: 52px !important;
  }
  /* Circle detail cards — labels were 10px; scale them up with body text + delete targets. */
  html[data-ui-mode="active"] #modal-circle .circle-data-list,
  html[data-ui-mode="active"] #modal-self .circle-data-list {
    gap: calc(10px * (0.85 + 0.15 * var(--ui-type-scale))) !important;
  }
  html[data-ui-mode="active"] #modal-circle .circle-data-item,
  html[data-ui-mode="active"] #modal-self .circle-data-item {
    gap: 14px !important;
    padding: calc(14px * (0.9 + 0.1 * var(--ui-type-scale))) calc(16px * (0.9 + 0.1 * var(--ui-type-scale))) !important;
  }
  html[data-ui-mode="active"] #modal-circle .point-dim,
  html[data-ui-mode="active"] #modal-self .point-dim,
  html[data-ui-mode="active"] #modal-circle .circle-data-label,
  html[data-ui-mode="active"] #modal-self .circle-data-label {
    font-size: calc(12px * var(--ui-type-scale)) !important;
    letter-spacing: .05em;
    margin-bottom: 6px !important;
    gap: 5px !important;
  }
  html[data-ui-mode="active"] #modal-circle .point-dim svg,
  html[data-ui-mode="active"] #modal-self .point-dim svg {
    width: 16px !important;
    height: 16px !important;
  }
  html[data-ui-mode="active"] #modal-circle .circle-data-view,
  html[data-ui-mode="active"] #modal-self .circle-data-view {
    font-size: calc(16px * (1 + (var(--ui-type-scale) - 1) * 0.55)) !important;
    line-height: 1.45 !important;
  }
  html[data-ui-mode="active"] #modal-circle .point-dim,
  html[data-ui-mode="active"] #modal-self .point-dim {
    font-size: calc(12px * var(--ui-type-scale)) !important;
  }
  html[data-ui-mode="active"] #modal-circle .circle-data-delete,
  html[data-ui-mode="active"] #modal-self .circle-data-delete {
    width: var(--chrome-control-h) !important;
    min-width: var(--chrome-control-h) !important;
    height: var(--chrome-control-h) !important;
    min-height: var(--chrome-control-h) !important;
    border-radius: 10px !important;
  }
  html[data-ui-mode="active"] #modal-circle .circle-data-delete svg,
  html[data-ui-mode="active"] #modal-self .circle-data-delete svg {
    width: 20px !important;
    height: 20px !important;
  }
  html[data-ui-mode="active"] #modal-circle .modal-desc,
  html[data-ui-mode="active"] #modal-self .modal-desc {
    font-size: calc(16px * (1 + (var(--ui-type-scale) - 1) * 0.45)) !important;
    line-height: 1.45 !important;
  }
  html[data-ui-mode="active"] #modal-circle .circle-label-edit {
    width: var(--chrome-control-h) !important;
    min-width: var(--chrome-control-h) !important;
    height: var(--chrome-control-h) !important;
    flex: 0 0 var(--chrome-control-h) !important;
  }
  html[data-ui-mode="active"] #modal-circle .circle-label-edit svg {
    width: 20px !important;
    height: 20px !important;
  }
  html[data-ui-mode="active"] #modal-circle .circle-data-text,
  html[data-ui-mode="active"] #modal-self .circle-data-text {
    font-size: calc(16px * (1 + (var(--ui-type-scale) - 1) * 0.55)) !important;
    min-height: calc(56px * (0.9 + 0.1 * var(--ui-type-scale))) !important;
    padding: 12px 14px !important;
  }
  html[data-ui-mode="active"] #modal-circle .circle-data-empty,
  html[data-ui-mode="active"] #modal-self .circle-data-empty {
    font-size: calc(16px * (1 + (var(--ui-type-scale) - 1) * 0.4)) !important;
  }
  html[data-ui-mode="active"] #modal-circle .point-attr-btn,
  html[data-ui-mode="active"] #modal-self .point-attr-btn {
    width: calc(28px * var(--ui-touch-scale) / 1.15) !important;
    height: calc(28px * var(--ui-touch-scale) / 1.15) !important;
  }
  html[data-ui-mode="active"] #artefact-body {
    font-size: calc(16px * (1 + (var(--ui-type-scale) - 1) * 0.55)) !important;
    line-height: 1.55;
  }
  html[data-ui-mode="active"] .logo {
    font-size: calc(18px * (1 + (var(--ui-type-scale) - 1) * 0.5)) !important;
    min-height: var(--chrome-control-h) !important;
    gap: 8px !important;
    padding-left: 6px !important;
    padding-right: 10px !important;
  }
  html[data-ui-mode="active"] .logo-mark {
    width: calc(23px * (1 + (var(--ui-type-scale) - 1) * 0.5)) !important;
    height: calc(23px * (1 + (var(--ui-type-scale) - 1) * 0.5)) !important;
  }
  html[data-ui-mode="active"] #decision-label-btn {
    font-size: calc(16px * (1 + (var(--ui-type-scale) - 1) * 0.45)) !important;
    min-height: var(--chrome-control-h) !important;
    line-height: 1.2 !important;
  }
  html[data-ui-mode="active"] #decision-label-btn .dl-chevron {
    font-size: calc(14px * (1 + (var(--ui-type-scale) - 1) * 0.4)) !important;
  }
  html[data-ui-mode="active"] .setting-current { font-size: calc(13px * var(--ui-type-scale) / 1.1) !important; }

  /* Chat transcript — softer type, tighter rhythm */
  html[data-ui-mode="active"] #transcript-box {
    gap: var(--ui-space) !important;
    padding: calc(6px * var(--ui-type-scale) / 1.2) calc(4px * var(--ui-type-scale) / 1.2) !important;
  }
  html[data-ui-mode="active"] #transcript-box .msg,
  html[data-ui-mode="active"] .msg {
    padding: calc(10px * (0.9 + 0.1 * var(--ui-type-scale))) calc(12px * (0.9 + 0.1 * var(--ui-type-scale))) !important;
    max-width: calc(100% - 24px);
  }
  html[data-ui-mode="active"] .msg-text,
  html[data-ui-mode="active"] .msg .msg-text,
  html[data-ui-mode="active"] .msg .msg-text a {
    font-size: calc(16px * (1 + (var(--ui-type-scale) - 1) * 0.45)) !important;
    line-height: 1.45 !important;
  }
  html[data-ui-mode="active"] .msg-meta {
    font-size: calc(12px * (1 + (var(--ui-type-scale) - 1) * 0.35)) !important;
    margin-bottom: 4px;
  }
  html[data-ui-mode="active"] .msg-meta-badges button,
  html[data-ui-mode="active"] .msg button.msg-action,
  html[data-ui-mode="active"] .msg .copy-btn {
    min-height: calc(28px * var(--ui-touch-scale) / 1.15) !important;
    height: calc(28px * var(--ui-touch-scale) / 1.15) !important;
    width: calc(28px * var(--ui-touch-scale) / 1.15) !important;
    min-width: calc(28px * var(--ui-touch-scale) / 1.15) !important;
    padding: 0 !important;
  }
  /* Message edit / debug tools — scale editor + Empty|Delete|Debug (Cancel|Save). */
  html[data-ui-mode="active"] .msg.editing .msg-edit {
    font-size: calc(16px * (1 + (var(--ui-type-scale) - 1) * 0.45)) !important;
    line-height: 1.45 !important;
    padding: 12px 14px !important;
    min-height: calc(56px * (0.9 + 0.1 * var(--ui-type-scale))) !important;
  }
  html[data-ui-mode="active"] .msg.editing .msg-tools {
    gap: 9px !important;
  }
  html[data-ui-mode="active"] .msg.editing .msg-delete,
  html[data-ui-mode="active"] .msg.editing .msg-debug,
  html[data-ui-mode="active"] .msg.editing .msg-empty,
  html[data-ui-mode="active"] .msg.editing .msg-cancel,
  html[data-ui-mode="active"] .msg.editing .msg-save {
    height: calc(44px * (1 + (var(--ui-type-scale) - 1) * 0.28)) !important;
    min-height: calc(44px * (1 + (var(--ui-type-scale) - 1) * 0.28)) !important;
    min-width: calc(96px * (1 + (var(--ui-type-scale) - 1) * 0.12)) !important;
    padding: 0 14px !important;
    gap: 8px !important;
    font-size: calc(14px * (1 + (var(--ui-type-scale) - 1) * 0.35)) !important;
  }
  html[data-ui-mode="active"] .msg.editing .msg-delete svg,
  html[data-ui-mode="active"] .msg.editing .msg-debug svg,
  html[data-ui-mode="active"] .msg.editing .msg-empty svg,
  html[data-ui-mode="active"] .msg.editing .msg-cancel svg,
  html[data-ui-mode="active"] .msg.editing .msg-save svg,
  html[data-ui-mode="active"] .msg.editing .msg-delete .msg-action-trash {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
  }
  html[data-ui-mode="active"] .topic-debug-card {
    padding: calc(18px * (0.9 + 0.1 * var(--ui-type-scale))) !important;
    gap: calc(12px * (0.9 + 0.1 * var(--ui-type-scale))) !important;
  }
  html[data-ui-mode="active"] .topic-debug-head strong {
    font-size: calc(16px * (1 + (var(--ui-type-scale) - 1) * 0.35)) !important;
  }
  html[data-ui-mode="active"] .topic-debug-about,
  html[data-ui-mode="active"] .topic-debug-status {
    font-size: calc(15px * (1 + (var(--ui-type-scale) - 1) * 0.35)) !important;
    line-height: 1.4 !important;
  }
  html[data-ui-mode="active"] #topic-debug-input {
    font-size: calc(16px * (1 + (var(--ui-type-scale) - 1) * 0.4)) !important;
    line-height: 1.45 !important;
    padding: 14px !important;
    min-height: calc(100px * (0.9 + 0.1 * var(--ui-type-scale))) !important;
  }
  html[data-ui-mode="active"] .topic-debug-actions {
    gap: 10px !important;
  }
  html[data-ui-mode="active"] .topic-debug-actions button {
    min-height: calc(44px * (1 + (var(--ui-type-scale) - 1) * 0.28)) !important;
    font-size: calc(14px * (1 + (var(--ui-type-scale) - 1) * 0.35)) !important;
    padding: 0 14px !important;
  }
  html[data-ui-mode="active"] .topic-debug-actions button svg {
    width: 20px !important;
    height: 20px !important;
  }

  html[data-ui-mode="active"] .setting-detail-note,
  html[data-ui-mode="active"] .skill-toggle-copy small,
  html[data-ui-mode="active"] .limits-note,
  html[data-ui-mode="active"] .gemini-vad-note,
  html[data-ui-mode="active"] .sync-clear-block .setting-detail-note,
  html[data-ui-mode="active"] .cost-note,
  html[data-ui-mode="active"] .stats-reset-section p,
  html[data-ui-mode="active"] .modal-desc,
  html[data-ui-mode="active"] .tactic-focus {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Settings inner cards / lists — scale type + padding together */
  html[data-ui-mode="active"] .sync-log-list {
    gap: calc(8px * (0.85 + 0.15 * var(--ui-type-scale))) !important;
    margin-top: calc(12px * (0.9 + 0.1 * var(--ui-type-scale))) !important;
  }
  html[data-ui-mode="active"] .sync-log-item,
  html[data-ui-mode="active"] .sync-keys-summary {
    padding: calc(12px * (0.9 + 0.1 * var(--ui-type-scale))) calc(14px * (0.9 + 0.1 * var(--ui-type-scale))) !important;
    border-radius: 10px !important;
    font-size: calc(14px * (1 + (var(--ui-type-scale) - 1) * 0.55)) !important;
    line-height: 1.45 !important;
  }
  html[data-ui-mode="active"] .sync-log-head {
    margin-bottom: 6px !important;
    gap: 10px !important;
  }
  html[data-ui-mode="active"] .sync-log-head strong,
  html[data-ui-mode="active"] .sync-keys-summary strong {
    font-size: calc(15px * (1 + (var(--ui-type-scale) - 1) * 0.5)) !important;
    line-height: 1.3 !important;
  }
  html[data-ui-mode="active"] .sync-log-head time {
    font-size: calc(12px * (1 + (var(--ui-type-scale) - 1) * 0.45)) !important;
  }
  html[data-ui-mode="active"] .sync-log-keys,
  html[data-ui-mode="active"] .sync-log-empty {
    font-size: calc(13px * (1 + (var(--ui-type-scale) - 1) * 0.5)) !important;
    line-height: 1.4 !important;
  }
  html[data-ui-mode="active"] .sync-clear-block {
    margin-top: calc(16px * (0.9 + 0.1 * var(--ui-type-scale))) !important;
    padding-top: calc(14px * (0.9 + 0.1 * var(--ui-type-scale))) !important;
    gap: 12px !important;
  }
  html[data-ui-mode="active"] .sync-details { padding-top: calc(14px * (0.9 + 0.1 * var(--ui-type-scale))) !important; }
  html[data-ui-mode="active"] .setting-summary-sync .sync-summary-btn {
    min-height: calc(34px * var(--ui-touch-scale) / 1.1) !important;
    padding: 0 12px !important;
    font-size: calc(13px * (1 + (var(--ui-type-scale) - 1) * 0.4)) !important;
    gap: 8px !important;
  }
  html[data-ui-mode="active"] .setting-summary-sync .sync-summary-btn svg {
    width: 18px !important;
    height: 18px !important;
  }

  html[data-ui-mode="active"] .history-item {
    padding: calc(14px * (0.9 + 0.1 * var(--ui-type-scale))) calc(16px * (0.9 + 0.1 * var(--ui-type-scale))) !important;
    gap: calc(10px * (0.9 + 0.1 * var(--ui-type-scale))) !important;
  }
  html[data-ui-mode="active"] .history-item-label {
    font-size: calc(15px * (1 + (var(--ui-type-scale) - 1) * 0.55)) !important;
    line-height: 1.3 !important;
  }
  html[data-ui-mode="active"] .history-item-meta {
    font-size: calc(12px * (1 + (var(--ui-type-scale) - 1) * 0.5)) !important;
  }
  html[data-ui-mode="active"] .history-item-preview {
    font-size: calc(14px * (1 + (var(--ui-type-scale) - 1) * 0.5)) !important;
    line-height: 1.45 !important;
  }

  html[data-ui-mode="active"] .skill-toggle-row {
    padding: calc(14px * (0.9 + 0.1 * var(--ui-type-scale))) calc(16px * (0.9 + 0.1 * var(--ui-type-scale))) !important;
    gap: 14px !important;
  }
  html[data-ui-mode="active"] .skill-toggle-copy {
    gap: 4px !important;
  }
  html[data-ui-mode="active"] .skill-toggle-row input[type="checkbox"] {
    width: calc(18px * var(--ui-touch-scale) / 1.15) !important;
    height: calc(18px * var(--ui-touch-scale) / 1.15) !important;
  }

  html[data-ui-mode="active"] .limits-grid {
    gap: calc(16px * (0.9 + 0.1 * var(--ui-type-scale))) calc(20px * (0.9 + 0.1 * var(--ui-type-scale))) !important;
  }
  html[data-ui-mode="active"] .limits-grid .model-label,
  html[data-ui-mode="active"] .settings-list .limits-grid .model-label,
  html[data-ui-mode="active"] .model-label {
    font-size: calc(12px * (1 + (var(--ui-type-scale) - 1) * 0.55)) !important;
    margin-bottom: 4px !important;
  }
  html[data-ui-mode="active"] .gemini-vad-end,
  html[data-ui-mode="active"] .gemini-vad-note {
    font-size: calc(13px * (1 + (var(--ui-type-scale) - 1) * 0.45)) !important;
    line-height: 1.4 !important;
  }
  html[data-ui-mode="active"] .gemini-vad-row {
    padding-top: calc(10px * (0.9 + 0.1 * var(--ui-type-scale))) !important;
  }
  html[data-ui-mode="active"] .model-cost-rate {
    font-size: calc(15px * (1 + (var(--ui-type-scale) - 1) * 0.4)) !important;
  }
  html[data-ui-mode="active"] .voice-persona-copy strong {
    font-size: calc(15px * (1 + (var(--ui-type-scale) - 1) * 0.5)) !important;
  }
  html[data-ui-mode="active"] .voice-persona-copy small {
    font-size: calc(13px * (1 + (var(--ui-type-scale) - 1) * 0.45)) !important;
    line-height: 1.35 !important;
  }

  html[data-ui-mode="active"] .topic-picker-toggle {
    min-height: var(--chrome-control-h) !important;
    padding: 12px 14px !important;
    font-size: calc(16px * (1 + (var(--ui-type-scale) - 1) * 0.4)) !important;
  }
  html[data-ui-mode="active"] .topic-picker-option {
    padding: calc(12px * (0.9 + 0.1 * var(--ui-type-scale))) 14px !important;
    font-size: calc(15px * (1 + (var(--ui-type-scale) - 1) * 0.45)) !important;
  }
  html[data-ui-mode="active"] #topic-picker-search {
    padding: 12px 14px !important;
    font-size: calc(15px * (1 + (var(--ui-type-scale) - 1) * 0.4)) !important;
  }
  html[data-ui-mode="active"] .stats-section-heading h3 {
    font-size: calc(13px * (1 + (var(--ui-type-scale) - 1) * 0.45)) !important;
  }
  html[data-ui-mode="active"] .cost-total-value {
    font-size: calc(28px * (1 + (var(--ui-type-scale) - 1) * 0.35)) !important;
  }
  html[data-ui-mode="active"] .cost-total-label {
    font-size: calc(13px * (1 + (var(--ui-type-scale) - 1) * 0.4)) !important;
  }
  html[data-ui-mode="active"] .stats-reset-btn {
    min-height: var(--chrome-control-h) !important;
    font-size: calc(15px * (1 + (var(--ui-type-scale) - 1) * 0.4)) !important;
  }
  html[data-ui-mode="active"] .account-meta-row {
    font-size: calc(15px * (1 + (var(--ui-type-scale) - 1) * 0.4)) !important;
    line-height: 1.4 !important;
  }
  html[data-ui-mode="active"] .account-row-btn {
    min-height: calc(36px * var(--ui-touch-scale) / 1.15) !important;
    font-size: calc(13px * (1 + (var(--ui-type-scale) - 1) * 0.4)) !important;
    padding: 0 12px !important;
  }
  html[data-ui-mode="active"] .settings-list .setting-details,
  html[data-ui-mode="active"] .settings-list .setting-details-actions {
    padding: calc(16px * (0.9 + 0.1 * var(--ui-type-scale))) calc(16px * (0.9 + 0.1 * var(--ui-type-scale))) calc(18px * (0.9 + 0.1 * var(--ui-type-scale))) 52px !important;
    gap: calc(12px * (0.9 + 0.1 * var(--ui-type-scale))) !important;
  }
  html[data-ui-mode="active"] #stats-tactic-matrix {
    padding: calc(14px * (0.9 + 0.1 * var(--ui-type-scale))) !important;
  }
  html[data-ui-mode="active"] #topic-context-card {
    padding: calc(14px * (0.9 + 0.1 * var(--ui-type-scale))) !important;
  }
  html[data-ui-mode="active"] #topic-stage-line {
    font-size: calc(16px * (1 + (var(--ui-type-scale) - 1) * 0.4)) !important;
  }
  html[data-ui-mode="active"] #topic-blocker-line {
    font-size: calc(14px * (1 + (var(--ui-type-scale) - 1) * 0.4)) !important;
    line-height: 1.4 !important;
  }
  html[data-ui-mode="active"] .topic-blocker-btn {
    font-size: calc(13px * (1 + (var(--ui-type-scale) - 1) * 0.35)) !important;
    padding: 8px 12px !important;
  }
  html[data-ui-mode="active"] .tactic-phases {
    gap: 7px !important;
    margin-bottom: 12px !important;
  }
  html[data-ui-mode="active"] .tactic-phase {
    padding: 10px 5px !important;
    font-size: calc(12px * (1 + (var(--ui-type-scale) - 1) * 0.35)) !important;
    letter-spacing: .05em;
  }
  html[data-ui-mode="active"] .tactic-chips {
    gap: 7px !important;
    margin-bottom: 12px !important;
  }
  html[data-ui-mode="active"] .tactic-chip {
    padding: 6px 10px !important;
    font-size: calc(13px * (1 + (var(--ui-type-scale) - 1) * 0.35)) !important;
  }
  html[data-ui-mode="active"] .tactic-tension-row {
    grid-template-columns: minmax(96px, 118px) minmax(0, 1fr) 36px !important;
    gap: 8px !important;
  }
  html[data-ui-mode="active"] .tactic-tension-label,
  html[data-ui-mode="active"] .tactic-tension-pct {
    font-size: calc(13px * (1 + (var(--ui-type-scale) - 1) * 0.35)) !important;
  }
  html[data-ui-mode="active"] .tactic-tension-bar {
    height: 9px !important;
  }
  html[data-ui-mode="active"] .tactic-focus {
    font-size: calc(14px * (1 + (var(--ui-type-scale) - 1) * 0.35)) !important;
    line-height: 1.4 !important;
  }
  /* Usage date pills — keep compact so Yesterday/Today(+more) stay on one row. */
  html[data-ui-mode="active"] #cost-range-filter {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  html[data-ui-mode="active"] .cost-range-btn {
    flex: 0 0 auto !important;
    min-height: 32px !important;
    height: auto !important;
    padding: 5px 10px !important;
    font-size: calc(12px * (1 + (var(--ui-type-scale) - 1) * 0.25)) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  html[data-ui-mode="active"] .notif-list .notif-item,
  html[data-ui-mode="active"] #notif-drawer-body .notif-item {
    padding: calc(12px * (0.9 + 0.1 * var(--ui-type-scale))) calc(14px * (0.9 + 0.1 * var(--ui-type-scale))) !important;
    font-size: calc(15px * (1 + (var(--ui-type-scale) - 1) * 0.4)) !important;
    line-height: 1.4 !important;
  }
  html[data-ui-mode="active"] .share-activity-list .share-activity-item,
  html[data-ui-mode="active"] #share-activity-list > * {
    font-size: calc(14px * (1 + (var(--ui-type-scale) - 1) * 0.45)) !important;
    line-height: 1.4 !important;
  }
  html[data-ui-mode="active"] .share-sync-warn p {
    font-size: calc(17px * (1 + (var(--ui-type-scale) - 1) * 0.35)) !important;
  }
  html[data-ui-mode="active"] .share-sync-warn-icon,
  html[data-ui-mode="active"] .share-sync-warn > svg {
    width: calc(36px * (1 + (var(--ui-touch-scale) - 1) * 0.35)) !important;
    height: calc(36px * (1 + (var(--ui-touch-scale) - 1) * 0.35)) !important;
    flex-basis: calc(36px * (1 + (var(--ui-touch-scale) - 1) * 0.35)) !important;
  }
  html[data-ui-mode="active"] .share-topic-card-title {
    font-size: calc(16px * (1 + (var(--ui-type-scale) - 1) * 0.4)) !important;
  }
  html[data-ui-mode="active"] .share-topic-card-hint,
  html[data-ui-mode="active"] .share-note-label,
  html[data-ui-mode="active"] .publish-option-state {
    font-size: calc(13px * (1 + (var(--ui-type-scale) - 1) * 0.4)) !important;
  }
  html[data-ui-mode="active"] .publish-option {
    min-height: calc(48px * (0.9 + 0.1 * var(--ui-touch-scale))) !important;
    font-size: calc(16px * (1 + (var(--ui-type-scale) - 1) * 0.4)) !important;
    padding: 0 14px !important;
  }

  /* Generic touch targets — never use height:auto on chrome icon buttons */
  html[data-ui-mode="active"] .setting-action-btn,
  html[data-ui-mode="active"] .sync-summary-btn,
  html[data-ui-mode="active"] .model-options .model-opt,
  html[data-ui-mode="active"] .model-options .llm-opt,
  html[data-ui-mode="active"] .skill-toggle-row,
  html[data-ui-mode="active"] .filter-pill,
  html[data-ui-mode="active"] input[type="search"]:not(#chat-input),
  html[data-ui-mode="active"] input[type="text"]:not(#chat-input),
  html[data-ui-mode="active"] input[type="email"],
  html[data-ui-mode="active"] input[type="url"],
  html[data-ui-mode="active"] input:not([type]):not(#chat-input),
  html[data-ui-mode="active"] textarea:not(#chat-input) {
    min-height: var(--ui-control-min) !important;
    box-sizing: border-box;
  }
  html[data-ui-mode="active"] .setting-summary {
    min-height: calc(56px * var(--ui-touch-scale) / 1.1) !important;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  html[data-ui-mode="active"] .setting-current {
    min-height: calc(34px * var(--ui-touch-scale) / 1.1) !important;
    max-width: min(210px, 48vw);
  }
  html[data-ui-mode="active"] .model-options.voice-persona-options .model-opt {
    min-height: calc(58px * var(--ui-touch-scale) / 1.15) !important;
    height: auto !important;
  }

  /* Brand bar + modal/drawer chrome — same fixed bar height */
  html[data-ui-mode="active"] #topbar {
    height: calc(var(--chrome-bar-h) + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(var(--chrome-bar-h) + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: 12px;
    padding-right: 12px;
    align-items: center !important;
  }
  html[data-ui-mode="active"] #main {
    margin-bottom: calc(var(--chrome-bar-h) + env(safe-area-inset-bottom, 0px)) !important;
    height: calc(100dvh - var(--chrome-bar-h) - env(safe-area-inset-bottom, 0px)) !important;
  }
  html[data-ui-mode="active"] .drawer-header,
  html[data-ui-mode="active"] .modal-header {
    height: var(--chrome-bar-h) !important;
    min-height: var(--chrome-bar-h) !important;
    box-sizing: border-box;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center;
  }
  html[data-ui-mode="active"] .settings-tab-footer,
  html[data-ui-mode="active"] .artefact-modal-footer,
  html[data-ui-mode="active"] .circle-modal-footer,
  html[data-ui-mode="active"] .history-modal-footer,
  html[data-ui-mode="active"] .notif-modal-footer,
  html[data-ui-mode="active"] .publish-modal-footer,
  html[data-ui-mode="active"] .topics-modal-footer,
  html[data-ui-mode="active"] .tech-log-modal-footer,
  html[data-ui-mode="active"] .self-modal-footer,
  html[data-ui-mode="active"] .media-modal-footer,
  html[data-ui-mode="active"] .project-modal-footer,
  html[data-ui-mode="active"] .share-modal-footer,
  html[data-ui-mode="active"] .links-modal-footer {
    height: calc(var(--chrome-bar-h) + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(var(--chrome-bar-h) + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(var(--chrome-bar-h) + env(safe-area-inset-bottom, 0px)) !important;
    padding-top: var(--ui-chrome-pad-y) !important;
    padding-bottom: calc(var(--ui-chrome-pad-y) + env(safe-area-inset-bottom, 0px)) !important;
    gap: 8px;
    box-sizing: border-box;
    align-items: center !important;
    overflow: hidden;
  }
  /* Artefact: one stable row — soft icon WIDTH so Templates fits; full chrome HEIGHT. */
  html[data-ui-mode="active"] #modal-artefact .artefact-modal-footer {
    overflow: visible !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  html[data-ui-mode="active"] #modal-artefact #artefact-instruction-row {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-width: 0 !important;
    gap: 6px !important;
  }
  html[data-ui-mode="active"] #modal-artefact #artefact-instr-templates-btn {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 6.75rem !important;
    max-width: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  html[data-ui-mode="active"] #modal-artefact #artefact-instr-templates-btn .artefact-control-label {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  html[data-ui-mode="active"] #artefact-stale-bar.visible {
    position: relative;
    z-index: 25;
    flex-shrink: 0;
    box-sizing: border-box;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 10px;
  }
  html[data-ui-mode="active"] .settings-tab,
  html[data-ui-mode="active"] .settings-footer-close,
  html[data-ui-mode="active"] .circle-footer-close,
  html[data-ui-mode="active"] .topics-modal-close-footer,
  html[data-ui-mode="active"] .artefact-modal-close-footer,
  html[data-ui-mode="active"] .publish-modal-close-footer,
  html[data-ui-mode="active"] .history-modal-close-footer,
  html[data-ui-mode="active"] .history-footer-btn,
  html[data-ui-mode="active"] .circle-modal-footer .circle-add-trigger,
  html[data-ui-mode="active"] .circle-modal-footer .circle-voice-trigger,
  html[data-ui-mode="active"] .self-footer-actions button {
    min-height: var(--chrome-control-h) !important;
    height: var(--chrome-control-h) !important;
    max-height: var(--chrome-control-h) !important;
    box-sizing: border-box !important;
  }
  html[data-ui-mode="active"] .settings-footer-close,
  html[data-ui-mode="active"] .circle-footer-close,
  html[data-ui-mode="active"] .topics-modal-close-footer,
  html[data-ui-mode="active"] .artefact-modal-close-footer,
  html[data-ui-mode="active"] .publish-modal-close-footer,
  html[data-ui-mode="active"] .history-modal-close-footer {
    width: var(--chrome-control-h) !important;
    min-width: var(--chrome-control-h) !important;
    flex: 0 0 var(--chrome-control-h) !important;
    padding: 0 !important;
  }
  html[data-ui-mode="active"] .settings-tab {
    flex: 0 0 var(--chrome-control-h) !important;
    flex-basis: var(--chrome-control-h) !important;
    width: var(--chrome-control-h) !important;
    min-width: var(--chrome-control-h) !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  html[data-ui-mode="active"] .settings-tab.active {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 108px !important;
    padding: 0 14px !important;
    gap: 8px !important;
  }
  html[data-ui-mode="active"] .settings-tab svg,
  html[data-ui-mode="active"] .settings-footer-close svg {
    width: 22px; height: 22px; flex-basis: 22px;
  }

  /*
   * Beat the global `#modal-… footer button { height:42/46px !important }` lock.
   * Footer chrome height is already correct — buttons must match --chrome-control-h.
   */
  html[data-ui-mode="active"] #modal-circle .circle-modal-footer button,
  html[data-ui-mode="active"] #modal-self .self-modal-footer button,
  html[data-ui-mode="active"] #modal-circle #self-group-form-btns button,
  html[data-ui-mode="active"] #modal-self #self-group-form-btns button,
  html[data-ui-mode="active"] #modal-decisions .topics-modal-footer button,
  html[data-ui-mode="active"] #modal-artefact .artefact-modal-footer button,
  html[data-ui-mode="active"] #modal-publish .publish-modal-footer button,
  html[data-ui-mode="active"] #modal-share .share-modal-footer button,
  html[data-ui-mode="active"] #modal-media .media-modal-footer button,
  html[data-ui-mode="active"] #modal-project .project-modal-footer button,
  html[data-ui-mode="active"] #modal-history .history-modal-footer button,
  html[data-ui-mode="active"] #modal-links .links-modal-footer button,
  html[data-ui-mode="active"] #notif-drawer .notif-modal-footer button,
  html[data-ui-mode="active"] #logs-drawer .settings-tab-footer button,
  html[data-ui-mode="active"] .tech-log-modal-footer button,
  html[data-ui-mode="active"] #modal-artefact #artefact-pin-btn,
  html[data-ui-mode="active"] #modal-artefact #artefact-history-btn,
  html[data-ui-mode="active"] #modal-artefact #artefact-topic-btn,
  html[data-ui-mode="active"] #modal-artefact #artefact-copy-output-btn,
  html[data-ui-mode="active"] #modal-artefact #artefact-publish-btn,
  html[data-ui-mode="active"] #modal-project #new-proj-form-btns button,
  html[data-ui-mode="active"] #modal-project .project-modal-return-btn,
  html[data-ui-mode="active"] #modal-project .project-modal-new-btn {
    box-sizing: border-box !important;
    height: var(--chrome-control-h) !important;
    min-height: var(--chrome-control-h) !important;
    max-height: var(--chrome-control-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: calc(15px * (1 + (var(--ui-type-scale) - 1) * 0.45)) !important;
  }
  html[data-ui-mode="active"] #modal-decisions .topics-modal-close-footer,
  html[data-ui-mode="active"] #modal-artefact .artefact-modal-close-footer,
  html[data-ui-mode="active"] #modal-publish .publish-modal-close-footer,
  html[data-ui-mode="active"] #modal-share .topics-modal-close-footer,
  html[data-ui-mode="active"] #modal-history .history-modal-close-footer,
  html[data-ui-mode="active"] #modal-artefact #artefact-pin-btn,
  html[data-ui-mode="active"] #modal-artefact #artefact-history-btn,
  html[data-ui-mode="active"] #modal-artefact #artefact-topic-btn,
  html[data-ui-mode="active"] #modal-artefact #artefact-copy-output-btn,
  html[data-ui-mode="active"] #modal-artefact #artefact-publish-btn,
  html[data-ui-mode="active"] #modal-artefact .artefact-modal-close-footer,
  html[data-ui-mode="active"] #modal-circle .circle-footer-close,
  html[data-ui-mode="active"] #modal-circle .circle-voice-trigger {
    width: var(--chrome-control-h) !important;
    min-width: var(--chrome-control-h) !important;
    max-width: var(--chrome-control-h) !important;
    flex: 0 0 var(--chrome-control-h) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 0 !important;
  }
  /* Artefact icon chrome: softer WIDTH so Templates keeps its label; full Active HEIGHT. */
  html[data-ui-mode="active"] #modal-artefact .artefact-modal-close-footer,
  html[data-ui-mode="active"] #modal-artefact #artefact-topic-btn,
  html[data-ui-mode="active"] #modal-artefact #artefact-pin-btn,
  html[data-ui-mode="active"] #modal-artefact #artefact-history-btn,
  html[data-ui-mode="active"] #modal-artefact #artefact-copy-output-btn,
  html[data-ui-mode="active"] #modal-artefact #artefact-publish-btn {
    --artefact-icon-btn: calc(42px * (1 + (var(--ui-touch-scale) - 1) * 0.35));
    width: var(--artefact-icon-btn) !important;
    min-width: var(--artefact-icon-btn) !important;
    max-width: var(--artefact-icon-btn) !important;
    flex: 0 0 var(--artefact-icon-btn) !important;
    height: var(--chrome-control-h) !important;
    min-height: var(--chrome-control-h) !important;
    max-height: var(--chrome-control-h) !important;
  }
  html[data-ui-mode="active"] #modal-artefact #artefact-instr-templates-btn {
    width: auto !important;
    min-width: 6.75rem !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    height: var(--chrome-control-h) !important;
    min-height: var(--chrome-control-h) !important;
    max-height: var(--chrome-control-h) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 6px !important;
    font-size: calc(14px * (1 + (var(--ui-type-scale) - 1) * 0.28)) !important;
  }
  html[data-ui-mode="active"] #modal-artefact .artefact-stale-update {
    height: calc(36px * (0.9 + 0.1 * var(--ui-touch-scale))) !important;
    min-height: calc(36px * (0.9 + 0.1 * var(--ui-touch-scale))) !important;
    max-height: none !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: calc(14px * (1 + (var(--ui-type-scale) - 1) * 0.35)) !important;
  }
  html[data-ui-mode="active"] #modal-decisions .topics-modal-footer .modal-new-btn,
  html[data-ui-mode="active"] #modal-publish .publish-parent-btn,
  html[data-ui-mode="active"] #modal-project .project-modal-return-btn,
  html[data-ui-mode="active"] #modal-project .project-modal-new-btn,
  html[data-ui-mode="active"] #modal-project #new-proj-form-btns button,
  html[data-ui-mode="active"] #modal-history .history-footer-btn,
  html[data-ui-mode="active"] #modal-media .media-modal-footer button,
  html[data-ui-mode="active"] #modal-share .share-modal-footer button:not(.topics-modal-close-footer):not(.share-footer-icon-btn) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  html[data-ui-mode="active"] #modal-artefact .artefact-modal-footer .artefact-control-icon,
  html[data-ui-mode="active"] #modal-artefact .artefact-modal-footer .copy-icon,
  html[data-ui-mode="active"] #modal-publish .publish-modal-footer svg,
  html[data-ui-mode="active"] #modal-publish .publish-modal-footer i,
  html[data-ui-mode="active"] #modal-history .history-modal-footer svg,
  html[data-ui-mode="active"] #modal-decisions .topics-modal-footer svg,
  html[data-ui-mode="active"] #modal-project .project-modal-footer svg {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
  }
  /* Topics / projects search row — match taller footer controls */
  html[data-ui-mode="active"] #modal-decisions .decision-search,
  html[data-ui-mode="active"] #modal-project .project-modal-search,
  html[data-ui-mode="active"] #modal-decisions .filter-pill {
    height: var(--chrome-control-h) !important;
    min-height: var(--chrome-control-h) !important;
    font-size: calc(16px * (1 + (var(--ui-type-scale) - 1) * 0.4)) !important;
  }
  html[data-ui-mode="active"] #modal-history .history-item-actions button {
    min-height: var(--chrome-control-h) !important;
    height: var(--chrome-control-h) !important;
    font-size: calc(14px * (1 + (var(--ui-type-scale) - 1) * 0.4)) !important;
    padding: 0 12px !important;
  }
  html[data-ui-mode="active"] #modal-history .history-item-actions .history-action-icon {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }

  /* Brand-bar controls — identical squares */
  html[data-ui-mode="active"] #talk-btn,
  html[data-ui-mode="active"] #chat-btn,
  html[data-ui-mode="active"] #notif-btn,
  html[data-ui-mode="active"] #mute-btn,
  html[data-ui-mode="active"] .tb-actions .utility-button {
    width: var(--chrome-control-h) !important;
    min-width: var(--chrome-control-h) !important;
    height: var(--chrome-control-h) !important;
    min-height: var(--chrome-control-h) !important;
    max-height: var(--chrome-control-h) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  html[data-ui-mode="active"] #talk-btn .talk-icon,
  html[data-ui-mode="active"] #talk-btn .talk-icon svg,
  html[data-ui-mode="active"] #chat-btn svg,
  html[data-ui-mode="active"] #mute-btn svg,
  html[data-ui-mode="active"] #notif-btn svg,
  html[data-ui-mode="active"] .tb-actions .utility-button svg {
    width: calc(22px * (1 + (var(--ui-touch-scale) - 1) * 0.45)) !important;
    height: calc(22px * (1 + (var(--ui-touch-scale) - 1) * 0.45)) !important;
  }
  html[data-ui-mode="active"] .drawer-header .copy-btn {
    width: var(--chrome-control-h) !important;
    min-width: var(--chrome-control-h) !important;
    height: var(--chrome-control-h) !important;
    min-height: var(--chrome-control-h) !important;
  }

  /* Chat composer — same row height + chrome pad as modal footers */
  html[data-ui-mode="active"] #chat-composer-home {
    border-top: 1px solid #e5e2db;
  }
  html[data-ui-mode="active"] #chat-composer {
    align-items: center !important;
    padding: var(--ui-chrome-pad-y) 8px calc(var(--ui-chrome-pad-y) + env(safe-area-inset-bottom, 0px)) !important;
    gap: 8px !important;
  }
  html[data-ui-mode="active"] #chat-composer #chat-close-btn,
  html[data-ui-mode="active"] #chat-composer #chat-attach-btn,
  html[data-ui-mode="active"] #chat-composer #chat-send-btn:not([hidden]) {
    width: var(--chat-row-h) !important;
    min-width: var(--chat-row-h) !important;
    height: var(--chat-row-h) !important;
    min-height: var(--chat-row-h) !important;
    max-height: var(--chat-row-h) !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    gap: 0 !important;
    font-size: 0 !important;
  }
  /* Active display:grid !important must not override [hidden] (Office hides send on load). */
  html[data-ui-mode="active"] #chat-composer #chat-send-btn[hidden] {
    display: none !important;
  }
  /* Send = icon only (no "Send" label), same square as close/attach. */
  html[data-ui-mode="active"] #chat-composer.is-expanded #chat-send-btn:not([hidden]) {
    width: var(--chat-row-h) !important;
    min-width: var(--chat-row-h) !important;
    max-width: var(--chat-row-h) !important;
    justify-self: end !important;
  }
  html[data-ui-mode="active"] #chat-composer #chat-send-btn.is-cta::after {
    content: none !important;
    display: none !important;
  }
  html[data-ui-mode="active"] #chat-composer #chat-send-btn svg {
    width: 22px !important;
    height: 22px !important;
  }
  html[data-ui-mode="active"] #chat-composer #chat-voice-cluster {
    height: var(--chat-row-h) !important;
    min-height: var(--chat-row-h) !important;
    max-height: var(--chat-row-h) !important;
    align-items: stretch !important;
    align-self: center !important;
    box-sizing: border-box !important;
  }
  /* Collapsed: compact equal mic|mute so Reply stays visible. */
  html[data-ui-mode="active"] #chat-composer:not(.is-expanded) #chat-voice-cluster {
    width: calc(var(--chat-row-h) * 2 + 1px) !important;
    min-width: calc(var(--chat-row-h) * 2 + 1px) !important;
    max-width: calc(var(--chat-row-h) * 2 + 1px) !important;
  }
  html[data-ui-mode="active"] #chat-composer:not(.is-expanded) #chat-voice-cluster button {
    width: var(--chat-row-h) !important;
    min-width: var(--chat-row-h) !important;
    max-width: var(--chat-row-h) !important;
    flex: 0 0 var(--chat-row-h) !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    font-size: 0 !important;
  }
  /* Expanded: input above — voice cluster fills leftover row; mic|mute equal. */
  html[data-ui-mode="active"] #chat-composer.is-expanded {
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    align-items: center !important;
  }
  html[data-ui-mode="active"] #chat-composer.is-expanded #chat-voice-cluster {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
  html[data-ui-mode="active"] #chat-composer.is-expanded #chat-voice-cluster button,
  html[data-ui-mode="active"] #chat-composer.is-expanded #chat-voice-state,
  html[data-ui-mode="active"] #chat-composer.is-expanded #chat-voice-mute,
  html[data-ui-mode="active"] #chat-composer.voice-live.is-expanded #chat-voice-state {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 0 !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    font-size: 0 !important;
  }
  html[data-ui-mode="active"] #chat-composer #chat-voice-cluster button {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    font-size: 0 !important;
  }
  /* Icon-only mic (no Stop/Voice label) — keeps Reply field readable. */
  html[data-ui-mode="active"] #chat-composer #chat-voice-state.is-cta {
    width: var(--chat-row-h) !important;
    min-width: var(--chat-row-h) !important;
    flex: 0 0 var(--chat-row-h) !important;
    padding: 0 !important;
  }
  html[data-ui-mode="active"] #chat-composer.is-expanded #chat-voice-state.is-cta {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }
  html[data-ui-mode="active"] #chat-composer #chat-voice-state.is-cta::after {
    content: none !important;
    display: none !important;
  }
  html[data-ui-mode="active"] #chat-composer #chat-voice-mute .chat-voice-mute-glyph {
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }
  html[data-ui-mode="active"] #chat-composer #chat-voice-cluster button svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
  }
  html[data-ui-mode="active"] #chat-composer #chat-close-btn svg,
  html[data-ui-mode="active"] #chat-composer #chat-attach-btn svg {
    width: 22px !important;
    height: 22px !important;
  }
  html[data-ui-mode="active"] #chat-composer:not(.is-expanded) #chat-input-shell {
    height: var(--chat-row-h) !important;
    min-height: var(--chat-row-h) !important;
    max-height: var(--chat-row-h) !important;
    align-items: stretch !important;
    min-width: 0 !important;
  }
  html[data-ui-mode="active"] #chat-composer:not(.is-expanded) #chat-input {
    height: var(--chat-row-h) !important;
    min-height: var(--chat-row-h) !important;
    max-height: var(--chat-row-h) !important;
    line-height: calc(var(--chat-row-h) - 2px) !important;
    padding: 0 14px !important;
    font-size: calc(16px * (1 + (var(--ui-type-scale) - 1) * 0.75)) !important;
    box-sizing: border-box !important;
  }
  html[data-ui-mode="active"] #chat-composer.is-expanded #chat-input {
    font-size: calc(16px * (1 + (var(--ui-type-scale) - 1) * 0.75)) !important;
    line-height: 1.4 !important;
    min-height: calc(var(--chat-row-h) + 8px) !important;
    padding: 12px 42px 12px 14px !important;
  }
  /* Collapsed voice-live: fixed equal mic|mute pair — leave room for Reply. */
  html[data-ui-mode="active"] #chat-composer.voice-live:not(.is-expanded) {
    grid-template-columns: auto calc(var(--chat-row-h) * 2 + 1px) minmax(0, 1fr) auto !important;
  }
  html[data-ui-mode="active"] #chat-composer.voice-live.is-expanded,
  html[data-ui-mode="active"] #chat-composer.is-expanded:not(.voice-live) {
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
  }
  html[data-ui-mode="active"] #chat-composer.voice-live:not(.is-expanded) #chat-voice-cluster {
    width: calc(var(--chat-row-h) * 2 + 1px) !important;
    min-width: calc(var(--chat-row-h) * 2 + 1px) !important;
  }

  html[data-ui-mode="active"] .venn-begin {
    width: calc(148px * (0.9 + 0.1 * var(--ui-type-scale))) !important;
    height: calc(148px * (0.9 + 0.1 * var(--ui-type-scale))) !important;
    min-height: 0 !important;
    font-size: calc(21px * (1 + (var(--ui-type-scale) - 1) * 0.4)) !important;
  }
}