/* Live calls block (totals, chart, collapsible call list). Shared by the homepage and /kairos;
   pairs with kairos-performance.js and kairos-live.js. */
.chart-card{background:#0A1420;border:1px solid #16233A;border-radius:14px;padding:20px 18px 14px;margin:20px 0 26px}
.chart-svg{width:100%;height:auto;display:block}
.calls-scroll{overflow-x:auto;margin:14px 0 22px}
.calls-scroll>div>div{min-width:600px}
.perf-pills{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px}
.perf-pill{font-family:'JetBrains Mono',monospace;font-size:12px;color:#93A8C0;background:#0E1B2A;border:1px solid #16233A;border-radius:999px;padding:8px 16px;cursor:pointer;transition:.2s}
.perf-pill:hover{border-color:#1FC77D;color:#1FC77D}
.perf-pill.active{background:#1FC77D;color:#0A0F0D;border-color:#1FC77D;font-weight:700}
.perf-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:4px}
.perf-stat{background:#0E1B2A;border:1px solid #16233A;border-radius:12px;padding:14px 16px}
.perf-stat span{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#6C8098;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.perf-stat strong{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:19px;color:#F2F6FB}
.perf-stat strong.pos{color:#1FC77D}
.perf-stat strong.neg{color:#E14F63}
.perf-chart-card{margin:16px 0 14px}
.perf-detail-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:12px;color:#93A8C0}
.perf-empty{text-align:center;color:#6C8098;font-size:13px;padding:30px 0}
.calls-toggle{display:flex;align-items:center;gap:12px;width:100%;margin-top:22px;padding:15px 18px;background:#0E1B2A;border:1px solid #16233A;border-radius:14px;color:#F2F6FB;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:700;font-size:14.5px;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.calls-toggle:hover,.calls-toggle[aria-expanded="true"]{border-color:rgba(31,199,125,.5)}
.calls-toggle:focus-visible{outline:2px solid #1FC77D;outline-offset:2px}
.ct-label{flex:1}
.ct-dot{width:9px;height:9px;border-radius:50%;background:#1FC77D;flex:none;animation:ctPulse 1.8s ease-out infinite}
.ct-chev{flex:none;color:#1FC77D;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.calls-toggle[aria-expanded="true"] .ct-chev{transform:rotate(180deg)}
@keyframes ctPulse{0%{box-shadow:0 0 0 0 rgba(31,199,125,.5)}100%{box-shadow:0 0 0 10px rgba(31,199,125,0)}}
.calls-panel{display:grid;grid-template-rows:0fr;overflow-anchor:none;transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1)}
.calls-panel.open{grid-template-rows:1fr}
.calls-inner{min-height:0;overflow:hidden;opacity:0;transform:translateY(-10px);visibility:hidden;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .5s}
.calls-panel.open .calls-inner{opacity:1;transform:none;visibility:visible;transition-delay:.08s,.08s,0s}
.calls-inner>p{margin:18px 0 0;font-size:14.5px;line-height:1.75;color:#C7D3E0}
.calls-panel.no-anim,.calls-panel.no-anim .calls-inner{transition:none}
.calls-panel.open #kairos-recent-calls-list>div{animation:callIn .45s cubic-bezier(.2,.8,.2,1) both}
.calls-panel.open #kairos-recent-calls-list>div:nth-child(1){animation-delay:0.15s}
.calls-panel.open #kairos-recent-calls-list>div:nth-child(2){animation-delay:0.20s}
.calls-panel.open #kairos-recent-calls-list>div:nth-child(3){animation-delay:0.25s}
.calls-panel.open #kairos-recent-calls-list>div:nth-child(4){animation-delay:0.30s}
.calls-panel.open #kairos-recent-calls-list>div:nth-child(5){animation-delay:0.35s}
.calls-panel.open #kairos-recent-calls-list>div:nth-child(6){animation-delay:0.40s}
.calls-panel.open #kairos-recent-calls-list>div:nth-child(7){animation-delay:0.45s}
.calls-panel.open #kairos-recent-calls-list>div:nth-child(8){animation-delay:0.50s}
.calls-panel.open #kairos-recent-calls-list>div:nth-child(9){animation-delay:0.55s}
.calls-panel.open #kairos-recent-calls-list>div:nth-child(10){animation-delay:0.60s}
@keyframes callIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.calls-panel,.calls-inner,.ct-chev{transition:none}.ct-dot,.calls-panel.open #kairos-recent-calls-list>div{animation:none}}
.perf-chart-svg polyline{filter:drop-shadow(0 0 6px rgba(31,199,125,.45));stroke-linecap:round;stroke-linejoin:round}
.perf-chart-card{position:relative;overflow:hidden}
.perf-chart-card::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(31,199,125,.09) 50%,transparent 60%);transform:translateX(-100%);animation:perfSweep 1.8s .25s ease-out 1 both;pointer-events:none}
.perf-stat{animation:perfRise .5s cubic-bezier(.2,.8,.2,1) both}
.perf-stat:nth-child(2){animation-delay:.07s}
.perf-stat:nth-child(3){animation-delay:.14s}
.perf-stat:nth-child(4){animation-delay:.21s}
.perf-detail-row{animation:perfRise .5s 1.2s cubic-bezier(.2,.8,.2,1) both}
@keyframes perfSweep{to{transform:translateX(100%)}}
@keyframes perfRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.perf-stat,.perf-detail-row,.perf-chart-card::after{animation:none}}
.perf-chart-svg .perf-area{animation:perfFade .9s 1.2s ease both}
@keyframes perfFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.perf-chart-svg .perf-area{animation:none}}

/* Phones: each call becomes a two-line card instead of a sideways-scrolling table row. */
@media (max-width:560px){
  .calls-scroll{overflow-x:visible}
  .calls-scroll>div>div{min-width:0}
  #kairos-recent-calls-list>div{grid-template-columns:repeat(6,1fr)!important;gap:8px 6px!important;padding:12px!important;font-size:11.5px!important}
  #kairos-recent-calls-list>div>:nth-child(1){grid-column:span 2;order:1}
  #kairos-recent-calls-list>div>:nth-child(2){order:2}
  #kairos-recent-calls-list>div>:nth-child(6){grid-column:span 2;order:3;justify-self:end}
  #kairos-recent-calls-list>div>:nth-child(7){order:4;text-align:right}
  #kairos-recent-calls-list>div>:nth-child(3),#kairos-recent-calls-list>div>:nth-child(4),#kairos-recent-calls-list>div>:nth-child(5){grid-column:span 2;order:5;color:#93A8C0;white-space:nowrap}
  #kairos-recent-calls-list>div>:nth-child(5){text-align:right}
  #kairos-recent-calls-list>div>:nth-child(4){text-align:center}
  .perf-summary{grid-template-columns:1fr 1fr}
  .perf-detail-row{gap:6px 14px;font-size:11px}
  .calls-toggle{padding:14px;font-size:13.5px}
}