.staff-chat { max-width:1000px; margin:0 auto; height:min(75dvh,760px); min-height:200px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:22px; background:linear-gradient(145deg,#20151e,#101014 55%); overflow:hidden; }
.staff-chat-header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid var(--line); flex-shrink:0; }
.staff-chat-header h1,.staff-chat-header h2 { font-size:25px; margin:4px 0; }
.staff-chat-header p { margin:0; color:var(--muted); font-size:13px; }
.staff-chat-header [data-chat-connection] { font-size:11px; color:var(--muted); text-align:right; }
.staff-chat-history { display:flex; gap:12px; justify-content:center; flex-shrink:0; }
.staff-chat-history button:not([hidden]) { min-height:38px; }
.staff-chat [hidden] { display:none!important; }
.staff-chat-messages { flex:1; min-height:0; overflow-y:auto; overflow-anchor:none; overscroll-behavior:contain; padding:16px 20px; display:flex; flex-direction:column; gap:12px; scrollbar-width:thin; }
.staff-chat-messages>[data-chat-empty] { margin:auto; color:var(--muted); text-align:center; }
.staff-chat-message { position:relative; box-sizing:border-box; flex-shrink:0; align-self:flex-start; width:fit-content; max-width:calc(100% - 40px); margin-left:40px; border:1px solid #ffffff0b; border-radius:4px 14px 14px; padding:9px 12px; background:#211d24; }
.staff-chat-message.is-own { align-self:flex-end; margin-left:0; margin-right:40px; background:#35212d; border-color:#ed47801c; border-radius:14px 4px 14px 14px; }
.staff-chat-message header { display:flex; align-items:center; gap:10px; font-size:12px; }
.staff-chat-message>.chat-avatar { position:absolute; top:2px; left:-40px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; overflow:hidden; background:#5a2d42; color:#fff; font-size:12px; font-weight:700; }
.staff-chat-message.is-own>.chat-avatar { left:auto; right:-40px; }
.chat-message-identity { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 7px; min-width:0; }
.chat-message-identity strong { overflow-wrap:anywhere; }
.chat-message-identity time { flex-basis:100%; }
.staff-chat-widget .staff-chat-message { max-width:calc(100% - 40px); }
.chat-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.staff-chat-message header span { color:#efa5c0; font-size:10px; text-transform:capitalize; }
.staff-chat-message time { color:var(--muted); font-size:10px; }
.staff-chat-message p { white-space:pre-wrap; overflow-wrap:anywhere; margin:6px 0 0; font-size:14px; line-height:1.5; }
.staff-chat-compose { flex-shrink:0; margin:0; padding:12px 18px; border-top:1px solid var(--line); background:#131116; }
.staff-chat-label { display:block; font-size:12px; margin-bottom:6px; }
.staff-chat-compose>div { display:flex; align-items:stretch; gap:10px; }
.staff-chat-compose textarea { min-width:0; width:100%; min-height:48px; max-height:100px; resize:none; font:inherit; font-size:16px; border:1px solid #49404a; border-radius:12px; padding:10px; background:#1d1a21; color:#fff; }
.staff-chat-compose button { flex-shrink:0; min-width:74px; }
.staff-chat-compose p { display:flex; justify-content:space-between; gap:10px; font-size:11px; color:var(--muted); margin:7px 0 0; }
.staff-chat-compose [data-chat-count] { white-space:nowrap; }
.staff-chat-rules { margin-bottom:8px; font-size:12px; color:var(--muted); }
.staff-chat-rules summary { cursor:pointer; color:#fff; }
.staff-chat-rules ul { max-height:130px; overflow-y:auto; padding-left:20px; line-height:1.5; }
.staff-chat-compose [data-chat-accept] { width:100%; margin-bottom:8px; padding:10px; border:1px solid #81314f; border-radius:10px; background:#451b30; color:#fff; cursor:pointer; }
.chat-room-bar { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 12px; flex-shrink:0; font-size:11px; }
.chat-room-bar select { width:auto; padding:6px; margin-right:auto; }
.chat-bans button { border:1px solid #49404a; border-radius:8px; background:#242128; color:#fff; padding:7px; cursor:pointer; }
.chat-room-bar button { display:grid; place-items:center; flex-shrink:0; width:36px; height:36px; padding:8px; border:0; border-radius:8px; background:transparent; box-shadow:none; color:#a69aa4; cursor:pointer; }
.chat-room-bar button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.chat-room-bar button:hover,.chat-room-bar button[aria-expanded=true] { color:#ff87a8; }
.chat-room-bar button.is-enabled { color:#72d6a1; }
.chat-room-bar button:disabled { opacity:.45; cursor:default; }
.chat-room-bar button:focus-visible { outline:2px solid #ff87a8; outline-offset:1px; }
@media(pointer:coarse) { .chat-room-bar button { width:44px; height:44px; } }
.chat-room-bar [data-chat-room-status] { flex-basis:100%; color:var(--muted); }
.chat-bans { flex-shrink:0; max-height:150px; overflow:auto; padding:10px; font-size:12px; border-bottom:1px solid var(--line); }
.chat-bans>div { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; overflow-wrap:anywhere; }
.chat-message-actions { display:flex; flex-shrink:0; justify-content:flex-end; gap:2px; margin-left:auto; }
.chat-message-actions:empty { display:none; }
.chat-message-actions button { display:grid; place-items:center; width:28px; height:32px; padding:5px; border:0; border-radius:6px; background:transparent; box-shadow:none; color:#9c7e8a; cursor:pointer; transition:color .15s ease; }
.chat-message-actions button:hover,.chat-message-actions button:focus-visible { color:#ff739c; background:transparent; }
.chat-message-actions button:focus-visible { outline:2px solid currentColor; outline-offset:1px; }
.chat-message-actions svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.chat-word-editor { flex-shrink:0; max-height:45%; overflow-y:auto; margin:0; padding:12px; border-bottom:1px solid var(--line); font-size:12px; }
.chat-word-editor label { display:block; font-weight:700; }
.chat-word-editor p { margin:6px 0; color:var(--muted); line-height:1.4; }
.chat-word-editor textarea { display:block; width:100%; min-height:80px; max-height:140px; resize:vertical; font:inherit; font-size:16px; }
.chat-word-editor button { margin-top:8px; padding:8px 12px; border:1px solid #81314f; border-radius:8px; background:#451b30; color:#fff; cursor:pointer; }
.chat-word-editor [role=status] { display:block; margin-top:6px; color:var(--muted); }
@media(pointer:coarse) { .chat-message-actions button { width:44px; height:44px; } }
.staff-chat-compose { max-height:60%; overflow-y:auto; }
@media(max-width:600px) { .staff-chat { border-radius:16px; } .staff-chat-header { padding:10px 12px; } .staff-chat-header h1 { font-size:21px; } .staff-chat-header p { display:none; } .staff-chat-messages { padding:12px 10px; } .staff-chat-compose { padding:10px; } .staff-chat-message { max-width:94%; } }
.staff-chat-widget { position:fixed; z-index:1100; right:max(12px,env(safe-area-inset-right)); bottom:calc(12px + env(safe-area-inset-bottom)); width:min(420px,calc(100vw - 24px)); height:min(560px,calc(100dvh - 24px)); min-height:0; margin:0; box-shadow:0 20px 70px #0009; }
.staff-chat-widget { box-sizing:border-box; max-width:none; }
html.chat-page-gestures-locked,body.chat-page-gestures-locked { overscroll-behavior:none; }
.staff-chat-widget { touch-action:pan-y; overscroll-behavior:none; }
.staff-chat-widget .staff-chat-messages,.staff-chat-widget .staff-chat-compose,.staff-chat-widget .chat-bans,.staff-chat-widget .chat-word-editor,.staff-chat-widget textarea { overscroll-behavior:contain; }
.chat-safe-probe { position:fixed; visibility:hidden; pointer-events:none; width:0; height:0; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.chat-drag-handle { cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
.chat-drag-handle button { cursor:pointer; touch-action:manipulation; }
.chat-drag-handle:focus-visible { outline:2px solid #ff87a8; outline-offset:-3px; }
.is-adjusting,.is-adjusting * { user-select:none!important; -webkit-user-select:none!important; }
.is-adjusting .chat-drag-handle { cursor:grabbing; }
.chat-resize-handle { position:absolute; z-index:5; touch-action:none; }
.chat-resize-n,.chat-resize-s { height:7px; left:18px; right:18px; cursor:ns-resize; }
.chat-resize-n { top:0; }.chat-resize-s { bottom:0; }
.chat-resize-e,.chat-resize-w { width:7px; top:18px; bottom:18px; cursor:ew-resize; }
.chat-resize-e { right:0; }.chat-resize-w { left:0; }
.chat-resize-ne,.chat-resize-nw,.chat-resize-se,.chat-resize-sw { width:18px; height:18px; }
.chat-resize-ne { top:0; right:0; cursor:nesw-resize; }.chat-resize-nw { top:0; left:0; cursor:nwse-resize; }
.chat-resize-se { bottom:0; right:0; cursor:nwse-resize; }.chat-resize-sw { bottom:0; left:0; cursor:nesw-resize; }
.chat-resize-se::after { content:''; position:absolute; right:5px; bottom:5px; width:7px; height:7px; border-right:2px solid #9c7e8a; border-bottom:2px solid #9c7e8a; border-radius:0 0 3px; }
.is-expanded .chat-resize-handle { display:none; }.is-expanded .chat-drag-handle { cursor:default; }
.chat-room-bar .chat-reset-window { font-size:25px; line-height:1; }
@media(pointer:coarse) { .chat-resize-n,.chat-resize-s { height:12px; }.chat-resize-e,.chat-resize-w { width:12px; }.chat-resize-ne,.chat-resize-nw,.chat-resize-se,.chat-resize-sw { width:24px; height:24px; } }
.staff-chat-widget[hidden],.staff-chat-launcher[hidden] { display:none!important; }
.staff-chat-launcher { position:fixed; z-index:1099; right:max(12px,env(safe-area-inset-right)); bottom:calc(12px + env(safe-area-inset-bottom)); display:grid; place-items:center; width:52px; height:52px; border:0; border-radius:50%; padding:12px; background:#ae1649; color:#fff; box-shadow:none; cursor:pointer; }
.staff-chat-launcher:focus:not(:focus-visible) { outline:none; }
.staff-chat-launcher svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.chat-unread-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; margin-left:6px; border-radius:999px; background:#ed2460; color:#fff; font:700 10px/1 sans-serif; vertical-align:middle; font-variant-numeric:tabular-nums; }
.chat-unread-badge[hidden] { display:none!important; }
.staff-chat-launcher>.chat-unread-badge { position:absolute; top:-4px; right:-5px; margin:0; min-width:22px; height:22px; border:2px solid #17121a; }
.staff-chat-close { flex-shrink:0; width:40px; height:40px; border:1px solid var(--line); border-radius:12px; color:#fff; background:#242128; cursor:pointer; font-size:24px; }
.staff-chat-widget .staff-chat-header { padding:12px; gap:8px; }
.staff-chat-widget .staff-chat-header>div { margin-right:auto; }
.staff-chat-widget.is-expanded { z-index:1200; left:0; right:0; width:100%; max-width:none; border:0; border-radius:0; box-sizing:border-box; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.staff-chat-widget.is-expanded .staff-chat-messages { padding:16px max(12px,calc((100% - 1000px)/2)); }
.staff-chat-compose .chat-attach { min-width:36px; width:36px; padding:6px; align-self:center; border:0; background:transparent; color:#c49aaa; cursor:pointer; }
.chat-attach svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.staff-chat-compose .chat-image-preview { align-items:center; justify-content:flex-start; margin-bottom:8px; }
.chat-image-preview img { max-height:90px; max-width:160px; object-fit:contain; border-radius:8px; }
.staff-chat-compose [data-chat-remove-image] { min-width:32px; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:#242128; color:#fff; cursor:pointer; font-size:22px; }
.chat-screenshot { display:block; margin:8px 0; }
.chat-screenshot { cursor:zoom-in; }
.chat-image-dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:64px max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom));border:0;background:rgba(8,7,10,.95);color:#fff;overscroll-behavior:contain;box-sizing:border-box}
.chat-image-dialog[open]{display:flex;align-items:center;justify-content:center}
.chat-image-dialog::backdrop{background:rgba(0,0,0,.8)}
.chat-image-dialog>img{display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.chat-image-close{position:absolute;right:max(18px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));width:44px;height:44px;border:1px solid #ffffff30;border-radius:50%;background:#25202a;color:#fff;font:30px/1 system-ui;cursor:pointer}
.chat-image-close:focus-visible{outline:2px solid #ff528a;outline-offset:3px}
.chat-image-error{position:absolute;bottom:25px;left:20px;right:20px;text-align:center;color:#e6ccd8}
.chat-screenshot img { display:block; max-width:100%; max-height:240px; width:auto; object-fit:contain; border-radius:10px; }
.staff-chat-widget .staff-chat-header h2 { font-size:20px; }
.staff-chat-widget .staff-chat-header p { display:none; }
.staff-chat-widget .staff-chat-compose { padding:10px; }
.staff-chat-widget .staff-chat-messages { padding:12px; }
.discover-landscape-video .staff-chat-widget,.discover-landscape-video .staff-chat-launcher { display:none!important; }
@media(max-height:450px) { .staff-chat-widget .staff-chat-compose p,.staff-chat-widget .staff-chat-label,.staff-chat-widget .eyebrow { display:none; } .staff-chat-widget .staff-chat-header { padding:6px 10px; } .staff-chat-widget textarea { min-height:40px; height:40px; } }
.chat-guest-name { padding:12px 16px; border-top:1px solid #393039; }
.chat-guest-name[hidden] { display:none; }
.chat-guest-name label { display:block; margin-bottom:7px; font-size:12px; }
.chat-guest-name > div { display:flex; gap:8px; align-items:center; }
.chat-guest-name input { flex:1; min-width:0; width:100%; font-size:16px; }
.chat-guest-name button { flex-shrink:0; }
.chat-guest-name [role="status"] { display:block; font-size:12px; color:#ffadc1; }
