.customer{box-sizing:border-box;max-width:480px;min-height:100dvh;padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));color:#1b1b1b;background:#fff;flex-direction:column;gap:14px;margin:0 auto;font:17px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:flex}.customer [hidden]{display:none!important}.customer h1{margin:8px 0 0;font-size:1.45rem;line-height:1.25}.customer p{margin:0}.customer .notice{flex-direction:column;gap:12px;display:flex}.customer .message{text-align:center;margin-top:30vh;font-size:1.1rem}.customer button{font:inherit;cursor:pointer}.customer .primary,.customer .secondary{border-radius:12px;width:100%;min-height:52px;font-size:1.1rem;font-weight:600}.customer .primary{color:#fff;background:#1f5c99;border:0;margin-top:auto}.customer .primary:disabled{cursor:default;background:#a9bccf}.customer .secondary{color:#1f5c99;background:#fff;border:2px solid #1f5c99}.customer .selfview{aspect-ratio:3/4;background:#111;border-radius:16px;width:100%;max-height:52dvh;position:relative;overflow:hidden}.customer .selfview video{object-fit:cover;width:100%;height:100%}.customer .mirrored{transform:scaleX(-1)}.customer .flip{color:#fff;background:#0000008c;border:0;border-radius:50%;place-items:center;width:52px;height:52px;display:grid;position:absolute;bottom:12px;right:12px}.customer .status{align-items:flex-start;gap:10px;display:flex}.customer .status .dot{background:#c9a227;border-radius:50%;flex:none;width:12px;height:12px;margin-top:.4em}.customer .status.ok .dot{background:#2e7d32}.customer .status.problem .dot{background:#c62828}.customer .status.problem{font-weight:600}.customer .meter{background:#e4e4e4;border-radius:5px;height:10px;overflow:hidden}.customer .meter-fill{transform-origin:0;background:#2e7d32;height:100%;transition:transform 80ms linear;transform:scaleX(0)}.customer .alert{color:#8a1c1c;background:#fdecea;border-radius:10px;padding:12px}.customer .failure{flex-direction:column;flex:1;gap:14px;display:flex}.customer .spinner{border:4px solid #d6e2ee;border-top-color:#1f5c99;border-radius:50%;align-self:center;width:36px;height:36px;animation:.9s linear infinite customer-spin}@keyframes customer-spin{to{transform:rotate(360deg)}}.customer.call{gap:12px}.customer .stage{background:#111;border-radius:16px;flex:1;place-items:center;min-height:48dvh;display:grid;position:relative;overflow:hidden}.customer .stage .remote{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.customer .pip{aspect-ratio:3/4;background:#222;border:2px solid #fff;border-radius:10px;width:30%;position:absolute;top:12px;right:12px;overflow:hidden}.customer .blocked{z-index:1;color:#fff;background:#111111e0;flex-direction:column;justify-content:flex-end;gap:10px;padding:16px;display:flex;position:absolute;inset:0}.customer .blocked .primary{margin-top:0}.customer .blocked-title{font-size:1.2rem;font-weight:700}.customer .pip{z-index:2}.customer .pip video{object-fit:cover;width:100%;height:100%}.customer .pip .flip{width:40px;height:40px;bottom:6px;right:6px}.customer .status-line{text-align:center;font-weight:600}.customer .captions{background:#eef3f8;border-radius:10px;min-height:3em;padding:10px 12px}.customer .captions:empty{display:none}.customer .danger{color:#fff;background:#b3261e;border:0;border-radius:12px;width:100%;min-height:52px;font-size:1.1rem;font-weight:600}.customer .danger:disabled{cursor:default;background:#d9a19d}.customer .confirm{flex-direction:column;gap:10px;display:flex}.customer .confirm p{text-align:center;font-weight:600}
