:root { --text-main:#17362b; --text-sub:#50645b; --text-muted:#64776d; --color-green:#16834b; --font-family:Inter,"Segoe UI",system-ui,sans-serif; }
body.call-app { background:#f5f8f6; padding:32px 20px; align-items:flex-start; }
.call-container { max-width:1040px; min-height:0; }
.phone-frame { max-width:500px; width:100%; margin:auto; padding:32px; border-radius:20px; box-shadow:0 8px 32px #17362b08; gap:24px; }
.card-title { font-size:28px; }
.card-desc { font-size:16px; }
.btn-call-action,.btn-call-action:hover { background:var(--color-green); box-shadow:none; transform:none; border-radius:10px; min-height:52px; }
#account-panel { padding:16px; border-radius:12px; background:#fafcfb; gap:8px; }
#profile-panel summary { padding:12px 0; font-size:14px; }
#account-email-detail { color:var(--text-sub); font-size:13px; overflow-wrap:anywhere; margin:12px 0; }
.input-mode { border:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; min-width:0; }
.input-mode legend { margin-bottom:12px; font-size:14px; font-weight:600; }
.input-mode label { display:flex; gap:8px; align-items:center; border:1px solid #dce7e0; padding:12px; border-radius:10px; font-size:14px; line-height:1.4; min-height:54px; cursor:pointer; }
.input-mode label:has(:checked) { border-color:var(--color-green); background:#edf8f0; }
.input-mode input { accent-color:var(--color-green); flex-shrink:0; }
#local-profile label { display:block; margin:12px 0 8px; font-size:14px; font-weight:600; }
#local-profile input { width:100%; min-height:44px; padding:12px; border:1px solid #cbded1; border-radius:8px; font:inherit; }
.setup-footer { display:grid; gap:12px; line-height:1.6; color:var(--text-sub); }
.setup-footer a { color:var(--color-green); text-underline-offset:4px; }
.active-call-screen { display:grid; grid-template-columns:280px minmax(0,1fr); gap:24px; min-height:560px; padding:28px; border-radius:20px; box-shadow:0 8px 32px #17362b08; overflow:visible; }
/* app.js sets display:flex; restore the intended grid only while visible. */
.active-call-screen:not([style*="none"]) { display:grid !important; }
.call-overview { grid-column:1; grid-row:1; align-self:start; }
.call-header { gap:10px; }
.caller-title { font-size:22px; }
.caller-subtitle { overflow-wrap:anywhere; }
.call-body { padding:24px 0; flex:none; }
.caller-avatar-wrapper { width:110px; height:110px; margin:0 auto; }
.caller-avatar { width:80px; height:80px; }
.avatar-icon { width:40px; height:40px; }
.avatar-ring { display:none; }
.conversation { grid-column:2; grid-row:1 / span 3; min-width:0; padding:24px; background:#fafcfb; border:1px solid #e2eae5; border-radius:12px; }
.conversation h2 { font-size:20px; margin-bottom:6px; }
.conversation-hint { font-size:13px; color:var(--text-sub); margin-bottom:24px; }
.captions-bubble { width:100%; max-width:none; margin:0; background:white; padding:16px; border:1px solid #e2eae5; box-shadow:none; border-radius:10px; }
.caption-body { font-size:16px; line-height:1.7; overflow-wrap:anywhere; }
#text-history { max-height:260px; margin:16px 0; }
#text-history p { background:#edf7f0; padding:12px; margin:8px 0; border-radius:8px; line-height:1.6; }
#toggle-text { border:1px solid #cbded1; border-radius:8px; background:white; color:var(--color-green); padding:10px 16px; min-height:44px; font:inherit; cursor:pointer; }
#customer-text-form { width:100%; margin:16px 0 0; }
#customer-text-form label { display:block; font-size:14px; margin-bottom:8px; }
#customer-text-form button { min-height:44px; font:inherit; }
.call-actions { grid-column:1; grid-row:2; padding:0; gap:16px; align-self:start; }
.action-btn { width:52px; height:52px; }
.action-svg { width:24px; height:24px; }
.action-label { color:var(--text-sub); font-size:12px; }
#active-support-anchor { display:none; }
.customer-call-panel { grid-column:1; grid-row:3; background:transparent; border:0; border-top:1px solid #e2eae5; border-radius:0; padding:16px 0 0; margin:0 !important; font-size:14px; overflow-wrap:anywhere; }
.customer-call-panel p:empty { display:none; }
.customer-call-panel .account-button { background:white; border:1px solid #ccded2; color:var(--color-green); box-shadow:none; border-radius:8px; font-size:14px; min-height:44px; padding:10px; }
.customer-call-panel[data-lifecycle=ended] { font-size:13px; color:var(--text-sub); }
.active-call-screen .customer-call-panel p { margin-bottom:8px; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,textarea:focus-visible { outline:3px solid #16834b; outline-offset:3px; }
@media(max-width:767px) {
 body.call-app { padding:16px 12px; }
 .phone-frame { padding:24px 20px; }
 .active-call-screen { grid-template-columns:minmax(0,1fr); padding:20px 16px 0; gap:20px; }
 .call-overview,.conversation,.call-actions,.customer-call-panel { grid-column:1; grid-row:auto; }
 .call-body { display:none; }
 .call-header { gap:6px; }
 .conversation { padding:16px; }
 .call-actions { grid-row:4; position:sticky; bottom:0; z-index:2; background:white; border-top:1px solid #e2eae5; padding:14px 0 max(16px,env(safe-area-inset-bottom)); margin:0 -16px; }
 .customer-call-panel { grid-row:3; margin-bottom:8px !important; }
 .input-mode { gap:8px; }
 .input-mode label { padding:10px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }