@keyframes pulseDot{0%,100%{opacity:1;}50%{opacity:.4;}}

/* ════════════════ VOICE CALL — Overlay ════════════════ */

.call-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(10,10,15,0.65);backdrop-filter:blur(6px);
  z-index:10000;
  display:flex;align-items:center;justify-content:center;
}
.call-overlay-content{
  display:flex;flex-direction:column;align-items:center;
  gap:16px;max-width:400px;width:90%;
}
.call-avatar{
  position:relative;width:120px;height:120px;
}
.call-avatar img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;
  border:3px solid var(--accent);
}
.call-pulse{
  position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px;
  border-radius:50%;border:2px solid var(--accent);
  animation:callPulse 2s ease-in-out infinite;
}
@keyframes callPulse{
  0%,100%{transform:scale(1);opacity:0.6;}
  50%{transform:scale(1.12);opacity:0.2;}
}
.call-name{
  font-size:22px;font-weight:700;color:#fff;
}
.call-status{
  font-size:14px;color:var(--gray-mid);
  animation:callStatusPulse 1.5s ease-in-out infinite;
}
@keyframes callStatusPulse{
  0%,100%{opacity:1;}
  50%{opacity:0.4;}
}
.call-connecting .call-pulse{
  border-color:var(--gray-mid);
  animation:callRing 1s ease-in-out infinite;
}
@keyframes callRing{
  0%{transform:scale(1);opacity:0.6;}
  50%{transform:scale(1.2);opacity:0;}
  100%{transform:scale(1);opacity:0.6;}
}
.call-connecting .call-avatar img{
  border-color:var(--gray-mid);
}
.call-connecting .call-timer,
.call-connecting .call-tokens,
.call-connecting .call-text-bar{
  display:none !important;
}
.call-ring-timer{
  font-size:14px;color:#666;font-family:'Courier New',monospace;
  letter-spacing:1px;
}
.call-active .call-ring-timer{
  display:none !important;
}
.call-active .call-status{
  animation:none;opacity:0.6;
}
.call-timer{
  font-size:36px;font-weight:300;color:#e0e0e0;
  font-family:'Courier New',monospace;letter-spacing:2px;
}
.call-mic-row{
  display:flex;align-items:center;gap:10px;justify-content:center;
}
.call-mic-indicator{
  font-size:11px;font-weight:700;letter-spacing:1px;
  color:#555;padding:4px 12px;border-radius:12px;
  border:1px solid #333;transition:all 0.15s;
}
.call-mic-selector{
  background:#0d0d1a;color:#888;border:1px solid #333;
  border-radius:12px;padding:4px 12px;font-size:11px;font-weight:700;
  letter-spacing:0.5px;
  max-width:200px;cursor:pointer;outline:none;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23555'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  padding-right:24px;
  transition:all 0.15s;
}
.call-mic-selector:focus,.call-mic-selector:hover{border-color:#555;color:#aaa;}
.call-mic-selector option{
  background:#0d0d1a;color:#ccc;padding:8px;
}
.call-mic-ready{
  color:#888;border-color:#666;
  animation:micReadyPulse 2s ease-in-out infinite;
}
@keyframes micReadyPulse{
  0%,100%{opacity:0.5;} 50%{opacity:1;}
}
.call-mic-active{
  color:var(--green-solid);border-color:var(--green-solid);
  box-shadow:0 0 8px rgba(34,197,94,0.3);
  animation:none;
}
.call-tokens{
  font-size:13px;color:var(--gray-mid);
  transition:color 0.3s;
}
.call-tokens-low{
  color:var(--accent);font-weight:600;
}
.call-transcript{
  width:100%;max-height:40vh;overflow-y:auto;
  background:rgba(255,255,255,0.04);border-radius:10px;
  padding:12px;margin:8px 0;
  display:none;
  scrollbar-width:thin;
  scrollbar-color:rgba(233,69,96,0.4) transparent;
}
.call-transcript::-webkit-scrollbar{width:6px;}
.call-transcript::-webkit-scrollbar-track{background:transparent;}
.call-transcript::-webkit-scrollbar-thumb{background:rgba(233,69,96,0.4);border-radius:3px;}
.call-transcript::-webkit-scrollbar-thumb:hover{background:rgba(233,69,96,0.6);}
.call-transcript-line{
  font-size:13px;margin-bottom:6px;line-height:1.4;
  overflow-wrap:break-word;word-break:break-word;
}
.call-transcript-user{color:#b0b0b0;}
.call-transcript-companion{color:var(--accent);}
.call-transcript-speaker{
  font-weight:600;margin-right:4px;
}
.call-text-bar{
  display:flex;gap:8px;width:100%;margin-top:4px;
}
.call-text-input{
  flex:1;background:rgba(255,255,255,0.08);border:1px solid #333;
  border-radius:20px;padding:10px 16px;color:#e0e0e0;
  font-size:14px;outline:none;
}
.call-text-input:focus{border-color:var(--accent);}
.call-text-input::placeholder{color:#555;}
.call-text-send{
  background:var(--accent);color:#fff;border:none;border-radius:20px;
  padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;
  transition:background 0.2s;
}
.call-text-send:hover:not(:disabled){background:var(--accent-hover);}
.call-text-send:disabled{opacity:0.4;cursor:not-allowed;}
.call-text-input:disabled{opacity:0.4;cursor:not-allowed;}
.call-controls{
  display:flex;gap:16px;margin-top:12px;
}
.call-btn{
  padding:14px 32px;border-radius:30px;border:none;
  font-size:15px;font-weight:600;cursor:pointer;
  transition:all 0.2s;
}
.call-btn-mute{
  background:#2a2b2f;color:#e0e0e0;
}
.call-btn-mute:hover{background:#3a3b40;}
.call-btn-mute.muted{background:var(--accent);color:#fff;}
.call-btn-end{
  background:var(--accent);color:#fff;
}
.call-btn-end:hover{background:var(--accent-hover);}

/* ════════════════ INCOMING CALL — Overlay ════════════════ */

.incoming-call-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(10,10,15,0.92);
  z-index:10001;
  display:flex;align-items:center;justify-content:center;
}
.incoming-call-content{
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.incoming-call-ring{
  width:80px;height:80px;border-radius:50%;
  border:3px solid var(--green-solid);
  animation:incomingRing 1.2s ease-in-out infinite;
}
@keyframes incomingRing{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(34,197,94,0.4);}
  50%{transform:scale(1.1);box-shadow:0 0 0 20px rgba(34,197,94,0);}
}
.incoming-call-name{
  font-size:24px;font-weight:700;color:#fff;
}
.incoming-call-label{
  font-size:14px;color:var(--gray-mid);
}
.incoming-call-actions{
  display:flex;gap:20px;margin-top:12px;
}
.call-btn-accept{
  background:var(--green-solid);color:#fff;
  padding:14px 36px;border-radius:30px;border:none;
  font-size:15px;font-weight:600;cursor:pointer;
}
.call-btn-accept:hover{background:var(--green-solid-hover);}
.call-btn-decline{
  background:var(--red);color:#fff;
  padding:14px 36px;border-radius:30px;border:none;
  font-size:15px;font-weight:600;cursor:pointer;
}
.call-btn-decline:hover{background:var(--red-hover);}