#call-root [hidden] { display: none !important; }
#call-root button { font: inherit; cursor: pointer; border: 1px solid var(--mint); color: var(--accent-deep); background: var(--card-solid); border-radius: 24px; min-height: 44px; padding: 10px 18px; }
#call-panel { position: fixed; z-index: 210; inset: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px); max-width: 520px; margin: auto; background: var(--card-solid); border: 1px solid var(--mint); border-radius: 32px; box-shadow: 0 15px 80px #0003; padding: 22px; display: flex; flex-direction: column; align-items: center; overflow-y: auto; color: var(--text); }
.call-top { display:flex; width:100%; justify-content:space-between; align-items:center; gap:10px; color:var(--text2); font-size:10px; letter-spacing:2px; }
.call-people { display:flex; align-items:center; gap:16px; margin:28px 0 20px; }
.call-avatar { width:86px; height:86px; border-radius:50%; background:var(--mint-light); color:var(--accent-deep); display:grid; place-items:center; font-size:32px; border:3px solid var(--card-solid); box-shadow:0 0 0 1px var(--mint); }
.call-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.call-avatar.small { width:60px; height:60px; font-size:24px; }
.call-avatar.talking { animation:call-breathe 1.4s ease-in-out infinite; }
.call-link { color:var(--accent); font-size:28px; }
#call-name { font-family:'Noto Serif SC',serif; font-size:26px; margin:0 0 10px; }
#call-state { font-size:13px; color:var(--text2); text-align:center; line-height:1.6; }
#call-clock { color:var(--text3); font-size:12px; margin:8px; font-variant-numeric:tabular-nums; }
#call-caption { flex:1; width:100%; min-height:70px; overflow:auto; line-height:1.8; font-size:17px; padding:18px 6px; white-space:pre-wrap; }
.call-controls { display:flex; justify-content:center; gap:8px; width:100%; margin:15px 0; flex-wrap:wrap; }
#call-root .call-hangup { background:#ae4055; color:white; border-color:#ae4055; }
.call-compose { display:flex; gap:8px; width:100%; align-items:center; }
.call-compose textarea { flex:1; min-width:0; border:1px solid var(--mint); border-radius:20px; padding:12px; font:inherit; font-size:16px; color:var(--text); background:var(--card); resize:none; }
.call-note { font-size:10px; color:var(--text3); text-align:center; margin-top:12px; }
#call-mini { position:fixed; z-index:205; top:calc(env(safe-area-inset-top,0px) + 12px); right:14px; max-width:220px; box-shadow:var(--shadow); display:flex; flex-direction:column; text-align:left; gap:4px; }
#call-mini small { font-size:10px; max-width:180px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#call-incoming { position:fixed; z-index:220; top:calc(env(safe-area-inset-top,0px) + 24px); left:16px; right:16px; max-width:400px; margin:auto; padding:24px; border:1px solid var(--mint); border-radius:28px; background:var(--card-solid); color:var(--text); box-shadow:0 10px 60px #0003; text-align:center; }
.call-incoming-icon { display:block; color:var(--accent); font-size:32px; margin-bottom:12px; }
#call-incoming h3 { font-size:18px; margin-bottom:10px; } #call-reason { font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
#call-incoming small { display:block; font-size:11px; color:var(--text3); margin:12px 0; }
#call-incoming > div { display:flex; gap:12px; } #call-incoming button { flex:1; }
#call-root #call-accept { background:var(--accent); color:white; }
.call-preference { margin-top:18px; padding-top:16px; border-top:1px dashed var(--mint); }
.call-preference input[type=checkbox] { width:18px; height:18px; vertical-align:middle; accent-color:var(--accent); margin-right:6px; }
@keyframes call-breathe { 50% { box-shadow:0 0 0 9px var(--mint-light); } }
@media (prefers-reduced-motion:reduce) { .call-avatar.talking { animation:none; } }
@media (max-height:600px) { .call-people { margin:8px 0; } .call-avatar { width:52px; height:52px; } .call-avatar.small { width:42px; height:42px; } #call-caption { min-height:35px; } #call-panel { padding:14px; } }