/* Call tab. Signature element: the Speakgora orb (brand bubble + live waveform), FaceTime-like and centred. */
.call-state{flex:0 0 auto;padding:4px 10px;border-radius:99px;background:rgb(37 99 235/.1);color:var(--tint);font-size:13px;font-weight:600}

/* Compact setup keeps the language pair and main action in the first viewport. */
#callSection>.lead{max-width:42ch;margin-bottom:18px}
.call-language-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--card2)}
.call-language-pair .row{display:grid;gap:8px;padding:14px 16px;min-width:0}
.call-language-pair .row+.row{border-left:1px solid var(--line)}
.call-language-pair .row+.row::before{display:none}
.call-language-pair .row-label{font-size:13px;color:var(--label2)}
.call-language-pair select{max-width:100%;width:100%;font-size:20px;font-weight:600;text-align:left;text-align-last:left;color:var(--label);min-height:38px}
#callSection .call-hero{grid-template-columns:40px minmax(0,1fr);justify-items:start;column-gap:14px;row-gap:3px;margin-top:16px;padding:16px;background:transparent;border:0;border-radius:0;text-align:left}
#callSection .call-avatar{grid-column:1;grid-row:1/4;width:36px;height:36px;align-self:center;box-shadow:none}
#callSection .call-avatar span{width:12px;height:12px}
#callSection .call-avatar i{width:3px}
#callSection .call-avatar i:nth-child(2){left:7px;height:12px}
#callSection .call-avatar i:nth-child(3){left:2px;height:6px}
#callSection .call-avatar i:nth-child(4){right:5px;height:9px}
#callSection .call-hero strong{grid-column:2;margin:0;font-size:16px}
#callSection #callTimer{grid-column:2;font-size:13px}
#callSection #callStatus{grid-column:2;max-width:none;margin:3px 0 0}
#callSection .ai-notice{grid-column:1/-1;max-width:none;text-align:left}
/* the other side's translated sentence as text: the only form in a caption-only language */
.call-subtitle{grid-column:1/-1;margin:10px 0 0;padding:12px 14px;border-radius:12px;background:var(--label);color:#fff;font-size:20px;line-height:1.35;font-weight:600;text-align:start}
#callSection>.call-controls{margin-top:8px}
#callSection>.call-controls .filled{min-height:54px;border-radius:14px}
#callSection .call-notice{margin-top:10px;font-size:12px;text-align:center}
#callSection .call-notice a{color:var(--label2);text-decoration-color:var(--line);text-underline-offset:3px}
#callSection .call-notice a:hover{color:var(--tint)}
#callSection:has(.call-state.is-live) .call-hero{padding-block:24px;background:var(--card2);border:1px solid var(--line);border-radius:var(--radius)}
#callSection:has(.call-state.is-live) .call-hero strong{font-size:20px}
#callSection:has(.call-state.is-live) .call-avatar{box-shadow:0 0 0 7px rgb(37 99 235/.06)}
@media(max-width:360px){.call-language-pair .row{padding:12px}.call-language-pair select{font-size:18px}}
.call-state.is-live{background:rgb(52 199 89/.16);color:#248a3d}
.call-state.is-waiting{background:rgb(37 99 235/.18);color:var(--tint)}
.call-state.is-error{background:rgb(255 59 48/.14);color:var(--red-text)}

.call-hero{display:grid;justify-items:center;gap:4px;padding:28px 20px 22px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);text-align:center}
.call-hero strong{margin-top:14px;font-size:20px;font-weight:600;letter-spacing:.01em}
#callTimer{color:var(--label2);font-size:15px;font-variant-numeric:tabular-nums}
#callStatus{margin:8px 0 0;color:var(--label2);font-size:13px;max-width:34ch}
.ai-notice{margin:10px 0 0;padding:8px 12px;border-radius:10px;background:var(--fill,rgba(120,120,128,.12));color:var(--label);font-size:13px;max-width:36ch}
.call-avatar{position:relative;display:flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,rgb(37 99 235/.28),rgb(37 99 235/.08) 70%);box-shadow:0 0 0 10px rgb(37 99 235/.06)}
.call-avatar span{width:30px;height:30px;border-radius:50%;background:var(--accent)}
.call-avatar i{position:absolute;width:5px;border-radius:5px;background:var(--accent);opacity:.7}
.call-avatar i:nth-child(2){left:24px;height:20px}.call-avatar i:nth-child(3){left:14px;height:10px}.call-avatar i:nth-child(4){right:18px;height:16px}

.invite-box{margin-top:12px;padding:12px 16px}
.invite-box label{display:block;margin-bottom:8px;color:var(--label2);font-size:13px}
.invite-field{display:flex;gap:8px}
.invite-field input{min-width:0;flex:1;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:var(--fill2);color:var(--label);font-size:15px}

.call-controls{display:grid;gap:10px;margin-top:14px}
.call-controls button{width:100%}
.call-controls:has(#muteCall:not([hidden])){grid-template-columns:1fr 1fr}
.call-controls:has(#muteCall:not([hidden])) #muteCall,.call-controls:has(#muteCall:not([hidden])) #endCall{min-height:50px}
.group-footer #sendTranslated{width:100%;margin:4px 0 8px;white-space:normal}

@media (prefers-reduced-motion:no-preference){
  .call-state.is-live+* .call-avatar i,.call-hero .call-avatar i{animation:none}
  #callSection:has(.call-state.is-live) .call-avatar i{animation:call-wave .8s ease-in-out infinite alternate}
  #callSection:has(.call-state.is-live) .call-avatar i:nth-child(3){animation-delay:.2s}
  #callSection:has(.call-state.is-live) .call-avatar i:nth-child(4){animation-delay:.4s}
  @keyframes call-wave{from{transform:scaleY(.55)}to{transform:scaleY(1.25)}}
}