:root{font-family:var(--ui-font-family);font-size:var(--ui-font-body);color:var(--text);background:var(--bg);font-synthesis:none;--text:#f2f0e9;--surface:#14161a;--bg:#101114;--panel:#191b20;--line:#48484c;--muted:#b4b4b8;--accent:#e7c571;--warm:#efc18d;--danger:#f4a19a;--success:#8be398;--private:#a9c9f2;--cinema-chat-height:var(--ui-cinema-chat-height);--radius:3px;--status-font-size:var(--ui-font-12);--status-line-height:1.5;--status-gap:var(--ui-size-12);--status-dot-gap:var(--ui-size-6);--status-dot-size:var(--ui-size-7);--status-bottom-space:var(--ui-size-10);--status-total-width:var(--ui-size-60);--status-state-width:var(--ui-size-80);color-scheme:dark}
*{box-sizing:border-box}
html{overscroll-behavior-y:none}
body{margin:0;min-width:0;min-height:100dvh}
button,input,select,textarea{font:inherit;color:inherit;border-radius:var(--field-radius,8px)}
button,a,input,select{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
button{cursor:pointer;border:1px solid var(--line);border-style:var(--button-border-style,solid);border-radius:var(--button-radius,8px);background:color-mix(in srgb,var(--panel),var(--accent) 5%);padding:var(--ui-space-12) var(--ui-space-18);min-height:var(--ui-size-44)}
button:disabled{cursor:not-allowed;opacity:.42}
button:hover:not(:disabled){background:color-mix(in srgb,var(--panel),var(--accent) 12%);border-color:color-mix(in srgb,var(--line),var(--accent) 45%)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:var(--ui-space-3)}
a{color:inherit;text-decoration:none}
button.primary,.play-button{background:var(--accent);color:var(--on-accent,#202517);border-color:var(--accent);font-weight:600}
button.primary:hover:not(:disabled){background:color-mix(in srgb,var(--accent),var(--text) 12%)}
.text-button{border:none;background:transparent;padding:var(--ui-space-10) var(--ui-space-6);color:var(--muted)}
.text-button:hover:not(:disabled){background:transparent;color:var(--text)}
.icon-button{display:inline-grid;place-items:center;min-width:var(--ui-size-44);width:var(--ui-size-44);height:var(--ui-size-44);padding:var(--ui-space-10);flex-shrink:0}
.ui-icon{display:block;width:var(--ui-icon-22);height:var(--ui-icon-22);pointer-events:none;flex-shrink:0}
.gif-icon{font-size:var(--ui-font-12);font-weight:750;border:1.5px solid currentColor;padding:var(--ui-space-2)}
h1,h2,h3,p{margin-top:0}
h1{font-size:var(--ui-font-heading);line-height:1.1;font-weight:500;letter-spacing:-.04em}
h2{font-size:var(--ui-font-20);font-weight:500}
p{line-height:1.6}
.muted{color:var(--muted)}
.small{font-size:var(--ui-font-12);line-height:1.5}
.network-status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--status-dot-gap) var(--status-gap);font-size:var(--status-font-size);line-height:var(--status-line-height);margin-bottom:var(--status-bottom-space)}
.network-count{display:inline-flex;min-width:var(--status-state-width);align-items:center;gap:var(--status-dot-gap);white-space:nowrap;font-variant-numeric:tabular-nums}
.network-count:first-child{min-width:var(--status-total-width)}
.network-count i{width:var(--status-dot-size);height:var(--status-dot-size);border-radius:50%;background:currentColor;flex:none}
.status-online{color:var(--success)}
.status-offline{color:var(--danger)}
.network-status[data-stale=true] .network-count{color:var(--muted)}
.eyebrow{font-size:var(--ui-font-11);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:var(--ui-size-1);height:var(--ui-size-1);overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:fixed;left:var(--ui-size-20);top:calc(-1 * var(--ui-size-100));background:var(--accent);color:#111;padding:var(--ui-space-12);z-index:20}
.skip-link:focus{top:var(--ui-size-12)}
.login-wordmark{color:var(--accent)}
.login-wordmark span{color:var(--text)}
.theme-picker{display:grid;grid-template-columns:var(--ui-size-18) minmax(0,1fr) var(--ui-size-18);align-items:center;width:var(--ui-size-128);max-width:100%;height:var(--ui-size-30);gap:var(--ui-space-2);color:var(--text)}
.theme-picker [data-theme-name]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:var(--ui-font-12);font-weight:500;user-select:none}
.theme-picker button{position:relative;display:grid;place-items:center;min-width:0;width:100%;min-height:var(--ui-size-30);height:var(--ui-size-30);padding:0;line-height:1}
.theme-picker svg{display:block;width:var(--ui-icon-18);height:var(--ui-icon-18);pointer-events:none}
.login .login-wordmark{margin-bottom:var(--ui-space-24)}
.login>.theme-picker{width:var(--ui-size-180);grid-template-columns:var(--ui-size-28) minmax(0,1fr) var(--ui-size-28);margin:0 auto var(--ui-space-24)}
.login>.theme-picker [data-theme-name]{font-size:var(--ui-font-14)}
.private-code-row{position:relative;display:flex;align-items:center;width:max-content}
.revealed-code{text-align:center;color:var(--text);font-size:var(--ui-font-22);font-variant-numeric:tabular-nums;letter-spacing:.1em;white-space:nowrap;user-select:all;line-height:var(--ui-size-32)}
.header-action{width:var(--ui-action-size);min-width:var(--ui-action-size);height:var(--ui-action-size);min-height:var(--ui-action-size);padding:0;border:1px solid transparent;border-radius:var(--icon-radius,7px);background:transparent;color:var(--accent);box-shadow:none}
.header-action .ui-icon{width:calc(var(--ui-action-size) - var(--ui-icon-6));height:calc(var(--ui-action-size) - var(--ui-icon-6))}
.header-action:hover:not(:disabled){background:color-mix(in srgb,var(--accent),transparent 88%);border-color:transparent}
.header-action.framed-action{border-color:color-mix(in srgb,var(--accent),var(--line) 55%);background:color-mix(in srgb,var(--accent),var(--panel) 92%)}
.header-action.framed-action:hover:not(:disabled){border-color:var(--accent);background:color-mix(in srgb,var(--accent),var(--panel) 85%)}
.header-action.confirm-button{color:#a6edb0;background:#213c2b;border-color:#436f50}
.header-action.confirm-button:hover:not(:disabled){background:#2b4c35;border-color:#639b70}
.header-action.cancel-button{color:#f4a1a1;background:#432627;border-color:#754346}
.header-action.cancel-button:hover:not(:disabled){background:#583031;border-color:#a35b60}
.media-choices{display:grid;gap:var(--ui-space-2);flex-shrink:0}
.media-choice-row{display:flex;align-items:center;gap:var(--ui-space-3)}
.media-choice-row>.ui-icon{width:var(--ui-icon-20);height:var(--ui-icon-20);color:var(--muted);margin-right:var(--ui-space-1)}
.media-choice-row button,.media-flag{display:inline-grid;place-items:center;min-width:var(--ui-size-25);width:var(--ui-size-25);min-height:var(--ui-size-22);height:var(--ui-size-22);padding:0;font-size:var(--ui-font-21);line-height:1;border:1px solid transparent;border-radius:4px;background:transparent;box-shadow:none;opacity:.38}
.media-choice-row button[aria-pressed=true],.media-flag[data-selected=true]{opacity:1;border-color:color-mix(in srgb,var(--accent),transparent 35%);background:color-mix(in srgb,var(--accent),transparent 88%)}
.media-choice-row button:hover:not(:disabled){opacity:1;background:color-mix(in srgb,var(--accent),transparent 85%)}
.media-choices-small{gap:0}
.media-choices-small .media-choice-row{gap:var(--ui-space-1)}
.media-choices-small .ui-icon{width:var(--ui-icon-12);height:var(--ui-icon-12);margin-right:var(--ui-space-1)}
.media-choices-small button,.media-choices-small .media-flag{min-width:var(--ui-size-19);width:var(--ui-size-19);min-height:var(--ui-size-18);height:var(--ui-size-18);font-size:var(--ui-font-13)}
main{max-width:var(--ui-size-1280);margin:auto;padding:var(--ui-space-32) var(--ui-space-32) var(--ui-space-50);outline:none}
.initial-loading{padding:var(--ui-space-120) 0;text-align:center;color:var(--muted)}
body:not(.logged-in) main{min-height:100dvh;display:grid;place-items:center;padding:var(--ui-space-24)}
.login{width:min(100%,var(--ui-size-440));text-align:center}
.login .login-wordmark{font-size:var(--ui-font-login);font-weight:500;letter-spacing:-.065em;line-height:1.1;margin:0 0 var(--ui-space-48)}
.login-code-box{position:relative;width:var(--ui-size-220);height:var(--ui-size-70);margin:auto}
.code-input{width:100%;height:100%;text-align:center;text-transform:uppercase;background:var(--panel);border:1px solid var(--line);color:var(--accent);font-size:var(--ui-font-input);letter-spacing:.18em;padding:0 0 0 .18em;outline:none;caret-color:#77aaff}
.login .code-input:focus-visible{outline:none}
.login-code-box:has(input:focus):not(:has(input[data-filled])) .login-caret{position:absolute;top:50%;left:50%;width:var(--ui-size-2);height:var(--ui-size-30);background:#77aaff;transform:translate(-50%,-50%);pointer-events:none}
.login-code-box:not(:has(input[data-filled])) input{caret-color:transparent}
.duo-picker{max-width:var(--ui-size-960);margin:var(--ui-space-32) auto var(--ui-space-70)}
.duo-picker h1{text-align:center;font-size:var(--ui-font-rooms);font-weight:var(--display-weight,750);letter-spacing:var(--display-spacing,-.065em);margin-bottom:var(--ui-space-36);color:var(--text)}
.rooms-wordmark span{color:var(--accent)}
.duo-choice-list{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--ui-space-30)}
.room-choice,.partner-circle.add-room,.partner-circle.pending-room{width:var(--ui-size-180);aspect-ratio:1}
.partner-circle{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);display:grid;place-content:center;padding:var(--ui-space-18)}
.room-choice>.partner-circle{width:100%;height:100%}
.room-partner-name{position:relative;z-index:1;font-size:var(--ui-font-25);text-align:center;overflow-wrap:anywhere;align-self:end;padding:var(--ui-space-12);background:#111b;color:#f9f7f1;border-radius:var(--button-radius,10px)}
.room-partner-photo{position:absolute;inset:0;display:grid;place-items:center}
.room-partner-photo>svg{width:var(--ui-icon-70);height:var(--ui-icon-70);color:var(--muted)}
.room-partner-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.room-choice .partner-circle{place-content:stretch;align-items:end;padding:var(--ui-space-10)}
.invitation-cooldown{display:flex;flex-direction:column;align-items:center;gap:var(--ui-space-10);font-size:var(--ui-font-22);font-weight:600}
.add-room[aria-disabled=true]{cursor:default;color:var(--accent)}
.add-room .ui-icon,.pending-room .ui-icon{width:var(--ui-icon-38);height:var(--ui-icon-38)}
.invitation-outbox{display:none}
body.chat-open{padding-right:var(--ui-chat-reserve)}
body:not(.in-room) .chat-panel{display:none!important}
.chat-panel{position:fixed;top:calc(var(--header-height) + var(--ui-size-16));right:var(--ui-size-16);bottom:var(--ui-size-16);width:var(--ui-chat-width);display:flex;flex-direction:column;min-height:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);z-index:4;overflow:hidden}
.chat-history{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:var(--ui-space-22) var(--ui-space-18);scrollbar-width:thin}
.chat-messages{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--ui-space-15)}
.chat-message{max-width:90%;align-self:flex-start;min-width:0}
.chat-message.mine{align-self:flex-end}
.chat-message-label{display:block;font-size:var(--ui-font-10);color:inherit;opacity:.7;margin-bottom:var(--ui-space-5)}
.chat-message.mine time{text-align:right}
.chat-bubble{border-radius:10px;background:#273d51;color:#f4f6fa;border:0;padding:var(--ui-space-10) var(--ui-space-12);font-size:var(--ui-font-14);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.chat-message.mine .chat-bubble{background:#523943;color:#fff5f8}
.chat-message time{display:block;color:inherit;opacity:.65;font-size:var(--ui-font-9);margin:var(--ui-space-4) var(--ui-space-3) 0;font-variant-numeric:tabular-nums}
.chat-gif-message{padding:var(--ui-space-4)}
.chat-gif-message img{display:block;width:var(--ui-size-140);height:var(--ui-size-140);object-fit:contain}
.chat-emotion{display:inline-block;font-size:var(--ui-font-30);line-height:1.2;vertical-align:calc(-1 * var(--ui-size-5))}
.picker-emoji{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:var(--ui-font-38);line-height:1.2}
.chat-older{display:block;margin:0 auto var(--ui-space-15);font-size:var(--ui-font-11)}
.chat-empty{display:none}
.chat-status{font-size:var(--ui-font-12);color:var(--muted);margin:0;padding:0 var(--ui-space-16)}
.chat-status:not(:empty){padding:var(--ui-space-8) var(--ui-space-16)}
.chat-status.error,.inline-error{color:var(--danger)}
.chat-form{padding:var(--ui-space-8);border-top:1px solid var(--line);flex-shrink:0;display:flex;align-items:center;gap:var(--ui-space-4)}
.chat-form>.sr-only{position:absolute}
.chat-form .chat-picker-toggles{order:0}
.chat-form #chat-text{order:1}
.chat-form #chat-send{order:2}
.chat-form #chat-text{width:100%;flex:1;min-width:0;height:var(--ui-size-36);min-height:var(--ui-size-36);resize:none;background:var(--panel);border:1px solid var(--line);padding:var(--ui-space-6);font-size:var(--ui-font-input);line-height:1.5;display:block;outline:none;box-shadow:none}
.chat-form #chat-text:focus,.chat-form #chat-text:focus-visible{outline:none;background:var(--panel);border-color:var(--line);box-shadow:none}
.chat-composer-actions{display:contents}
.chat-form .icon-button{width:var(--ui-size-28);min-width:var(--ui-size-28);height:var(--ui-size-32);min-height:var(--ui-size-32);padding:var(--ui-space-4)}
.chat-picker-toggles{display:flex;gap:var(--ui-space-4)}
.chat-picker-toggles button{background:transparent;border:0}
.chat-picker-toggles button[aria-expanded=true]{color:var(--accent)}
.chat-picker{border-top:1px solid var(--line);padding:var(--ui-space-10);min-height:0;flex:0 1 var(--ui-size-234);display:flex}
.chat-picker-grid{display:grid;grid-template-columns:repeat(var(--ui-reaction-columns),minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:var(--ui-space-4);overflow:visible;padding:0;width:100%;min-height:0}
.chat-picker-grid button{padding:var(--ui-space-2);min-width:0;min-height:0;height:100%;max-height:var(--ui-size-50);background:transparent;border:0;display:grid;place-items:center;overflow:hidden}
.chat-picker-grid button:hover{background:#dfed9b12}
.chat-picker-grid img,.chat-picker-grid picture{display:block;width:100%;height:100%;max-height:100%;object-fit:contain;min-height:0}
.room-paused{display:grid;place-items:center;min-height:45vh;text-align:center;color:var(--muted)}
.room-paused .ui-icon{width:var(--ui-icon-36);height:var(--ui-icon-36);margin:0 auto var(--ui-space-18);color:var(--accent)}
.room-paused p{font-size:var(--ui-font-24);margin-bottom:var(--ui-space-6);color:var(--text)}
.room-paused span{font-size:var(--ui-font-14)}
.room-page{min-width:0}
.room-main{min-width:0}
.screen{border-radius:var(--radius);position:relative;aspect-ratio:16/9;background:#080908;overflow:hidden;border:0;color:#efeee8;--text:#efeee8;--muted:#a6a89f;--accent:#dfed9b;--on-accent:#202517}
.screen video{height:100%;width:100%;object-fit:contain;display:block;background:#080908}
.screen:has(.screen-overlay:not([hidden])){aspect-ratio:auto;min-height:var(--ui-size-220)}
.screen-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--ui-space-26);min-height:var(--ui-size-220);text-align:center;background:#141811}
.screen-overlay .eyebrow{font-size:var(--ui-font-11);margin:0 0 var(--ui-space-14)}
.preparation-number{font-size:var(--ui-font-55);line-height:1.1;font-variant-numeric:tabular-nums;margin:0 0 var(--ui-space-18)}
.preparation-number span{font-size:var(--ui-font-20);color:var(--muted);margin-left:var(--ui-space-3)}
.prep-bar{height:var(--ui-size-3);width:min(var(--ui-size-265),75%);background:#30382a;margin-bottom:var(--ui-space-15)}
.prep-bar i{display:block;height:100%;background:var(--accent)}
.prep-message{font-size:var(--ui-font-12);color:var(--muted);margin:0;max-width:var(--ui-size-400)}
.prep-detail,.screen-status{display:none}
.screen-overlay button{margin-top:var(--ui-space-16)}
.player-screen-layout{display:block;min-width:0}
.player-screen-layout .screen{height:100%;aspect-ratio:auto}
.room-main{position:relative}
.player-controls{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:var(--ui-space-26) var(--ui-space-16) var(--ui-space-10);background:linear-gradient(transparent,rgba(0,0,0,.86));color:#f2f0e9;--text:#f2f0e9;--muted:#ddd;--panel:#222;--surface:#161616;--line:#777;--accent:#e7c571}
.timeline-row,.controls-row,.transport,.volume-control{display:flex;align-items:center;gap:var(--ui-space-12)}
.controls-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--ui-space-14);margin-top:var(--ui-space-2)}
.controls-row>.transport{grid-column:2;justify-self:center}
.player-personal{display:flex;align-items:center;justify-content:flex-end;gap:var(--ui-space-8)}
.transport{grid-column:2}
.controls-row>#fullscreen{grid-column:3;justify-self:start}
.controls-row>.volume-control{grid-column:1/-1;justify-content:center}
.transport{gap:var(--ui-space-6)}
.transport button{font-size:var(--ui-font-12);min-height:var(--ui-size-42);padding:var(--ui-space-8) var(--ui-space-11)}
.transport .play-button{width:var(--ui-size-60)}
.timeline{width:100%;accent-color:var(--accent);min-height:var(--ui-size-28);cursor:pointer}
.timecode{font-size:var(--ui-font-11);font-variant-numeric:tabular-nums;color:var(--muted);flex-shrink:0}
.volume-control{gap:var(--ui-space-6)}
.volume-control input{width:var(--ui-size-90);accent-color:var(--accent)}
.room-message{text-align:center;font-size:var(--ui-font-12);color:var(--muted);margin:var(--ui-space-12) 0 0}
.room-message:empty{display:none}
.timeline-wrap{position:relative;flex:1;min-width:0}
.bookmark-list{position:absolute;inset:0;pointer-events:none}
.bookmark-marker{pointer-events:auto;position:absolute;top:calc(-1 * var(--ui-size-3));transform:translateX(-50%);padding:0;min-height:var(--ui-size-18);width:var(--ui-size-18);border:0;background:var(--bg);color:var(--warm)}
.bookmark-marker .ui-icon{width:var(--ui-icon-18);height:var(--ui-icon-18)}
body.in-room{height:100dvh;overflow:hidden}
.in-room main{max-width:none;padding:var(--ui-space-10) var(--ui-space-16);min-width:0;height:calc(100dvh - var(--header-height))}
.room-page{height:100%;display:grid;grid-template-rows:var(--ui-size-34) minmax(0,1fr);gap:var(--ui-space-8)}
.player-panel{min-height:0}
.room-panel{min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.panel-body{flex:1;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:var(--ui-space-12)}
#player-title{font-size:var(--ui-font-13);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-empty{height:100%;min-height:var(--ui-size-80);display:grid;place-items:center;color:var(--muted);font-size:var(--ui-font-13)}
.player-empty .ui-icon{width:var(--ui-icon-36);height:var(--ui-icon-36);opacity:.4}
.session-empty{padding:var(--ui-space-16) var(--ui-space-8);font-size:var(--ui-font-13);color:var(--muted);margin:0}
#film-list{padding:var(--ui-space-12) var(--ui-space-10)}
.film-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ui-space-6)}
.film-row[data-phase=proposal]{background:var(--proposal-bg,#482323);border-color:var(--proposal-line,#874141);--session-color:var(--proposal-ink,#f3a5a5)}
.film-row[data-phase=error]{background:var(--proposal-bg,#482323);border-color:var(--proposal-line,#874141);--session-color:var(--proposal-ink,#f3a5a5)}
.film-row[data-phase=preparing]{background:var(--preparing-bg,#44301d);border-color:var(--preparing-line,#956132);--session-color:var(--preparing-ink,#f1bd85)}
.film-row[data-phase=ready]{background:var(--ready-bg,#203b28);border-color:var(--ready-line,#477c51);--session-color:var(--ready-ink,#a1ddb0)}
.film-title{font-size:var(--ui-font-14);overflow-wrap:anywhere;line-height:1.3;background:none;border:0;padding:0;min-height:0;text-align:left;color:inherit;font-weight:600}
.film-title:disabled{opacity:1;cursor:default}
.film-title:hover:not(:disabled){background:none;text-decoration:underline}
.session-avatar{display:grid;place-items:center;position:relative;overflow:hidden;width:var(--ui-size-34);height:var(--ui-size-34);border-radius:50%;background:#30382a;flex-shrink:0}
.session-avatar>svg{width:var(--ui-icon-22);height:var(--ui-icon-22);color:var(--muted)}
.session-avatar>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.private-controls{border:0;padding:var(--ui-space-3);background:transparent}
.private-indicator{color:var(--private);display:flex}
.private-indicator .ui-icon{width:var(--ui-icon-13);height:var(--ui-icon-13)}
body.cinema-mode{padding-right:0}
.cinema-mode .library-tabs{display:none!important}
.cinema-mode main{padding:var(--ui-space-8) var(--ui-space-12) calc(var(--cinema-chat-height) + var(--ui-space-16));height:calc(100dvh - var(--header-height))}
.cinema-mode .room-page{display:block}
.cinema-mode .room-playlist,.cinema-mode .explorer-panel{display:none}
.cinema-mode .player-panel{height:100%;border:0;background:transparent;overflow:visible}
.cinema-mode #player-body{padding:0;overflow:visible}
.cinema-mode .room-main{height:100%;display:flex;flex-direction:column;gap:var(--ui-space-4)}
.cinema-mode .player-screen-layout{flex:1;min-height:0}
.cinema-mode .screen{height:100%;min-height:0}
.cinema-mode .screen-overlay{position:absolute;inset:0;min-height:0}
.cinema-mode .player-controls{padding-top:var(--ui-space-26)}
.cinema-mode .room-message{margin:var(--ui-space-2) 0;font-size:var(--ui-font-11)}
.dialog-backdrop{position:fixed;inset:0;background:#000b;z-index:10;display:flex;align-items:center;justify-content:center;padding:var(--ui-space-24);overflow:auto}
.dialog{border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);max-width:var(--ui-size-630);width:100%;max-height:90dvh;overflow:auto;padding:var(--ui-space-30)}
.dialog-header{display:flex;justify-content:space-between;gap:var(--ui-space-20);align-items:center;margin-bottom:var(--ui-space-20)}
.dialog-header h2{margin:0;font-size:var(--ui-font-24)}
.dialog-header button{background:transparent;border:0;font-size:var(--ui-font-24)}
.language-override select{width:100%;padding:var(--ui-space-12);border:1px solid var(--line);background:var(--bg)}
.language-override{margin:var(--ui-space-16) 0;display:grid;grid-template-columns:1fr var(--ui-size-160);gap:var(--ui-space-14);align-items:center;font-size:var(--ui-font-13)}
.inline-error{font-size:var(--ui-font-13);line-height:1.5;margin-top:var(--ui-space-14)}
.danger-button{color:var(--danger)}
.error-page,.onboarding,.invitation-welcome{max-width:var(--ui-size-490);margin:var(--ui-space-45) auto var(--ui-space-65)}
.invitation-welcome{max-width:var(--ui-size-440);text-align:center;margin:var(--ui-space-12) auto var(--ui-space-50)}
.invitation-intro{padding:var(--ui-space-4) 0 var(--ui-space-24)}
.invitation-intro>.eyebrow{font-size:var(--ui-font-10);letter-spacing:.15em;margin:0 0 var(--ui-space-20);color:var(--muted)}
.invitation-duo-art{display:flex;align-items:center;justify-content:center;margin:0 auto var(--ui-space-20)}
.invitation-duo-art>img{display:block;width:var(--ui-size-96);height:var(--ui-size-96)}
.invitation-welcome h1{font-size:var(--ui-font-invitation);line-height:1.03;letter-spacing:-.035em;margin:0 0 var(--ui-space-18);overflow-wrap:normal}
.invitation-welcome h1 span{color:var(--accent)}
.invitation-intro-copy{margin:0;font-size:var(--ui-font-15);line-height:1.65;color:var(--muted)}
.invited-code-block{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--ui-space-8) var(--ui-space-12);border-top:1px solid var(--line);padding-top:var(--ui-space-18)}
.invited-code-block>p{grid-column:1/-1;margin:0}
.invitation-welcome .revealed-code{grid-column:2;font-size:var(--ui-font-34);letter-spacing:.16em;padding:var(--ui-space-10) 0;margin:0;background:transparent}
.invited-code-block>#random-invited-code{grid-column:3;justify-self:start;background:none;border:0;color:var(--accent);width:var(--ui-size-30);min-width:var(--ui-size-30);height:var(--ui-size-30);min-height:var(--ui-size-30);padding:var(--ui-space-5)}
:where(html[data-layout~="max-700"]) .invitation-welcome{margin-top:var(--ui-space-8)}
:where(html[data-layout~="max-700"]) .invitation-intro{padding-bottom:var(--ui-space-20)}
:where(html[data-layout~="max-700"]) .invitation-intro-copy{font-size:var(--ui-font-14)}
:where(html[data-layout~="max-700"]) .invitation-duo-art{margin-bottom:var(--ui-space-16)}
:where(html[data-layout~="max-700"]) .invitation-welcome h1{font-size:var(--ui-font-39)}
.invitation-accept{width:100%;margin-top:var(--ui-space-20)}
.invitation-existing{color:var(--muted)}
.onboarding label{display:block;font-size:var(--ui-font-13);margin-bottom:var(--ui-space-10)}
.onboarding input{max-width:100%;padding:var(--ui-space-12);background:var(--panel);border:1px solid var(--line);margin-bottom:var(--ui-space-20)}
.onboarding-photo{display:flex!important;gap:var(--ui-space-10);align-items:center}
.onboarding .primary{display:block;width:100%}
#toast{border-radius:var(--radius);position:fixed;left:50%;bottom:var(--ui-size-25);transform:translateX(-50%);background:#dfe6d0;color:#1d2516;padding:var(--ui-space-13) var(--ui-space-19);box-shadow:0 9px 35px #0008;z-index:30;max-width:min(var(--ui-size-620),90vw);font-size:var(--ui-font-13);line-height:1.5}
:where(html[data-layout~="max-1200"]) .controls-row{gap:var(--ui-space-8)}
:where(html[data-layout~="max-1200"]) .volume-control input{width:var(--ui-size-65)}
:where(html[data-layout~="max-1000"]) .controls-row{grid-template-columns:1fr auto}
:where(html[data-layout~="max-1000"]) .controls-row>.transport{grid-column:1;justify-self:end}
:where(html[data-layout~="max-1000"]) .player-personal{justify-self:start}
:where(html[data-layout~="max-700"]):root{--cinema-chat-height:var(--ui-cinema-chat-height)}
:where(html[data-layout~="max-700"]) main{padding:var(--ui-space-20) var(--ui-space-12)}
:where(html[data-layout~="max-700"]) .duo-picker{margin:var(--ui-space-20) auto var(--ui-space-45)}
:where(html[data-layout~="max-700"]) .duo-picker h1{font-size:var(--ui-font-rooms)}
:where(html[data-layout~="max-700"]) .duo-choice-list{gap:var(--ui-space-16)}
:where(html[data-layout~="max-700"]) .room-choice,:where(html[data-layout~="max-700"]) .partner-circle.add-room,:where(html[data-layout~="max-700"]) .partner-circle.pending-room{width:calc((100% - var(--ui-size-16))/2);max-width:var(--ui-size-180)}
:where(html[data-layout~="max-700"]) .room-partner-name{font-size:var(--ui-font-20)}
:where(html[data-layout~="max-700"]) .invitation-cooldown{font-size:var(--ui-font-15)}
:where(html[data-layout~="max-700"]) body.chat-open{padding-right:0}
:where(html[data-layout~="max-700"]) .in-room:not(.cinema-mode) main{padding:var(--ui-space-8) var(--ui-space-8) calc(var(--ui-chat-mobile-height) + var(--ui-space-16))}
:where(html[data-layout~="max-700"]) .room-page{gap:var(--ui-space-6);grid-template-rows:var(--ui-size-32) minmax(0,1fr)}
:where(html[data-layout~="max-700"]) .panel-body{padding:var(--ui-space-8)}
:where(html[data-layout~="max-700"]) .film-title{font-size:var(--ui-font-12)}
:where(html[data-layout~="max-700"]) .session-avatar{width:var(--ui-size-24);height:var(--ui-size-24)}
:where(html[data-layout~="max-700"]) .chat-panel{top:auto;bottom:var(--ui-size-8);right:var(--ui-size-8);width:calc(100% - var(--ui-size-16));height:var(--ui-chat-mobile-height)}
:where(html[data-layout~="max-700"]) .chat-history{padding:var(--ui-space-8) var(--ui-space-10)}
:where(html[data-layout~="max-700"]) .chat-form{padding:var(--ui-space-6) var(--ui-space-8);display:flex;align-items:center;gap:var(--ui-space-5)}
:where(html[data-layout~="max-700"]) .chat-form #chat-text{height:var(--ui-size-38);min-height:var(--ui-size-38);padding:var(--ui-space-7);min-width:0;flex:1}
:where(html[data-layout~="max-700"]) .chat-composer-actions{margin-top:0}
:where(html[data-layout~="max-700"]) .chat-composer-actions .icon-button{height:var(--ui-size-30);min-height:var(--ui-size-30);width:var(--ui-size-28);min-width:var(--ui-size-28);padding:var(--ui-space-4)}
:where(html[data-layout~="max-700"]) .chat-panel:has(.chat-picker:not([hidden])){height:min(var(--ui-size-420),calc(var(--chat-visible-height,100dvh) - var(--ui-size-16)))}
:where(html[data-layout~="max-700"]) .chat-picker{flex:0 1 var(--ui-size-250)}
:where(html[data-layout~="max-700"]) .chat-picker-grid button{max-height:var(--ui-size-56)}
:where(html[data-layout~="max-700"]) .picker-emoji{font-size:var(--ui-font-emoji)}
:where(html[data-layout~="max-700"]) .cinema-mode main{padding:var(--ui-space-4) var(--ui-space-6) calc(var(--cinema-chat-height) + var(--ui-space-12))}
:where(html[data-layout~="max-700"]) .controls-row{gap:var(--ui-space-4)}
:where(html[data-layout~="max-700"]) .transport{gap:var(--ui-space-3)}
:where(html[data-layout~="max-700"]) .transport button{min-height:var(--ui-size-34);height:var(--ui-size-34);padding:var(--ui-space-5) var(--ui-space-7);font-size:var(--ui-font-11)}
:where(html[data-layout~="max-700"]) .transport .play-button{width:var(--ui-size-38);min-width:var(--ui-size-38)}
:where(html[data-layout~="max-700"]) .player-personal{gap:var(--ui-space-3)}
:where(html[data-layout~="max-700"]) .player-personal .icon-button{width:var(--ui-size-30);min-width:var(--ui-size-30);height:var(--ui-size-34);min-height:var(--ui-size-34);padding:var(--ui-space-5)}
:where(html[data-layout~="max-700"]) .volume-control{padding:0 var(--ui-space-3);gap:var(--ui-space-2)}
:where(html[data-layout~="max-700"]) .volume-control input{width:var(--ui-size-48)}
:where(html[data-layout~="max-700"]) .timeline-row{gap:var(--ui-space-8)}
:where(html[data-layout~="max-700"]) .timeline{min-height:var(--ui-size-18)}
:where(html[data-layout~="max-700"]) .timecode{font-size:var(--ui-font-10)}
:where(html[data-layout~="max-700"]) .screen-overlay{min-height:var(--ui-size-100);padding:var(--ui-space-12)}
:where(html[data-layout~="max-700"]) .dialog-backdrop{padding:var(--ui-space-12)}
:where(html[data-layout~="max-700"]) .dialog{padding:var(--ui-space-20) var(--ui-space-16)}
:where(html[data-layout~="max-700"]) .language-override{grid-template-columns:1fr var(--ui-size-130)}
:where(html[data-layout~="max-360"]) .session-avatar{width:var(--ui-size-22);height:var(--ui-size-22)}
@media(max-height:500px){.cinema-mode{--cinema-chat-height:var(--ui-cinema-chat-height)}
.cinema-mode .controls-row{display:flex;justify-content:center}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.duo-picker-heading{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:var(--ui-space-24);gap:var(--ui-space-12)}
.duo-picker-heading .rooms-wordmark{margin:0}
.plex-settings-card{width:min(100%,var(--ui-size-1120));margin:0 auto;padding:var(--ui-space-24);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.plex-settings-heading{display:flex;align-items:center;gap:var(--ui-space-16);margin-bottom:var(--ui-space-24)}
.plex-settings-heading h1{font-size:var(--ui-font-28);margin:0}
.plex-settings-layout{display:grid;grid-template-columns:var(--ui-plex-settings-grid);align-items:start;gap:var(--ui-space-32);margin-top:var(--ui-space-28)}
.plex-setup-guide,.plex-connection-panel{min-width:0}
.plex-connection-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--ui-space-20)}
.plex-settings-layout h2{font-size:var(--ui-font-20);letter-spacing:-.02em;margin:0 0 var(--ui-space-12)}
.plex-setup-steps{list-style:none;counter-reset:plex-step;margin:0;padding:0}
.plex-setup-steps>li{counter-increment:plex-step;position:relative;padding:0 0 var(--ui-space-24) var(--ui-space-44);margin-bottom:var(--ui-space-24);border-bottom:1px solid var(--line)}
.plex-setup-steps>li:last-child{padding-bottom:0;margin-bottom:0;border:0}
.plex-setup-steps>li::before{content:counter(plex-step);position:absolute;top:0;left:0;width:var(--ui-size-30);height:var(--ui-size-30);display:grid;place-items:center;background:var(--accent);color:var(--on-accent,#202517);border-radius:var(--radius);font-weight:700;font-size:var(--ui-font-14)}
.plex-setup-steps h3{font-size:var(--ui-font-17);line-height:1.45;margin:var(--ui-space-2) 0 var(--ui-space-12);font-weight:600}
.plex-setup-steps p,.plex-network-steps{font-size:var(--ui-font-14);line-height:1.65;margin:0 0 var(--ui-space-12)}
.plex-setup-steps .plex-guide-tip{font-size:var(--ui-font-12);color:var(--muted)}
.plex-network-steps{padding-left:var(--ui-space-18)}
.plex-network-steps li+li{margin-top:var(--ui-space-10)}
.plex-guide-links{display:flex;flex-wrap:wrap;gap:var(--ui-space-8) var(--ui-space-16)}
.plex-setup-guide a{font-size:var(--ui-font-12);color:var(--accent);text-decoration:underline;text-underline-offset:3px;line-height:1.6;overflow-wrap:anywhere}
.plex-setup-guide a:hover{color:var(--text)}
.plex-settings-form{scroll-margin-top:var(--ui-size-20)}
.plex-setup-help{margin-top:var(--ui-space-24);padding-top:var(--ui-space-20);border-top:1px solid var(--line)}
.plex-setup-help h2{font-size:var(--ui-font-16)}
.plex-setup-help dl{margin:0}
.plex-setup-help dt{font-size:var(--ui-font-13);font-weight:600;margin-top:var(--ui-space-14)}
.plex-setup-help dd{font-size:var(--ui-font-12);color:var(--muted);line-height:1.6;margin:var(--ui-space-5) 0 0}
:where(html[data-layout~="max-900"]) .plex-settings-layout{grid-template-columns:var(--ui-plex-settings-grid);gap:var(--ui-space-28)}
:where(html[data-layout~="max-900"]) .plex-settings-card{max-width:var(--ui-size-720)}
.plex-settings-form fieldset{min-width:0;margin:0;padding:0;border:0;display:grid;gap:var(--ui-space-16)}
.plex-settings-form label{display:grid;gap:var(--ui-space-7);font-size:var(--ui-font-14)}
.plex-settings-form input:not([type=checkbox]){width:100%;min-width:0;padding:var(--ui-space-11) var(--ui-space-12);background:var(--bg);border:1px solid var(--line)}
.plex-address-fields{display:grid;grid-template-columns:var(--ui-plex-address-grid);gap:var(--ui-space-12)}
.plex-address-fields label{min-width:0}
:where(html[data-layout~="max-390"]) .plex-address-fields{grid-template-columns:var(--ui-plex-address-grid)}
.plex-settings-form p{margin:0}
.plex-settings-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--ui-space-10)}
.plex-settings-status{margin:var(--ui-space-18) 0 0;min-height:var(--ui-size-20);font-size:var(--ui-font-14)}
.plex-settings-status:empty{display:none}
:where(html[data-layout~="max-500"]) .plex-settings-card{padding:var(--ui-space-16)}
:where(html[data-layout~="max-500"]) .plex-settings-heading{gap:var(--ui-space-10);flex-wrap:wrap}
:where(html[data-layout~="max-500"]) .plex-settings-heading h1{font-size:var(--ui-font-25)}
:where(html[data-layout~="max-500"]) .plex-guide-shortcut{font-size:var(--ui-font-12);max-width:var(--ui-size-110)}
:where(html[data-layout~="max-500"]) .plex-setup-steps>li{padding-left:var(--ui-space-38)}
:where(html[data-layout~="max-500"]) .plex-connection-panel{padding:var(--ui-space-14)}
:where(html[data-layout~="max-500"]) .plex-settings-actions>*{flex:1;padding:var(--ui-space-10)}
.library-tabs{display:flex;align-items:stretch;gap:var(--ui-space-5);padding:var(--ui-space-2);border:1px solid var(--line);border-radius:var(--field-radius,9px);background:var(--panel-paint,var(--panel));min-width:0}
.library-tabs>button{flex:1;min-width:0;min-height:0;padding:var(--ui-space-2) var(--ui-space-10);border:1px solid transparent;border-radius:var(--tab-radius,6px);background:transparent;box-shadow:none;color:var(--muted);font-size:var(--ui-tab-font);font-weight:650;letter-spacing:-.025em;line-height:1.2}
.library-tabs>button[aria-selected=true]{color:var(--text);border-color:color-mix(in srgb,var(--line),var(--accent) 22%);background:var(--button-paint,var(--surface));box-shadow:inset 0 1px 0 #ffffff0a}
.library-tabs>button:hover{color:var(--accent)}
.room-choice{position:relative}
.room-edit-actions{position:absolute;top:var(--ui-space-5);right:var(--ui-space-5);display:flex;gap:var(--ui-space-3)}
.room-edit-actions .icon-button{background:var(--panel)}
.room-choice:has(.room-edit-actions) .room-pending-deletion{right:auto;left:var(--ui-space-5)}
.settings-choice .partner-circle{grid-template-rows:1fr auto;justify-items:center}
.settings-tile-icon{align-self:center;color:var(--accent)}
.settings-tile-icon .ui-icon{width:var(--ui-settings-photo);height:var(--ui-settings-photo)}
#edit-profile[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.room-edit-actions{position:absolute;right:var(--ui-size-7);top:var(--ui-size-7);display:flex;gap:var(--ui-space-5);z-index:2}
.room-edit-button{width:var(--ui-size-30);min-width:var(--ui-size-30);height:var(--ui-size-30);min-height:var(--ui-size-30);padding:var(--ui-space-6);background:var(--panel);box-shadow:0 2px 12px #0008}
.room-edit-button .ui-icon{width:var(--ui-icon-17);height:var(--ui-icon-17)}
.room-edit-button[data-room-edit-action=delete]{color:var(--danger)}
.room-edit-button[aria-pressed=true]{background:#5a292d;border-color:var(--danger)}
.room-choice-pending>.partner-circle{opacity:.55;border-color:var(--danger)}
.room-pending-deletion{position:absolute;top:var(--ui-size-8);right:var(--ui-size-8);padding:var(--ui-space-5);background:var(--panel);border-radius:6px;color:var(--accent)}
:where(html[data-layout~="max-700"]) .revealed-code{font-size:var(--ui-font-18)}
:where(html[data-layout~="max-390"]) .revealed-code{font-size:var(--ui-font-17)}
:where(html[data-layout~="max-390"]) .media-choices-small button,:where(html[data-layout~="max-390"]) .media-choices-small .media-flag{min-width:var(--ui-size-17);width:var(--ui-size-17);font-size:var(--ui-font-12)}
:where(html[data-layout~="max-390"]) .media-choices-small .ui-icon{width:var(--ui-icon-10);height:var(--ui-icon-10)}
body{background:var(--scene,var(--bg));background-attachment:fixed}
h1:not(.login-wordmark),h2,h3{font-family:var(--display-font,inherit);font-style:var(--display-style,normal)}
.room-panel,.chat-panel,.plex-settings-card{background:var(--surface-paint,var(--surface));box-shadow:var(--panel-shadow,none);border-style:var(--panel-border-style,solid)}
button{background-image:var(--button-light,none);box-shadow:var(--button-shadow,none)}
.partner-circle,.dialog,.login .code-input{background:var(--panel-paint,var(--panel));box-shadow:var(--panel-shadow,none);border-style:var(--panel-border-style,solid)}
.login .code-input{border-radius:var(--field-radius,8px)}
.film-row,.room-edit-button{border-radius:var(--button-radius,8px)}
.media-choice-row button,.header-action,.text-button,.chat-picker-toggles button,.film-title{background-image:none;box-shadow:none}
.theme-picker button,.theme-picker button:hover:not(:disabled),.theme-picker button:active,.theme-picker button:focus-visible{background:none;border:0;border-radius:0;box-shadow:none;color:inherit;outline:none}
.in-room:not(.cinema-mode) main{max-width:var(--ui-size-1280);padding:var(--ui-space-16)}
.room-page{grid-template-rows:minmax(0,1fr);gap:0}
.library-frame{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-paint,var(--surface));box-shadow:var(--panel-shadow,none)}
.library-frame>.room-panel{flex:1;border:0;border-radius:0;box-shadow:none;background:transparent}
.library-tabs{min-height:var(--ui-size-32);border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:var(--ui-space-3) var(--ui-session-padding);gap:var(--ui-session-gap)}
.library-tabs>button{min-height:var(--ui-size-28);padding:var(--ui-space-3) var(--ui-space-6);border:0;box-shadow:none;background:transparent;font-size:var(--ui-tab-font);position:relative;color:var(--accent)}
.alternating-label>span:nth-child(odd){color:var(--accent)}
.alternating-label>span:nth-child(even){color:var(--text)}
.library-tabs>button[aria-selected=true]{border:0;background:transparent;box-shadow:none}
.library-tabs>button[aria-selected=true]:after{content:"";position:absolute;height:var(--ui-size-2);bottom:0;left:20%;right:20%;background:var(--accent)}
.duo-picker{margin-top:var(--ui-space-8)}
.duo-picker-heading{margin-bottom:var(--ui-space-26)}
.theme-picker{position:relative}
.theme-picker .theme-list{position:absolute;top:calc(100% + var(--ui-size-8));left:50%;transform:translateX(-50%);width:var(--ui-size-180);max-height:min(var(--ui-size-440),65dvh);overflow:auto;scrollbar-width:thin;padding:var(--ui-space-6);background:var(--panel);border:1px solid var(--line);border-radius:8px;z-index:30}
.theme-picker .theme-list button{height:var(--ui-size-32);min-height:var(--ui-size-32);text-align:center;font-size:var(--ui-font-12)}
.theme-variants-label{margin:var(--ui-space-4) var(--ui-space-8) 0;padding:var(--ui-space-10) 0 var(--ui-space-4);border-top:1px solid var(--line);color:var(--muted);text-align:center;font-size:var(--ui-font-10);letter-spacing:.08em}
.theme-picker:has(.theme-list:not([hidden])){z-index:30}
.login .theme-list{max-height:min(var(--ui-size-440),calc(50dvh - var(--ui-size-70)))}
.theme-picker button,.theme-picker button:is(:hover,:focus,:active){outline:0!important;box-shadow:none!important;background:transparent!important;border:0!important}
.login .code-input{box-shadow:none}
#header-plex{margin-left:var(--ui-space-8);color:var(--accent)}
.media-choice-row button[aria-pressed=true],.media-flag[data-selected=true]{border-color:transparent;background:transparent}
.media-choice-row button:hover:not(:disabled){background:transparent}
.cinema-mode .library-frame{display:none}
.cinema-mode .room-page{display:block}
.film-row[data-phase=proposal],.film-row[data-phase=error]{--session-bg:var(--proposal-bg,#482323)}
.film-row[data-phase=ready]{--session-bg:var(--ready-bg,#203b28)}
.session-avatar{width:var(--ui-size-28);height:var(--ui-size-28);background:var(--surface)}
.plex-track-availability{display:flex;gap:var(--ui-space-10);align-items:center;flex-wrap:wrap;margin:var(--ui-space-12) 0}
.controls-row{display:flex;justify-content:center;gap:var(--ui-space-24)}
.player-personal{gap:var(--ui-space-8)}
.volume-control .volume-step{width:var(--ui-size-26);min-width:var(--ui-size-26);height:var(--ui-size-32);min-height:var(--ui-size-32);padding:var(--ui-space-4)}
.volume-control .volume-step .ui-icon{width:var(--ui-icon-16);height:var(--ui-icon-16)}
:where(html[data-layout~="max-900"]) #header-plex{position:absolute;left:var(--ui-size-122);top:var(--ui-size-12);margin:0;width:var(--ui-size-24);min-width:var(--ui-size-24);height:var(--ui-size-24);min-height:var(--ui-size-24)}
:where(html[data-layout~="max-700"]) .in-room:not(.cinema-mode) main{padding:var(--ui-space-8) var(--ui-space-8) calc(var(--ui-chat-mobile-height) + var(--ui-space-16))}
.library-frame .panel-body{padding:var(--ui-session-padding)}
:where(html[data-layout~="max-700"]) .library-tabs>button{font-size:var(--ui-tab-font)}
:where(html[data-layout~="max-700"]) #film-list{padding:var(--ui-space-8)}
:where(html[data-layout~="max-700"]) .cinema-mode main{padding:var(--ui-space-4) var(--ui-space-6) calc(var(--cinema-chat-height) + var(--ui-space-12))}
:where(html[data-layout~="max-700"]) .controls-row{gap:var(--ui-space-5);flex-wrap:wrap}
:where(html[data-layout~="max-700"]) .player-personal{gap:var(--ui-space-3)}
:where(html[data-layout~="max-700"]) .volume-control{gap:var(--ui-space-1)}
:where(html[data-layout~="max-700"]) .volume-control input{width:var(--ui-size-44)}
:where(html[data-layout~="max-700"]) .volume-control .volume-step{width:var(--ui-size-22);min-width:var(--ui-size-22)}
.private-code-row{padding-right:var(--ui-space-33)}
.media-choices{--choice-width:var(--ui-size-44);--choice-height:var(--ui-size-28);gap:var(--ui-space-4)}
.media-choices .media-choice-row{display:grid;grid-template-columns:repeat(3,var(--choice-width));gap:var(--ui-space-4)}
.media-choices .media-choice-row :is(button,.media-flag){width:var(--choice-width);min-width:var(--choice-width);height:var(--choice-height);min-height:var(--choice-height);padding:var(--ui-space-3);border:2px solid var(--line);border-radius:2px;background:var(--surface);opacity:1;box-shadow:none;overflow:hidden}
.media-choices .media-choice-row :is(button[aria-pressed=true],.media-flag[data-selected=true]){opacity:1;border-color:var(--accent);background:color-mix(in srgb,var(--accent),var(--panel) 72%);box-shadow:inset 0 0 0 1px var(--panel)}
.media-choices .media-choice-row button:hover:not(:disabled){opacity:1;border-color:var(--accent);background:var(--surface)}
.media-choices .media-choice-row .ui-icon{width:var(--ui-icon-21);height:var(--ui-icon-21);margin:0;color:var(--text)}
.language-flag{display:block;width:100%;height:100%;max-height:var(--ui-size-24);aspect-ratio:3/2;overflow:hidden;pointer-events:none}
.dialog-actions{display:flex;justify-content:flex-end;gap:var(--ui-space-12);margin-top:var(--ui-space-22)}
.plex-sharing-note{padding:var(--ui-space-14) var(--ui-space-16);background:var(--surface);border-left:3px solid var(--accent);font-size:var(--ui-font-13);line-height:1.55}
.plex-sharing-note p{margin:0 0 var(--ui-space-10)}
.plex-sharing-note p:last-child{margin:0}
:where(html[data-layout~="max-390"]) .media-choices .media-choice-row{gap:var(--ui-space-3)}
:where(html[data-layout~="max-390"]) .private-code-row{padding-right:var(--ui-space-26)}
.room-main:fullscreen{position:relative;width:100vw;height:100dvh;padding:0;background:#080908;display:flex;flex-direction:column}
.room-main:fullscreen .player-screen-layout{flex:1;min-height:0}
.room-main:fullscreen .screen{height:100%}
.room-main:-webkit-full-screen{position:relative;width:100vw;height:100vh;padding:0;background:#080908;display:flex;flex-direction:column}
.room-main:-webkit-full-screen .player-screen-layout{flex:1;min-height:0}
.room-main:-webkit-full-screen .screen{height:100%}
.in-room #header-plex{position:static;margin:0;flex-shrink:0}
.chat-content{display:block;white-space:pre-wrap;overflow-wrap:anywhere}
.cinema-mode .chat-panel{top:auto;left:var(--ui-size-12);right:var(--ui-size-12);bottom:var(--ui-size-8);width:auto;height:var(--cinema-chat-height);display:flex;flex-direction:row;align-items:stretch;border-radius:8px;overflow:visible}
.cinema-mode .chat-history{flex:1;min-width:0;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;padding:var(--ui-space-4) var(--ui-space-8)}
.cinema-mode .chat-messages{flex-direction:row;align-items:center;gap:var(--ui-space-6);width:max-content;min-width:0}
.cinema-mode .chat-message,.cinema-mode .chat-message.mine{flex:0 0 auto;align-self:center;max-width:none}
.cinema-mode .chat-bubble{display:flex;align-items:center;gap:var(--ui-space-6);max-width:none;height:var(--ui-size-38);padding:var(--ui-space-4) var(--ui-space-8);line-height:1.3;font-size:var(--ui-font-13);white-space:nowrap}
.cinema-mode .chat-content{display:flex;align-items:center;gap:var(--ui-space-3);white-space:nowrap}
.cinema-mode .chat-message-label{display:block;font-size:var(--ui-font-10);margin:0;white-space:nowrap}
.cinema-mode .chat-message time{display:none}
.cinema-mode .chat-gif-message img{width:var(--ui-size-34);height:var(--ui-size-34)}
.cinema-mode .chat-emotion{font-size:var(--ui-font-24);line-height:1}
.cinema-mode .chat-form{display:flex;align-items:center;flex:0 0 40%;min-width:var(--ui-size-210);max-width:var(--ui-size-470);padding:var(--ui-space-4);gap:var(--ui-space-3);border-top:0;border-left:1px solid var(--line)}
.cinema-mode .chat-form #chat-text{height:var(--ui-size-36);min-height:var(--ui-size-36);padding:var(--ui-space-6);white-space:pre;overflow-x:auto}
.cinema-mode .chat-older{flex-shrink:0;margin:0 var(--ui-space-8) 0 0;font-size:var(--ui-font-10)}
.cinema-mode .chat-picker{position:absolute;right:0;bottom:100%;width:min(var(--ui-size-300),90vw);height:var(--ui-size-240);background:var(--panel);border:1px solid var(--line);border-radius:8px}
.cinema-mode .chat-status{position:absolute;bottom:100%;right:0;margin:0;font-size:var(--ui-font-11);background:var(--panel)}
:where(html[data-layout~="max-700"]) .cinema-mode .chat-panel{left:var(--ui-size-6);right:var(--ui-size-6);bottom:var(--ui-size-6);height:var(--cinema-chat-height)}
:where(html[data-layout~="max-700"]) .cinema-mode .chat-panel:has(.chat-picker:not([hidden])){height:var(--cinema-chat-height)}
:where(html[data-layout~="max-700"]) .cinema-mode .chat-history{padding:var(--ui-space-4)}
:where(html[data-layout~="max-700"]) .cinema-mode .chat-form{flex-basis:60%;min-width:var(--ui-size-198)}
:where(html[data-layout~="max-700"]) .cinema-mode .chat-message-label{display:none}
:where(html[data-layout~="max-700"]) .cinema-mode .chat-bubble{font-size:var(--ui-font-12)}
:where(html[data-layout~="max-700"]) .player-controls{padding:var(--ui-space-24) var(--ui-space-8) var(--ui-space-6)}
:where(html[data-layout~="max-700"]) .player-controls .controls-row{flex-wrap:nowrap;gap:var(--ui-space-8)}
:where(html[data-layout~="max-700"]) .transport{gap:var(--ui-space-3)}
:where(html[data-layout~="max-700"]) .transport button{min-height:var(--ui-size-32);height:var(--ui-size-32);padding:var(--ui-space-4) var(--ui-space-6)}
:where(html[data-layout~="max-700"]) .transport .play-button{width:var(--ui-size-34);min-width:var(--ui-size-34)}
:where(html[data-layout~="max-700"]) .player-personal>.icon-button{width:var(--ui-size-28);min-width:var(--ui-size-28);height:var(--ui-size-32);min-height:var(--ui-size-32);padding:var(--ui-space-4)}
:where(html[data-layout~="max-700"]) .volume-control .private-indicator{display:none}
.session-avatar img{width:100%;height:100%;object-fit:cover}
.media-choices{--choice-width:var(--ui-flag-width);--choice-height:var(--ui-flag-height);gap:var(--ui-space-4)}
.media-choices .media-choice-row{display:grid;grid-template-columns:var(--choice-width);gap:0}
.media-choices .media-choice-row :is(button,.media-flag){padding:0;border:1px solid var(--line);border-radius:3px;background:transparent}
.media-choices .language-flag{max-height:none}
.media-choices .media-choice-row :is(button,.media-flag){width:var(--choice-width);min-width:var(--choice-width);height:var(--choice-height);min-height:var(--choice-height)}
.positive{color:var(--success)}
.negative{color:var(--danger,#e27a74)}
.track-half .language-flag{width:100%;height:100%;max-height:none;filter:grayscale(1);opacity:.2}
.track-half.available .language-flag{filter:none;opacity:1}
.track-half b{position:absolute;right:var(--ui-size-1);bottom:0;background:#191a1e;color:#fff;font-size:var(--ui-font-10);padding:0 var(--ui-space-2)}
.track-half+.track-half{border-left:1px solid #202226}
.removal-mark{display:flex;align-items:center}
.removal-mark>.ui-icon{width:var(--ui-icon-14);height:var(--ui-icon-14)}
.site-header{position:relative;display:flex;align-items:center;gap:var(--ui-header-gap);width:100%;min-height:var(--ui-header-min-height);padding:var(--ui-header-padding);border-bottom:1px solid var(--line);background:var(--panel-paint,var(--panel));z-index:5}
body:not(.logged-in) .site-header{display:none}
body.chat-open .site-header{width:calc(100% + var(--ui-chat-reserve))}
.in-room .site-header,.profile-editing .site-header{position:sticky;top:0}
body.cinema-mode.chat-open .site-header{width:100%}
.wordmark{flex:none;font-size:var(--ui-brand-font);letter-spacing:-.065em;font-weight:750;line-height:1;color:var(--accent)}
.wordmark span{color:var(--text)}
.room-identity{flex:none;display:flex;align-items:center;gap:var(--ui-header-gap)}
.room-label{font-size:var(--ui-room-font);letter-spacing:-.055em;font-weight:750;white-space:nowrap;line-height:1}
.room-label:not(.alternating-label) span{color:var(--accent)}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--ui-identity-gap);margin-left:auto;flex:none}
.header-actions>.icon-button{width:var(--ui-action-size);min-width:var(--ui-action-size);height:var(--ui-action-size);min-height:var(--ui-action-size);padding:var(--ui-header-action-padding)}
.account-identity{display:flex;align-items:center;margin-left:auto;min-width:0}
.account-identity:not([hidden])+.header-actions{margin-left:0}
.presence{display:flex;align-items:center;gap:var(--ui-identity-gap);min-width:0}
.room-connector{display:flex;align-items:center;justify-content:center;flex:0 0 var(--ui-connector-width);width:var(--ui-connector-width);transform:translateY(var(--ui-connector-offset));color:var(--muted)}
.room-connector>svg{display:block;width:100%;fill:currentColor}
.presence-person{display:flex;align-items:center;gap:var(--ui-identity-gap);min-width:0}
.presence-identity{display:flex;align-items:center;min-width:0}
.presence-identity>.session-avatar{position:relative;display:grid;place-items:center;width:var(--ui-identity-size);height:var(--ui-identity-size);flex:none;overflow:hidden;background:var(--surface);border:var(--ui-identity-border) solid var(--line);border-radius:var(--ui-identity-radius);font-size:calc(var(--ui-identity-size)*.56);font-weight:700}
.session-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.presence .media-choices{display:grid;--choice-width:var(--ui-flag-width);--choice-height:var(--ui-flag-height);gap:var(--ui-identity-gap);flex:none}
.room-choice-pending>.partner-circle{filter:grayscale(1);opacity:.5;cursor:not-allowed}
.settings-page{width:min(100%,var(--ui-settings-width));min-width:0;margin:0 auto;padding:0;color:var(--text);background:var(--panel-paint,var(--panel));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--panel-shadow)}
.settings-heading{padding:var(--ui-settings-padding);border-bottom:1px solid var(--line)}
.settings-heading h1{display:flex;align-items:center;gap:var(--ui-identity-gap);font-size:var(--ui-font-28);margin:0}
.settings-content{padding:var(--ui-settings-padding);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ui-settings-gap)}
.settings-account{display:grid;grid-template-columns:repeat(var(--ui-settings-columns),minmax(0,1fr));align-items:center;gap:var(--ui-settings-gap)}
.settings-field{display:grid;gap:var(--ui-identity-gap);min-width:0;font-size:var(--ui-font-14)}
.settings-field>input{width:100%;min-width:0;padding:var(--ui-space-10);border:1px solid var(--line);background:var(--surface)}
.settings-photo{position:relative;display:grid;place-items:center;width:var(--ui-settings-photo);height:var(--ui-settings-photo);padding:0;border-radius:var(--icon-radius);justify-self:start;overflow:hidden}
.settings-photo>.session-avatar{position:relative;display:grid;place-items:center;width:100%;height:100%;font-size:calc(var(--ui-settings-photo)*.55)}
.settings-photo>span:last-child:not(.session-avatar){position:absolute;right:0;bottom:0;background:var(--panel);padding:var(--ui-space-3)}
.settings-photo .ui-icon{width:var(--ui-icon-18);height:var(--ui-icon-18)}
.settings-key-row{display:flex;align-items:center;gap:var(--ui-identity-gap)}
.settings-page .theme-picker{position:relative;width:var(--ui-size-200);max-width:100%}
.settings-lifecycle h2{margin:0 0 var(--ui-identity-gap)}
.settings-duo{border-top:1px solid var(--line);padding-block:var(--ui-identity-gap)}
.settings-removal-row{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-identity-gap);padding:var(--ui-identity-gap);border:1px solid transparent}
.settings-removal-row.has-draft{border-color:var(--accent);background:var(--surface)}
.settings-removal-row.removal-pending{color:var(--muted);background:var(--surface)}
.settings-removal-name{min-width:0}
.settings-removal-name>span,.settings-removal-name small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.settings-removal-name small{display:block;font-size:var(--ui-font-12);color:var(--muted)}
.settings-removal-actions{display:flex;gap:var(--ui-identity-gap);flex:none}
.settings-removal-actions[inert]{opacity:.35}
.settings-removal-actions [aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent),var(--panel) 75%)}
.settings-sessions{padding-left:var(--ui-settings-gap);font-size:var(--ui-font-14)}
.settings-page .plex-settings-card{margin:0;width:100%;max-width:none;padding:0;border:0;background:none;box-shadow:none}
.settings-footer{position:sticky;bottom:0;background:var(--panel);padding:var(--ui-identity-gap) var(--ui-settings-padding);border-top:1px solid var(--line);z-index:3}
.settings-footer .inline-error{position:static;margin:0 0 var(--ui-identity-gap)}
.settings-actions{display:flex;justify-content:flex-end;gap:var(--ui-identity-gap)}


:where(html[data-layout~="max-900"]) .settings-page .plex-settings-layout{grid-template-columns:var(--ui-plex-settings-grid)}


:where(html[data-layout~="max-700"]) body.chat-open .site-header{width:100%}
/* All viewport dimensions and typography above consume presentation.mjs. */
.ui-icon{max-width:100%;max-height:100%}
input,select,textarea{font-size:var(--ui-font-input)}
.settings-actions button,.plex-settings-actions button,.library-tabs>button{white-space:nowrap}

.duo-label{font-size:var(--ui-duo-font);line-height:1;letter-spacing:-.055em;font-weight:750;white-space:nowrap;color:var(--duo-white);transform:translateY(var(--ui-duo-offset))}
.duo-label>span{color:var(--accent)}
.presence-identity.present>.session-avatar{border-color:var(--success)}
.presence-identity.offline>.session-avatar{border-color:var(--danger)}
.header-actions>.icon-button>.ui-icon{width:100%;height:100%}
.presence .media-choice-row :is(button,.media-flag){border-radius:var(--ui-identity-radius)}
.film-row{display:grid;grid-template-columns:var(--ui-session-poster-width) minmax(0,1fr) max-content var(--ui-session-actions-width);align-items:center;gap:var(--ui-session-gap);min-height:var(--ui-session-min-height);padding:var(--ui-session-padding);border:1px solid var(--preparing-line,#956132);--session-bg:var(--preparing-bg,#44301d);--session-color:var(--preparing-ink,#f1bd85);background:var(--session-bg)}
.film-row[data-phase=proposal],.film-row[data-phase=error]{--session-bg:var(--proposal-bg,#482323);--session-color:var(--proposal-ink,#f3a5a5);border-color:var(--proposal-line,#874141)}
.film-row[data-phase=ready]{--session-bg:var(--ready-bg,#203b28);--session-color:var(--ready-ink,#a1ddb0);border-color:var(--ready-line,#477c51)}
.session-info{min-width:0;display:grid;align-content:center;gap:0}
.session-heading{display:flex;align-items:center;min-width:0}
.session-kind{width:var(--ui-session-icon);height:var(--ui-session-icon);display:grid;place-items:center;flex:none}
.session-kind>.ui-icon{width:100%;height:100%}
.session-quality{display:grid;place-items:center;width:var(--ui-session-icon);height:var(--ui-session-icon);font-size:var(--ui-session-quality-font);line-height:1;font-weight:800;flex:none;color:var(--session-color);border:var(--ui-session-presence-border) solid currentColor;border-radius:var(--ui-identity-radius);box-shadow:0 0 var(--ui-session-neon-glow) color-mix(in srgb,currentColor,transparent 40%),inset 0 0 var(--ui-session-neon-glow) color-mix(in srgb,currentColor,transparent 65%);text-shadow:0 0 var(--ui-session-neon-glow) currentColor}
.session-titles{display:flex;align-items:baseline;gap:0 var(--ui-session-title-gap);min-width:0;width:100%}
.session-titles>.film-title{flex:0 1 auto;display:block;max-width:100%;min-width:0;min-height:0;font-size:var(--ui-session-title-font);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--text)}
.session-episode{font-size:var(--ui-font-12);line-height:1.25;white-space:nowrap;font-variant-numeric:tabular-nums;flex:none}
.session-episode-title{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ui-font-12)}
.session-synopsis{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;overflow-wrap:anywhere;font-size:var(--ui-font-12);line-height:1.3;margin:0;color:var(--muted)}
.session-format{display:grid;align-content:center;gap:var(--ui-session-gap);min-width:0}
.session-format-icons{display:flex;align-items:center;justify-content:center;gap:var(--ui-session-gap)}
.session-poster{position:relative;display:grid;place-items:center;flex:none;width:var(--ui-session-poster-width);height:100%;min-height:calc(var(--ui-session-min-height) - 2 * var(--ui-session-padding) - 2px);align-self:stretch;overflow:hidden;border-radius:var(--ui-identity-radius);background:var(--surface);color:var(--muted)}
.session-poster>.ui-icon{width:var(--ui-session-icon);height:var(--ui-session-icon)}
.session-poster>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.session-actions{min-width:0;align-self:center;padding-left:var(--ui-session-gap);border-left:1px solid color-mix(in srgb,var(--session-color),transparent 55%)}
.session-decisions{display:grid;gap:var(--ui-session-lane-gap)}
.session-agreement{display:grid;grid-template-columns:max-content minmax(0,1fr) var(--ui-session-action);align-items:center;gap:var(--ui-session-gap);min-width:0;text-align:center}
.session-steps{display:flex;align-items:center;gap:var(--ui-session-step-gap)}
.session-person{display:grid;align-content:center;min-width:0;line-height:1.1}
.session-person-name{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ui-font-12);line-height:1.2;padding:0;border:0;text-align:center}
.session-person-name.present{color:var(--success)}
.session-person-name.offline{color:var(--danger)}
.session-percent{display:block;font-size:var(--ui-font-12);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text);text-align:center}
.session-percent small{font-size:inherit;margin-left:var(--ui-space-2)}
.session-agreement .session-decision{display:grid;place-items:center;width:var(--ui-session-action);min-width:var(--ui-session-action);height:var(--ui-session-action);min-height:var(--ui-session-action);padding:0;border:1px solid currentColor;border-radius:var(--ui-session-action-radius);background:transparent;box-shadow:none;font-size:var(--ui-font-12);line-height:1;font-weight:700;opacity:1}
.session-decision>.ui-icon{width:var(--ui-session-icon);height:var(--ui-session-icon)}
.session-decision.waiting,.session-decision.negative{color:var(--danger)}
.session-decision.positive{color:var(--success)}
.session-decision[data-choice=pending]{border-style:dotted}
.session-decision:is([aria-pressed=true],[data-selected=true]){background:color-mix(in srgb,currentColor,transparent 85%);border-style:solid}
.session-agreement .session-decision.remove{color:var(--danger);border:0;border-radius:var(--ui-identity-radius);align-self:start}
.session-decision.remove:is([aria-pressed=true],[data-selected=true]){background:var(--danger);color:var(--bg)}
.session-decision.remove[data-selected=false]{color:var(--muted);opacity:1}
.session-bottom{display:grid;min-width:0;min-height:var(--ui-session-resume-height);align-items:center}
.session-detail{display:flex;align-items:center;min-width:0;gap:var(--ui-space-4)}
.session-track-warnings{display:flex;align-items:center;gap:var(--ui-session-gap)}
.session-track{position:relative;display:block;width:var(--ui-session-flag-width);height:var(--ui-session-flag-height);overflow:hidden;border-radius:2px;background:#73777c}
.session-track>.track-half{position:absolute;inset:0;overflow:hidden}
.session-track>.track-half.fr{clip-path:polygon(0 0,100% 0,0 100%)}
.session-track>.track-half.en{clip-path:polygon(100% 0,100% 100%,0 100%)}
.session-track .language-flag{width:100%;height:100%;max-height:none;filter:grayscale(1);opacity:.2}
.session-track .available .language-flag{filter:none;opacity:1}
.session-track::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 49%,var(--session-bg) 49%,var(--session-bg) 51%,transparent 51%);pointer-events:none}
.session-track .track-half b{position:absolute;bottom:0;right:0;font-size:var(--ui-font-12);line-height:1;background:var(--bg);color:var(--text)}
.session-track .track-half.fr b{top:0;left:0;bottom:auto;right:auto}
.session-resume{display:flex;align-items:center;gap:var(--ui-session-resume-gap);width:100%;min-width:0;max-width:none;margin:0;min-height:var(--ui-session-resume-height);font-size:var(--ui-font-12);line-height:1;color:var(--muted)}
.resume-track{position:relative;flex:1;height:var(--ui-session-progress-height);background:color-mix(in srgb,var(--session-color),transparent 75%)}
.resume-track i{display:block;height:100%;background:var(--session-color)}
.resume-track b{position:absolute;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;color:var(--session-color);filter:drop-shadow(0 0 var(--ui-session-neon-glow) color-mix(in srgb,var(--session-color),transparent 50%))}
.resume-track .ui-icon{width:var(--ui-session-bookmark);height:var(--ui-session-bookmark);fill:var(--session-bg);stroke-width:2.4}
.film-row.removal-pending{background:var(--panel);border:1px dashed var(--muted);--session-color:var(--muted);--session-bg:var(--panel)}
.removal-pending :is(.session-info,.session-poster,.session-format,.session-steps,.session-person){filter:grayscale(1);opacity:.55}
:where(html[data-layout~="stack-session"]) .film-row{grid-template-columns:var(--ui-session-poster-width) minmax(0,1fr) max-content;min-height:var(--ui-session-compact-height)}
:where(html[data-layout~="stack-session"]) .session-poster{grid-column:1;grid-row:1 / span 2}
:where(html[data-layout~="stack-session"]) .session-actions{grid-column:2 / -1;justify-self:end;width:min(100%,var(--ui-session-actions-width))}
:where(html[data-layout~="stack-session"]) .session-actions{border:0;padding:0}


/* Icon ambience is independent of the site's colour theme and application data. */
.icon-style-picker{display:flex;align-items:center;gap:var(--ui-space-8);min-width:0;font-size:var(--ui-font-14)}
.icon-style-picker>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-style-picker>select{min-width:0;max-width:100%;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);padding:var(--ui-space-6) var(--ui-space-10);border-radius:var(--field-radius)}
.login>.icon-style-picker{justify-content:center;margin:0 auto var(--ui-space-24)}

.chat-receipt{display:block;text-align:right;white-space:nowrap;font-size:var(--ui-font-10);line-height:1.2;opacity:.8}