/* Voice call page: the chat screen's top bar, then the call stage filling exactly the rest of the
   screen (no overflow on phones: dynamic viewport height and the bottom safe area). Loaded after
   poe-theme.css. The stage keeps the theme's 1fr / auto / 1fr rows: avatar just above the middle,
   status in the middle, controls at the bottom. */
.voice-call-page .voice-call-main{display:flex;flex-direction:column;height:100dvh;min-height:0;padding:0;place-items:initial;overflow:hidden}
.voice-call-top{position:relative;z-index:5;flex:0 0 auto}
.voice-call-top .agent-header-info{display:flex;align-items:center;color:inherit;text-decoration:none}
.voice-call-top .agent-title-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voice-call-top .agent-header-info:hover .agent-title-text{color:#7ce8bd}
.voice-call-top .chat-top-actions{display:flex;align-items:center;gap:10px}
.voice-call-page .voice-call-stage{flex:1;min-height:0;width:min(620px,100%);margin:0 auto;padding:24px 24px calc(18px + env(safe-area-inset-bottom));grid-template-rows:1fr auto 1fr;row-gap:18px}
.voice-call-page .voice-call-avatar{width:clamp(96px,22vh,132px);height:clamp(96px,22vh,132px)}
.voice-chat-button{text-decoration:none}
.voice-chat-button .voice-control-icon{background:#222a38;color:#fff}
.voice-chat-button:hover .voice-control-icon{background:#2c3648}
@media(max-width:900px){
  body.voice-call-page{padding-top:0!important}
  body.voice-call-page>.mobile-site-bar{display:none!important}
  .voice-call-page>.sidebar-toggle{display:none!important}
  .voice-call-page:not(.sidebar-collapsed)>.sidebar-toggle{display:grid!important}
  .voice-call-page .mobile-chat-menu-toggle{display:grid}
  .voice-call-top{gap:7px;padding:10px}
  .voice-call-top .top-action-secondary,.voice-call-top .agent-settings-action{display:none}
  .voice-call-page .voice-call-stage{padding:16px 18px calc(14px + env(safe-area-inset-bottom));row-gap:12px}
  .voice-call-page .voice-call-stage h1{font-size:28px}
  .voice-call-page .voice-call-controls{gap:22px;padding-bottom:0}
}
/* Cards shown during a call (music): a panel on the right with a close button; the stage keeps the
   rest of the width. On phones the panel sits under the top bar, above the status and controls. */
.voice-call-main{position:relative}
.voice-call-page .voice-call-main.has-card{display:grid;grid-template-columns:minmax(0,1fr) min(400px,36vw);grid-template-rows:auto minmax(0,1fr)}
.voice-call-main.has-card>.voice-call-top{grid-column:1/-1}
.voice-card-panel{position:relative;z-index:6;align-self:start;margin:20px 24px 0 0;max-height:calc(100% - 40px);overflow:auto;padding:12px;border:1px solid rgba(82,229,165,.28);border-radius:14px;background:rgba(10,17,28,.96);box-shadow:0 24px 60px rgba(0,0,0,.35);animation:voiceCardIn .32s cubic-bezier(.22,.8,.24,1)}
.voice-card-panel[hidden]{display:none}
.voice-card-close{position:absolute;top:8px;right:8px;z-index:2;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;background:#222a38;color:#eef3fb;cursor:pointer}
.voice-card-close:hover{background:#2c3648}
.voice-card-body .chat-music-playlist{width:100%;margin:0;padding:0;border:0;background:none}
.voice-card-body .chat-music-playlist-head{padding-right:40px;min-height:32px;align-items:center}
@keyframes voiceCardIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
/* The note above Start when the call pauses for a song, and a soft ring on Start. */
.voice-handoff{position:absolute;bottom:calc(100% + 14px);left:50%;width:min(300px,82vw);margin:0;padding:12px 14px;border-radius:14px;background:#eef2f8;color:#121a28;font-size:14px;font-weight:650;line-height:1.4;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.35);transform:translateX(-50%);animation:voiceHandoffIn .45s cubic-bezier(.22,.8,.24,1),voiceHandoffFloat 2.6s ease-in-out .45s infinite}
.voice-handoff[hidden]{display:none}
.voice-handoff::after{content:'';position:absolute;top:100%;left:50%;border:8px solid transparent;border-top-color:#eef2f8;transform:translateX(-50%)}
.voice-call-primary.is-nudged .voice-control-icon{animation:voiceNudge 1.6s ease-out infinite}
@keyframes voiceHandoffIn{from{opacity:0;transform:translate(-50%,10px) scale(.96)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes voiceHandoffFloat{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-4px)}}
@keyframes voiceNudge{0%{box-shadow:0 0 0 0 rgba(124,232,189,.55)}100%{box-shadow:0 0 0 16px rgba(124,232,189,0)}}
@media(prefers-reduced-motion:reduce){.voice-card-panel,.voice-handoff,.voice-call-primary.is-nudged .voice-control-icon{animation:none}}
@media(max-width:900px){
  .voice-call-page .voice-call-main.has-card{display:flex}
  .voice-card-panel{position:absolute;top:64px;left:12px;right:12px;margin:0;max-height:46%}
  .voice-call-main.has-card .voice-agent-focus{visibility:hidden}
}