/* Append to main.css (tweak tokens to existing palette): */

.telemetry{position:static;width:100%;background:rgba(0,0,0,.35);
    backdrop-filter:blur(4px) saturate(1.1);border:1px solid rgba(255,255,255,.06);border-radius:.75rem;padding:.75rem;margin-top:.5rem}
  /* telemetry always sits below captions on all breakpoints */
  
  .telemetry__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
  .telemetry .tag{font-size:.7rem;opacity:.7;border:1px solid rgba(255,255,255,.12);padding:.1rem .35rem;border-radius:.35rem}
  
  .telemetry__grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
  .card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:.6rem;padding:.6rem}
  .card h4{font-size:.9rem;margin:0 0 .4rem}
  
  .pill{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.4rem;margin:.35rem 0}
  .meter{height:8px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden}
  .meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3dd7ff,#6cffb4)}
  .meter--lg{height:12px}
  
  .kv{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.4rem;margin:.3rem 0}
  .kv em{opacity:.6;font-style:normal;font-size:.75rem}
  
  .chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:.45rem 0 0;list-style:none;padding-left:0}
  .chips li{font-size:.75rem;opacity:.65;border:1px solid rgba(255,255,255,.1);padding:.12rem .4rem;border-radius:.4rem}
  .chips li.on{opacity:1;border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.06)}
  
  .spark{width:100%;height:auto;display:block;margin-top:.35rem;opacity:.95}
  
  .why__head{font-size:.85rem;margin-top:.4rem;font-weight:600;opacity:.9}
  .why ul{margin:.35rem 0 0;padding-left:1rem}
  .why li{font-size:.85rem;opacity:.9}
  
  /* Timeline cards: stack on mobile, grid on larger screens */
  .timeline{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:.8rem;padding:0;margin:0}
  .timeline__card{list-style:none}
  @media (max-width:900px){ .timeline{grid-template-columns:1fr 1fr} }
  @media (max-width:640px){ .timeline{grid-template-columns:1fr} }

  /* Caption UI (mini phone-call HUD + two-line captions) */
  .caption-ui{position:relative;z-index:2;max-width:820px;margin:0;--cc-line-height:1.35;--cc-font-size:1.15rem;--cc-tag-col:4.7ch;--cc-meta:2rem}
  @media (min-width:1024px){ .caption-ui{ margin-left: 0 } }
  .call-sim.stage{ max-width: 860px; }
  .caption-ui__hud{display:flex;gap:.5rem;align-items:center;justify-content:flex-start;padding:.4rem .6rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:.6rem .6rem 0 0;font-size:.86rem}
  .dot{width:.5rem;height:.5rem;border-radius:50%}
  .dot--green{background:#2ecc71}
  .sep{opacity:.5}
  .hud__cc{margin-left:auto;font-size:.7rem;opacity:.65;border:1px solid rgba(255,255,255,.25);padding:.05rem .35rem;border-radius:.35rem;letter-spacing:.04em}
  .cc2{position:relative;background:rgba(0,0,0,.55);backdrop-filter:blur(2px) saturate(1.1);border:1px solid rgba(255,255,255,.08);border-top:0;border-radius:0 0 .6rem .6rem;padding:.65rem .8rem 1.25rem}
  .cc2__line{display:grid;grid-template-columns:var(--cc-tag-col) 1fr;gap:.5rem;align-items:baseline;margin:.25rem 0}
  .cc2__prev{opacity:.65;filter:saturate(.9)}
  .tag{font-size:.72rem;border:1px solid rgba(255,255,255,.2);border-radius:.4rem;padding:.05rem .35rem;text-align:center;white-space:nowrap}
  .tag--echo{opacity:.9}
  #cc-curr,#cc-prev{font-size:var(--cc-font-size);line-height:var(--cc-line-height)}
  .caret{display:inline-block;width:.6ch;height:1.05em;vertical-align:baseline;opacity:.7;background:currentColor;animation:blink 1s steps(1,end) infinite;margin-left:.1ch}
  @keyframes blink{50%{opacity:0}}
  @keyframes dotFlickerBlue{
    0%{ opacity:.65; box-shadow:0 0 4px rgba(56,189,248,.4); }
    45%{ opacity:1; box-shadow:0 0 10px rgba(125,211,252,.55); }
    55%{ opacity:.45; box-shadow:0 0 3px rgba(56,189,248,.2); }
    100%{ opacity:.85; box-shadow:0 0 8px rgba(56,189,248,.45); }
  }
  @keyframes dotPulseGreen{
    0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(16,185,129,.45); }
    50%{ transform:scale(1.15); box-shadow:0 0 0 10px rgba(16,185,129,0); }
  }
  @keyframes dotPulseAmber{
    0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(245,158,11,.4); }
    50%{ transform:scale(1.12); box-shadow:0 0 0 9px rgba(245,158,11,0); }
  }
  .caption-ui__hud .dot{
    position:relative;
    box-shadow:0 0 0 0 transparent;
    transform-origin:center;
    animation:none;
  }
  .caption-ui__hud .dot--idle{
    background:#38bdf8;
    animation:dotFlickerBlue 1.15s linear infinite;
  }
  .caption-ui__hud .dot--playing{
    background:#10b981;
    animation:dotPulseGreen 1.8s ease-in-out infinite;
  }
  .caption-ui__hud .dot--paused{
    background:#f59e0b;
    animation:dotPulseAmber 1.6s ease-in-out infinite;
  }
  /* Fixed caption area height: 8 lines on mobile, 7 on desktop */
  .cc2{line-height:var(--cc-line-height);height:calc(var(--cc-line-height) * var(--cc-font-size) * 8 + 1.2rem)}
  @media (min-width:960px){ .cc2{ height:calc(var(--cc-line-height) * var(--cc-font-size) * 7 + 1.2rem) } }
  /* Scroller takes remaining height (reserve meta line) */
  .cc2__scroller{overflow-y:auto;max-height:calc(100% - var(--cc-meta))}
  .cc2__row{display:grid;grid-template-columns:var(--cc-tag-col) 1fr;gap:.5rem;align-items:baseline;margin:.25rem 0}
  .cc2__jump{position:absolute;right:.8rem;bottom:.6rem;font-size:.78rem;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);padding:.2rem .5rem;border-radius:.35rem}
  .cc2__meta{position:absolute;left:.8rem;right:.8rem;bottom:.4rem;margin-top:0;font-size:.74rem;opacity:.7}
  .caption-ui__controls{display:grid;gap:.5rem;align-items:center;grid-template-columns:1fr; margin-top:.5rem}
  @media (min-width: 780px){ .caption-ui__controls{ grid-template-columns: 1fr auto } }
  .caption-ui__controls .btn{min-height:36px}
  .caption-ui__controls .btn:focus{ outline-offset:-2px }

  /* Scenario Panel Styles */
  .scenario-panel {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: .6rem;
    padding: .75rem;
  }
  
  .scenario-panel h3 {
    font-size: .9rem;
    margin: 0 0 .5rem 0;
    color: var(--text);
    opacity: .9;
  }
  
  .scenario-list {
    display: flex;
    gap: .4rem;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.2) transparent;
  }
  
  .scenario-list::-webkit-scrollbar {
    height: 4px;
  }
  
  .scenario-list::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .scenario-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.2);
    border-radius: 2px;
  }
  
  .scenario-btn {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: .4rem;
    padding: .4rem .6rem;
    font-size: .85rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all .2s ease;
    flex-shrink: 0;
  }
  
  .scenario-btn:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.2);
  }
  
  .scenario-btn.active,
  .scenario-btn[aria-selected="true"] {
    background: rgba(20,184,166,.12);
    border-color: var(--brand);
    color: var(--brand);
  }
  
  .scenario-btn:focus {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
  }

  /* Scenario panel above caption UI on all breakpoints */
  .scenario-panel--mobile { margin-bottom: .75rem }

  /* Constrain scenario panel and controls to caption width on desktop */
  @media (min-width: 1024px) {
    .call-sim.stage { max-width: 1180px; margin: 0; display: grid; grid-template-columns: 1fr 320px; gap: 1rem; align-items: start }
  }

  /* Reasoning log */
  .reasoning-log{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);border-radius:.6rem;padding:0;display:flex;flex-direction:column;max-width:100%;overflow:hidden}
  .reasoning-log__head{padding:.5rem .6rem;background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.08);font-weight:600;border-top-left-radius:.6rem;border-top-right-radius:.6rem}
  .reasoning-log__body{padding:.6rem .6rem .6rem .6rem;overflow:auto}
  .reasoning-log .reasons{margin:0;padding-left:1rem}
  .reasoning-log .reasons li{font-size:.85rem;opacity:.9}

  /* Mobile layout: place reasoning log below telemetry; limit height to ~4 lines */
  @media (max-width: 1023.98px){
    .reasoning-log{ margin-top:.75rem }
    .reasoning-log__body{ height: 6.2rem; }
  }

  /* Desktop: fix height to match caption + telemetry column; scroll if overflow */
  @media (min-width: 1024px){
    /* Height synchronized via JS; body stays scrollable */
  }

  /* Reduce gap between call UI and telemetry */
  .telemetry{ margin-top:.4rem }

  /* Waveform canvas under caption UI */
  .wave{ display:block; width:100%; height:120px; color: rgba(108,255,180,.9); }
  @media (min-width:960px){ .wave{ height:140px } }