.calls-toolbar{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:16px}.calls-toolbar h2{margin:4px 0}.calls-layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:14px;min-height:650px}.calls-list,.calls-detail{background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.calls-list{max-height:calc(100vh - 190px);overflow:auto}.call-row{width:100%;border:0;border-bottom:1px solid var(--border);background:#fff;padding:15px;text-align:left;display:flex;justify-content:space-between;gap:12px;cursor:pointer}.call-row:hover,.call-row.active{background:#f4f1ff}.call-row strong,.call-row span{display:block}.call-row span{font-size:11px;color:var(--muted);margin-top:5px}.call-row-right{text-align:right}.call-row-right b{display:block;color:#5f45c5;margin-top:5px}.calls-empty{text-align:center;color:var(--muted);padding:60px 24px}.calls-empty>div{font-size:40px}.call-head{padding:20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:16px}.call-head h2{margin:5px 0}.call-head p{margin:0;color:var(--muted);font-size:12px}.call-score{text-align:center;background:#f2efff;border-radius:14px;padding:12px 18px;min-width:90px}.call-score span{font-size:9px;color:var(--muted);display:block}.call-score b{font-size:25px;color:#6045c5}.call-tabs{display:flex;gap:5px;padding:10px 16px;border-bottom:1px solid var(--border)}.call-tabs button{border:0;background:transparent;padding:9px 12px;border-radius:9px;cursor:pointer}.call-tabs button.active{background:#ece7ff;color:#5d43c2;font-weight:700}.call-ai-grid{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.call-card{border:1px solid var(--border);border-radius:14px;padding:16px;margin:16px}.call-ai-grid .call-card{margin:0}.call-card h3{margin-top:0}.call-card h4{margin-bottom:6px}.call-card p,.call-card li{font-size:13px;line-height:1.5}.call-metric{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding:9px 0;font-size:12px}.call-metric b{color:#5f45c5}.probability b{font-size:25px;color:#5f45c5}.call-transcript{white-space:pre-wrap;line-height:1.65;font-size:13px}@media(max-width:950px){.calls-layout{grid-template-columns:1fr}.calls-list{max-height:330px}.call-ai-grid{grid-template-columns:1fr}}
/* These cards use light surfaces even when the surrounding CRM uses a dark theme. */
.calls-layout{--border:#dcdfea;--muted:#596279;color:#20283b}
.calls-list,.calls-detail,.call-card,.call-row{color:#20283b}
.calls-layout h2,.calls-layout h3,.calls-layout h4,.calls-layout p,.calls-layout li,.call-metric span,.call-transcript,.call-row strong{color:#20283b}
.calls-layout .muted,.call-head p,.call-row span,.calls-empty,.call-score span{color:#596279}
.call-tabs button{color:#30384b}
.calls-layout .eyebrow{color:#7150bb}
.call-tabs button:focus-visible,.call-row:focus-visible{outline:2px solid #6045c5;outline-offset:-2px}