:root{color-scheme:light;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#171717;background:#f5f5f3}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}header{padding:18px 28px;display:flex;align-items:center;gap:20px;border-bottom:1px solid #e7e7e3;background:#fff}header span:first-of-type{margin-left:auto;font-weight:700}.pilot{font-size:11px;border-radius:20px;padding:6px 10px;background:#fff2dc;color:#8a4600;letter-spacing:1px}a{color:#8a4300;text-decoration:none}a:hover{text-decoration:underline}main{max-width:960px;margin:48px auto;padding:0 24px;display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:start}.call-card,.details{background:#fff;border:1px solid #e6e6e1;border-radius:24px;padding:32px}.call-card{text-align:center;box-shadow:0 12px 45px #00000005}.line-icon{width:104px;height:104px;border-radius:30px;background:#181818;color:#ff9e20;display:grid;place-items:center;font-weight:800;font-size:34px;margin:auto}.eyebrow{font-size:11px;letter-spacing:2px;color:#8a4600;font-weight:700;margin:22px 0 8px}h1{font-size:26px;line-height:1.2;margin:0 0 14px}h2{font-size:19px;margin:0 0 16px}.intro,.details p{font-size:15px;line-height:1.65;color:#5e5e59}.status{padding:14px;background:#f6f6f3;border-radius:14px;min-height:50px;font-size:15px;line-height:1.5;overflow-wrap:anywhere}.duration{font-size:28px;font-variant-numeric:tabular-nums;margin:18px 0;letter-spacing:2px}.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}button{font:inherit;font-weight:600;min-height:48px;padding:12px 18px;border:0;border-radius:14px;background:#f18b13;color:#171717;cursor:pointer}button:hover{filter:brightness(.96)}button:disabled{opacity:.45;cursor:not-allowed}.secondary{background:#f0f0ec;border:1px solid #deded8}.danger{background:#c62a24;color:#fff}button:focus-visible,a:focus-visible{outline:3px solid #236ddb;outline-offset:4px}.notice{font-size:12px;line-height:1.6;color:#686860;margin-top:24px}li{font-size:14px;line-height:1.6;padding:0 0 14px 5px}.details ol{padding-left:22px}.details a{display:inline-block;font-size:14px;margin-top:12px}#login{display:block;line-height:1.5;margin-top:15px}body[data-state="connected"] .status{color:#08703c;background:#e8f7ed}body[data-state="failed"] .status{color:#a3231d;background:#fff0ed}@media(max-width:720px){header{padding:14px 16px;gap:12px;font-size:13px}main{grid-template-columns:1fr;margin:20px auto;padding:0 16px;gap:16px}.call-card,.details{padding:24px 20px;border-radius:20px}.line-icon{width:80px;height:80px;font-size:28px;border-radius:24px}h1{font-size:23px}.details{padding:20px}.actions button{flex:1 1 140px}}@media(max-width:360px){header span:first-of-type{font-size:12px}header{gap:8px}.call-card{padding:22px 16px}.pilot{padding:5px 7px}main{padding:0 12px}}@media(max-height:500px) and (min-width:600px){main{margin:16px auto}.call-card{padding:20px}.line-icon{width:56px;height:56px;font-size:21px}.eyebrow{margin-top:12px}.duration{margin:10px}}
/* Make operator reception recognizable without changing customer call styling. */
.hold-status{flex-basis:100%;padding:12px;border-radius:12px;background:#fff4d4;color:#674500;font-size:13px;line-height:1.5;margin:0}#hold[aria-pressed="true"]{background:#ffd21f;border-color:#bf8a00}
.account-callsign{font-variant-numeric:tabular-nums;font-weight:650;overflow-wrap:anywhere;color:#684314}
button.receive{background:#087f49;color:#fff}
.details{min-width:0}.chat-panel{margin-bottom:26px;padding-bottom:24px;border-bottom:1px solid #e6e6e1;scroll-margin-top:16px}.chat-heading{display:flex;align-items:center;gap:12px}.chat-mark{display:grid;place-items:center;flex:0 0 44px;height:44px;background:#181818;color:#ff9e20;border-radius:14px;font-weight:800;font-size:15px}.chat-heading h2{margin:0}.chat-heading p{margin:4px 0 0;font-size:12px}.chat-status{background:#fff4e3;border-radius:12px;padding:10px;overflow-wrap:anywhere}.details .chat-status{font-size:12px;line-height:1.5;color:#684314}.chat-peer{padding:12px 0;font-size:13px;overflow-wrap:anywhere}.chat-peer span{display:block;font-size:12px;margin-top:4px}.details .chat-peer p{font-size:12px;line-height:1.4;margin:5px 0;color:#08703f}#chat-list{display:grid;gap:8px;max-height:180px;overflow-y:auto}#chat-list button{font-size:12px;text-align:left;padding:10px 12px}#chat-log{list-style:none;padding:10px;margin:0;background:#f5f5f3;border-radius:14px;height:300px;overflow:auto;overscroll-behavior:contain}.chat-message{padding:12px!important;border-radius:12px;background:#fff;border:1px solid #e6e6e1;margin:0 18px 10px 0;overflow-wrap:anywhere}.chat-message.mine{margin-left:18px;margin-right:0;background:#fff1db;border-color:#ffe0ac}.chat-author{font-size:11px;font-weight:700;color:#6d4c20}.details .chat-message p{font-size:14px;line-height:1.5;color:#171717;margin:6px 0;white-space:pre-wrap}.chat-message time,.chat-receipt{font-size:10px;color:#62625d;display:inline-block}.chat-receipt{float:right;margin-left:8px}#chat-form{margin-top:16px}#chat-form label{display:block;font-size:13px;font-weight:600}#chat-text{width:100%;font:inherit;font-size:14px;min-height:84px;max-height:240px;border:1px solid #a7a7a0;border-radius:12px;padding:10px;resize:vertical;margin:8px 0}#chat-send,#chat-close{width:100%;margin-top:6px}#chat-text:focus-visible{outline:3px solid #236ddb;outline-offset:2px}.details #chat-cost{font-size:12px;line-height:1.5;margin-bottom:0}.chat-panel [disabled]{cursor:not-allowed}@media(max-width:720px){#chat-log{height:280px}}
.caller-info,.sms-panel{text-align:left;background:#f6f6f3;border:1px solid #e6e6e1;border-radius:16px;padding:16px;margin:16px 0;overflow-wrap:anywhere}.caller-info h2,.sms-panel h2{font-size:16px;margin-bottom:10px}.caller-info p,.sms-panel p{font-size:14px;line-height:1.5;margin:8px 0}.caller-info .notice{font-size:12px;margin-top:10px;color:#686860}#caller-name{font-weight:700}#caller-phone{font-variant-numeric:tabular-nums}.sms-panel label{display:block;font-size:13px;line-height:1.5}.sms-panel textarea{width:100%;resize:vertical;min-height:90px;max-height:240px;border:1px solid #a7a7a0;border-radius:10px;padding:10px;font:inherit;margin:8px 0;box-sizing:border-box}.sms-confirm{margin:4px 0 14px}.sms-confirm input{width:18px;height:18px;vertical-align:middle;accent-color:#087f49}.sms-panel textarea:focus-visible,.sms-confirm input:focus-visible{outline:3px solid #236ddb;outline-offset:2px}.sms-panel button{width:100%}
.microphone-control{margin:0 0 16px}.microphone-control button{width:52px;height:52px;padding:0;border-radius:50%;display:inline-grid;place-items:center;vertical-align:middle}.microphone-control svg{width:24px;height:24px;pointer-events:none}.microphone-control .mic-off{display:none}#mute[aria-pressed="true"] .mic-on{display:none}#mute[aria-pressed="true"] .mic-off{display:block}.microphone-control p{font-size:12px;line-height:1.5;margin:8px 0 0;color:#5e5e59;overflow-wrap:anywhere}#mute[aria-pressed="true"]{background:#fff0ed;border-color:#c62a24;color:#a3231d}
/* Explicit optional consent, never preselected. Fits narrow phones and tablets. */
.recording-panel { margin: 20px 0; padding: 18px; border: 1px solid #e2e4e8; border-radius: 20px; background: #fffaf0; text-align: left; overflow-wrap: anywhere; }
.recording-panel h2 { font-size: 18px; margin: 0 0 10px; }
.recording-panel p { font-size: 14px; line-height: 1.55; }
.recording-panel label { display: flex; align-items: flex-start; gap: 12px; font-weight: 600; line-height: 1.5; }
.recording-panel input { flex: 0 0 22px; width: 22px; height: 22px; accent-color: #f08b0b; }
#recording-status { font-weight: 600; color: #8a4d00; }
#camera-status { font-weight: 700; color: #8a4d00; }
#camera-preview { display: block; width: 100%; max-height: 240px; aspect-ratio: 4 / 3; object-fit: contain; background: #181818; border-radius: 14px; margin: 12px 0; }
#camera-panel button { width: 100%; margin-top: 12px; white-space: normal; }
#camera-consent:focus-visible { outline: 3px solid #236ddb; outline-offset: 2px; }
/* Account documents are standalone, not inside the customer modal. */
body[data-account-screen] main{max-width:1120px;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
body[data-account-screen] .call-card{text-align:left;min-width:0}
body[data-account-screen] .mx-customer-body{padding:18px 0;overflow:visible;overflow-wrap:anywhere}
body[data-account-screen] label{display:block;margin:16px 0 8px;font-size:14px;font-weight:600;line-height:1.5}
body[data-account-screen] input:not([type=checkbox]),body[data-account-screen] textarea{display:block;width:100%;min-width:0;font:inherit;padding:14px;margin-top:7px;border:1px solid #bfc4cc;border-radius:12px;background:#fff;color:#171717}
body[data-account-screen] textarea{min-height:90px;resize:vertical}
body[data-account-screen] input:focus-visible,body[data-account-screen] textarea:focus-visible{outline:3px solid #236ddb;outline-offset:2px}
body[data-account-screen] .mx-customer-primary{background:#f18b13}
body[data-account-screen] .mx-customer-tabs button[aria-pressed=true]{background:#fff1db;border-color:#f18b13}
body[data-account-screen] .mx-customer-card{background:#f9faf9;margin-top:20px}
body[data-account-screen] button{white-space:normal;max-width:100%}
body[data-account-screen] .mx-customer-body p{font-size:14px;color:#545850}
body[data-account-screen] [data-mfa-secret]{font-family:ui-monospace,monospace;letter-spacing:1px;font-size:13px}
body[data-account-screen] #account-status,body[data-account-screen] .mfa-feedback{padding:14px;border-radius:12px;background:#f6f6f3;overflow-wrap:anywhere;scroll-margin:16px}
body[data-account-screen] #account-status:empty,body[data-account-screen] .mfa-feedback:empty{display:none}
body[data-account-screen] .mfa-feedback.mx-customer-error{color:#a3231d;background:#fff0ed}
@media(max-width:720px){body[data-account-screen] main{grid-template-columns:1fr}body[data-account-screen] .mx-customer-card{padding:14px}}