/* Mandatory Pre-Order Video Call - customer + agent screens. Mobile-first, RTL-safe (logical
   properties only), matching the palette already used by customer-order-status.css. */
.video-call-screen{display:grid;gap:14px;text-align:start;font-family:inherit;color:#1f3542}
.video-call-screen .gate-eyebrow{font-size:11px;font-weight:800;letter-spacing:.03em;color:#006c83;text-transform:uppercase}
.video-call-screen h2{margin:0;font-size:20px}
.video-call-screen p{margin:0;font-size:13px;line-height:1.6;color:#5c737e}
.video-call-screen .form-error{margin:0;font-size:12.5px;border-radius:10px;padding:9px 12px;background:#fdece9;color:#8a2c1f}
.video-call-screen .form-error[data-kind="warn"]{background:#fff6e0;color:#7b580c}

.video-call-screen .camera-frame{display:grid;gap:10px;justify-items:center;text-align:center;border:1px solid #d9ebef;border-radius:18px;padding:22px 16px;background:#f7fbfc}
.video-call-screen .camera-frame b{font-size:15px}
.video-call-screen .camera-frame small{font-size:12px;color:#667b85}
.video-call-screen .camera-frame.completed{background:#eafbf3;border-color:#9be0c4}
.video-call-screen .camera-frame.failed,.video-call-screen .camera-frame.expired{background:#fdf1ee;border-color:#f0c3b6}
.video-call-screen .spinner{width:34px;height:34px;border-radius:50%;border:3px solid #d9ebef;border-top-color:#00aac4;animation:vc-spin 0.9s linear infinite}
@keyframes vc-spin{to{transform:rotate(360deg)}}

.video-call-stage{position:relative;width:100%;aspect-ratio:3/4;max-height:60vh;border-radius:18px;overflow:hidden;background:#0d1b22}
.video-call-stage video{width:100%;height:100%;object-fit:cover;display:block}
.video-call-stage #vc-remote-video{position:absolute;inset:0}
.video-call-stage #vc-local-video{position:absolute;width:34%;max-width:130px;aspect-ratio:3/4;bottom:12px;inset-inline-end:12px;border-radius:12px;border:2px solid #fff;box-shadow:0 6px 20px #00000055;transform:scaleX(-1)}
.video-call-stage .remote-placeholder{position:absolute;inset:0;display:grid;place-items:center;background:#0d1b22;color:#cfe8ee;font-size:13px;text-align:center;padding:0 20px}
.video-call-stage .conn-badge{position:absolute;top:12px;inset-inline-start:12px;background:#000000aa;color:#fff;font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:999px}
.video-call-stage[data-connection="connected"] .conn-badge{background:#0d7a4aaa}
.video-call-stage[data-connection="failed"] .conn-badge,.video-call-stage[data-connection="disconnected"] .conn-badge{background:#a33a2aaa}

.video-call-screen .call-controls{justify-content:center}
.video-call-screen .call-controls button[aria-pressed="false"]{background:#f4e4e2;color:#8a2c1f}

.video-call-screen .button-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.video-call-screen .button-row button{min-height:44px;padding:0 18px;border-radius:12px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;border:0}
.video-call-screen .btn.primary{background:#00aac4;color:#fff}
.video-call-screen .ghost{background:#edf5f7;color:#244759}

/* ---- Agent / operator console (video-call-agent.html) ---------------------------------------- */
.vc-agent-shell{display:grid;gap:16px;max-width:1080px;margin:0 auto;padding:18px 16px calc(40px + env(safe-area-inset-bottom,0px))}
.vc-agent-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vc-agent-top h1{font-size:19px;margin:0}
.vc-queue-grid{display:grid;gap:10px}
.vc-queue-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #d9ebef;border-radius:14px;padding:12px 14px;background:#fff}
.vc-queue-row b{font-size:14px}
.vc-queue-row small{display:block;color:#667b85;font-size:11.5px;margin-top:2px}
.vc-tag{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:999px;background:#edf5f7;color:#006c83}
.vc-tag[data-status="ASSIGNED"]{background:#fff2d6;color:#7b580c}
.vc-tag[data-status="IN_PROGRESS"]{background:#e2f7ea;color:#0d7a4a}
.vc-agent-empty{text-align:center;padding:30px 10px;color:#667b85;font-size:13px}
.vc-agent-call{display:grid;gap:12px}
.vc-agent-notes{width:100%;min-height:70px;border:1px solid #d9ebef;border-radius:12px;padding:10px;font:inherit;font-size:13px;resize:vertical}