/* Revision 4 — in-app voice calls: the chat-header call button and the global call overlay (js/callUi.js). Same palette as move.css. */

/* The call button of a chat header (always active, never dimmed). */
.call-btn { width: 40px; height: 40px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; border: 0; cursor: pointer; background: var(--st-available); color: #fff; box-shadow: 0 8px 18px -8px rgba(22, 163, 74, .8); transition: transform .15s var(--ease), filter .15s; }
.call-btn:hover { filter: brightness(1.07); }
.call-btn:active { transform: scale(.93); }
.call-btn svg { width: 19px; height: 19px; }
.card-head .call-btn, .modal-head .call-btn { width: 34px; height: 34px; }
.card-head .call-btn svg, .modal-head .call-btn svg { width: 17px; height: 17px; }

#callRoot { position: relative; z-index: 2800; }

/* Buttons used inside the overlay */
.cl-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; font: 600 12px/1 var(--font); color: var(--ink-2); }
.cl-btn svg { width: 26px; height: 26px; padding: 15px; box-sizing: content-box; border-radius: 50%; color: #fff; background: var(--navy); }
.cl-btn.accept svg { background: var(--st-available); box-shadow: 0 10px 24px -8px rgba(22, 163, 74, .85); }
.cl-btn.decline svg { background: var(--st-sos); box-shadow: 0 10px 24px -8px rgba(220, 38, 38, .8); }
.cl-btn:active svg { transform: scale(.93); }

/* Incoming call: a full-screen sheet that is hard to miss */
.cl-incoming { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: radial-gradient(1200px 700px at 50% 0%, var(--navy-3), var(--navy) 70%); color: #fff; animation: fade .25s var(--ease); }
.cl-inc-card { width: min(380px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cl-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #9db4e6; }
.cl-pulse { position: relative; margin: 16px 0 6px; }
.cl-pulse::before, .cl-pulse::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); animation: clPulse 2s ease-out infinite; }
.cl-pulse::after { animation-delay: 1s; }
@keyframes clPulse { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.cl-inc-card h2 { font-family: var(--serif); font-size: 28px; font-weight: 600; color: #fff; }
.cl-inc-card .cl-sub { font-size: 14px; color: #c3d0ee; }
.cl-incoming .cl-actions { display: flex; gap: 56px; margin-top: 36px; }
.cl-incoming .cl-btn { color: #dbe5fb; }

/* Active / outgoing / ended: a floating card, so people can keep working while they talk */
.cl-dock { position: fixed; right: 16px; bottom: 16px; width: min(360px, calc(100% - 32px)); background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--shadow); padding: 12px 14px; display: flex; align-items: center; gap: 12px; animation: slideUp .3s var(--ease); }
.cl-dock.cl-connected { border-color: color-mix(in srgb, var(--st-available) 55%, transparent); }
.cl-dock.unstable { border-color: var(--st-warn); }
.cl-dock.err { border-color: var(--st-sos); background: color-mix(in srgb, var(--st-sos) 6%, var(--surface)); }
.cl-row { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.cl-txt { min-width: 0; }
.cl-txt b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-st { font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
.cl-dock.err .cl-st { color: var(--st-sos); }
.cl-dock .cl-sub { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cl-dock.cl-connected .cl-sub { color: var(--st-available); font-weight: 700; }
.cl-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); flex: none; }
.cl-ic svg { width: 17px; height: 17px; }
.cl-acts { display: flex; gap: 10px; flex: none; }
.cl-btn.small { flex-direction: row; gap: 0; }
.cl-btn.small svg { width: 18px; height: 18px; padding: 9px; }
.cl-btn.small span { display: none; }
.cl-btn.small.on svg { background: var(--st-warn); }
.cl-dock.cl-ended .cl-btn.small { padding: 8px 14px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 13px; }
/* The driver's chat already shows the queue banner: do not show it twice. */
body:has(.cq-wait) .cl-dock.cl-queued { display: none; }
@media (max-width: 560px) { .cl-dock { right: 12px; left: 12px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom)); } .cl-incoming .cl-actions { gap: 40px; } }