/* messages.css — message bubbles, work container, tools, typing indicator */

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

  /* Messages */
  .messages { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
  .msg { max-width: 78%; padding: 12px 18px; border-radius: 18px; font-size: calc(16px * var(--font-scale)); line-height: 1.65; word-break: break-word; }
  .msg.user { align-self: flex-end; background: var(--user-msg-bg); color: var(--user-msg-text); border: 1px solid var(--user-msg-border); border-bottom-right-radius: 4px; white-space: pre-wrap; box-shadow: var(--shadow-sm); font-weight: 600; }
  .msg.assistant { align-self: flex-start; background: #191928; border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); border: 1px solid var(--surface); }
  html.light .msg.assistant { background: var(--surface); border-color: transparent; }
  .msg.error { align-self: center; background: transparent; color: var(--error); font-size: calc(14px * var(--font-scale)); border-radius: 8px; }
  .msg.welcome { background: var(--surface); border: none; border-top: 3px solid var(--accent); box-shadow: var(--shadow-md); max-width: min(900px, 90%); margin: 2rem auto; align-self: center; padding: 2rem 2.5rem; border-radius: var(--radius-lg); }
  .msg.welcome ul, .msg.welcome ol { padding-left: 2rem; }
  .msg.assistant code { background: var(--bg); padding: 2px 5px; border-radius: 3px; font-size: calc(14px * var(--font-scale)); font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace; }
  .msg.assistant pre { background: var(--bg); padding: 16px; border-radius: var(--radius-md); overflow-x: auto; margin: 10px 0; border: 1px solid var(--border); box-shadow: inset 0 1px 3px rgba(0,0,0,0.04); }
  .msg.assistant .work-container > .work-content > .thinking-block pre { background: none; padding: 6px 8px; border: none; margin: 0; }
  .msg.assistant pre code { background: none; padding: 0; border: none; font-size: calc(14px * var(--font-scale)); font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace; }
  .msg.assistant a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
  .msg.assistant strong { color: var(--strong); }
  .msg.assistant em { color: var(--em); }
  .msg.assistant h1, .msg.assistant h2, .msg.assistant h3, .msg.assistant h4 { color: var(--accent); margin: 12px 0 6px; font-size: calc(16px * var(--font-scale)); }
  .msg.assistant h1 { font-size: calc(20px * var(--font-scale)); }
  .msg.assistant h2 { font-size: calc(18px * var(--font-scale)); }
  .msg.assistant ul, .msg.assistant ol { padding-left: 20px; margin: 6px 0; }
  .msg.assistant li { margin: 3px 0; }
  .msg.assistant blockquote { border-left: 3px solid var(--accent); padding-left: 10px; margin: 6px 0; color: var(--text-dim); }
  .msg.assistant table { border-collapse: separate; border-spacing: 0; margin: 12px 0; width: 100%; font-size: calc(14.5px * var(--font-scale)); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
  .msg.assistant th, .msg.assistant td { border: none; border-bottom: 1px solid var(--border); padding: 10px 14px; text-align: left; }
  .msg.assistant th { background: var(--accent-subtle); color: var(--accent); font-size: calc(12px * var(--font-scale)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 2px solid var(--border); }
  .msg.assistant tr:nth-child(even) td { background: var(--surface2); }
  .msg.assistant tbody tr:last-child td { border-bottom: none; }
  .msg.assistant tbody tr:hover td { background: var(--chip-bg-hover); }
  .msg.assistant hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; }
  .msg.assistant p { margin: 6px 0; }
  .msg.assistant p:first-child { margin-top: 0; }
  .msg.assistant p:last-child { margin-bottom: 0; }
  .msg.assistant { position: relative; padding-bottom: 28px; }
  @keyframes msg-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  .msg-group { display: flex; flex-direction: column; max-width: 78%; animation: msg-enter 0.3s ease-out; }
  .msg-group.user { align-self: flex-end; }
  .msg-group.assistant { align-self: flex-start; }
  .msg-group.error { align-self: center; }
  .msg-group > .msg { max-width: 100%; align-self: auto; }
  .msg-meta { font-size: calc(13px * var(--font-scale)); color: var(--text-dim); margin-top: 2px; padding: 0 4px; font-style: italic; }
  .msg-group.user .msg-meta { text-align: right; }
  .msg-copy-btn { position: absolute; bottom: 6px; right: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 6px; font-family: inherit; font-size: 12px; color: var(--text-dim); cursor: pointer; opacity: 0.6; transition: all 0.2s ease; }
  .msg-copy-btn:hover { opacity: 1; border-color: var(--accent); color: var(--accent); }
  .msg-copy-btn.copied { opacity: 1; border-color: var(--success); color: var(--success); }
  /* Rich streaming protocol UI */
  .tool-call {
      border: 1px solid transparent;
      border-radius: var(--radius-md);
      padding: 4px 12px;
      margin: 1px 0;
      font-size: 13px;
      font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  }
  .work-content > .tool-call.active,
  .tool-call.active { animation: tool-pulse 2s ease-in-out infinite; }
  .tool-call.active .tool-icon { display: inline-block; animation: tool-spin 1s linear infinite; }
  @keyframes tool-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  @keyframes tool-pulse { 0%, 100% { border-color: var(--accent); } 50% { border-color: var(--border); } }
  .work-content > .tool-call.completed,
  .tool-call.completed { animation: none; opacity: 0.85; transition: opacity 0.5s ease, border-color 0.5s ease; }
  .tool-call-header { display: flex; align-items: center; gap: 6px; }
  .tool-call-header .tool-icon { font-size: 14px; }
  .tool-call-header .tool-name { font-weight: 600; color: var(--accent); white-space: nowrap; }
  .tool-call-header .tool-detail { color: var(--text-dim); font-size: 12px; }
  .tool-call-body { margin-top: 4px; }
  .tool-call-body pre { margin: 0; padding: 6px 8px; background: var(--bg); border-radius: 4px; font-size: 12px; overflow-x: auto; position: relative; }
  .tool-call-body pre code { font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace; white-space: pre-wrap; word-break: break-all; }
  .tool-call-body .tool-copy-btn { position: absolute; top: 4px; right: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; font-size: 11px; color: var(--text-dim); cursor: pointer; opacity: 0; transition: opacity 0.2s; }
  .tool-call-body pre:hover .tool-copy-btn { opacity: 0.7; }
  .tool-call-body .tool-copy-btn:hover { opacity: 1; color: var(--accent); border-color: var(--accent); }
  .tool-call-body .tool-copy-btn.copied { opacity: 1; color: var(--success); border-color: var(--success); }

  .work-container {
      margin: 0 0 8px 0;
      border: 1px solid rgba(95, 182, 72, 0.15);
      border-radius: var(--radius-md);
      background: rgba(95, 182, 72, 0.04);
      overflow: hidden;
      /* height managed by ResizeObserver, no transition to avoid scroll-up effect */
  }
  html.light .work-container { background: rgba(95, 182, 72, 0.07); border-color: rgba(95, 182, 72, 0.2); }
  .work-container summary {
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 400;
      color: var(--text-dim);
      cursor: pointer;
      user-select: none;
      list-style: none;
      opacity: 0.75;
      transition: opacity 0.2s;
  }
  .work-container summary:hover { opacity: 1; }
  .work-container.streaming[open] summary { display: none; }
  .work-container:not([open]) summary::before { content: '\25B8\2002'; }
  .work-container[open] summary::before { content: '\25BE\2002'; }
  .work-container .work-content { padding: 4px 10px 8px; }
  @keyframes slide-in { from { opacity: 0; } to { opacity: 1; } }
  .work-content > .thinking-block,
  .work-content > .tool-call,
  .work-content > .subagent-section { animation: slide-in 0.3s ease-out; }
  .thinking-block {
      color: var(--text-dim);
      font-style: italic;
      padding: 4px 0;
      font-size: 15px;
      line-height: 1.6;
      white-space: pre-wrap;
  }

  .subagent-section {
      margin-left: 16px;
      padding-left: 12px;
      border-left: 2px solid var(--accent);
      margin-top: 4px;
      margin-bottom: 4px;
  }
  .subagent-title {
      font-size: 12px;
      color: var(--text-dim);
      margin-bottom: 4px;
      font-weight: 600;
  }
  .subagent-section.collapsed > :not(.subagent-title) { display: none; }

  .turn-separator { border: none; border-top: 1px solid var(--border); margin: 8px 0; opacity: 0.5; }
  .output-files { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
  .output-file-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--chip-bg); border-radius: var(--radius-sm); padding: 4px 10px; font-size: 13px; color: var(--accent); text-decoration: none; border: 1px solid var(--border); transition: all 0.2s ease; }
  .output-file-chip:hover { background: var(--chip-bg-hover); border-color: var(--accent); transform: translateY(-1px); }
  .output-file-chip .file-icon { font-size: 13px; }
  .output-file-chip .file-size { color: var(--text-dim); font-size: 12px; }
  .svg-preview { max-width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 12px; margin-bottom: 6px; background: var(--bg); display: block; cursor: zoom-in; }
  .media-preview-audio { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 6px; }
  .media-preview-audio audio { flex: 1; max-width: 100%; }
  .media-preview-image { display: block; max-width: 100%; max-height: 240px; border-radius: 6px; cursor: zoom-in; margin-bottom: 6px; }
  /* Download widget */
  .download-widget { margin-top: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 8px); }
  .download-widget-header { font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; }
  .download-widget-files { display: flex; gap: 6px; flex-wrap: wrap; }
  .msg.assistant .download-all-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 14px; background: var(--chip-bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm, 4px); font-size: 13px; font-weight: 500; text-decoration: none; transition: background 0.15s; cursor: pointer; }
  .msg.assistant .download-all-btn:hover { background: var(--chip-bg-hover); }
  .download-widget-expired .download-widget-header { color: var(--text-dim); }
  .output-file-chip-expired { color: var(--text-dim); cursor: not-allowed; opacity: 0.55; text-decoration: line-through; }
  .output-file-chip-expired:hover { background: var(--chip-bg); border-color: var(--border); transform: none; }
  .msg.assistant .download-all-btn-expired { color: var(--text-dim); cursor: not-allowed; opacity: 0.55; text-decoration: line-through; }
  .msg.assistant .download-all-btn-expired:hover { background: var(--chip-bg); }
  .msg.assistant img { max-width: 100%; border-radius: 4px; }
  .msg.assistant details { margin: 6px 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
  .msg.assistant details summary { padding: 8px 12px; cursor: pointer; font-size: 14px; background: var(--bg); user-select: none; }
  .msg.assistant details summary:hover { background: var(--surface); }
  .msg.assistant details summary b { color: var(--accent); }
  .msg.assistant details summary em { color: var(--error); }
  .msg.assistant details > pre, .msg.assistant details > p { margin: 0; border-top: 1px solid var(--border); }
  .msg.assistant details > pre { border-radius: 0; border: none; }
  .msg.assistant details[open] summary { border-bottom: 1px solid var(--border); }

  /* Mermaid diagrams */
  .mermaid { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; margin: 8px 0; overflow-x: auto; }
  .mermaid svg { max-width: 100% !important; width: 100% !important; height: auto !important; }
  .msg.assistant:has(.mermaid), .msg.assistant:has(.drawio-container) { max-width: 100%; width: 100%; }
  /* Chart.js */
  .chart-container { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; margin: 8px 0; max-width: 600px; }
  .chart-error { color: var(--error); font-size: 14px; padding: 8px; background: rgba(255,167,38,0.1); border-radius: 4px; margin: 8px 0; }
  /* Sortable table headers */
  .msg.assistant th[data-sortable] { cursor: pointer; user-select: none; }
  .msg.assistant th[data-sortable]:hover { background: var(--surface2); }
  .msg.assistant th[data-sortable]::after { content: ' \2195'; opacity: 0.4; font-size: 10px; }
  .msg.assistant th[data-sortable].sort-asc::after { content: ' \25B2'; opacity: 0.8; }
  .msg.assistant th[data-sortable].sort-desc::after { content: ' \25BC'; opacity: 0.8; }
  /* Interactive markdown tables */
  .md-table-wrap { margin: 12px 0; }
  .md-table-toolbar { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 4px; }
  .md-table-btn { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 10px; font-family: inherit; font-size: 12px; color: var(--text-dim); cursor: pointer; opacity: 0.75; transition: all 0.2s ease; }
  .md-table-btn:hover { opacity: 1; border-color: var(--accent); color: var(--accent); }
  .md-table-btn.done { opacity: 1; border-color: var(--success); color: var(--success); }
  .md-table-scroll { overflow-x: auto; border-radius: var(--radius-md); }
  .md-table-scroll > table { margin: 0 !important; }
  .md-table-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; }
  .md-table-modal.open { display: flex; }
  .md-table-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); }
  .md-table-modal-content { position: relative; width: 92vw; height: 92vh; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 20px 60px rgba(0,0,0,0.4); display: flex; flex-direction: column; overflow: hidden; }
  .md-table-modal-header { display: flex; justify-content: flex-end; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface2); }
  .md-table-modal-close { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 10px; font-family: inherit; font-size: 14px; color: var(--text-dim); cursor: pointer; }
  .md-table-modal-close:hover { color: var(--accent); border-color: var(--accent); }
  .md-table-modal-body { flex: 1; overflow: auto; padding: 16px 20px; }
  .md-table-modal-body table { width: 100%; }
  .media-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; }
  .media-lightbox.open { display: flex; }
  .media-lightbox-backdrop { position: absolute; inset: 0; background: var(--modal-overlay); backdrop-filter: blur(2px); }
  .media-lightbox-content { position: relative; max-width: 95vw; max-height: 95vh; display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .media-lightbox-img { max-width: 95vw; max-height: 85vh; display: block; object-fit: contain; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
  .media-lightbox-caption { display: flex; gap: 12px; align-items: center; padding: 8px 12px; color: #fff; font-size: 13px; }
  .media-lightbox-caption a { color: #fff; text-decoration: underline; }
  .media-lightbox-close { position: absolute; top: 8px; right: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 10px; font-family: inherit; font-size: 14px; color: var(--text-dim); cursor: pointer; }
  .media-lightbox-close:hover { color: var(--accent); border-color: var(--accent); }
  /* Draw.io diagrams */
  .drawio-container { position: relative; background: #f0f0f0; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; margin: 8px 0; overflow-x: auto; min-height: 300px; }
  .drawio-container .geDiagramContainer { background: transparent !important; min-width: 600px !important; min-height: 400px !important; }
  img.geAdaptiveAsset[style*="position: fixed"] { display: none !important; }
  .drawio-download { position: absolute; top: 8px; right: 8px; background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px; font-family: inherit; font-size: 13px; cursor: pointer; z-index: 1; }
  .drawio-download:hover { color: var(--text); border-color: var(--accent); }

  /* Marp slide viewer */
  .msg.assistant:has(.marp-viewer) { max-width: 100%; width: 100%; }
  .marp-viewer { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); margin: 8px 0; overflow: hidden; outline: none; }
  .marp-slide-host { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #fff; }
  .marp-controls { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px; border-top: 1px solid var(--border); background: var(--surface); }
  .marp-nav-btn { background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); border-radius: 4px; padding: 4px 12px; font-size: 14px; cursor: pointer; font-family: inherit; }
  .marp-nav-btn:hover { color: var(--text); border-color: var(--accent); }
  .marp-nav-btn:disabled { opacity: 0.3; cursor: default; }
  .marp-counter { font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; min-width: 50px; text-align: center; }
  .marp-fullscreen-btn { background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; font-size: 14px; cursor: pointer; margin-left: auto; }
  .marp-fullscreen-btn:hover { color: var(--text); border-color: var(--accent); }
  .marp-viewer:fullscreen { background: #000; }
  .marp-viewer:fullscreen .marp-slide-host { height: calc(100vh - 44px); aspect-ratio: unset; }
  .marp-viewer:fullscreen .marp-controls { background: #111; border-color: #333; }
  .marp-viewer:fullscreen .marp-nav-btn,
  .marp-viewer:fullscreen .marp-fullscreen-btn { background: #222; color: #aaa; border-color: #444; }
  .marp-viewer:fullscreen .marp-counter { color: #aaa; }

  .typing { align-self: flex-start; font-size: 14px; padding: 8px 14px; display: flex; flex-direction: column; gap: 4px; }
  .typing .typing-row { display: flex; align-items: center; gap: 6px; }
  .typing .bars { display: flex; gap: 0; }
  .typing .activity-text { color: var(--text-dim); font-size: 12px; white-space: nowrap; transition: opacity 0.15s; }
  .typing .elapsed-timer { color: var(--text-dim); font-size: 11px; font-variant-numeric: tabular-nums; font-family: monospace; }

  .typing .bars span { display: inline-block; width: 8px; height: 14px; background: var(--accent); border-radius: 0; opacity: 0.1; }

  /* Wave — classic sequential pulse */
  .typing.anim-wave .bars span { animation: pulse 1.4s ease-in-out infinite; }
  .typing.anim-wave .bars span:nth-child(2) { animation-delay: 0.15s; }
  .typing.anim-wave .bars span:nth-child(3) { animation-delay: 0.3s; }
  .typing.anim-wave .bars span:nth-child(4) { animation-delay: 0.45s; }
  .typing.anim-wave .bars span:nth-child(5) { animation-delay: 0.6s; }
  @keyframes pulse { 0%, 80%, 100% { opacity: 0.15; } 40% { opacity: 0.8; } }

  /* Random — JS-driven random opacity per bar */
  .typing.anim-random .bars span { transition: opacity 0.3s ease-in-out; }

  /* Scanner — a bright glow sweeps back and forth across bars */
  .typing.anim-scanner .bars span { opacity: 0.12; animation: scanner 1.6s ease-in-out infinite; }
  .typing.anim-scanner .bars span:nth-child(2) { animation-delay: 0.15s; }
  .typing.anim-scanner .bars span:nth-child(3) { animation-delay: 0.3s; }
  .typing.anim-scanner .bars span:nth-child(4) { animation-delay: 0.45s; }
  .typing.anim-scanner .bars span:nth-child(5) { animation-delay: 0.6s; }
  @keyframes scanner { 0%, 100% { opacity: 0.12; } 20% { opacity: 0.9; } 40% { opacity: 0.12; } }

  /* Seesaw — odd bars up while even bars down, alternating */
  .typing.anim-seesaw .bars span { opacity: 0.7; animation: seesawUp 1s ease-in-out infinite; }
  .typing.anim-seesaw .bars span:nth-child(2n) { animation-name: seesawDown; }
  @keyframes seesawUp { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
  @keyframes seesawDown { 0%, 100% { transform: translateY(4px); } 50% { transform: translateY(-4px); } }

  /* Bounce — bars jump up and down at staggered times */
  .typing.anim-bounce .bars span { opacity: 0.7; animation: bounce 0.8s ease-in-out infinite; }
  .typing.anim-bounce .bars span:nth-child(2) { animation-delay: 0.1s; }
  .typing.anim-bounce .bars span:nth-child(3) { animation-delay: 0.2s; }
  .typing.anim-bounce .bars span:nth-child(4) { animation-delay: 0.3s; }
  .typing.anim-bounce .bars span:nth-child(5) { animation-delay: 0.4s; }
  @keyframes bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } }

  /* Equalizer — wavy height animation like a music visualizer */
  .typing.anim-equalizer .bars { align-items: flex-end; height: 14px; }
  .typing.anim-equalizer .bars span { opacity: 0.75; animation: eq 1.8s ease-in-out infinite; }
  .typing.anim-equalizer .bars span:nth-child(2) { animation-delay: 0.25s; }
  .typing.anim-equalizer .bars span:nth-child(3) { animation-delay: 0.5s; }
  .typing.anim-equalizer .bars span:nth-child(4) { animation-delay: 0.75s; }
  .typing.anim-equalizer .bars span:nth-child(5) { animation-delay: 1.0s; }
  @keyframes eq { 0%, 100% { height: 3px; } 50% { height: 14px; } }

  /* Popcorn — JS-driven, bars randomly pop with scale */
  .typing.anim-popcorn .bars span { opacity: 0.3; transition: transform 0.15s ease-out, opacity 0.15s ease-out; }

  /* Morse — rhythmic dot-dash pattern, each bar offset */
  .typing.anim-morse .bars span { animation: morse 2s step-end infinite; }
  .typing.anim-morse .bars span:nth-child(2) { animation-delay: 0.25s; }
  .typing.anim-morse .bars span:nth-child(3) { animation-delay: 0.6s; }
  .typing.anim-morse .bars span:nth-child(4) { animation-delay: 0.9s; }
  .typing.anim-morse .bars span:nth-child(5) { animation-delay: 1.3s; }
  @keyframes morse { 0% { opacity: 0.8; } 8% { opacity: 0.1; } 16% { opacity: 0.8; } 24% { opacity: 0.1; } 40% { opacity: 0.8; } 60% { opacity: 0.1; } 100% { opacity: 0.1; } }

  /* Domino — bars tip over one by one then reset */
  .typing.anim-domino .bars span { opacity: 0.7; animation: domino 2s ease-in-out infinite; transform-origin: bottom right; }
  .typing.anim-domino .bars span:nth-child(2) { animation-delay: 0.2s; }
  .typing.anim-domino .bars span:nth-child(3) { animation-delay: 0.4s; }
  .typing.anim-domino .bars span:nth-child(4) { animation-delay: 0.6s; }
  .typing.anim-domino .bars span:nth-child(5) { animation-delay: 0.8s; }
  @keyframes domino { 0%, 30% { transform: rotate(0deg); opacity: 0.7; } 15% { transform: rotate(90deg); opacity: 0.15; } }

  /* Awaiting interactive input — runner is parked on a TUI picker. */
  .msg.assistant.awaiting-input { border-color: #d4a72c; box-shadow: 0 0 0 1px #d4a72c33; }
  html.light .msg.assistant.awaiting-input { background: #fff8e1; }
  .awaiting-input-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #d4a72c; margin-bottom: 6px; font-weight: 600; }
  .awaiting-input-body { line-height: 1.5; }
  #sendBtn.awaiting { background: #d4a72c; color: #1a1a1a; }

  /* Very narrow screens: let message bubbles use the full width instead of
     leaving ~22% empty beside them (right of assistant, left of user). Placed
     after the base .msg/.msg-group rules so it wins on source order. The
     centered welcome card keeps its own width via higher specificity. */
  @media (max-width: 520px) {
    .messages { padding: 16px 12px; }
    .msg-group,
    .msg { max-width: 100%; }
  }