/* UI UX Pro Max operational layer. Existing themes and all application content stay intact. */
:root {
  --bg: #0b1018;
  --panel: #131b27;
  --panel-2: #192332;
  --panel-3: #223044;
  --text: #f8fafc;
  --muted: #aebccc;
  --pink: #22c55e;
  --pink-2: #86efac;
  --green: #4ade80;
  --line: #94a3b833;
  --shadow: 0 20px 54px #020617a8;
  --radius: 8px;
}

body { background: var(--bg); color: var(--text); }
.topbar { background: color-mix(in srgb, var(--panel) 84%, transparent); border-color: var(--line); box-shadow: 0 12px 34px #02061738; backdrop-filter: blur(18px) saturate(130%); }
.brand-mark { color: #052e16; background: var(--pink); box-shadow: 0 8px 24px color-mix(in srgb, var(--pink) 26%, transparent); }
.status-badge, .account-button, .header-feature-button:hover { background: color-mix(in srgb, var(--panel-3) 76%, transparent); border-color: var(--line); }

input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 42px; border-color: var(--line); border-radius: 8px; background-color: color-mix(in srgb, var(--bg) 84%, transparent); transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--pink) 56%, var(--line)); }
input:focus, select:focus, textarea:focus { border-color: var(--pink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 22%, transparent); }

.primary-button, .send-button { background: var(--pink); color: #052e16; box-shadow: 0 8px 22px color-mix(in srgb, var(--pink) 20%, transparent); }
.primary-button:hover, .send-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.secondary-button, .ghost-button, .header-feature-button, .account-button, .management-command, .settings-card, .user-card, .global-room-item { transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, transform 180ms cubic-bezier(.16,1,.3,1), box-shadow 180ms ease; }
.secondary-button:hover, .management-command:hover, .settings-card:hover { border-color: color-mix(in srgb, var(--pink) 54%, var(--line)); }

.auth-card, .modal-card, .account-dropdown, .management-hub-card, .permission-notice-card, .control-request-overlay {
  background: color-mix(in srgb, var(--panel-2) 88%, transparent);
  border-color: var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px) saturate(125%);
}
.auth-card { border-radius: 10px; }
.modal { background: #020617c7; backdrop-filter: blur(10px); }
.modal-card { border-radius: 10px; }

.sidebar, .chat-panel, .management-nav { background: color-mix(in srgb, var(--panel) 92%, transparent); border-color: var(--line); }
.player-panel, .file-panel, .account-content, .management-content { background-color: color-mix(in srgb, var(--bg) 94%, var(--panel)); }
.management-nav button.active, .chat-mode.active { background: var(--pink); color: #052e16; }
.management-command:hover, .user-card:hover, .global-room-item:hover { border-color: color-mix(in srgb, var(--pink) 52%, var(--line)); box-shadow: 0 10px 24px #02061732; transform: translateY(-1px); }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid #f8fafc; outline-offset: 3px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--pink) 44%, transparent); }

@media (max-width: 760px) {
  button:not(.modal-close):not(.reaction-bar button), .header-feature-button, .chat-mode { min-height: 48px; }
  .topbar { backdrop-filter: blur(12px); }
  .modal-card { max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .primary-button, .send-button, .secondary-button, .ghost-button, .header-feature-button, .account-button, .management-command, .settings-card, .user-card, .global-room-item { transition: none !important; }
}

/*
 * Steel-frame console direction: a structural layer for the actual application UI.
 * The existing DOM, IDs, 21 themes and event hooks remain unchanged. This layer
 * changes grouping, rhythm and depth so the product reads as a working console.
 */
:root {
  --pro-app-ink: #070b0e;
  --pro-app-panel: #11181e;
  --pro-app-panel-2: #172129;
  --pro-app-panel-3: #202d37;
  --pro-app-rule: rgba(188, 211, 222, .18);
  --pro-app-accent: #39a8ff;
  --pro-app-focus: #f0b64a;
  --pro-app-success: #72d6ad;
  --pro-app-danger: #ef8172;
  --pro-app-radius: 10px;
  --pro-app-ease: cubic-bezier(.16, 1, .3, 1);
}

body {
  background:
    radial-gradient(circle at 82% -10%, rgba(57, 168, 255, .12), transparent 32rem),
    linear-gradient(135deg, #070b0e 0%, #0c1217 52%, #071015 100%);
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 58px 0 0;
  background: linear-gradient(90deg, transparent 0 49.92%, rgba(188, 211, 222, .035) 50%, transparent 50.08%), linear-gradient(0deg, transparent 0 49.92%, rgba(188, 211, 222, .03) 50%, transparent 50.08%);
  background-size: 64px 64px;
  content: "";
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent 86%);
}

.topbar {
  height: 64px;
  padding-inline: 22px;
  gap: 18px;
  background: rgba(7, 12, 16, .94);
  border-bottom: 1px solid var(--pro-app-rule);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .24);
  backdrop-filter: blur(18px) saturate(130%);
}

.brand { flex-basis: 248px; min-width: 248px; }
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #04121c;
  background: var(--pro-app-accent);
  box-shadow: 0 8px 22px rgba(57, 168, 255, .28);
}
.brand strong { font-size: 16px; letter-spacing: .01em; }
.brand small { color: #88a0ac; font: 10px/1.2 "Cascadia Code", Consolas, monospace; letter-spacing: .08em; }

.room-header {
  justify-content: flex-start;
  gap: 0;
  border-inline: 1px solid var(--pro-app-rule);
}
.room-header span { min-width: 0; padding-inline: clamp(6px, .8vw, 16px); text-align: left; border-right: 1px solid rgba(188, 211, 222, .09); }
.room-header span:first-child { min-width: 0; }
.room-header small { color: #71848e; font: 9px/1.2 "Cascadia Code", Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.room-header strong { color: #e9f2f5; font-size: 12px; }
.room-header .healthy { color: var(--pro-app-success); }

.topbar-actions { gap: 6px; }
.topbar-scroll-actions { display: flex; align-items: center; gap: 4px; }
.header-feature-button { min-height: 38px; padding: 7px 9px; border: 1px solid transparent; border-radius: 8px; color: #a9bac2; }
.header-feature-button:hover { color: #e9f2f5; border-color: rgba(57, 168, 255, .38); background: rgba(57, 168, 255, .1); }
.header-feature-button > span[aria-hidden="true"] { color: var(--pro-app-accent); }
.status-badge { min-height: 38px; border: 1px solid var(--pro-app-rule); border-radius: 8px; background: rgba(255, 255, 255, .04); }
.account-button { min-height: 42px; border-radius: 8px; background: rgba(255, 255, 255, .05); }

.login-page {
  min-height: calc(100dvh - 64px);
  height: auto;
  grid-template-columns: minmax(0, 1.25fr) minmax(440px, .75fr);
  padding: 28px clamp(28px, 5vw, 88px) 48px;
  gap: clamp(18px, 4vw, 78px);
  background: transparent;
}
.login-page::before {
  position: absolute;
  inset: 28px clamp(18px, 3vw, 44px) 22px;
  border: 1px solid rgba(188, 211, 222, .13);
  border-radius: 14px;
  content: "";
  pointer-events: none;
}
.login-visual { min-height: 600px; padding: 40px; }
.login-visual::before, .login-visual::after { inset-block: 12%; opacity: .7; background: rgba(57, 168, 255, .2); box-shadow: 92px 0 rgba(57, 168, 255, .1), 184px 0 rgba(57, 168, 255, .05), 276px 0 rgba(57, 168, 255, .02); }
.login-cube-scene { filter: drop-shadow(0 30px 44px rgba(0, 0, 0, .34)); }
.login-cube-face { border-color: rgba(57, 168, 255, .32); background: linear-gradient(135deg, rgba(25, 47, 61, .96), rgba(8, 15, 20, .96)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.login-cube-front { background: linear-gradient(145deg, rgba(20, 68, 94, .98), rgba(7, 16, 22, .98)); }
.login-cube-face-icon { color: var(--pro-app-accent); filter: none; }
.login-cube-face-title { color: #eef7fb; letter-spacing: .01em; }
.login-cube-face-text { color: #a8c0ca; }
.sync-scan-line { background: var(--pro-app-accent); box-shadow: 0 0 18px rgba(57, 168, 255, .78); }
.sync-frame-meter b { background: rgba(57, 168, 255, .28); }

.auth-card {
  align-self: center;
  width: min(460px, calc(100% - 10px));
  margin-block: 20px;
  padding: 34px 36px 30px;
  border: 1px solid rgba(188, 211, 222, .2);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(23, 33, 41, .96), rgba(11, 17, 22, .98));
  box-shadow: 0 28px 72px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.auth-card::before {
  position: absolute;
  inset: 18px auto 18px 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--pro-app-accent);
  box-shadow: 0 0 18px rgba(57, 168, 255, .35);
  content: "";
}
.auth-card h1 { margin: 8px 0 5px; font-size: 32px; letter-spacing: -.02em; }
.auth-card .eyebrow { color: var(--pro-app-accent); font: 10px/1.2 "Cascadia Code", Consolas, monospace; letter-spacing: .12em; }
.auth-card .muted { color: #9ab0ba; line-height: 1.6; }
.auth-card label { color: #c4d2d8; }
.auth-card input:not([type="checkbox"]):not([type="radio"]), .auth-card select { min-height: 46px; border-radius: 8px; background: rgba(4, 10, 14, .7); border-color: rgba(188, 211, 222, .18); }
.auth-card input:hover, .auth-card select:hover { border-color: rgba(57, 168, 255, .56); }
.auth-card input:focus, .auth-card select:focus { border-color: var(--pro-app-accent); box-shadow: 0 0 0 3px rgba(57, 168, 255, .2); }
.auth-card .primary-button { min-height: 48px; border-radius: 8px; color: #061421; background: var(--pro-app-accent); box-shadow: 0 10px 24px rgba(57, 168, 255, .2); }
.auth-card .secondary-button { min-height: 46px; border-radius: 8px; background: rgba(255, 255, 255, .05); }
.auth-card .primary-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.device-ip-row { background: rgba(57, 168, 255, .07); border-color: rgba(57, 168, 255, .25); }

.workspace {
  grid-template-columns: clamp(264px, 18vw, 336px) minmax(0, 1fr) clamp(276px, 18vw, 360px);
  background: rgba(6, 10, 13, .58);
}
.side-panel { background: linear-gradient(180deg, rgba(17, 24, 30, .98), rgba(10, 16, 20, .98)); border-color: var(--pro-app-rule); }
.file-panel { padding: 18px 16px; border-right: 1px solid var(--pro-app-rule); }
.user-panel { border-left: 1px solid var(--pro-app-rule); }
.panel-heading { min-height: 42px; padding-bottom: 10px; border-bottom: 1px solid rgba(188, 211, 222, .12); }
.panel-heading h2, .tab-content > h2 { font-size: 18px; letter-spacing: -.01em; }
.count-pill { min-width: 28px; height: 28px; border-radius: 7px; color: #061421; background: var(--pro-app-accent); }
.upload-button { min-height: 96px; border-color: rgba(57, 168, 255, .42); border-radius: 10px; background: linear-gradient(135deg, rgba(57, 168, 255, .14), rgba(57, 168, 255, .04)); }
.upload-button:hover { border-color: var(--pro-app-accent); background: rgba(57, 168, 255, .18); }
.file-card, .global-room-item, .user-card { border-color: rgba(188, 211, 222, .11); border-radius: 9px; background: rgba(255, 255, 255, .035); }
.file-card:hover, .file-card.active, .global-room-item:hover, .user-card:hover { border-color: rgba(57, 168, 255, .52); background: rgba(57, 168, 255, .09); transform: none; }

.theater { background: radial-gradient(circle at 50% 15%, rgba(57, 168, 255, .09), transparent 34rem), #070b0e; }
.room-marquee, .status-card, .theater-toolbar, .owner-controls, .chat-panel { border-color: var(--pro-app-rule); }
.status-card { background: var(--pro-app-rule); }
.status-card > div { min-height: 48px; background: rgba(17, 24, 30, .94); }
.status-card strong { color: #e7f0f4; }
.theater-toolbar, .owner-controls { background: rgba(17, 24, 30, .92); }
.player-container { margin: 12px; border: 1px solid rgba(188, 211, 222, .18); border-radius: 12px; background: #04080a; box-shadow: 0 22px 52px rgba(0, 0, 0, .36), inset 0 0 0 1px rgba(255, 255, 255, .03); }
.player-container video, .player-container audio { border-radius: 10px; }
.chat-panel { background: linear-gradient(180deg, rgba(17, 24, 30, .98), rgba(9, 14, 18, .98)); }
.chat-head { min-height: 50px; border-bottom-color: rgba(188, 211, 222, .12); }
.chat-mode.active { color: #061421; background: var(--pro-app-accent); }
.chat-message { border-bottom-color: rgba(188, 211, 222, .08); }
.chat-form input { min-height: 46px; border-radius: 8px; }
.send-button { min-height: 46px; border-radius: 8px; color: #061421; background: var(--pro-app-accent); }

.management-hub-card { width: min(1180px, calc(100vw - 44px)); border: 1px solid rgba(188, 211, 222, .2); border-radius: 12px; background: #0d151b; box-shadow: 0 34px 100px rgba(0, 0, 0, .48); }
.management-hub-layout { grid-template-columns: 244px minmax(0, 1fr); }
.management-nav { gap: 7px; padding: 26px 16px; background: #0a1116; border-right-color: var(--pro-app-rule); }
.management-nav h2 { margin: 5px 8px 20px; font-size: 19px; letter-spacing: -.02em; }
.management-nav button { min-height: 46px; padding: 10px 12px; border: 1px solid transparent; border-radius: 8px; }
.management-nav button:hover { color: #eaf5f8; border-color: rgba(57, 168, 255, .28); background: rgba(57, 168, 255, .08); }
.management-nav button.active { color: #061421; background: var(--pro-app-accent); box-shadow: 0 8px 18px rgba(57, 168, 255, .18); }
.management-content { padding: 24px 28px 34px; background: linear-gradient(180deg, rgba(17, 27, 34, .98), rgba(10, 16, 20, .98)); }
.management-content .settings-card, .management-content .management-command, .management-content .user-card { border-radius: 9px; border-color: rgba(188, 211, 222, .15); background: rgba(255, 255, 255, .035); box-shadow: none; }
.management-content .settings-card:hover, .management-content .management-command:hover { border-color: rgba(57, 168, 255, .48); background: rgba(57, 168, 255, .08); transform: none; }

.modal-card { border-radius: 12px; border-color: rgba(188, 211, 222, .2); background: linear-gradient(145deg, rgba(23, 33, 41, .98), rgba(9, 14, 18, .98)); box-shadow: 0 30px 90px rgba(0, 0, 0, .52); }
.modal-card h2 { letter-spacing: -.02em; }
.modal-close { width: 40px; height: 40px; border-radius: 8px; }
.modal-close:hover { color: var(--pro-app-accent); background: rgba(57, 168, 255, .1); }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--pro-app-focus); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(240, 182, 74, .24); }

@media (min-width: 1500px) {
  .login-page { padding-inline: max(44px, calc((100vw - 1660px) / 2)); }
  .workspace { grid-template-columns: 330px minmax(0, 1fr) 360px; }
}

@media (max-width: 1020px) {
  .topbar { padding-inline: 14px; }
  .brand { flex-basis: 214px; min-width: 214px; }
  .room-header span { min-width: 94px; padding-inline: 10px; }
  .login-page { grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr); padding-inline: 22px; gap: 20px; }
  .login-visual { padding-inline: 10px; }
  .workspace { grid-template-columns: 248px minmax(0, 1fr) 250px; }
}

@media (max-width: 760px) {
  body::before { display: none; }
  .topbar { height: 58px; padding-inline: 12px; }
  .brand { flex-basis: 190px; min-width: 190px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand strong { font-size: 14px; }
  .room-header { display: none; }
  .login-page { min-height: calc(100dvh - 58px); display: block; padding: 16px 10px 28px; }
  .login-page::before { inset: 10px 8px 12px; border-radius: 12px; }
  .login-visual { min-height: 330px; padding: 10px 0 20px; }
  .auth-card { width: min(100%, 470px); margin: 12px auto; padding: 28px 22px 24px; }
  .workspace { display: block; min-height: calc(100dvh - 58px); }
  .file-panel, .user-panel { display: block; }
  .theater { width: 100%; min-height: calc(100dvh - 58px); flex-direction: column; overflow-x: hidden; }
  .mobile-module-nav { display: grid; width: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-inline: 8px; }
  .mobile-module-button { display: grid; min-width: 0; min-height: 44px; place-items: center; gap: 2px; padding: 5px 3px; }
  .mobile-module-button small { font-size: 11px; }
  .player-container { margin: 8px; }
  .theater-toolbar { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
  .management-hub-card { width: calc(100vw - 14px); }
  .management-hub-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .management-nav { display: flex; align-items: center; overflow-x: auto; padding: 12px 42px 10px 10px; border-right: 0; border-bottom: 1px solid var(--pro-app-rule); }
  .management-nav > div { display: none; }
  .management-nav button { flex: 0 0 auto; white-space: nowrap; }
  .management-content { padding: 16px 14px 24px; }
}

@media (max-width: 760px), (max-width: 924px) and (max-height: 520px) {
  .login-visual { display: none !important; min-height: 0; padding: 0; }
  .login-page { display: block; padding: max(10px, env(safe-area-inset-top)) 9px max(20px, env(safe-area-inset-bottom)); }
  .login-page::before { inset: 6px; }
  .auth-card { width: min(100%, 470px); max-height: none; overflow: visible; margin: 8px auto; padding: 20px 15px 18px; }
}

/* SyncWatch Android WebView final layout contract.  pro-max is loaded after
   style.css, so these rules intentionally close the cascade for real phones:
   no off-screen player margin, no nested room scroller, and fixed-height
   module buttons that cannot stretch when a side panel is opened. */
body.android-client .theater {
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  overflow: visible !important;
  align-content: start;
}
body.android-client .player-container {
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
}
body.android-client .mobile-module-nav {
  align-self: start;
  grid-auto-rows: max-content;
}
body.android-client .mobile-module-button {
  align-self: start;
  height: 48px;
  min-height: 48px;
  box-sizing: border-box;
}
body.android-client .theater-toolbar {
  display: grid !important;
  width: auto;
  max-width: 100%;
  overflow: visible !important;
  grid-template-columns: minmax(0, 1fr);
}
body.android-client .theater-toolbar .toolbar-module {
  flex: none !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
body.android-client .side-panel:not(.mobile-open) { display: none; }
body.android-client .side-panel.mobile-open { display: block; }
body.android-client .emoji-toolbar > .emoji-bar {
  height: min(44dvh, 340px);
  max-height: min(44dvh, 340px);
  min-height: 200px;
  box-sizing: border-box;
  overflow-y: auto;
  touch-action: pan-y;
  padding-bottom: 18px;
}
body.android-client .player-container.fullscreen-active,
body.android-client .player-container:fullscreen {
  margin: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  background: var(--theme-stage, #0b1113) !important;
}

/* Some OEM browsers expose a desktop-width CSS viewport while the device is
 * touch-only. Keep the room single-column in that case so the player, upload
 * cards and thumbnails cannot be pushed into a right-side desktop track. */
@media (pointer: coarse) and (max-width: 1200px), (hover: none) and (max-width: 1200px) {
  body:not(.electron-server) .workspace,
  body.android-client .workspace { display: block !important; width: 100% !important; max-width: 100% !important; }
  /* Touch layouts collapse the side panels by default, but an explicit
   * .mobile-open state must win over this coarse-pointer fallback.  The
   * previous unconditional display:none rule made the Library and Members
   * buttons appear to do nothing on phones (the JS state changed, the panel
   * stayed hidden). */
  body:not(.electron-server) .file-panel:not(.mobile-open),
  body:not(.electron-server) .user-panel:not(.mobile-open),
  body.android-client .file-panel:not(.mobile-open),
  body.android-client .user-panel:not(.mobile-open) { display: none !important; }
  body:not(.electron-server) .file-panel.mobile-open,
  body:not(.electron-server) .user-panel.mobile-open,
  body.android-client .file-panel.mobile-open,
  body.android-client .user-panel.mobile-open { display: block !important; }
  body:not(.electron-server) .theater,
  body.android-client .theater {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "marquee" "status" "mobile-nav" "player" "toolbar" "owner" "chat" !important;
    grid-template-rows: auto auto auto minmax(220px, 43dvh) auto auto minmax(180px, .55fr) !important;
    overflow: visible !important;
  }
  /* The base touch grid has player-sized tracks.  When a module replaces the
   * player, remove those tracks here as well: this rule must carry the same
   * priority as the base grid above or the chat is rendered below an empty
   * 43dvh player row. */
  body:not(.electron-server) .theater[data-mobile-module-active="chat"],
  body.android-client .theater[data-mobile-module-active="chat"] {
    grid-template-areas: "marquee" "mobile-nav" "chat" !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
  }
  body:not(.electron-server) .theater[data-mobile-module-active="library"],
  body:not(.electron-server) .theater[data-mobile-module-active="members"],
  body.android-client .theater[data-mobile-module-active="library"],
  body.android-client .theater[data-mobile-module-active="members"] {
    grid-template-areas: "marquee" "mobile-nav" !important;
    grid-template-rows: auto auto !important;
  }
  body:not(.electron-server) .theater-toolbar,
  body.android-client .theater-toolbar { width: 100% !important; min-width: 0 !important; overflow: visible !important; }
  body:not(.electron-server) .theater-toolbar .toolbar-buttons,
  body.android-client .theater-toolbar .toolbar-buttons {
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }
  body:not(.electron-server) .theater-toolbar .toolbar-buttons > *,
  body.android-client .theater-toolbar .toolbar-buttons > * { min-width: 0 !important; width: 100% !important; }
  body:not(.electron-server) .player-container,
  body.android-client .player-container { width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; }
}

@media (max-width: 540px) {
  body:not(.android-client) .topbar-scroll-actions,
  body:not(.android-client) .topbar-fixed-actions,
  body.android-client .topbar-scroll-actions,
  body.android-client .topbar-fixed-actions { display: contents !important; }
  .theater-toolbar .toolbar-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .theater-toolbar .toolbar-buttons > * { width: 100%; min-width: 0; min-height: 44px; white-space: normal; }
  .theater-toolbar .toolbar-select { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; text-align: center; }
  .theater-toolbar .toolbar-select select { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-card, .login-cube-scene, .player-container, .management-command, .settings-card { animation: none !important; transition: none !important; }
  .auth-card .primary-button:hover, .management-content .settings-card:hover, .management-content .management-command:hover { transform: none; }
}

/* Browser login pages must use one document-level scroll container.  This is
 * intentionally the last rule in the theme stylesheet so the structural
 * theme cannot reintroduce the fixed 100% body/main pair used by the room
 * shell.  It also keeps touch scrolling enabled when the login card grows
 * beyond a short viewport or browser zoom level. */
body:not(.android-client):not(.electron-server) {
  height: auto !important;
  min-height: 100dvh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto;
}
body:not(.android-client):not(.electron-server) > main:has(> .login-page:not(.is-hidden)) {
  height: auto !important;
  min-height: calc(100dvh - 64px);
  overflow: visible !important;
}
body:not(.android-client):not(.electron-server) > main > .login-page {
  height: auto !important;
  min-height: calc(100dvh - 64px);
  overflow: visible !important;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* Once the login surface is hidden, restore a bounded desktop room viewport
 * so the theater grid keeps its player/text reader scroll area instead of
 * expanding to the entire document. */
body:not(.android-client):not(.electron-server):not(:has(> main > .login-page:not(.is-hidden))) > main {
  height: calc(100dvh - 64px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Mobile room pages must keep the document as the scroll container.  The
 * bounded desktop rule above is intentionally overridden here; otherwise an
 * expanded chat/emoji area grows below a clipped <main> and cannot be reached
 * by touch scrolling.  When a single module is active, collapse the hidden
 * grid tracks as well so Chat does not inherit an empty player-sized row. */
@media (max-width: 924px) {
  body:not(.android-client):not(.electron-server):not(:has(> main > .login-page:not(.is-hidden))) > main,
  body.android-client > main {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body:not(.android-client) .theater[data-mobile-module-active="chat"],
  body.android-client .theater[data-mobile-module-active="chat"] {
    grid-template-areas: "marquee" "mobile-nav" "chat";
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 0;
  }
  body:not(.android-client) .theater[data-mobile-module-active="library"],
  body:not(.android-client) .theater[data-mobile-module-active="members"],
  body.android-client .theater[data-mobile-module-active="library"],
  body.android-client .theater[data-mobile-module-active="members"] {
    grid-template-areas: "marquee" "mobile-nav";
    grid-template-rows: auto auto;
    min-height: 0;
  }
  body:not(.android-client) .theater[data-mobile-module-active="chat"] .chat-panel,
  body.android-client .theater[data-mobile-module-active="chat"] .chat-panel {
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
    margin-inline: 10px;
    min-height: 0;
    overflow-x: hidden;
  }

  /* Android WebView inherits an older landscape rule that clips .workspace
     and the document at the viewport edge.  Keep one scroll owner for every
     mobile orientation so the playback tools and fullscreen action remain
     reachable after the room grows. */
  body.android-client {
    height: auto !important;
    min-height: 100dvh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  body.android-client > main,
  body.android-client .main-page,
  body.android-client .theater {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  body.android-client .workspace {
    height: auto !important;
    min-height: 0 !important;
    max-width: 100vw;
    /* clip only the horizontal axis without creating a nested vertical
       scroller; the document remains the owner of touch scrolling. */
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  /* A grid row can stretch its children to the height of the whole theater
     when the chat/player tracks are rebuilt.  Pin the module strip and each
     touch target to one stable row instead of allowing 120px+ buttons. */
  body:not(.electron-server) .mobile-module-nav,
  body.android-client .mobile-module-nav {
    height: auto !important;
    min-height: 58px;
    grid-template-rows: 48px;
    grid-auto-rows: 48px;
    align-items: start;
    align-content: start;
    box-sizing: border-box;
  }
  body:not(.electron-server) .mobile-module-button,
  body.android-client .mobile-module-button {
    height: 48px !important;
    max-height: 48px !important;
    min-height: 48px !important;
    align-self: start;
    box-sizing: border-box;
  }

  /* Keep the composer predictable on both mobile Web and Android WebView.
     The desktop six-column form made the recipient trigger and message field
     share a row at 360–420px, which visually covered the field and pushed Send
     onto a second line. */
  body:not(.electron-server) .chat-panel:not(.mobile-chat-collapsed) .chat-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    padding: 9px;
  }
  body:not(.electron-server) .chat-panel:not(.mobile-chat-collapsed) .chat-form > .select-shell,
  body:not(.electron-server) .chat-panel:not(.mobile-chat-collapsed) .chat-form > select,
  body:not(.electron-server) .chat-panel:not(.mobile-chat-collapsed) .chat-form > input:not(.visually-hidden) {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }
  body:not(.electron-server) .chat-panel:not(.mobile-chat-collapsed) .chat-form > .select-shell .select-trigger {
    width: 100%;
  }
  body:not(.electron-server) .chat-panel:not(.mobile-chat-collapsed) .chat-form > button {
    width: 100%;
    min-width: 0;
  }
}

/* Fullscreen controls stay in a dedicated hit-test layer on touch browsers.
   A transparent transition or a child label must never steal the tap from
   the button itself.  Use the theme stage instead of a pure black canvas for
   the empty/letterboxed state so the control surface remains legible. */
body .player-container:fullscreen,
body .player-container.fullscreen-active {
  background: var(--theme-stage, #0b1113) !important;
  isolation: isolate;
}
body .player-container:fullscreen .fullscreen-overlay,
body .player-container.fullscreen-active .fullscreen-overlay {
  isolation: isolate;
}
body .player-container:fullscreen .fullscreen-actions button,
body .player-container.fullscreen-active .fullscreen-actions button {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  touch-action: manipulation;
}
body .player-container:fullscreen .fullscreen-exit-button,
body .player-container.fullscreen-active .fullscreen-exit-button {
  flex: 0 0 auto;
}
@media (max-width: 924px), (pointer: coarse) {
  /* Do not fade the hit-test surface on touch devices.  During the 200 ms
     opacity transition Android WebView can paint the last action button but
     keep it out of the compositor hit map, making the first tap appear lost. */
  body .player-container:fullscreen .fullscreen-overlay,
  body .player-container.fullscreen-active .fullscreen-overlay {
    transition: none !important;
  }
}

/* Keep the Android chat header compact after repeated module switches.  The
 * legacy WebView rule used a two-column grid and made the action group a
 * one-column grid; every action then occupied a full row and stretched the
 * header to roughly 200px.  Two explicit horizontal rows preserve all
 * controls without pushing the history/composer below the viewport. */
@media (max-width: 924px) {
  body.android-client .chat-panel:not(.mobile-chat-collapsed) .chat-head,
  body:not(.electron-server) .chat-panel:not(.mobile-chat-collapsed) .chat-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    align-content: start !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 122px;
    gap: 4px !important;
    padding: 4px 8px 6px !important;
    overflow: hidden !important;
    box-sizing: border-box;
  }
  body.android-client .chat-head .chat-modes,
  body:not(.electron-server) .chat-head .chat-modes {
    grid-column: 1 / -1;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 44px;
    max-height: 50px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap;
    scrollbar-width: none;
  }
  body.android-client .chat-head .chat-modes::-webkit-scrollbar,
  body:not(.electron-server) .chat-head .chat-modes::-webkit-scrollbar { display: none; }
  body.android-client .chat-head .chat-head-actions,
  body:not(.electron-server) .chat-head .chat-head-actions {
    grid-column: 1 / -1;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px;
    max-height: 50px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 4px !important;
    scrollbar-width: none;
  }
  body.android-client .chat-head .chat-head-actions::-webkit-scrollbar,
  body:not(.electron-server) .chat-head .chat-head-actions::-webkit-scrollbar { display: none; }
  body.android-client .chat-head .chat-modes > *,
  body.android-client .chat-head .chat-head-actions > *,
  body:not(.electron-server) .chat-head .chat-modes > *,
  body:not(.electron-server) .chat-head .chat-head-actions > * {
    flex: 0 0 auto !important;
    align-self: center !important;
  }
  body.android-client .chat-head .chat-head-actions > button,
  body.android-client .chat-head .chat-head-actions > .chat-only-toggle,
  body:not(.electron-server) .chat-head .chat-head-actions > button,
  body:not(.electron-server) .chat-head .chat-head-actions > .chat-only-toggle {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    white-space: nowrap;
  }
}