:root { color-scheme: dark; --user-font-size: 14px; --user-accent-alpha: .65; --bg: #0f1110; --rail: #0a0b0a; --side: #171914; --panel: #20231c; --panel-2: #292d23; --ink: #f5f0df; --muted: #a8a18e; --soft: #746f61; --line: #3d3b2d; --line-hot: #83652a; --accent: #f1a832; --accent-rgb: 241, 168, 50; --accent-light: #ffbd4e; --accent-lighter: #ffd489; --accent-lightest: #ffe6ad; --accent-2: #d46d2f; --green: #62d078; --danger: #e04f3f; --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 28px; --shadow-soft: 0 16px 45px rgba(0, 0, 0, .28); --shadow-card: 0 10px 28px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .035); --surface-soft: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); } /* Color themes: swap the base palette (background/panel/text tones) via [data-color-theme] on , set from uiPreferences.colorTheme in applyUiPreferences(). Deliberately separate from --accent/--accent-rgb etc., which stay user-picked via the existing color input and are set inline by applyAccentColor() -- inline style always wins over these attribute-selector rules, so accent choice survives any theme switch. */ :root[data-color-theme="midnight"] { --bg: #0a0e14; --rail: #070a0f; --side: #101620; --panel: #161d29; --panel-2: #1c2534; --ink: #e8edf5; --muted: #8b96a8; --soft: #5c6576; --line: #2a3444; } :root[data-color-theme="amethyst"] { --bg: #100e16; --rail: #0a0910; --side: #17131f; --panel: #201a2c; --panel-2: #291f38; --ink: #f0ecf7; --muted: #a99fbd; --soft: #756a8a; --line: #392e4d; } :root[data-color-theme="crimson"] { --bg: #140d0d; --rail: #0d0808; --side: #201212; --panel: #2c1818; --panel-2: #381e1e; --ink: #f7ece9; --muted: #bd9f99; --soft: #8a6b65; --line: #4d302e; } :root[data-color-theme="graphite"] { --bg: #101112; --rail: #0a0b0b; --side: #17181a; --panel: #212325; --panel-2: #2a2c2f; --ink: #f2f2f0; --muted: #9a9c9f; --soft: #6b6d70; --line: #37393c; } :root[data-color-theme="macos"] { --bg: #1e1e1e; --rail: #161616; --side: #232323; --panel: #2a2a2a; --panel-2: #323232; --ink: #f5f5f7; --muted: #98989d; --soft: #636366; --line: #3a3a3c; /* macOS leans the opposite way from Windows-Stil -- generous, soft rounded corners rather than flat/square ones. */ --radius-xs: 8px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 22px; --shadow-soft: 0 10px 26px rgba(0, 0, 0, .3); --shadow-card: 0 4px 12px rgba(0, 0, 0, .22); --surface-soft: none; } :root[data-color-theme="discord"] { --bg: #1e1f22; --rail: #1e1f22; --side: #2b2d31; --panel: #313338; --panel-2: #383a40; --ink: #f2f3f5; --muted: #949ba4; --soft: #6d6f78; --line: #3f4147; --radius-xs: 3px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --shadow-soft: 0 8px 20px rgba(0, 0, 0, .3); --shadow-card: 0 2px 8px rgba(0, 0, 0, .24); --surface-soft: none; } /* "Aurora" -- the new modern default look (opt-in via the Theme dropdown, doesn't touch "olive" or any other existing theme). Cooler, deeper base than the warm olive default, a vivid indigo accent instead of amber, and a softer/larger radius + deeper elevation shadow scale for a more contemporary "SaaS app" feel. Structural component refinements (sidebar, member rows, message bubbles, composer) live in their own block at the end of this file, scoped the same way the Windows-Stil overrides are, so they reliably win the cascade regardless of source order elsewhere. */ :root[data-color-theme="aurora"] { --bg: #0b0d12; --rail: #07080b; --side: #12141b; --panel: #171a23; --panel-2: #1d212c; --ink: #eef0f6; --muted: #9aa0b4; --soft: #656b80; --line: #262b38; --line-hot: #45507a; --accent-2: #5468e0; --green: #4ade80; --danger: #f2495c; --radius-xs: 10px; --radius-sm: 14px; --radius-md: 18px; --radius-lg: 24px; --radius-xl: 30px; --shadow-soft: 0 20px 60px rgba(0, 0, 0, .42); --shadow-card: 0 12px 32px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .045); --surface-soft: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); } :root[data-color-theme="cyberpunk"] { /* Deliberately the opposite of Windows-Stil: keep the glow, keep the animated background, lean into it harder with neon on near-black purple instead of dampening everything to flat/neutral. */ --bg: #06040a; --rail: #030209; --side: #0c0817; --panel: #120b24; --panel-2: #1a1032; --ink: #f0e6ff; --muted: #9c8fc4; --soft: #6b5f96; --line: #3d2a63; } /* "Windows-Stil" is a single selectable theme (uiPreferences.colorTheme = "windows"), not a separate slider/toggle -- picking it in the Theme dropdown sets both a neutral blue-gray palette (close to Windows 11's dark Fluent look) and flatter, near-square chrome in one go. */ :root[data-color-theme="windows"] { --bg: #1c1c1c; --rail: #141414; --side: #202020; --panel: #2b2b2b; --panel-2: #323232; --ink: #f2f2f2; --muted: #a0a0a0; --soft: #6e6e6e; --line: #3f3f3f; --radius-xs: 2px; --radius-sm: 3px; --radius-md: 4px; --radius-lg: 4px; --radius-xl: 6px; --shadow-soft: 0 2px 6px rgba(0, 0, 0, .35); --shadow-card: 0 1px 2px rgba(0, 0, 0, .3); --surface-soft: none; } * { box-sizing: border-box; } /* ARC scrollbars */ * { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), .72) rgba(13, 15, 11, .9); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: linear-gradient(180deg, rgba(var(--accent-rgb),.055), rgba(0,0,0,.18)), #0d0f0b; border-left: 1px solid rgba(var(--accent-rgb),.12); } ::-webkit-scrollbar-thumb { min-height: 44px; border: 2px solid #0d0f0b; background: linear-gradient(180deg, rgba(255,218,139,.86), rgba(var(--accent-rgb),.58) 48%, rgba(132,93,33,.84)); box-shadow: inset 0 0 0 1px rgba(255,244,214,.18), 0 0 10px rgba(var(--accent-rgb),.12); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ffe0a1, rgba(var(--accent-rgb),.82) 48%, rgba(176,114,37,.95)); box-shadow: inset 0 0 0 1px rgba(255,244,214,.3), 0 0 14px rgba(var(--accent-rgb),.22); } ::-webkit-scrollbar-corner { background: #0d0f0b; } .sidebar, .members, .messages, .revision-list, .changelog-dialog, .settings-card, .screen-stage { scrollbar-color: rgba(var(--accent-rgb), .78) rgba(13, 15, 11, .92); } body { margin: 0; height: 100vh; display: grid; grid-template-columns: var(--left-sidebar-width, 260px) 6px minmax(0, 1fr) 6px var(--right-sidebar-width, 280px); background: radial-gradient(circle at 82% 9%, rgba(var(--accent-rgb),.16), transparent 28%), radial-gradient(circle at 24% 88%, rgba(212,109,47,.13), transparent 34%), radial-gradient(circle at 48% 54%, rgba(98,208,120,.055), transparent 30%), linear-gradient(135deg, #11130f 0%, #0b0d0b 48%, #17130d 100%); background-size: 120% 120%, 130% 130%, 150% 150%, 100% 100%; animation: ambient-shift 18s ease-in-out infinite; color: var(--ink); font: var(--user-font-size)/1.4 "Arial Narrow", Arial, Helvetica, sans-serif; overflow: hidden; } body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; } body.has-server-background { background-image: linear-gradient(135deg, rgba(17,19,15,.88), rgba(11,13,11,.92) 48%, rgba(23,19,13,.88)), var(--server-background-image); background-size: cover; background-position: center; background-attachment: fixed; } body.has-server-background .chat { background: radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.14), transparent 34%), linear-gradient(180deg, rgba(8,10,8,.50), rgba(8,10,8,.70)), var(--server-background-image); background-size: 120% 120%, 100% 100%, cover; background-position: center, center, center; } body.has-server-background .messages { background: rgba(4, 6, 4, .18); } body.has-server-background .chat-head, body.has-server-background .composer { background-color: rgba(10, 12, 9, .78); backdrop-filter: blur(10px); } .cookie-notice { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 130; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: 640px; margin: 0 auto; padding: 14px 16px; border: 1px solid var(--line-hot); border-radius: var(--radius-lg); background: #151711; box-shadow: 0 16px 48px rgba(0,0,0,.5); } .cookie-notice[hidden] { display: none !important; } .cookie-notice p { flex: 1 1 260px; margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.5; } .cookie-notice-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .maintenance-banner { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 35%, rgba(var(--accent-rgb),.18), rgba(5,6,5,.86) 58%); backdrop-filter: blur(8px); } .maintenance-banner[hidden] { display: none !important; } .maintenance-card { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 16px; width: min(560px, calc(100vw - 36px)); padding: 22px; border: 1px solid rgba(var(--accent-rgb),.45); border-radius: 24px; background: linear-gradient(180deg, rgba(31,34,26,.96), rgba(10,12,9,.98)); box-shadow: 0 28px 80px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.04); } .maintenance-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: rgba(var(--accent-rgb),.18); color: var(--accent-lighter); font-size: 28px; font-weight: 900; } .maintenance-card h2 { margin: 0 0 6px; } .maintenance-card p { margin: 0 0 8px; color: var(--ink); font-size: 1.05rem; } .maintenance-card small { color: var(--muted); } .maintenance-card button { margin-top: 12px; width: fit-content; } .license-issuer-panel { display: none; } body.is-license-issuer .license-issuer-panel { display: grid; } body.maintenance-active .composer, body.maintenance-active .profile-actions, body.maintenance-active .screen-stage { pointer-events: none; opacity: .45; } .update-notice-banner { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid rgba(var(--accent-rgb),.35); background: rgba(var(--accent-rgb),.12); color: var(--accent-lighter); font-size: .92rem; } .update-notice-banner[hidden] { display: none !important; } .update-notice-banner span { flex: 1; } .update-notice-banner button { padding: 5px 14px; border: 0; border-radius: 999px !important; background: linear-gradient(180deg, var(--accent-light), var(--accent)); color: #17120a; font-weight: 800; font-size: .85rem; cursor: pointer; } .update-notice-banner #updateNoticeDismissButton { padding: 2px 8px; border-radius: 50% !important; background: transparent; color: inherit; font-size: 1.1rem; line-height: 1; font-weight: 400; } .screen-limitation-banner { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid rgba(224, 79, 63, .45); background: rgba(224, 79, 63, .14); color: #ffb3a8; font-size: .92rem; font-weight: 600; } .screen-limitation-banner[hidden] { display: none !important; } .screen-limitation-banner span { flex: 1; } .screen-limitation-banner button { padding: 2px 8px; border: 0; border-radius: 50% !important; background: transparent; color: inherit; font-size: 1.1rem; line-height: 1; font-weight: 400; cursor: pointer; } .update-notice-banner #updateNoticeDismissButton:hover { background: rgba(255,255,255,.1); } body::after { opacity: calc(.22 + var(--user-accent-alpha) * .42); } body.ui-compact .sidebar, body.ui-compact .members, body.ui-compact .chat-head { font-size: .94em; } body[data-chat-density="relaxed"] .message { padding-block: 12px; gap: 12px; } body[data-chat-density="compact"] .message { padding-block: 4px; gap: 8px; } body[data-chat-density="compact"] .message .avatar { width: 32px; height: 32px; } body::before { z-index: 0; background: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 46px 46px, 46px 46px; mask-image: radial-gradient(circle at center, #000 25%, transparent 82%); opacity: .82; animation: grid-drift 18s linear infinite; } body::after { z-index: 1; background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 5px), linear-gradient(110deg, transparent 0 34%, rgba(var(--accent-rgb),.07) 43%, transparent 53%), radial-gradient(circle at 20% 30%, rgba(var(--accent-rgb),.07), transparent 24%); background-size: auto, 185% 100%, 140% 140%; mix-blend-mode: screen; opacity: .58; animation: field-sweep 9s linear infinite, ambient-haze 14s ease-in-out infinite; } @keyframes ambient-shift { 0%, 100% { background-position: 0% 0%, 100% 100%, 50% 40%, 0 0; } 50% { background-position: 9% 7%, 88% 92%, 58% 52%, 0 0; } } @keyframes ambient-haze { 0%, 100% { background-position: 0 0, -125% 0, 10% 24%; } 50% { background-position: 0 0, 30% 0, 76% 60%; } } @keyframes field-sweep { from { background-position: 0 0, -120% 0; } to { background-position: 0 0, 120% 0; } } .rail, .sidebar, .chat, .members, .auth { position: relative; z-index: 2; } .sidebar-resize-handle { min-width: 6px; height: 100vh; align-self: stretch; cursor: col-resize; position: relative; z-index: 4; background: rgba(var(--accent-rgb),.05); border-inline: 1px solid rgba(var(--accent-rgb),.1); } .sidebar-resize-handle::before { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 54px; transform: translate(-50%, -50%); border-radius: 999px; background: rgba(var(--accent-rgb),.5); box-shadow: 0 0 12px rgba(var(--accent-rgb),.18); } .sidebar-resize-handle:hover, body.sidebar-layout-dragging .sidebar-resize-handle { background: rgba(var(--accent-rgb),.14); } body.sidebar-layout-dragging { cursor: col-resize; user-select: none; } body.channel-menu-open .sidebar { overflow-x: hidden; z-index: 40; } button, input, textarea, select { font: inherit; } button, select, input, textarea { border-radius: 0; } button { transition: border-color .14s ease, color .14s ease, background .14s ease, filter .14s ease, box-shadow .14s ease, transform .14s ease; } button:hover:not(:disabled) { border-color: var(--line-hot); filter: brightness(1.1); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.26), 0 0 16px rgba(var(--accent-rgb),.12); transform: translateY(-1px); } button:active:not(:disabled) { transform: translateY(0); filter: brightness(.98); } body.locked .sidebar, body.locked .chat, body.locked .members, body.locked .sidebar-resize-handle { filter: blur(2px) brightness(.55); pointer-events: none; } .auth { --server-login-background: none; position: fixed; inset: 0; z-index: 10; display: none; place-items: center; padding: 24px; background: radial-gradient(circle at 30% 15%, rgba(var(--accent-rgb),.24), transparent 34%), rgba(7,8,7,.84); overflow: hidden; } .auth::before, .auth::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .auth::before { background-image: var(--server-login-background); background-position: center; background-repeat: no-repeat; background-size: cover; opacity: 0; } .auth.has-server-background::before { opacity: 1; } .auth.has-server-background::after { background: radial-gradient(circle at 30% 15%, rgba(var(--accent-rgb),.20), transparent 38%), linear-gradient(180deg, rgba(5,7,7,.58), rgba(5,7,7,.78)); } body.locked .auth { display: grid; } .auth-card { position: relative; z-index: 1; width: min(380px, 100%); display: grid; gap: 14px; padding: 24px; border: 1px solid var(--line-hot); background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 20%), #171914; box-shadow: 0 24px 80px rgba(0,0,0,.55), inset 3px 0 0 rgba(var(--accent-rgb),.55); } .login-background-preview { min-height: 150px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background-color: #0e100d; background-position: center; background-repeat: no-repeat; background-size: cover; color: var(--muted); } .login-background-preview.has-image span { padding: 7px 10px; border-radius: 999px; background: rgba(5,7,7,.72); color: var(--ink); backdrop-filter: blur(6px); } .auth-mark { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 12px; background: var(--accent); color: #17120a; font-size: 22px; font-weight: 900; background-position: center; background-repeat: no-repeat; background-size: cover; } .auth-mark.has-logo { color: transparent; background-color: transparent; } .auth-card label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; } .auth-card input { width: 100%; border: 1px solid var(--line); background: #0e100d; color: var(--ink); padding: 11px 10px; outline: 0; } select { font: inherit; border: 1px solid var(--line-hot); background: #0e100d; color: var(--ink); padding: 7px 8px; } .auth-card textarea, .settings-section textarea { width: 100%; border: 1px solid var(--line); background: #0e100d; color: var(--ink); padding: 9px 10px; outline: 0; resize: vertical; min-height: 78px; font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .license-auth-panel { display: grid; gap: 9px; padding: 12px; border: 1px solid rgba(var(--accent-rgb),.45); background: linear-gradient(135deg, rgba(var(--accent-rgb),.11), rgba(14,16,13,.92)); box-shadow: inset 3px 0 0 rgba(var(--accent-rgb),.65); } .license-auth-panel[hidden] { display: none; } .license-auth-panel h2 { margin: 0; color: var(--accent); font-size: 15px; } .license-auth-panel p, .license-auth-panel small { margin: 0; color: var(--muted); } .license-auth-panel code, .license-status-card code { color: var(--accent-lighter); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; } .license-auth-panel button { min-height: 34px; border: 1px solid var(--line-hot); background: linear-gradient(180deg, var(--accent-light), var(--accent)); color: #17120a; font-weight: 900; cursor: pointer; } .auth-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .auth-actions button { border: 1px solid var(--line); background: linear-gradient(180deg, #272a21, #1b1d17); color: var(--ink); cursor: pointer; } .auth-actions button:first-child { border: 0; background: linear-gradient(180deg, var(--accent-light), var(--accent)); color: #17120a; font-weight: 800; } .guest-login-button { width: 100%; min-height: 38px; border: 1px solid rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .09); color: var(--accent-lighter); font-weight: 800; cursor: pointer; } .guest-login-button:hover { background: rgba(var(--accent-rgb), .16); } .auth-error { min-height: 18px; color: var(--danger); font-size: 12px; } .sidebar, .members { background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 14%), var(--side); border-right: 1px solid var(--line); min-height: 0; } .sidebar header { height: 64px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); box-shadow: inset 0 -2px 0 rgba(var(--accent-rgb),.08); } .server-logo-button { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 1px solid rgba(var(--accent-rgb),.28); border-radius: 14px !important; background: linear-gradient(135deg, rgba(var(--accent-rgb),.2), rgba(255,255,255,.035)), #151710; background-size: cover; background-position: center; color: var(--accent-lighter); font-weight: 900; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 0 12px rgba(var(--accent-rgb),.08); } .server-logo-button.has-logo span { display: none; } .server-logo-button:disabled { cursor: default; opacity: .92; } .server-logo-button:not(:disabled):hover { border-color: rgba(var(--accent-rgb),.82); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.28), 0 0 18px rgba(var(--accent-rgb),.16); } h1, h2, h3, p { margin: 0; } h1 { font-size: 17px; text-transform: uppercase; } .sidebar header p, .chat-head p, .profile span { color: var(--muted); font-size: 12px; } #addChannel { width: 30px; height: 30px; margin-left: auto; border: 1px solid var(--line); background: linear-gradient(180deg, #2b2e25, #1c1f19); color: var(--ink); cursor: pointer; } .paypal-donate-button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; margin-left: 6px; border-radius: 999px; border: 1px solid rgba(241, 168, 50, .55); background: rgba(241, 168, 50, .14); color: #ffd889; font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; cursor: pointer; } .paypal-donate-button:hover { background: rgba(241, 168, 50, .26); } nav { padding: 12px 8px; display: grid; gap: 3px; max-height: calc(100vh - 286px); overflow-y: auto; } .channel-search { display: grid; gap: 7px; position: relative; min-width: min(360px, 34vw); max-width: 520px; pointer-events: auto; } .channel-search input { width: 100%; min-height: 34px; border: 1px solid rgba(var(--accent-rgb),.22); background: rgba(9,11,8,.72); color: var(--ink); padding: 8px 10px; outline: 0; } .channel-search input:focus { border-color: rgba(var(--accent-rgb),.58); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.16); } .channel-search-results { display: grid; gap: 5px; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 120; max-height: min(420px, calc(100vh - 150px)); overflow-y: auto; padding: 3px; border: 1px solid rgba(var(--accent-rgb),.16); background: rgba(13,15,11,.96); box-shadow: 0 18px 42px rgba(0,0,0,.55); pointer-events: auto; } .channel-search-results[hidden] { display: none; } .channel-search-result { display: grid; gap: 4px; width: 100%; min-height: 46px; border: 1px solid rgba(255,255,255,.05); background: rgba(255,255,255,.025); color: var(--ink); padding: 7px 8px; text-align: left; cursor: pointer; border-radius: 10px; pointer-events: auto; transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease; } .channel-search-result:hover, .channel-search-result:focus-visible { border-color: rgba(var(--accent-rgb),.55); background: rgba(var(--accent-rgb),.13); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.14), 0 10px 24px rgba(0,0,0,.32); outline: 0; transform: translateY(-1px); } .channel-search-result span { display: grid; gap: 1px; } .channel-search-result small, .channel-search-result em, .channel-search-empty { color: var(--muted); font-size: 12px; } .channel-search-result em { font-style: normal; overflow-wrap: anywhere; } .channel-search-empty { margin: 0; padding: 8px; } .channel-menu { position: fixed; z-index: 1000; width: 210px; padding: 6px; border: 1px solid var(--line-hot); background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 24%), #151711; box-shadow: 0 18px 42px rgba(0,0,0,.5), inset 3px 0 0 rgba(var(--accent-rgb),.42); } .channel-menu[hidden], .channel-menu button[hidden] { display: none !important; } .channel-menu button { width: 100%; min-height: 30px; border: 0; background: transparent; color: var(--ink); opacity: 1; text-align: left; padding: 6px 8px; cursor: pointer; } .channel-menu button:hover { background: linear-gradient(90deg, rgba(var(--accent-rgb),.16), transparent); color: #fff4d4; } .status-quick-menu button[data-presence].active { background: linear-gradient(90deg, rgba(var(--accent-rgb),.22), transparent); color: #fff4d4; } .user-context-menu { width: 250px; padding: 8px; border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,.045), transparent 26%), #101811; box-shadow: 0 20px 46px rgba(0,0,0,.56), inset 0 0 0 1px rgba(var(--accent-rgb), .08); } .user-context-head { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 8px 9px; } .user-context-head .member-avatar { width: 34px; height: 34px; border-radius: 10px; } .user-context-head b, .user-context-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-context-head b { font-size: 15px; color: var(--ink); } .user-context-head small { margin-top: 2px; color: var(--muted); font-size: 11px; } .user-context-menu hr { height: 1px; border: 0; margin: 7px 4px; background: rgba(255,255,255,.10); } .user-context-menu button { border-radius: 8px; } .user-context-menu button:disabled { opacity: .38; cursor: default; } .user-context-menu button:disabled:hover { background: transparent; color: var(--ink); } .user-context-select { display: block; padding: 7px 8px; color: var(--muted); font-size: 12px; } .user-context-select select { width: 100%; margin-top: 5px; min-height: 32px; border-radius: 8px; background: #0b0f0b; color: var(--ink); border: 1px solid rgba(var(--accent-rgb), .28); } .user-context-timeout input { width: 100%; margin-top: 5px; min-height: 32px; border-radius: 8px; background: #0b0f0b; color: var(--ink); border: 1px solid rgba(var(--accent-rgb), .28); padding: 0 10px; } .user-context-volume { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .user-context-volume #userContextVolumeValue { margin-left: auto; color: var(--ink); font-weight: 700; } .user-context-volume input[type="range"] { width: 100%; accent-color: var(--accent, #f1a832); } .status-quick-menu:not(.self-context) .user-context-status, .status-quick-menu:not(.self-context) .status-quick-menu-text, .status-quick-menu:not(.self-context) #statusQuickMenuSave { display: none; } .status-quick-menu.self-context .user-context-actions button[data-user-menu-action="call"], .status-quick-menu.self-context .user-context-actions button[data-user-menu-action="nudge"], .status-quick-menu.self-context .user-context-actions button[data-user-menu-action="local-mute"], .status-quick-menu.self-context .user-context-actions #userContextMoveWrap, .status-quick-menu.self-context .user-context-actions button[data-user-menu-action="timeout"], .status-quick-menu.self-context .user-context-actions button[data-user-menu-action="kick"], .status-quick-menu.self-context .user-context-actions button[data-user-menu-action="clear-moderation"] { display: none; } .presence-menu-dot { width: 10px; height: 10px; display: inline-block; margin-right: 8px; border-radius: 50%; vertical-align: -1px; background: #6b6b62; box-shadow: 0 0 8px rgba(255,255,255,.12); } .presence-menu-dot.online { background: var(--green); } .presence-menu-dot.away { background: var(--accent); } .presence-menu-dot.dnd { background: var(--danger); } .presence-menu-dot.invisible { background: #c8b7df; } .status-quick-menu-text { display: block; padding: 6px 8px 2px; font-size: 12px; color: var(--muted, #9a9a90); } .status-quick-menu-text input { display: block; width: 100%; margin-top: 4px; } #statusQuickMenuSave { font-weight: 600; } #statusQuickMenuMessage { margin: 4px 8px 0; font-size: 12px; } .text-channel-row.dragging { opacity: .55; } .text-channel-row.drag-over, .voice-channel-row.drag-over { outline: 1px dashed rgba(var(--accent-rgb), .72); outline-offset: -2px; background: rgba(var(--accent-rgb), .08); } .member-button.dragging { opacity: .55; } .member-button[draggable="true"], .voice-member[draggable="true"] { cursor: grab; /* Without this, starting the drag gesture on top of the member's name text makes the browser begin a text selection instead of an element drag (they're competing gestures, and selectable text wins) -- so dragstart never fired at all when grabbing anywhere over the name. */ user-select: none; -webkit-user-drag: element; } .voice-member.dragging { opacity: .55; } .draggable-channel { cursor: grab; } .draggable-channel:active { cursor: grabbing; } .channel { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 6px 10px; border: 0; border-radius: 0; background: transparent; color: var(--muted); cursor: pointer; text-align: left; } .channel-row { display: grid; grid-template-columns: minmax(0, 1fr) 22px 28px; align-items: center; margin: 0 6px; border-radius: 10px !important; border-left: 2px solid transparent; transition: background .14s ease, border-color .14s ease, transform .14s ease; } .channel-row.active, .channel-row:hover { background: linear-gradient(90deg, rgba(var(--accent-rgb),.13), rgba(255,255,255,.025)); border-left-color: var(--accent); } .channel-row.active { box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.14), 0 4px 14px rgba(0,0,0,.22); } .channel-row:hover { transform: translateX(1px); } .channel-row.unread { border-left-color: rgba(var(--accent-rgb), .72); } .channel-row.unread .channel-name { color: var(--ink); font-weight: 800; } .channel-row .channel:hover, .channel-row .channel.active { background: transparent; } .delete-channel { width: 24px; height: 24px; border: 0; background: transparent; color: var(--muted); cursor: pointer; } .delete-channel:hover { color: var(--danger); } .channel:hover, .channel.active { background: transparent; color: var(--ink); } .channel-icon { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(131, 101, 42, .42); border-radius: 8px; background: #11130f; color: var(--soft); font-size: 16px; font-weight: 800; overflow: hidden; background-size: cover; background-position: center; } .channel-icon.has-image { color: transparent; } .channel-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .channel-lock { margin-left: auto; color: var(--soft); font-size: 10px; text-transform: uppercase; } .unread-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border: 1px solid rgba(var(--accent-rgb), .65); background: linear-gradient(180deg, rgba(var(--accent-rgb), .95), rgba(128, 79, 22, .95)); color: #120d07; font-size: 11px; font-weight: 900; line-height: 1; box-shadow: 0 0 16px rgba(var(--accent-rgb), .18); } .channel-row.locked .channel-icon { border-color: rgba(224, 79, 63, .55); color: var(--danger); } .channel-row.unlocked.protected .channel-icon { border-color: rgba(98, 208, 120, .5); } .dm-avatar { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; background: var(--panel-2); color: var(--accent); font-size: 11px; font-weight: 800; overflow: hidden; background-size: cover; background-position: center; } .channel-mute-toggle { margin-left: 4px; width: 20px; height: 20px; display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(131, 101, 42, .35); color: var(--muted); opacity: 0; cursor: pointer; } .channel-mute-toggle .icon { width: 12px; height: 12px; } .channel-row:hover .channel-mute-toggle, .channel.dm:hover .channel-mute-toggle, .channel-mute-toggle.muted { opacity: .7; } .channel-mute-toggle:hover { opacity: 1; color: var(--accent); border-color: rgba(var(--accent-rgb), .55); } .channel-mute-toggle.muted { color: var(--danger); border-color: rgba(224, 79, 63, .45); } .delete-dm-chat { margin-left: 4px; width: 20px; height: 20px; display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(224, 79, 63, .28); color: var(--muted); font-size: 12px; opacity: .55; } .channel.dm:hover .delete-dm-chat { opacity: 1; } .delete-dm-chat:hover { border-color: rgba(224, 79, 63, .72); color: var(--danger); } .channel-group { margin: 14px 10px 6px; color: #c0a96e; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: color .14s ease; } .channel-group:hover { color: #ffe0a0; } .channel-group.with-action { display: flex; justify-content: space-between; align-items: center; } .add-voice-channel, .add-text-channel { width: 24px; height: 22px; border: 1px solid var(--line); background: #1c1f19; color: var(--ink); cursor: pointer; } .voice-panel { margin: 8px; padding: 8px 0 0; display: grid; gap: 3px; border-top: 1px solid var(--line-hot); } .voice-panel span, .voice-panel p { color: var(--muted); font-size: 11px; } .voice-panel b { display: block; margin-top: 2px; } .voice-head { display: flex; justify-content: space-between; gap: 8px; align-items: start; padding: 0 10px 6px; } .voice-panel button { min-height: 30px; border: 1px solid var(--line); background: linear-gradient(180deg, #282b22, #191b16); color: var(--ink); cursor: pointer; } .voice-panel button:disabled { opacity: .45; cursor: default; } .voice-control-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .profile-voice-controls { margin-top: 4px; } .profile-voice-controls button:disabled { opacity: .45; cursor: default; } .voice-toggle.active { border-color: rgba(242, 169, 59, .8); color: #17120a; background: linear-gradient(180deg, var(--accent-light), var(--accent)); } #leaveVoiceButton { border-color: rgba(226, 89, 79, .58); } #leaveVoiceButton.connected { border-color: rgba(226, 89, 79, .72); color: #ffb0a9; } #mobileLeaveVoiceButton { border-color: rgba(226, 89, 79, .58); } #mobileLeaveVoiceButton.connected { border-color: rgba(226, 89, 79, .72); color: #ffb0a9; } #mobileLeaveVoiceButton.connected:hover { background: rgba(226, 89, 79, .82); color: #fff; } #leaveVoiceButton.connected:hover { background: rgba(226, 89, 79, .82); color: #fff; } .quality-select { display: grid; gap: 4px; color: var(--muted); font-size: 11px; } .quality-select select { width: 100%; min-height: 30px; } .voice-channel-row { margin: 0 8px; } .voice-channel-row.joined .voice-channel-button { color: var(--ink); } .delete-voice-channel { color: var(--muted); } .delete-voice-channel:hover { color: var(--danger); } .voice-members, .voice-channels { display: grid; gap: 4px; min-width: 0; overflow: visible; } .voice-member { position: relative; display: flex; align-items: center; gap: 5px; min-width: 0; margin-left: 26px; padding: 2px 6px; color: var(--ink); font-size: 12px; } .voice-presence { width: 22px; height: 22px; position: relative; flex: 0 0 auto; } .voice-avatar { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--panel-2); color: var(--accent); font-size: 10px; font-weight: 900; overflow: hidden; background-size: cover; background-position: center; } .voice-member.locally-muted { opacity: .72; } .voice-member.locally-muted .voice-avatar { filter: grayscale(.45); } .voice-member-name { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .voice-stream-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 999px; background: var(--danger); box-shadow: 0 0 0 1px rgba(18, 12, 8, .9), 0 0 6px rgba(224, 79, 63, .5); } .voice-stream-viewers { min-width: 14px; height: 14px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 999px; border: 1px solid var(--line); background: #1b1d17; color: var(--muted); font-size: 10px; font-weight: 800; line-height: 1; } .local-mute-badge { min-width: 0; max-width: 94px; height: 17px; padding: 0 6px; display: inline-flex; align-items: center; gap: 3px; flex: 0 1 auto; border-radius: 999px; border: 1px solid rgba(226, 89, 79, .48); background: rgba(226, 89, 79, .13); color: #ffb0a9; font-size: 9px; font-weight: 900; line-height: 1; white-space: nowrap; } .local-mute-badge .icon { width: 11px; height: 11px; flex: 0 0 auto; opacity: .95; } .local-mute-badge.compact { width: 17px; min-width: 17px; max-width: 17px; height: 17px; padding: 0; justify-content: center; } .local-mute-badge.compact .icon { width: 12px; height: 12px; } .voice-screen-watch { display: inline-flex; align-items: center; flex: 0 0 auto; margin-left: 4px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); background: linear-gradient(180deg, #272a21, #1b1d17); color: var(--ink); font-size: 10.5px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; } .voice-screen-watch:hover, .voice-screen-watch.watching { border-color: rgba(var(--accent-rgb), .65); background: rgba(var(--accent-rgb), .16); color: var(--accent-lighter); } .composer.readonly-channel { opacity: .72; } .composer.readonly-channel textarea, .composer.readonly-channel input { cursor: not-allowed; } .voice-state-icons { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; opacity: .92; flex: 0 0 auto; } .voice-state-icon { width: 12px; height: 12px; position: relative; color: var(--green); } .voice-state-icon .icon { width: 12px; height: 12px; } .voice-state-icon.off { color: #d85a4f; } .voice-state-icon.off::after { content: ""; position: absolute; left: 1px; right: 1px; top: 5px; height: 2px; background: #ffd9c4; transform: rotate(-38deg); box-shadow: 0 0 0 1px rgba(20, 15, 8, .55); } .voice-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--green); position: absolute; right: -1px; bottom: -1px; border: 1px solid var(--panel); } .voice-member.speaking .voice-dot { box-shadow: 0 0 0 4px rgba(84, 199, 121, .28), 0 0 10px rgba(84, 199, 121, .75); } .peer-audio-controls { display: none; grid-template-columns: 18px minmax(74px, 1fr) 34px; align-items: center; gap: 6px; width: calc(100% - 34px); margin: 3px 0 2px 34px; padding: 3px 5px; border: 1px solid rgba(var(--accent-rgb),.2); background: rgba(0,0,0,.14); flex: 1 1 100%; } .voice-member.audio-open { flex-wrap: wrap; background: linear-gradient(90deg, rgba(var(--accent-rgb),.08), transparent); } .voice-member.audio-open .peer-audio-controls { display: grid; } .peer-audio-mute { position: relative; width: 16px; height: 16px; display: inline-grid; place-items: center; border: 1px solid rgba(98, 208, 120, .32); background: rgba(98, 208, 120, .08); color: var(--green); padding: 0; cursor: pointer; } .peer-audio-mute .icon { width: 11px; height: 11px; } .peer-audio-mute.muted { border-color: rgba(216, 90, 79, .48); background: rgba(216, 90, 79, .12); color: #d85a4f; } .peer-audio-mute.muted::after { content: ""; position: absolute; left: 2px; right: 2px; top: 7px; height: 2px; background: #ffd9c4; transform: rotate(-38deg); box-shadow: 0 0 0 1px rgba(20, 15, 8, .55); } .peer-volume { width: 100%; min-width: 0; height: 18px; accent-color: var(--accent); cursor: pointer; } .peer-volume-value { color: var(--accent-lighter); font-size: 10px; font-weight: 900; text-align: right; } .voice-member-name { cursor: pointer; } .voice-member-name:hover { color: var(--accent-lightest); } .screen-stage { display: none; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; padding: 12px 18px 0; border-bottom: 1px solid var(--line); } .screen-stage.active { display: grid; } .screen-card { position: relative; min-width: 0; border: 1px solid var(--line); background: #131511; box-shadow: inset 3px 0 0 rgba(var(--accent-rgb),.35); overflow: hidden; } .screen-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line); transition: opacity .16s ease, transform .16s ease; } .screen-actions { display: flex; gap: 6px; align-items: center; } .screen-controls-toggle, .screen-controls-restore { min-height: 26px; border: 1px solid rgba(var(--accent-rgb), .45); background: rgba(17, 19, 15, .92); color: var(--accent-lighter); cursor: pointer; padding: 3px 8px; font-weight: 800; } .screen-controls-restore { position: absolute; top: 7px; right: 7px; z-index: 6; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .16s ease, transform .16s ease; } .screen-card.controls-hidden header { position: absolute; top: 0; left: 0; right: 0; z-index: 7; opacity: 0; pointer-events: none; transform: translateY(-100%); background: rgba(17, 19, 15, .94); backdrop-filter: blur(8px); } .screen-card.controls-hidden:hover header, .screen-card.controls-hidden:focus-within header { opacity: 1; pointer-events: auto; transform: translateY(0); } .screen-card.controls-hidden .screen-controls-restore { opacity: .82; pointer-events: auto; transform: translateY(0); } .screen-card.controls-hidden:hover .screen-controls-restore, .screen-card.controls-hidden:focus-within .screen-controls-restore { opacity: 0; pointer-events: none; } .screen-card:not(.controls-hidden) .screen-controls-restore { display: none; } .watch-party-card { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: min(500px, 48vh); overflow: hidden; } .watch-party-card .youtube-watch-player { min-height: 0; height: min(31vw, 34vh, 360px); max-height: calc(48vh - 92px); aspect-ratio: 16 / 9; justify-self: center; width: min(100%, calc((48vh - 92px) * 16 / 9)); background: #000; } .watch-party-card iframe { display: block; width: 100%; height: 100%; } .watch-party-card .watch-control-bar { position: sticky; bottom: 0; z-index: 3; justify-content: flex-end; flex-wrap: wrap; gap: 6px; padding: 7px 8px; border-top: 1px solid rgba(var(--accent-rgb), .22); background: linear-gradient(90deg, rgba(var(--accent-rgb), .16), rgba(13, 15, 11, .98)), #11130f; } .watch-volume-control { display: flex; align-items: center; gap: 7px; flex: 0 1 230px; min-height: 28px; padding: 3px 7px; border: 1px solid rgba(var(--accent-rgb), .28); background: rgba(0, 0, 0, .18); color: var(--muted); font-size: 12px; font-weight: 800; } .watch-volume-control input { flex: 1 1 72px; min-width: 70px; max-width: 130px; accent-color: var(--accent); } .watch-volume-value { min-width: 34px; color: var(--accent-lighter); text-align: right; } .watch-party-card .watch-control-bar button { flex: 0 0 auto; min-height: 28px; border: 1px solid rgba(var(--accent-rgb), .45); background: linear-gradient(180deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .05)); color: var(--ink); cursor: pointer; padding: 4px 9px; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035); } .watch-party-card .watch-control-bar button:hover { border-color: rgba(var(--accent-rgb), .92); background: linear-gradient(180deg, rgba(var(--accent-rgb), .32), rgba(var(--accent-rgb), .12)); color: #fff4d6; transform: translateY(-1px); } .watch-party-card .watch-control-bar button:active { transform: translateY(0); } .watch-party-card .watch-control-bar .watch-play, .watch-party-card .watch-control-bar .watch-sync { color: var(--accent-lighter); } .watch-party-card .watch-control-bar .watch-stop { border-color: rgba(196, 73, 69, .72); background: linear-gradient(180deg, rgba(196, 73, 69, .28), rgba(196, 73, 69, .1)); } .watch-party-card .watch-control-bar .watch-fullscreen, .watch-party-card .watch-control-bar .watch-hide { color: var(--muted); } .watch-party-card:fullscreen { width: 100vw; height: 100vh; max-height: none; background: #050604; grid-template-rows: 30px minmax(0, 1fr) auto; } .watch-party-card:fullscreen .youtube-watch-player { width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; background: #000; } .watch-party-card:fullscreen .youtube-watch-player iframe { width: min(100vw, calc((100vh - 92px) * 16 / 9)); height: min(calc(100vh - 92px), calc(100vw * 9 / 16)); max-width: 100vw; max-height: calc(100vh - 92px); } .watch-party-card:fullscreen .watch-control-bar { position: relative; bottom: auto; z-index: 10; min-height: 58px; padding: 12px 16px; background: linear-gradient(90deg, rgba(var(--accent-rgb), .2), rgba(5, 6, 4, .98)), #050604; } @media (max-width: 1180px) { .watch-party-card { max-height: min(430px, 46vh); } .watch-party-card .youtube-watch-player { height: min(40vw, 30vh, 300px); max-height: calc(46vh - 104px); width: min(100%, calc((46vh - 104px) * 16 / 9)); } .watch-volume-control { order: 10; flex: 1 1 100%; justify-content: flex-end; } } .watch-party-invite-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 12px; color: var(--muted); background: linear-gradient(90deg, rgba(var(--accent-rgb), .13), rgba(13, 15, 11, .96)), #11130f; } .watch-party-invite-card div { display: grid; gap: 3px; } .watch-party-invite-card b { color: #fff4d6; } .watch-party-invite-card button { min-height: 32px; border: 1px solid rgba(var(--accent-rgb), .64); background: linear-gradient(180deg, rgba(var(--accent-rgb), .28), rgba(var(--accent-rgb), .09)); color: var(--accent-lighter); cursor: pointer; padding: 6px 13px; font-weight: 900; } .watch-party-invite-card button:hover { border-color: rgba(var(--accent-rgb), .96); background: linear-gradient(180deg, rgba(var(--accent-rgb), .4), rgba(var(--accent-rgb), .16)); color: #fff4d6; transform: translateY(-1px); } .watch-party-hidden-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 10px 12px; color: var(--muted); background: linear-gradient(90deg, rgba(var(--accent-rgb), .11), rgba(13, 15, 11, .96)), #11130f; } .watch-party-hidden-card button { min-height: 30px; border: 1px solid rgba(var(--accent-rgb), .56); background: linear-gradient(180deg, rgba(var(--accent-rgb), .24), rgba(var(--accent-rgb), .08)); color: var(--accent-lighter); cursor: pointer; padding: 5px 11px; font-weight: 900; } .watch-party-hidden-card button:hover { border-color: rgba(var(--accent-rgb), .95); background: linear-gradient(180deg, rgba(var(--accent-rgb), .36), rgba(var(--accent-rgb), .14)); color: #fff4d6; transform: translateY(-1px); } .screen-controls-toggle, .screen-controls-restore, .screen-fullscreen, .screen-pip, .screen-stop, .camera-stop, .remote-pair-control, .remote-request-control, .remote-stop-control, .screen-close, .screen-mute { width: 30px; height: 30px; min-height: 0; min-width: 0; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); background: linear-gradient(180deg, #272a21, #1b1d17); color: var(--ink); cursor: pointer; font-size: 0; line-height: 0; } .remote-pair-control, .remote-request-control { border-color: rgba(var(--accent-rgb), .65); color: var(--accent-lighter); } .remote-pair-control:hover, .remote-request-control:hover { background: rgba(var(--accent-rgb), .16); box-shadow: 0 0 14px rgba(var(--accent-rgb), .12); } .remote-stop-control { border-color: rgba(226, 89, 79, .65); color: #ff8f85; } .request-control-icon { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; transform: rotate(-42deg); } .hide-controls-icon, .restore-controls-icon { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; } .hide-controls-icon { transform: rotate(-135deg) translate(-1px, -1px); } .restore-controls-icon { transform: rotate(45deg) translate(-1px, -1px); } .stop-icon { width: 12px; height: 12px; background: currentColor; } .screen-card.remote-controlling { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent), 0 0 18px rgba(var(--accent-rgb), .16); } .screen-card.remote-controlling video { cursor: crosshair; outline: 0; } .screen-mute { position: relative; } /* Was the same box-shadow/border CSS-hack style as the old .trash-icon -- found in the same sweep. Reuses the .speaker-small-icon SVG (same shape, proven at a smaller size already) instead of drawing a new one, since both represent the same speaker glyph just at different sizes. */ .speaker-icon { width: 18px; height: 18px; display: block; background: currentColor; mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h3.6l5.4 4V5l-5.4 4H4Z'/%3E%3Cpath d='M15.8 9.4a3.6 3.6 0 0 1 0 5.2'/%3E%3Cpath d='M18.6 7a7.4 7.4 0 0 1 0 10'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h3.6l5.4 4V5l-5.4 4H4Z'/%3E%3Cpath d='M15.8 9.4a3.6 3.6 0 0 1 0 5.2'/%3E%3Cpath d='M18.6 7a7.4 7.4 0 0 1 0 10'/%3E%3C/svg%3E"); } .screen-mute.muted::after { content: ""; position: absolute; width: 22px; height: 2px; background: var(--danger); transform: rotate(-38deg); box-shadow: 0 0 6px rgba(224, 79, 63, .55); } .screen-stop { border-color: rgba(226, 89, 79, .65); color: #fff; background: rgba(226, 89, 79, .82); } .screen-card video { display: block; width: 100%; max-height: 360px; background: #000; } .screen-diagnostics { position: absolute; left: 10px; bottom: 9px; z-index: 5; max-width: calc(100% - 20px); display: flex; align-items: center; flex-wrap: wrap; gap: 5px; padding: 5px 7px; border-radius: 8px; border: 1px solid rgba(var(--accent-rgb), .28); background: rgba(9, 10, 8, .78); font-size: 11px; font-weight: 700; line-height: 1.3; pointer-events: none; backdrop-filter: blur(6px); } .screen-diagnostics .diag-label { padding: 2px 8px; border-radius: 999px; background: rgba(var(--accent-rgb), .3); color: var(--accent-lighter); font-weight: 800; letter-spacing: .01em; } .screen-diagnostics .diag-chip { padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(245, 240, 223, .16); background: rgba(245, 240, 223, .08); color: rgba(245, 240, 223, .82); white-space: nowrap; } .screen-diagnostics .diag-chip.diag-good { border-color: rgba(120, 200, 120, .4); background: rgba(120, 200, 120, .16); color: #b8f0b8; } .screen-diagnostics .diag-chip.diag-bad { border-color: rgba(224, 79, 63, .5); background: rgba(224, 79, 63, .18); color: #ffb0a8; } .screen-diagnostics.warning { border-color: rgba(224, 79, 63, .55); } .screen-card video:fullscreen { width: 100vw; height: 100vh; max-height: none; object-fit: contain; } /* requestFullscreen() is called on the .screen-card wrapper (not the video directly) so the header controls stay reachable while fullscreen -- the video itself is therefore never the :fullscreen element, only its ancestor is, so it needs its own sizing rule here too. */ .screen-card:fullscreen { width: 100vw; height: 100vh; display: flex; flex-direction: column; background: #000; } .screen-card:fullscreen video { width: 100%; height: 100%; max-height: none; flex: 1; object-fit: contain; } .screen-wait { min-height: 160px; display: grid; place-items: center; color: var(--muted); background: #090a0d; } .profile { position: absolute; left: 0; bottom: 0; width: 100%; padding: 10px; background: linear-gradient(90deg, rgba(var(--accent-rgb),.08), transparent 48%), #12140f; border-top: 1px solid var(--line); display: grid; gap: 6px; } .profile b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-actions { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 4px; } .profile-icon-button { position: relative; min-width: 0; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); background: linear-gradient(180deg, #272a21, #1b1d17); color: var(--ink); cursor: pointer; } .profile-icon-button:hover { border-color: rgba(var(--accent-rgb), .65); color: var(--accent-lighter); } .profile-icon-button:disabled { opacity: .42; cursor: default; } .profile-icon-button.connected { border-color: rgba(98, 208, 120, .58); } .profile-icon-button.connected::after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(98, 208, 120, .65); } .profile-icon-button.mic-unavailable { border-color: rgba(224, 79, 63, .65); border-style: dashed; cursor: pointer; opacity: 1; animation: mic-unavailable-pulse 1.6s ease-in-out infinite; } @keyframes mic-unavailable-pulse { 0%, 100% { box-shadow: 0 0 0 rgba(224, 79, 63, 0); } 50% { box-shadow: 0 0 10px rgba(224, 79, 63, .45); } } .profile-icon-button.muted::before { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; background: #ff8f85; transform: rotate(-38deg); box-shadow: 0 0 5px rgba(226, 89, 79, .45); pointer-events: none; } .profile-icon-button.forced-muted::before { background: #ffd26c; box-shadow: 0 0 5px rgba(var(--accent-rgb), .35); } .profile-icon-button.manual-muted::before { background: #ff8f85; box-shadow: 0 0 5px rgba(226, 89, 79, .45); } .profile-icon-button.danger:hover { border-color: rgba(226, 89, 79, .72); color: #ff8f85; } .icon { width: 18px; height: 18px; display: block; background: currentColor; mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; } .mic-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M19 11a7 7 0 0 1-14 0'/%3E%3Cline x1='12' y1='18' x2='12' y2='22'/%3E%3Cline x1='8' y1='22' x2='16' y2='22'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M19 11a7 7 0 0 1-14 0'/%3E%3Cline x1='12' y1='18' x2='12' y2='22'/%3E%3Cline x1='8' y1='22' x2='16' y2='22'/%3E%3C/svg%3E"); } .device-desktop-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='13' rx='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='13' rx='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E"); } .device-mobile-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2'/%3E%3Cline x1='11' y1='18' x2='13' y2='18'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2'/%3E%3Cline x1='11' y1='18' x2='13' y2='18'/%3E%3C/svg%3E"); } .close-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E"); } .fullscreen-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M16 3h3a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M8 21H5a2 2 0 0 1-2-2v-3'/%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M16 3h3a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M8 21H5a2 2 0 0 1-2-2v-3'/%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E"); } .pip-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='14' rx='2'/%3E%3Crect x='12' y='11.5' width='9' height='6.5' rx='1' fill='black'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='14' rx='2'/%3E%3Crect x='12' y='11.5' width='9' height='6.5' rx='1' fill='black'/%3E%3C/svg%3E"); } .speaker-small-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h3.6l5.4 4V5l-5.4 4H4Z'/%3E%3Cpath d='M15.8 9.4a3.6 3.6 0 0 1 0 5.2'/%3E%3Cpath d='M18.6 7a7.4 7.4 0 0 1 0 10'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h3.6l5.4 4V5l-5.4 4H4Z'/%3E%3Cpath d='M15.8 9.4a3.6 3.6 0 0 1 0 5.2'/%3E%3Cpath d='M18.6 7a7.4 7.4 0 0 1 0 10'/%3E%3C/svg%3E"); } .users-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); } .settings-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.32 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.32 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z'/%3E%3C/svg%3E"); } .dashboard-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='8' height='8' rx='1.6'/%3E%3Crect x='13' y='3' width='8' height='8' rx='1.6'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1.6'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1.6'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='8' height='8' rx='1.6'/%3E%3Crect x='13' y='3' width='8' height='8' rx='1.6'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1.6'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1.6'/%3E%3C/svg%3E"); } .calendar-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2.4'/%3E%3Cpath d='M8 2v4M16 2v4M3 9h18'/%3E%3Cpath d='M8 13h3M13 13h3M8 17h3'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2.4'/%3E%3Cpath d='M8 2v4M16 2v4M3 9h18'/%3E%3Cpath d='M8 13h3M13 13h3M8 17h3'/%3E%3C/svg%3E"); } .logout-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h9'/%3E%3Cline x1='9' y1='12' x2='21' y2='12'/%3E%3Cpath d='M17 8l4 4-4 4'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h9'/%3E%3Cline x1='9' y1='12' x2='21' y2='12'/%3E%3Cpath d='M17 8l4 4-4 4'/%3E%3C/svg%3E"); } .leave-voice-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.7 13.3a16 16 0 0 0 3.4 2.6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.7 2v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-3-.4'/%3E%3Cpath d='M10.7 13.3a16 16 0 0 1-3.4-2.6 16 16 0 0 1-1.6-2.1'/%3E%3Cpath d='M4.6 8.5A2 2 0 0 1 4 7V4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8'/%3E%3Cline x1='2' y1='2' x2='22' y2='22'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.7 13.3a16 16 0 0 0 3.4 2.6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.7 2v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-3-.4'/%3E%3Cpath d='M10.7 13.3a16 16 0 0 1-3.4-2.6 16 16 0 0 1-1.6-2.1'/%3E%3Cpath d='M4.6 8.5A2 2 0 0 1 4 7V4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8'/%3E%3Cline x1='2' y1='2' x2='22' y2='22'/%3E%3C/svg%3E"); } .menu-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='6' x2='20' y2='6'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cline x1='4' y1='18' x2='20' y2='18'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='6' x2='20' y2='6'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cline x1='4' y1='18' x2='20' y2='18'/%3E%3C/svg%3E"); } .edit-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3Cpath d='M15 5l4 4'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3Cpath d='M15 5l4 4'/%3E%3C/svg%3E"); } .pin-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); } .flag-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V3'/%3E%3Cpath d='M5 4h14l-3.5 5L19 14H5'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V3'/%3E%3Cpath d='M5 4h14l-3.5 5L19 14H5'/%3E%3C/svg%3E"); } .chat-bubble-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4Z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4Z'/%3E%3C/svg%3E"); } .ticket-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2a2 2 0 0 0 0 4v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 0 0-4Z'/%3E%3Cline x1='10' y1='7' x2='10' y2='17' stroke-dasharray='2.2 2.2'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2a2 2 0 0 0 0 4v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 0 0-4Z'/%3E%3Cline x1='10' y1='7' x2='10' y2='17' stroke-dasharray='2.2 2.2'/%3E%3C/svg%3E"); } .bell-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9Z'/%3E%3Cpath d='M10.5 21a1.5 1.5 0 0 0 3 0'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9Z'/%3E%3Cpath d='M10.5 21a1.5 1.5 0 0 0 3 0'/%3E%3C/svg%3E"); } .shield-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6Z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6Z'/%3E%3C/svg%3E"); } .log-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cline x1='8' y1='7' x2='16' y2='7'/%3E%3Cline x1='8' y1='11' x2='16' y2='11'/%3E%3Cline x1='8' y1='15' x2='13' y2='15'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cline x1='8' y1='7' x2='16' y2='7'/%3E%3Cline x1='8' y1='11' x2='16' y2='11'/%3E%3Cline x1='8' y1='15' x2='13' y2='15'/%3E%3C/svg%3E"); } .play-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4l13 8-13 8Z' fill='black'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4l13 8-13 8Z' fill='black'/%3E%3C/svg%3E"); } .presence-online-icon, .presence-away-icon, .presence-dnd-icon, .presence-invisible-icon { display: inline-block; width: 11px; height: 11px; vertical-align: -1px; margin-right: 7px; background: currentColor; mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; } .presence-online-icon { color: var(--green); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8' fill='black'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8' fill='black'/%3E%3C/svg%3E"); } .presence-away-icon { color: var(--muted); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M20.5 13.5A8.5 8.5 0 1 1 10.5 3.5 7 7 0 0 0 20.5 13.5Z' fill='black'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M20.5 13.5A8.5 8.5 0 1 1 10.5 3.5 7 7 0 0 0 20.5 13.5Z' fill='black'/%3E%3C/svg%3E"); } .presence-dnd-icon { color: var(--danger); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cline x1='6.3' y1='17.7' x2='17.7' y2='6.3'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cline x1='6.3' y1='17.7' x2='17.7' y2='6.3'/%3E%3C/svg%3E"); } .presence-invisible-icon { color: var(--soft); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E"); } .push-to-talk-settings { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; } #pushToTalkKeyButton { min-height: 32px; padding: 0 12px; border: 1px solid rgba(var(--accent-rgb), .42); background: rgba(var(--accent-rgb), .08); color: var(--ink); font-weight: 900; cursor: pointer; } #pushToTalkKeyButton:hover, #pushToTalkKeyButton.learning { border-color: rgba(var(--accent-rgb), .86); background: rgba(var(--accent-rgb), .18); box-shadow: 0 0 14px rgba(var(--accent-rgb), .14); } #micMuteButton.ptt-hold { border-color: rgba(98, 208, 120, .95); background: rgba(98, 208, 120, .18); box-shadow: 0 0 15px rgba(98, 208, 120, .2); } .audio-device-select { display: grid; gap: 3px; color: var(--muted); font-size: 11px; } .audio-device-select select { width: 100%; min-height: 28px; border: 1px solid var(--line); background: #0e100d; color: var(--ink); padding: 5px 6px; } .stream-test-dialog { width: min(1120px, calc(100vw - 28px)); } .stream-test-card { width: 100%; max-width: 1120px; max-height: calc(100vh - 32px); } .stream-test-panel { gap: 14px; } .stream-test-preview { position: relative; overflow: hidden; min-height: 360px; border: 1px solid rgba(var(--accent-rgb), .22); border-radius: 18px; background: #030403; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); } .stream-test-preview video { width: 100%; height: min(56vh, 560px); min-height: 360px; display: block; object-fit: contain; background: #000; } .stream-test-overlay { position: absolute; left: 14px; bottom: 14px; padding: 8px 12px; border: 1px solid rgba(var(--accent-rgb), .45); border-radius: 999px; background: rgba(10, 8, 4, .82); color: var(--accent-lighter); font-size: 12px; font-weight: 900; backdrop-filter: blur(10px); } .stream-test-cards { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); } .stream-test-actions { display: flex; flex-wrap: wrap; gap: 10px; } .stream-test-actions button { min-height: 38px; } .stream-test-result { display: grid; gap: 5px; padding: 12px 14px; border: 1px solid rgba(var(--accent-rgb), .22); border-radius: 16px; background: rgba(255,255,255,.035); color: var(--muted); font-size: 13px; } .stream-test-result b { color: var(--ink); font-size: 15px; } .stream-test-result small { color: var(--accent-lighter); font-weight: 800; } @media (max-width: 760px) { .stream-test-dialog { width: calc(100vw - 12px); } .stream-test-preview, .stream-test-preview video { min-height: 240px; } } .mic-threshold-settings { display: grid; gap: 9px; padding: 12px; border: 1px solid rgba(var(--accent-rgb), .16); border-radius: var(--radius-md); background: rgba(255, 255, 255, .035); } .range-head, .range-labels, .mic-meter-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .range-head { color: var(--text); font-weight: 900; } .ui-accent-color-row { display: flex; align-items: center; gap: 10px; } .ui-accent-color-row input[type="color"] { width: 42px; height: 34px; padding: 2px; border: 1px solid var(--line-hot); border-radius: 3px; background: transparent; cursor: pointer; } .ui-accent-color-row button { width: auto; flex: 0 0 auto; } .range-head output, .mic-meter-row > span { min-width: 32px; color: var(--accent-lighter); font-size: 12px; font-weight: 900; text-align: right; } .range-labels { margin-top: -5px; color: var(--muted); font-size: 11px; font-weight: 800; } .mic-meter-scale { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: -4px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .mic-meter-scale span:nth-child(2) { text-align: center; } .mic-meter-scale span:nth-child(3) { text-align: right; } .mic-threshold-settings input[type="range"] { width: 100%; accent-color: var(--accent); } .mic-meter-track { position: relative; flex: 1; height: 12px; overflow: hidden; border-radius: 999px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } .mic-meter-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--accent-rgb), .9), rgba(255, 101, 101, .95)); transition: width .08s linear, background .15s ease; } .mic-meter-track span.over-threshold { background: linear-gradient(90deg, rgba(60, 220, 130, .95), rgba(160, 255, 190, .95)); } .mic-meter-track span.over-limit { background: linear-gradient(90deg, rgba(60, 220, 130, .95), rgba(255, 74, 74, .98)); } .mic-meter-track i, .mic-meter-track em { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 999px; pointer-events: none; } .mic-meter-track i { background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .65); } .mic-meter-track em { background: #ff6b6b; box-shadow: 0 0 8px rgba(255, 107, 107, .7); } .chat { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: 64px minmax(0, 1fr) auto; overflow: hidden; background: radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.12), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.018), transparent 30%), rgba(12,14,12,.88); } .chat::before, .chat::after { content: ""; position: absolute; inset: 64px 0 0; pointer-events: none; z-index: 0; } .chat::before { background: radial-gradient(circle at 20% 30%, rgba(var(--accent-rgb),.16), transparent 25%), radial-gradient(circle at 78% 66%, rgba(98,208,120,.075), transparent 30%), linear-gradient(115deg, transparent 0 38%, rgba(var(--accent-rgb),.06) 46%, transparent 56%), repeating-linear-gradient(90deg, rgba(var(--accent-rgb),.026) 0 1px, transparent 1px 56px); background-repeat: no-repeat, no-repeat, no-repeat, repeat; background-size: 140% 140%, 150% 150%, 240% 100%, 56px 56px; background-position: 0 10%, 100% 75%, -170% 0, 0 0; opacity: .70; mix-blend-mode: screen; transform: translate3d(-28px, 0, 0); will-change: transform, background-position, opacity; animation: chat-layer-drift 16s ease-in-out infinite, chat-energy-sweep 9s linear infinite; } .chat::after { inset: 64px -56px 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 8px), linear-gradient(180deg, transparent, rgba(0,0,0,.18)); opacity: .30; transform: translate3d(0, 0, 0); will-change: transform; animation: chat-scanline-slide 7s linear infinite; } .chat > * { position: relative; z-index: 1; } .chat-head { z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(var(--accent-rgb),.09), transparent 46%), rgba(15,17,15,.94); overflow: visible; } .chat-head > div:first-child { min-width: 160px; flex: 1 1 260px; } .chat-head .channel-search { z-index: 95; flex: 1 1 360px; } .chat-head h2 { font-size: 18px; } .server-welcome-panel { margin: 10px 14px 0; padding: 12px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(var(--accent-rgb),.2); border-radius: 18px; background: linear-gradient(135deg, rgba(var(--accent-rgb),.12), rgba(255,255,255,.028)); } .server-welcome-logo, .server-branding-preview > span { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border: 1px solid rgba(var(--accent-rgb),.35); border-radius: 16px; background: rgba(var(--accent-rgb),.1); background-size: cover; background-position: center; color: var(--accent-lighter); font-weight: 900; } .server-welcome-logo.has-logo, .server-branding-preview > span.has-logo { color: transparent; } .server-welcome-panel div:last-child, .server-branding-preview div { min-width: 0; display: grid; gap: 2px; } .server-welcome-panel b, .server-branding-preview b { color: #fff4d6; } .server-welcome-panel span, .server-branding-preview small { color: var(--muted); overflow-wrap: anywhere; } .status { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; flex: 0 0 auto; } .status span { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(98,208,120,.55); } .messages { overflow-y: auto; padding: 14px 18px 22px; } .film-search-panel { display: flex; flex-direction: column; gap: 10px; overflow: hidden; } .film-search-panel[hidden] { display: none; } .film-search-bar { display: flex; gap: 8px; flex: none; } .film-search-bar input { flex: 1; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line); background: #14150f; color: var(--ink); font-size: .95rem; } .film-search-bar button { flex: none; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--line); background: linear-gradient(180deg, #272a21, #1b1d17); color: var(--ink); cursor: pointer; white-space: nowrap; } #filmSearchStatus { flex: none; margin: 0; } .film-search-results { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; } .file-exchange-panel { display: flex; flex-direction: column; gap: 8px; margin: 8px 12px; padding: 10px; border: 1px solid rgba(var(--accent-rgb), .24); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(var(--accent-rgb), .07), rgba(255,255,255,.012)), rgba(8, 10, 8, .72); box-shadow: var(--shadow-card); } .file-exchange-panel[hidden] { display: none; } .file-exchange-header { display: flex; align-items: center; gap: 10px; } .file-exchange-header b { color: var(--accent-lightest); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; } .file-exchange-header .muted-note { margin: 0; flex: 1; } .file-exchange-header button { flex: none; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: linear-gradient(180deg, #272a21, #1b1d17); color: var(--ink); cursor: pointer; white-space: nowrap; } .file-exchange-upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .file-exchange-upload button { flex: none; padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .12); color: var(--accent-lighter); font-weight: 800; cursor: pointer; } .file-exchange-upload button:hover:not(:disabled) { background: rgba(var(--accent-rgb), .2); } .file-exchange-upload button:disabled { opacity: .5; cursor: not-allowed; } .file-exchange-progress { flex: 1 1 160px; min-width: 120px; height: 8px; border-radius: 999px; background: #1a1c17; border: 1px solid var(--line); overflow: hidden; } .file-exchange-progress-fill { height: 100%; width: 0%; background: var(--accent); transition: width .15s ease; } .file-exchange-status { margin: 0; } .file-exchange-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; } .file-exchange-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.06); border-radius: 8px; background: rgba(255,255,255,.02); } .file-exchange-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; } .file-exchange-size { flex: none; color: var(--muted); font-size: 12px; } .file-exchange-download { flex: none; padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(98, 208, 120, .45); background: rgba(98, 208, 120, .1); color: #d7ffdd; font-size: 12px; font-weight: 800; text-decoration: none; cursor: pointer; } .file-exchange-download:hover { background: rgba(98, 208, 120, .18); } .file-exchange-delete { flex: none; padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(226, 89, 79, .4); background: rgba(226, 89, 79, .1); color: #ffcfc9; font-size: 12px; font-weight: 800; cursor: pointer; } .file-exchange-delete:hover { background: rgba(226, 89, 79, .18); } .game-stats-list { display: flex; flex-direction: column; gap: 10px; } .game-stats-card { border: 1px solid rgba(var(--accent-rgb), .18); border-radius: var(--radius-md); background: rgba(255,255,255,.02); padding: 10px 12px; } .game-stats-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .game-stats-icon { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; flex: 0 0 auto; } .game-stats-card-header b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .game-stats-total { flex: none; color: var(--accent-lighter); font-size: 12px; font-weight: 800; } .game-stats-players { display: flex; flex-direction: column; gap: 4px; } .game-stats-player { display: flex; align-items: center; gap: 8px; padding: 3px 0; } .game-stats-avatar { width: 22px; height: 22px; border-radius: 999px; background-color: var(--line); background-size: cover; background-position: center; display: grid; place-items: center; font-size: 9px; font-weight: 800; flex: 0 0 auto; } .game-stats-player-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .game-stats-player-time { flex: none; color: var(--muted); font-size: 12px; font-weight: 700; } .file-exchange-share-badge { flex: none; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), .4); background: rgba(var(--accent-rgb), .1); color: var(--accent-lighter); font-size: 11px; font-weight: 800; white-space: nowrap; } .file-share-add-row { display: flex; gap: 8px; } .file-share-add-row select { flex: 1; min-height: 34px; border: 1px solid var(--line); background: #11130f; color: var(--ink); padding: 0 8px; } .file-share-add-row button { flex: none; } .file-share-rows { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; } .file-share-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.06); border-radius: 8px; background: rgba(255,255,255,.02); } .file-share-revoke { flex: none; padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(226, 89, 79, .4); background: rgba(226, 89, 79, .1); color: #ffcfc9; font-size: 12px; font-weight: 800; cursor: pointer; } .file-share-revoke:hover { background: rgba(226, 89, 79, .18); } .film-search-result { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .03); } .film-search-result .film-search-result-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .film-search-result .film-search-result-path { color: var(--muted); font-size: .78rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .film-search-result .film-search-result-size { flex: none; color: var(--muted); font-size: .85rem; } .film-search-play, .film-search-compatible, .film-search-download { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: linear-gradient(180deg, #272a21, #1b1d17); color: var(--ink); font-size: .82rem; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; } .film-search-play:hover, .film-search-compatible:hover, .film-search-download:hover { border-color: rgba(var(--accent-rgb), .65); background: rgba(var(--accent-rgb), .16); color: var(--accent-lighter); } /* .settings-dialog (base class, shared by every settings-style dialog) hard-caps width at 680px -- fine for forms, way too small for video. film-player-dialog carries that class too (for the shared backdrop/ header styling) but needs its own, much larger box. */ .film-player-dialog { width: min(95vw, 1400px); max-height: calc(100vh - 24px); } .film-player-card { width: 100%; max-height: calc(100vh - 24px); } .film-player-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 8px 10px; border: 1px solid rgba(var(--accent-rgb), .18); border-radius: 12px; background: rgba(255,255,255,.035); color: var(--muted); font-size: .88rem; } .film-player-tools span { min-width: 0; flex: 1; } .film-player-tools button { flex: none; padding: 6px 12px; border-radius: 999px; } #filmPlayerVideo { width: 100%; max-height: 75vh; background: #000; display: block; } .chat.drag-over .messages, .chat.drag-over .composer { outline: 2px dashed var(--accent); outline-offset: -10px; background: rgba(var(--accent-rgb), .08); } .message { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.025); } .message > div { position: relative; min-width: 0; } .avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; background: var(--panel-2); color: var(--accent); font-weight: 800; overflow: hidden; background-size: cover; background-position: center; } .message-head { display: flex; align-items: baseline; gap: 8px; padding-right: 56px; margin-bottom: 2px; } .message-actions { display: none !important; } .message:hover .message-actions, .message:focus-within .message-actions { display: none !important; } .pinned-messages-bar, .channel-gallery-bar { margin: 8px 16px 0; padding: 9px 12px; border: 1px solid rgba(var(--accent-rgb), .22); border-radius: 16px; background: rgba(18, 18, 11, .82); box-shadow: 0 8px 20px rgba(0,0,0,.16); } .pinned-messages-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; } .pinned-messages-bar > b { color: var(--accent-lighter); white-space: nowrap; } .pinned-messages-bar > div { display: flex; gap: 8px; overflow-x: auto; } .pinned-messages-bar button, .channel-gallery-bar button { border: 1px solid rgba(var(--accent-rgb), .28); border-radius: 999px; background: rgba(var(--accent-rgb), .08); color: var(--ink); cursor: pointer; } .pinned-messages-bar button { display: grid; min-width: 190px; max-width: 280px; padding: 7px 10px; text-align: left; } .pinned-messages-bar small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; } .channel-gallery-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .channel-gallery-bar span { color: var(--muted); font-size: 12px; font-weight: 800; } .message-context-menu { position: fixed; z-index: 1200; display: grid; min-width: 170px; padding: 7px; border: 1px solid rgba(var(--accent-rgb), .34); border-radius: 14px; background: rgba(12, 12, 8, .96); box-shadow: 0 18px 40px rgba(0,0,0,.38); } .message-context-menu[hidden] { display: none !important; } .message-context-menu button { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; } .message-context-menu button:hover { background: rgba(var(--accent-rgb), .12); } .message-context-menu button .icon { width: 16px; height: 16px; flex: 0 0 auto; opacity: .88; } @media (hover: none) { .message-actions { opacity: .72; transform: none; } } .author { font-weight: 700; color: #fff4d4; } .time { color: var(--soft); font-size: 12px; } .date-separator { display: flex; align-items: center; gap: 12px; margin: 18px 0 10px; color: var(--soft); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .date-separator::before, .date-separator::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .12); } .unread-divider { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--accent-lighter); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .unread-divider::before, .unread-divider::after { content: ""; flex: 1; height: 1px; background: rgba(var(--accent-rgb), .5); } .text { color: #e8e1cc; white-space: pre-wrap; overflow-wrap: anywhere; } .spoiler { background: rgba(255, 255, 255, .14); color: transparent; border-radius: 4px; cursor: pointer; padding: 0 2px; user-select: none; transition: background-color .12s ease; } .spoiler:hover { background: rgba(255, 255, 255, .2); } .spoiler.revealed { background: rgba(255, 255, 255, .06); color: inherit; cursor: text; user-select: text; } .message-image { display: block; max-width: min(520px, 100%); max-height: 420px; margin-top: 8px; border: 1px solid var(--line); object-fit: contain; background: #090a07; } .message-image-open { display: block; padding: 0; border: none; background: none; cursor: zoom-in; max-width: 100%; } .image-lightbox-dialog { border: 1px solid var(--line); border-radius: 12px; background: #0c0d09; padding: 0; max-width: min(92vw, 1200px); max-height: 92vh; } .image-lightbox-dialog::backdrop { background: rgba(0, 0, 0, .74); } .image-lightbox-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; } .image-lightbox-card img { display: block; max-width: 100%; max-height: 80vh; object-fit: contain; } .image-lightbox-close { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--line); background: rgba(12, 13, 9, .82); color: var(--ink); cursor: pointer; } .image-lightbox-download { color: var(--accent-lightest, #ffd889); font-size: 12px; font-weight: 700; text-decoration: none; } .image-lightbox-download:hover { text-decoration: underline; } .message-video-wrap { display: grid; gap: 6px; max-width: min(640px, 100%); margin-top: 8px; } .message-video { display: block; width: 100%; max-height: 420px; border: 1px solid var(--line); border-radius: 12px; background: #050604; } .message-video-wrap a { color: var(--muted); font-size: 12px; font-weight: 800; text-decoration: none; } .message-video-wrap a:hover { color: var(--accent-lighter); } .delete-message { width: 22px; height: 22px; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: 8px; background: rgba(var(--accent-rgb), .05); color: var(--muted); cursor: pointer; font-size: 0; line-height: 1; transition: opacity .12s ease, border-color .12s ease, color .12s ease, background .12s ease, transform .12s ease; } /* Replaced the old box-shadow/border CSS-hack trash icon (looked crude and inconsistent next to the SVG mask icon set) with a proper mask icon using the same recipe as every other icon in this file. */ .trash-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E"); } .key-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='m21 2-9.6 9.6'/%3E%3Cpath d='m15.5 7.5 3 3L22 7l-3-3'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='m21 2-9.6 9.6'/%3E%3Cpath d='m15.5 7.5 3 3L22 7l-3-3'/%3E%3C/svg%3E"); } .logout-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E"); } .settings-section button.logout-all-button .logout-icon { width: 15px; height: 15px; background: currentColor; } .delete-message:hover { background: rgba(226, 89, 79, .1); border-color: rgba(226, 89, 79, .45); color: var(--danger); opacity: 1; transform: translateY(-1px); } .composer { display: grid; grid-template-columns: 46px 46px 46px 46px 46px minmax(0, 1fr) 94px; gap: 10px; padding: 0 18px 18px; } .typing-indicator { grid-column: 1 / -1; min-height: 18px; margin: -3px 2px -2px; padding: 0 4px 0 58px; color: var(--accent-lighter); font-size: 12px; font-weight: 800; line-height: 18px; } .typing-indicator[hidden] { display: none; } .composer textarea { min-height: 46px; max-height: 150px; resize: none; border: 1px solid var(--line); background: #10120f; color: var(--ink); padding: 12px; outline: 0; /* Pinned to an explicit track instead of relying on auto-placement order: the composer has up to 5 optional icon buttons before the textarea (image/voice-clip always present, emoji/poll/scheduled-message conditionally hidden via the `hidden` attribute depending on permissions). A hidden button is removed from grid flow entirely, so without this pin the textarea and submit button silently shift left into the wrong (46px-wide) tracks whenever any icon button is hidden -- e.g. members without poll access saw a collapsed textarea and a submit button stretched across most of the composer. */ grid-column: 6; } .composer button { border: 0; background: linear-gradient(180deg, var(--accent-light), var(--accent)); color: #17120a; font-weight: 800; cursor: pointer; } .composer button[type="submit"] { grid-column: 7; } #imageButton, #voiceClipButton, #pollCreateButton, .composer-emoji-button { width: 46px; min-height: 46px; display: grid; place-items: center; border: 1px solid var(--line); background: linear-gradient(180deg, #272a21, #191b16); color: var(--ink); font-size: 16px; line-height: 1; } .members { display: flex; flex-direction: column; min-height: 100vh; border-right: 0; border-left: 1px solid var(--line); padding: 18px 12px; } .members-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; } .members-head-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; } .members h3 { margin: 0; color: #c0a96e; font-size: 12px; text-transform: uppercase; } .stream-viewer-total { border: 1px solid rgba(98, 208, 120, .28); padding: 2px 6px; color: var(--muted); font-size: 10px; font-weight: 800; line-height: 1.2; white-space: nowrap; } .stream-viewer-total.active { color: var(--green); background: rgba(98, 208, 120, .08); box-shadow: 0 0 12px rgba(98, 208, 120, .12); } .member-presence-filter-toggle { border: 1px solid rgba(var(--accent-rgb), .36); background: rgba(var(--accent-rgb), .08); color: var(--accent-lighter); padding: 2px 7px; font-size: 10px; font-weight: 900; line-height: 1.2; white-space: nowrap; } .member-presence-filter-toggle:hover, .member-presence-filter-toggle:focus-visible { border-color: rgba(var(--accent-rgb), .75); background: rgba(var(--accent-rgb), .17); } .member-presence-filter-toggle.is-off { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: var(--muted); } .member-list-empty { margin: 14px 4px; color: var(--muted); font-size: 12px; font-weight: 800; } .member { display: flex; align-items: center; gap: 10px; width: calc(100% - 12px); min-height: 48px; margin: 2px 6px; border: 0; border-radius: 10px !important; background: transparent; color: var(--ink); padding: 7px 6px; text-align: left; border-left: 2px solid transparent; } .member-button { cursor: pointer; } .member-button:hover { border-left-color: rgba(var(--accent-rgb),.55); background: linear-gradient(90deg, rgba(var(--accent-rgb),.1), rgba(var(--accent-rgb),.025) 55%, transparent); } .member-button:disabled { cursor: default; opacity: .72; } .member-avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: var(--panel-2); color: var(--accent); font-size: 12px; font-weight: 800; overflow: hidden; background-size: cover; background-position: center; } .presence-wrap { position: relative; flex: 0 0 auto; } .presence-dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border: 2px solid var(--side); border-radius: 50%; background: #7d8595; } .presence-wrap.online .presence-dot { background: var(--green); } .presence-wrap.away .presence-dot { background: var(--accent); } .presence-wrap.dnd .presence-dot { background: var(--danger); } .presence-wrap.invisible .presence-dot { background: var(--muted); opacity: .6; } .presence-wrap.offline .presence-dot { background: #6b6b62; } .member-info { display: grid; gap: 2px; min-width: 0; flex: 1; align-self: center; } .member-topline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; min-width: 0; } .member-topline b, .member-topline small, .member-role { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .member-topline b { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 18px; color: var(--ink); font-size: 14px; font-weight: 900; line-height: 18px; letter-spacing: -.01em; } .member-topline b .member-timeout-badge, .member-topline b .local-mute-badge { flex: 0 0 auto; font-size: 9px; font-weight: 900; line-height: 1; } .member-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .member-role-icon { min-width: 19px; height: 17px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.055); color: var(--muted); font-size: 9px; font-weight: 900; line-height: 1; flex: 0 0 auto; } .member-role-icon span { transform: translateY(-.5px); } .member-role-icon.role-superadmin { color: #ffe7ad; border-color: rgba(255, 212, 137, .45); background: rgba(var(--accent-rgb), .16); box-shadow: 0 0 10px rgba(var(--accent-rgb), .18); } .member-role-icon.role-admin { color: #cfe2ff; border-color: rgba(86, 150, 255, .42); background: rgba(86, 150, 255, .13); } .member-role-icon.role-moderator { color: #d7ffdd; border-color: rgba(98, 208, 120, .42); background: rgba(98, 208, 120, .12); } .member-role-icon.role-member { color: rgba(255,255,255,.58); } .member-role-icon.role-bot { color: #d7c2ff; border-color: rgba(168, 130, 255, .45); background: rgba(168, 130, 255, .14); } .member-timeout-badge { min-width: 0; max-width: 96px; height: 17px; padding: 0 6px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid rgba(226, 89, 79, .55); background: rgba(226, 89, 79, .12); color: #ffb0a9; font-size: 9px; font-weight: 900; line-height: 1; white-space: nowrap; flex: 0 1 auto; } .member-topline small { color: var(--muted); font-size: 10px; text-transform: lowercase; } .member-role { color: var(--muted); font-size: 11px; } .member-badges, .member-info .member-extra { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-height: 0; line-height: 1; margin-top: 2px; } .member-social-link { position: relative; min-width: 15px; height: 18px; display: inline-flex; align-items: center; gap: 3px; padding: 0 3px; border-radius: 999px; color: var(--muted); text-decoration: none; opacity: .72; transition: opacity .15s ease, background .15s ease, transform .15s ease; } .member-social-link:hover { background: rgba(255,255,255,.06); } .member-social-link::after { content: ""; width: 6px; height: 6px; border: 1px solid var(--side); border-radius: 50%; background: #7d8595; } .member-social-link.live { color: var(--green); opacity: 1; } .member-social-link.live::after { background: var(--green); box-shadow: 0 0 0 3px rgba(98, 208, 120, .18), 0 0 8px rgba(98, 208, 120, .78); } .member-social-link.offline::after { background: var(--danger); } .member-social-link.unknown::after { background: #7d8595; } .member-social-link:hover { opacity: 1; transform: translateY(-1px); } .member-social-link img { width: 12px; height: 12px; display: block; } .member-social-live { font-size: 9px; font-weight: 900; line-height: 1; color: var(--green); white-space: nowrap; text-shadow: 0 0 8px rgba(98, 208, 120, .8); } .member.muted { color: var(--muted); margin-bottom: 18px; } .member.muted span { background: var(--soft); } .settings-dialog { width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 36px); border: 1px solid var(--line); padding: 0; background: #171914; color: var(--ink); overflow-y: auto; } .settings-card { display: grid; gap: 14px; padding: 18px; } .settings-card header { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .settings-card header button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); background: linear-gradient(180deg, #272a21, #191b16); color: var(--ink); cursor: pointer; } .settings-card header button[value="cancel"], .confirm-card header button[value="cancel"] { font-size: 0; border-radius: 12px !important; } .settings-card header button[value="cancel"]::before, .confirm-card header button[value="cancel"]::before { content: ""; width: 14px; height: 14px; display: block; background: currentColor; mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E"); mask-size: contain; -webkit-mask-size: contain; } .settings-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); border: 1px solid var(--line); border-radius: 14px !important; overflow: hidden; background: #10130f; } .settings-tabs button { min-height: 36px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); font-weight: 800; cursor: pointer; transition: color .14s ease, background .14s ease; } .settings-tabs button:hover:not(.active) { color: var(--accent-lighter); background: rgba(var(--accent-rgb),.08); } .settings-tabs button:last-child { border-right: 0; } .settings-tabs button.active { background: linear-gradient(180deg, rgba(255, 180, 57, .22), rgba(255, 180, 57, .08)); color: var(--accent-lighter); box-shadow: inset 0 -2px 0 var(--accent); } .settings-tab-panel { display: none; gap: 12px; } .settings-tab-panel.active { display: grid; } .settings-section { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid rgba(var(--accent-rgb),.14); border-radius: 16px; background: linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), rgba(255,255,255,.015); transition: border-color .16s ease; } .settings-section:hover { border-color: rgba(var(--accent-rgb),.3); } .settings-tab-panel .settings-section:first-child { padding: 14px 16px; border: 1px solid rgba(var(--accent-rgb),.14); } .settings-section h3 { display: flex; align-items: center; gap: 8px; color: var(--accent-lighter); font-size: 13.5px; letter-spacing: .02em; } .settings-section h3::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-lighter), var(--accent)); box-shadow: 0 0 6px rgba(var(--accent-rgb),.55); flex: none; } .settings-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .arc-bot-avatar-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .arc-bot-avatar-preview { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, .08); } .settings-section label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; } .settings-section label[hidden] { display: none; } .settings-section input { width: 100%; border: 1px solid var(--line); background: #0e100d; color: var(--ink); padding: 9px 10px; outline: 0; } .password-field { display: flex; align-items: center; gap: 8px; } .password-field input { flex: 1; } .password-eye { width: 42px !important; min-width: 42px; height: 38px; display: inline-grid; place-items: center; padding: 0 !important; border-radius: 3px !important; } .password-eye-icon { width: 19px; height: 19px; mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); } .password-eye.active .password-eye-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7c1.6 0 3 .4 4.3 1'/%3E%3Cpath d='M21.5 12s-1 2-3 3.7'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cline x1='3' y1='3' x2='21' y2='21'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7c1.6 0 3 .4 4.3 1'/%3E%3Cpath d='M21.5 12s-1 2-3 3.7'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cline x1='3' y1='3' x2='21' y2='21'/%3E%3C/svg%3E"); } .password-eye.active { background: rgba(var(--accent-rgb), .28) !important; border-color: rgba(255, 212, 137, .75) !important; } .user-profile-ip { color: var(--accent-2); font-weight: 800; } .voice-panel.afk-locked .profile-icon-button.voice-toggle { opacity: .45; cursor: not-allowed; } .license-status-card { display: grid; gap: 5px; padding: 10px; border: 1px solid rgba(var(--accent-rgb),.22); background: rgba(9,11,8,.48); } .license-status-card b { color: var(--danger); } .license-status-card b.ok { color: var(--green); } .license-status-card small { color: var(--muted); } .muted-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; } .muted-note code { color: var(--accent-lighter); word-break: break-all; } .license-issuer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .issued-license-rows { display: grid; gap: 8px; } .issued-license-row { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 10px; align-items: center; border: 1px solid rgba(var(--accent-rgb),.18); background: linear-gradient(180deg, rgba(35,38,29,.72), rgba(11,13,10,.86)); padding: 10px; } .issued-license-row.revoked { opacity: .58; } .issued-license-row.payment-soon { border-color: rgba(255, 181, 57, .55); box-shadow: inset 0 0 0 1px rgba(255, 181, 57, .12); } .issued-license-row.payment-overdue { border-color: rgba(226, 89, 79, .75); box-shadow: inset 0 0 0 1px rgba(226, 89, 79, .18); } .issued-license-main { display: grid; gap: 4px; min-width: 0; } .issued-license-main b { color: var(--ink); } .issued-license-whitelabel-tag { display: inline-block; padding: 2px 7px; margin-left: 6px; border-radius: 999px; background: rgba(var(--accent-rgb), .18); color: var(--accent); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; } .issued-license-main small { color: var(--muted); } .issued-license-main code { color: var(--accent-lighter); font-size: 11px; overflow-wrap: anywhere; } .issued-license-actions { display: grid; gap: 6px; min-width: 116px; } .revoke-license-button, .delete-issued-license-button { border: 1px solid rgba(226, 89, 79, .55) !important; background: linear-gradient(180deg, #3a1d19, #21110f) !important; color: #ffd8d4 !important; } .activate-issued-license-button { border: 1px solid rgba(85, 214, 125, .45) !important; background: linear-gradient(180deg, #1e3521, #101d12) !important; color: #bfffd0 !important; } .admin-permission-rows, .ticket-rows, .ticket-replies { display: grid; gap: 8px; } .admin-permission-toolbar { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; } .admin-permission-toolbar label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 800; } .admin-permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } @media (max-width: 760px) { .admin-permission-toolbar, .admin-permission-grid { grid-template-columns: 1fr; } } .ticket-row { display: grid; gap: 10px; padding: 12px; border: 1px solid rgba(var(--accent-rgb),.18); background: linear-gradient(180deg, rgba(35,38,29,.72), rgba(11,13,10,.86)); } .ticket-row header, .ticket-answer { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; align-items: start; } .ticket-row header b, .ticket-reply b { color: var(--ink); } .ticket-row header small, .ticket-reply small, .ticket-status { color: var(--muted); font-size: 12px; } .ticket-row p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .ticket-reply { display: grid; gap: 4px; padding: 9px; border: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.18); } .ticket-row.closed { opacity: .72; } .ticket-answer textarea { min-height: 64px; } .support-card { width: 100%; max-height: none; overflow: auto; } .support-dialog { width: min(1180px, calc(100vw - 36px)); max-height: calc(100vh - 28px); } .support-dialog .ticket-list-panel { min-height: 420px; } .support-button { position: relative; font-weight: 900; color: var(--accent-lighter); } .obs-control-button { font-weight: 900; font-size: 10px; letter-spacing: .02em; color: var(--accent-lighter); } .ticket-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: #e2594f; color: white; font-size: 11px; line-height: 1; } .ticket-assignee { color: var(--accent-lighter) !important; } .ticket-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .ticket-summary div { display: grid; gap: 3px; padding: 10px; border: 1px solid rgba(var(--accent-rgb),.18); background: rgba(0,0,0,.2); } .ticket-summary b { color: var(--ink); font-size: 20px; } .ticket-summary span, .ticket-meta, .ticket-section-title span { color: var(--muted); font-size: 12px; } .ticket-header { display: grid !important; grid-template-columns: minmax(0, 1fr) 180px !important; gap: 14px !important; align-items: start !important; } .ticket-title-block { display: grid; gap: 7px; min-width: 0; } .ticket-title-block h4 { margin: 0; color: var(--ink); font-size: 16px; } .ticket-state-pill { width: fit-content; padding: 3px 8px; border: 1px solid rgba(var(--accent-rgb),.25); background: rgba(var(--accent-rgb),.12); color: var(--accent-lighter); font-size: 11px; font-weight: 900; text-transform: uppercase; } .ticket-row.in_progress .ticket-state-pill { border-color: rgba(86,167,255,.35); background: rgba(86,167,255,.12); color: #b9d9ff; } .ticket-row.closed .ticket-state-pill { border-color: rgba(85,214,125,.3); background: rgba(85,214,125,.1); color: #bfffd0; } .ticket-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; } .ticket-owner-block { display: grid; gap: 8px; } .delete-ticket-button { width: 100%; } .ticket-body, .ticket-replies-wrap { display: grid; gap: 7px; padding: 10px; border: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.14); } .ticket-body > b, .ticket-section-title b { color: var(--ink); } .ticket-section-title { display: flex; justify-content: space-between; align-items: center; } .ticket-reply > div { display: flex; justify-content: space-between; gap: 10px; } @media (max-width: 700px) { .ticket-summary, .ticket-header, .ticket-answer { grid-template-columns: 1fr !important; } } .game-map-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 180px; gap: 10px; align-items: end; } .game-map-rows { display: grid; gap: 8px; } .game-map-row { display: grid; grid-template-columns: minmax(140px, .8fr) minmax(160px, 1fr) 184px; gap: 10px; align-items: end; border: 1px solid rgba(var(--accent-rgb),.18); background: linear-gradient(180deg, rgba(35,38,29,.72), rgba(11,13,10,.86)); padding: 10px; } .game-map-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .game-map-actions .danger-action { border: 1px solid rgba(226, 89, 79, .55); background: linear-gradient(180deg, #3a1d19, #21110f); color: #ffd8d4; } .settings-section button { min-height: 34px; padding: 8px 14px; border: 1px solid var(--line-hot); border-radius: 3px; background: rgba(var(--accent-rgb), .06); color: var(--ink); font-weight: 600; cursor: pointer; white-space: normal; line-height: 1.25; } .settings-section button:hover:not(:disabled) { background: rgba(var(--accent-rgb), .13); border-color: var(--accent); color: var(--accent-lighter); } .settings-section button.btn-primary { border: 0; background: linear-gradient(180deg, var(--accent-light), var(--accent)); color: #17120a; font-weight: 700; } .settings-section button.btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, var(--accent-light), var(--accent)); filter: brightness(1.08); color: #17120a; } .remote-pair-actions, .remote-request-actions { display: flex; flex-wrap: wrap; gap: 8px; } .remote-primary-action { width: 100%; min-height: 44px !important; font-size: 15px; } .remote-fallback { border: 1px solid rgba(255, 180, 57, .18); background: rgba(9, 11, 8, .5); padding: 9px 10px; } .remote-fallback summary { color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 800; } .remote-fallback .remote-pair-actions { margin-top: 9px; } .button-link { display: inline-flex; align-items: center; min-height: 34px; border: 1px solid var(--line); background: #181b16; color: var(--ink); padding: 5px 10px; text-decoration: none; } .desktop-client-download, .android-client-download { justify-content: center; border-color: var(--line-hot); background: linear-gradient(180deg, rgba(255, 180, 57, .22), rgba(255, 180, 57, .08)); color: var(--accent-lighter); font-weight: 900; } #remoteAgentStatus { margin: 0 0 9px; color: var(--muted); } #remoteAgentStatus.online { color: var(--green); } #remotePairCode { display: block; margin-top: 10px; border: 1px solid var(--accent); background: #0e100d; color: var(--accent-lighter); padding: 9px 12px; font-size: 22px; font-weight: 800; letter-spacing: 0; text-align: center; } #remotePairCode[hidden] { display: none; } #remotePairCommand { display: block; margin-top: 8px; border: 1px solid rgba(255, 180, 57, 0.45); background: #090b08; color: var(--ink); padding: 8px 10px; font-size: 12px; line-height: 1.45; white-space: normal; word-break: break-all; } #remotePairCommand[hidden] { display: none; } #remoteAcceptButton { border-color: var(--accent); color: var(--accent-lighter); } #remoteDeclineButton { border-color: rgba(226, 89, 79, .55); } .avatar-preview { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 12px; background: var(--panel-2); color: var(--accent); font-size: 24px; font-weight: 900; overflow: hidden; background-size: cover; background-position: center; } .bulk-moderation-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; padding: 8px 12px; border: 1px solid rgba(var(--accent-rgb), .35); border-radius: 10px; background: rgba(var(--accent-rgb), .1); } .bulk-moderation-bar[hidden] { display: none; } .bulk-moderation-bar #bulkModerationMinutes { width: 70px; } .role-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 140px 150px 36px 36px 36px; gap: 10px; align-items: center; padding: 10px 12px; margin-bottom: 8px; border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius-md, 12px); background: linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), rgba(8,10,7,.3); transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; } .role-row-supporter { position: relative; display: grid; place-items: center; width: 36px; height: 36px; cursor: pointer; } .role-row-supporter input { position: absolute; opacity: 0; width: 36px; height: 36px; margin: 0; cursor: pointer; } .role-row-supporter span { font-size: 18px; color: var(--muted); transition: color .15s ease, text-shadow .15s ease; } .role-row-supporter input:checked + span { color: #ffcb4d; text-shadow: 0 0 10px rgba(255, 203, 77, .5); } .member-supporter-badge { display: inline-block; color: #ffcb4d; text-shadow: 0 0 6px rgba(255, 203, 77, .45); font-size: 0.85em; margin-left: 2px; } @media (prefers-reduced-motion: no-preference) { .member-supporter-badge { animation: member-supporter-twinkle 3.6s ease-in-out infinite; } } @keyframes member-supporter-twinkle { 0%, 100% { text-shadow: 0 0 6px rgba(255, 203, 77, .45); } 50% { text-shadow: 0 0 11px rgba(255, 203, 77, .8); } } .member-name.is-supporter { color: #ffcb4d; } .role-row:hover { border-color: rgba(var(--accent-rgb),.28); box-shadow: 0 6px 18px rgba(0,0,0,.22); transform: translateY(-1px); } .role-tag { display: inline-flex; width: fit-content; margin-top: 2px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: var(--muted); } .role-tag-superadmin { border-color: rgba(255, 181, 57, .55); background: rgba(255, 181, 57, .14); color: var(--accent-lighter); } .role-tag-admin { border-color: rgba(99, 179, 237, .5); background: rgba(99, 179, 237, .12); color: #9ecdf2; } .role-tag-moderator { border-color: rgba(167, 139, 250, .5); background: rgba(167, 139, 250, .12); color: #cbb8fb; } .radio-station-form, .game-map-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .radio-station-form { align-items: end; padding: 12px; border: 1px solid rgba(var(--accent-rgb),.16); border-radius: 18px; background: rgba(255,255,255,.025); } .radio-admin-rows, .game-map-rows { display: grid; gap: 10px; } .radio-admin-table { display: grid; overflow: hidden; border: 1px solid rgba(var(--accent-rgb),.18); border-radius: 18px; background: rgba(6,8,6,.36); } .radio-admin-head, .radio-admin-row { display: grid; grid-template-columns: minmax(170px, 1.1fr) minmax(90px, .45fr) minmax(240px, 2fr) 72px; gap: 12px; align-items: center; padding: 10px 12px; } .radio-admin-head { color: var(--accent-lighter); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; background: rgba(var(--accent-rgb),.08); border-bottom: 1px solid rgba(var(--accent-rgb),.18); } .radio-admin-row { min-height: 58px; border-bottom: 1px solid rgba(255,255,255,.055); background: transparent; } .radio-admin-row:last-child { border-bottom: 0; } .radio-admin-row:hover { background: rgba(var(--accent-rgb),.055); } .radio-admin-name { min-width: 0; display: grid; gap: 2px; } .radio-admin-row small { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; } .radio-admin-bitrate { justify-self: start; border: 1px solid rgba(var(--accent-rgb),.22); border-radius: 999px; padding: 5px 9px; color: #ffe2a3; background: rgba(var(--accent-rgb),.08); font-size: 12px; font-weight: 800; white-space: nowrap; } .radio-admin-url { min-width: 0; overflow: hidden; color: var(--muted); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; } .radio-admin-url:hover { color: var(--accent-lighter); } .icon-only-action { width: 42px !important; min-width: 42px; height: 38px; justify-self: end; display: inline-grid; place-items: center; padding: 0 !important; font-size: 0; } @media (max-width: 780px) { .radio-admin-head { display: none; } .radio-admin-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name action" "bitrate action" "url url"; gap: 6px 10px; } .radio-admin-name { grid-area: name; } .radio-admin-bitrate { grid-area: bitrate; } .radio-admin-url { grid-area: url; } .radio-admin-row .icon-only-action { grid-area: action; } } .game-map-icon-preview { width: 38px; height: 38px; border-radius: 12px; object-fit: cover; display: grid; place-items: center; background: rgba(255,255,255,.08); color: var(--muted); font-size: 11px; font-weight: 800; } .member-game, .member-radio { display: inline-flex; align-items: center; gap: 6px; } .member-game img { width: 16px; height: 16px; border-radius: 5px; object-fit: cover; } .member-radio { color: var(--accent-lighter); font-size: 11px; } .game-map-rows .game-map-row { grid-template-columns: 42px minmax(150px, 1.1fr) minmax(150px, 1.1fr) minmax(170px, .9fr) auto !important; align-items: center !important; gap: 10px !important; padding: 10px 12px !important; border-radius: 14px !important; } .game-map-rows .game-map-row label { margin: 0 !important; gap: 4px !important; } .game-map-rows .game-map-row input[type="file"] { width: 100%; max-width: 170px; font-size: 11px; } .game-map-rows .game-map-actions { display: flex !important; gap: 8px !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: wrap !important; } .game-map-rows .game-map-actions button { min-width: 82px !important; min-height: 34px !important; padding: 7px 12px !important; white-space: nowrap !important; flex-shrink: 0 !important; } .game-map-rows .game-map-actions button[data-action="clear-icon"] { min-width: 112px !important; } .game-map-rows .game-map-actions button[data-action="fetch-icon"] { min-width: 168px !important; } @media (max-width: 900px) { .game-map-rows .game-map-row { grid-template-columns: 42px minmax(0, 1fr) !important; } .game-map-rows .game-map-actions { grid-column: 1 / -1; justify-content: stretch !important; } .game-map-rows .game-map-actions button { flex: 1; } } .settings-message { min-height: 18px; color: var(--muted); font-size: 12px; } .integration-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .recovery-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 10px 0; } .recovery-codes code { display: block; padding: 8px 10px; background: var(--panel); border: 1px solid var(--panel-2); border-radius: 8px; color: var(--accent-lighter); font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 13px; text-align: center; letter-spacing: .02em; } .two-factor-qr { display: flex; justify-content: center; margin: 10px 0; padding: 14px; background: #fff; border-radius: 10px; max-width: 320px; } .two-factor-qr svg { width: 100%; height: auto; max-width: 292px; } .two-factor-login { display: grid; gap: 10px; margin: 4px 0; } .two-factor-login[hidden] { display: none; } .overlay-detail-fields { display: grid; gap: 10px; } .overlay-detail-fields[hidden] { display: none; } .update-log-panel { max-height: 220px; overflow-y: auto; margin: 6px 0 0; padding: 10px 12px; background: var(--panel); border: 1px solid var(--panel-2); border-radius: 8px; color: var(--muted); font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .admin-only { display: none; } .superadmin-only { display: none; } .admin-settings-only { display: none; } .privileged-role-only { display: none; } .obs-social-only { display: none; } body.has-social-profile:not(.is-arc-chat-android) .obs-social-only { display: grid; } .owner-only { display: none; } body.is-owner .owner-only { display: grid; } /* Gate UI on whether this is the native Windows client (WebView2, appends ?arcClient=1 on load) or a plain browser tab -- see IS_ARC_CHAT_CLIENT in app.js. */ .arc-client-only { display: none; } body.is-arc-chat-client .arc-client-only { display: grid; } .browser-only { display: none; } body.is-browser-only .browser-only { display: grid; } /* VoiceMeeter is a Windows-only local audio mixer with no relation to whether the account has a TikTok/Twitch name set (unlike the OBS button, which makes sense to gate behind "you're plausibly a streamer") -- only gate on the native Windows client (body.is-arc-chat-client), and exclude the Android app explicitly since it has no local VoiceMeeter to control. */ .voicemeeter-control-button { display: none; } body.is-arc-chat-client:not(.is-arc-chat-android) .voicemeeter-control-button { display: grid; } body.is-privileged-role .privileged-role-only { display: grid; } body.is-admin .admin-only { display: grid; } body.can-manage-settings .admin-settings-only { display: grid; } body.is-superadmin .superadmin-only { display: grid; } body.is-admin .settings-tab-panel.admin-only { display: none; } body.is-admin .settings-tab-panel.admin-only.active { display: grid; } body.is-superadmin .settings-tab-panel.superadmin-only { display: none; } body.is-superadmin .settings-tab-panel.superadmin-only.active { display: grid; } body.can-manage-settings .settings-tab-panel.admin-settings-only { display: none; } body.can-manage-settings .settings-tab-panel.admin-settings-only.active { display: grid; } body.is-arc-chat-client .settings-tab-panel.arc-client-only { display: none; } body.is-arc-chat-client .settings-tab-panel.arc-client-only.active { display: grid; } @media (max-width: 900px) { body { grid-template-columns: var(--left-sidebar-width, 210px) 6px minmax(0, 1fr) 6px var(--right-sidebar-width, 240px); } .members { padding-inline: 10px; } .profile { left: 0; width: 100%; } } @media (max-width: 560px) { .settings-tabs { display: flex; overflow-x: auto; } .settings-tabs button { min-width: 128px; } .settings-actions { grid-template-columns: 1fr; } } @media (max-width: 680px) { body { grid-template-columns: 1fr; } .members { display: none; } .sidebar-resize-handle { display: none; } .profile { position: static; width: auto; } } .member-avatar, .voice-avatar { cursor: pointer; } .user-profile-card { width: min(420px, calc(100vw - 32px)); } .user-profile-view { display: grid; justify-items: center; gap: 8px; padding: 14px 4px 8px; text-align: center; } .user-profile-avatar { width: 88px; height: 88px; display: grid; place-items: center; border: 1px solid var(--accent); border-radius: 8px; background: var(--panel-2); background-position: center; background-size: cover; color: var(--accent); font-size: 24px; font-weight: 800; } .user-profile-view h3, .user-profile-view p { margin: 0; } .user-profile-view p { color: var(--muted); } .user-profile-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .user-profile-socials a { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; border: 1px solid var(--line); padding: 6px 9px; color: var(--ink); text-decoration: none; } .user-profile-socials a:hover { border-color: var(--accent); color: var(--accent); } .user-profile-socials img { width: 16px !important; height: 16px !important; max-width: 16px; max-height: 16px; display: block; flex: 0 0 16px; object-fit: contain; } .confirm-dialog { width: min(420px, calc(100vw - 32px)); border: 1px solid var(--line-hot); padding: 0; background: #151711; color: var(--ink); box-shadow: 0 24px 80px rgba(0,0,0,.62), 0 0 0 1px rgba(var(--accent-rgb),.14); } .confirm-dialog::backdrop { background: rgba(0,0,0,.66); backdrop-filter: blur(3px); } .confirm-card { display: grid; gap: 14px; padding: 16px; } #legalDialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 60px); } .legal-text { white-space: pre-wrap; overflow-y: auto; max-height: 60vh; font-size: 0.88rem; line-height: 1.55; color: var(--ink); } .auth-legal-links { display: flex; justify-content: center; gap: 16px; margin-top: 4px; } .link-button { border: none; background: none; padding: 0; color: var(--muted); font-size: 0.78rem; text-decoration: underline; cursor: pointer; } .link-button:hover { color: var(--accent-lighter); } .confirm-card header { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .confirm-card h2 { margin: 0; font-size: 18px; } .confirm-card header button[value="cancel"] { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(var(--accent-rgb), .42); background: linear-gradient(180deg, rgba(37, 39, 30, .96), rgba(16, 18, 13, .96)); color: var(--accent-lightest); font-size: 0; font-weight: 900; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 231, 173, .05); transition: border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease; } .confirm-card header button[value="cancel"]::before { content: "x"; font-size: 16px; line-height: 1; transform: translateY(-1px); } .confirm-card header button[value="cancel"]:hover, .confirm-card header button[value="cancel"]:focus-visible { border-color: rgba(var(--accent-rgb), .95); background: linear-gradient(180deg, rgba(var(--accent-rgb), .25), rgba(24, 19, 12, .98)); color: #fff7df; box-shadow: 0 0 16px rgba(var(--accent-rgb), .18); transform: translateY(-1px); } .confirm-card header button[value="cancel"]:active { transform: translateY(0); } .confirm-card p { margin: 0; color: var(--muted); } .confirm-actions { display: flex; justify-content: flex-end; gap: 10px; } .confirm-actions button { min-width: 108px; border: 1px solid var(--line); padding: 9px 12px; background: linear-gradient(180deg, #272a21, #191b16); color: var(--ink); font-weight: 800; } .confirm-actions .danger-action { border-color: rgba(226, 89, 79, .75); background: linear-gradient(180deg, #7b2822, #431714); color: #fff0dc; } .input-card label { display: grid; gap: 7px; color: var(--muted); } .input-card input { width: 100%; border: 1px solid var(--line); background: #10120f; color: var(--ink); padding: 11px 12px; outline: 0; } .input-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.28), 0 0 18px rgba(var(--accent-rgb),.12); } .version-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(var(--accent-rgb),.18); display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; } .version-footer button { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line); background: linear-gradient(180deg, #272a21, #191b16); color: var(--accent); font-weight: 900; cursor: pointer; } .changelog-dialog { width: min(920px, calc(100vw - 36px)); } .changelog-dialog .changelog-card { width: 100%; max-width: none; } .changelog-card section { display: grid; gap: 12px; } .revision-list { max-height: min(74vh, 760px); overflow-y: auto; overflow-x: hidden; padding-right: 6px; } .revision-entry { border: 1px solid rgba(var(--accent-rgb),.18); background: linear-gradient(180deg, rgba(38,40,30,.82), rgba(15,17,13,.92)); padding: 14px 16px; overflow-wrap: anywhere; } .revision-entry.current { border-color: rgba(var(--accent-rgb),.55); box-shadow: inset 3px 0 0 var(--accent), 0 0 22px rgba(var(--accent-rgb),.08); } .revision-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--text); } .revision-head b { color: var(--accent); font-size: 16px; } .revision-head span { color: #c0a96e; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; } .changelog-card ul { margin: 0; padding-left: 18px; color: var(--muted); } .changelog-card li + li { margin-top: 5px; } .user-profile-dialog { width: min(560px, calc(100vw - 32px)); overflow-x: hidden; } .user-profile-dialog .settings-card { padding: 18px 22px 22px; overflow-x: hidden; } .user-profile-card { width: 100%; } .user-profile-view { justify-items: stretch; gap: 12px; padding: 8px 0 2px; text-align: left; } .user-profile-avatar { justify-self: center; width: 104px; height: 104px; border-color: var(--line-hot); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.2), 0 16px 30px rgba(0,0,0,.35); } .user-profile-view h3, .user-profile-view p { text-align: center; } .user-profile-socials { display: grid; gap: 9px; margin-top: 4px; } .user-profile-social-disclosure { width: 100%; border: 1px solid rgba(var(--accent-rgb), .22); border-radius: 14px; background: rgba(255, 255, 255, .025); overflow: hidden; } .user-profile-social-disclosure[hidden] { display: none; } .user-profile-social-disclosure > summary { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 13px; color: var(--accent-lighter); cursor: pointer; font-weight: 900; list-style: none; user-select: none; } .user-profile-social-disclosure > summary::-webkit-details-marker { display: none; } .user-profile-social-disclosure > summary::after { content: "⌄"; font-size: 18px; transition: transform .18s ease; } .user-profile-social-disclosure[open] > summary::after { transform: rotate(180deg); } .user-profile-social-disclosure[open] > summary { border-bottom: 1px solid rgba(var(--accent-rgb), .16); } .user-profile-social-disclosure > .user-profile-socials, .user-profile-social-disclosure > .user-profile-social-admin { margin: 10px; } .user-profile-socials a { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 10px; max-width: none; border: 1px solid var(--line); padding: 10px 12px; background: linear-gradient(90deg, rgba(var(--accent-rgb),.06), rgba(255,255,255,.015)); color: var(--ink); } .user-profile-socials img { width: 18px !important; height: 18px !important; } .user-profile-socials span[id$="Name"] { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; } .profile-social-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; } .profile-social-stats { color: #c0a96e; font-size: 12px; } .profile-social-live { color: var(--green); font-size: 11px; font-weight: 900; text-shadow: 0 0 8px rgba(98,208,120,.7); } .profile-social-offline { color: var(--muted); font-size: 11px; } .user-profile-social-admin { display: grid; gap: 9px; width: 100%; margin-top: 8px; padding: 12px; border: 1px solid rgba(var(--accent-rgb), .18); border-radius: 14px; background: rgba(255, 255, 255, .035); } .user-profile-social-admin[hidden] { display: none; } .user-profile-social-admin h4 { margin: 0; color: var(--accent-lighter); font-size: 13px; } .user-profile-social-admin label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 800; text-align: left; } .user-profile-social-admin input { min-height: 34px; border: 1px solid rgba(var(--accent-rgb), .2); border-radius: 10px; background: rgba(7, 9, 7, .72); color: var(--ink); padding: 7px 9px; outline: 0; } .user-profile-social-admin input:focus { border-color: rgba(var(--accent-rgb), .58); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .14); } .user-profile-social-admin button { min-height: 36px; border: 1px solid rgba(var(--accent-rgb), .52); border-radius: 10px; background: linear-gradient(180deg, rgba(var(--accent-rgb), .28), rgba(var(--accent-rgb), .12)); color: var(--accent-lighter); cursor: pointer; font-weight: 900; } .changelog-card, .revision-entry, .revision-entry li { min-width: 0; white-space: normal; } .profile #voiceStatus { margin: 2px 0 0; color: var(--muted); font-size: 11px; min-height: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile #voiceStatus:has(.voice-status-chips) { overflow: visible; white-space: normal; } .voice-status-chips { display: flex; flex-wrap: wrap; gap: 4px; } .voice-status-chip { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(245, 240, 223, .16); background: rgba(245, 240, 223, .08); color: rgba(245, 240, 223, .82); font-size: 10px; font-weight: 700; line-height: 1.5; white-space: nowrap; } .voice-status-chip.voice-status-live { border-color: rgba(120, 200, 120, .4); background: rgba(120, 200, 120, .16); color: #b8f0b8; } .voice-status-chip.voice-status-warn { border-color: rgba(224, 79, 63, .5); background: rgba(224, 79, 63, .18); color: #ffb0a8; } @media (max-width: 760px) { body { height: 100dvh; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; } .sidebar { min-height: 0; max-height: 44dvh; display: grid; grid-template-rows: 50px auto auto auto; border-right: 0; border-bottom: 1px solid var(--line); overflow: hidden; } .sidebar header { height: 50px; padding: 8px 10px; } .sidebar header h1 { font-size: 15px; } .sidebar header p { font-size: 11px; } #addChannel { width: 36px; height: 36px; } nav { max-height: 122px; padding: 8px 8px 6px; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; align-items: flex-start; scrollbar-width: thin; } nav h3, nav .section-title { flex: 0 0 auto; align-self: center; min-width: max-content; } .channel-row { flex: 0 0 auto; width: min(210px, 72vw); min-height: 40px; grid-template-columns: minmax(0, 1fr) 26px; border-left-width: 3px; background: rgba(255,255,255,.018); } .channel { min-height: 40px; padding: 7px 9px; } .channel-icon, .dm-avatar { width: 28px; height: 28px; } .delete-channel { width: 26px; height: 34px; } .voice-panel { padding: 6px 8px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; } .voice-panel button, .voice-panel .button-link { min-height: 36px; } .profile { position: static; width: auto; padding: 8px; border-top: 1px solid rgba(var(--accent-rgb),.18); } .profile-actions { grid-template-columns: repeat(6, minmax(38px, 1fr)); gap: 5px; } .profile-icon-button { height: 38px; } .chat { min-height: 0; grid-template-rows: 54px auto minmax(0, 1fr) auto; } .chat-head { min-width: 0; padding: 8px 10px; gap: 10px; flex-wrap: wrap; } .chat-head .channel-search { order: 3; flex: 1 0 100%; max-width: none; min-width: 0; } .chat-head h2 { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-head p { max-width: 62vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .status { flex: 0 0 auto; font-size: 11px; } .screen-stage { grid-template-columns: 1fr; max-height: 32dvh; overflow-y: auto; padding: 8px 10px; } .screen-card header { align-items: flex-start; gap: 8px; } .screen-actions { flex-wrap: wrap; justify-content: flex-end; gap: 5px; } .screen-fullscreen, .screen-pip, .screen-stop, .remote-pair-control, .remote-request-control, .remote-stop-control { min-height: 32px; padding: 5px 8px; } .watch-party-card { max-height: min(360px, 40vh); } .watch-party-card .youtube-watch-player { height: clamp(140px, 28vh, 280px); } .watch-party-card .watch-control-bar { justify-content: stretch; flex-wrap: wrap; } .watch-volume-control { flex: 1 1 100%; justify-content: space-between; } .watch-volume-control input { flex: 1; width: auto; } .watch-party-card .watch-control-bar button { flex: 1 1 88px; } .messages { padding: 10px 10px 14px; } .message { grid-template-columns: 34px minmax(0, 1fr); gap: 8px; } .avatar { width: 32px; height: 32px; border-radius: 8px; } .message-head { flex-wrap: wrap; row-gap: 0; } .composer { grid-template-columns: 42px minmax(0, 1fr) 76px; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--line); background: rgba(12,14,12,.94); } .composer textarea { min-height: 42px; max-height: 108px; padding: 10px; } #imageButton, .composer button { min-height: 42px; } #imageButton { width: 42px; } .members { display: none; } .settings-dialog, .confirm-dialog, .changelog-dialog, .user-profile-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); } .settings-card, .confirm-card { padding: 14px; } .settings-tabs { display: flex; overflow-x: auto; } .settings-tabs button { flex: 1 0 128px; min-height: 42px; } .revision-list { max-height: 70dvh; } .user-profile-socials span[id$="Name"] { grid-template-columns: minmax(0, 1fr); gap: 4px; } } @media (max-width: 420px) { .sidebar { max-height: 48dvh; } .profile-actions { grid-template-columns: repeat(3, minmax(42px, 1fr)); } .composer { grid-template-columns: 40px minmax(0, 1fr); } .composer button[type="submit"] { grid-column: 1 / -1; } .chat-head p { max-width: 52vw; } } .voice-panel:empty { display: none; } .screen-share-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='13' rx='2'/%3E%3Cpath d='M12 21v-4'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cpath d='M9 11l3-3 3 3'/%3E%3Cline x1='12' y1='8' x2='12' y2='14'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='13' rx='2'/%3E%3Cpath d='M12 21v-4'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cpath d='M9 11l3-3 3 3'/%3E%3Cline x1='12' y1='8' x2='12' y2='14'/%3E%3C/svg%3E"); } .watch-stream-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); } .screen-share-toggle.connected { border-color: rgba(var(--accent-rgb), .78); color: var(--accent-lighter); box-shadow: inset 0 -2px 0 rgba(var(--accent-rgb), .45), 0 0 14px rgba(var(--accent-rgb), .14); } /* Softer ARC UI pass */ :root { --radius-sm: 12px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 28px; } button, input, textarea, select, .channel, .channel-row, .message, .composer textarea, .composer button, .settings-card, .confirm-card, .auth-card, .members, .sidebar, .ticket-row, .ticket-summary div, .ticket-body, .ticket-replies-wrap, .ticket-reply, .sidebar-radio, .radio-toggle, .radio-body, .member-button, .voice-panel button, .channel-search input, .channel-search-results, .channel-search-result, .profile-icon-button, .license-status-card, .issued-license-row, .game-map-row, .settings-toggle, .button-link { border-radius: var(--radius-md) !important; } .user-dock-panel { border-radius: var(--radius-lg) !important; } .user-dock-panel { display: grid; grid-template-rows: minmax(120px, 260px); gap: 0; margin: 8px 12px; padding: 2px; border: 1px solid rgba(var(--accent-rgb), .24); background: linear-gradient(180deg, rgba(var(--accent-rgb), .07), rgba(255,255,255,.012)), rgba(8, 10, 8, .72); box-shadow: var(--shadow-card); overflow: hidden; } .user-dock-panel[hidden] { display: none !important; } .user-dock-panel header { display: none; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; } .user-dock-panel header b { color: var(--accent-lightest); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; } .user-dock-panel header a { color: var(--accent-lighter); font-size: 11px; font-weight: 900; text-decoration: none; } .user-dock-panel iframe, .user-dock-html { width: 100%; min-height: 120px; height: 260px; border: 1px solid rgba(var(--accent-rgb), .18); border-radius: var(--radius-md); background: #070907; overflow: auto; } .user-dock-panel iframe { display: block; } .user-dock-html { padding: 12px; } .user-dock-panel small { display: none; } .user-dock-popout-button { flex: 0 0 auto; border: none; background: none; color: var(--accent-lighter); font-size: 13px; line-height: 1; padding: 2px 4px; cursor: pointer; border-radius: 6px; } .user-dock-popout-button:hover { background: rgba(var(--accent-rgb), .16); } .user-dock-visibility-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; cursor: pointer; } .user-dock-visibility-toggle input { cursor: pointer; accent-color: var(--accent); } .user-dock-panel.collapsed { grid-template-rows: auto; } .user-dock-panel.collapsed iframe, .user-dock-panel.collapsed .user-dock-html { display: block; } .user-dock-panel.collapsed small { display: none; } .user-dock-panel[data-position="bottom"] { grid-row: auto; margin-bottom: 0; } .user-dock-drag-handle { flex: 0 0 auto; padding: 1px 6px; border-radius: 4px; color: var(--muted); cursor: grab; user-select: none; } .user-dock-drag-handle:hover { color: var(--accent-lighter); background: rgba(var(--accent-rgb), .14); } .user-dock-panel.floating { position: fixed; z-index: 60; margin: 0; grid-template-rows: auto minmax(0, 1fr) auto; max-width: none; min-width: 260px; min-height: 180px; max-height: calc(100vh - 24px); resize: both; overflow: auto; box-shadow: 0 20px 50px rgba(0,0,0,.5), var(--shadow-card); } .user-dock-panel.floating iframe, .user-dock-panel.floating .user-dock-html { height: 100%; min-height: 0; } .user-dock-panel.floating.dragging { opacity: .92; cursor: grabbing; } .user-dock-panel.floating.dragging .user-dock-drag-handle { cursor: grabbing; } .user-dock-panel.floating.collapsed { height: auto !important; min-height: 0; resize: none; } .sidebar, .members { border-radius: 0; } .chat { border-radius: 0; } .message { padding: 10px; margin: 2px 6px; border-bottom: 0; } .message:hover { background: rgba(255,255,255,.035); } .channel-row { margin: 2px 0; border-left: 0; } .channel-row.active, .channel-row:hover { box-shadow: inset 3px 0 0 rgba(var(--accent-rgb),.72); } .profile-icon-button, #addChannel, .version-footer button { border-radius: 14px !important; } .avatar, .member-avatar, .voice-avatar, .user-profile-avatar, .avatar-preview { border-radius: 14px !important; } .settings-dialog, .confirm-dialog, .changelog-dialog, .support-dialog, .user-profile-dialog { border-radius: var(--radius-xl); } .radio-toggle { grid-template-columns: minmax(0, 1fr) 28px; } #radioToggleState { width: 22px; height: 22px; display: grid; place-items: center; font-size: 0; } #radioToggleState::before { content: "+"; color: var(--accent-lighter); font-size: 18px; line-height: 1; } .sidebar-radio.expanded #radioToggleState::before { content: "-"; } .connection-status { margin: 0; color: #c0a96e; font-size: 11px; font-weight: 800; min-height: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .connection-status[hidden] { display: none; } .settings-toggle { min-height: 34px; display: flex !important; grid-template-columns: none !important; align-items: center; gap: 10px !important; padding: 8px 10px; border: 1px solid var(--line); background: #10120f; color: var(--ink) !important; cursor: pointer; } .settings-toggle input { width: 18px; height: 18px; accent-color: var(--accent); } .settings-toggle span { color: var(--ink); font-weight: 800; } .sidebar-radio, .profile-radio { display: grid; gap: 9px; margin-top: 8px; padding: 12px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(var(--accent-rgb),.07), rgba(255,255,255,.015)); } .sidebar-radio h3, .profile-radio h4 { margin: 0; color: var(--accent); font-size: 13px; text-transform: uppercase; } .sidebar-radio label, .profile-radio label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; } .sidebar-radio select, .profile-radio select { width: 100%; min-height: 34px; border: 1px solid var(--line); background: #0e100d; color: var(--ink); padding: 7px 8px; } .sidebar-radio input[type="range"], .profile-radio input[type="range"] { width: 100%; accent-color: var(--accent); } .radio-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .radio-actions button { min-height: 34px; border: 1px solid var(--line); background: linear-gradient(180deg, #272a21, #191b16); color: var(--ink); font-weight: 800; cursor: pointer; } .radio-actions button:hover { border-color: rgba(var(--accent-rgb),.7); color: var(--accent-lighter); transform: translateY(-1px); } .radio-actions button:first-child { border-color: rgba(var(--accent-rgb),.5); color: var(--accent-lighter); } #radioStatus { margin: 0; color: #c0a96e; font-size: 11px; min-height: 14px; } .settings-section button.delete-user-button, .settings-section button.change-password-button { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(190, 70, 60, .55); background: rgba(100, 24, 20, .34); color: #ffb4a8; cursor: pointer; } .settings-section button.change-password-button { border-color: rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .16); color: var(--accent-lighter); } .settings-section button.change-password-button:hover:not(:disabled) { border-color: rgba(var(--accent-rgb), .9); background: rgba(var(--accent-rgb), .3); transform: translateY(-1px); } .change-password-button:disabled { opacity: .32; cursor: not-allowed; } .change-password-button .key-icon { width: 15px; height: 15px; background: currentColor; } .settings-section button.delete-user-button:hover:not(:disabled) { border-color: rgba(255, 110, 92, .9); background: rgba(145, 38, 30, .55); box-shadow: 0 0 12px rgba(255, 80, 60, .16); transform: translateY(-1px); } .delete-user-button:disabled { opacity: .32; cursor: not-allowed; } .delete-user-button .trash-icon { width: 15px; height: 15px; background: currentColor; } .sidebar-radio { margin-top: 12px; padding: 10px; } .sidebar-radio h3 { margin: 0; font-size: 12px; } .sidebar-radio select { font-size: 11px; } .sidebar-radio .radio-actions { grid-template-columns: 1fr 1fr; gap: 6px; } .sidebar-radio .radio-actions button { min-height: 30px; font-size: 11px; padding: 6px 4px; } .sidebar-radio #radioStatus { font-size: 11px; line-height: 1.35; } .members-bottom { margin-top: auto; display: grid; gap: 10px; } .members-bottom .sidebar-radio { margin-top: 0; } .members-bottom .version-footer { margin-top: 0; } .camera-icon { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5H8L6.4 7.3A2 2 0 0 1 4.8 8H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-.8a2 2 0 0 1-1.6-.7L16 5Z'/%3E%3Ccircle cx='12' cy='13.5' r='3.4'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5H8L6.4 7.3A2 2 0 0 1 4.8 8H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-.8a2 2 0 0 1-1.6-.7L16 5Z'/%3E%3Ccircle cx='12' cy='13.5' r='3.4'/%3E%3C/svg%3E"); } .camera-toggle.connected { border-color: rgba(98, 208, 120, .72); color: #9dffad; box-shadow: inset 0 -2px 0 rgba(98, 208, 120, .38), 0 0 14px rgba(98, 208, 120, .14); } .camera-card header { border-left: 2px solid rgba(98, 208, 120, .75); } .camera-stop { background: rgba(190, 70, 60, .72) !important; } .radio-toggle { width: 100%; min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; background: transparent; color: var(--accent); padding: 0; font-size: 12px; font-weight: 900; text-transform: uppercase; cursor: pointer; } .radio-toggle b { color: var(--muted); font-size: 10px; text-transform: none; } .radio-toggle:hover b, .radio-toggle:hover span { color: var(--accent-lighter); } .radio-toggle::before { content: "^"; width: 16px; color: var(--accent); } .sidebar-radio.expanded .radio-toggle::before { content: "v"; } .sidebar-radio .radio-body { display: grid; gap: 9px; overflow: hidden; max-height: 260px; opacity: 1; transform-origin: bottom; transition: max-height .18s ease, opacity .16s ease, transform .18s ease, margin-top .18s ease; } .sidebar-radio.collapsed .radio-body { max-height: 0; opacity: 0; transform: translateY(8px); margin-top: 0; pointer-events: none; } .sidebar-radio.expanded .radio-body { margin-top: 8px; } .sidebar-radio.collapsed { padding-top: 6px; padding-bottom: 6px; } .youtube-preview { width: min(360px, 100%); display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 8px; border: 1px solid rgba(var(--accent-rgb), .32); background: linear-gradient(90deg, rgba(var(--accent-rgb),.08), rgba(255,255,255,.02)); color: var(--ink); text-decoration: none; overflow: hidden; } .youtube-preview:hover { border-color: rgba(var(--accent-rgb),.78); box-shadow: 0 0 14px rgba(var(--accent-rgb),.12); transform: translateY(-1px); } .youtube-preview a { display: contents; color: inherit; text-decoration: none; } .youtube-preview img { width: 132px; aspect-ratio: 16 / 9; object-fit: cover; background: #050604; } .youtube-preview span { display: grid; gap: 4px; min-width: 0; } .youtube-preview b { color: #fff4d4; font-size: 13px; } .youtube-preview small { color: var(--muted); font-size: 11px; } .link-preview { width: min(360px, 100%); display: flex; gap: 10px; align-items: center; margin-top: 8px; border: 1px solid rgba(var(--accent-rgb), .32); background: linear-gradient(90deg, rgba(var(--accent-rgb),.08), rgba(255,255,255,.02)); color: var(--ink); text-decoration: none; overflow: hidden; padding: 8px; } .link-preview:hover { border-color: rgba(var(--accent-rgb),.78); box-shadow: 0 0 14px rgba(var(--accent-rgb),.12); transform: translateY(-1px); } .link-preview img { width: 64px; height: 64px; border-radius: 6px; object-fit: cover; background: #050604; flex-shrink: 0; } .link-preview span { display: grid; gap: 4px; min-width: 0; } .link-preview b { color: #fff4d4; font-size: 13px; } .link-preview small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .watch-party-start { grid-column: 1 / -1; justify-self: stretch; min-height: 34px; border: 1px solid rgba(var(--accent-rgb), .56); background: linear-gradient(180deg, rgba(var(--accent-rgb), .24), rgba(var(--accent-rgb), .08)); color: var(--accent-lighter); cursor: pointer; padding: 6px 11px; font-weight: 900; letter-spacing: 0; text-align: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035); } .watch-party-start:hover { border-color: rgba(var(--accent-rgb), .95); background: linear-gradient(180deg, rgba(var(--accent-rgb), .36), rgba(var(--accent-rgb), .14)); color: #fff4d6; transform: translateY(-1px); } .watch-party-start:active { transform: translateY(0); } @media (max-width: 520px) { .youtube-preview { grid-template-columns: 1fr; } .watch-party-start { min-height: 34px; } .youtube-preview a { display: contents; color: inherit; text-decoration: none; } .youtube-preview img { width: 100%; } } .user-profile-actions { width: min(360px, 100%); display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 4px auto 12px; } .user-profile-game-invite { width: min(360px, 100%); display: flex; justify-content: center; gap: 8px; margin: 0 auto 12px; } .user-profile-game-invite select { min-height: 34px; border: 1px solid var(--line); background: #11130f; color: var(--ink); padding: 0 8px; } .user-profile-game-invite button { min-height: 34px; padding: 0 16px; border: 1px solid rgba(var(--accent-rgb), .65); background: rgba(var(--accent-rgb), .12); color: var(--accent-lighter); font-weight: 800; cursor: pointer; } .user-profile-game-invite button:hover:not(:disabled) { background: rgba(var(--accent-rgb), .22); } .minigame-status-text { text-align: center; font-weight: 800; color: var(--accent-lighter); } .minigame-board { --minigame-cols: 3; display: grid; grid-template-columns: repeat(var(--minigame-cols), 1fr); gap: 4px; width: min(360px, 100%); margin: 12px auto; } .minigame-cell { aspect-ratio: 1; border: 1px solid var(--line); background: #11130f; color: var(--ink); font-weight: 900; font-size: 1.4rem; display: grid; place-items: center; cursor: pointer; } .minigame-cell:hover:not(:disabled) { border-color: rgba(var(--accent-rgb), .55); } .minigame-cell.player-x { color: var(--accent-lighter); cursor: default; } .minigame-cell.player-o { color: #8fd3ff; cursor: default; } .minigame-tictactoe .minigame-cell { font-size: 2rem; } .game-arena-dialog { width: min(1400px, 96vw); height: min(900px, 92vh); max-width: none; max-height: none; padding: 0; border: 1px solid var(--line); background: #05060a; color: var(--ink); } .game-arena-dialog::backdrop { background: rgba(3, 4, 6, .82); } .game-arena-shell { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; } .game-arena-header { display: flex; align-items: center; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #0c0e10; } .game-arena-vitals { display: flex; flex-direction: column; gap: 4px; width: 180px; } .game-arena-bar { width: 100%; height: 8px; border: 1px solid var(--line); background: #1a1c17; overflow: hidden; } .game-arena-bar-fill { height: 100%; width: 100%; transition: width .15s ease; } .game-arena-bar-fill.health { background: #8fff8f; } .game-arena-bar-fill.fuel { background: #7ec8ff; } .game-arena-weapon { display: flex; gap: 6px; } .game-arena-weapon button { min-height: 30px; padding: 0 10px; border: 1px solid var(--line); background: #11130f; color: var(--muted); cursor: pointer; font-weight: 800; } .game-arena-weapon button.active { border-color: rgba(var(--accent-rgb), .65); color: var(--accent-lighter); background: rgba(var(--accent-rgb), .12); } .game-arena-header .danger-action { margin-left: auto; } .game-arena-volume { display: flex; align-items: center; gap: 6px; color: var(--muted); } .game-arena-volume input[type="range"] { width: 90px; accent-color: var(--accent); } #gameArenaCanvas { flex: 1; width: 100%; min-height: 0; display: block; cursor: crosshair; } .game-arena-killfeed { position: absolute; top: 60px; right: 14px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: rgba(245, 240, 223, .85); text-align: right; pointer-events: none; } .game-arena-scoreboard { position: absolute; top: 60px; left: 14px; display: flex; flex-direction: column; gap: 3px; min-width: 160px; font-size: 12px; pointer-events: none; } .game-arena-score-row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 6px; background: rgba(9, 10, 8, .6); border: 1px solid rgba(var(--accent-rgb), .18); } .game-arena-score-row.me { border-color: rgba(var(--accent-rgb), .6); color: var(--accent-lighter); } .game-arena-help { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); margin: 0; padding: 4px 10px; background: rgba(9, 10, 8, .72); border: 1px solid rgba(var(--accent-rgb), .18); color: rgba(245, 240, 223, .7); font-size: 11px; pointer-events: none; } .user-profile-call, .user-profile-nudge { width: min(260px, 100%); min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(98, 208, 120, .45); background: rgba(98, 208, 120, .10); color: #d7ffdd; font-weight: 900; cursor: pointer; } .user-profile-nudge { border-color: rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .12); color: #ffe2aa; } .user-profile-call:hover:not(:disabled), .user-profile-nudge:hover:not(:disabled) { border-color: rgba(98, 208, 120, .85); background: rgba(98, 208, 120, .18); box-shadow: 0 0 16px rgba(98, 208, 120, .18); transform: translateY(-1px); } .user-profile-nudge:hover:not(:disabled) { border-color: rgba(255, 212, 137, .9); background: rgba(var(--accent-rgb), .20); box-shadow: 0 0 16px rgba(var(--accent-rgb), .22); } .user-profile-call:disabled, .user-profile-nudge:disabled { opacity: .38; cursor: not-allowed; } .user-profile-call .phone-icon { width: 16px; height: 16px; } .user-profile-message { width: min(260px, 100%); min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .12); color: #ffe2aa; font-weight: 900; cursor: pointer; } .user-profile-message:hover:not(:disabled) { border-color: rgba(255, 212, 137, .9); background: rgba(var(--accent-rgb), .20); box-shadow: 0 0 16px rgba(var(--accent-rgb), .22); transform: translateY(-1px); } .user-profile-message:disabled { opacity: .38; cursor: not-allowed; } .message-icon { width: 15px; height: 15px; display: block; background: currentColor; mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-8 8H5.5L3 22l1-3.9A8 8 0 1 1 21 12Z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-8 8H5.5L3 22l1-3.9A8 8 0 1 1 21 12Z'/%3E%3C/svg%3E"); } .direct-call-button { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(98, 208, 120, .28); background: rgba(98, 208, 120, .08); color: #9dffad; cursor: pointer; } .direct-call-button:hover:not(:disabled) { border-color: rgba(98, 208, 120, .75); background: rgba(98, 208, 120, .16); box-shadow: 0 0 12px rgba(98, 208, 120, .14); transform: translateY(-1px); } .direct-call-button:disabled { opacity: .28; cursor: not-allowed; } .phone-icon { width: 15px; height: 15px; display: block; background: currentColor; mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.1 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.1 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E"); } .direct-call-dialog .remote-request-actions button:last-child { border-color: rgba(98, 208, 120, .55); background: rgba(98, 208, 120, .14); color: #d7ffdd; } .chat { grid-template-rows: 64px auto minmax(180px, 1fr) auto; } .screen-stage.active { max-height: clamp(190px, 36vh, 340px); overflow-y: auto; align-content: start; align-items: start; } .screen-stage[data-count="1"] { max-height: clamp(220px, 42vh, 420px); } .screen-stage.many-streams { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; padding-top: 8px; } .screen-stage.crowded-streams { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); max-height: clamp(180px, 34vh, 300px); } .screen-card { align-self: start; min-height: 0; } .screen-card header { min-height: 30px; padding: 5px 8px; } .screen-card video { aspect-ratio: 16 / 9; height: auto; max-height: min(330px, 34vh); object-fit: contain; } .screen-stage.many-streams .screen-card video { max-height: min(210px, 24vh); } .screen-stage.crowded-streams .screen-card video { max-height: min(160px, 20vh); } .screen-wait { min-height: 110px; } .screen-stage.many-streams .screen-wait { min-height: 90px; } .messages { min-height: 0; } .call-channel-row .channel-icon { color: #9dffad; border-color: rgba(98, 208, 120, .42); } .call-channel-row.joined .voice-channel-button { box-shadow: inset 3px 0 0 rgba(98, 208, 120, .75); } .chat-head { grid-row: 1; } .screen-stage { grid-row: 2; } .messages { grid-row: 3; } .composer { grid-row: 4; align-self: end; } .chat { grid-template-rows: 64px auto minmax(0, 1fr) auto; } .composer textarea { min-height: 46px; height: 46px; } .composer button, #imageButton { min-height: 46px; height: 46px; } .message-link { color: #f1b84a; font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .shop-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 50%; margin: 0 4px 0 2px; font-size: 10px; font-weight: 800; line-height: 1; color: #fff; vertical-align: middle; text-shadow: 0 1px 1px rgba(0,0,0,.35); } .message-link:hover { color: #ffd889; text-shadow: 0 0 10px rgba(241, 184, 74, .18); } .composer { grid-template-rows: auto; } .reply-preview { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 9px 11px; border: 1px solid rgba(var(--accent-rgb), .45); border-left: 4px solid rgba(var(--accent-rgb), .95); background: linear-gradient(90deg, rgba(var(--accent-rgb), .17), rgba(var(--accent-rgb), .055)); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } .reply-preview[hidden] { display: none; } .reply-preview div { min-width: 0; display: grid; gap: 2px; } .reply-preview small { color: #f1b84a; font-size: 11px; font-weight: 900; text-transform: uppercase; } .reply-preview b { color: #fff4d6; } .reply-preview span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); } .reply-preview button, .reply-message { border: 1px solid rgba(var(--accent-rgb), .32); background: rgba(var(--accent-rgb), .08); color: var(--ink); cursor: pointer; } .reply-message { width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0; font-size: 13px; line-height: 1; } .reply-icon { width: 14px; height: 14px; display: block; background: currentColor; mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 10 4 15l5 5'/%3E%3Cpath d='M4 15h10a6 6 0 0 0 6-6V8'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 10 4 15l5 5'/%3E%3Cpath d='M4 15h10a6 6 0 0 0 6-6V8'/%3E%3C/svg%3E"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; } .reply-preview button:hover, .reply-message:hover { border-color: rgba(var(--accent-rgb), .8); background: rgba(var(--accent-rgb), .18); } .message-reply-ref { display: grid; grid-template-columns: auto 1fr; gap: 2px 7px; align-items: baseline; max-width: min(620px, 100%); margin: 5px 0 8px; padding: 8px 10px; border: 1px solid rgba(var(--accent-rgb), .38); border-left: 4px solid rgba(var(--accent-rgb), .95); background: linear-gradient(90deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .045)); color: var(--muted); text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025); } .message-reply-ref small { grid-column: 1 / -1; color: #f1b84a; font-size: 11px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; } .message-reply-ref b { color: var(--ink); } .message-reply-ref span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .message.reply-target-flash { background: rgba(var(--accent-rgb), .2); outline: 2px solid rgba(255, 212, 137, .95); outline-offset: 4px; box-shadow: 0 0 24px rgba(var(--accent-rgb), .22); transition: background .25s ease, outline-color .25s ease, box-shadow .25s ease; animation: message-target-pulse 1.35s ease-in-out infinite; } @keyframes message-target-pulse { 0%, 100% { box-shadow: 0 0 18px rgba(var(--accent-rgb), .2); } 50% { box-shadow: 0 0 34px rgba(var(--accent-rgb), .42); } } .message-poll { display: grid; gap: 8px; margin-top: 7px; padding: 12px 14px; border: 1px solid rgba(var(--accent-rgb), .2); border-radius: var(--radius-md); background: rgba(255, 255, 255, .025); max-width: 420px; } .message-poll-question { font-weight: 700; color: var(--ink); } .message-poll-options { display: grid; gap: 6px; } .poll-option { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .03); color: var(--ink); font-size: 0.88rem; text-align: left; cursor: pointer; overflow: hidden; } .poll-option-fill { position: absolute; inset: 0; width: var(--poll-fill, 0%); background: rgba(var(--accent-rgb), .16); transition: width .25s ease; z-index: 0; } .poll-option-label, .poll-option-stats { position: relative; z-index: 1; } .poll-option-stats { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.78rem; } .poll-option.is-voted { border-color: var(--accent); } .poll-option.is-voted .poll-option-fill { background: rgba(var(--accent-rgb), .28); } .message-poll-footer { font-size: 0.76rem; color: var(--muted); } .poll-create-card { display: grid; gap: 12px; } .poll-option-rows { display: grid; gap: 8px; } .scheduled-message-card { display: grid; gap: 12px; } .scheduled-message-rows { display: grid; gap: 8px; max-height: 220px; overflow-y: auto; } .scheduled-message-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255,255,255,.03); } .scheduled-message-row > div { display: grid; gap: 2px; min-width: 0; } .scheduled-message-row b { font-size: 0.82rem; color: var(--accent-lighter); } .scheduled-message-row span { font-size: 0.86rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .message-reactions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } .reaction-chip, .reaction-add { min-width: 28px; height: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid rgba(var(--accent-rgb), .28); background: rgba(11, 13, 10, .68); color: var(--ink); font-weight: 800; line-height: 1; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025); transition: transform .12s ease, border-color .12s ease, background .12s ease, color .12s ease; } .reaction-chip b { color: #f3c05a; font-size: 11px; } .reaction-chip:hover, .reaction-add:hover, .reaction-chip.active { border-color: rgba(var(--accent-rgb), .85); background: rgba(var(--accent-rgb), .16); transform: translateY(-1px); } .reaction-add { color: var(--muted); opacity: .78; } .reaction-add.has-reaction { color: #f3c05a; opacity: 1; } .emoji-picker, .mention-picker { position: absolute; z-index: 60; border: 1px solid rgba(var(--accent-rgb), .55); background: linear-gradient(180deg, rgba(24, 25, 18, .98), rgba(10, 11, 8, .98)); box-shadow: 0 16px 42px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .025); } .emoji-picker { padding: 8px; max-width: 264px; } .emoji-picker[hidden], .mention-picker[hidden] { display: none; } .emoji-picker-quick { display: grid; grid-template-columns: repeat(5, 36px); gap: 5px; } .emoji-picker-more { width: 36px; height: 32px; font-size: 18px; line-height: 1; } .emoji-picker-full[hidden] { display: none; } .emoji-picker-full { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(var(--accent-rgb), .25); } .emoji-category-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; } .emoji-picker .emoji-category-tab { width: 30px; height: 28px; font-size: 15px; border-radius: 6px; opacity: .55; } .emoji-category-tab.active { opacity: 1; border-color: rgba(var(--accent-rgb), .9); background: rgba(var(--accent-rgb), .18); } .emoji-category-grid { display: grid; grid-template-columns: repeat(6, 36px); gap: 5px; max-height: 220px; overflow-y: auto; } .emoji-picker button, .mention-picker button, .composer-emoji-button { border: 1px solid rgba(var(--accent-rgb), .32); background: rgba(var(--accent-rgb), .08); color: var(--ink); cursor: pointer; transition: transform .12s ease, border-color .12s ease, background .12s ease; } .emoji-picker button { width: 36px; height: 32px; font-size: 18px; } .emoji-picker button:hover, .mention-picker button:hover, .mention-picker button:focus-visible, .composer-emoji-button:hover { border-color: rgba(var(--accent-rgb), .9); background: rgba(var(--accent-rgb), .18); transform: translateY(-1px); } .composer-emoji-button { min-height: 46px; font-size: 18px; } .scheduled-message-button { width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; margin: auto; font-size: 12px; border-radius: 999px; } .mention-picker { display: grid; gap: 6px; width: min(320px, calc(100vw - 40px)); max-height: 280px; overflow-y: auto; padding: 8px; border-radius: 12px; } .mention-picker button { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 44px; padding: 6px 8px; border-radius: 9px; text-align: left; } .mention-picker span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; } .slash-command-picker button { grid-template-columns: none; grid-template-rows: auto auto; gap: 2px; } .slash-command-picker span { font-weight: 700; color: var(--accent); } .slash-command-picker small { white-space: normal; } .mention-reserved-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 999px; background: rgba(var(--accent-rgb), .16); color: var(--accent); font-size: 14px; } .mention-picker small, .mention-picker p { color: var(--muted); font-size: 12px; } .mention-picker p { margin: 0; padding: 8px; } .mention-avatar { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(var(--accent-rgb), .5); border-radius: 8px; background-size: cover; background-position: center; color: var(--accent-lighter); font-size: 11px; font-weight: 900; } .server-title-area { min-width: 0; flex: 1 1 auto; display: grid; gap: 2px; } .server-title-area.can-rename { cursor: pointer; } .server-title-area.can-rename:hover h1 { color: var(--accent); text-shadow: 0 0 10px rgba(var(--accent-rgb), .18); } .server-title-area h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .direct-call-dialog .settings-card { box-shadow: 0 0 30px rgba(var(--accent-rgb), .16); } .minigame-invite-dialog { width: min(360px, calc(100vw - 32px)) !important; padding: 0; border: 1px solid rgba(var(--accent-rgb), .32); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)), rgba(15, 18, 13, .94); box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 46px rgba(var(--accent-rgb),.2); overflow: visible; } .minigame-invite-dialog .settings-card { position: relative; padding: 26px 22px 22px; display: grid; justify-items: center; gap: 14px; box-shadow: none; } .minigame-invite-dialog .settings-card header { display: block; text-align: center; } .minigame-invite-dialog .settings-card header h2 { font-size: 17px; } .minigame-invite-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; min-height: 0; padding: 0; border-radius: 999px !important; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.22); color: var(--muted); display: grid; place-items: center; cursor: pointer; } .minigame-invite-badge { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 999px; color: var(--accent); background: radial-gradient(circle, rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),.04) 70%); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.35), 0 0 24px rgba(var(--accent-rgb),.28); animation: direct-call-ring 1.4s ease-in-out infinite; } .minigame-invite-icon { width: 24px; height: 24px; display: block; background: currentColor; mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Ccircle cx='8' cy='8' r='1.4' fill='black'/%3E%3Ccircle cx='16' cy='8' r='1.4' fill='black'/%3E%3Ccircle cx='8' cy='16' r='1.4' fill='black'/%3E%3Ccircle cx='16' cy='16' r='1.4' fill='black'/%3E%3Ccircle cx='12' cy='12' r='1.4' fill='black'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Ccircle cx='8' cy='8' r='1.4' fill='black'/%3E%3Ccircle cx='16' cy='8' r='1.4' fill='black'/%3E%3Ccircle cx='8' cy='16' r='1.4' fill='black'/%3E%3Ccircle cx='16' cy='16' r='1.4' fill='black'/%3E%3Ccircle cx='12' cy='12' r='1.4' fill='black'/%3E%3C/svg%3E"); } .minigame-invite-dialog #minigameInviteText { text-align: center; color: var(--muted); font-size: 14px; } .minigame-invite-dialog .remote-request-actions { width: 100%; flex-wrap: nowrap; } .minigame-invite-dialog .remote-request-actions button { flex: 1 1 0; min-height: 42px; font-weight: 800; cursor: pointer; } .minigame-invite-dialog .remote-request-actions button:first-child { border-color: rgba(226, 89, 79, .4); background: rgba(226, 89, 79, .1); color: #ffcfc9; } .minigame-invite-dialog .remote-request-actions button:first-child:hover { border-color: rgba(226, 89, 79, .8); background: rgba(226, 89, 79, .18); box-shadow: 0 0 16px rgba(226, 89, 79, .16); transform: translateY(-1px); } .minigame-invite-dialog .remote-request-actions button:last-child { border-color: rgba(98, 208, 120, .55); background: rgba(98, 208, 120, .14); color: #d7ffdd; } .minigame-invite-dialog .remote-request-actions button:last-child:hover { border-color: rgba(98, 208, 120, .85); background: rgba(98, 208, 120, .22); box-shadow: 0 0 16px rgba(98, 208, 120, .18); transform: translateY(-1px); } .minigame-invite-dialog .remote-request-actions.single-action { justify-content: center; } .minigame-invite-dialog .remote-request-actions.single-action button:last-child { flex: none; width: min(220px, 100%); } .member-game { display: inline-flex; align-items: center; gap: 3px; width: fit-content; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent-lighter); font-size: 9.5px; font-weight: 800; margin-top: 2px; padding: 1px 6px 1px 5px; border: 1px solid rgba(var(--accent-rgb),.28); border-radius: 999px; background: linear-gradient(90deg, rgba(var(--accent-rgb),.14), rgba(var(--accent-rgb),.04)); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.06) inset, 0 2px 6px rgba(0,0,0,.16); transition: box-shadow .15s ease, border-color .15s ease; } .member-button:hover .member-game { border-color: rgba(var(--accent-rgb),.45); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.1) inset, 0 0 10px rgba(var(--accent-rgb),.22); } .member-game img { width: 12px; height: 12px; border-radius: 3px; } .member-game::before { content: "spielt "; color: var(--muted); font-weight: 700; } .user-profile-game { color: var(--accent-lighter); font-weight: 800; } .user-profile-game.empty { color: var(--muted); font-weight: 700; } .member-activity { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0; margin-top: 2px; } .member-activity .member-game, .member-activity .member-radio { max-width: 170px !important; min-height: 18px; display: inline-flex !important; align-items: center; gap: 5px; overflow: hidden; padding: 2px 7px !important; border-radius: 999px; border: 1px solid rgba(255,255,255,.08) !important; background: rgba(255,255,255,.045) !important; box-shadow: none !important; color: rgba(255, 239, 205, .88) !important; font-size: 10.5px !important; font-weight: 750 !important; line-height: 1.1; white-space: nowrap; text-overflow: ellipsis; } .member-activity .member-game::before { content: none !important; } .member-activity .member-game img { width: 14px; height: 14px; border-radius: 4px; object-fit: cover; flex: 0 0 auto; } .member-activity .member-game span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .member-activity .member-game .member-game-timer { flex: 0 0 auto; padding-left: 5px; border-left: 1px solid rgba(255,255,255,.13); color: var(--accent-lighter); font-size: 9px; font-weight: 850; line-height: 1; } .member-activity .member-radio { color: rgba(255, 212, 137, .9) !important; } .member-activity .radio-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent-light); box-shadow: 0 0 8px rgba(255, 189, 78, .45); flex: 0 0 auto; } .member-activity .member-radio.is-spotify { color: rgba(160, 240, 170, .95) !important; } .spotify-icon { width: 12px; height: 12px; flex: 0 0 auto; background: #1ed760; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm5.5 17.3a.75.75 0 0 1-1.03.26c-2.82-1.72-6.37-2.11-10.55-1.16a.75.75 0 1 1-.33-1.46c4.58-1.04 8.5-.6 11.65 1.32.36.22.47.68.26 1.04Zm1.47-3.27a.94.94 0 0 1-1.29.31c-3.23-1.98-8.15-2.56-11.97-1.4a.94.94 0 1 1-.55-1.8c4.36-1.32 9.78-.68 13.5 1.6.44.27.58.85.31 1.29Zm.13-3.4C15.98 8.5 9.9 8.3 6.3 9.4a1.13 1.13 0 1 1-.66-2.16c4.13-1.25 11-1 15.28 1.53a1.13 1.13 0 1 1-1.52 1.66Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm5.5 17.3a.75.75 0 0 1-1.03.26c-2.82-1.72-6.37-2.11-10.55-1.16a.75.75 0 1 1-.33-1.46c4.58-1.04 8.5-.6 11.65 1.32.36.22.47.68.26 1.04Zm1.47-3.27a.94.94 0 0 1-1.29.31c-3.23-1.98-8.15-2.56-11.97-1.4a.94.94 0 1 1-.55-1.8c4.36-1.32 9.78-.68 13.5 1.6.44.27.58.85.31 1.29Zm.13-3.4C15.98 8.5 9.9 8.3 6.3 9.4a1.13 1.13 0 1 1-.66-2.16c4.13-1.25 11-1 15.28 1.53a1.13 1.13 0 1 1-1.52 1.66Z'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* The badge's fixed max-width clips long titles -- .member-radio-text is the clipping viewport, .member-radio-text-inner is what actually scrolls. Only animates when JS (applyMemberRadioMarquee) has determined the text genuinely overflows and set --marquee-shift accordingly. */ .member-radio-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .member-radio.is-overflowing .member-radio-text { text-overflow: clip; } .member-radio-text-inner { display: inline-block; white-space: nowrap; } .member-radio.is-overflowing .member-radio-text-inner { animation: member-radio-marquee 7s ease-in-out infinite; } @keyframes member-radio-marquee { 0%, 12% { transform: translateX(0); } 50%, 62% { transform: translateX(var(--marquee-shift, 0px)); } 100% { transform: translateX(0); } } #settingsDialog { width: min(1120px, calc(100vw - 28px)) !important; max-height: calc(100vh - 18px) !important; } #settingsDialog .settings-card { width: 100% !important; max-width: none !important; max-height: calc(100vh - 18px); overflow: hidden; grid-template-rows: auto auto minmax(0, 1fr) auto; } #settingsDialog .settings-tabs { display: flex !important; flex-wrap: wrap; gap: 8px; padding: 10px; } #settingsDialog .settings-tabs button { flex: 1 1 130px; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 14px !important; } #settingsDialog .settings-tab-panel.active { min-height: 0; overflow: auto; padding-right: 4px; } #settingsDialog .game-map-rows .game-map-row { grid-template-columns: 42px minmax(170px, 1fr) minmax(170px, 1fr) minmax(190px, .9fr) minmax(290px, auto) !important; } #settingsDialog .game-map-rows .game-map-actions { min-width: 290px; } #settingsDialog .game-map-rows .game-map-actions button { min-width: 86px !important; } #settingsDialog .game-map-rows .game-map-actions button[data-action="clear-icon"] { min-width: 118px !important; } #settingsDialog .game-map-rows .game-map-actions button[data-action="fetch-icon"] { min-width: 172px !important; } .watch-hidden-actions { display: flex; gap: 8px; align-items: center; } .watch-party-hidden-card .watch-local-end { border-color: rgba(209, 68, 58, 0.85); background: rgba(129, 32, 26, 0.52); color: #fff4dd; } .watch-party-hidden-card .watch-local-end:hover { border-color: #ff6b5f; box-shadow: 0 0 14px rgba(209, 68, 58, 0.32); } .screen-share-invite-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 12px; color: var(--muted); background: linear-gradient(90deg, rgba(103, 185, 101, .12), rgba(13, 15, 11, .96)), #11130f; } .screen-share-invite-card div:first-child { display: grid; gap: 3px; } .screen-share-invite-card b { color: #fff4d6; } .screen-invite-actions { display: flex; gap: 8px; align-items: center; } .screen-share-invite-card button { min-height: 32px; border: 1px solid rgba(var(--accent-rgb), .64); background: linear-gradient(180deg, rgba(var(--accent-rgb), .28), rgba(var(--accent-rgb), .09)); color: var(--accent-lighter); cursor: pointer; padding: 6px 13px; font-weight: 900; } .screen-share-invite-card button:hover { border-color: rgba(var(--accent-rgb), .96); background: linear-gradient(180deg, rgba(var(--accent-rgb), .4), rgba(var(--accent-rgb), .16)); color: #fff4d6; transform: translateY(-1px); } .screen-share-invite-card .screen-ignore { border-color: rgba(209, 68, 58, .72); background: linear-gradient(180deg, rgba(129, 32, 26, .42), rgba(129, 32, 26, .14)); color: #fff4dd; } .screen-close { border-color: rgba(209, 68, 58, .72); background: linear-gradient(180deg, rgba(129, 32, 26, .42), rgba(129, 32, 26, .14)); color: #fff4dd; } .screen-close:hover { border-color: #ff6b5f; box-shadow: 0 0 12px rgba(209, 68, 58, .26); } .members-title { position: relative; display: flex; align-items: center; gap: 6px; } .game-info-tooltip { width: 18px; height: 18px; border: 1px solid rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .08); color: var(--accent-lighter); cursor: help; font-size: 11px; font-weight: 900; line-height: 1; } .game-info-tooltip:hover, .game-info-tooltip:focus { border-color: rgba(var(--accent-rgb), .9); background: rgba(var(--accent-rgb), .18); color: #fff4d6; } .game-info-bubble { position: absolute; top: 24px; left: 0; z-index: 20; width: min(260px, calc(100vw - 28px)); padding: 10px 11px; border: 1px solid rgba(var(--accent-rgb), .5); background: linear-gradient(180deg, rgba(25, 27, 20, .98), rgba(9, 10, 8, .98)); color: var(--ink); box-shadow: 0 14px 34px rgba(0, 0, 0, .45), 0 0 18px rgba(var(--accent-rgb), .12); font-size: 11px; font-weight: 700; line-height: 1.45; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .16s ease, transform .16s ease; } .game-info-tooltip:hover + .game-info-bubble, .game-info-tooltip:focus + .game-info-bubble, .members-title:focus-within .game-info-bubble { opacity: 1; transform: translateY(0); } .member-watch-party { display: inline-grid; justify-items: center; width: fit-content; max-width: 104px; min-height: 16px; margin-top: 0; border: 1px solid rgba(var(--accent-rgb), .48); background: linear-gradient(180deg, rgba(var(--accent-rgb), .2), rgba(var(--accent-rgb), .07)); color: var(--accent-lighter); cursor: pointer; padding: 2px 6px; font-size: 8px; font-weight: 900; line-height: 1; text-align: center; text-transform: uppercase; } .member-watch-main, .member-watch-room { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .member-watch-room { color: #d9c9a6; font-size: 8px; text-transform: none; } .member-watch-party:hover, .member-watch-party:focus { border-color: rgba(var(--accent-rgb), .95); background: linear-gradient(180deg, rgba(var(--accent-rgb), .34), rgba(var(--accent-rgb), .13)); color: #fff4d6; box-shadow: 0 0 8px rgba(var(--accent-rgb), .14); } .member-watch-party.joined { border-color: rgba(98, 208, 120, .42); color: var(--green); background: rgba(98, 208, 120, .08); } .member-watch-party.locked, .member-watch-party:disabled { border-color: rgba(167, 155, 121, .28); background: rgba(167, 155, 121, .06); color: rgba(214, 203, 169, .55); cursor: not-allowed; box-shadow: none; } .member-watch-party.locked:hover, .member-watch-party:disabled:hover { border-color: rgba(167, 155, 121, .28); background: rgba(167, 155, 121, .06); color: rgba(214, 203, 169, .55); transform: none; } .member-watch-party.locked .member-watch-room, .member-watch-party:disabled .member-watch-room { color: rgba(217, 201, 166, .52); } @keyframes chat-layer-drift { 0%, 100% { transform: translate3d(-28px, 0, 0) scale(1); opacity: .62; } 50% { transform: translate3d(28px, -12px, 0) scale(1.02); opacity: .78; } } @keyframes chat-energy-sweep { from { background-position: 0 10%, 100% 75%, -170% 0, 0 0; } to { background-position: 10% 24%, 88% 58%, 170% 0, 56px 0; } } @keyframes chat-scanline-slide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 32px, 0); } } /* ARC motion layer */ @keyframes grid-drift { from { background-position: 0 0, 0 0; } to { background-position: 46px 46px, 46px 46px; } } @keyframes panel-breathe { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 0 0 rgba(var(--accent-rgb),0); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 18px rgba(var(--accent-rgb),.028); } } @keyframes live-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(98,208,120,.22), 0 0 7px rgba(98,208,120,.55); } 50% { box-shadow: 0 0 0 3px rgba(98,208,120,0), 0 0 13px rgba(98,208,120,.72); } } @keyframes amber-scan { from { transform: translateX(-145%); opacity: 0; } 20% { opacity: .2; } 58% { opacity: .08; } to { transform: translateX(145%); opacity: 0; } } .sidebar, .members, .chat-head, .composer, .sidebar-radio, .version-footer, .watch-party-card, .screen-share-card { animation: panel-breathe 11s ease-in-out infinite; } .channel, .voice-channel-button, .call-channel-row, .member, .message, .revision-entry, .profile-icon-button, .member-watch-party, .message-link, .button-link, .composer button, .radio-actions button, .watch-control-bar button, .profile-social-row, .watch-party-hidden-card, .screen-share-invite-card { transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, opacity .16s ease, filter .16s ease; } .channel:hover, .voice-channel-button:hover, .call-channel-row:hover, .member-button:hover, .revision-entry:hover, .profile-social-row:hover { transform: translateX(2px); } .message:hover, .revision-entry:hover, .sidebar-radio:hover, .watch-party-hidden-card:hover, .screen-share-invite-card:hover { border-color: rgba(var(--accent-rgb),.24); box-shadow: inset 2px 0 0 rgba(var(--accent-rgb),.45), 0 0 14px rgba(var(--accent-rgb),.045); } .channel.active, .voice-channel-row.joined .voice-channel-button, .call-channel-row.joined .voice-channel-button, .member-watch-party.joined { position: relative; overflow: hidden; } .channel.active::after, .voice-channel-row.joined .voice-channel-button::after, .call-channel-row.joined .voice-channel-button::after, .member-watch-party.joined::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 0 42%, rgba(var(--accent-rgb),.1) 48%, transparent 56%); pointer-events: none; animation: amber-scan 6.5s ease-in-out infinite; } .status-dot, .member-status-dot, .voice-speaking-dot, .member-social-link.live::after, .live-dot { animation: live-pulse 2.8s ease-in-out infinite; } .avatar, .member-avatar, .voice-avatar, .profile-avatar, .user-profile-avatar { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease; } .member-button:hover .member-avatar, .message:hover .avatar, .voice-member:hover .voice-avatar, .user-profile-avatar:hover, .profile-avatar:hover { transform: scale(1.035); filter: brightness(1.06); box-shadow: 0 0 12px rgba(var(--accent-rgb),.14); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; } } /* Watch party frame fit override */ .watch-party-card { grid-template-rows: 28px minmax(120px, 1fr) min-content; max-height: min(390px, 36vh); overflow: hidden; } .watch-party-card header { min-height: 28px; padding-block: 5px; } .watch-party-card .youtube-watch-player { width: min(100%, calc((36vh - 82px) * 16 / 9)); max-width: 100%; height: min(260px, calc(36vh - 82px)); min-height: 120px; max-height: 260px; align-self: center; justify-self: center; } .watch-party-card .watch-control-bar { position: relative; bottom: auto; min-height: 34px; max-height: 78px; align-content: center; justify-content: flex-end; gap: 5px; padding: 5px 7px; overflow: hidden; } .watch-volume-control { flex: 0 1 198px; min-width: 160px; min-height: 26px; padding: 2px 6px; font-size: 11px; } .watch-volume-control input { min-width: 58px; max-width: 92px; } .watch-volume-value { min-width: 30px; } .watch-party-card .watch-control-bar button { min-height: 26px; padding: 3px 8px; font-size: 12px; line-height: 1; } @media (max-width: 1180px) { .watch-party-card { max-height: min(340px, 34vh); } .watch-party-card .youtube-watch-player { width: min(100%, calc((34vh - 96px) * 16 / 9)); height: min(220px, calc(34vh - 96px)); max-height: 220px; } .watch-volume-control { order: 0; flex: 0 1 168px; min-width: 142px; } .watch-party-card .watch-control-bar button { padding-inline: 7px; } } /* Resizable media/chat split */ .chat { --media-height: clamp(260px, 46vh, 620px); grid-template-rows: 64px auto auto minmax(0, 1fr) auto; } .screen-stage { grid-row: 2; } .screen-stage.active { height: var(--media-height); max-height: calc(100vh - 150px); min-height: 260px; overflow-y: auto; } .media-resize-handle { grid-row: 3; display: none; height: 10px; cursor: ns-resize; position: relative; z-index: 4; background: linear-gradient(180deg, rgba(var(--accent-rgb),.14), rgba(0,0,0,.2)), #151710; border-top: 1px solid rgba(var(--accent-rgb),.28); border-bottom: 1px solid rgba(0,0,0,.45); touch-action: none; } .screen-stage.active + .media-resize-handle { display: block; } .media-resize-handle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 86px; height: 2px; transform: translate(-50%, -50%); background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.76), transparent); box-shadow: 0 0 12px rgba(var(--accent-rgb),.22); } .media-resize-handle:hover, body.media-split-dragging .media-resize-handle { background: linear-gradient(180deg, rgba(var(--accent-rgb),.28), rgba(0,0,0,.24)), #181a12; } body.media-split-dragging { cursor: ns-resize; user-select: none; } .messages { grid-row: 4; } .composer { grid-row: 5; } /* Resizable media content scaling */ .screen-stage.active { height: var(--media-height); max-height: calc(100vh - 150px); min-height: 260px; grid-auto-rows: minmax(0, 1fr); align-content: stretch; align-items: stretch; } .screen-stage.active .screen-card { min-height: 0; height: 100%; display: grid; grid-template-rows: min-content minmax(0, 1fr); align-self: stretch; overflow: hidden; } .screen-stage.active .screen-card video, .screen-stage.active .screen-wait { width: 100%; height: 100%; max-height: none; min-height: 0; object-fit: contain; } .screen-stage.active .screen-wait { display: grid; place-items: center; } .screen-stage.active[data-count="1"] { grid-template-columns: minmax(0, 1fr); } .screen-stage.active[data-count="1"] .screen-card { max-width: none; justify-self: center; width: 100%; } .screen-stage.active.many-streams { grid-auto-rows: minmax(0, 1fr); } .screen-stage.active.many-streams .screen-card, .screen-stage.active.crowded-streams .screen-card { max-width: none; } .watch-party-card { height: 100%; max-height: none; grid-template-rows: 28px minmax(0, 1fr) min-content; } .watch-party-card .youtube-watch-player { width: min(100%, calc((var(--media-height) - 82px) * 16 / 9)); height: calc(var(--media-height) - 82px); max-width: 100%; max-height: none; min-height: 0; align-self: center; justify-self: center; } .watch-party-card iframe { width: 100%; height: 100%; } .watch-party-card .watch-control-bar { max-height: none; } .screen-stage.active[data-count="1"] .watch-party-card { max-width: 100%; } @media (max-width: 1180px) { .watch-party-card .youtube-watch-player { width: min(100%, calc((var(--media-height) - 96px) * 16 / 9)); height: calc(var(--media-height) - 96px); max-height: none; } } /* Center watch controls under media */ .watch-party-card .watch-control-bar { width: min(100%, calc((var(--media-height) - 82px) * 16 / 9)); justify-self: center; justify-content: center; align-self: end; border-left: 1px solid rgba(var(--accent-rgb),.2); border-right: 1px solid rgba(var(--accent-rgb),.2); } @media (max-width: 1180px) { .watch-party-card .watch-control-bar { width: min(100%, calc((var(--media-height) - 96px) * 16 / 9)); } } .composer { position: relative; grid-template-columns: 46px 46px 46px 46px 46px minmax(0, 1fr) 94px; } @media (max-width: 720px) { .composer { grid-template-columns: 42px 42px 42px 42px 42px minmax(0, 1fr); } } .message.reply-target-flash { position: relative !important; background: rgba(var(--accent-rgb), .24) !important; border-color: rgba(255, 212, 137, .9) !important; outline: 3px solid rgba(255, 212, 137, .98) !important; outline-offset: 5px !important; box-shadow: inset 4px 0 0 var(--accent-lighter), 0 0 38px rgba(var(--accent-rgb), .48) !important; animation: message-target-pulse 1.2s ease-in-out infinite !important; } /* Mobile responsive shell */ .mobile-panel-toggle, .mobile-panel-scrim { display: none; } html { width: 100%; min-width: 0; overflow: hidden; } img, video, iframe, canvas { max-width: 100%; } @media (max-width: 1024px) { :root { --mobile-panel-width: min(86vw, 420px); --mobile-safe-top: env(safe-area-inset-top, 0px); --mobile-safe-right: env(safe-area-inset-right, 0px); --mobile-safe-bottom: env(safe-area-inset-bottom, 0px); --mobile-safe-left: env(safe-area-inset-left, 0px); --arc-active-height: var(--arc-visual-height, 100dvh); } body { width: 100vw; height: var(--arc-active-height); min-width: 0; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr); overflow: hidden; overscroll-behavior: none; } .sidebar-resize-handle, .media-resize-handle { display: none !important; } .chat { grid-column: 1 !important; grid-row: 1 !important; width: 100vw; min-width: 0; height: var(--arc-active-height); min-height: 0; max-height: var(--arc-active-height); grid-template-rows: auto auto auto minmax(0, 1fr) auto !important; padding-left: var(--mobile-safe-left); padding-right: var(--mobile-safe-right); } .chat-head { min-height: 58px; padding: calc(8px + var(--mobile-safe-top)) 10px 8px !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; flex-wrap: nowrap !important; } .chat-head > div:first-of-type { min-width: 0; } .chat-head h2, .chat-head p { max-width: 100% !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-head h2 { font-size: clamp(15px, 4vw, 18px); } .chat-head p { font-size: 11px; } .mobile-panel-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 40px; padding: 7px 10px; border: 1px solid rgba(var(--accent-rgb),.42); border-radius: 14px !important; background: rgba(var(--accent-rgb),.08); color: var(--accent-lighter); font-weight: 900; cursor: pointer; touch-action: manipulation; } .status { min-width: 0; justify-self: end; } .status b { max-width: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .channel-search { grid-column: 1 / -1; order: initial !important; width: 100%; max-width: none !important; min-width: 0; } .channel-search input { width: 100%; min-height: 40px; font-size: 16px; } .channel-search-results { left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; max-height: min(52dvh, 420px); overflow: auto; } .sidebar, .members { position: fixed !important; top: 0; bottom: 0; z-index: 82; width: var(--mobile-panel-width) !important; min-width: 0; max-width: var(--mobile-panel-width); height: var(--arc-active-height); max-height: none !important; display: grid !important; background: linear-gradient(180deg, rgba(19,21,15,.98), rgba(11,13,11,.98)), #10120d; box-shadow: 0 20px 60px rgba(0,0,0,.55); transition: transform .22s ease, box-shadow .22s ease; will-change: transform; overscroll-behavior: contain; } .sidebar { left: 0; padding-left: var(--mobile-safe-left); grid-template-rows: auto minmax(0, 1fr) auto auto !important; border-right: 1px solid rgba(var(--accent-rgb),.24); border-bottom: 0 !important; transform: translateX(calc(-100% - 18px)); } .members { right: 0; padding-right: var(--mobile-safe-right); grid-template-rows: auto minmax(0, 1fr) auto; border-left: 1px solid rgba(var(--accent-rgb),.24); transform: translateX(calc(100% + 18px)); } body.mobile-channels-open .sidebar, body.mobile-members-open .members { transform: translateX(0); } .mobile-panel-scrim { position: fixed; inset: 0; z-index: 78; border: 0; border-radius: 0 !important; background: rgba(0,0,0,.56); backdrop-filter: blur(2px); cursor: pointer; } body.mobile-channels-open .mobile-panel-scrim, body.mobile-members-open .mobile-panel-scrim { display: block; } .sidebar header, .members-head { min-height: 54px; padding-top: calc(10px + var(--mobile-safe-top)) !important; } #channels { max-height: none !important; min-height: 0; display: block !important; overflow-x: hidden !important; overflow-y: auto !important; padding: 10px !important; } .channel-row { width: 100% !important; min-width: 0; } .voice-panel { min-height: 0; max-height: 34dvh; overflow: auto; } .profile { padding-bottom: calc(10px + var(--mobile-safe-bottom)) !important; } .profile-actions { grid-template-columns: repeat(4, minmax(42px, 1fr)) !important; } #memberList { min-height: 0; overflow: auto; padding-bottom: 10px; } .members-bottom { max-height: 42dvh; overflow: auto; padding-bottom: calc(10px + var(--mobile-safe-bottom)); } .sidebar-radio { position: static !important; width: auto !important; margin: 8px; } .messages { min-height: 0; padding: 10px 10px 12px !important; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .message { max-width: 100%; overflow-wrap: anywhere; } .message-image, .message-video, .message-video-wrap { max-width: 100%; } .user-dock-panel { max-height: 34dvh; } .screen-stage.active { --media-height: min(38dvh, 340px); height: var(--media-height) !important; max-height: var(--media-height) !important; min-height: 150px; padding: 8px !important; overflow: auto; } .screen-card { min-width: 0; } .screen-card header { gap: 6px; } .screen-actions { max-width: 100%; overflow-x: auto; } .screen-diagnostics { max-width: calc(100% - 8px); left: 4px; right: auto; bottom: 4px; font-size: 11px; } .composer { grid-template-columns: 44px minmax(0, 1fr) 78px !important; gap: 7px !important; padding: 8px 10px calc(10px + var(--mobile-safe-bottom)) !important; } .composer-emoji-button, #imageButton, .composer button { min-width: 0; min-height: 44px; touch-action: manipulation; } .composer textarea { min-width: 0; width: 100%; font-size: 16px; } .typing-indicator, .reply-preview { grid-column: 1 / -1; } .auth { padding: max(12px, var(--mobile-safe-top)) max(12px, var(--mobile-safe-right)) max(12px, var(--mobile-safe-bottom)) max(12px, var(--mobile-safe-left)); } .auth-card { width: min(100%, 420px); max-height: calc(100dvh - 24px); overflow: auto; } } @media (min-width: 701px) and (max-width: 1024px) { .chat-head { grid-template-columns: auto minmax(150px, .8fr) minmax(240px, 1.1fr) auto auto; } .channel-search { grid-column: auto; } .status b { max-width: 70px; } } @media (max-width: 760px) { #settingsDialog, .settings-dialog, .support-dialog, .confirm-dialog, .changelog-dialog, .user-profile-dialog, .direct-call-dialog { width: calc(100vw - 12px) !important; max-width: calc(100vw - 12px) !important; max-height: calc(100dvh - 12px) !important; margin: auto; } #settingsDialog .settings-card, .settings-card, .support-dialog .settings-card, .confirm-card { width: 100% !important; max-width: none !important; max-height: calc(100dvh - 12px) !important; padding: 12px !important; overflow: hidden; } #settingsDialog .settings-tabs, .settings-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; padding: 8px !important; scroll-snap-type: x proximity; } #settingsDialog .settings-tabs button, .settings-tabs button { flex: 0 0 auto !important; min-width: 118px; scroll-snap-align: start; } #settingsDialog .settings-tab-panel.active, .settings-tab-panel.active, .support-dialog .ticket-list-panel, .revision-list { min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; } .settings-section, .support-dialog .ticket-detail-panel, .support-dialog .ticket-list-panel { min-width: 0; } .settings-section input, .settings-section textarea, .settings-section select, .settings-section button, .support-dialog input, .support-dialog textarea, .support-dialog select, .support-dialog button { max-width: 100%; min-height: 42px; } .settings-actions, .radio-actions, .ticket-actions, .screen-invite-actions { flex-wrap: wrap; } #settingsDialog .game-map-rows .game-map-row, .game-map-row, .radio-admin-row, .role-row, .ticket-layout, .support-dialog .support-layout { grid-template-columns: minmax(0, 1fr) !important; } #settingsDialog .game-map-rows .game-map-actions, .game-map-actions { min-width: 0 !important; width: 100%; display: flex; flex-wrap: wrap; } .game-map-actions button, .radio-actions button, .ticket-actions button { flex: 1 1 130px; } } @media (max-width: 520px) { :root { --mobile-panel-width: min(92vw, 330px); } .chat-head { grid-template-columns: auto minmax(0, 1fr) auto; } .chat-head .status { display: none; } .mobile-panel-toggle { padding-inline: 8px; font-size: 12px; } .composer { grid-template-columns: 42px minmax(0, 1fr) !important; } .composer button[type="submit"] { grid-column: 1 / -1; } .screen-stage.active { --media-height: min(34dvh, 280px); } .profile-actions { grid-template-columns: repeat(3, minmax(42px, 1fr)) !important; } } @media (max-width: 1024px) { *, *::before, *::after { box-sizing: border-box; } button, input, textarea, select { font-size: 16px; } button, a, input, textarea, select, .channel, .member-button { touch-action: manipulation; } .mobile-panel-toggle:active, .channel:active, .member-button:active, .composer button:active { transform: scale(.98); } body.mobile-channels-open, body.mobile-members-open { touch-action: none; } .sidebar, .members, .messages, .settings-tab-panel.active, .support-dialog .ticket-list-panel, .support-dialog .ticket-detail-panel { -webkit-overflow-scrolling: touch; } .member-button, .channel, .voice-channel-button { min-height: 46px; } .members-head, .members-title, .stream-viewer-total { min-width: 0; } .members-title h3, .stream-viewer-total, .member-name, .member-activity, .radio-status-line, .channel span, .voice-channel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .emoji-picker, .mention-picker { left: 10px !important; right: 10px; bottom: calc(100% + 8px) !important; width: auto !important; max-width: none; max-height: min(42dvh, 320px); border-radius: 16px; } .emoji-picker-quick, .emoji-category-grid { grid-template-columns: repeat(auto-fit, minmax(38px, 1fr)); } .emoji-category-grid { max-height: min(30dvh, 220px); } .emoji-picker button { width: 100%; min-height: 40px; } .mention-picker button { min-height: 48px; } .user-profile-actions, .auth-actions, .profile-section .settings-actions { flex-wrap: wrap; } .user-profile-actions button, .auth-actions button, .profile-section .settings-actions button { flex: 1 1 140px; } .user-profile-socials, .ticket-summary, .ticket-header { grid-template-columns: minmax(0, 1fr) !important; } .message, .message p, .message a, .ticket-reply, .settings-message, .auth-error { overflow-wrap: anywhere; } } @media (max-width: 380px) { .chat-head { gap: 6px; } .mobile-panel-toggle { min-width: 38px; padding-inline: 7px; } .chat-head h2 { font-size: 14px; } .composer { padding-inline: 8px !important; } } .stream-recommendation, .backup-status-card { display: grid; gap: 4px; padding: 12px; border: 1px solid rgba(var(--accent-rgb),.22); border-radius: 16px; background: linear-gradient(135deg, rgba(var(--accent-rgb),.14), rgba(255,255,255,.025)); } .stream-recommendation b, .backup-status-card b { color: #fff4d6; } .stream-recommendation span, .backup-status-card span, .backup-status-card small { color: var(--muted); } .event-bot-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; padding: 12px; margin-top: 10px; border: 1px solid rgba(var(--accent-rgb),.22); border-radius: 16px; background: linear-gradient(135deg, rgba(var(--accent-rgb),.14), rgba(255,255,255,.025)); } .event-bot-status span { display: grid; gap: 2px; } .event-bot-status b { color: #fff4d6; font-size: 12px; text-transform: uppercase; } .event-bot-preview { display: grid; gap: 6px; } .event-bot-preview-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(131, 101, 42, .3); border-radius: 10px; background: rgba(255,255,255,.02); } .event-bot-preview-row b { color: #fff4d6; } .event-bot-preview-row span { color: var(--muted); flex: 1; } .event-bot-preview-row small { color: var(--soft); text-transform: uppercase; font-size: 10px; } .stream-mode-grid, .stream-settings-grid, .admin-dashboard-cards { display: grid; grid-template-columns: 1fr; gap: 14px; } .stream-settings-grid { margin: 12px 0 8px; } .stream-mode-grid button, .admin-dashboard-cards article { display: grid; gap: 5px; align-content: center; min-height: 70px; min-width: 0; padding: 12px 13px; border: 1px solid rgba(var(--accent-rgb),.18); border-radius: 16px !important; background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.018)), rgba(8, 10, 7, .42); color: var(--ink); position: relative; overflow: hidden; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease, background .16s ease; } .admin-dashboard-cards article::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.55), transparent); opacity: 0; transition: opacity .16s ease; } .admin-dashboard-cards article:hover { border-color: rgba(var(--accent-rgb),.4); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.32), 0 0 0 1px rgba(var(--accent-rgb),.12); } .admin-dashboard-cards article:hover::before { opacity: 1; } .stream-mode-grid button { cursor: pointer; text-align: left; } .stream-mode-grid button.active { border-color: rgba(var(--accent-rgb),.82); background: linear-gradient(180deg, rgba(var(--accent-rgb),.26), rgba(var(--accent-rgb),.08)); box-shadow: 0 0 18px rgba(var(--accent-rgb),.16); } .stream-mode-grid span, .admin-dashboard-cards span { color: var(--muted); font-size: 12px; } .admin-dashboard-cards article b { color: var(--accent-lighter); font-size: clamp(16px, 1.25vw, 21px); font-variant-numeric: tabular-nums; line-height: 1.16; min-width: 0; overflow-wrap: anywhere; word-break: break-word; } .admin-dashboard-cards article.accent-card b { background: linear-gradient(135deg, var(--accent-lightest), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .admin-dashboard-cards .dashboard-section { display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(var(--accent-rgb),.16); border-radius: 20px; background: radial-gradient(circle at top left, rgba(var(--accent-rgb),.08), transparent 44%), rgba(255,255,255,.018); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); } .admin-dashboard-cards .dashboard-section h3 { margin: 0; display: flex; align-items: center; gap: 8px; color: #ffe0a0; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .admin-dashboard-cards .dashboard-section h3::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-lighter), var(--accent)); box-shadow: 0 0 8px rgba(var(--accent-rgb),.65); flex: none; } .admin-dashboard-cards .dashboard-section > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .admin-dashboard-cards .dashboard-section.host-section > div { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .dashboard-growth-charts { grid-template-columns: 1fr !important; } .dashboard-growth-chart { display: grid; gap: 6px; } .dashboard-growth-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; } .dashboard-growth-chart-head b { color: var(--ink); } .dashboard-growth-chart-head span { color: var(--muted); font-variant-numeric: tabular-nums; } .dashboard-growth-chart svg { display: block; width: 100%; height: 70px; } .admin-dashboard-cards .dashboard-section.host-section > .speedtest-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .speedtest-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .speedtest-controls .compact-toggle { min-height: 34px; padding: 6px 10px; border: 1px solid rgba(var(--accent-rgb), .22); border-radius: 999px; background: rgba(0,0,0,.22); font-size: 12px; } .speedtest-controls .compact-field { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 8px; border: 1px solid rgba(var(--accent-rgb), .22); border-radius: 999px; background: rgba(0,0,0,.22); color: var(--muted); font-size: 12px; } .speedtest-controls .compact-field input { width: 70px; min-height: 24px; padding: 2px 8px; border-radius: 999px; text-align: center; } .speedtest-controls button { min-height: 34px; padding: 7px 13px; border-radius: 999px; } .admin-dashboard-cards article.wide-card { grid-column: span 2; } .admin-dashboard-cards article.accent-card { border-color: rgba(255, 203, 112, .4); background: linear-gradient(135deg, rgba(var(--accent-rgb),.2), rgba(255,255,255,.025)), rgba(8, 10, 7, .46); box-shadow: 0 0 22px rgba(var(--accent-rgb),.1); } .admin-dashboard-cards article.danger-card { border-color: rgba(226, 89, 79, .48); background: linear-gradient(135deg, rgba(226, 89, 79, .15), rgba(255,255,255,.02)), rgba(8, 10, 7, .46); } .admin-dashboard-cards article.danger-card b { color: #ff9c90; } .admin-dashboard-cards .dashboard-warning { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; border-color: rgba(226, 89, 79, .5); background: linear-gradient(135deg, rgba(226, 89, 79, .16), rgba(var(--accent-rgb),.06)); animation: dashboard-warning-pulse 2.6s ease-in-out infinite; } @keyframes dashboard-warning-pulse { 0%, 100% { box-shadow: 0 0 0 rgba(226, 89, 79, 0); } 50% { box-shadow: 0 0 20px rgba(226, 89, 79, .22); } } .admin-dashboard-cards .dashboard-warning b { color: #ffb1a8; flex: none; } .admin-dashboard-actions, .backup-actions { display: flex; flex-wrap: wrap; gap: 10px; } .backup-upload-label { display: grid; gap: 6px; flex: 1 1 220px; min-width: 0; } .server-backups-list { display: grid; gap: 8px; } .server-backup-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid rgba(var(--accent-rgb),.16); border-radius: 12px; background: rgba(255,255,255,.025); flex-wrap: wrap; } .server-backup-row span { display: grid; gap: 2px; min-width: 0; } .server-backup-row small { opacity: .7; } .server-branding-preview { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid rgba(var(--accent-rgb),.28); border-radius: 18px; background: rgba(255,255,255,.028); } .branding-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; } .branding-grid label { min-width: 0; } .notification-rows { display: grid; gap: 8px; } .notification-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 64px; padding: 10px; border: 1px solid rgba(var(--accent-rgb),.18); border-radius: 14px !important; background: rgba(255,255,255,.025); color: var(--ink); text-align: left; cursor: pointer; } .notification-row.unread { border-color: rgba(var(--accent-rgb),.62); background: rgba(var(--accent-rgb),.1); } .notification-type { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: rgba(var(--accent-rgb),.18); color: var(--accent-lighter); font-weight: 900; } .notification-row span:last-child { min-width: 0; display: grid; gap: 2px; } .notification-row small, .notification-row em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-style: normal; } .mobile-bottom-nav { display: none; } @media (max-width: 1024px) { /* The bottom nav below covers channels/members navigation too, so the old header pill toggles would just duplicate it -- keep them out of the DOM flow on mobile instead of stacking two nav affordances. */ .mobile-panel-toggle { display: none !important; } .mobile-bottom-nav { position: fixed; left: var(--mobile-safe-left, 0px); right: var(--mobile-safe-right, 0px); bottom: 0; z-index: 74; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 6px 8px calc(6px + var(--mobile-safe-bottom, 0px)); border-top: 1px solid rgba(var(--accent-rgb),.22); background: rgba(10,12,9,.96); backdrop-filter: blur(12px); box-shadow: 0 -18px 38px rgba(0,0,0,.38); } .mobile-bottom-nav button { position: relative; display: grid; place-items: center; gap: 2px; min-width: 0; min-height: 48px; padding: 4px 2px; border: 1px solid transparent; border-radius: 14px !important; background: transparent; color: var(--muted); cursor: pointer; } .mobile-bottom-nav button.active, .mobile-bottom-nav button.has-alerts { border-color: rgba(var(--accent-rgb),.45); background: rgba(var(--accent-rgb),.1); color: var(--accent-lighter); } .mobile-bottom-nav span { font-size: 17px; line-height: 1; } .mobile-bottom-nav b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; } .mobile-bottom-nav em, #notificationBadge { position: absolute; top: 2px; right: 6px; min-width: 17px; height: 17px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: #e2594f; color: #fff; font-size: 10px; font-style: normal; font-weight: 900; } .mobile-bottom-nav em[hidden], #notificationBadge[hidden] { display: none !important; } .composer { padding-bottom: calc(72px + var(--mobile-safe-bottom, 0px)) !important; } .mobile-panel-scrim { bottom: calc(60px + var(--mobile-safe-bottom, 0px)); } } @media (max-width: 520px) { .mobile-bottom-nav { grid-template-columns: repeat(7, minmax(0, 1fr)); padding-inline: 5px; } .mobile-bottom-nav b { font-size: 9px; } .admin-dashboard-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Personal UI preferences */ body::after { opacity: calc(.22 + var(--user-accent-alpha) * .42); } .admin-dashboard-dialog, .admin-tool-dialog { width: min(1180px, calc(100vw - 28px)); max-height: calc(100vh - 24px); } .admin-dashboard-dialog { width: min(1560px, calc(100vw - 28px)); } .admin-dashboard-dialog .settings-card, .admin-tool-dialog .settings-card { width: 100%; max-height: calc(100vh - 28px); overflow: auto; padding: 22px; } .admin-tool-body { display: grid; gap: 14px; } .admin-tool-dialog .admin-dashboard-cards { grid-template-columns: 1fr; } .admin-dashboard-dialog .admin-dashboard-cards { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); align-items: start; } .admin-dashboard-dialog .admin-dashboard-cards > .dashboard-status-grid, .admin-dashboard-dialog .admin-dashboard-cards > .dashboard-warning-summary, .admin-dashboard-dialog .admin-dashboard-cards > .dashboard-growth-section { grid-column: 1 / -1; } .admin-tool-dialog .game-map-row { grid-template-columns: 56px minmax(180px, 1fr) minmax(180px, 1fr) minmax(160px, 1fr) auto auto; } .admin-tool-dialog .backup-actions, .admin-dashboard-dialog .admin-dashboard-actions { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } body.ui-compact .message { grid-template-columns: 36px minmax(0, 1fr); } body.ui-compact .channel, body.ui-compact .member, body.ui-compact .voice-member { min-height: 34px; } body[data-chat-density="relaxed"] .messages { padding-block: 20px 28px; } body[data-chat-density="compact"] .messages { padding-block: 8px 14px; } .message-pin-label, .message-edited { display: inline-flex; margin: 4px 6px 0 0; color: var(--accent-lighter); font-size: 11px; font-weight: 800; } .message-read-receipt { margin-top: 4px; color: var(--muted); font-size: 11px; font-style: italic; } .message-edited { color: var(--muted); margin-left: 8px; font-size: 12px; font-weight: 900; } .pin-message.active { color: var(--accent-lighter); border-color: rgba(var(--accent-rgb),.55); background: rgba(var(--accent-rgb),.14); } .session-rows { display: grid; gap: 10px; } .session-device-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(var(--accent-rgb), .18); border-radius: 12px; background: rgba(255,255,255,.04); color: var(--accent-lighter); } .session-device-icon .icon { width: 17px; height: 17px; } .channel-gallery-dialog { width: min(1220px, calc(100vw - 24px)); } .channel-gallery-card { width: 100%; max-width: 1220px; max-height: calc(100vh - 28px); } .audit-log-dialog { width: min(1180px, calc(100vw - 24px)); } .audit-log-card { width: 100%; max-width: 1180px; max-height: calc(100vh - 28px); } .audit-log-rows { max-height: min(68vh, 720px); overflow: auto; padding-right: 4px; } .audit-log-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .audit-log-filters input { flex: 1 1 150px; min-width: 0; } .channel-gallery-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; max-height: min(70vh, 760px); overflow: auto; padding-right: 4px; } .audit-log-rows { display: grid; gap: 10px; } .channel-gallery-item { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 10px; border: 1px solid rgba(var(--accent-rgb), .16); border-radius: 18px; background: rgba(255,255,255,.035); } .audit-log-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 10px; border: 1px solid rgba(var(--accent-rgb), .16); border-radius: 16px; background: rgba(255,255,255,.035); } .channel-gallery-item img, .channel-gallery-item video, .channel-gallery-file { width: 100%; height: 170px; display: grid; place-items: center; border-radius: 12px; background: #050605; object-fit: cover; color: var(--muted); font-weight: 900; } .channel-gallery-item > div { display: grid; gap: 5px; min-width: 0; } .audit-log-row { align-content: center; } .notification-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; } .notification-toolbar button, .inline-icon-button { width: auto; min-height: 34px; padding: 7px 11px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(var(--accent-rgb),.22); border-radius: 999px; background: rgba(255,255,255,.04); color: var(--ink); font-weight: 900; } .inline-icon-button .icon { width: 15px; height: 15px; } .notification-toolbar button.active, .inline-icon-button:hover { border-color: rgba(var(--accent-rgb),.7); background: linear-gradient(180deg, rgba(255,196,82,.95), rgba(var(--accent-rgb),.86)); color: #151006; } .settings-toggle .inline-icon-button { margin-left: auto; } .channel-gallery-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .channel-gallery-item small, .audit-log-row span, .audit-log-row small { color: var(--muted); } .audit-log-row { grid-template-columns: 1fr auto; align-items: center; } .session-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid rgba(var(--accent-rgb),.16); border-radius: 16px; background: rgba(255,255,255,.025); } .session-row small { display: block; color: var(--muted); overflow-wrap: anywhere; } .session-current { color: var(--green); font-weight: 900; } .onboarding-dialog { width: min(680px, calc(100vw - 28px)); } .onboarding-text { white-space: pre-wrap; line-height: 1.55; color: var(--ink); } .onboarding-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .onboarding-steps span { border: 1px solid rgba(var(--accent-rgb),.2); border-radius: 999px; padding: 7px 8px; color: var(--accent-lighter); text-align: center; font-weight: 800; background: rgba(var(--accent-rgb),.08); } .settings-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .user-profile-details { display: grid; gap: 8px; margin: 10px 0; } .user-profile-details span { display: grid; gap: 3px; padding: 9px 11px; border: 1px solid rgba(255, 181, 57, 0.16); border-radius: 14px; background: rgba(255, 255, 255, 0.035); } .user-profile-details b { color: var(--muted); font-size: 0.78rem; } .user-profile-level { display: grid; gap: 5px; margin: 6px 0 4px; } .user-profile-level-head { display: flex; justify-content: space-between; font-size: 0.78rem; } .user-profile-level-head span:first-child { font-weight: 700; color: var(--accent); } .user-profile-level-head span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; } .user-profile-level-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; } .user-profile-level-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-lighter, var(--accent))); border-radius: inherit; transition: width .3s ease; } .user-profile-spotify { margin: 10px 0; border: 1px solid rgba(30, 215, 96, 0.22); border-radius: 14px; background: rgba(255, 255, 255, 0.025); overflow: hidden; } .user-profile-spotify[hidden] { display: none; } .user-profile-spotify > summary { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 13px; color: var(--ink); cursor: pointer; font-size: 0.82rem; font-weight: 800; list-style: none; user-select: none; } .user-profile-spotify > summary::-webkit-details-marker { display: none; } .user-profile-spotify > summary::before { content: ""; width: 9px; height: 9px; margin-right: 9px; border-radius: 50%; background: #1ed760; box-shadow: 0 0 10px rgba(30, 215, 96, 0.38); } .user-profile-spotify > summary::after { content: "+"; margin-left: auto; color: #1ed760; font-size: 1.05rem; line-height: 1; } .user-profile-spotify[open] > summary::after { content: "-"; } .user-profile-spotify[open] > summary { border-bottom: 1px solid rgba(30, 215, 96, 0.15); } .user-profile-spotify ul { list-style: none; display: grid; gap: 6px; margin: 10px; padding: 0; } .user-profile-spotify li { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid rgba(255, 181, 57, 0.16); border-radius: 14px; background: rgba(255, 255, 255, 0.035); font-size: 0.86rem; } .user-profile-spotify li span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-profile-spotify-link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; cursor: pointer; } .user-profile-spotify-link:hover { color: #1ed760; text-decoration: underline; } .user-profile-spotify-time { color: var(--muted); font-size: 0.74rem; flex: 0 0 auto; } .user-profile-spotify-delete { flex: 0 0 auto; width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; } .user-profile-spotify-delete:hover { background: rgba(226, 87, 74, 0.18); color: #e2574a; } .user-profile-spotify-more { padding: 0 !important; border: none !important; background: none !important; justify-content: center; } .user-profile-spotify-more button { width: 100%; padding: 6px 11px; border: 1px solid rgba(255, 181, 57, 0.16); border-radius: 14px; background: rgba(255, 255, 255, 0.035); color: var(--muted); cursor: pointer; font-size: 0.9rem; letter-spacing: 0.12em; } .user-profile-spotify-more button:hover { color: var(--ink); background: rgba(255, 255, 255, 0.07); } .moderation-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .gallery-filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .gallery-filter-tabs button, .structured-message { border: 1px solid rgba(255, 181, 57, 0.2); border-radius: 14px; background: rgba(255, 181, 57, 0.07); } .gallery-filter-tabs button { padding: 8px 12px; color: var(--text); } .gallery-filter-tabs button.active { background: var(--accent); color: #1a1203; } .structured-message { display: grid; gap: 6px; padding: 10px 12px; } .structured-message span { color: var(--muted); } .action-message { color: var(--accent); font-style: italic; } .channel-group-toggle { width: 100%; text-align: left; border: 0; cursor: pointer; color: var(--muted); background: transparent; } .channel-group-toggle.with-action, .channel-group-toggle { display: flex; align-items: center; justify-content: space-between; } .channel-group-toggle .add-voice-channel, .channel-group-toggle .add-text-channel { min-width: 26px; height: 26px; display: inline-grid; place-items: center; border: 1px solid rgba(255, 181, 57, 0.25); border-radius: 999px; color: var(--accent); } #voiceClipButton.recording { background: #7b231e; color: #fff; box-shadow: 0 0 0 3px rgba(255, 80, 70, 0.22); } .message-audio-wrap { display: grid; gap: 6px; max-width: min(420px, 100%); margin-top: 8px; } .message-audio-wrap audio { width: 100%; } .message-audio-wrap a { color: var(--muted); font-size: 0.82rem; } .moderation-report-rows, .calendar-event-rows, .saved-messages-rows { display: grid; gap: 12px; margin-top: 14px; } .saved-message-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 12px; border: 1px solid rgba(255, 181, 57, 0.18); border-radius: 16px; background: rgba(255, 255, 255, 0.035); cursor: pointer; } .saved-message-row:hover { border-color: rgba(255, 181, 57, 0.4); } .saved-message-row b { color: #fff4d4; } .saved-message-row small { color: var(--muted); margin-left: 8px; font-size: 11px; } .saved-message-row p { margin: 4px 0 0; color: var(--soft); font-size: 13px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .saved-message-remove { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; padding: 2px 6px; } .saved-message-remove:hover { color: var(--danger, #ff6b6b); } .composer-char-count { align-self: center; font-size: 11px; color: var(--muted); padding: 0 2px; white-space: nowrap; } .composer-char-count-low { color: var(--danger, #ff6b6b); } .forward-message-targets { display: grid; gap: 8px; margin-top: 14px; max-height: 50vh; overflow-y: auto; } .forward-target-row { text-align: left; padding: 10px 14px; border: 1px solid rgba(255, 181, 57, 0.18); border-radius: 12px; background: rgba(255, 255, 255, 0.035); color: var(--soft); cursor: pointer; } .forward-target-row:hover { border-color: rgba(255, 181, 57, 0.4); color: #fff4d4; } .calendar-dialog, .personal-calendar-dialog { width: min(1380px, calc(100vw - 24px)); max-height: calc(100vh - 20px); } .calendar-card, .personal-calendar-card { width: 100%; max-height: calc(100vh - 24px); overflow: auto; padding: 24px; } .personal-calendar-card { padding: 18px; } .calendar-card .settings-section, .personal-calendar-card .settings-section { min-height: min(760px, calc(100vh - 140px)); } .personal-calendar-card .settings-section { min-height: auto; padding: 14px 16px; gap: 10px; } .personal-calendar-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 260px); gap: 12px; align-items: start; padding: 10px 12px; border: 1px solid rgba(255, 181, 57, .16); border-radius: 14px; background: linear-gradient(135deg, rgba(255, 181, 57, .1), rgba(255, 255, 255, .025)); } .personal-calendar-head h3 { margin: 0 0 2px; font-size: 14px; } .personal-calendar-head .muted-note { margin: 0; font-size: 12px; line-height: 1.25; } .personal-calendar-reminder { display: grid; gap: 4px; } .personal-calendar-reminder span { display: grid; grid-template-columns: minmax(70px, 1fr) auto; gap: 8px; align-items: center; } .personal-calendar-row.private-entry { border-left: 3px solid rgba(255, 181, 57, .7); } .personal-calendar-row.server-entry { border-left: 3px solid rgba(95, 167, 255, .62); } .personal-calendar-monthbar { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px auto; gap: 7px; align-items: center; margin-top: 8px; } .personal-calendar-monthbar strong { text-align: center; font-size: 17px; color: var(--text); text-transform: capitalize; } .personal-calendar-monthbar button { min-height: 34px; padding: 7px 11px; } .personal-calendar-rows { display: block; max-height: none; overflow: visible; padding-right: 0; } .personal-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 8px; } .personal-calendar-weekday { padding: 4px 8px; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .personal-calendar-weekday.weekend { color: #ffb583; } .personal-calendar-day { display: grid; grid-template-rows: auto minmax(52px, 1fr); align-items: start; gap: 5px; min-height: 92px; padding: 7px; border: 1px solid rgba(255, 181, 57, .1); border-radius: 12px; background: rgba(0, 0, 0, .14); color: var(--text); text-align: left; overflow: hidden; transition: border-color .12s ease, background .12s ease, transform .12s ease; } .personal-calendar-day:hover { border-color: rgba(255, 181, 57, .55); background: rgba(255, 181, 57, .08); transform: translateY(-1px); } .personal-calendar-day.outside-month { opacity: .38; } .personal-calendar-day.weekend { background: rgba(255, 149, 57, .05); border-color: rgba(255, 149, 57, .14); } .personal-calendar-day.has-events { border-color: rgba(255, 181, 57, .32); background: rgba(255, 181, 57, .05); } .personal-calendar-day.today { border-color: rgba(120, 225, 92, .85); background: rgba(120, 225, 92, .1); box-shadow: 0 0 0 1px rgba(120, 225, 92, .35), 0 4px 16px rgba(120, 225, 92, .12); } .personal-calendar-day-number { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 8px; font-size: 12px; font-weight: 900; background: rgba(255, 255, 255, .045); } .personal-calendar-day.weekend .personal-calendar-day-number { color: #ffb583; } .personal-calendar-day.today .personal-calendar-day-number { background: #78e15c; color: #06210a; box-shadow: 0 0 10px rgba(120, 225, 92, .5); } .personal-calendar-day-events { display: grid; gap: 4px; min-width: 0; } .personal-calendar-chip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px; min-width: 0; padding: 3px 5px; border-radius: 8px; border: 1px solid rgba(255, 181, 57, .18); background: rgba(255, 181, 57, .12); cursor: pointer; } .personal-calendar-chip:hover { border-color: rgba(255, 181, 57, .65); filter: brightness(1.08); } .personal-calendar-chip.server-entry { border-color: rgba(95, 167, 255, .38); background: rgba(95, 167, 255, .12); } .personal-calendar-chip.private-entry { border-color: rgba(255, 181, 57, .42); background: rgba(255, 181, 57, .14); } .personal-calendar-chip small { color: var(--muted); font-size: 9px; font-weight: 900; } .personal-calendar-chip b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; } .personal-calendar-chip em { font-style: normal; color: #b7ff9b; } .personal-calendar-more, .personal-calendar-hint { color: var(--muted); } .personal-calendar-more { font-size: 10px; font-weight: 900; padding-left: 4px; } .personal-calendar-dialog .settings-two-col { gap: 10px; } .personal-calendar-dialog label { gap: 4px; } .personal-calendar-dialog input, .personal-calendar-dialog select { min-height: 38px; } .personal-calendar-dialog textarea { min-height: 48px; max-height: 72px; } .personal-calendar-dialog .settings-actions { gap: 8px; } .personal-calendar-dialog .settings-actions button { min-height: 36px; padding: 8px 12px; } .personal-calendar-dialog .settings-message { min-height: 16px; margin: 0; font-size: 12px; } .calendar-manager-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 10px; align-items: center; margin-top: 14px; } .personal-calendar-dialog .calendar-manager-toolbar { gap: 8px; margin-top: 8px; } .inline-toggle { display: inline-flex !important; align-items: center; width: fit-content; gap: 9px; padding: 8px 12px; border: 1px solid rgba(255, 181, 57, .16); border-radius: 999px; background: rgba(255, 255, 255, .025); color: var(--muted); font-weight: 800; } .inline-toggle input { width: 16px; height: 16px; accent-color: var(--accent); } .calendar-filter-tabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .calendar-filter-tabs button { padding: 8px 12px; border-radius: 999px; } .personal-calendar-dialog .calendar-filter-tabs { gap: 5px; } .personal-calendar-dialog .calendar-filter-tabs button { padding: 7px 10px; font-size: 12px; } .calendar-filter-tabs button.active { border-color: rgba(255, 181, 57, .75); background: rgba(255, 181, 57, .18); color: var(--text); } .calendar-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .personal-calendar-dialog .calendar-summary { gap: 6px; margin-top: 6px; } .calendar-summary span { padding: 7px 10px; border: 1px solid rgba(255, 181, 57, .16); border-radius: 999px; color: var(--muted); background: rgba(255, 255, 255, .025); } .personal-calendar-dialog .calendar-summary span { padding: 5px 8px; font-size: 12px; } .calendar-summary b { color: var(--text); } .moderation-report-row, .calendar-event-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 12px; border: 1px solid rgba(255, 181, 57, 0.18); border-radius: 16px; background: rgba(255, 255, 255, 0.035); } .calendar-event-rows { max-height: min(620px, calc(100vh - 430px)); overflow: auto; padding-right: 4px; } .moderation-report-row header, .calendar-event-row header { display: flex; justify-content: space-between; gap: 12px; } .moderation-report-row blockquote { margin: 0; padding: 8px 10px; border-left: 3px solid var(--accent); color: var(--muted); background: rgba(0,0,0,.18); } .calendar-event-row.cancelled { opacity: .55; } .calendar-event-row.past { opacity: .72; } .calendar-event-main { display: grid; gap: 8px; min-width: 0; } .calendar-event-row header > div { display: grid; gap: 2px; } .calendar-event-row p { margin: 0; color: var(--text); } .calendar-event-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: .82rem; } .calendar-status-pill { align-self: start; padding: 5px 9px; border: 1px solid rgba(255, 181, 57, .18); border-radius: 999px; color: var(--muted); background: rgba(0, 0, 0, .18); font-size: .78rem; } .calendar-event-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; max-width: 360px; } .calendar-event-actions button { padding: 8px 11px; border-radius: 12px; } @media (max-width: 760px) { .calendar-manager-toolbar, .calendar-event-row, .personal-calendar-head { grid-template-columns: 1fr; } .personal-calendar-grid { gap: 5px; } .personal-calendar-day { min-height: 102px; padding: 7px; border-radius: 12px; } .personal-calendar-chip { grid-template-columns: 1fr; gap: 1px; padding: 4px 5px; } .personal-calendar-chip small { display: none; } .calendar-filter-tabs, .calendar-event-actions { justify-content: flex-start; } } .admin-dashboard-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; gap: 10px; } .admin-action-group { display: grid; gap: 10px; align-content: start; padding: 13px; border: 1px solid rgba(255, 181, 57, 0.14); border-radius: 16px; background: linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), rgba(8, 10, 7, .35); transition: border-color .16s ease, box-shadow .16s ease; } .admin-action-group:hover { border-color: rgba(255, 181, 57, .3); box-shadow: 0 8px 22px rgba(0,0,0,.28); } .admin-action-group h4 { margin: 0; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 181, 57, .14); color: var(--muted); font-size: 0.74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .admin-action-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: 8px; } .admin-action-row button { min-height: 36px; padding: 8px 10px; border-radius: 12px !important; font-size: 13px; font-weight: 600; } .member.role-superadmin { border-left-color: rgba(255, 181, 57, 0.7); } .member.role-admin { border-left-color: rgba(99, 179, 237, 0.55); } .member.role-moderator { border-left-color: rgba(167, 139, 250, 0.55); } @media (max-width: 760px) { .settings-two-col, .moderation-actions { grid-template-columns: 1fr; } .admin-dashboard-cards .dashboard-section > div, .admin-dashboard-cards .dashboard-section.host-section > div, .admin-dashboard-actions { grid-template-columns: 1fr; } .admin-dashboard-cards article.wide-card { grid-column: auto; } } .chat-head .channel-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; } .header-gallery-button { min-width: 42px; min-height: 34px; padding: 0 10px; display: grid; place-items: center; border: 1px solid rgba(var(--accent-rgb),.28); border-radius: 12px; background: rgba(var(--accent-rgb),.08); color: var(--accent-lighter); font-size: 15px; font-weight: 900; cursor: pointer; } .header-gallery-button .icon { width: 17px; height: 17px; } .header-gallery-button[hidden] { display: none !important; } .chat-head .channel-search-results { grid-column: 1 / -1; } .pinned-messages-bar[hidden], .channel-gallery-bar[hidden], #screenStage:not(.active), #screenStage:not(.active) + .media-resize-handle { display: none !important; } .screen-stage:empty, .screen-stage:empty + .media-resize-handle { display: none !important; } /* Final stream fit guard: received streams must stay inside their box */ .screen-stage.active { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); overflow-x: hidden; } .screen-stage.active .screen-card { min-width: 0 !important; max-width: 100% !important; width: 100%; overflow: hidden; justify-items: center; align-items: center; } .screen-stage.active .screen-card video { display: block; aspect-ratio: auto !important; min-width: 0; min-height: 0; max-width: 100% !important; max-height: calc(var(--media-height) - 40px) !important; width: auto !important; height: auto !important; justify-self: center; align-self: center; object-fit: contain !important; object-position: center center; background: #050604; } /* The grid "fit guard" above uses !important and a higher-specificity selector than the earlier .screen-card:fullscreen rule, so it silently clamped the video back to the normal card height even while the ancestor .screen-card was genuinely the fullscreen element -- video stayed boxed in the top-left of an otherwise black fullscreen viewport. Needs an equally-forceful override here. */ .screen-stage.active .screen-card:fullscreen, .screen-card:fullscreen { width: 100vw !important; height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important; } .screen-stage.active .screen-card:fullscreen video, .screen-card:fullscreen video, .screen-card video:fullscreen { width: 100vw !important; height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important; object-fit: contain !important; } .sidebar, #channels { min-width: 0; max-width: 100%; overflow-x: hidden !important; } #channels *, .channel-row, .channel, .voice-members, .voice-member { box-sizing: border-box; max-width: 100%; } .channel-row, .channel, .channel-group-toggle { width: 100%; } #composer.composer { grid-template-columns: 46px 46px 46px 46px 46px minmax(0, 1fr) 94px !important; } #imageButton, #voiceClipButton, #composerEmojiButton { width: 46px !important; min-width: 46px !important; height: 46px !important; min-height: 46px !important; padding: 0 !important; border-radius: 14px; font-size: 14px !important; } #composerEmojiButton { font-size: 15px !important; } #voiceClipButton { letter-spacing: .02em; } @media (max-width: 760px) { #composer.composer { grid-template-columns: 42px 42px 42px 42px 42px minmax(0, 1fr) !important; } #composer.composer button[type="submit"] { grid-column: 1 / -1; } #imageButton, #voiceClipButton, #composerEmojiButton { width: 42px !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; } } /* App-wide polish pass */ .channel-row { margin: 2px 6px; transition: background .14s ease, box-shadow .14s ease, transform .14s ease; } .channel-row:hover { transform: translateX(1px); } .channel-row.active, .channel-row:hover { box-shadow: inset 3px 0 0 rgba(var(--accent-rgb),.72), 0 4px 14px rgba(0,0,0,.2); } .channel-row.active { background: linear-gradient(90deg, rgba(var(--accent-rgb),.16), rgba(255,255,255,.03)); } .channel-icon, .dm-avatar { transition: box-shadow .14s ease, border-color .14s ease; } .channel-row:hover .channel-icon, .channel-row.active .channel-icon { border-color: rgba(var(--accent-rgb),.55); box-shadow: 0 0 10px rgba(var(--accent-rgb),.16); } .message { border-radius: var(--radius-md); transition: background .14s ease; } .avatar { transition: box-shadow .14s ease; } .message:hover .avatar { box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.25); } .settings-card > header, .confirm-card > header, .admin-dashboard-card > header { position: relative; } .settings-card > header::after, .confirm-card > header::after, .admin-dashboard-card > header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.55), transparent); } .settings-tabs button, [data-settings-tab] { transition: color .14s ease, border-color .14s ease, background .14s ease; } ::selection { background: rgba(var(--accent-rgb),.35); color: #fff6e2; } /* Compact admin dashboard */ .admin-dashboard-dialog .settings-card { padding: 16px 18px; } .admin-dashboard-panel > p.muted-note { margin-bottom: 4px; font-size: 12px; } .admin-dashboard-cards { gap: 10px; } .admin-dashboard-cards .dashboard-section { padding: 10px 12px; gap: 8px; border-radius: 16px; } .admin-dashboard-cards .dashboard-section h3 { font-size: 11px; letter-spacing: .1em; } .admin-dashboard-cards .dashboard-section > div { gap: 8px; } .admin-dashboard-cards article { min-height: 52px; padding: 8px 10px; gap: 2px; border-radius: 12px !important; } .admin-dashboard-cards article b { font-size: clamp(14px, 1.05vw, 18px); } .admin-dashboard-cards span { font-size: 11px; } .admin-dashboard-actions { gap: 8px; } .admin-action-group { padding: 10px; gap: 6px; border-radius: 14px; } .admin-action-group h4 { padding-bottom: 6px; font-size: .7rem; } .admin-action-row { gap: 6px; } .admin-action-row button { min-height: 30px; padding: 6px 9px; font-size: 12px; } /* Private account settings polish */ .avatar-preview { box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.28), 0 0 18px rgba(var(--accent-rgb),.12); transition: box-shadow .16s ease; } .profile-section:hover .avatar-preview { box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.5), 0 0 22px rgba(var(--accent-rgb),.2); } .range-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); } .range-head output { color: var(--accent-lighter); font-weight: 800; font-variant-numeric: tabular-nums; } input[type="range"] { accent-color: var(--accent); } .settings-section .settings-actions button, .settings-section > button { transition: transform .14s ease; } .desktop-client-download, .android-client-download { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } [hidden] { display: none !important; } .voice-debug-toggle { font-size: 10px; font-weight: 900; letter-spacing: .02em; } .voice-debug-card { width: min(920px, 96vw); } .voice-debug-content { display: grid; gap: 12px; } .voice-debug-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; } .voice-debug-grid article { padding: 12px; border: 1px solid rgba(var(--accent-rgb), .25); border-radius: 14px; background: rgba(255,255,255,.035); } .voice-debug-grid b { display: block; color: var(--accent-lighter); font-size: 18px; } .voice-debug-grid span, .voice-debug-details { color: var(--muted); font-size: 12px; } .voice-debug-details p { margin: 4px 0; } .voice-debug-table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 12px; font-size: 12px; } .voice-debug-table th, .voice-debug-table td { padding: 8px 10px; border-bottom: 1px solid rgba(var(--accent-rgb), .16); text-align: left; } .voice-debug-table th { color: var(--accent-lighter); background: rgba(var(--accent-rgb), .08); } .support-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: rgba(0, 0, 0, 0.2); } .support-tabs button { min-height: 42px; border-radius: 10px; background: transparent; color: var(--muted); } .support-tabs button.active { background: var(--accent); color: #111; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); } .support-tab-panel { display: none; gap: 12px; } .support-tab-panel.active { display: grid; } .system-ticket-row .ticket-state-pill { border-color: color-mix(in srgb, var(--accent) 65%, #68a8ff); } @media (max-width: 680px) { .support-tabs { grid-template-columns: 1fr; } } .obs-floating-panel { position: fixed; left: 320px; top: 72px; width: min(980px, calc(100vw - 360px)); height: min(820px, calc(100vh - 110px)); z-index: 1200; display: grid; grid-template-rows: 34px 1fr; border: 1px solid rgba(var(--accent-rgb), .35); border-radius: 16px; background: rgba(8, 11, 7, .96); box-shadow: 0 24px 70px rgba(0,0,0,.55); overflow: hidden; resize: both; touch-action: none; min-width: 520px; min-height: 420px; } .obs-floating-panel[hidden] { display: none; } .obs-floating-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px 0 14px; border-bottom: 1px solid rgba(var(--accent-rgb), .2); background: rgba(0,0,0,.25); color: var(--ink); font-weight: 800; } .obs-floating-head button { width: 26px; height: 26px; padding: 0; border-radius: 50%; } #obsFloatingFrame { width: 100%; height: 100%; border: 0; background: #050704; } @media (max-width: 900px) { .obs-floating-panel { left: 10px; right: 10px; top: 58px; width: calc(100vw - 20px); height: calc(100vh - 76px); min-width: 0; } } .obs-floating-panel.is-dragging { user-select: none; box-shadow: 0 28px 90px rgba(0,0,0,.68), 0 0 0 1px rgba(var(--accent-rgb), .45); } .obs-floating-head { cursor: grab; } .obs-floating-panel.is-dragging .obs-floating-head { cursor: grabbing; } .header-clear-chat-button { display: inline-grid; place-items: center; width: 34px; min-width: 34px; height: 34px; padding: 0; border-radius: 12px; border: 1px solid rgba(255, 190, 64, .28); background: rgba(255, 190, 64, .08); color: rgba(255, 225, 165, .78); box-shadow: inset 0 0 0 1px rgba(0,0,0,.22); transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease; } .header-clear-chat-button:hover, .header-clear-chat-button:focus-visible { border-color: rgba(255, 95, 80, .62); background: rgba(120, 35, 28, .42); color: #ffe9df; transform: translateY(-1px); } .channel-search:has(.header-clear-chat-button:not([hidden])) { grid-template-columns: minmax(180px, 1fr) auto auto; align-items: center; } .channel-search:has(.header-clear-chat-button:not([hidden])) input { grid-column: 1; } .channel-search:has(.header-clear-chat-button:not([hidden])) .header-gallery-button { grid-column: 2; } .channel-search:has(.header-clear-chat-button:not([hidden])) .header-clear-chat-button { grid-column: 3; } .channel-search:has(.header-clear-chat-button:not([hidden])) .channel-search-results { grid-column: 1 / -1; } @media (max-width: 720px) { .channel-search:has(.header-clear-chat-button:not([hidden])) { grid-template-columns: 1fr auto auto; } } /* Was the same box-shadow/border CSS-hack style as the old .trash-icon -- missed in the earlier icon-unification pass because it's a differently named class. Same fix: a real mask icon, same trash-can SVG as .trash-icon, self-contained (own width/height/background/mask-* props) so no HTML change is needed at the two call sites. */ .clear-chat-icon { width: 18px; height: 18px; display: block; background: currentColor; mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E"); } .permission-row span { display: grid; gap: 2px; } .permission-row b { color: var(--text); font-size: 13px; } .permission-row small { color: var(--muted); font-size: 11px; line-height: 1.25; font-weight: 600; } .dashboard-status-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 2px; } .admin-dashboard-cards .dashboard-status-pill { display: grid; gap: 5px; min-height: 74px; border-radius: 18px; padding: 12px 13px; border: 1px solid rgba(var(--accent-rgb), .2); background: rgba(255,255,255,.025); } .admin-dashboard-cards .dashboard-status-pill b { font-size: 13px; color: var(--text); } .admin-dashboard-cards .dashboard-status-pill span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; } .admin-dashboard-cards .dashboard-status-pill.ok { border-color: rgba(106, 255, 126, .42); background: linear-gradient(135deg, rgba(106,255,126,.14), rgba(255,255,255,.018)); } .admin-dashboard-cards .dashboard-status-pill.ok b { color: #b9ffc1; } .admin-dashboard-cards .dashboard-status-pill.warn { border-color: rgba(255, 207, 92, .45); background: linear-gradient(135deg, rgba(255,207,92,.13), rgba(255,255,255,.018)); } .admin-dashboard-cards .dashboard-status-pill.warn b { color: #ffe2a0; } .admin-dashboard-cards .dashboard-status-pill.bad { border-color: rgba(255, 104, 92, .48); background: linear-gradient(135deg, rgba(255,104,92,.16), rgba(255,255,255,.018)); } .admin-dashboard-cards .dashboard-status-pill.bad b { color: #ffaea6; } /* v0.21.82 admin dashboard polish */ .dashboard-healthbar { grid-column: 1 / -1; display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(var(--accent-rgb), .24); border-radius: 20px; background: linear-gradient(135deg, rgba(var(--accent-rgb), .11), rgba(255,255,255,.018)); } .dashboard-healthbar > header { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; } .dashboard-healthbar > header b { color: var(--accent-lightest); font-size: 16px; } .dashboard-healthbar > header span { color: var(--muted); font-size: 12px; } .admin-dashboard-cards .dashboard-status-pill { grid-template-columns: auto 1fr; align-items: center; min-height: 62px; } .admin-dashboard-cards .dashboard-status-pill i { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; font-style: normal; font-size: 11px; grid-row: span 2; } .admin-dashboard-cards .dashboard-status-pill.ok i { color: #9cffaa; background: rgba(106,255,126,.12); box-shadow: 0 0 14px rgba(106,255,126,.24); } .admin-dashboard-cards .dashboard-status-pill.warn i { color: #ffe08a; background: rgba(255,207,92,.12); box-shadow: 0 0 14px rgba(255,207,92,.2); } .admin-dashboard-cards .dashboard-status-pill.bad i { color: #ffaaa2; background: rgba(255,104,92,.13); box-shadow: 0 0 14px rgba(255,104,92,.22); } .dashboard-warning-summary { grid-column: 1 / -1; display: grid; gap: 8px; padding: 14px; border-radius: 18px; border: 1px solid rgba(var(--accent-rgb), .2); background: rgba(255,255,255,.02); } .dashboard-warning-summary b { font-size: 15px; color: var(--accent-lightest); } .dashboard-warning-summary ul { margin: 0; padding-left: 18px; color: var(--text); } .dashboard-warning-summary.ok { border-color: rgba(106,255,126,.32); background: rgba(106,255,126,.055); } .dashboard-warning-summary.bad { border-color: rgba(255,104,92,.45); background: rgba(255,104,92,.075); } .admin-action-group h4 { margin: 0 0 10px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; font-size: 12px; } .admin-action-row { display: flex; flex-wrap: wrap; gap: 8px; } .update-log-panel { white-space: normal; } .update-log-panel pre { margin: 10px 0 0; white-space: pre-wrap; font: inherit; font-family: ui-monospace, Consolas, monospace; font-size: 12px; } .update-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; } .update-step { display: flex; align-items: center; gap: 8px; border: 1px solid rgba(var(--accent-rgb),.18); border-radius: 999px; padding: 8px 10px; background: rgba(0,0,0,.18); color: var(--muted); font-size: 12px; font-weight: 800; } .update-step i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.25); } .update-step.done { color: #c6ffd0; border-color: rgba(106,255,126,.36); } .update-step.done i { background: #6aff7e; box-shadow: 0 0 10px rgba(106,255,126,.45); } .update-step.warn { color: #ffd0ca; border-color: rgba(255,104,92,.42); } .update-step.warn i { background: #ff685c; box-shadow: 0 0 10px rgba(255,104,92,.45); } .role-matrix-card, .admin-permission-help { border: 1px solid rgba(var(--accent-rgb), .18); border-radius: 18px; padding: 14px; background: rgba(255,255,255,.022); } .role-matrix-card header { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; } .role-matrix-card h3 { margin: 0; color: var(--accent-lightest); } .role-matrix-card p, .admin-permission-help span { margin: 0; color: var(--muted); font-size: 12px; } .role-matrix-scroll { overflow: auto; max-width: 100%; } .role-matrix-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; min-width: 760px; } .role-matrix-table th { text-align: center; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; } .role-matrix-table th:first-child, .role-matrix-table td:first-child { text-align: left; } .role-matrix-table td { background: rgba(0,0,0,.18); padding: 9px 10px; text-align: center; border-top: 1px solid rgba(var(--accent-rgb),.1); border-bottom: 1px solid rgba(var(--accent-rgb),.1); } .role-matrix-table td:first-child { border-radius: 12px 0 0 12px; } .role-matrix-table td:last-child { border-radius: 0 12px 12px 0; } .role-matrix-table td b { display: block; color: var(--text); font-size: 12px; } .role-matrix-table td small { display: block; color: var(--muted); font-size: 10.5px; line-height: 1.25; } .matrix-state { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; font-weight: 900; } .matrix-state.on { color: #111; background: var(--accent); } .matrix-state.off { color: var(--muted); background: rgba(255,255,255,.06); } .admin-permission-help { display: grid; gap: 4px; } .admin-permission-help b { color: var(--accent-lightest); } /* v0.21.83 compact role matrix */ .role-matrix-card { padding: 0; overflow: hidden; } .role-matrix-card summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; user-select: none; } .role-matrix-card summary::-webkit-details-marker { display: none; } .role-matrix-card summary span { display: grid; gap: 2px; } .role-matrix-card summary b { color: var(--accent-lightest); } .role-matrix-card summary small { color: var(--muted); font-size: 11px; } .role-matrix-card summary em { color: var(--accent); font-style: normal; font-size: 12px; font-weight: 900; } .role-matrix-card[open] summary em::before { content: "ausblenden"; } .role-matrix-card[open] summary em { font-size: 0; } .role-matrix-card[open] summary em::before { font-size: 12px; } .role-matrix-card > p { padding: 0 14px 10px; } .role-matrix-card .role-matrix-scroll { padding: 0 14px 14px; } /* v0.21.86 modern rounded UI pass */ button, select, input, textarea { border-radius: var(--radius-sm) !important; } button { border-radius: 999px !important; } input, textarea, select { background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(0,0,0,.08)), rgba(8, 10, 7, .86) !important; border-color: rgba(var(--accent-rgb), .22) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.035); } input:focus, textarea:focus, select:focus { outline: none; border-color: rgba(var(--accent-rgb), .72) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12), inset 0 1px 0 rgba(255,255,255,.045); } .auth-card, .settings-card, .confirm-card, .support-card, .admin-dashboard-card, .admin-tool-dialog .settings-card, .screen-card, .camera-card, .server-welcome-panel, .radio-panel, .dock-panel, .obs-floating-panel, .user-context-menu, .status-quick-menu, .message-context-menu { border-radius: var(--radius-xl) !important; background: var(--surface-soft), rgba(18, 21, 15, .94) !important; box-shadow: var(--shadow-soft); } .settings-section, .admin-dashboard-cards article, .dashboard-section, .dashboard-healthbar, .dashboard-warning-summary, .role-matrix-card, .admin-permission-help, .settings-toggle, .ticket-row, .report-row, .calendar-day, .calendar-entry, .film-search-result, .media-gallery-item, .license-status-card, .license-auth-panel, .voice-panel, .voice-member, .voice-channel-row, .member-button, .member-row, .channel-row, .channel, .message, .reply-preview, .pinned-message-chip, .channel-gallery-bar, .pinned-messages-bar { border-radius: var(--radius-md) !important; } .channel-row, .voice-channel-row, .member-button, .voice-member { transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; } .channel-row:hover, .voice-channel-row:hover, .member-button:hover, .voice-member:hover { background: linear-gradient(90deg, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .035) 52%, transparent), rgba(255,255,255,.018) !important; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .14); } .channel-row.active, .voice-channel-row.joined, .member-button.active { background: linear-gradient(90deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .06) 62%, transparent), rgba(255,255,255,.025) !important; box-shadow: inset 3px 0 0 rgba(var(--accent-rgb), .92), inset 0 0 0 1px rgba(var(--accent-rgb), .24); } .message { padding-inline: 12px; transition: background .16s ease, box-shadow .16s ease, transform .16s ease; } .message:hover { background: linear-gradient(90deg, rgba(var(--accent-rgb), .07), rgba(255,255,255,.018)), rgba(0,0,0,.08); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .08); } .composer, .chat-search-wrap, .channel-search-results, .auth-card input, .settings-section input, .settings-section textarea, .settings-section select, .profile-icon-button, .header-gallery-button, .header-clear-chat-button, .clear-channel-confirm-card, .toast, .notification-center, .admin-action-group { border-radius: var(--radius-lg) !important; } .profile-icon-button, .header-gallery-button, .header-clear-chat-button, .voice-panel button, .admin-dashboard-actions button, .admin-action-row button, .settings-tabs button, .calendar-filter-tabs button, .auth-actions button { box-shadow: inset 0 1px 0 rgba(255,255,255,.045); } .settings-tabs button, .calendar-filter-tabs button { border-radius: 999px !important; } .avatar, .voice-avatar, .member-avatar, .server-logo-button, .channel-icon, .auth-mark { border-radius: var(--radius-md) !important; } .avatar img, .voice-avatar img, .member-avatar img, .server-logo-button img, .channel-icon img { border-radius: inherit; } dialog::backdrop { background: radial-gradient(circle at 30% 20%, rgba(var(--accent-rgb), .16), transparent 36%), rgba(0, 0, 0, .62); backdrop-filter: blur(5px); } /* v0.21.87 ARC design-system foundation, toasts and clearer permission rows */ body[data-ui-theme="classic"] { --accent: #f1a832; --accent-rgb: 241, 168, 50; --accent-light: #ffbd4e; --accent-lighter: #ffd489; --accent-lightest: #ffe6ad; } body[data-ui-theme="forest"] { --accent: #8cf04a; --accent-rgb: 140, 240, 74; --accent-light: #9cff5f; --accent-lighter: #c5ff9a; --accent-lightest: #e3ffd0; } body[data-ui-theme="blueprint"] { --accent: #5fb4ff; --accent-rgb: 95, 180, 255; --accent-light: #78c2ff; --accent-lighter: #acd9ff; --accent-lightest: #d8eeff; } .arc-card, .arc-panel, .arc-empty-state, .app-toast { border: 1px solid rgba(var(--accent-rgb), .24); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), rgba(15, 18, 13, .86); box-shadow: var(--shadow-card); } .arc-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .arc-status-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 3px 9px; border: 1px solid rgba(var(--accent-rgb), .28); border-radius: 999px; background: rgba(var(--accent-rgb), .08); color: var(--accent-lightest); font-size: 11px; font-weight: 900; } .arc-empty-state { display: grid; justify-items: center; gap: 7px; padding: 22px; text-align: center; color: var(--muted); } .arc-empty-state b { color: var(--ink); font-size: 15px; } .arc-empty-state small { max-width: 540px; color: var(--muted); } .arc-empty-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 16px; background: rgba(var(--accent-rgb), .12); color: var(--accent-lighter); font-size: 20px; font-weight: 900; } .arc-empty-icon .icon { width: 20px; height: 20px; } .arc-loading { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 22px; color: var(--muted); font-size: 13px; } .arc-loading-spinner { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%; border: 2px solid rgba(var(--accent-rgb), .22); border-top-color: var(--accent); animation: arc-loading-spin .7s linear infinite; } @keyframes arc-loading-spin { to { transform: rotate(360deg); } } .toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 220; display: grid; gap: 10px; width: min(360px, calc(100vw - 28px)); pointer-events: none; } .app-toast { display: grid; grid-template-columns: 12px minmax(0, 1fr) 28px; align-items: center; gap: 10px; padding: 11px 10px 11px 12px; pointer-events: auto; animation: toast-enter .18s ease-out both; } .app-toast.closing { animation: toast-leave .18s ease-in both; } .app-toast-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), .42); } .app-toast.success .app-toast-dot { background: var(--green); } .app-toast.warning .app-toast-dot { background: var(--accent-light); } .app-toast.error .app-toast-dot { background: var(--danger); } .app-toast-text { min-width: 0; color: var(--ink); font-size: 13px; font-weight: 800; } .app-toast button { width: 28px; height: 28px; min-height: 0; padding: 0; border-radius: 999px !important; border-color: rgba(255,255,255,.12); background: rgba(0,0,0,.18); color: var(--muted); } .permission-row { grid-template-columns: auto 26px minmax(0, 1fr); align-items: center; gap: 10px; } .permission-row .permission-row-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 11px; background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .18); color: var(--accent-lightest); font-size: 13px; font-weight: 900; } .permission-row .permission-row-copy { display: grid; gap: 3px; } .permission-row .permission-row-copy em { width: fit-content; padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), .16); background: rgba(var(--accent-rgb), .07); color: var(--accent-lighter); font-size: 10px; font-style: normal; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; } .voice-member.speaking { box-shadow: inset 2px 0 0 var(--green), 0 0 0 1px rgba(98,208,120,.12); } .screen-diagnostics { backdrop-filter: blur(8px); } @keyframes toast-enter { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toast-leave { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(8px) scale(.98); } } @media (max-width: 760px) { .toast-stack { left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); width: auto; } } /* v0.21.88 usability and visual polish */ :focus-visible { outline: 2px solid rgba(var(--accent-rgb), .88); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .16) !important; } button, .member-button, .text-channel-row, .voice-channel, .voice-member, .message, .settings-section, .admin-dashboard-cards article { transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, opacity .16s ease, filter .16s ease; } button:hover:not(:disabled), .text-channel-row:hover, .voice-channel:hover, .member-button:hover, .voice-member:hover { transform: translateY(-1px); } button:active:not(:disabled), .text-channel-row:active, .voice-channel:active, .member-button:active, .voice-member:active { transform: translateY(0) scale(.985); } button:disabled, select:disabled, input:disabled, textarea:disabled { cursor: not-allowed; opacity: .52; filter: saturate(.65); } .chat-head { border-bottom: 1px solid rgba(var(--accent-rgb), .18); box-shadow: 0 8px 28px rgba(0,0,0,.18); } .chat-head h2 { letter-spacing: .01em; } .channel-search input, .composer textarea, .settings-section input, .settings-section select, .settings-section textarea, .auth-card input, .auth-card textarea { box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 0 0 1px rgba(0,0,0,.1); } .channel-search input:focus, .composer textarea:focus, .settings-section input:focus, .settings-section select:focus, .settings-section textarea:focus, .auth-card input:focus, .auth-card textarea:focus { border-color: rgba(var(--accent-rgb), .8) !important; background: linear-gradient(180deg, rgba(var(--accent-rgb), .055), transparent), #090b08; } .settings-section input[type="range"] { accent-color: var(--accent); height: 22px; cursor: pointer; } .personal-ui-settings { gap: 12px; } .ui-preview-card { display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(var(--accent-rgb), .24); border-radius: var(--radius-lg); background: radial-gradient(circle at 92% 12%, rgba(var(--accent-rgb), .18), transparent 38%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)), rgba(10, 12, 9, .72); box-shadow: var(--shadow-card); } .ui-preview-pill { width: fit-content; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), .3); background: rgba(var(--accent-rgb), .12); color: var(--accent-lightest); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; } .ui-preview-message { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px; border-radius: var(--radius-md); background: rgba(0, 0, 0, .2); border: 1px solid rgba(255,255,255,.06); } .ui-preview-avatar { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 16px; color: #15110a; background: linear-gradient(135deg, var(--accent-lightest), var(--accent)); font-weight: 900; } .ui-preview-message b { color: var(--ink); } .ui-preview-message p { margin: 2px 0 0; color: var(--muted); font-size: 12px; } .message { border-radius: var(--radius-lg); } .message:hover { background: linear-gradient(90deg, rgba(var(--accent-rgb), .075), rgba(255,255,255,.018) 42%, transparent), rgba(255,255,255,.01); box-shadow: inset 2px 0 0 rgba(var(--accent-rgb), .42); } .message-actions { border-radius: 999px; padding: 3px; background: rgba(6, 8, 6, .62); border: 1px solid rgba(var(--accent-rgb), .14); backdrop-filter: blur(8px); } .message-actions button { border-radius: 999px !important; } .member-button { min-height: 46px; } .member-button:hover, .voice-member:hover { box-shadow: inset 2px 0 0 rgba(var(--accent-rgb), .46), 0 0 18px rgba(var(--accent-rgb), .055); } .settings-tabs { gap: 8px; } .settings-tabs button { position: relative; overflow: hidden; } .settings-tabs button.active::after, .settings-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 5px; height: 2px; border-radius: 999px; background: var(--accent-lightest); box-shadow: 0 0 12px rgba(var(--accent-rgb), .5); } .settings-section { position: relative; } .settings-section h3 { display: inline-flex; align-items: center; gap: 8px; } .settings-section h3::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), .5); } .dialog-close, dialog button[value="cancel"], .confirm-card header button[value="cancel"] { border-radius: 999px !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; } } /* v0.21.89 personal dock settings moved back into the UI tab */ .personal-dock-settings { display: grid; gap: 10px; padding: 12px; border: 1px solid rgba(var(--accent-rgb), .18); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(var(--accent-rgb), .055), rgba(255,255,255,.012)), rgba(0, 0, 0, .14); } .personal-dock-details { display: grid; gap: 10px; } .personal-dock-display-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (max-width: 680px) { .personal-dock-display-options { grid-template-columns: 1fr; } } .personal-dock-details[hidden] { display: none !important; } /* v0.21.90 targeted polish pass -- buttons, inputs, composer, message copy. Reuses existing tokens only; no new colors/textures introduced. */ /* Every real text input, textarea and select gets the same corner radius. Previously these fell back to the global `border-radius: 0` base rule (see the `button, select, input, textarea { border-radius: 0 }` block near the top of this file), so fields looked squared-off while their surrounding cards/panels were already rounded. This does not affect