/* Syphon Chat in the browser: the Vault's chat look (docs\DESIGN.md, "Chat") on the Vault's own tokens
   (tokens.g.css, made from its WPF theme by chat/tools/WebTheme/make_web_theme.py). Sizes are the Vault's units in
   CSS pixels; the numbers are the XAML's (src\SyphonVault.App\Chat\*.xaml, Themes\*.xaml), side by side with the Vault's
   own pictures (docs\chat\web\parity.md). Only opacity and transforms move (110 ms washes, 180 ms fades, 260 ms
   entrances, the Vault's cubic ease-out), every motion ends by itself, and nothing moves while the system asks for
   reduced motion. */

@font-face { font-family: "Selawik"; src: url("../fonts/selawk.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Selawik"; src: url("../fonts/selawksb.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Selawik"; src: url("../fonts/selawkb.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/PlayfairDisplay-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
    --ui-font: "Segoe UI", "Selawik", system-ui, -apple-system, sans-serif;
    --title-font: "Playfair Display", Georgia, serif;
    --space-accent: #7C5CFF;
    --fast: var(--motion-fast, 110ms);
    --normal: var(--motion-normal, 180ms);
    --slow: var(--motion-slow, 260ms);
    /* ui:Motion's CubicEase (EaseOut, EaseInOut) and ChatPulse's SineEase */
    --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-sine: cubic-bezier(0.37, 0, 0.63, 1);
    color-scheme: dark;

    /* the one set of values of the sign-in's card (weblook1, chat\WEB-LOOK-CONTRACT.md section 2; docs\chat\web\look\
       system.md): every card, dialog, menu and toast takes its corners, edges, panel, shadows, gaps and type from here.
       Named --ui-* so they never meet the Vault's tokens (tokens.g.css has its own --radius-card of 12 for settings cards). */
    --ui-radius-card: 16.5px;          /* cards, hero cards, dialogs: the auth card's */
    --ui-radius-menu: 10px;            /* menus, toasts, notes inside a card */
    --ui-radius-field: 8px;            /* fields and buttons */
    --ui-radius-item: 7px;             /* a menu's entries */
    --ui-edge: #FFFFFF1A;              /* the 1 px edge of a card, a dialog, a menu, a toast */
    --ui-edge-faint: #FFFFFF12;        /* lines inside them: a dialog's band, a menu's separators, a card's foot */
    --ui-edge-field: #FFFFFF26;        /* a field's edge on the panel */
    --ui-panel-top: var(--color-syphon-panel-top, #121220);
    --ui-panel-bottom: var(--color-syphon-panel-bottom, #0C0C18);
    --ui-panel: var(--brush-syphon-panel, linear-gradient(180deg, #121220 0%, #0C0C18 100%));
    /* a menu's glass: the panel at 0.92 with a blur behind it (only menus and dialogs blur) */
    --ui-panel-glass: linear-gradient(180deg, color-mix(in srgb, var(--ui-panel-top) 92%, transparent) 0%, color-mix(in srgb, var(--ui-panel-bottom) 92%, transparent) 100%);
    --ui-band: #0A0A14;                /* a dialog's footer band, a touch deeper than the panel's foot */
    --ui-note: #FFFFFF0A;              /* a note inside a card (the auth card's) */
    --ui-sheen: inset 0 1px 0 #FFFFFF0F;  /* the lit top edge of a panel */
    --ui-shadow-card: 0 30px 80px #000000A0;
    --ui-shadow-menu: 0 18px 44px #000000A6, 0 2px 8px #00000066;
    --ui-shadow-toast: 0 18px 44px #00000099, 0 2px 8px #00000059;
    /* the corner light of a card or dialog, in its kind's colour */
    --ui-light: color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 24%, transparent);
    --ui-light-danger: #F25A6C2E;
    --ui-light-warning: #F5B5442A;
    --ui-light-success: #3DE6A324;
    /* gaps: between a card's parts, inside it, and the phone's */
    --ui-card-gap: 10px;
    --ui-card-pad: 32px 30px 24px;
    --ui-card-pad-x: 30px;
    --ui-card-pad-phone: 26px 20px 20px;
    --ui-card-pad-x-phone: 20px;
    /* type: the auth card's scale */
    --ui-type-title: var(--fontsize-title, 22.6px);
    --ui-type-lead: 15.2px;
    --ui-line-lead: 21px;
    --ui-type-note: 14px;
    --ui-line-note: 20px;
    --ui-type-small: 13.5px;
    --ui-line-small: 19px;
    --ui-type-menu: 14.5px;
    /* Syphon's dim lilac blue (the sign-in's lead, #A5AFDC) a fifth lighter, so every lead on the panel reads at least as
       well as the graphite cards' words did (10.2 to 1 on the panel; they had 9.7) */
    --ui-text-lead: #B7BFE3;
    --ui-text-quiet: var(--brush-text-muted, #8999AA);
    /* a menu's entry under the mouse: Syphon's violet */
    --ui-hover: color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 24%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--brush-bg-window, #0C1018);
    color: var(--brush-text, #F4F3F9);
    font-family: var(--ui-font);
    font-size: 15.2px;
    font-weight: 400;
    line-height: normal;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow: hidden;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; }
/* the keyboard's ring: 2 wide, 1 outside, its corners the control's own */
:focus-visible { outline: 2px solid var(--brush-accent-bright, #8F85F9); outline-offset: 1px; }
img { display: block; }
a { color: inherit; }
::selection { background: color-mix(in srgb, var(--brush-accent, #6C49F9) 55%, transparent); }

.app-root { height: 100dvh; width: 100vw; overflow: hidden; }

/* ── the start ── */
.boot, .state-screen, .auth-screen {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
}

/* ── the ground of every whole-window screen (the loading screen, the sign-in, the states, the invite page) ──
   Syphon's own ground, as the Vault draws it behind its sign-in and behind its chat while signed out (Views\Tools\
   SyphonGround: Brush.Syphon.Ground; a violet light at the top left and a dark purple one at the foot on the right, each
   0.9 of Syphon Tools' 27 % and as large as 0.38 and 0.42 of the window's longer side; a grid of 40 in white at 7 of
   255), with vault.syphon.tools' own still dots (particles.svg, the Syphon UI kit's, linked by the project file: the
   Vault's dot rule, three shades of the violet) and a soft violet light behind the middle, where the card stands (the
   account page's light behind its card). The lights drift slowly to and fro, 46 s each way (the one motion; none
   while the system asks for reduced motion); the grid, the dots and the card stay still. Banned or stopped: the
   Vault's faint red light instead (ChatView's ShowBanned and ShowFailed: the danger red and the violet at 0.32). */
.screen-ground {
    --ground-light-1: var(--color-syphon-violet, #7C3AED);
    --ground-light-2: var(--color-syphon-purple, #6D28D9);
    --ground-light: 24%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--brush-syphon-ground, #080812);
}
.screen-ground::before {
    content: ""; position: absolute; inset: -6%; z-index: -2; pointer-events: none;
    /* the box is 112 % of the window, so its 14.3 % 16.1 % and 82.1 % 94.6 % are the window's 10 % 12 % and 86 % 100 % */
    background:
        radial-gradient(circle at 14.3% 16.1%, color-mix(in srgb, var(--ground-light-1) var(--ground-light), transparent), transparent 38vmax),
        radial-gradient(circle at 82.1% 94.6%, color-mix(in srgb, var(--ground-light-2) var(--ground-light), transparent), transparent 42vmax);
    animation: ground-drift 46s var(--ease-in-out) infinite alternate;
}
.screen-ground::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        url("../art/brand/particles.svg") 0 0 / 900px 900px,
        linear-gradient(var(--color-syphon-grid, #FFFFFF07) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, var(--color-syphon-grid, #FFFFFF07) 1px, transparent 1px) 0 0 / 40px 40px,
        radial-gradient(ellipse min(560px, 86vw) min(420px, 58vh) at 50% 50%, color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 26%, transparent) 0%,
                        color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 8%, transparent) 55%, transparent 100%);
}
.screen-ground.red-light { --ground-light-1: var(--color-danger, #F25A6C); --ground-light-2: var(--color-syphon-violet, #7C3AED); --ground-light: 9%; }
.screen-ground.red-light::after {
    background:
        url("../art/brand/particles.svg") 0 0 / 900px 900px,
        linear-gradient(var(--color-syphon-grid, #FFFFFF07) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, var(--color-syphon-grid, #FFFFFF07) 1px, transparent 1px) 0 0 / 40px 40px;
}
@keyframes ground-drift {
    from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
    to { transform: translate3d(1.5%, 1.2%, 0) scale(1.05); }
}
/* ── the ground of the chat's own panes (weblook1, chat\WEB-LOOK-CONTRACT.md section 2): the main pane's views that are not
   a list of messages (a private conversation not set up, Friends and Find communities with nothing in them, the pane with
   nothing chosen, the community picker, the empty parts of the settings) stand on a calmer Syphon ground: the same two
   lights at a little over half their strength, the grid, the dots, and a soft violet light behind the middle, where a
   centred card stands. It never moves (a pane is read). It is the element's own background, so it holds still while the
   element scrolls: put .pane-ground on the view's own box (the pane, or its scroller) and the card inside it. A list of
   messages never takes it: words stay on the plain ground.
   Its knobs, set beside the class: --ground-light (the corner lights' strength, 13 %), --ground-centre (the light behind
   the card, 18 %; 0% for a view without a centred card), --ground-light-1 (the top left light's colour; a community's
   view may give it var(--space-accent)). */
.pane-ground {
    --ground-light-1: var(--color-syphon-violet, #7C3AED);
    --ground-light-2: var(--color-syphon-purple, #6D28D9);
    --ground-light: 13%;
    --ground-centre: 18%;
    background:
        url("../art/brand/particles.svg") 0 0 / 900px 900px,
        linear-gradient(var(--color-syphon-grid, #FFFFFF07) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, var(--color-syphon-grid, #FFFFFF07) 1px, transparent 1px) 0 0 / 40px 40px,
        radial-gradient(ellipse min(560px, 86vw) min(440px, 58vh) at 50% 50%, color-mix(in srgb, var(--color-syphon-violet, #7C3AED) var(--ground-centre), transparent) 0%,
                        color-mix(in srgb, var(--color-syphon-violet, #7C3AED) calc(var(--ground-centre) / 3), transparent) 55%, transparent 100%),
        radial-gradient(circle at 6% 0%, color-mix(in srgb, var(--ground-light-1) var(--ground-light), transparent), transparent 40vmax),
        radial-gradient(circle at 96% 100%, color-mix(in srgb, var(--ground-light-2) var(--ground-light), transparent), transparent 44vmax),
        var(--brush-syphon-ground, #080812);
    background-attachment: scroll;
}
.boot-mark { width: 64px; height: 64px; }
.boot-title { font-size: 22.6px; font-weight: 600; letter-spacing: .5px; }
.boot-line { color: var(--brush-text-muted, #8999AA); font-size: 14.9px; }
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--brush-chat-flyout, #151C28);
    border: 1px solid var(--brush-danger, #F25A6C);
    color: var(--brush-text, #F4F3F9);
}
#blazor-error-ui .reload { color: var(--brush-accent-label, #978AFB); margin-left: 10px; }

/* ── words, links, chips ── */
.muted { color: var(--brush-text-muted, #8999AA); }
.small { font-size: 13px; }
.icon { flex: 0 0 auto; stroke-width: 2; vertical-align: middle; }
.icon.muted { color: var(--brush-text-muted, #8999AA); }
.icon.faint { color: var(--brush-text-faint, #5C6C84); }
.icon.accent { color: var(--brush-accent-label, #978AFB); }
.link { color: var(--brush-accent-label, #978AFB); text-decoration: none; transition: color var(--fast) var(--ease-out); }
.link:hover { color: var(--brush-chat-link-hot, #B9B0FD); text-decoration: underline; }
/* Chat.Link: lilac words (13 semibold), lighter and underlined under the mouse, one unit lower while pressed */
.link-button { color: var(--brush-accent-label, #978AFB); font-weight: 600; transition: color var(--fast) var(--ease-out); }
.link-button:hover { color: var(--brush-chat-link-hot, #B9B0FD); text-decoration: underline; }
.link-button:active { transform: translateY(1px); }
.link-button.quiet { color: var(--brush-text-muted, #8999AA); font-weight: 400; }
.tag { color: var(--brush-text-muted, #8999AA); font-size: 12px; font-weight: 400; margin-left: 5px; }
/* a quiet chip (the community label after a name, the Friends.Origin): Hover.Light, radius 6, 4 2 8 3 */
.chip {
    display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 6px;
    background: var(--brush-hover-light, #FFFFFF14); color: var(--brush-text-secondary, #B4C6DB); font-size: 11.5px; font-weight: 600;
}
/* Chat.Count: the purple number, 18 high, 11.5 semibold */
.count {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--brush-accent, #6C49F9); color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
}
/* a tile's number: Chat.Count at 22 with the rail's ring of 2, 6 inside the tile's lower right corner */
.badge {
    position: absolute; right: -5px; bottom: -5px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
    background: var(--brush-accent, #6C49F9); color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--brush-chat-rail, #0A0F15);
}
/* Chat.GroupLabel: 11.5 semibold, 1.5 after each letter, muted */
.group-label {
    padding: 18px 16px 7px 20px; font-size: 11.5px; font-weight: 600; letter-spacing: 1.5px;
    color: var(--brush-text-muted, #8999AA); text-transform: uppercase;
}
/* a room group's label with its icon before it (the room groups of 2026-10-11): the icon 14, 7 before the words */
.group-label.with-icon { display: flex; align-items: center; gap: 7px; }
/* a game's own group ("PLAYING NOW") in the game's colour for text (GameItem.AccentTextBrush: its colour, 38 % white) */
.group-label.playing { color: color-mix(in srgb, var(--space-accent) 62%, #fff); }
.label-count { margin-left: 4px; }
.kicker { font-size: 10.5px; font-weight: 600; letter-spacing: 1.8px; color: var(--brush-accent-label, #978AFB); text-transform: uppercase; }
.spacer { flex: 1 1 auto; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brush-chat-voice, #21C246); display: inline-block; margin: 1px 7px 0 0; flex: 0 0 auto; }

.spinner {
    width: 16px; height: 16px; border-radius: 50%; display: inline-block; vertical-align: middle;
    border: 2px solid #FFFFFF33; border-top-color: var(--brush-accent-bright, #8F85F9);
    animation: spin 900ms linear infinite;
}
.spinner.small { width: 12px; height: 12px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── buttons (docs\DESIGN.md, "Buttons"; Themes\Buttons.xaml) ──
   Small 34 (14 at each side, type 14), default 40 (18, 15.2), large 49 (28, 17), semibold, corners of 8. A filled button
   (Primary, Danger, Syphon) is lighter at its top with a light edge along its top, and under the mouse lighter with a
   soft light of its own colour under it (a gradient, never a blur); an outline button's edge is lighter at its top and
   brightens under the mouse; pressed, the fill darkens and the words move down one unit. */
.btn {
    position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 18px; border-radius: 8px; font-size: 15.2px; font-weight: 600; white-space: nowrap; line-height: 1;
    text-decoration: none; color: var(--brush-text, #F4F3F9); background: transparent;
    transition: color var(--fast) var(--ease-out), background-color var(--fast) var(--ease-out);
}
.btn.small { height: 34px; padding: 0 14px; font-size: 14px; }
.btn.small > .icon { width: 15px; height: 15px; }
.btn.large { height: 49px; padding: 0 28px; font-size: 17px; gap: 13px; }
.btn.outline.large, .btn.accent-outline.large { font-size: 16px; gap: 14px; }
.btn.icon-only { width: 34px; padding: 0; }
.btn.icon-only > .icon { width: 16px; height: 16px; }
.btn:active:not(:disabled) { padding-top: 2px; }
.btn:disabled { opacity: .45; }
/* the edge (outline and secondary): a 1 unit ring that takes a gradient */
.btn.outline::after, .btn.secondary::after, .btn.accent-outline::after, .btn.outline-danger::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: var(--edge);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* the filled ones: their fill (with its sheen) under the words, their light under the button */
.btn.primary, .btn.danger, .btn.syphon { color: #fff; }
.btn.primary { --fill: var(--brush-button-primary); --halo: #6C49F9; }
.btn.primary:hover:not(:disabled) { --fill: var(--brush-button-primary-hot); }
.btn.danger { --fill: var(--brush-button-danger); --halo: #D63A51; }
.btn.danger:hover:not(:disabled) { --fill: var(--brush-button-danger-hot); }
.btn.syphon { --fill: var(--brush-syphon-button); --halo: #8B4DF7; width: 100%; }
.btn.syphon:hover:not(:disabled) { --fill: var(--brush-syphon-button-hot); }
.btn.primary::after, .btn.danger::after, .btn.syphon::after {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; border: 1px solid transparent; pointer-events: none;
    background: var(--fill) padding-box, var(--brush-button-sheen) border-box, var(--fill) border-box;
}
.btn.primary::before, .btn.danger::before, .btn.syphon::before {
    content: ""; position: absolute; inset: -2px -9px -12px; z-index: -2; pointer-events: none; opacity: 0;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--halo) 80%, transparent) 0%,
                color-mix(in srgb, var(--halo) 46%, transparent) 60%, transparent 100%);
    transition: opacity var(--normal) var(--ease-out);
}
.btn.primary:hover:not(:disabled)::before, .btn.danger:hover:not(:disabled)::before, .btn.syphon:hover:not(:disabled)::before { opacity: 1; }
.btn.primary:active:not(:disabled)::before, .btn.danger:active:not(:disabled)::before, .btn.syphon:active:not(:disabled)::before { opacity: .6; }
.btn.primary:active:not(:disabled)::after, .btn.danger:active:not(:disabled)::after, .btn.syphon:active:not(:disabled)::after {
    box-shadow: inset 0 0 0 99px var(--brush-button-press, #0000002E);
}
.btn.syphon::before { inset: -2px; filter: blur(8px); opacity: .6; border-radius: 10px; background: var(--fill); }
/* the main button of a hero card or a dialog glows at rest, as the sign-in's does (weblook1); brighter under the mouse */
.hero-actions > .btn.primary:not(:disabled)::before, .hero-actions > .btn.danger:not(:disabled)::before,
.dialog-band > .btn.primary:not(:disabled)::before, .dialog-band > .btn.danger:not(:disabled)::before { opacity: .55; }
.hero-actions > .btn.primary:hover:not(:disabled)::before, .hero-actions > .btn.danger:hover:not(:disabled)::before,
.dialog-band > .btn.primary:hover:not(:disabled)::before, .dialog-band > .btn.danger:hover:not(:disabled)::before { opacity: 1; }
/* Button.Outline: raised graphite, the edge lighter at its top; brighter under the mouse */
.btn.outline { background: var(--brush-button-outline); --edge: var(--brush-button-outline-edge); }
.btn.outline:hover:not(:disabled) { background: var(--brush-button-outline-hot); --edge: var(--brush-button-outline-edge-hot); }
/* Button.Secondary: a purple wash, lilac words, a purple edge lighter at its top; more purple and white words under the mouse */
.btn.secondary { background: var(--brush-button-secondary); --edge: var(--brush-button-secondary-edge); color: var(--brush-button-secondary-text, #CBC2FE); }
.btn.secondary:hover:not(:disabled) {
    background: linear-gradient(var(--brush-button-secondary-hot, #6C49F924), var(--brush-button-secondary-hot, #6C49F924)), var(--brush-button-secondary);
    --edge: var(--brush-accent-bright, #8F85F9); color: #fff;
}
/* Button.Outline.Accent: dark with a purple edge, the purple itself under the mouse */
.btn.accent-outline { background: #121620F0; --edge: var(--brush-border-accent, #45418A); }
.btn.accent-outline:hover:not(:disabled) {
    background: var(--brush-button-outline-hot), #121620F0; --edge: var(--brush-accent, #6C49F9);
}
/* Button.Ghost: words only; a soft wash under the mouse */
.btn.ghost { color: var(--brush-text-secondary, #B4C6DB); }
.btn.ghost:hover:not(:disabled) { background: var(--brush-hover-light, #FFFFFF14); color: var(--brush-text, #F4F3F9); }
/* Button.Outline.Danger: red words on the outline; a red edge and wash under the mouse */
.btn.outline-danger { background: var(--brush-button-outline); --edge: var(--brush-button-outline-edge); color: var(--brush-danger-text, #FFB9C1); }
.btn.outline-danger:hover:not(:disabled) {
    background: linear-gradient(var(--brush-danger-soft, #F25A6C33), var(--brush-danger-soft, #F25A6C33)), var(--brush-button-outline);
    --edge: var(--brush-danger, #F25A6C);
}
.btn.outline:active:not(:disabled), .btn.secondary:active:not(:disabled), .btn.accent-outline:active:not(:disabled),
.btn.ghost:active:not(:disabled), .btn.outline-danger:active:not(:disabled) { box-shadow: inset 0 0 0 99px var(--brush-button-press, #0000002E); }

/* Chat.IconButton: 36, no edge, a round wash under the mouse (Button.Icon.Ghost: secondary words, white under the mouse) */
.icon-button {
    width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    color: var(--brush-text-secondary, #B4C6DB); transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out); flex: 0 0 auto;
}
.icon-button > .icon { width: 19px; height: 19px; }
.icon-button:hover { background: var(--brush-hover-light, #FFFFFF14); color: var(--brush-text, #F4F3F9); }
.icon-button:active { background: linear-gradient(var(--brush-button-press, #0000002E), var(--brush-button-press, #0000002E)), var(--brush-hover-light, #FFFFFF14); }
.icon-button.small { width: 30px; height: 30px; }
.icon-button.small > .icon { width: 17px; height: 17px; }
.icon-button.tiny { width: 22px; height: 22px; }
.icon-button.tiny > .icon { width: 12px; height: 12px; }
.icon-button.glass { background: #0A0F15B3; border: 1px solid #FFFFFF1F; color: var(--brush-text, #F4F3F9); }
.icon-button.glass:hover { background: #0A0F15E6; }
/* Chat.IconToggle: 36 round; quiet while off; Chat.IconToggle.Accent on: a soft purple disc, a purple edge, the icon #B9B0FD */
.icon-toggle {
    width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    color: var(--brush-text-secondary, #B4C6DB); border: 1px solid transparent;
    transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.icon-toggle > .icon { width: 19px; height: 19px; }
.icon-toggle:hover { background: var(--brush-hover-light, #FFFFFF14); color: var(--brush-text, #F4F3F9); }
.icon-toggle:active > .icon { transform: scale(.92); }
.icon-toggle.accent.on { background: var(--brush-toggle-on, #6C49F938); border-color: var(--brush-toggle-on-edge, #7D5DFB8C); color: var(--brush-chat-link-hot, #B9B0FD); }
.icon-toggle.accent.on:hover { background: linear-gradient(var(--brush-toggle-on-hot, #6C49F926), var(--brush-toggle-on-hot, #6C49F926)), var(--brush-toggle-on, #6C49F938); }
/* a community's menu on its banner: a round glass button of 30 (#B30A0E16, a light edge), darker under the mouse */
.glass-button {
    width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: #0A0E16B3; border: 1px solid #FFFFFF33; color: #fff; transition: background-color var(--fast) var(--ease-out);
}
.glass-button > .icon { width: 18px; height: 18px; }
.glass-button:hover { background: #0A0E16F2; }

/* ── the notice discs (Shell\OverlayKinds) ── */
.notice-disc {
    width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    background: #6C49F92E; border: 1px solid #6C49F966; color: #A89EFF; box-shadow: 0 0 24px #6C49F926;
}
.notice-disc.small { width: 32px; height: 32px; box-shadow: none; }
.notice-disc.large { width: 44px; height: 44px; }
.notice-disc.success { background: #3DE6A324; border-color: #3DE6A366; color: var(--brush-success, #3DE6A3); box-shadow: 0 0 24px #3DE6A31A; }
.notice-disc.warning { background: #F5B54424; border-color: #F5B54466; color: var(--brush-warning, #F5B544); box-shadow: 0 0 24px #F5B5441A; }
.notice-disc.danger { background: #F25A6C24; border-color: #F25A6C66; color: #FF7A8A; box-shadow: 0 0 24px #F25A6C1A; }
.notice-disc.accent { background: var(--brush-accent-soft, #6C49F92E); border-color: #6C49F980; color: var(--brush-accent-label, #978AFB); }
.notice-disc.small.warning, .notice-disc.small.danger, .notice-disc.small.success { box-shadow: none; }

/* ── the hero card family (weblook1, chat\WEB-LOOK-CONTRACT.md section 2; docs\chat\web\look\system.md): the sign-in's card
   for every state card and empty state of the chat. The auth card's panel, edge, corners, shadow and padding; a soft
   light in its top left corner as the dialogs have (its kind's colour: .warning, .danger, .success); a disc with a soft
   glow; the sign-in's type. One card per view, never two stacked cards that say different things.
     <div class="hero-card">                         (.centered: everything in the middle; .wide: 560 instead of 460)
       <span class="hero-disc"><Icon .../></span>    (.brand with the Syphon mark's img; .warning .danger .success)
       <h2 class="hero-title">...</h2>
       <p class="hero-lead">...</p>                  (as many as it needs)
       <div class="hero-callout warning">...</div>   (a note inside the card: an icon and its words; optional)
       <div class="hero-actions"> the main .btn first (primary or syphon: it glows), then the quiet ones (outline) </div>
       <div class="hero-note">a quiet line, a <a class="link"> or .link-button</div>
     </div> */
.hero-card {
    --hero-light: var(--ui-light);
    position: relative; isolation: isolate; width: min(460px, 100%); min-width: 0; padding: var(--ui-card-pad); border-radius: var(--ui-radius-card);
    background: var(--ui-panel); border: 1px solid var(--ui-edge); box-shadow: var(--ui-shadow-card), var(--ui-sheen);
    display: flex; flex-direction: column; align-items: stretch; gap: var(--ui-card-gap); text-align: left; color: var(--brush-text, #F4F3F9);
}
.hero-card::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: radial-gradient(280px 200px at 0% 0%, var(--hero-light), transparent 100%);
}
.hero-card.wide { width: min(560px, 100%); }
.hero-card.warning { --hero-light: var(--ui-light-warning); }
.hero-card.danger { --hero-light: var(--ui-light-danger); }
.hero-card.success { --hero-light: var(--ui-light-success); }
.hero-card.centered { align-items: center; text-align: center; }
.hero-card.centered > .hero-actions, .hero-card.centered > .hero-note { justify-content: center; }
.hero-card.centered > .hero-callout { text-align: left; align-self: stretch; }
/* the disc: 56, a glass of its colour lighter at its top left, a ring of light and a soft glow under it */
.hero-disc {
    --disc: var(--color-syphon-violet, #7C3AED);
    position: relative; width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto; margin-bottom: 4px;
    display: inline-flex; align-items: center; justify-content: center; color: color-mix(in srgb, var(--disc) 42%, #fff);
    background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--disc) 44%, transparent) 0%, color-mix(in srgb, var(--disc) 14%, transparent) 72%);
    border: 1px solid color-mix(in srgb, var(--disc) 58%, transparent);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--disc) 9%, transparent), 0 10px 30px color-mix(in srgb, var(--disc) 32%, transparent);
}
.hero-disc > .icon { width: 24px; height: 24px; }
.hero-disc.brand { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--disc) 30%, transparent) 0%, transparent 70%), var(--brush-syphon-ground, #080812); }
.hero-disc.brand > img { width: 36px; height: 36px; }
.hero-disc.warning { --disc: var(--color-warning, #F5B544); }
.hero-disc.danger { --disc: var(--color-danger, #F25A6C); }
.hero-disc.success { --disc: var(--color-success, #3DE6A3); }
/* .info is the violet itself, as a dialog's and a toast's info */
.hero-title { margin: 4px 0 0; font-size: var(--ui-type-title); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; text-wrap: balance; }
.hero-lead { margin: 0; color: var(--ui-text-lead); font-size: var(--ui-type-lead); line-height: var(--ui-line-lead); overflow-wrap: anywhere; }
.hero-lead + .hero-lead { margin-top: 2px; }
.hero-lead b, .hero-lead strong { color: var(--brush-text, #F4F3F9); font-weight: 600; }
/* a note inside the card (the auth card's): an icon (16) and its words; .warning, .danger, .syphon */
.hero-callout {
    display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--ui-radius-menu); min-width: 0;
    background: var(--ui-note); border: 1px solid var(--ui-edge-faint); color: var(--brush-text-secondary, #B4C6DB);
    font-size: var(--ui-type-note); line-height: var(--ui-line-note);
}
.hero-callout > .icon { flex: 0 0 auto; margin-top: 2px; color: var(--ui-text-quiet); }
.hero-callout.warning { background: var(--brush-warning-soft, #F5B5441F); border-color: #F5B54459; color: var(--brush-warning-text, #FBDFA6); }
.hero-callout.warning > .icon { color: var(--brush-warning, #F5B544); }
.hero-callout.danger { background: var(--brush-danger-soft, #F25A6C33); border-color: #F25A6C59; color: var(--brush-danger-text, #FFB9C1); }
.hero-callout.danger > .icon { color: var(--brush-danger, #F25A6C); }
.hero-callout.syphon { background: var(--brush-syphon-soft, #7C3AED29); border-color: var(--brush-syphon-edge, #7C3AED66); color: #E3D6FF; }
.hero-callout.syphon > .icon { color: var(--brush-syphon-lilac, #A778FA); }
/* the actions, as the auth card's: the main one first with its glow, then the quiet ones; a phone: one under another, as
   wide as the card */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.hero-actions > .btn { min-height: 44px; height: auto; padding-top: 8px; padding-bottom: 8px; white-space: normal; text-align: center; }
.hero-actions > .btn.syphon { width: auto; flex: 1 1 auto; }
/* the quiet line at the foot (the auth card's foot): a faint line over it, 13.5 in the quiet colour, a link */
.hero-note {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; padding-top: 14px;
    border-top: 1px solid var(--ui-edge-faint); color: var(--ui-text-quiet); font-size: var(--ui-type-small); line-height: var(--ui-line-small);
}
.hero-note > .icon { flex: 0 0 auto; }
@media (max-width: 520px) {
    .hero-card { padding: var(--ui-card-pad-phone); }
    .hero-title { font-size: 20px; }
    /* one block: every button as wide as the card's inside, also in a centred card */
    .hero-actions { flex-direction: column; align-items: stretch; align-self: stretch; }
    .hero-actions > .btn { width: 100%; min-height: 48px; justify-content: center; }
}

/* ── a whole-window state (Chat\StateScreen.razor; weblook1, WL-PANES): the hero card above on Syphon's ground, with the
   sign-in's brand row (.auth-brand, below) and the kind's disc at its right (its scoped styles) ── */
.state-card > .state-brand { margin-bottom: 4px; }

/* ── signing in (the Syphon account's own look, as the Vault's sign-in card, on Syphon's ground above) ── */
.auth-card {
    width: min(420px, 100%); padding: 32px 30px 24px; border-radius: 16.5px;
    background: var(--brush-syphon-panel, #121220); border: 1px solid #FFFFFF1A; box-shadow: 0 30px 80px #000000A0;
    display: flex; flex-direction: column; gap: 10px;
}
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.auth-brand-name { font-size: 15.5px; font-weight: 600; letter-spacing: 7px; }
.auth-brand-sub { font-size: 14px; font-weight: 600; letter-spacing: 6.2px; color: var(--brush-syphon-lilac, #A778FA); }
.auth-title { margin: 6px 0 0; font-size: 22.6px; font-weight: 600; }
.auth-lead { margin: 0 0 8px; color: var(--brush-syphon-text-dim, #A5AFDC); line-height: 21px; }
.auth-note {
    display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px;
    background: #FFFFFF0A; color: var(--brush-text-secondary, #B4C6DB); font-size: 14px; line-height: 20px;
}
.auth-note.invite { background: var(--brush-syphon-soft, #7C3AED29); border: 1px solid var(--brush-syphon-edge, #7C3AED66); color: #E3D6FF; }
.auth-form { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13.5px; font-weight: 600; color: var(--brush-text-secondary, #B4C6DB); margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.field {
    height: 42px; padding: 0 12px; border-radius: 8px; background: var(--brush-syphon-field, #0A0A16E6);
    border: 1px solid #FFFFFF26; color: var(--brush-text, #F4F3F9); outline: none; transition: border-color var(--fast) var(--ease-out);
}
.field:hover { border-color: #FFFFFF40; }
.field:focus { border-color: var(--brush-syphon-lilac, #A778FA); }
.field.bad { border-color: var(--brush-danger, #F25A6C); }
.field.area { height: auto; padding: 10px 12px; resize: vertical; width: 100%; line-height: 20px; }
.field.select { height: 34px; padding: 0 8px; background: var(--brush-field, #151A22); border-color: var(--brush-border, #2A3444); border-radius: 8px; font-size: 14px; }
.field-hint { font-size: 12.5px; color: var(--brush-text-muted, #8999AA); line-height: 17px; }
.field-hint.bad { color: var(--brush-danger, #F25A6C); }
.auth-error {
    display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; margin: 6px 0;
    background: var(--brush-danger-soft, #F25A6C33); color: var(--brush-danger-text, #FFB9C1); font-size: 14px; line-height: 20px;
}
.auth-form .btn { margin-top: 12px; }
.auth-switch { display: flex; gap: 6px; justify-content: center; color: var(--brush-text-muted, #8999AA); font-size: 14px; margin-top: 4px; }
.auth-foot {
    margin-top: 10px; padding-top: 14px; border-top: 1px solid #FFFFFF14; display: flex; flex-wrap: wrap; gap: 6px;
    justify-content: center; font-size: 13px; color: var(--brush-text-faint, #5C6C84);
}
/* Check your email (docs\ACCOUNT.md, "Confirming the email"): the address in Syphon's colours, then the three ways on */
.auth-mail {
    display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 10px; overflow-wrap: anywhere;
    background: var(--brush-syphon-soft, #7C3AED29); border: 1px solid var(--brush-syphon-edge, #7C3AED66); color: #E3D6FF;
    font-size: 14.5px; line-height: 20px;
}
.auth-mail b { color: #FFFFFF; font-weight: 600; }
.auth-done {
    display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; margin: 2px 0;
    background: #34D39922; color: #A7F3D0; font-size: 14px; line-height: 20px; overflow-wrap: anywhere;
}
.auth-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.auth-actions .btn { width: 100%; }
.auth-actions .link-button { align-self: center; margin-top: 2px; }
.auth-row { display: flex; gap: 8px; margin-top: 12px; }
.auth-row .btn { flex: 1; margin-top: 0; }

/* ── the frame: the rail, the column, the conversation or pane, the members (ChatView.xaml) ── */
.chat-frame {
    display: flex; height: 100dvh; width: 100vw; overflow: hidden; position: relative;
    background: var(--brush-chat-messages, #0F161F);
}
.left-side { display: flex; flex: 0 0 auto; min-height: 0; }
/* the pane takes the messages' ground with a 7 % light of the community's colour at the top left (Chat.Glow 0.07) */
.pane-host {
    --ring: var(--brush-chat-messages, #0F161F);
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; position: relative;
    background: radial-gradient(ellipse 70% 55% at 0% 0%, color-mix(in srgb, var(--space-accent) 7%, transparent) 0%, transparent 70%), var(--brush-chat-messages, #0F161F);
}
.pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; }
/* a lost connection: an opaque amber bar of 38 above the pane; it pushes the pane down and covers nothing */
.conn-strip {
    display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 20px; font-size: 13.5px;
    background: #6C49F926; border-bottom: 1px solid #6C49F94D; color: var(--brush-text-secondary, #B4C6DB);
}
.conn-strip.warn { background: #2A2416; border-color: var(--brush-warning-edge, #F5B54459); color: var(--brush-warning-text, #FBDFA6); }

/* ── the rail: 72 and its line; a tile of 48 (radius 12) in a cell of 56 (RailTile) ── */
.rail {
    width: 73px; flex: 0 0 73px; background: var(--brush-chat-rail, #0A0F15); border-right: 1px solid var(--brush-border-subtle, #1C2532);
    display: flex; flex-direction: column; align-items: center; padding: 8px 0; gap: 0; overflow-y: auto; scrollbar-width: none;
}
.rail-spaces { display: flex; flex-direction: column; gap: 0; align-items: center; }
.rail-slot { position: relative; width: 72px; height: 56px; flex: 0 0 56px; display: flex; align-items: center; justify-content: center; }
/* the pill at the rail's edge: white news (4 x 8), longer and fainter under the mouse (20, 70 %), the tile's colour while chosen (40) */
.rail-bar, .rail-pill, .rail-slot::before {
    position: absolute; left: 4px; width: 4px; border-radius: 2px; pointer-events: none;
    transition: height var(--fast) var(--ease-out), top var(--fast) var(--ease-out), opacity var(--fast) var(--ease-out);
}
.rail-bar { top: 8px; height: 40px; background: var(--space-accent); }
.rail-slot:has(.rail-tile.tool) .rail-bar { background: var(--brush-accent-bar, #7650F4); }
.rail-pill { top: 24px; height: 8px; background: var(--brush-text, #F4F3F9); }
.rail-slot:hover .rail-pill { top: 18px; height: 20px; opacity: .7; }
.rail-slot:not(:has(.rail-bar, .rail-pill))::before { content: ""; top: 18px; height: 20px; background: var(--brush-text, #F4F3F9); opacity: 0; }
.rail-slot:not(:has(.rail-bar, .rail-pill)):hover::before { opacity: .7; }
.rail-tile {
    position: relative; width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: var(--brush-surface-raised, #141A24); border: 1px solid var(--brush-border-subtle, #1C2532); opacity: .88;
    transition: opacity var(--fast) var(--ease-out), background-color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
    color: var(--brush-nav-icon, #CAD8EB);
}
.rail-tile > .icon { width: 22px; height: 22px; }
.rail-tile.space { border: 0; background: none; }
.rail-tile img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 12px; }
.rail-tile:hover, .rail-tile.selected { opacity: 1; }
.rail-tile.tool:hover { background: var(--brush-surface-hover, #1B2331); border-color: var(--brush-border, #2A3444); color: var(--brush-text, #F4F3F9); }
/* chosen: a ring of 2 in the tile's colour; a tool tile also a wash of it (22 %) and its icon white */
.rail-tile.selected::after { content: ""; position: absolute; inset: 0; border-radius: 12px; border: 2px solid var(--space-accent); pointer-events: none; }
.rail-tile.tool.selected { background: linear-gradient(#7650F438, #7650F438), var(--brush-surface-raised, #141A24); color: var(--brush-text, #F4F3F9); }
.rail-tile.tool.selected::after { inset: -1px; border-color: var(--brush-accent-bar, #7650F4); }
.rail-tile.muted { opacity: .5; }
.space-mark {
    width: 100%; height: 100%; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: var(--brush-syphon-ground, #080812); border: 1px solid var(--brush-syphon-edge, #7C3AED66);
}
.space-mark img { width: 38px; height: 38px; object-fit: contain; border-radius: 0; }
.muted-mark {
    position: absolute; left: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--brush-surface-raised, #141A24); border: 2px solid var(--brush-chat-rail, #0A0F15); color: var(--brush-text-secondary, #B4C6DB);
}
.rail-line { width: 32px; height: 1px; flex: 0 0 1px; margin: 28px 0 27px; background: var(--brush-border, #2A3444); }

/* ── the column: 264 with its two lines (262 inside) ── */
.column {
    --ring: var(--brush-chat-column, #0C1118);
    width: 263px; flex: 0 0 263px; background: var(--brush-chat-column, #0C1118); border-right: 1px solid var(--brush-border-subtle, #1C2532);
    display: flex; flex-direction: column; min-height: 0;
}
/* ChatPanel.ColumnHeader: 54, a hairline under it, the title 16 semibold */
.column-header { height: 54px; flex: 0 0 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px 0 20px; border-bottom: 1px solid var(--brush-border-subtle, #1C2532); }
.column-title { font-size: 16px; font-weight: 600; }
.column-scroll { flex: 1 1 auto; overflow-y: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: #2A3444 transparent; }
.column-note { margin: 14px 16px 0 20px; display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 17px; color: var(--brush-text-faint, #5C6C84); }
.column-note .icon { margin-top: 1px; }
/* the note under DIRECT MESSAGES while there are none (weblook1, WL-PANES): a quiet note of the card family, the lock in
   Syphon's lilac, its words in the quiet colour (readable: the faint colour was too dim for words) */
.column-note.dm-note {
    margin: 4px 12px 0; padding: 10px 12px; gap: 10px; border-radius: var(--ui-radius-menu); color: var(--ui-text-quiet);
    background: var(--ui-note); border: 1px solid var(--ui-edge-faint);
}
.column-note.dm-note > .icon { margin-top: 2px; color: var(--brush-syphon-lilac, #A778FA); }
/* a community's banner: 96 high, its art (focus 0.85, 0.3) under the card's scrim and the banner's scrim at 70 % */
.space-banner { position: relative; height: 96px; flex: 0 0 96px; overflow: hidden; background: var(--brush-surface, #0F161F); }
.space-banner.syphon { background: radial-gradient(ellipse 90% 120% at 30% 0%, #7C3AED40 0%, transparent 70%), var(--brush-syphon-ground, #080812); }
.space-banner-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 85% 30%; }
.space-banner-mark { position: absolute; right: 46px; bottom: 10px; width: 48px; height: 48px; opacity: .9; }
.space-banner-shade { position: absolute; inset: 0; background: var(--brush-scrim-card); }
.space-banner-shade::after { content: ""; position: absolute; inset: 0; background: var(--brush-scrim-banner); opacity: .7; }
.space-banner-text { position: absolute; left: 16px; right: 44px; bottom: 11px; }
.space-banner .kicker { display: block; margin: 0 0 3px 1px; color: color-mix(in srgb, var(--space-accent) 62%, #fff); }
.space-title { font-family: var(--title-font); font-weight: 700; font-size: 21px; line-height: 1.33; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.space-menu-wrap { position: absolute; right: 10px; top: 10px; }
.space-counts { display: flex; align-items: center; padding: 12px 16px 0 20px; font-size: 13px; color: var(--brush-text-muted, #8999AA); }
/* a room (36 high, 2 apart, 8 in from the column's sides): its icon (18) and its name; the chosen one in the community's
   colour (a 16 % wash, a bar of 3 at its left, semibold white words); unread: white, semibold, a white pill at the edge */
.channel-row, .nav-row {
    position: relative; display: flex; align-items: center; gap: 10px; height: 36px; margin: 0 8px 2px; padding: 0 8px 0 12px;
    border-radius: 8px; width: calc(100% - 16px); text-align: left; color: var(--brush-text-secondary, #B4C6DB);
    transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.channel-row .icon, .nav-row .icon { width: 18px; height: 18px; color: var(--brush-text-muted, #8999AA); stroke-width: 1.8; transition: color var(--fast) var(--ease-out); }
.channel-row:hover, .nav-row:hover { background: var(--brush-hover-light, #FFFFFF14); color: var(--brush-text, #F4F3F9); }
.channel-row:hover .icon { color: var(--brush-text-secondary, #B4C6DB); }
.channel-row:active, .nav-row:active { background: linear-gradient(var(--brush-pressed-light, #FFFFFF0A), var(--brush-pressed-light, #FFFFFF0A)), var(--brush-hover-light, #FFFFFF14); }
.channel-row.selected { background: color-mix(in srgb, var(--space-accent) 16%, transparent); color: var(--brush-text, #F4F3F9); font-weight: 600; }
.channel-row.selected::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 8px 0 0 8px; background: var(--space-accent); }
.channel-row.selected .icon { color: var(--brush-text, #F4F3F9); }
.channel-row.unread { color: var(--brush-text, #F4F3F9); font-weight: 600; }
.channel-row.unread .icon { color: var(--brush-text-secondary, #B4C6DB); }
.channel-row.muted, .channel-row.muted .icon { color: var(--brush-text-faint, #5C6C84); }
/* a room's own icon as a picture (an emoji, or a flag from art/flags: 2026-10-11), as big as the kind's mark it stands
   for (its width and height come with it: 18 in a row, 14 before a group's label, 20 in the header); never tinted, only
   faint while the room is muted */
.room-art { flex: 0 0 auto; object-fit: contain; display: inline-block; }
.channel-row.muted .room-art { opacity: .4; }
.channel-name, .nav-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -1px; }
.channel-row .count { margin-left: 2px; }
.unread-pill { position: absolute; left: -5px; top: 14px; width: 4px; height: 8px; border-radius: 2px; background: var(--brush-text, #F4F3F9); }
.row-mute { color: var(--brush-text-muted, #8999AA); display: inline-flex; margin-right: 2px; }
/* Friends and Find communities in the home column: rows of 40, the icon 19 in the sidebar's icon colour, strong words; words a
   longer language makes wider than the column take a second line (the row grows) rather than ending in dots (i18n1) */
.nav-row { height: auto; min-height: 40px; gap: 11px; color: var(--brush-text, #F4F3F9); font-weight: 600; }
.nav-row .nav-text { white-space: normal; overflow-wrap: anywhere; }
.column-scroll > .nav-row:first-child { margin-top: 8px; }
.nav-row .icon { width: 19px; height: 19px; color: var(--brush-nav-icon, #CAD8EB); }
.nav-row.selected { background: var(--brush-accent-soft, #6C49F92E); }
.nav-row.selected::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 8px 0 0 8px; background: var(--brush-accent-bar, #7650F4); }
.column-scroll > .nav-row + .group-label { padding-top: 20px; padding-bottom: 8px; }
/* a private conversation in the column: 48 high, the picture 32, the name and how they are */
.dm-row {
    position: relative; display: flex; align-items: center; gap: 10px; height: 48px; margin: 0 8px 2px; padding: 0 8px;
    border-radius: 8px; width: calc(100% - 16px); text-align: left; transition: background-color var(--fast) var(--ease-out);
}
.dm-row:hover { background: var(--brush-hover-light, #FFFFFF14); }
.dm-row.selected { background: var(--brush-accent-soft, #6C49F92E); }
.dm-row.selected::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 8px 0 0 8px; background: var(--brush-accent-bar, #7650F4); }
.dm-text { display: flex; flex-direction: column; min-width: 0; }
.dm-name { font-size: 15.2px; color: var(--brush-text-secondary, #B4C6DB); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-row:hover .dm-name { color: var(--brush-text, #F4F3F9); }
.dm-row.unread .dm-name, .dm-row.selected .dm-name { color: var(--brush-text, #F4F3F9); font-weight: 600; }
.dm-line { font-size: 13px; margin-top: 1px; color: var(--brush-text-muted, #8999AA); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* playing: the playing green's light words (Success.Text) on a row; the green itself in the header's line and the card */
.dm-line.playing, .person-line.playing, .member-line.playing { color: var(--brush-success-text, #C4F0E4); }
.header-note.playing { color: var(--brush-success-text, #C4F0E4); }

/* the player's row (58, on the rail's ground with a line on top): the picture 32, the name 14.4 strong, the presence 12.5 */
.player-row {
    --ring: var(--brush-chat-rail, #0A0F15);
    position: relative; height: 58px; flex: 0 0 58px; display: flex; align-items: center; gap: 2px; padding: 0 6px;
    background: var(--brush-chat-rail, #0A0F15); border-top: 1px solid var(--brush-border-subtle, #1C2532);
}
.player-me {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 4px 0 5px; border-radius: 8px; text-align: left;
    transition: background-color var(--fast) var(--ease-out);
}
.player-me:hover { background: var(--brush-hover-light, #FFFFFF14); }
.player-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.player-name { font-size: 14.4px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-status { font-size: 12.5px; margin-top: 1px; color: var(--brush-text-muted, #8999AA); display: flex; align-items: center; min-width: 0; }
/* Busy is Do not disturb (2026-10-09): a struck bell right after the word, as the Vault's row */
.player-quiet { display: inline-flex; margin-left: 5px; color: var(--brush-text-secondary, #B4C6DB); }
.player-quiet .icon { width: 12px; height: 12px; }
/* the gear: the player's row's buttons are rounded squares of 32 (Voice.Toggle's family) */
.player-row > .icon-button { width: 32px; height: 32px; border-radius: 8px; }
.player-row > .icon-button > .icon { width: 19px; height: 19px; }

/* ── menus (weblook1, chat\WEB-LOOK-CONTRACT.md section 2; docs\chat\web\look\system.md, "Adding a menu item"): the Vault's
   own menu (entries 36, the icons 16 in a column of their own, words 14.5, a quiet hint at the right) on the sign-in's
   panel as glass: the panel at 0.92 with a blur of what is under it (the panel itself where the browser cannot blur), a
   faint violet light in its top left corner, the 1 px light edge with the lit top, a deep shadow, corners of 10. Under
   the mouse or the keyboard an entry takes Syphon's
   violet (radius 7) and its icon turns lilac; a removing entry is red; faint lines between groups. It fades in from 4
   towards where it was opened (140 ms; nothing moves with reduced motion). The account menu by the player's name opens
   upwards and is wide enough for its hints. ── */
.menu-backdrop { position: fixed; inset: 0; z-index: 60; }
.menu {
    position: absolute; z-index: 61; min-width: 228px; padding: 6px; border-radius: var(--ui-radius-menu); top: calc(100% + 6px); left: 0;
    background: radial-gradient(200px 130px at 0% 0%, color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 11%, transparent), transparent 100%), var(--ui-panel-glass);
    border: 1px solid var(--ui-edge); box-shadow: var(--ui-shadow-menu), var(--ui-sheen);
    -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    display: flex; flex-direction: column; gap: 0; animation: menu-in 140ms var(--ease-out);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .menu { background: radial-gradient(200px 130px at 0% 0%, color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 11%, transparent), transparent 100%), var(--ui-panel); }
}
.menu.right { left: auto; right: 0; }
.menu.up { top: auto; bottom: calc(100% + 6px); left: 8px; right: 8px; animation-name: menu-in-up; }
/* a community's menu hangs from its banner's button: the banner (96 high) keeps its art in its box but never cuts the
   menu off while it is open (before, only its first entry showed) */
.space-banner:has(> .space-menu-wrap > .menu) { overflow: visible; z-index: 2; }
/* the account menu by the player's name: its hints whole (Others see you are away), so it reaches into the pane */
.player-row > .menu.up { right: auto; width: 300px; max-width: calc(100vw - 88px); }
.menu-item {
    position: relative; display: flex; align-items: center; gap: 11px; height: 36px; flex: 0 0 auto; padding: 0 10px; border-radius: var(--ui-radius-item); text-align: left;
    font-size: var(--ui-type-menu); color: var(--brush-text, #F4F3F9); white-space: nowrap; transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.menu-item:hover:not(:disabled), .menu-item:focus-visible { background: var(--ui-hover); }
.menu-item:focus-visible { outline-offset: -2px; }
.menu-item:active:not(:disabled) { background: color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 32%, transparent); }
.menu-item:hover:not(:disabled) .menu-icon, .menu-item:focus-visible .menu-icon { color: var(--brush-syphon-lilac-hot, #C4A6FC); }
.menu-item.danger { color: #FF8796; }
.menu-item.danger:hover:not(:disabled), .menu-item.danger:focus-visible { background: color-mix(in srgb, var(--color-danger, #F25A6C) 18%, transparent); }
.menu-item.danger:active:not(:disabled) { background: color-mix(in srgb, var(--color-danger, #F25A6C) 26%, transparent); }
.menu-item.disabled { color: var(--brush-syphon-text-faint, #687098); }
.menu-icon { width: 16px; flex: 0 0 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--ui-text-quiet); transition: color var(--fast) var(--ease-out); }
.menu-icon .icon { width: 16px; height: 16px; }
.menu-item.danger .menu-icon, .menu-item.danger:hover:not(:disabled) .menu-icon { color: #FF8796; }
.menu-item.disabled .menu-icon { color: var(--brush-syphon-text-faint, #687098); }
/* a presence's mark in the icon's place (MenuItem's Presence: the account menu's statuses), as the player's picture shows
   it; its bites in the menu's own colour, the invisible ring a touch lighter than on the lists */
.menu-icon > .presence-dot { --ring: var(--ui-panel-top); margin: 0; width: 10px; height: 10px; }
.menu-icon > .presence-dot:not(.online):not(.away):not(.busy) { box-shadow: inset 0 0 0 2.2px var(--ui-text-quiet); }
.menu-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu-hint { color: var(--ui-text-quiet); font-size: 12.5px; margin-left: 16px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.menu-item.checked .menu-hint { color: var(--brush-syphon-lilac, #A778FA); display: inline-flex; }
.menu-line { height: 1px; flex: 0 0 1px; margin: 5px 6px; background: var(--ui-edge-faint); }
/* ── the language at the top (Chat\LanguageButton.razor; the owner's wish of 2026-10-20): the flag button closes every pane's
   header at its right end (Server Management's just before Close; Chat settings' title row reaches 8 into the pane's
   padding, so its button stands 12 from the edge as in every header), and on a whole-window screen (the sign-in, the
   invite and landing pages) it stands at the top right, 12 from the corner (a phone's safe area kept). Its own look is
   LanguageButton.razor.css.
   A header row that cannot hold everything at once (a longer language, a phone) gives way: js\lang-menu.js measures it
   without .tight and sets .tight only while it would push something out, so a row that fits keeps every pixel. Then the
   pane's own icon before the title, the note beside the title and its line go (the note was squeezed to nothing), a text
   button keeps its icon, tooltip and name and puts its words away, and the title takes the room left, on two lines where
   it needs them (its words as its tooltip only when even two lines cannot hold them). ── */
.screen-top { position: absolute; z-index: 5; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); display: flex; }
.settings-top > .settings-title-row { margin-right: -8px; }
:is(.pane-header, .settings-title-row, .manage-top).tight > :is(svg.icon, .room-art, .header-line, .header-note, .manage-line) { display: none; }
:is(.pane-header, .settings-title-row, .manage-top).tight > .btn > .btn-words { display: none; }
:is(.pane-header, .settings-title-row, .manage-top).tight > .btn:has(> .btn-words) { width: 34px; padding: 0; gap: 0; }
:is(.pane-header, .settings-title-row, .manage-top).tight > :is(.spacer, .grow) { flex: 0 0 0; }
:is(.pane-header, .settings-title-row, .manage-top).tight > :is(.pane-title, .header-person) { flex: 1 1 0; min-width: 0; }
:is(.pane-header, .settings-title-row, .manage-top).tight .pane-title {
    min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 20px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/* a phone's Server Management, whose header wraps (whom it manages and Switch community on its second line): the title,
   the language and Close keep the first line, the title on two lines where a longer language needs them (178: the
   drawer's button, the icon, the language, Close and the five gaps between them) */
@media (max-width: 520px) {
    .manage-top > .pane-title { min-width: 0; max-width: calc(100% - 178px); white-space: normal; overflow-wrap: anywhere; line-height: 20px; }
    :root:lang(th) .manage-top > .pane-title { line-height: 24px; }
}
/* Thai's marks above and below its letters keep their room on two lines */
:root:lang(th) :is(.pane-header, .settings-title-row, .manage-top).tight .pane-title { line-height: 24px; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes menu-in-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── the conversation (ChatConversationView.xaml) ── */
/* the header (54): a touch lighter than the messages, a hairline, the room's icon (20, muted), the name (17 semibold), a thin
   line, the topic (13.5, muted); the buttons 2 apart; a soft shade of 12 over the messages that pass under it */
.pane-header {
    position: relative; height: 54px; flex: 0 0 54px; display: flex; align-items: center; gap: 0; padding: 0 12px 0 20px;
    border-bottom: 1px solid var(--brush-border-subtle, #1C2532); background: transparent; min-width: 0;
}
/* the lighter ground is a conversation's own (Brush.Chat.Header): Friends and Find communities stand on the pane's ground */
.conversation > .pane-header, .direct-state > .pane-header { background: var(--brush-chat-header, transparent); }
.pane-header > .icon { width: 20px; height: 20px; stroke-width: 1.8; margin-right: 10px; }
/* a room's own icon in its header (the room groups of 2026-10-11): the same place as the kind's mark */
.pane-header > .room-art { margin-right: 10px; }
.pane-header > .icon-button, .pane-header > .icon-toggle, .pane-header > .header-menu-wrap { margin-left: 2px; }
/* a header button with its menu (the bell, More): the menu hangs under it, its right edge on the button's */
.header-menu-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
/* slow mode's chip (Chat.Chip on Hover.Light, radius 6, 7 2 8 3, the slow mark 12 and 11.5 semibold words), 10 before the
   buttons; muted: until when (Text.Caption 12.5), 8 before the bell */
.header-chip {
    display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; padding: 2px 8px 3px 7px; border-radius: 6px; flex: 0 0 auto;
    background: var(--brush-hover-light, #FFFFFF14); color: var(--brush-text-secondary, #B4C6DB); font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.header-chip .icon { width: 12px; height: 12px; stroke-width: 2; }
.header-muted { font-size: 12.5px; color: var(--brush-text-muted, #8999AA); margin: 0 2px 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.pane-header > .btn { margin-right: 8px; }
.conversation > .pane-header::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; z-index: 3; pointer-events: none;
    background: var(--brush-chat-headershade);
}
.pane-title { margin: 0; font-size: 17px; font-weight: 600; white-space: nowrap; }
.header-line { width: 1px; height: 18px; background: var(--brush-border, #2A3444); margin: 1px 14px 0; flex: 0 0 auto; }
.header-note { font-size: 13.5px; margin-top: 1px; color: var(--brush-text-muted, #8999AA); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.header-person { display: flex; align-items: center; gap: 10px; border-radius: 8px; }
.header-person .avatar { --size: 30px !important; }
/* no player name here yet: the soft purple band under the header */
.pending-band {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 20px; background: #6C49F916; border-bottom: 1px solid #6C49F938;
}
.pending-disc { width: 32px; height: 32px; border-radius: 50%; background: var(--brush-accent-soft, #6C49F92E); display: flex; align-items: center; justify-content: center; color: var(--brush-accent-label, #978AFB); flex: 0 0 auto; }
.pending-text { flex: 1 1 auto; min-width: 0; }
.pending-title { font-size: 14.4px; font-weight: 600; }
.pending-caption { font-size: 13px; margin-top: 2px; color: var(--brush-text-muted, #8999AA); }
.message-list { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 0 0 8px; scrollbar-width: thin; scrollbar-color: #2A3444 transparent; overscroll-behavior: contain; }
.older-line { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; color: var(--brush-text-muted, #8999AA); font-size: 13.5px; }
.older-line.problem { margin: 6px 20px; border-radius: 8px; background: var(--brush-danger-soft, #F25A6C33); color: var(--brush-danger-text, #FFB9C1); }
/* where the room starts (weblook1, WL-PANES: the sign-in's quality on the messages' plain ground): its art (72, corners 18)
   in a ring of the community's colour with its soft light under it, a faint light of that colour behind the start, the
   title (26 semibold), its words in the leads' lilac blue, a line under it. A private conversation's start
   (Chat\PrivateConversation.razor): the other player's picture in the same place, the lock on it, their name as the title. */
.welcome {
    padding: 32px 24px 0 20px; margin: 0 0 8px; max-width: 760px;
    background: radial-gradient(340px 124px at 56px 60px, color-mix(in srgb, var(--space-accent) 13%, transparent), transparent 100%);
}
.welcome::after { content: ""; display: block; height: 1px; margin-top: 24px; background: var(--brush-border-subtle, #1C2532); }
.welcome-art {
    width: 72px; height: 72px; border-radius: 18px; object-fit: cover;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--space-accent) 55%, transparent), 0 0 0 6px color-mix(in srgb, var(--space-accent) 10%, transparent),
                0 12px 32px color-mix(in srgb, var(--space-accent) 32%, transparent);
}
.welcome-art.syphon { background: var(--brush-syphon-ground, #080812); border: 1px solid var(--brush-syphon-edge, #7C3AED66); display: flex; align-items: center; justify-content: center; }
.welcome-art.syphon img { width: 50px; height: 50px; }
.welcome-title { margin: 18px 0 0; font-size: 26px; line-height: 1.25; font-weight: 600; overflow-wrap: anywhere; }
.welcome-text { margin: 8px 0 0; max-width: 640px; color: var(--ui-text-lead); font-size: var(--ui-type-lead); line-height: 22px; }
.welcome-person {
    position: relative; display: inline-flex; border-radius: 50%;
    box-shadow: 0 0 0 1px #7C3AED94, 0 0 0 6px #7C3AED17, 0 12px 32px #7C3AED52;
}
/* a new day: its words (12 semibold, secondary) on a small pill (radius 11) between two lines that fade out */
.day-line { position: relative; display: flex; align-items: center; justify-content: center; margin: 10px 24px 4px 20px; height: 34px; }
.day-line::before, .day-line::after { content: ""; flex: 1 1 auto; height: 1px; }
.day-line::before { background: var(--brush-chat-dayline-left, linear-gradient(90deg, #2A344400, #2A3444)); }
.day-line::after { background: var(--brush-chat-dayline-right, linear-gradient(90deg, #2A3444, #2A344400)); }
.day-line span {
    padding: 2px 11px 3px; margin: 0 10px; border-radius: 11px; background: var(--brush-chat-daypill, #151C27); border: 1px solid var(--brush-chat-daypill-edge, #263040);
    font-size: 12px; font-weight: 600; color: var(--brush-text-secondary, #B4C6DB);
}
/* the first unread message: its purple line grows from nothing at the left into the NEW mark, which has a soft light of its
   own behind it (a gradient, never a blur) */
.new-line { position: relative; display: flex; align-items: center; height: 18px; margin: 8px 24px 2px 20px; }
.new-line::before { content: ""; flex: 1 1 auto; height: 1px; background: var(--brush-chat-newline, linear-gradient(90deg, #8F85F900, #8F85F9)); }
.new-line::after { content: ""; position: absolute; right: -12px; top: -9px; bottom: -9px; width: 64px; pointer-events: none; background: var(--brush-chat-newglow); }
.new-line span {
    position: relative; z-index: 1; height: 16px; padding: 0 5px 0 6px; border-radius: 4px; background: var(--brush-accent, #6C49F9); color: #fff;
    font-size: 10.5px; font-weight: 600; letter-spacing: 1px; display: flex; align-items: center;
}
.list-skeleton { padding: 28px 24px 0; display: flex; flex-direction: column; gap: 26px; }
.skeleton-row { display: flex; gap: 16px; align-items: flex-start; }
.skeleton-row.small { gap: 12px; height: 32px; align-items: center; padding: 0 16px; margin-bottom: 12px; }
.skeleton-disc { width: 40px; height: 40px; border-radius: 50%; background: var(--brush-chat-skeleton, #1A2230); flex: 0 0 auto; }
.skeleton-row.small .skeleton-disc { width: 32px; height: 32px; }
.skeleton-lines { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; padding-top: 4px; }
.skeleton-lines span, .skeleton-line { display: block; height: 12px; border-radius: 6px; background: var(--brush-chat-skeleton, #1A2230); width: 60%; max-width: 380px; }
.skeleton-lines span:first-child { width: 110px; }
.skeleton-line.wide { width: 80%; margin-bottom: 8px; }
/* Jump to latest and the mention's way back: Chat.Pill (34, radius 17, the flyout's ground, the strong edge, a still shadow) */
.jump-pills { position: absolute; left: 0; right: 0; bottom: 104px; display: flex; justify-content: center; gap: 10px; z-index: 5; pointer-events: none; }
.pill {
    pointer-events: auto; height: 34px; padding: 0 16px 0 14px; border-radius: 17px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600;
    background: var(--brush-chat-flyout, #151C28); border: 1px solid var(--brush-border-strong, #3A4659); box-shadow: 0 4px 16px #00000073; color: var(--brush-text, #F4F3F9);
    transition: background-color var(--fast) var(--ease-out);
}
.pill .icon { width: 15px; height: 15px; }
.pill:hover { background: var(--brush-surface-hover, #1B2331); }
.pill:first-child:not(:last-child) { color: var(--brush-warning-text, #FBDFA6); }
/* the typing line: 22 high, 22 from the left, three dots of 5 and the words (12.5, muted) */
.typing-line { height: 22px; flex: 0 0 22px; padding: 0 24px 0 22px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--brush-text-muted, #8999AA); }
.typing-dots { display: inline-flex; gap: 3px; margin-top: 1px; }
.typing-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--brush-text-muted, #8999AA); animation: blink 1.2s infinite; }
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

/* ── a message: the 40 picture at 20, the words 76 from the list's left (at most 780 wide, 24 at the right); a group's first
   with 14 of air above it and 3 under it, a follow-up 2 and 2. The washes stand 8 in from the list's sides, a group's first
   from 5 above its name: the row's own background, inset by edges that show nothing (8 at each side, 9 above a group's
   first), so it never needs a layer of its own: the group's wash (2 %) as its colour, the row's own (4 %) over it, both
   rounded 10 at the group's top and foot and fading in 110 ms ── */
@property --row-wash { syntax: "<color>"; inherits: false; initial-value: transparent; }
.msg {
    position: relative; min-height: 26px; padding: 2px 16px 2px 68px; border: 0 solid transparent; border-left-width: 8px; border-right-width: 8px;
    background-clip: padding-box; background-color: transparent; background-image: linear-gradient(var(--row-wash), var(--row-wash));
    transition: background-color var(--fast) var(--ease-out), --row-wash var(--fast) var(--ease-out);
}
.msg.first { border-top-width: 9px; padding-top: 5px; padding-bottom: 3px; border-top-left-radius: 18px 19px; border-top-right-radius: 18px 19px; }
.msg:not(:has(+ .msg.follow)) { border-bottom-left-radius: 18px 10px; border-bottom-right-radius: 18px 10px; }
.msg:hover, .msg.active { --row-wash: var(--brush-chat-rowhover, #FFFFFF0B); }
/* the whole group of the row under the mouse (its rows are siblings until the next group starts) */
.msg:hover, .msg.active,
.msg:has(+ .follow:hover), .msg:has(+ .follow + .follow:hover), .msg:has(+ .follow + .follow + .follow:hover),
.msg:has(+ .follow + .follow + .follow + .follow:hover), .msg:has(+ .follow + .follow + .follow + .follow + .follow:hover),
.msg:has(+ .follow + .follow + .follow + .follow + .follow + .follow:hover),
.msg:has(+ .follow + .follow + .follow + .follow + .follow + .follow + .follow:hover),
.msg:has(+ .follow + .follow + .follow + .follow + .follow + .follow + .follow + .follow:hover),
.msg:hover + .follow, .msg:hover + .follow + .follow, .msg:hover + .follow + .follow + .follow,
.msg:hover + .follow + .follow + .follow + .follow, .msg:hover + .follow + .follow + .follow + .follow + .follow,
.msg:hover + .follow + .follow + .follow + .follow + .follow + .follow,
.msg:hover + .follow + .follow + .follow + .follow + .follow + .follow + .follow,
.msg:hover + .follow + .follow + .follow + .follow + .follow + .follow + .follow + .follow { background-color: var(--brush-chat-grouphover, #FFFFFF06); }
/* a message that names the player ("mentioned": the pills are "mention", WEB-TESTS' fix): its own rounded shape (8) in the washes' place, an amber sweep strongest at its bar of 3 */
.msg.mentioned {
    background-image: linear-gradient(var(--row-wash), var(--row-wash)), var(--brush-chat-mention-sweep, linear-gradient(90deg, #F5B54424, #F5B5440A));
    box-shadow: inset 3px 0 0 var(--brush-warning, #F5B544); border-radius: 16px / 8px;
}
.msg.mentioned.first { border-top-left-radius: 16px 17px; border-top-right-radius: 16px 17px; }
/* a blocked player's message, folded (the Vault's row: a 32 disc of Hover.Light with the ban mark 15 in Text.Muted at 24 from
   the list's left, in the middle of the line; "A message from a player you blocked." 13.5 italic muted, Show 8 after it) */
.msg-blocked-mark {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; background: var(--brush-hover-light, #FFFFFF14); color: var(--brush-text-muted, #8999AA);
}
.msg-blocked-mark .icon { width: 15px; height: 15px; stroke-width: 2; }
.msg-blocked-line { display: flex; align-items: center; gap: 8px; margin: 8px 0; min-height: 19px; font-size: 13.5px; }
.msg-blocked-line > span { font-style: italic; color: var(--brush-text-muted, #8999AA); margin-top: -1px; }
.msg-blocked-line > .link-button { font-size: 13.5px; }
.msg.pending { opacity: .6; }
.msg.failed { opacity: 1; }
.msg-avatar { position: absolute; left: 12px; top: 2px; border-radius: 50%; }
.msg.first > .msg-avatar { top: 7px; }
.msg.first:has(> .msg-reply) > .msg-avatar { top: 29px; }
.msg-avatar:active { transform: translateY(1px); }
/* a follow-up's time under the mouse: 11.5, muted, its right edge 10 before the words */
.msg-gutter-time { position: absolute; left: -8px; width: 66px; text-align: right; top: 6px; font-size: 11.5px; color: var(--brush-text-muted, #8999AA); opacity: 0; transition: opacity var(--fast) var(--ease-out); }
.msg:hover .msg-gutter-time { opacity: 1; }
.msg-body { max-width: 780px; min-width: 0; }
.msg-head { display: flex; align-items: baseline; gap: 0; line-height: normal; margin-bottom: 1px; }
.msg-author { font-size: 15.2px; font-weight: 600; color: var(--brush-text, #F4F3F9); }
.msg-author:hover { text-decoration: underline; }
.msg-time { font-size: 12.5px; color: var(--brush-text-muted, #8999AA); margin-left: 9px; }
/* the staff chip (Chat.Chip: Accent.Soft, radius 4, the shield 11 and 11.5 semibold words in Accent.Label) */
.role-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px 2px 5px; border-radius: 4px; font-size: 11.5px; font-weight: 600; line-height: normal;
    background: var(--brush-accent-soft, #6C49F92E); color: var(--brush-accent-label, #978AFB); align-self: center; margin-left: 8px; white-space: nowrap;
}
.role-badge .icon { width: 11px; height: 11px; stroke-width: 2.2; margin-top: 1px; }
.role-badge.admin { background: var(--brush-accent-soft, #6C49F92E); color: var(--brush-accent-label, #978AFB); }
.role-badge.small { font-size: 11px; margin-left: 7px; }
.role-badge.small .icon { width: 10px; height: 10px; }
/* the platform it was sent from or the member is on (PlatformMark; the Vault's ChatPlatformMark): the glyph at 14 (13 in the
   member list, 17 on the card) in the muted colour of a message's time, 6 after the name, centred on the line; nothing at
   all when it is not known */
.platform-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; align-self: center; margin-left: 6px; margin-top: 1px; color: var(--brush-text-muted, #8999AA); line-height: 0; }
.platform-mark .icon { stroke-width: 2.1; }
.card-name .platform-mark { margin-left: 8px; margin-top: 2px; }
.msg-text { font-size: 15.2px; line-height: 22px; color: var(--brush-chat-body, #DDE3EC); overflow-wrap: anywhere; white-space: pre-wrap; }
/* an emoji in the words: 20 at 15.2, 1 at each side, standing on the baseline with a fifth below it */
.msg-text .emoji { width: 20px; height: 20px; display: inline-block; vertical-align: -4px; margin: 0 1px; object-fit: contain; }
.msg-text.jumbo { line-height: 52px; }
.msg-text.jumbo .emoji { width: 44px; height: 44px; vertical-align: -9px; margin: 0 1px; }
.msg-text .b { font-weight: 600; color: var(--brush-text, #F4F3F9); }
.msg-text .i { font-style: italic; }
.edited { font-size: 11.5px; color: var(--brush-text-muted, #8999AA); margin-left: 6px; }
.code-span { font-family: "Cascadia Mono", Consolas, "Courier New", monospace; font-size: 13.6px; padding: 1px 2px; background: var(--brush-chat-codespan, #242D3D); color: var(--brush-chat-code-text, #CFDAEA); }
.code-block { display: block; margin: 6px 0; padding: 9px 12px 10px; border-radius: 8px; background: var(--brush-chat-codeblock, #0A0E15); border: 1px solid var(--brush-border-subtle, #1C2532); font-family: "Cascadia Mono", Consolas, "Courier New", monospace; font-size: 13.4px; line-height: 19px; color: var(--brush-chat-code-text, #CFDAEA); white-space: pre-wrap; overflow-x: auto; }
/* a mention pill (never the message row, which carries .mention too): the player's current name, amber when it names this
   player */
.mention:not(.msg) { display: inline; padding: 0 4px 1px; border-radius: 4px; background: var(--brush-accent-soft, #6C49F92E); color: var(--brush-accent-label, #978AFB); font-size: 14.4px; font-weight: 600; }
.mention.me:not(.msg), .mention.everyone:not(.msg) { background: var(--brush-chat-mentionpill-me, #F5B5442E); color: var(--brush-warning-text, #FBDFA6); }
/* a reply's quote is plain words (its links and mentions too): a press on it goes to the message it answers */
.reply-excerpt .link, .reply-excerpt .mention { color: inherit; background: none; padding: 0; font-size: inherit; font-weight: inherit; pointer-events: none; }
/* a reply: a thin line (2, Border.Strong, a corner of 5) that rises from above the picture's middle to the words it answers,
   the answered author (13 semibold, secondary) and the line (13, muted) */
.msg-reply { position: relative; display: flex; align-items: center; gap: 7px; height: 22px; font-size: 13px; color: var(--brush-text-muted, #8999AA); cursor: pointer; margin-left: 0; }
.reply-curve { position: absolute; left: -37px; top: 10px; width: 31px; height: 13px; border-left: 2px solid var(--brush-border-strong, #3A4659); border-top: 2px solid var(--brush-border-strong, #3A4659); border-top-left-radius: 6px; }
.reply-name { flex: 0 0 auto; font-weight: 600; color: var(--brush-text-secondary, #B4C6DB); white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.reply-excerpt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 460px; }
.reply-excerpt .emoji { width: 17px; height: 17px; display: inline-block; vertical-align: -3px; }
.reply-excerpt.gone { font-style: italic; }
.msg-reply:hover .reply-excerpt { color: var(--brush-text-secondary, #B4C6DB); }
.msg-failed, .composer-error {
    display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12.5px; color: var(--brush-danger-text, #FFB9C1);
}
.msg-failed .icon { color: var(--brush-danger, #F25A6C); }
.msg-sending { font-size: 12.5px; color: var(--brush-text-muted, #8999AA); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
/* the toolbar under the mouse: 38 high (3 inside), the flyout's ground, radius 8, 20 from the right, a small still shadow */
.msg-tools {
    position: absolute; right: 12px; top: -16px; display: none; gap: 0; padding: 2px 3px; border-radius: 8px;
    background: var(--brush-chat-flyout, #151C28); border: 1px solid var(--brush-border, #2A3444); box-shadow: 0 3px 12px #00000066; z-index: 4;
}
.msg.first > .msg-tools { top: -13px; }
.msg:hover .msg-tools, .msg.active .msg-tools { display: flex; }
/* Chat.ToolButton: 32, rounded 7, the icon 18 */
.tool-button { width: 32px; height: 32px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: var(--brush-text-secondary, #B4C6DB); transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out); }
.tool-button .icon { width: 18px; height: 18px; }
.tool-button:hover { background: var(--brush-hover-light, #FFFFFF14); color: var(--brush-text, #F4F3F9); }
/* reactions: 6 under the words; Chat.Reaction pills of 28 (7 and 10 inside), 6 apart, the emoji 18, the count semibold; the
   player's own on Accent.Soft with the accent's edge and its count in Accent.Label */
.reactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; margin-bottom: 6px; }
.reaction {
    position: relative; height: 28px; padding: 0 10px 0 7px; border-radius: 14px; display: inline-flex; align-items: center; gap: 6px;
    background: var(--brush-surface-raised, #141A24); border: 1px solid var(--brush-border-subtle, #1C2532); font-size: 13px; color: var(--brush-text-secondary, #B4C6DB);
    transition: border-color var(--fast) var(--ease-out), background-color var(--fast) var(--ease-out);
}
.reaction:hover { border-color: var(--brush-border-strong, #3A4659); background: linear-gradient(var(--brush-hover-light, #FFFFFF14), var(--brush-hover-light, #FFFFFF14)), var(--brush-surface-raised, #141A24); }
.reaction:active > * { transform: translateY(1px); }
.reaction.me { background: var(--brush-accent-soft, #6C49F92E); border-color: var(--brush-border-accent, #45418A); }
.reaction.me .reaction-count { color: var(--brush-accent-label, #978AFB); }
.reaction .emoji { width: 18px; height: 18px; object-fit: contain; }
/* "gg", the Vault's own drawing (ChatEmoji.GoodGame): in the emoji's box (24) a 20 x 16 square, radius 3.5, in the purple
   from #8E6BFF to #5433D6 corner to corner, its letters white in Segoe UI Black at 10.5; it scales with the box (the
   chips' 18, the picker's 24) */
.gg {
    --e: 18px; box-sizing: border-box; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: calc(var(--e) * 20 / 24); height: calc(var(--e) * 16 / 24); margin: calc(var(--e) * 4 / 24) calc(var(--e) * 2 / 24);
    padding-bottom: calc(var(--e) * 1.4 / 24); border-radius: calc(var(--e) * 3.5 / 24);
    background: linear-gradient(to bottom right, #8E6BFF, #5433D6); color: #fff;
    font-family: "Segoe UI", var(--font-ui); font-size: calc(var(--e) * 10.5 / 24); font-weight: 900; line-height: 1; letter-spacing: 0;
}
.quick-reaction .gg { --e: 24px; }
.reaction-count { font-weight: 600; margin-top: -1px; }

/* pictures and previews (docs\DESIGN.md, "Pictures and link previews") */
.pictures { display: grid; gap: 8px; margin-top: 6px; max-width: 400px; }
.pictures.n2, .pictures.n3, .pictures.n4 { grid-template-columns: 1fr 1fr; }
.picture-tile { position: relative; border-radius: 8px; overflow: hidden; background: var(--brush-chat-skeleton, #1A2230); }
.picture-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid #FFFFFF1F; pointer-events: none; transition: background-color var(--fast) var(--ease-out); }
.picture-tile:hover::after { background: #FFFFFF14; }
.pictures:not(.n1) .picture-tile { aspect-ratio: 1 / 1; }
.picture-tile img { width: 100%; height: 100%; object-fit: cover; }
.pictures.n1 .picture-tile { max-width: 400px; max-height: 300px; }
.pictures.n1 .picture-tile img { object-fit: contain; }
/* a link preview: 6 under the words, at most 432 wide, radius 8 on Chat.Chip, its left edge a bar of 3 in the community's
   colour; the site 12.5 muted, the title 15.2 semibold in the links' lilac (two lines), the description 14 on 20 (three) */
.embeds { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-width: 100%; }
/* a card's slot (the Vault's ChatMessagePreviews "slot"): the card, 4 of room and the x, one hover area the whole height of
   the card, so the mouse that goes from the card to the x never leaves it */
.embed-slot { display: flex; align-items: flex-start; width: fit-content; max-width: 100%; }
.embed {
    position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 9px 14px 12px 12px; border-radius: 8px; width: fit-content; max-width: 432px;
    min-width: 0; flex: 0 1 auto; background: var(--brush-chat-chip, #131C29); border-left: 3px solid var(--space-accent);
}
.embed-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.embed-site { font-size: 12.5px; color: var(--brush-text-muted, #8999AA); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.embed-title {
    font-size: 15.2px; font-weight: 600; line-height: 21px; color: var(--brush-accent-label, #978AFB); text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.embed-title:hover { color: var(--brush-chat-link-hot, #B9B0FD); text-decoration: underline; }
.embed-desc { margin-top: 4px; font-size: 14px; color: var(--brush-text-secondary, #B4C6DB); line-height: 20px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* the page's picture (ChatPreviewPicture): under the description 10 below it, fitting 400 x 225 in its own shape and never
   larger than its pixels (the box comes from the markup), narrower with a narrower card; a small one (both sides under 160)
   at the right as a thumbnail fitting 80 x 80, 14 from the words and 2 down. Radius 6; while it comes its place has its
   final shape on the skeleton's ground; one that cannot be had folds away (the markup) */
.embed-picture { display: block; max-width: 100%; margin-top: 10px; border-radius: 6px; overflow: hidden; background: var(--brush-chat-skeleton, #1A2230); }
.embed-picture.thumb { flex: 0 0 auto; max-width: none; margin-top: 2px; }
.embed-img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
/* its x: Button.Icon.Ghost.Small (28, the close mark 13), 4 to the right of the card and 2 down, shown while the mouse is on
   the slot; never in the keyboard's way (the message's menu has Remove preview... for the keyboard) */
.embed-remove {
    flex: 0 0 auto; width: 28px; height: 28px; margin: 2px 0 0 4px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--brush-text-secondary, #B4C6DB); visibility: hidden; opacity: 0;
    transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.embed-remove .icon { width: 13px; height: 13px; }
.embed-slot:hover .embed-remove { visibility: visible; opacity: 1; }
.embed-remove:hover { background: var(--brush-hover-light, #FFFFFF14); color: var(--brush-text, #F4F3F9); }

/* editing in place */
.edit-box { margin-top: 2px; }
.edit-hint { font-size: 12.5px; color: var(--brush-text-muted, #8999AA); margin-top: 4px; }

/* the composer (ComposerFrame: the field's ground, the control edge, radius 12, at least 52; 16 from the sides, 14 above the
   foot; the strong edge under the mouse, the accent's while it has the keyboard) */
.composer, .composer-place { position: relative; margin: 0 16px 14px; flex: 0 0 auto; }
.composer-place {
    display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 9px 12px; border-radius: 12px;
    background: var(--brush-surface-raised, #141A24); border: 1px solid var(--brush-border-subtle, #1C2532); color: var(--brush-text-secondary, #B4C6DB); font-size: 14.4px;
}
.composer-place .notice-disc.small { border: 0; background: var(--brush-hover-light, #FFFFFF14); color: var(--brush-text-secondary, #B4C6DB); }
.composer-place .notice-disc.small.accent { background: var(--brush-accent-soft, #6C49F92E); color: var(--brush-accent-label, #978AFB); }
.composer-place .notice-disc.small.warning { background: var(--brush-warning-soft, #F5B5441F); color: var(--brush-warning, #F5B544); }
.composer-place-text { flex: 1 1 auto; font-weight: 600; color: var(--brush-text, #F4F3F9); }
/* replying: the chip on top of the box (36, Chat.Chip, a hairline under it): the reply mark in the accent's label, "Replying
   to" muted and the name strong, the excerpt, the close */
.reply-chip {
    display: flex; align-items: center; gap: 0; height: 36px; padding: 0 6px 0 14px; font-size: 13px; color: var(--brush-text-muted, #8999AA);
    background: var(--brush-chat-chip, #131C29); border: 1px solid var(--brush-border, #2A3444); border-bottom: 1px solid var(--brush-border-subtle, #1C2532); border-radius: 12px 12px 0 0;
}
.reply-chip > .icon { width: 14px; height: 14px; color: var(--brush-accent-label, #978AFB); margin-right: 8px; }
.reply-chip > .muted { margin-right: 4px; }
.reply-chip b { color: var(--brush-text, #F4F3F9); font-weight: 600; margin-right: 10px; }
.reply-chip-excerpt { color: var(--brush-text-muted, #8999AA); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; margin-right: 8px; }
.reply-chip .icon-button.tiny { width: 26px; height: 26px; }
.reply-chip .icon-button.tiny > .icon { width: 13px; height: 13px; }
.reply-chip + .composer-box, .reply-chip + .composer-pictures { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
/* the pictures that go with the message: tiles of 64, 8 apart, 12 in from the box's edges */
.composer-pictures { display: flex; gap: 8px; padding: 12px 12px 0; background: var(--brush-field, #151A22); border: 1px solid var(--brush-border, #2A3444); border-bottom: 0; border-radius: 12px 12px 0 0; }
.composer-pictures + .composer-box { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.composer-picture { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--brush-chat-skeleton, #1A2230); }
.composer-picture::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid #FFFFFF2E; pointer-events: none; }
.composer-picture img { width: 100%; height: 100%; object-fit: cover; }
.composer-picture .icon-button { position: absolute; right: 3px; top: 3px; z-index: 1; width: 20px; height: 20px; background: #0B0F16E0; border-color: #FFFFFF40; }
.composer-picture .icon-button:hover { background: var(--brush-danger, #F25A6C); }
.composer-picture .icon-button > .icon { width: 10px; height: 10px; stroke-width: 2.6; }
.composer-box {
    display: flex; align-items: flex-end; gap: 0; min-height: 52px; padding: 0 9px 8px; border-radius: 12px;
    background: var(--brush-field, #151A22); border: 1px solid var(--brush-border, #2A3444); transition: border-color var(--fast) var(--ease-out);
}
.composer-box:hover { border-color: var(--brush-border-strong, #3A4659); }
.composer-box:focus-within { border-color: var(--brush-accent, #6C49F9); }
.composer:has(.reply-chip, .composer-pictures):hover .composer-box, .composer:has(.reply-chip, .composer-pictures):hover .reply-chip,
.composer:has(.reply-chip, .composer-pictures):hover .composer-pictures { border-color: var(--brush-border-strong, #3A4659); }
.composer:has(.reply-chip, .composer-pictures):focus-within .composer-box, .composer:has(.reply-chip, .composer-pictures):focus-within .reply-chip,
.composer:has(.reply-chip, .composer-pictures):focus-within .composer-pictures { border-color: var(--brush-accent, #6C49F9); }
.composer-box.drop-over, .composer-text.drop-over { border-color: var(--brush-accent-bright, #8F85F9); }
/* the picture button (34, its mark 18) at the left, the words 6 after it, the emoji button (34, the smile 19) and Send at the right */
.composer-box > .icon-button { width: 34px; height: 34px; }
.composer-box > .icon-button:first-child > .icon { width: 18px; height: 18px; }
.composer-box > .icon-button:nth-last-child(2) { margin-right: 4px; }
.composer-text {
    flex: 1 1 auto; min-width: 0; resize: none; border: 0; outline: none; background: transparent; padding: 0; margin: 14px 8px 5px 16px; max-height: 176px;
    font-size: 15.2px; line-height: 20px; color: var(--brush-text, #F4F3F9); overflow-y: auto;
}
.composer-box > .icon-button ~ .composer-text { margin-left: 6px; }
.composer-text::placeholder { color: var(--brush-text-muted, #8999AA); opacity: 1; }
.composer-text.edit { width: 100%; margin: 0; border: 1px solid var(--brush-border, #2A3444); border-radius: 8px; background: var(--brush-field, #151A22); padding: 8px 10px; line-height: 22px; }
.composer-text.edit:focus { border-color: var(--brush-accent, #6C49F9); }
/* Send: Button.Primary at 34, radius 8, the arrow 16; with nothing to send a quiet arrow on the field, never a grey block */
.send-button { width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--brush-text-muted, #8999AA); flex: 0 0 auto; position: relative; isolation: isolate; }
.send-button > .icon { width: 16px; height: 16px; }
.send-button:disabled { opacity: .45; }
.send-button.ready { color: #fff; }
.send-button.ready::after {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; border: 1px solid transparent;
    background: var(--brush-button-primary) padding-box, var(--brush-button-sheen) border-box, var(--brush-button-primary) border-box;
}
.send-button.ready:hover::after { background: var(--brush-button-primary-hot) padding-box, var(--brush-button-sheen) border-box, var(--brush-button-primary-hot) border-box; }
.send-button.ready:active::after { box-shadow: inset 0 0 0 99px var(--brush-button-press, #0000002E); }
.send-button.ready:active > .icon { transform: translateY(1px); }
.composer-count { position: absolute; right: 12px; top: -22px; font-size: 12px; color: var(--brush-text-muted, #8999AA); }
.composer-count.over { color: var(--brush-danger, #F25A6C); }
.composer-error { margin: 6px 4px 0; }
/* @: the names that start with what was typed (12 radius, the flyout's ground, a still shadow; rows of 36, the picture 24) */
.mention-picker {
    position: absolute; left: 0; bottom: calc(100% + 6px); min-width: 240px; width: min(340px, 100%); max-height: 320px; overflow-y: auto; padding: 6px; z-index: 20;
    background: var(--brush-chat-flyout, #151C28); border: 1px solid var(--brush-border, #2A3444); border-radius: 12px; box-shadow: 0 6px 22px #00000073;
}
.mention-row { --ring: var(--brush-chat-flyout, #151C28); display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px 6px 8px; border-radius: 8px; text-align: left; }
.mention-row.active, .mention-row:hover { background: var(--brush-accent-soft, #6C49F92E); }
.mention-row-name { font-size: 14.4px; font-weight: 600; }
.mention-row-name.everyone { color: var(--brush-warning-text, #FBDFA6); }
.mention-row-tag { margin-left: auto; font-size: 12.5px; color: var(--brush-text-muted, #8999AA); }
.mention-row-text { display: flex; flex-direction: column; gap: 1px; }
.mention-row-hint { font-size: 12.5px; color: var(--brush-text-muted, #8999AA); line-height: 17px; }
.everyone-disc { width: 24px; height: 24px; border-radius: 50%; background: var(--brush-chat-mentionpill-me, #F5B5442E); color: var(--brush-warning-text, #FBDFA6); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; align-self: flex-start; margin-top: 1px; }
/* @freespin in a server's free spin room (freespin1): the wheel in a purple disc, the command in the wheel's lilac */
.freespin-disc { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #A97CFF 0%, #6C3BDB 65%, #4A1FAF 100%); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; align-self: flex-start; margin-top: 1px; box-shadow: 0 0 0 1px #E7B05266; }
.mention-row-name.freespin { color: var(--brush-text-lilac, #C9B8FF); }
/* FS-MOBILE (2026-10-14): the @ list keeps to the part of the page a phone's keyboard leaves in sight (--vv-height, js\app.js:
   the box and its margins under the list, a little room above it), so its first row (@freespin in a free spin room) is
   never above what is in sight; it scrolls when the part is short */
.mention-picker { max-height: min(320px, calc(var(--vv-height, 100dvh) - 84px)); }
/* a finger (a phone, a tablet): the box's words at 16 (under that Safari zooms the page in when the box is tapped), its
   buttons and the @ list's rows 44 */
@media (pointer: coarse) {
    .composer-text { font-size: 16px; }
    .composer-box > .icon-button, .composer-box > .send-button { width: 44px; height: 44px; }
    .mention-row { min-height: 44px; }
}

/* the emoji picker (ChatEmojiPicker: 384 wide and 440 high while there is room, the flyout's ground, the edge #2C3647,
   radius 12, a still shadow). It hangs 6 from its button with the right edges in line (OverlayHost: AnchorGap 6): over
   the message box's emoji button, whose top is 9 under the box's, so it reaches 2 into the box's edge; under the
   toolbar's React for a reaction */
.picker {
    position: absolute; z-index: 62; width: 384px; max-width: calc(100vw - 24px); height: min(440px, calc(100dvh - 90px)); display: flex; flex-direction: column;
    background: var(--brush-chat-flyout, #151C28); border: 1px solid #2C3647; border-radius: 12px; box-shadow: 0 10px 28px #0000008C; animation: rise var(--normal) var(--ease-out);
}
.picker.for-composer { right: 48px; bottom: calc(100% - 2px); }
.picker.for-reaction { right: calc(100% - 35px); top: 41px; }
.picker-top { display: flex; gap: 8px; padding: 12px 12px 8px; align-items: center; flex: 0 0 auto; }
/* Input.Text at 34: the field's ground, the control edge, radius 8, 13 inside, the magnifier 17 and 14 after it */
.search-field {
    flex: 1 1 auto; display: flex; align-items: center; gap: 14px; height: 34px; padding: 0 8px 0 13px; border-radius: 8px;
    background: var(--brush-field, #151A22); border: 1px solid var(--brush-border, #2A3444); color: var(--brush-text-muted, #8999AA);
    transition: border-color var(--fast) var(--ease-out);
}
.search-field > .icon { width: 17px; height: 17px; }
.search-field:hover { border-color: var(--brush-border-strong, #3A4659); }
.search-field:focus-within { border-color: var(--brush-accent, #6C49F9); }
.search-field input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; color: var(--brush-text, #F4F3F9); font-size: 13.5px; padding: 0 0 1px 2px; }
.search-field input::placeholder { color: var(--brush-text-muted, #8999AA); opacity: 1; }
.search-field.wide { margin: 8px 0 6px; height: 40px; }
/* the skin tone: the raised hand (22) on a 34 square with no ground of its own, a wash under the mouse */
.tone-button { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: background-color var(--fast) var(--ease-out); }
.tone-button:hover { background: var(--brush-hover-light, #FFFFFF14); }
.tone-button:active .emoji { transform: translateY(1px); }
.tone-button .emoji { width: 22px; height: 22px; }
/* the categories: tabs of 32 in equal parts, 1 apart from their part's edge (so 2 between), 10 from the sides, 6 over the
   hairline (Border.Subtle) */
.picker-tabs { display: flex; flex: 0 0 auto; gap: 2px; padding: 0 11px 6px; border-bottom: 1px solid var(--brush-border-subtle, #1C2532); }
.picker-tab { flex: 1 1 0; min-width: 0; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--brush-text-muted, #8999AA); border: 1px solid transparent; transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out); }
.picker-tab .icon { width: 18px; height: 18px; }
.picker-tab:hover { background: var(--brush-hover-light, #FFFFFF14); color: #fff; }
.picker-tab.selected { background: var(--brush-toggle-on, #6C49F938); border-color: var(--brush-toggle-on-edge, #7D5DFB8C); color: var(--brush-chat-link-hot, #B9B0FD); }
/* the grid (ChatEmojiGrid): 6 over its first label (the scroll's 4 and the grid's 2), labels of 30 with their words 9
   down and 4 in, cells of 40 nine to a row from 7 in, 8 under the last row; the rest of the height is the grid's */
.picker-grid-wrap { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 6px 0 8px 7px; scrollbar-width: thin; scrollbar-color: #2A3444 transparent; }
.picker-grid-wrap .group-label { padding: 9px 4px 7px; height: 30px; }
.picker-grid { display: grid; grid-template-columns: repeat(9, 40px); gap: 0; justify-content: start; }
/* a cell: its wash 2 inside the cell, radius 8 (the outer 10 on a clear edge of 2); pressed, Pressed.Light over it and the
   picture 1 down */
.picker-cell { width: 40px; height: 40px; border: 2px solid transparent; border-radius: 10px; background-clip: padding-box; display: flex; align-items: center; justify-content: center; transition: background-color var(--fast) var(--ease-out); }
.picker-cell:hover { background-color: var(--brush-hover-light, #FFFFFF14); }
.picker-cell:active { background-image: linear-gradient(var(--brush-pressed-light, #FFFFFF0A), var(--brush-pressed-light, #FFFFFF0A)); }
.picker-cell:active .emoji { transform: translateY(1px); }
.picker-cell .emoji { width: 28px; height: 28px; object-fit: contain; }
/* the keyboard's choice: the purple wash (Accent.Soft); once the keyboard moved it, the focus ring (2, Accent.Bright) */
.picker-cell.selected { background-color: var(--brush-accent-soft, #6C49F92E); }
.picker-cell.selected.ring { border-color: var(--brush-accent-bright, #8F85F9); }
/* Recently used while nothing is used yet: greyed, its reason as its tooltip */
.picker-tab:disabled { opacity: .45; cursor: default; }
.picker-tab:disabled:hover { background: none; color: var(--brush-text-muted, #8999AA); }
.picker-empty { padding: 24px; text-align: center; color: var(--brush-text-muted, #8999AA); font-size: 14px; }
/* its foot: a band (#0F151E, a line on top; 12 8 12 9 inside): the emoji at 30 in a 34 box, 10 to its name (14 semibold)
   over its shortcode (12.5 muted, 1 down), then 6 to the credit (11 on 14) */
.picker-foot { flex: 0 0 auto; background: #0F151E; border-top: 1px solid var(--brush-border-subtle, #1C2532); border-radius: 0 0 11px 11px; padding: 8px 12px 9px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.picker-foot .emoji.large { width: 30px; height: 30px; margin: 2px; }
.picker-foot-text { display: flex; flex-direction: column; justify-content: center; height: 34px; min-width: 0; }
.picker-foot-name { font-size: 14px; line-height: 19px; font-weight: 600; }
.picker-foot-code { margin-top: 1px; font-size: 12.5px; line-height: 16px; color: var(--brush-text-muted, #8999AA); }
.picker-credit { width: 100%; font-size: 11px; line-height: 14px; color: var(--brush-text-muted, #8999AA); }
/* the reaction picker (ChatReactionPicker on Flyout.Panel: 6 inside, radius 12): the ten in rows of five, 40 square
   (Chat.ToolButton, radius 7), each picture 24; More under a hairline (2 5 2 5) in a row of 34 as wide as the ten. It
   hangs 6 under the toolbar's React with the right edges in line (OverlayHost: BelowRight, AnchorGap 6) */
.reaction-picker {
    position: absolute; right: calc(100% - 35px); top: 41px; z-index: 62; display: grid; grid-template-columns: repeat(5, 40px); padding: 6px; border-radius: 12px;
    background: var(--brush-chat-flyout, #151C28); border: 1px solid #2C3647; box-shadow: 0 10px 28px #0000008C; animation: rise var(--normal) var(--ease-out);
}
.quick-reaction { width: 40px; height: 40px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--brush-text-secondary, #B4C6DB); transition: background-color var(--fast) var(--ease-out); }
.quick-reaction:hover { background: var(--brush-hover-light, #FFFFFF14); }
.quick-reaction:active > * { transform: translateY(1px); }
.quick-reaction .emoji { width: 24px; height: 24px; }
.quick-reaction .icon { width: 17px; height: 17px; }
/* More: Chat.RowButton (radius 8) across the five, the smile with a plus (17) and its word (13.5 semibold, 8 after it) */
.quick-reaction.more { grid-column: 1 / -1; position: relative; width: auto; height: 34px; margin-top: 11px; gap: 8px; border-radius: 8px; font-size: 13.5px; font-weight: 600; }
.quick-reaction.more::before { content: ""; position: absolute; left: 2px; right: 2px; top: -6px; height: 1px; background: var(--brush-border-subtle, #1C2532); pointer-events: none; }
.quick-reaction.more > span { margin-top: -1px; }

/* ── the conversation's flyouts in the menu glass (weblook1, the coordinator's word of 2026-10-15: the same quality
   everywhere; docs\chat\web\look\system.md, "The conversation's flyouts"): the emoji picker, the reaction picker, the @
   list and a message's toolbar take the menu family's panel (the sign-in's panel at 0.92 with a blur of 18, its faint
   violet corner light, the light edge with the lit top, the menu's deep shadow, corners of 10), Syphon's violet under the
   mouse and for the keyboard's choice, the keyboard's ring inside, faint lines, and the sign-in's search field. Every
   size, place, probe and key is as before; only the toolbar (shown while the mouse is on a message) never fades in. ── */
.picker, .reaction-picker, .mention-picker, .msg-tools {
    background: radial-gradient(200px 130px at 0% 0%, color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 11%, transparent), transparent 100%), var(--ui-panel-glass);
    border: 1px solid var(--ui-edge); border-radius: var(--ui-radius-menu); box-shadow: var(--ui-shadow-menu), var(--ui-sheen);
    -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .picker, .reaction-picker, .mention-picker, .msg-tools {
        background: radial-gradient(200px 130px at 0% 0%, color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 11%, transparent), transparent 100%), var(--ui-panel);
    }
}
/* a short fade in towards where it opened, as a menu's (the composer's picker and the @ list open upwards) */
.picker, .mention-picker { animation: menu-in-up 140ms var(--ease-out); }
.picker.for-reaction, .reaction-picker { animation: menu-in 140ms var(--ease-out); }
/* the toolbar: a smaller shadow of the same kind, as it lies on the message it belongs to */
.msg-tools { box-shadow: 0 8px 22px #00000099, 0 1px 4px #00000066, var(--ui-sheen); }
/* under the mouse, and the keyboard's choice: Syphon's violet (a menu entry's); the icon turns lilac */
.tool-button:hover, .quick-reaction:hover, .tone-button:hover, .picker-tab:hover:not(:disabled), .picker-cell:hover,
.mention-row:hover, .mention-row.active, .picker-cell.selected { background-color: var(--ui-hover); }
.tool-button:hover, .picker-tab:hover:not(:disabled) { color: var(--brush-syphon-lilac-hot, #C4A6FC); }
.tool-button:active, .quick-reaction:active { background-color: color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 32%, transparent); }
.picker-tab.selected {
    background: color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 24%, transparent); border-color: color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 62%, transparent);
    color: var(--brush-syphon-lilac-hot, #C4A6FC);
}
.picker-cell.selected.ring { border-color: var(--brush-syphon-lilac, #A778FA); }
.mention-row { --ring: var(--ui-panel-top); border-radius: var(--ui-radius-item); }
.tool-button, .quick-reaction { border-radius: var(--ui-radius-item); }
.tool-button:focus-visible, .quick-reaction:focus-visible, .tone-button:focus-visible, .picker-tab:focus-visible, .picker-cell:focus-visible,
.mention-row:focus-visible { outline-offset: -2px; }
/* the lines and the foot: faint, as a menu's; the foot a touch deeper, as a dialog's band */
.picker-tabs { border-bottom-color: var(--ui-edge-faint); }
.quick-reaction.more::before { background: var(--ui-edge-faint); }
.picker-foot { background: color-mix(in srgb, var(--ui-band) 72%, transparent); border-top-color: var(--ui-edge-faint); border-radius: 0 0 9px 9px; }
.picker-grid-wrap, .mention-picker { scrollbar-color: #2E2A48 transparent; }
/* the picker's search is the sign-in's field */
.picker .search-field { background: var(--brush-syphon-field, #0A0A16E6); border-color: var(--ui-edge-field); }
.picker .search-field:hover { border-color: #FFFFFF40; }
.picker .search-field:focus-within { border-color: var(--brush-syphon-lilac, #A778FA); }

/* ── calm states inside a pane (ChatStatePanel: a 40 disc with its mark, a line in strong type, a quiet line, an action) ── */
.empty-state { margin: auto; padding: 32px 20px; display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; max-width: 440px; }
.empty-disc { width: 40px; height: 40px; border-radius: 50%; background: var(--brush-hover-light, #FFFFFF14); display: flex; align-items: center; justify-content: center; color: var(--brush-text-secondary, #B4C6DB); }
.empty-disc .icon { width: 18px; height: 18px; }
.empty-title { margin-top: 12px; font-size: 14.4px; font-weight: 600; }
.empty-text { margin-top: 4px; color: var(--brush-text-muted, #8999AA); font-size: 12.5px; line-height: 17px; }
.empty-actions { margin-top: 12px; display: flex; gap: 8px; }
/* the main pane's own state (weblook1, WL-PANES: EmptyState Hero, docs\chat\web\look\panes.md): one centred hero card on
   Syphon's calm ground, in the middle of what is left of the pane; a pane with nothing chosen (a room that is not there)
   is the ground itself under its header bar (on a phone only: the drawer's button, as every pane has there); Friends with
   nobody in a tab has the ground under its tabs, the welcome spin's card above the hero card when it shows. 24 from the
   pane's sides, the phone's 16. */
.pane-missing > .pane-header { background: var(--brush-chat-header, transparent); }
.pane-blank { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 32px 24px; }
.pane-blank > .empty-hero { margin: auto 0; flex: 0 0 auto; }
.pane-scroll.friends-empty { display: flex; flex-direction: column; }
.friends-empty > .empty-hero { align-self: center; flex: 0 0 auto; width: min(460px, calc(100% - 48px)); margin: auto 24px; }
@media (max-width: 759px) {
    .pane-blank { padding: 24px 16px; }
    .friends-empty > .empty-hero { width: calc(100% - 32px); margin: auto 16px; }
}

/* ── a private conversation's state and a voice room's (weblook1, WL-PANES: Chat\DirectState.razor, Chat\VoiceState.razor;
   docs\chat\web\look\panes.md): under the pane's header, Syphon's calm ground (.pane-ground) with one hero card in the
   middle; a card taller than the window starts at the top (its auto margins), never cut off above. The quiet line after a
   card's lead: 14 on 20 in the quiet colour. The card's own parts are in css\private.css. ── */
.direct-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 40px 24px;
    scrollbar-width: thin; scrollbar-color: #2A3444 transparent;
}
.direct-body > .hero-card, .direct-body > .direct-wait { margin: auto 0; flex: 0 0 auto; }
.direct-quiet { margin: 0; color: var(--ui-text-quiet); font-size: var(--ui-type-note); line-height: var(--ui-line-note); overflow-wrap: anywhere; }
@media (max-width: 759px) { .direct-body { padding: 24px 16px; } }

/* ── the tabs: the Vault's Segmented row in the sign-in's look, one rule for every .tabs of the chat (weblook1: Friends,
   Chat settings, Clear after, Server Management's roles; docs\chat\web\look\settings.md). One frame of Syphon's deep field
   with the 1 px edge (corners of 10, 3 inside); items of 34 with 14 at each side, 14.9 in the secondary colour, corners of
   7, a faint wash under the mouse; the chosen one in Syphon's violet (a wash lighter at its top, a lilac edge, white words
   and a soft glow of its colour), as every choice of a few is (the settings' choices, Server Management's Inherit, Allow
   and Deny). A row too long for its place scrolls inside its frame; on a phone Friends' five tabs stand three to a row and
   the settings' four two by two (their own rules). ── */
.tabs {
    /* never squeezed by a column that runs out of room (a scroller's own height could go down to nothing) */
    flex: 0 0 auto; display: flex; flex-wrap: nowrap; gap: 0; width: fit-content; max-width: calc(100% - 40px); overflow-x: auto; scrollbar-width: none;
    margin: 0 20px 14px; padding: 3px; border-radius: 10px; background: var(--brush-syphon-field, #0A0A16E6); border: 1px solid var(--ui-edge, #FFFFFF1A);
}
.tab {
    position: relative; flex: 0 0 auto; height: 34px; min-width: 34px; padding: 0 14px; border-radius: 7px; color: var(--brush-text-secondary, #B4C6DB);
    display: inline-flex; align-items: center; gap: 0; font-size: 14.9px; font-weight: 400; border: 1px solid transparent; white-space: nowrap;
    transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.tab:hover { background: #FFFFFF0D; color: var(--brush-text, #F4F3F9); }
.tab.selected, .tri-item.on, .settings-choice > .radio-row:has(input:checked) span {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 42%, transparent), color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 22%, transparent));
    border-color: color-mix(in srgb, var(--brush-syphon-lilac, #A778FA) 58%, transparent); color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 28%, transparent);
}
.tab .count { margin-left: 8px; }
/* the item's number (Segmented.Item's badge: 8 after the words, Caption 13 semibold, muted; a light lilac when chosen) */
.tab-count { color: var(--brush-text-muted, #8999AA); font-size: 13px; font-weight: 600; margin-left: 8px; }
.tab.selected .tab-count { color: #DCCBFF; }
/* the Friends pane: the header without its line, the tabs under it, the line under the tabs */
.friends-pane > .pane-header { border-bottom: 0; }
.friends-pane > .pane-scroll { border-top: 1px solid var(--brush-border-subtle, #1C2532); }
.pane-scroll { flex: 1 1 auto; overflow-y: auto; padding: 2px 0 16px; scrollbar-width: thin; scrollbar-color: #2A3444 transparent; }
.friends-pane .group-label { padding: 22px 16px 8px 20px; }
/* a person of Friends (ChatPersonRow: a row of at least 62, 8 in from the sides, the picture 40 at 20, the words 14 after it,
   a hairline between two people of one group; the whole row lights under the mouse) */
.person-row {
    position: relative; display: flex; align-items: center; gap: 0; min-height: 62px; margin: 2px 8px 0; padding: 0 8px 0 12px; border-radius: 8px;
    transition: background-color var(--fast) var(--ease-out);
}
.person-row:hover { background: var(--brush-hover-light, #FFFFFF14); }
.person-row + .person-row::before { content: ""; position: absolute; left: 12px; right: 8px; top: -2px; height: 1px; background: var(--brush-border-subtle, #1C2532); pointer-events: none; }
.person-row > .btn { margin-left: 8px; }
.person-row > .btn:first-of-type { margin-left: 12px; }
.person-row.compact { min-height: 52px; margin: 0; padding: 6px 0; }
.person-row.compact:hover { background: none; }
.person-main { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; text-align: left; border-radius: 8px; padding: 8px 0; }
.person-text { min-width: 0; flex: 1 1 auto; }
.person-name { font-size: 15.2px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-name .tag { font-size: 13px; margin-left: 6px; }
/* Friends (ChatFriendsView): the name, the tag where two people of the list share it (Text.Caption, 6 after), and the small
   label of the community where the two found each other (Chat.Chip on Hover.Light, radius 6, 4 2 8 3, its picture 14, 8
   after the name; "No longer in ..." with the door mark) */
.person-name-line { display: flex; align-items: center; min-width: 0; }
.person-name-line > .person-name { flex: 0 1 auto; min-width: 0; }
.person-name-line > .tag { flex: 0 0 auto; font-size: 13px; margin-left: 6px; margin-top: 1px; }
.origin-chip {
    display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 8px 3px 4px; border-radius: 6px; flex: 0 1 auto; min-width: 0;
    background: var(--brush-hover-light, #FFFFFF14); color: var(--brush-text-secondary, #B4C6DB); font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.origin-chip > .icon { width: 11px; height: 11px; margin-left: 1px; color: var(--brush-text-muted, #8999AA); stroke-width: 2; }
.origin-art { width: 14px; height: 14px; border-radius: 4px; object-fit: cover; flex: 0 0 auto; }
.origin-art.syphon { display: inline-flex; align-items: center; justify-content: center; background: var(--brush-syphon-ground, #080812); border: 1px solid var(--brush-syphon-edge, #7C3AED66); }
.origin-art.syphon img { width: 10px; height: 10px; }
.origin-name { overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
/* a request's safety line: the warning mark (13, amber) and the words in Warning.Text, wrapping, never cut */
.person-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: 12.5px; line-height: 17px; color: var(--brush-warning-text, #FBDFA6); white-space: normal; }
.person-note .icon { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 2px; color: var(--brush-warning, #F5B544); }
/* a playing friend's row: Play too is Syphon Vault's (it starts the game on a PC), said as the card says it */
.play-too-note {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; margin-right: 8px; border-radius: 8px; flex: 0 0 auto; white-space: nowrap;
    background: var(--brush-accent-soft, #6C49F92E); color: var(--brush-button-secondary-text, #CBC2FE); font-size: 13px; font-weight: 600;
}
.play-too-note .icon { width: 13px; height: 13px; }
.person-row > .icon-button, .person-row > .header-menu-wrap { margin-left: 2px; }
/* an invitation: the other player's picture with the community's (20, corners of 6) on its corner */
.invite-pictures { position: relative; width: 40px; height: 40px; flex: 0 0 auto; margin-right: 14px; }
.invite-space { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--brush-chat-messages, #0F161F); object-fit: cover; box-sizing: border-box; }
.invite-space.syphon { display: inline-flex; align-items: center; justify-content: center; background: var(--brush-syphon-ground, #080812); }
.invite-space.syphon img { width: 12px; height: 12px; }
/* a game's label (PLAYING GEMSTONERO) in the game's colour for text, as the Vault's (its colour with 38 % white) */
.friends-label[style*="--label-accent"] { color: color-mix(in srgb, var(--label-accent) 62%, #fff); }
.person-line { font-size: 13px; margin-top: 2px; color: var(--brush-text-muted, #8999AA); display: flex; gap: 6px; align-items: center; }
.person-line .icon { width: 13px; height: 13px; }
/* Find communities: compact cards, 300 to 440 wide, 10 apart, a soft light of the community's colour from the top left */
.find-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; padding: 16px 20px; }
.find-card {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0; padding: 14px 16px 15px; border-radius: 12px; min-height: 187px;
    background: radial-gradient(ellipse 80% 70% at 0% 0%, color-mix(in srgb, var(--card-accent, #6C49F9) 14%, transparent), transparent 70%), var(--brush-chat-column, #0C1118);
    border: 1px solid var(--brush-border-subtle, #1C2532);
}
.find-card-head { display: flex; gap: 12px; align-items: center; }
.find-card .kicker { letter-spacing: 0; font-size: 10.5px; color: color-mix(in srgb, var(--card-accent, #6C49F9) 62%, #fff); }
.find-art { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; }
.find-art.syphon { background: var(--brush-syphon-ground, #080812); border: 1px solid var(--brush-syphon-edge, #7C3AED66); display: flex; align-items: center; justify-content: center; }
.find-art.syphon img { width: 38px; height: 38px; }
.find-name { font-size: 17px; font-weight: 600; margin-top: 1px; }
/* the picture with an edge of the community's colour (1.5 at 55 %, the Vault's FindPicture) */
.find-art-frame { position: relative; width: 52px; height: 52px; flex: 0 0 auto; border-radius: 12px; }
.find-art-frame::after { content: ""; position: absolute; inset: 0; border-radius: 12px; border: 1.5px solid var(--card-accent, #6C49F9); opacity: .55; pointer-events: none; }
.find-head-text { min-width: 0; }
.find-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* who is there: the online dot and "19 online", 14 to the people mark and "53 members" (ChatPanel.Stat, 12.5 muted) */
.find-counts { margin-top: 3px; font-size: 12.5px; color: var(--brush-text-muted, #8999AA); display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 2px; }
.find-stat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.find-counts .icon { width: 13px; height: 13px; }
.find-stat > .online-dot { margin: 1px 0 0; }
/* the game's chip at the foot (radius 10, 7 2 9 3 inside, 12 semibold, Hover.Light): Syphon's "For everyone" in the purple
   wash with the accent's label colour */
.find-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 3px 7px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap;
    background: var(--brush-hover-light, #FFFFFF14); color: var(--brush-text-secondary, #B4C6DB); overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.find-chip .icon { width: 12px; height: 12px; stroke-width: 2.2; flex: 0 0 auto; }
.find-chip.everyone { background: var(--brush-accent-soft, #6C49F92E); color: var(--brush-accent-label, #978AFB); }
.find-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* the foot keeps its buttons whole on a narrow card: the chip gives way first (its tooltip says it all) */
.find-foot .link-button, .find-foot .btn { flex: 0 0 auto; white-space: nowrap; }
.find-foot .find-leave { color: var(--brush-text-muted, #8999AA); margin-right: 2px; }
.find-desc { margin: 12px 0 0; color: var(--brush-text-secondary, #B4C6DB); font-size: 14px; line-height: 20px; flex: 1 1 auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.find-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.find-foot .chip { height: 22px; padding: 0 8px; font-size: 11.5px; }
.find-foot .link-button { font-size: 13px; font-weight: 400; color: var(--brush-text-secondary, #B4C6DB); }
.find-foot .link-button:hover { color: var(--brush-text, #F4F3F9); }

/* ── the members (272): its header, the search, the groups' labels (16 16 14 6), rows of 42 (2 apart) with the picture 32,
   the name 14.4 strong, the staff chip and a second line only when it says more ── */
.members {
    --ring: var(--brush-chat-column, #0C1118);
    width: 272px; flex: 0 0 272px; background: var(--brush-chat-column, #0C1118); border-left: 1px solid var(--brush-border-subtle, #1C2532);
    display: flex; flex-direction: column; min-height: 0;
}
.members-header { height: 54px; flex: 0 0 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 16px; border-bottom: 1px solid var(--brush-border-subtle, #1C2532); }
.members-header .column-title { line-height: normal; }
.members-counts { font-size: 12.5px; margin-top: 1px; color: var(--brush-text-muted, #8999AA); }
.members-search { margin: 10px 12px 2px; flex: 0 0 auto; }
.members-scroll { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; padding-bottom: 0; scrollbar-width: thin; scrollbar-color: #2A3444 transparent; }
.members-scroll .group-label { padding: 16px 14px 6px 16px; }
.members-note { padding: 14px 16px; font-size: 12.5px; line-height: 17px; color: var(--brush-text-muted, #8999AA); }
.member-row {
    display: flex; align-items: center; gap: 12px; height: 42px; flex: 0 0 42px; margin: 0 8px 2px; padding: 0 8px; border-radius: 8px; width: calc(100% - 16px); text-align: left;
    transition: background-color var(--fast) var(--ease-out);
}
.member-row:hover { background: var(--brush-hover-light, #FFFFFF14); }
.member-row:active { background: linear-gradient(var(--brush-pressed-light, #FFFFFF0A), var(--brush-pressed-light, #FFFFFF0A)), var(--brush-hover-light, #FFFFFF14); }
.member-row.more { margin: 2px 8px 6px; }
.member-text { display: flex; flex-direction: column; min-width: 0; }
.member-name { font-size: 14.4px; line-height: 19px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; }
.member-name.accent { color: var(--brush-accent-label, #978AFB); font-size: 13.5px; margin-top: -1px; }
.member-row.offline .member-name { color: var(--brush-text-muted, #8999AA); font-weight: 400; }
.member-line { font-size: 12.5px; margin-top: 1px; color: var(--brush-text-muted, #8999AA); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.more-disc { width: 32px; height: 32px; border-radius: 50%; background: var(--brush-accent-soft, #6C49F92E); color: var(--brush-accent-label, #978AFB); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.more-disc .icon { width: 15px; height: 15px; }
/* the offline switch at the panel's foot, a row of 38 under a line (the eye 16, 13.5 strong words in the secondary colour) */
.member-toggle {
    position: sticky; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 0 18px 2px 20px; height: 53px; flex: 0 0 53px; width: 100%;
    background: var(--brush-chat-column, #0C1118); border-top: 1px solid var(--brush-border-subtle, #1C2532); color: var(--brush-text-secondary, #B4C6DB); font-size: 13.5px; font-weight: 600;
}
.member-toggle::before { content: ""; position: absolute; left: 8px; right: 8px; top: 6px; bottom: 8px; border-radius: 8px; z-index: -1; transition: background-color var(--fast) var(--ease-out); }
.member-toggle:hover::before { background: var(--brush-hover-light, #FFFFFF14); }
.member-toggle .icon { width: 16px; height: 16px; stroke-width: 1.9; color: var(--brush-text-muted, #8999AA); }
.members-scroll > .member-row:last-child, .members-scroll > .group-label + .member-row:last-child { margin-bottom: 8px; }

/* ── pictures of players (ChatAvatar): a picture or the initial (42 % of the size, semibold) on its gradient; the presence
   mark on the circle's lower right at 45 degrees, on a ring of the ground (2 for a picture up to 24, 3 above): a disc
   (online), a disc with a play mark (in a game), a crescent (away), a disc with a bar (busy), a ring (offline) ── */
.avatar { position: relative; width: var(--size, 40px); height: var(--size, 40px); border-radius: 50%; display: inline-flex; flex: 0 0 auto; }
.avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar-initial {
    width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 600; font-size: calc(var(--size, 40px) * 0.42); line-height: 1; user-select: none; padding-bottom: calc(var(--size, 40px) * 0.04);
}
.avatar.dim .avatar-img, .avatar.dim .avatar-initial { opacity: .5; }
.g0 { --g1: #8E6BFF; --g2: #5433D6; }
.g1 { --g1: #5689EC; --g2: #2A52B8; }
.g2 { --g1: #1F9A97; --g2: #0D666D; }
.g3 { --g1: #2E9B62; --g2: #176B41; }
.g4 { --g1: #BD7524; --g2: #84490C; }
.g5 { --g1: #DB58A7; --g2: #9E2D76; }
.g6 { --g1: #E35A69; --g2: #A82D42; }
.g7 { --g1: #71819B; --g2: #47556E; }
.avatar-initial.g0, .avatar-initial.g1, .avatar-initial.g2, .avatar-initial.g3, .avatar-initial.g4, .avatar-initial.g5, .avatar-initial.g6, .avatar-initial.g7 {
    background: linear-gradient(to bottom right, var(--g1), var(--g2));
}
.presence {
    /* the mark's diameter: 8 for a picture up to 24, 10 up to 34, 12 up to 48, else 16; its ring 2 up to 24, else 3 */
    --d: calc(8px + clamp(0px, (var(--size, 40px) - 24px) * 1000, 2px) + clamp(0px, (var(--size, 40px) - 34px) * 1000, 2px) + clamp(0px, (var(--size, 40px) - 48px) * 1000, 4px));
    --rw: calc(2px + clamp(0px, (var(--size, 40px) - 24px) * 1000, 1px));
    position: absolute; width: calc(var(--d) + 2 * var(--rw)); height: calc(var(--d) + 2 * var(--rw));
    left: calc(var(--size, 40px) * 0.8536 - var(--d) / 2 - var(--rw)); top: calc(var(--size, 40px) * 0.8536 - var(--d) / 2 - var(--rw));
    border-radius: 50%; border: var(--rw) solid var(--ring, var(--brush-chat-column, #0C1118)); background: var(--ring, var(--brush-chat-column, #0C1118));
}
.presence::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.presence.online::after, .presence.playing::after { background: var(--brush-chat-voice, #21C246); }
/* a small white play mark in the green */
.presence.playing::before {
    content: ""; position: absolute; inset: 0; z-index: 1; background: #fff;
    clip-path: polygon(36.3% 32%, 69.8% 50%, 36.3% 68%);
}
/* away: an amber crescent (a bite of the ground's colour at its upper left) */
.presence.away::after { background: radial-gradient(circle at 22.5% 25%, var(--ring, #0C1118) calc(var(--d) * 0.36), var(--brush-warning, #F5B544) calc(var(--d) * 0.36 + 0.6px)); }
/* busy: a red disc with a bar of the ground cut through its middle */
.presence.busy::after { background: var(--brush-danger, #F25A6C); }
.presence.busy::before { content: ""; position: absolute; z-index: 1; left: 22.5%; width: 55%; top: 41.5%; height: 17%; border-radius: 1px; background: var(--ring, #0C1118); }
/* offline and invisible: a ring */
.presence.offline::after, .presence.invisible::after { box-shadow: inset 0 0 0 max(1.5px, calc(var(--d) * 0.22)) var(--brush-text-faint, #5C6C84); }
.msg .presence, .message-list .presence { --ring: var(--brush-chat-messages, #0F161F); }
.rail .presence { --ring: var(--brush-chat-rail, #0A0F15); }
.presence-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; position: relative; background: transparent; box-shadow: inset 0 0 0 2.2px var(--brush-text-faint, #5C6C84); margin-right: 7px; }
.presence-dot.online { background: var(--brush-chat-voice, #21C246); box-shadow: none; }
.presence-dot.away { background: radial-gradient(circle at 22.5% 25%, var(--ring, #161D29) 3.6px, var(--brush-warning, #F5B544) 4.2px); box-shadow: none; }
.presence-dot.busy { background: var(--brush-danger, #F25A6C); box-shadow: none; }
.presence-dot.busy::after { content: ""; position: absolute; left: 22.5%; width: 55%; top: 41.5%; height: 17%; background: var(--ring, #161D29); }
.mini-art { width: 20px; height: 20px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; }
.mini-art.syphon { background: var(--brush-syphon-ground, #080812); border: 1px solid var(--brush-syphon-edge, #7C3AED66); display: inline-flex; align-items: center; justify-content: center; }
.mini-art.syphon img { width: 15px; height: 15px; }

/* ── the profile card (ChatProfileCard.xaml, the profile polish of 2026-10-09): 340 wide on a ground of its own (lighter at
   the top) whose still shadow takes a deep shade of the player's own colour; the banner (72) runs into the card with a
   touch of that colour, which lies as a soft light under it; the picture 64 on its 72 disc over the banner's edge with a
   ring of 3 in that colour; the buttons beside it; the name (20); the tag and the community; the presence, or for a player
   in a game the game's own small card; the middle set into the card as an inset with the facts, each with its mark in the
   player's colour mixed with white. In the sign-in's look (weblook1, WL-SETTINGS; docs\chat\web\look\settings.md): the
   Syphon panel, the 1 px edge lit at its top, 16.5 corners, the deep still shadow with a shade of the player's colour in
   it, the inset of Syphon's deep field, the chips on a faint glass. Its actions stand in .card-buttons ("Adding an action
   to the profile card" in settings.md). ── */
.card-backdrop { position: fixed; inset: 0; z-index: 70; background: transparent; }
.profile-card {
    /* the player's own colour (ChatAccent): the game's when the banner is a game's, the picture's when it is one of the
       Vault's own, else the initial's; made readable as ChatAccent.Readable does (the same hue at 62 % lightness, a
       saturation of 55 to 90 %) */
    --pc-raw: var(--g1, #6C49F9);
    --pc: hsl(from var(--pc-raw) h clamp(55, s, 90) 62);
    --pc-light: color-mix(in srgb, var(--pc) 62%, #fff);
    --pc-shadow: color-mix(in srgb, var(--pc) 18%, #000);
    --ring: var(--ui-panel-top, #121220);
    position: fixed; z-index: 71; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 340px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto;
    border-radius: var(--ui-radius-card, 16.5px); background: var(--ui-panel, linear-gradient(180deg, #121220 0%, #0C0C18 100%)); border: 1px solid transparent;
    box-shadow: var(--ui-shadow-card, 0 30px 80px #000000A0), 0 14px 40px color-mix(in srgb, var(--pc-shadow) 55%, transparent);
    padding-bottom: 6px; animation: lift var(--normal) var(--ease-out); scrollbar-width: none;
}
.profile-card:has(.card-disc img[src*="avatars/vault."]) { --pc-raw: var(--accent-avatar-vault, var(--g1, #6C49F9)); }
.profile-card:has(.card-disc img[src*="avatars/crystal."]) { --pc-raw: var(--accent-avatar-crystal, var(--g1, #6C49F9)); }
.profile-card:has(.card-disc img[src*="avatars/guardian."]) { --pc-raw: var(--accent-avatar-guardian, var(--g1, #6C49F9)); }
.profile-card:has(.card-disc img[src*="avatars/fox."]) { --pc-raw: var(--accent-avatar-fox, var(--g1, #6C49F9)); }
.profile-card:has(.card-banner img[src*="games/gemstonero/"]) { --pc-raw: var(--accent-game-gemstonero, #9B5CFF); --game: var(--accent-game-gemstonero, #9B5CFF); --game-art: url("/art/games/gemstonero/thumb.jpg"); }
.profile-card:has(.card-banner img[src*="games/loki/"]) { --pc-raw: var(--accent-game-loki, #FF66CB); --game: var(--accent-game-loki, #FF66CB); --game-art: url("/art/games/loki/thumb.jpg"); }
.profile-card:has(.card-banner img[src*="games/freya/"]) { --pc-raw: var(--accent-game-freya, #E9B657); --game: var(--accent-game-freya, #E9B657); --game-art: url("/art/games/freya/thumb.jpg"); }
.profile-card:has(.card-banner img[src*="games/gemstonewow/"]) { --pc-raw: var(--accent-game-gemstonewow, #58B4FF); --game: var(--accent-game-gemstonewow, #58B4FF); --game-art: url("/art/games/gemstonewow/thumb.jpg"); }
.profile-card:has(.card-banner img[src*="games/defiantscape/"]) { --pc-raw: var(--accent-game-defiantscape, #2F6BFF); --game: var(--accent-game-defiantscape, #2F6BFF); --game-art: url("/art/games/defiantscape/thumb.jpg"); }
/* Syphon's own banner: Syphon's violet (ChatAccent.Syphon). An uploaded banner or picture: the colour the card sampled from
   it (js/profile-card.js, as ChatAccent.Sample), set on the card itself as --pc-raw (WEB-CARD) */
.profile-card:has(.card-banner .syphon-ground) { --pc-raw: #7C3AED; }
/* the edge, lighter at the top; the light of the player's colour from 58 below the top, falling off downwards */
.profile-card::before {
    content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(180deg, #FFFFFF33 0%, var(--ui-edge, #FFFFFF1A) 26%, var(--ui-edge, #FFFFFF1A) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.profile-card::after {
    content: ""; position: absolute; left: 1px; right: 1px; top: 58px; height: 220px; z-index: -1; pointer-events: none; border-radius: 0 0 15.5px 15.5px;
    background: radial-gradient(ellipse 80% 100% at 50% 0%, color-mix(in srgb, var(--pc) 22%, transparent) 0%, color-mix(in srgb, var(--pc) 10%, transparent) 45%, transparent 100%);
    animation: fade 420ms var(--ease-out);
}
@keyframes lift { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
.card-banner {
    position: relative; height: 72px; border-radius: 15.5px 15.5px 0 0; overflow: hidden;
    background: radial-gradient(ellipse 120% 140% at 20% 0%, #191930 0%, #10101C 45%, #0A0A14 100%);
}
.card-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 85% 30%; }
/* the banner runs into the panel's own top colour */
.card-banner-fade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--ui-panel-top, #121220) 35%, transparent) 72%, color-mix(in srgb, var(--ui-panel-top, #121220) 78%, transparent) 100%);
}
.card-banner-fade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--pc) 24%, transparent) 100%); }
/* the head: the picture's disc 12 from the left with its top 28 over the banner's edge; the buttons 16 from the right, level
   with the disc's foot (10 under the banner) */
.card-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; min-height: 72px; padding: 0 16px 0 12px; margin-top: -28px; }
.card-disc { position: relative; width: 72px; height: 72px; border-radius: 50%; background: color-mix(in srgb, var(--ui-panel-top, #121220) 95%, transparent); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
/* the ring: 3 wide, 70 across, the player's colour light at its top left and fading out towards the presence mark */
.card-disc::before {
    content: ""; position: absolute; inset: 1px; border-radius: 50%; padding: 3px; pointer-events: none; opacity: .4;
    background: linear-gradient(153.4deg, color-mix(in srgb, var(--pc) 68%, #fff) 8.3%, var(--pc) 54.2%, color-mix(in srgb, var(--pc) 25%, transparent) 91.7%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* it breathes three times while the player is online (0.5 to 1 and back, 2.6 s each), then rests at 0.9; 0.4 while away,
   busy or offline */
.card-disc:has(.presence.online, .presence.playing)::before { opacity: .9; animation: ring-breathe 2.6s var(--ease-sine) 3, ring-settle var(--slow) var(--ease-out) 7.8s 1 forwards; }
@keyframes ring-breathe { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes ring-settle { from { opacity: .5; } to { opacity: .9; } }
.card-disc .avatar { position: relative; z-index: 1; }
/* the actions: small buttons 6 apart at the head's right, level with the disc's foot; More (the dots) always last. Should
   more stand there than the row holds, they wrap and the head grows over the banner, all at the right (settings.md,
   "Adding an action to the profile card") */
.card-buttons { position: relative; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; }
.card-name { padding: 7px 16px 0; min-height: 35px; font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 0; }
.card-name .role-badge { margin-left: 9px; margin-top: 2px; }
.card-tagline { padding: 1px 16px 0; display: flex; align-items: center; gap: 8px; height: 21px; }
.card-tagline .tag { margin-left: 0; font-size: 13px; }
.card-tagline .chip { height: 19px; padding: 0 8px; font-size: 11.5px; color: var(--brush-text-secondary, #B4C6DB); }
/* the presence line (26 high); a player in a game: the game's own small card (34 high, corners of 10, a wash of the game's
   colour from 20 % at its left to 6 % with an edge of 32 %, the game's picture 24, the live dot with its soft rings, the
   words in the playing green, semibold) */
.card-presence { margin: 1px 16px 0; min-height: 26px; font-size: 13.5px; color: var(--brush-text-secondary, #B4C6DB); display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.card-presence.playing {
    --g: var(--game, var(--pc));
    display: grid; grid-template-columns: 33px 17px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 0;
    margin: 5px 12px 0; min-height: 34px; padding: 4px 10px 4px 4px; border-radius: 10px; color: var(--brush-success-text, #C4F0E4); font-weight: 600;
    background: linear-gradient(90deg, color-mix(in srgb, var(--g) 20%, transparent), color-mix(in srgb, var(--g) 6%, transparent));
    border: 1px solid color-mix(in srgb, var(--g) 32%, transparent);
}
/* the game's own picture (24, corners of 7), and under the words the quiet line that playing too is in Syphon Vault */
.card-presence.playing::before {
    content: ""; grid-row: 1 / span 2; grid-column: 1; width: 24px; height: 24px; border-radius: 7px;
    background: var(--game-art, none) center 30% / cover no-repeat, var(--brush-hover-light, #FFFFFF14);
}
.card-presence.playing .presence-dot { grid-column: 2; margin: 1px 0 0; }
.card-presence.playing .card-vault-note { grid-row: 2; grid-column: 2 / 4; margin: 0; font-size: 12px; line-height: 15px; }
.card-presence.playing .presence-dot { position: relative; }
.card-presence.playing .presence-dot.online::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--brush-online, #21C246); opacity: 0; pointer-events: none;
    animation: live-ripple 1.7s var(--ease-out) 3;
}
@keyframes live-ripple { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(2.4); } }
.card-vault-note { margin-left: auto; font-size: 12.5px; font-weight: 400; color: var(--brush-text-muted, #8999AA); }
/* the middle, set into the card (7 from its sides, 12 under the head and 6 above its foot, corners of 10, a little deeper
   than the card, a faint edge); its words 16 from the card's edge; it fades in where its outline stood */
.card-inset {
    margin: 12px 7px 0; padding: 11px 8px 9px; border-radius: 12px; background: color-mix(in srgb, #0A0A16 72%, transparent); border: 1px solid var(--ui-edge-faint, #FFFFFF12);
    display: flex; flex-direction: column; gap: 0; animation: fade var(--normal) var(--ease-out);
}
.card-inset .group-label { display: flex; align-items: center; height: 20px; padding: 0; margin-top: 17px; }
/* a flex line drops the space before the count: the Vault's 9 whole */
.card-inset .label-count { margin-left: 9px; }
/* a fact: its mark (14, the line icons' pen) in the player's colour mixed 38 % with white, 7 before its words (13 on 18) */
.card-fact { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; line-height: 18px; margin-bottom: 3px; color: var(--brush-text-secondary, #B4C6DB); }
.card-fact .icon { width: 14px; height: 14px; stroke-width: 1.9; margin-top: 2px; color: var(--pc-light); }
/* about comes first (14 on 20, the paragraph's colour, three lines at most) */
.card-about {
    order: -1; margin-bottom: 5px; font-size: 14px; line-height: 20px; color: var(--brush-text-secondary, #B4C6DB); white-space: pre-wrap; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
/* Card.Chip: 28 high, 4 and 11 inside, radius 14, Surface.Raised with the subtle edge, 13 semibold in the secondary colour;
   under the mouse a wash (16 %) and an edge (55 %) of the player's colour */
.card-chip {
    --ring: #16162A;
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 4px; border-radius: 14px; max-width: 160px;
    background: #FFFFFF0A; border: 1px solid var(--ui-edge, #FFFFFF1A); font-size: 13px; font-weight: 600; color: var(--brush-text-secondary, #B4C6DB);
    white-space: nowrap; overflow: hidden; transition: background-color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
button.card-chip:hover { background: color-mix(in srgb, var(--pc) 18%, transparent); border-color: color-mix(in srgb, var(--pc) 55%, transparent); color: var(--brush-text, #F4F3F9); }
.card-menu { top: calc(100% + 4px); }
/* beside what opened it (js/profile-card.js, CHAT-CARD): left of the member list or right of what was pressed, its top
   level with it, 8 from the window's edges (the script sets left and top and keeps them); it comes 6 from the side it
   opens towards as it fades in (Motion.Enter, fast). Under or over it where there is no room beside it (the Vault's
   flyouts, MenuPlacement.BelowLeft): it comes down 6 */
.profile-card.anchored { left: 8px; top: 8px; transform: none; max-height: calc(100dvh - 16px); animation: card-drop var(--fast) var(--ease-out); }
.profile-card.anchored[data-side="right"] { animation-name: card-from-left; }
.profile-card.anchored[data-side="left"] { animation-name: card-from-right; }
.profile-card.anchored[data-side="middle"] { animation-name: fade; }
.profile-card:focus { outline: none; }
@keyframes card-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes card-from-left { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes card-from-right { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
/* the community's chip of the identity line (Chat.Chip on Hover.Light, radius 6, 4 1 8 2 inside): its small picture (14,
   corners of 4; Syphon's mark 10 on Syphon's ground) and its name 5 after it, which gives way first */
.card-tagline .card-place { min-width: 0; height: 20px; padding: 1px 8px 2px 4px; gap: 5px; }
.place-art { width: 14px; height: 14px; border-radius: 4px; object-fit: cover; flex: 0 0 auto; }
.place-art.syphon { display: inline-flex; align-items: center; justify-content: center; background: var(--brush-syphon-ground, #080812); border: 1px solid var(--brush-syphon-edge, #7C3AED66); }
.place-art.syphon img { width: 10px; height: 10px; }
.place-text { min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the version's mark after its dot, quieter (Brush.Text.Muted) */
.card-mark { color: var(--brush-text-muted, #8999AA); }
/* COMMUNITIES IN COMMON with Show rooms at its right (Chat.Link); open: each community a row (its picture 22, its name
   13.5 strong) with the rooms both can read under it as small chips, 30 in */
.card-label-row { display: flex; align-items: center; justify-content: space-between; height: 20px; margin-top: 17px; }
.card-inset .card-label-row .group-label { margin-top: 0; }
.card-toggle { height: 20px; padding: 0 2px; margin-right: -2px; font-size: 13px; border-radius: 4px; }
.card-toggle:focus-visible { outline: 2px solid var(--brush-accent-bright, #8F85F9); outline-offset: 1px; }
.card-shared-rows { margin: 7px 0 -6px -4px; }
.card-shared-space { margin-bottom: 6px; }
.card-space-row {
    display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 4px; border-radius: 8px; max-width: 100%;
    font-size: 13.5px; font-weight: 600; color: var(--brush-text, #F4F3F9); transition: background-color var(--fast) var(--ease-out);
}
.card-space-row:hover { background: var(--brush-hover-light, #FFFFFF14); }
.card-space-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px; }
.mini-art.big { width: 22px; height: 22px; }
.mini-art.syphon.big img { width: 16px; height: 16px; }
.card-rooms { display: flex; flex-wrap: wrap; gap: 6px; margin: 3px 0 0 30px; }
.card-chip.room { height: 24px; padding: 0 9px 0 8px; gap: 5px; font-size: 12.5px; }
.card-chip.room .icon { width: 12px; height: 12px; stroke-width: 1.9; color: var(--brush-text-muted, #8999AA); }
.card-inset > .skeleton-line { height: 11px; border-radius: 5px; }
/* one line of chips each, as the Vault's card (ChatProfileCard.FitLines, WEB-POLISH): the friends in common and the
   communities in common stand on one line, as many as fit (js/profile-card.js, fitLines), the rest counted on "+N"
   (Card.Chip.More: at least 40 wide, 9 inside, the accent's label colour), which opens the whole list; a name too long
   for its chip ends in dots (Card.Chip.Text) */
.chips.line { flex-wrap: nowrap; overflow: hidden; }
.chips.line > .card-chip { flex: 0 0 auto; }
.card-chip.out { display: none; }
.card-chip .chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.card-chip.more { min-width: 40px; padding: 0 9px 2px; justify-content: center; color: var(--brush-accent-label, #978AFB); }
/* "and 3 more" under the open list, "No friends in common" (Text.Caption) */
.card-caption { margin-top: 6px; font-size: 13px; color: var(--brush-text-muted, #8999AA); }
.card-caption.none { margin-top: 5px; }

/* ── the dialog family (weblook1, chat\WEB-LOOK-CONTRACT.md section 2; docs\chat\web\look\system.md): the overlay host's
   frame in the sign-in card's look. The backdrop dims the chat with a violet tint and a blur (a deeper solid tint where
   the browser cannot blur); the dialog is the auth card's panel, edge, 16.5 corners and deep shadow, with the lit top
   edge; it rises 10 and fades in (260 ms; nothing moves with reduced motion). Its kind's light in the top left corner
   (.dialog-light: violet, .danger red, .warning amber, .space the community's colour) and its disc (.notice-disc.large,
   the hero disc's glass and glow in the kind's colour; or a .hero-disc of its own); the title 22.6 semibold, the words
   in Syphon's dim lilac blue; the footer band a touch deeper with a faint line, the quiet button on the left and the
   main one on the right, which glows. Fields, selects and search boxes in a dialog are the sign-in's own. ── */
.dialog-backdrop {
    position: fixed; inset: 0; z-index: 80;
    background: radial-gradient(ellipse 70% 60% at 50% 46%, #2E1A6638 0%, transparent 72%), #06050FAD;
    -webkit-backdrop-filter: blur(6px) saturate(118%); backdrop-filter: blur(6px) saturate(118%);
    animation: fade var(--normal) var(--ease-out);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .dialog-backdrop { background: radial-gradient(ellipse 70% 60% at 50% 46%, #2E1A6638 0%, transparent 72%), #06050FE0; }
}
.dialog-backdrop.top { z-index: 90; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.dialog {
    position: fixed; z-index: 81; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 460px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #2E2A48 transparent;
    padding: 30px var(--ui-card-pad-x) 0; border-radius: var(--ui-radius-card); isolation: isolate; --ring: var(--ui-panel-top);
    background: var(--ui-panel); border: 1px solid var(--ui-edge); box-shadow: var(--ui-shadow-card), var(--ui-sheen);
    display: flex; flex-direction: column; gap: var(--ui-card-gap); animation: dialogIn var(--slow) var(--ease-out);
}
.dialog.question { z-index: 91; }
@keyframes dialogIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
/* the kind's light in the top left corner (the hero card's own) */
.dialog-light {
    position: absolute; left: 0; top: 0; width: 300px; height: 220px; max-width: 100%; z-index: -1; pointer-events: none; border-radius: var(--ui-radius-card) 0 0 0;
    background: radial-gradient(300px 220px at 0% 0%, var(--ui-light), transparent 100%);
}
.dialog-light.danger, .dialog.danger .dialog-light { background: radial-gradient(300px 220px at 0% 0%, var(--ui-light-danger), transparent 100%); }
.dialog-light.warning, .dialog.warning .dialog-light { background: radial-gradient(300px 220px at 0% 0%, var(--ui-light-warning), transparent 100%); }
.dialog-light.space { background: radial-gradient(300px 220px at 0% 0%, color-mix(in srgb, var(--space-accent) 28%, transparent), transparent 100%); }
/* the kind's disc: the hero disc's glass, ring and glow (question and accent violet, .danger red, .warning amber, .success green) */
.dialog .notice-disc.large {
    --disc: var(--color-syphon-violet, #7C3AED);
    width: 52px; height: 52px; margin-bottom: 4px; position: relative; color: color-mix(in srgb, var(--disc) 42%, #fff);
    background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--disc) 44%, transparent) 0%, color-mix(in srgb, var(--disc) 14%, transparent) 72%);
    border: 1px solid color-mix(in srgb, var(--disc) 58%, transparent);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--disc) 9%, transparent), 0 10px 30px color-mix(in srgb, var(--disc) 32%, transparent);
}
.dialog .notice-disc.large.danger { --disc: var(--color-danger, #F25A6C); }
.dialog .notice-disc.large.warning { --disc: var(--color-warning, #F5B544); }
.dialog .notice-disc.large.success { --disc: var(--color-success, #3DE6A3); }
.dialog .notice-disc.large > .icon { width: 22px; height: 22px; }
.dialog > .hero-disc { width: 52px; height: 52px; }
.dialog > .hero-disc.brand > img { width: 34px; height: 34px; }
.dialog-title { margin: 4px 0 0; font-size: var(--ui-type-title); font-weight: 600; line-height: 1.3; position: relative; text-wrap: balance; overflow-wrap: anywhere; }
.dialog-text { margin: 0; color: var(--ui-text-lead); font-size: var(--ui-type-lead); line-height: var(--ui-line-lead); position: relative; overflow-wrap: anywhere; }
.dialog-text.quiet { color: var(--ui-text-quiet); font-size: var(--ui-type-note); line-height: var(--ui-line-note); }
/* the band: the dialog's foot a touch deeper with a faint line on top (it stays in sight while the dialog scrolls); the
   quiet button on the left, the deciding one on the right */
.dialog-band {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px calc(-1 * var(--ui-card-pad-x)) 0; padding: 16px var(--ui-card-pad-x);
    min-height: 76px; flex: 0 0 auto; position: sticky; bottom: 0; z-index: 1;
    background: var(--ui-band); border-top: 1px solid var(--ui-edge-faint); border-radius: 0 0 var(--ui-radius-card) var(--ui-radius-card);
}
/* the choices of a question as rows across the dialog (sign-out's two ways): an icon on a small tile of its colour, the
   words, the arrow; under the mouse Syphon's violet (a removing one: the danger red) */
.option-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.option-row {
    --opt: var(--color-syphon-violet, #7C3AED);
    position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 10px 14px 10px 12px;
    border-radius: var(--ui-radius-menu); text-align: left; color: var(--brush-text, #F4F3F9); font-size: var(--ui-type-lead); font-weight: 600; line-height: 20px;
    background: #FFFFFF08; border: 1px solid var(--ui-edge);
    transition: background-color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out);
}
.option-row:hover:not(:disabled) { background: color-mix(in srgb, var(--opt) 16%, transparent); border-color: color-mix(in srgb, var(--opt) 62%, transparent); }
.option-row:active:not(:disabled) { background: color-mix(in srgb, var(--opt) 24%, transparent); }
.option-row:focus-visible { outline-offset: 2px; }
.option-row:disabled { opacity: .5; cursor: default; }
.option-icon {
    width: 38px; height: 38px; border-radius: var(--ui-radius-menu); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--opt) 20%, transparent); border: 1px solid color-mix(in srgb, var(--opt) 42%, transparent); color: color-mix(in srgb, var(--opt) 42%, #fff);
}
.option-icon > .icon { width: 18px; height: 18px; }
.option-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.option-row > .option-go { flex: 0 0 auto; width: 16px; height: 16px; color: var(--ui-text-quiet); transition: transform var(--fast) var(--ease-out), color var(--fast) var(--ease-out); }
.option-row:hover:not(:disabled) > .option-go { color: var(--brush-text, #F4F3F9); transform: translateX(2px); }
.option-row.danger { --opt: var(--color-danger, #F25A6C); color: var(--brush-danger-text, #FFB9C1); }
.name-dialog { width: 520px; }
.name-dialog-head { display: flex; align-items: center; gap: 12px; position: relative; }
.name-dialog-art { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; border: 1px solid color-mix(in srgb, var(--space-accent) 60%, transparent); }
.name-dialog-art.syphon { background: var(--brush-syphon-ground, #080812); display: flex; align-items: center; justify-content: center; }
.name-dialog-art.syphon img { width: 30px; height: 30px; }
.name-dialog-space { font-size: 17px; font-weight: 600; }
.field-icon { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 13px; border-radius: 8px; background: var(--brush-field, #151A22); border: 1px solid var(--brush-border, #2A3444); color: var(--brush-text-muted, #8999AA); transition: border-color var(--fast) var(--ease-out); }
.field-icon:hover { border-color: var(--brush-border-strong, #3A4659); }
.field-icon:focus-within { border-color: var(--brush-accent, #6C49F9); }
.field-icon.bad { border-color: var(--brush-danger, #F25A6C); }
.field-icon input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; color: var(--brush-text, #F4F3F9); font-size: 14.9px; }
/* a dialog's fields are the sign-in's own: Syphon's deep field, the light edge, lilac while it has the keyboard */
.dialog .field, .dialog .field-icon, .dialog .search-field { background: var(--brush-syphon-field, #0A0A16E6); border-color: var(--ui-edge-field); font-size: 14.9px; }
.dialog .field:hover, .dialog .field-icon:hover, .dialog .search-field:hover { border-color: #FFFFFF40; }
.dialog .field:focus, .dialog .field-icon:focus-within, .dialog .search-field:focus-within { border-color: var(--brush-syphon-lilac, #A778FA); }
.dialog .field.bad, .dialog .field-icon.bad { border-color: var(--brush-danger, #F25A6C); }
.dialog .field.select { height: 40px; border-radius: var(--ui-radius-field); }
.dialog .field-label > .field { font-weight: 400; color: var(--brush-text, #F4F3F9); }
.dialog .group-label { padding: 14px 0 2px; }
.dialog .field-label { margin-top: 4px; }
/* Add friend's found players: the picture 36, 12 to the name and the community it was found in */
.add-friend .person-row.compact { gap: 12px; }
.add-friend .person-row.compact .person-line { margin-top: 1px; }
.dialog .person-row + .person-row::before { background: var(--ui-edge-faint); }
.dialog .invite-link-item { border-top-color: var(--ui-edge-faint); }
/* a report's quote and its notes (private.css draws them) as notes of the panel: the faint light ground and edge */
.dialog .report-quote { background: var(--ui-note); border-color: var(--ui-edge-faint); border-left-color: var(--brush-danger, #F25A6C); }
.dialog .device-lead:not(.warning):not(.danger) { background: var(--ui-note); border-color: var(--ui-edge-faint); }
@media (max-width: 520px) {
    .dialog { padding: 26px var(--ui-card-pad-x-phone) 0; max-width: calc(100vw - 20px); }
    .dialog-band { margin: 16px calc(-1 * var(--ui-card-pad-x-phone)) 0; padding: 14px var(--ui-card-pad-x-phone); }
    .dialog-title { font-size: 20px; }
}
/* Chat settings, a pane as the Vault's (ChatSettingsView), in the sign-in's look (weblook1, WL-SETTINGS;
   docs\chat\web\look\settings.md). The pane stands on Syphon's calm ground (.pane-ground in the markup; no light behind the
   middle: a page of cards). The heading (54: the gear 20 in Syphon's lilac, 10 to the title 17 semibold) and the tabs on the
   panes' 20, a faint line under them, then the cards on the 20 gutter (22 above); one column of at most 960 below a pane of
   1100, two from 1100, three from 1880 (ChatSettingsColumns). The Voice tab says only that voice is in Syphon Vault: one hero
   card in the middle of the ground, with the ground's light behind it (.centred). */
.settings-pane { container-type: inline-size; --ground-centre: 0%; }
.settings-pane.centred { --ground-centre: 18%; }
.settings-top { flex: 0 0 auto; padding: 0 20px 16px; border-bottom: 1px solid var(--ui-edge-faint, #FFFFFF12); }
.settings-title-row { height: 54px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.settings-title-row > .icon { width: 20px; height: 20px; color: var(--brush-syphon-lilac, #A778FA); }
/* the tabs (the one rule for every .tabs, "the tabs" above) under the title; on a phone two by two across the width, so no
   tab is cut */
.settings-top > .tabs { margin: 0; max-width: 100%; }
@container (max-width: 560px) {
    .settings-top > .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; width: 100%; }
    .settings-top > .tabs > .tab { justify-content: center; padding: 0 8px; }
}
.settings-scroll { padding: 22px 20px 20px; }
.settings-scroll.hero-place { display: flex; flex-direction: column; padding: 24px 20px; }
.settings-scroll.hero-place > .hero-card { margin: auto; }
.hero-card > .settings-heading-title { font-size: var(--ui-type-title, 22.6px); line-height: 1.3; }
.settings-cards { column-count: 1; column-gap: 18px; max-width: 960px; }
@container (min-width: 1100px) { .settings-cards { column-count: 2; max-width: 1680px; } }
@container (min-width: 1880px) { .settings-cards { column-count: 3; max-width: 2528px; } }
/* a card: the sign-in's card in a grid (the Syphon panel, the 1 px edge, 16.5 corners, its lit top edge, a still shadow and
   a soft violet light in its top left corner, as a dialog's), 22 24 inside, 18 under it; its heading (the hero card's disc
   at 40 with the icon 17, 14 to the title 17 semibold and one sentence in Syphon's dim lilac blue, 13.5 on 19; 18 under
   it), a setting's name (14.9 on 21) and sentence (13 on 18, quiet), a faint line between two settings (16 above and
   under). A phone: 20 at the sides. */
.settings-card {
    position: relative; isolation: isolate; break-inside: avoid; display: flex; flex-direction: column; margin: 0 0 18px; padding: 22px 24px;
    border-radius: var(--ui-radius-card, 16.5px); background: var(--ui-panel, linear-gradient(180deg, #121220 0%, #0C0C18 100%));
    border: 1px solid var(--ui-edge, #FFFFFF1A); box-shadow: var(--ui-shadow-menu, 0 18px 44px #000000A6), var(--ui-sheen, inset 0 1px 0 #FFFFFF0F);
}
.settings-card::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: radial-gradient(260px 170px at 0% 0%, color-mix(in srgb, var(--ui-light, #7C3AED3D) 75%, transparent), transparent 100%);
}
@container (max-width: 560px) {
    .settings-scroll { padding: 16px 12px 16px; }
    .settings-card { padding: 20px var(--ui-card-pad-x-phone, 20px); margin-bottom: 14px; }
}
.settings-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
/* the heading's disc is the hero card family's (.hero-disc in the markup), at 40 with a smaller glow */
.settings-heading-tile { flex: 0 0 auto; }
.settings-heading-tile.hero-disc {
    width: 40px; height: 40px; margin: 0;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--disc) 8%, transparent), 0 6px 18px color-mix(in srgb, var(--disc) 26%, transparent);
}
.settings-heading-tile.hero-disc > .icon { width: 17px; height: 17px; }
.settings-heading-tile.hero-disc.brand > img { width: 24px; height: 24px; }
.settings-words { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.settings-heading-title { font-size: 17px; line-height: 23px; font-weight: 600; color: var(--brush-text, #F4F3F9); }
.settings-heading .settings-row-text { margin-top: 1px; font-size: var(--ui-type-small, 13.5px); line-height: var(--ui-line-small, 19px); color: var(--ui-text-lead, #A5AFDC); }
.settings-row-title { font-size: 14.9px; line-height: 21px; color: var(--brush-text, #F4F3F9); }
.settings-row-text { font-size: 13px; line-height: 18px; color: var(--ui-text-quiet, #8999AA); margin-top: 2px; }
.settings-row-text.spaced { margin-top: 12px; }
/* Busy in Notifications (2026-10-09, the Vault's WarnBox): the amber note (a card's note: corners of 10), the struck bell,
   the line and Set to Online */
.settings-busy {
    display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 10px 12px; border-radius: var(--ui-radius-menu, 10px);
    background: var(--brush-warning-soft, #F5B5441F); border: 1px solid var(--brush-warning-edge, #F5B54459);
}
.settings-busy > .icon { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: var(--brush-warning, #F5B544); }
.settings-busy-line { font-size: 13px; line-height: 18px; color: var(--brush-warning-text, #FBDFA6); }
.settings-busy .link-button { align-self: flex-start; margin-top: 4px; font-size: 13px; }
.settings-line { height: 1px; background: var(--ui-edge-faint, #FFFFFF12); margin: 16px 0; flex: 0 0 auto; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.settings-row > .btn { flex: 0 0 auto; }
.settings-card .check-row.switch-row { justify-content: space-between; gap: 16px; color: inherit; }
.settings-card .avatar-choices { margin: 12px 0 10px; }
/* a part that had a card of its own in the dialog (the banner) stands in the card's flow */
.settings-card > .settings-section { background: none; border: 0; border-radius: 0; padding: 0; }
.settings-card textarea { margin-top: 10px; }
.settings-card .settings-row-end { margin-top: 10px; }
.settings-account-name { font-size: 17px; line-height: 23px; font-weight: 600; color: var(--brush-text, #F4F3F9); }
/* the fields of a card are the sign-in's: Syphon's deep field, the field's edge, corners of 8, lighter under the mouse, the
   lilac edge with the keyboard (the notices' choices too) */
.settings-card .field { background: var(--brush-syphon-field, #0A0A16E6); border-color: var(--ui-edge-field, #FFFFFF26); border-radius: var(--ui-radius-field, 8px); }
.settings-card .field:hover { border-color: #FFFFFF40; }
.settings-card .field:focus { border-color: var(--brush-syphon-lilac, #A778FA); }
.settings-card .field.bad { border-color: var(--brush-danger, #F25A6C); }
.settings-card .field.select { height: 36px; padding: 0 10px; }
/* a choice of a few (the Vault's Segmented), in the sign-in's look: one frame of Syphon's deep field with the 1 px edge
   (corners of 10, 3 inside), each 34 high with 14 at its sides; the chosen one in Syphon's violet (with the tabs, above);
   10 under its name */
.settings-choice {
    display: inline-flex; flex-wrap: wrap; align-self: flex-start; max-width: 100%; margin-top: 10px; padding: 3px; border-radius: 10px;
    background: var(--brush-syphon-field, #0A0A16E6); border: 1px solid var(--ui-edge, #FFFFFF1A);
}
.settings-choice > .radio-row { position: relative; min-height: 0; padding: 0; gap: 0; font-size: 14.9px; }
.settings-choice > .radio-row input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; border: 0; background: none; }
.settings-choice > .radio-row span {
    display: flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 7px; border: 1px solid transparent; white-space: nowrap;
    transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.settings-choice > .radio-row:hover span { background: #FFFFFF0D; }
.settings-choice > .radio-row:has(input:focus-visible) span { outline: 2px solid var(--brush-accent-bright, #8F85F9); outline-offset: 1px; }
/* a community's row (the player names, each community's notices): its picture 38 (corners of 10, a faint ring), 12 to its
   words, a faint line between two rows */
.settings-name-row { padding: 10px 0; }
.settings-name-row + .settings-name-row { border-top: 1px solid var(--ui-edge-faint, #FFFFFF12); }
.settings-art { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; box-shadow: 0 0 0 1px var(--ui-edge, #FFFFFF1A); }
.settings-art.syphon { display: inline-flex; align-items: center; justify-content: center; background: var(--brush-syphon-ground, #080812); border: 1px solid var(--brush-syphon-edge, #7C3AED66); box-shadow: none; }
.settings-art.syphon img { width: 26px; height: 26px; }
.settings-name-words { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; margin-left: 2px; }
.settings-name-words > .settings-row-text { margin-top: 0; }
.settings-name-words > .settings-name { margin-left: 0; font-size: 14.9px; font-weight: 400; color: var(--brush-text, #F4F3F9); }
.settings-name-words > .settings-name.pending { color: var(--brush-text-muted, #8999AA); }
.settings-name-row .select.chooser { margin-left: auto; width: auto; min-width: 170px; }
/* a part of the settings stands on a card, as the Vault's (the column's ground, the subtle edge, radius 12) */
.settings-section {
    display: flex; flex-direction: column; gap: 8px; padding: 2px 18px 16px; border-radius: 12px;
    background: var(--brush-chat-column, #0C1118); border: 1px solid var(--brush-border-subtle, #1C2532);
}
.settings-section .group-label { padding: 14px 0 2px; }
/* a choice of a few (Privacy): the Vault's Segmented chooser, its choices side by side in one frame (the field's ground,
   the control edge, radius 8, 3 inside; each 34 high with 14 at its sides; the chosen one on Accent.Soft with its edge) */
.settings-section:has(> .radio-row) { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 0; row-gap: 8px; }
.settings-section:has(> .radio-row) > :not(.radio-row) { flex: 0 0 100%; }
.settings-section > .radio-row {
    position: relative; min-height: 0; height: 40px; padding: 3px 0; gap: 0; font-size: 14.9px;
    background: var(--brush-field, #151A22); border: solid var(--brush-border, #2A3444); border-width: 1px 0;
}
.settings-section > .radio-row:not(.radio-row + .radio-row) { border-left-width: 1px; border-radius: 8px 0 0 8px; padding-left: 3px; }
.settings-section > .radio-row:not(:has(+ .radio-row)) { border-right-width: 1px; border-radius: 0 8px 8px 0; padding-right: 3px; }
.settings-section > .radio-row:not(.radio-row + .radio-row):not(:has(+ .radio-row)) { border-radius: 8px; }
.settings-section > .radio-row input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; border: 0; background: none; }
.settings-section > .radio-row span {
    display: flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 6px; border: 1px solid transparent; white-space: nowrap;
    transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.settings-section > .radio-row:hover span { background: var(--brush-hover-light, #FFFFFF14); }
.settings-section > .radio-row:has(input:checked) span { background: var(--brush-accent-soft, #6C49F92E); border-color: var(--brush-border-accent, #45418A); color: var(--brush-text, #F4F3F9); }
.settings-section > .radio-row:has(input:focus-visible) span { outline: 2px solid var(--brush-accent-bright, #8F85F9); outline-offset: 1px; }
/* the picture choices (weblook1): 60 round with a ring of 2 that lightens under the mouse; the chosen one in Syphon's lilac
   with a soft glow; Upload on a faint glass with a dashed edge, the violet under the mouse */
.avatar-choices { display: flex; gap: 10px; flex-wrap: wrap; }
.avatar-choice {
    width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid transparent;
    transition: border-color var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out), background-color var(--fast) var(--ease-out);
}
.avatar-choice:hover { border-color: #FFFFFF38; }
.avatar-choice img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.avatar-choice.selected {
    border-color: var(--brush-syphon-lilac, #A778FA);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 16%, transparent), 0 8px 22px color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 32%, transparent);
}
.avatar-choice.upload { background: #FFFFFF08; border: 1px dashed #FFFFFF38; color: var(--brush-text-secondary, #B4C6DB); }
.avatar-choice.upload:hover { border-color: var(--brush-syphon-lilac, #A778FA); background: color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 14%, transparent); color: var(--brush-text, #F4F3F9); }
.settings-row-end { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-name-row { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.settings-name { margin-left: auto; }
.settings-space { flex: 1 1 auto; }
.check-row, .radio-row { display: flex; align-items: center; gap: 12px; min-height: 34px; font-size: 14.4px; color: var(--brush-text-secondary, #B4C6DB); cursor: pointer; }
.check-row:hover, .radio-row:hover { color: var(--brush-text, #F4F3F9); }
/* a radio: the Vault's choice (a ring, the accent's dot when chosen) */
.radio-row input {
    appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 18px; height: 18px; margin: 0; border-radius: 50%;
    border: 1.5px solid var(--brush-border-strong, #3A4659); background: var(--brush-field, #151A22); transition: border-color var(--fast) var(--ease-out);
}
.radio-row input:checked { border-color: var(--brush-accent, #6C49F9); background: radial-gradient(circle, var(--brush-accent-bright, #8F85F9) 0 4px, var(--brush-field, #151A22) 4.5px); }
/* a checkbox: the Vault's switch (a pill of 44 x 24, the knob 16) in the sign-in's look (weblook1; only Chat settings and
   Server Management have it): off, a faint glass with the field's edge and a grey knob; on, Syphon's button (its violet
   gradient, a lilac edge and a soft glow of its colour) with a white knob at the right; greyed while it cannot change */
.check-row input {
    appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; width: 44px; height: 24px; margin: 0; border-radius: 12px; cursor: pointer;
    background: #FFFFFF12; border: 1px solid var(--ui-edge-field, #FFFFFF26);
    transition: background-color var(--normal) var(--ease-out), border-color var(--normal) var(--ease-out), box-shadow var(--normal) var(--ease-out);
}
.check-row input::after {
    content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--brush-text-secondary, #B4C6DB);
    box-shadow: 0 1px 3px #00000059; transition: transform var(--normal) var(--ease-out), background-color var(--normal) var(--ease-out);
}
.check-row input:hover:not(:disabled) { border-color: #FFFFFF40; }
.check-row input:checked {
    background: var(--brush-syphon-button, linear-gradient(90deg, #7C3AED 0%, #9461FB 100%)); border-color: color-mix(in srgb, var(--brush-syphon-lilac, #A778FA) 70%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 40%, transparent);
}
.check-row input:checked:hover:not(:disabled) { background: var(--brush-syphon-button-hot, linear-gradient(90deg, #8B4DF7 0%, #A47BFC 100%)); }
.check-row input:checked::after { transform: translateX(20px); background: #fff; }
.check-row input:disabled { opacity: .45; cursor: default; box-shadow: none; }
.check-row:has(input:disabled) { cursor: default; }
.found-list { display: flex; flex-direction: column; max-height: 292px; overflow-y: auto; }
.invite-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.invite-link-row { display: flex; gap: 8px; align-items: center; }
.invite-link-row .field { flex: 1 1 auto; min-width: 0; height: 34px; font-family: Consolas, monospace; font-size: 13.5px; }
.invite-links { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
.invite-link-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--brush-border-subtle, #1C2532); }
.invite-link-text { flex: 1 1 auto; min-width: 0; }
.invite-code { font-family: Consolas, monospace; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── toasts (weblook1, chat\WEB-LOOK-CONTRACT.md section 2): the dialog family's small card. The sign-in's panel with its
   light edge and lit top, corners of 10, a deep shadow, the kind's light in its top left corner and its disc (34, the hero
   disc's glass and glow: violet info, green success, amber warning, red danger), the title 15.2 semibold, the words 13.5
   on 19 in Syphon's dim lilac blue, the close button; it rises 10 and fades in (nothing moves with reduced motion). No
   blur: toasts lie over the chat where it is read. ── */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 95; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); }
/* Server Management's unsaved bar floats at the foot with Save at its right end: the toasts stand above it while it shows, so
   "Saved." never lies over the next Save (TD-CHAT part 5b; it had held the next Save for its six seconds) */
body:has(.manage-unsaved) .toasts { bottom: calc(96px + env(safe-area-inset-bottom)); }
.toast {
    --disc: var(--color-syphon-violet, #7C3AED);
    position: relative; isolation: isolate; display: flex; align-items: flex-start; gap: 12px; padding: 13px 10px 13px 13px; border-radius: var(--ui-radius-menu); overflow: hidden;
    background: var(--ui-panel); border: 1px solid var(--ui-edge); box-shadow: var(--ui-shadow-toast), var(--ui-sheen); animation: toast-in var(--slow) var(--ease-out);
}
.toast::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(180px 120px at 0% 0%, color-mix(in srgb, var(--disc) 22%, transparent), transparent 100%);
}
.toast.success { --disc: var(--color-success, #3DE6A3); }
.toast.warning { --disc: var(--color-warning, #F5B544); }
.toast.danger { --disc: var(--color-danger, #F25A6C); }
.toast .notice-disc.small {
    width: 34px; height: 34px; border-radius: 50%; color: color-mix(in srgb, var(--disc) 42%, #fff);
    background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--disc) 44%, transparent) 0%, color-mix(in srgb, var(--disc) 14%, transparent) 72%);
    border: 1px solid color-mix(in srgb, var(--disc) 58%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--disc) 8%, transparent), 0 6px 18px color-mix(in srgb, var(--disc) 30%, transparent);
}
.toast-text { flex: 1 1 auto; min-width: 0; padding-top: 6px; }
.toast-title { font-size: var(--ui-type-lead); font-weight: 600; line-height: 21px; overflow-wrap: anywhere; }
.toast-text:has(.toast-line) { padding-top: 1px; }
.toast-line { font-size: var(--ui-type-small); color: var(--ui-text-lead); line-height: var(--ui-line-small); margin-top: 2px; overflow-wrap: anywhere; }
.toast > .icon-button.tiny { width: 26px; height: 26px; margin-top: 4px; color: var(--ui-text-quiet); }
.toast > .icon-button.tiny:hover { color: var(--brush-text, #F4F3F9); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── the picture viewer ── */
.viewer { position: fixed; inset: 0; z-index: 100; background: #040609F0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; animation: fade var(--normal) var(--ease-out); }
.viewer-img { max-width: 100%; max-height: calc(100dvh - 120px); object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px #000; }
.viewer-bar { display: flex; align-items: center; gap: 10px; }
.viewer-count { font-size: 14px; font-weight: 600; color: var(--brush-text-secondary, #B4C6DB); }

/* ── narrower windows: the members as a drawer (240 to 300, over the messages), then (a phone) the rail and the column too ── */
.drawer-scrim { position: absolute; inset: 0; z-index: 25; background: #04060999; animation: fade var(--normal) var(--ease-out); }
.chat-frame.members-drawer .members { position: absolute; right: 0; top: 0; bottom: 0; z-index: 30; width: min(300px, 86vw); box-shadow: -20px 0 50px #00000080; animation: fromRight var(--slow) var(--ease-out); }
@keyframes fromRight { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fromLeft { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
/* a frame under 1000 wide: the rail 64 (tiles 40, one every 50), the column 232 */
@media (max-width: 1000px) {
    .rail { width: 65px; flex-basis: 65px; }
    .rail-slot { width: 64px; height: 50px; flex-basis: 50px; }
    .rail-tile { width: 40px; height: 40px; }
    .rail-bar { top: 8px; height: 34px; }
    .rail-pill { top: 21px; }
    .rail-slot:hover .rail-pill, .rail-slot::before { top: 15px; }
    .rail-line { margin: 25px 0 24px; }
    .space-mark img { width: 32px; height: 32px; }
    .column { width: 232px; flex-basis: 232px; }
}
.chat-frame.narrow .left-side { position: absolute; left: 0; top: 0; bottom: 0; z-index: 30; display: none; box-shadow: 20px 0 50px #00000080; }
.chat-frame.narrow.left-open .left-side { display: flex; animation: fromLeft var(--slow) var(--ease-out); }
.chat-frame.narrow .column { width: min(264px, calc(100vw - 72px)); flex-basis: auto; }
.chat-frame.narrow .msg { border-left-width: 4px; border-right-width: 4px; padding: 2px 8px 2px 56px; }
.chat-frame.narrow .msg.first { padding-top: 5px; padding-bottom: 3px; }
.chat-frame.narrow .msg-avatar { left: 8px; }
.chat-frame.narrow .msg-avatar .avatar { --size: 38px !important; }
.chat-frame.narrow .msg-gutter-time { display: none; }
.chat-frame.narrow .reply-curve { left: -29px; width: 23px; }
.chat-frame.narrow .pane-header { padding: 0 8px; }
.chat-frame.narrow .pane-header > .icon-button:first-child { margin-right: 4px; }
.chat-frame.narrow .day-line, .chat-frame.narrow .new-line { margin-left: 12px; margin-right: 12px; }
.chat-frame.narrow .composer, .chat-frame.narrow .composer-place { margin: 0 8px 8px; }
.chat-frame.narrow .msg-tools { right: 8px; }
.chat-frame.narrow .picker { position: fixed; left: 8px; right: 8px; bottom: 76px; top: auto; width: auto; }
.chat-frame.narrow .picker-grid { grid-template-columns: repeat(auto-fill, 40px); }
.chat-frame.narrow .reaction-picker { position: fixed; left: 8px; right: 8px; top: auto; bottom: 76px; flex-wrap: wrap; justify-content: center; }
.chat-frame.narrow .find-grid { grid-template-columns: 1fr; padding: 12px; }
.chat-frame.narrow .person-row { flex-wrap: wrap; margin: 2px 4px 0; padding: 0 6px 0 8px; }
.chat-frame.narrow .person-row > .btn { margin: 0 0 8px 8px; }
.chat-frame.narrow .jump-pills { bottom: 88px; }
.chat-frame.narrow .tabs { margin: 0 12px 12px; max-width: calc(100% - 24px); }
/* Friends' five tabs on a phone: equal cells that wrap (three to a row), so none is cut at the screen's edge, as the
   settings' tabs stand two by two */
.chat-frame.narrow .friends-pane > .tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 3px; width: auto; overflow: visible; }
.chat-frame.narrow .friends-pane > .tabs > .tab { justify-content: center; padding: 0 8px; }
.chat-frame.narrow .welcome { padding: 20px 12px 0; }
@media (max-width: 520px) {
    .settings-section { padding: 2px 12px 14px; }
    .settings-section > .radio-row span { padding: 0 10px; }
}

/* ───────── Server Management (Chat\ManagePane.razor; chat\ADMIN-CONTRACT.md section 13): the Vault's panel in the browser ───────── */
/* In the sign-in's look (weblook1, WL-SETTINGS; docs\chat\web\look\settings.md): the header and the sections' column on the
   Syphon panel, the chosen section in Syphon's violet with the community's bar; the sections' content on Syphon's calm
   ground (.pane-ground on .manage-main in the markup, without the light behind the middle); its cards in the sign-in's
   family (the Syphon panel, the 1 px edge, 16.5 corners, a still shadow, the lit top edge); the fields the sign-in's (Syphon's
   deep field, the field's edge, the lilac edge with the keyboard, the words never bold); every choice of a few the
   settings' Segmented look; a part with nothing chosen yet a dashed place with a disc and its line; the unsaved changes on
   a bar of the panel that floats over the foot. */
.manage-pane { background: var(--brush-syphon-ground, #080812); }
.manage-top {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 12px 0 20px;
    border-bottom: 1px solid var(--ui-edge-faint, #FFFFFF12); background: var(--ui-panel-top, #121220);
}
.manage-top > .icon { color: var(--brush-syphon-lilac, #A778FA); }
.manage-line { width: 1px; height: 18px; background: var(--ui-edge, #FFFFFF1A); margin: 0 4px; }
.manage-managing { color: var(--brush-text-secondary, #B4C6DB); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.manage-managing b { color: var(--brush-text, #F4F3F9); font-weight: 600; }
.manage-switch { max-width: 300px; }
.manage-pane .grow { flex: 1 1 auto; }
/* the fields: the sign-in's, in a field's own words (never the bold of the name over it) */
.manage-pane .field { background: var(--brush-syphon-field, #0A0A16E6); border-color: var(--ui-edge-field, #FFFFFF26); border-radius: var(--ui-radius-field, 8px); font-weight: 400; color: var(--brush-text, #F4F3F9); }
.manage-pane .field:hover:not(:disabled) { border-color: #FFFFFF40; }
.manage-pane .field:focus { border-color: var(--brush-syphon-lilac, #A778FA); }
.manage-pane .field:disabled { opacity: .6; }
.manage-pane .field.select { height: 36px; padding: 0 10px; }
.manage-pane .field::placeholder { color: var(--ui-text-quiet, #8999AA); opacity: 1; }
.manage-body { flex: 1 1 auto; min-height: 0; display: flex; }
.manage-sections {
    flex: 0 0 264px; display: flex; flex-direction: column; min-height: 0;
    background: var(--ui-panel, linear-gradient(180deg, #121220 0%, #0C0C18 100%)); border-right: 1px solid var(--ui-edge-faint, #FFFFFF12);
}
.manage-banner { position: relative; height: 72px; overflow: hidden; flex: 0 0 auto; background: var(--brush-syphon-ground, #080812); }
.manage-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 85% 30%; }
.manage-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 15%, color-mix(in srgb, var(--ui-panel-top, #121220) 88%, transparent) 100%); }
.manage-banner-text { position: absolute; left: 16px; right: 16px; bottom: 9px; z-index: 1; }
.manage-banner .kicker { font-size: 10.5px; font-weight: 600; letter-spacing: 1.8px; color: color-mix(in srgb, var(--space-accent, #978AFB) 62%, #fff); }
.manage-banner .space-title { font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.manage-count { padding: 10px 20px 8px; font-size: 13px; color: var(--ui-text-quiet, #8999AA); }
.manage-section-list { flex: 1 1 auto; overflow-y: auto; padding: 2px 8px 8px; display: flex; flex-direction: column; gap: 2px; }
.manage-section {
    position: relative; display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 10px 0 12px; border-radius: 8px; text-align: left;
    color: var(--brush-text-secondary, #B4C6DB); font-weight: 600; font-size: 14.5px; transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.manage-section:hover { background: #FFFFFF0D; color: var(--brush-text, #F4F3F9); }
.manage-section.selected {
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 30%, transparent), color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 10%, transparent));
    color: var(--brush-text, #F4F3F9);
}
.manage-section.selected > .icon { color: #DCCBFF; }
.manage-section.selected::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 8px 0 0 8px; background: var(--space-accent, #6C49F9); }
.manage-section > .chip { margin-left: auto; }
.manage-access { padding: 12px 16px 16px 20px; border-top: 1px solid var(--ui-edge-faint, #FFFFFF12); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.manage-access .group-label { padding: 0; }
.manage-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; --ground-centre: 0%; }
.manage-scroll { padding: 20px 24px 24px; container-type: inline-size; }
.manage-conflict {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 20px; background: var(--brush-warning-soft, #F5B5441F);
    color: var(--brush-warning-text, #F7C873); border-bottom: 1px solid #F5B54440;
}
.manage-conflict > span { flex: 1 1 auto; }
/* the unsaved changes: a bar of the Syphon panel floating over the foot (the 1 px edge, corners of 12, the menus' shadow) */
.manage-unsaved {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px; margin: 0 16px 14px; padding: 10px 12px 10px 18px; border-radius: 12px; font-weight: 600;
    background: var(--ui-panel, linear-gradient(180deg, #121220 0%, #0C0C18 100%)); border: 1px solid var(--ui-edge, #FFFFFF1A);
    box-shadow: var(--ui-shadow-menu, 0 18px 44px #000000A6), var(--ui-sheen, inset 0 1px 0 #FFFFFF0F);
}
.manage-unsaved > .icon { color: var(--brush-warning-text, #F7C873); }
.manage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.manage-head-buttons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.manage-head-buttons .btn.on { --edge: var(--brush-syphon-lilac, #A778FA); }
.manage-title { margin: 0; font-size: 20px; line-height: 27px; font-weight: 600; }
.manage-lead { margin: 4px 0 16px; font-size: 13.5px; color: var(--ui-text-lead, #A5AFDC); line-height: 19px; }
.manage-undo { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; font-size: 13px; color: var(--brush-text-secondary, #B4C6DB); }
.manage-split { display: grid; grid-template-columns: minmax(250px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
/* (member-split: the class "members" is the chat's member list, whose 272 wide took the split's width) */
.manage-split.member-split { grid-template-columns: minmax(0, 1fr) 300px; }
/* a card of the panel: the sign-in's family */
.manage-card {
    position: relative; border-radius: var(--ui-radius-card, 16.5px); background: var(--ui-panel, linear-gradient(180deg, #121220 0%, #0C0C18 100%));
    border: 1px solid var(--ui-edge, #FFFFFF1A); box-shadow: var(--ui-shadow-menu, 0 18px 44px #000000A6), var(--ui-sheen, inset 0 1px 0 #FFFFFF0F);
}
.manage-tree { padding: 8px 8px 12px; display: flex; flex-direction: column; gap: 1px; }
.manage-editor { padding: 18px 22px 22px; min-height: 200px; container-type: inline-size; }
.manage-editor .tabs { margin: 12px 0 12px; }
.manage-editor > .group-label { padding: 18px 0 4px; }
.manage-editor-head { display: flex; align-items: center; gap: 12px; }
.manage-editor-name { font-size: 18px; line-height: 24px; font-weight: 600; }
/* nothing chosen yet (an editor), or nothing there (the audit log, the members): a dashed place of the ground with the hero
   card family's disc and its line in the middle */
.manage-empty {
    display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 34px 20px; text-align: center;
    color: var(--ui-text-lead, #A5AFDC); font-size: 14px; line-height: 20px;
}
.manage-empty > .hero-disc { margin: 0; }
.manage-empty > span { max-width: 340px; }
.manage-card:has(> .manage-empty:only-child) { background: color-mix(in srgb, var(--ui-panel-top, #121220) 45%, transparent); border-style: dashed; border-color: var(--ui-edge, #FFFFFF1A); box-shadow: none; }
.manage-editor:has(> .manage-empty:only-child) { display: flex; align-items: center; justify-content: center; }
.manage-cat { display: flex; align-items: center; gap: 6px; padding: 12px 6px 4px 10px; }
.manage-cat .group-label { padding: 0; }
.manage-row { position: relative; display: flex; align-items: center; border-radius: 8px; transition: background-color var(--fast) var(--ease-out); }
.manage-row:hover { background: #FFFFFF0A; }
.manage-row.selected, .manage-row-main.selected {
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 28%, transparent), color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 8%, transparent));
}
.manage-row.selected::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 8px 0 0 8px; background: var(--space-accent, #6C49F9); }
.manage-row-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 8px 0 14px; text-align: left; color: var(--brush-text, #F4F3F9); font-size: 14px; border-radius: 8px; }
.manage-row-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.manage-row-main > .chip { flex: 0 0 auto; white-space: nowrap; }
.manage-row.archived .manage-row-name { color: var(--ui-text-quiet, #8999AA); }
.own-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brush-warning, #F5B544); flex: 0 0 auto; box-shadow: 0 0 8px #F5B54480; }
.chip.quiet { background: #FFFFFF0F; }
.chip.warn { color: var(--brush-warning-text, #F7C873); }
.manage-pane .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.manage-pane .dot.big { width: 12px; height: 12px; }
.row-actions { display: none; gap: 2px; padding-right: 4px; }
.manage-row:hover .row-actions, .manage-row.selected .row-actions, .manage-cat:hover .row-actions, .row-actions.always, .manage-row:focus-within .row-actions { display: inline-flex; }
.mini-button { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--brush-text-secondary, #B4C6DB); transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out); }
.mini-button:hover { background: color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 26%, transparent); color: var(--brush-text, #F4F3F9); }
.row-actions.always .mini-button { width: 44px; height: 44px; }
.manage-archived { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; color: var(--ui-text-quiet, #8999AA); font-size: 13px; border-radius: 8px; }
.manage-archived:hover { background: #FFFFFF0A; }
.manage-new { padding: 18px 22px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.manage-new h3 { margin: 0; font-size: 17px; font-weight: 600; }
/* a choice of a few (Text or Voice; Inherit, Allow and Deny): the tabs' Segmented frame (Syphon's deep field, the 1 px edge,
   corners of 10); its items, and the role's tabs, are the one rule's ("the tabs") */
.manage-choices, .tri {
    padding: 3px; border-radius: 10px; background: var(--brush-syphon-field, #0A0A16E6); border: 1px solid var(--ui-edge, #FFFFFF1A);
}
.manage-choices { display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; margin: 6px 0; }
.manage-choices .tab { gap: 6px; }
/* the members' and the audit log's filters: pills on a faint glass, the chosen one in Syphon's violet */
.manage-filters > .tab { height: 34px; padding: 0 14px; border-radius: 17px; background: #FFFFFF08; border-color: var(--ui-edge-faint, #FFFFFF12); }
.manage-filters > .tab:hover { background: #FFFFFF12; }
.manage-filters > .tab.selected {
    background: color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 30%, transparent); border-color: color-mix(in srgb, var(--brush-syphon-lilac, #A778FA) 58%, transparent); color: #fff;
    box-shadow: none;
}
.manage-icon-row { display: flex; align-items: center; gap: 10px; font-weight: 400; color: var(--brush-text, #F4F3F9); }
.dialog-buttons { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 0 18px; }
.manage-danger { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ui-edge-faint, #FFFFFF12); display: flex; flex-direction: column; gap: 8px; }
.manage-danger .group-label { padding: 0; }
.manage-delete-confirm { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.small-field { width: 90px; }
.manage-access-tab .group-label { padding: 14px 0 6px; }
/* the channel editor (the owner's wish of 2026-10-11: Edit channel much nicer, Access clearer; as the Vault's
   Chat\ChatEditStyles.xaml): its icon in a tile, the tabs with a line under the chosen one, the Access tab's capsule with
   the setup (public green, readonly amber, staff violet, private slate), the four setups as cards, what they give in a
   card with its marks, the band on its own settings in the information colour */
.manage-editor-art {
    width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 40%, transparent) 0%, color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 12%, transparent) 75%);
    border: 1px solid color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 55%, transparent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 26%, transparent);
}
.edit-tabs { display: flex; gap: 26px; margin: 12px -22px 8px; padding: 0 22px; border-bottom: 1px solid var(--ui-edge-faint, #FFFFFF12); }
.edit-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 2px 3px; font-size: 14.5px; font-weight: 600;
    color: var(--ui-text-quiet, #8999AA); white-space: nowrap; transition: color var(--fast) var(--ease-out); }
.edit-tab:hover { color: var(--brush-text-secondary, #B4C6DB); }
.edit-tab.selected { color: var(--brush-text, #F4F3F9); }
.edit-tab.selected::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 2px;
    background: var(--brush-syphon-button, linear-gradient(90deg, #7C3AED 0%, #9461FB 100%)); box-shadow: 0 0 10px color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 60%, transparent);
}
.access-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-left: 1px; border-radius: 10px; font-size: 11.5px; font-weight: 600;
    background: #3DE6A31A; border: 1px solid #3DE6A34D; color: var(--brush-success-text, #C4F0E4); }
.access-pill.readonly { background: #F5B5441F; border-color: #F5B54459; color: var(--brush-warning-text, #FBDFA6); }
.access-pill.staff { background: color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 22%, transparent); border-color: color-mix(in srgb, var(--brush-syphon-lilac, #A778FA) 50%, transparent); color: #DCCBFF; }
.access-pill.private { background: #8999AA1A; border-color: #8999AA4D; color: var(--brush-text-secondary, #B4C6DB); }
.edit-icon-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--ui-note, #FFFFFF0A); border: 1px solid var(--ui-edge-faint, #FFFFFF12); }
.edit-icon-art { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: #FFFFFF0F; border: 1px solid var(--ui-edge-faint, #FFFFFF12); }
.edit-icon-words { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.edit-icon-name { font-weight: 600; font-size: 14px; color: var(--brush-text, #F4F3F9); }
.edit-icon-card .field-hint { margin: 0; }
.setup-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 2px 0 6px; }
.setup-card { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 74px; padding: 12px 36px 12px 13px; border-radius: 12px; text-align: left;
    background: var(--brush-syphon-field, #0A0A16E6); border: 1px solid var(--ui-edge, #FFFFFF1A); color: var(--brush-text, #F4F3F9);
    transition: background-color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out); }
.setup-card:hover:not(:disabled) { background: #15152A; border-color: #FFFFFF33; }
.setup-card.selected {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 24%, transparent), color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 10%, transparent));
    border: 1.5px solid var(--brush-syphon-lilac, #A778FA); box-shadow: 0 6px 20px color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 26%, transparent);
}
.setup-card:disabled { opacity: 0.55; cursor: default; }
.setup-mark { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    background: #3DE6A31A; border: 1px solid #3DE6A340; color: var(--brush-success, #3DE6A3); }
.setup-mark.readonly { background: #F5B5441F; border-color: #F5B54447; color: var(--brush-warning, #F5B544); }
.setup-mark.staff { background: color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 22%, transparent); border-color: color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 50%, transparent); color: #C9B8FF; }
.setup-mark.private { background: #8999AA1F; border-color: #8999AA40; color: var(--brush-text-secondary, #B4C6DB); }
.setup-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.setup-name { font-size: 14px; font-weight: 600; }
.setup-line { font-size: 12.5px; color: var(--ui-text-quiet, #8999AA); line-height: 17px; }
.setup-ring { position: absolute; top: 13px; right: 13px; width: 18px; height: 18px; border-radius: 50%; border: 1.6px solid #FFFFFF40; box-sizing: border-box; }
.setup-card.selected .setup-ring { border-color: var(--brush-syphon-lilac, #A778FA); }
.setup-card.selected .setup-ring::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--brush-syphon-lilac, #A778FA); }
.manage-result-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--ui-note, #FFFFFF0A); border: 1px solid var(--ui-edge-faint, #FFFFFF12); }
.manage-result { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 19px; }
.manage-result > .icon { flex: 0 0 auto; margin-top: 2px; color: var(--brush-syphon-lilac, #A778FA); }
.manage-differs { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; padding: 10px 10px 10px 12px; border-radius: 12px; background: #5E93F714; border: 1px solid #5E93F740; color: var(--brush-info-text, #A3B9D1); font-size: 13px; }
.manage-differs > .icon { flex: 0 0 auto; color: var(--brush-info, #5E93F7); }
.manage-differs > span { flex: 1 1 auto; }
@media (max-width: 560px) { .setup-cards { grid-template-columns: minmax(0, 1fr); } }
.manage-targets-split { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; margin-top: 10px; }
.manage-targets { display: flex; flex-direction: column; gap: 4px; }
.manage-target { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 12px; border-radius: 8px; text-align: left; color: var(--brush-text, #F4F3F9); font-size: 13.5px; position: relative; }
.manage-target:hover { background: #FFFFFF0A; }
.manage-target.selected { background: linear-gradient(90deg, color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 28%, transparent), color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 8%, transparent)); }
.manage-target.selected::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 8px 0 0 8px; background: var(--space-accent, #6C49F9); }
.manage-target > .chip { margin-left: auto; }
.manage-rule { margin-top: 14px; }
.manage-rows h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.manage-access-row { padding: 8px 0 10px 12px; border-left: 3px solid transparent; }
.manage-access-row.set-here { border-left-color: var(--brush-warning, #F5B544); }
.manage-perm-label { font-weight: 600; font-size: 13.5px; }
.manage-access-row .field-hint .link-button { margin-left: 6px; }
.tri { display: inline-flex; flex-wrap: wrap; max-width: 100%; margin: 7px 0 5px; }
.tri-item { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 7px; font-size: 13.5px; color: var(--brush-text-secondary, #B4C6DB); border: 1px solid transparent; }
.tri-item:hover:not(:disabled) { background: #FFFFFF0D; }
.tri-item:disabled { opacity: .45; }
.tri-item.allow.on { color: var(--brush-success-text, #7EE2A8); }
.tri-item.deny.on { color: var(--brush-danger-text, #FFB9C1); }
.manage-lock { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--ui-note, #FFFFFF0A); border: 1px solid var(--ui-edge-faint, #FFFFFF12); font-size: 13px; color: var(--ui-text-quiet, #8999AA); }
.manage-pane .group-label.danger { color: var(--brush-danger-text, #FFB9C1); }
.manage-pane .switch-row { justify-content: space-between; gap: 16px; padding: 6px 0; }
.manage-pane .settings-row-text.warn { color: var(--brush-warning-text, #F7C873); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 1px #FFFFFF1F; transition: box-shadow var(--fast) var(--ease-out); }
.swatch.on { border-color: #fff; box-shadow: 0 0 0 3px #FFFFFF26, 0 4px 12px #00000080; }
.manage-role { display: flex; }
.manage-member-line { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.manage-filters { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.manage-search { max-width: 260px; }
.manage-member { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 10px; text-align: left; color: var(--brush-text, #F4F3F9); position: relative; }
.manage-member:hover { background: #FFFFFF0A; }
.manage-member.selected { background: linear-gradient(90deg, color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 28%, transparent), color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 8%, transparent)); }
.manage-member-words { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.manage-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.manage-check { padding: 6px 20px 16px; }
.manage-check .group-label { padding: 16px 0 6px; }
.manage-check-row { display: grid; grid-template-columns: 20px 210px 70px minmax(0, 1fr) auto; align-items: baseline; gap: 6px; padding: 4px 0; font-size: 13.5px; }
.manage-check-row .ok { color: var(--brush-success-text, #7EE2A8); font-weight: 600; }
.manage-check-row .bad { color: var(--brush-danger-text, #FFB9C1); font-weight: 600; }
.manage-steps { margin: 2px 0 8px 230px; padding-left: 18px; color: var(--ui-text-quiet, #8999AA); font-size: 12.5px; }
.manage-steps li.decides { color: var(--brush-text, #F4F3F9); }
.manage-subtitle { margin: 22px 0 10px; font-size: 17px; font-weight: 600; }
.manage-table-card { padding: 6px 16px 10px; overflow-x: auto; }
.manage-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.manage-table th { text-align: center; font-weight: 600; color: var(--ui-text-quiet, #8999AA); font-size: 12px; padding: 6px; }
.manage-table th:first-child, .manage-table td:first-child { text-align: left; }
.manage-table td { text-align: center; padding: 7px 6px; border-top: 1px solid var(--ui-edge-faint, #FFFFFF12); }
.manage-audit { padding: 4px 18px; }
.manage-audit-row { padding: 11px 0; border-top: 1px solid var(--ui-edge-faint, #FFFFFF12); font-size: 13.5px; }
.manage-audit-row:first-child { border-top: 0; }
.manage-audit-row > div:first-child { display: flex; gap: 6px; align-items: baseline; }
.manage-icons { width: 470px; }
.icon-grid { display: flex; flex-wrap: wrap; gap: 4px; position: relative; }
.icon-pick { width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--fast) var(--ease-out); }
.icon-pick:hover { background: color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 24%, transparent); }
.row-access { display: inline-flex; color: var(--brush-text-muted, #8999AA); margin-left: 4px; flex: 0 0 auto; }
.group-add { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--brush-text-muted, #8999AA); visibility: hidden; }
.group-label:hover .group-add, .group-add:focus-visible { visibility: visible; }
.group-add:hover { background: var(--brush-hover-light, #FFFFFF14); color: var(--brush-text, #F4F3F9); }
/* a narrower panel (a window of about 1000 to 1200): the list gives the editor more room, and the editor's parts stand one
   under another where it is narrow */
@container (max-width: 820px) {
    .manage-split { grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); }
}
@container (max-width: 440px) {
    .setup-cards, .manage-targets-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 999px) {
    .manage-body { flex-direction: column; }
    .manage-sections { flex: 0 0 auto; border-right: 0; border-bottom: 1px solid var(--ui-edge-faint, #FFFFFF12); }
    .manage-banner, .manage-count, .manage-access { display: none; }
    .manage-section-list { flex-direction: row; overflow-x: auto; padding: 6px 8px; scrollbar-width: none; }
    .manage-section { flex: 0 0 auto; height: 36px; }
    .manage-split, .manage-split.member-split { grid-template-columns: minmax(0, 1fr); }
    .manage-split.editor-only > .manage-tree { display: none; }
    .manage-split:not(.editor-only) > .manage-editor { display: none; }
    .manage-targets-split { grid-template-columns: minmax(0, 1fr); }
    .manage-check-row { grid-template-columns: 20px minmax(0, 1fr) 70px; }
    .manage-check-row > .field-hint, .manage-check-row > .link-button { grid-column: 2 / -1; }
    .manage-steps { margin-left: 26px; }
    .manage-scroll { padding: 14px 12px 20px; }
    .manage-editor { padding: 16px 16px 18px; }
    .edit-tabs { margin: 12px -16px 8px; padding: 0 16px; }
}
@media (max-width: 520px) {
    .manage-top { padding: 6px 8px 8px; height: auto; min-height: 54px; flex-wrap: wrap; row-gap: 4px; }
    .manage-top .manage-line { display: none; }
    .manage-top .pane-title { font-size: 16px; }
    /* a phone: the title and Close on the first line; whom it manages and Switch community on the second (whom it manages
       on two lines where a longer language needs them, i18n1) */
    .manage-managing { order: 10; flex: 1 1 calc(100% - 190px); min-width: 0; padding-left: 40px; font-size: 13px; white-space: normal; }
    .manage-switch { order: 11; flex: 0 1 auto; max-width: 48%; }
    .edit-icon-card { flex-wrap: wrap; }
    .edit-icon-words { flex: 1 1 calc(100% - 60px); }
    .edit-icon-card > .btn { margin-left: 56px; }
    .edit-icon-card > .btn + .btn { margin-left: 0; }
    .manage-unsaved { position: sticky; bottom: 0; margin: 0 8px 8px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) 14px; }
    /* the three share the row and keep their words whole (TD-CHAT part 5b: German's, Dutch's and Russian's Deny ran out of it) */
    .tri { display: flex; }
    .tri-item { flex: 1 1 auto; justify-content: center; padding: 0 8px; }
}

/* a custom status text (chat\STATUS-CONTRACT.md, 2026-10-11), as the Vault draws it: after the presence's words with a dot,
   muted, one line; the presence stays whole and the text gives way with dots (its emoji the chat's Twemoji pictures). Under
   the name on the profile card, two lines at most. Never in a message row. */
.status-line { display: flex; align-items: center; min-width: 0; gap: 0; }
.status-line .status-word { flex: 0 0 auto; white-space: nowrap; }
.status-word.playing { color: var(--brush-success-text, #C4F0E4); }
.status-between { flex: 0 0 auto; margin: 0 5px; color: var(--brush-text-muted, #8999AA); }
.status-text { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--brush-text-muted, #8999AA); }
.status-text .emoji, .card-status .emoji { width: 1.2em; height: 1.2em; display: inline-block; vertical-align: -0.25em; margin: 0 1px; object-fit: contain; }
.player-status .player-word { flex: 0 0 auto; white-space: nowrap; }
.card-status { padding: 2px 16px 1px; font-size: 14px; line-height: 19px; color: var(--brush-text-secondary, #B4C6DB); overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.status-dialog { width: 500px; }
/* "Set a custom status" in the sign-in's look (weblook1, WL-SETTINGS): the box is the sign-in's field (Syphon's deep field,
   the field's edge, corners of 10, 48 high, lighter under the mouse, the lilac edge and a soft violet ring with the
   keyboard, red while its words break a rule) with the emoji button at its left (Syphon's violet while its picker is open)
   and the counter at its right; the rule or the server's refusal under it is the sign-in's error line; Clear after is the
   settings' Segmented choice (the chosen one in Syphon's violet: "Chat settings", above) */
.status-dialog .status-box {
    height: 48px; padding: 0 12px 0 6px; position: relative; margin-top: 8px; border-radius: 10px;
    background: var(--brush-syphon-field, #0A0A16E6); border: 1px solid var(--ui-edge-field, #FFFFFF26);
    transition: border-color var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out);
}
.status-dialog .status-box:hover { border-color: #FFFFFF40; }
.status-dialog .status-box:focus-within { border-color: var(--brush-syphon-lilac, #A778FA); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 22%, transparent); }
.status-dialog .status-box.bad { border-color: var(--brush-danger, #F25A6C); }
.status-dialog .status-box.bad:focus-within { box-shadow: 0 0 0 4px #F25A6C2E; }
.status-dialog .status-box input { font-size: 15.2px; color: var(--brush-syphon-text, #F8F8FF); }
.status-dialog .status-box input::placeholder { color: var(--ui-text-quiet, #8999AA); opacity: 1; }
.status-box .icon-button.on { background: color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 30%, transparent); color: #DCCBFF; }
.status-counter { flex: 0 0 auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ui-text-quiet, #8999AA); }
.status-counter.bad { color: var(--brush-danger, #F25A6C); }
.status-picker { position: relative; }
/* the picker lives inside the dialog: no page-wide backdrop over it (the emoji button and Escape close it, as in the Vault) */
.status-picker > .menu-backdrop { display: none; }
.picker.for-status { position: static; width: 100%; height: 300px; box-shadow: none; }
.status-problem { display: flex; gap: 8px; align-items: flex-start; position: relative; margin: 0; }
.status-problem > .icon { flex: 0 0 auto; margin-top: 3px; }
.status-clear-label { margin-top: 10px; font-weight: 600; color: var(--brush-text, #F4F3F9); }
.tabs.status-clear { flex-wrap: wrap; margin: 0; max-width: 100%; position: relative; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .screen-ground::before { transform: none; }
}

/* Thai and Simplified Chinese (i18n1; docs\I18N-CONTRACT.md section 6, "Fonts"). The page's <html lang> (th or zh, set by
   Services\WebLanguage.cs before the first render) gives the page stacks whose own fonts draw the script: Thai through
   Leelawadee UI (Windows), Noto Sans Thai (Android, Linux) and Tahoma (macOS, iOS); Chinese through Microsoft YaHei UI
   (Windows), PingFang SC (macOS, iOS) and Noto Sans SC (Android, Linux). Segoe UI and Selawik stay first, so Latin letters,
   digits and names keep the Vault's face, as the Vault's own list does (Themes\Typography.xaml: Segoe UI, Leelawadee UI,
   Microsoft YaHei UI); a title keeps Playfair Display for Latin letters and takes the script's sans for the rest, never a
   serif fallback such as SimSun. The tokens' stacks (tokens.g.css: --font-ui, --font-display, --font-gametitle) follow, for
   the views that use them. */
:root:lang(th) { --script-sans: "Leelawadee UI", "Noto Sans Thai", Tahoma; }
:root:lang(zh) { --script-sans: "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC"; }
:root:lang(th), :root:lang(zh) {
    --ui-font: "Segoe UI", "Selawik", var(--script-sans), system-ui, -apple-system, sans-serif;
    --title-font: "Playfair Display", Georgia, var(--script-sans), sans-serif;
    --font-ui: var(--ui-font);
    --font-display: var(--ui-font);
    --font-gametitle: var(--title-font);
}
/* No letter spacing in Thai and Chinese (the contract: Thai and Chinese headings get no letter spacing): spacing pulls Thai's
   vowel and tone marks away from their letters and spreads Chinese apart, so the kickers, group labels and headings that
   space their words in the other languages set none here, in every view (the views' own scoped styles too, hence
   !important). What is never translated keeps its own: Syphon's word mark and the codes, marked translate="no" (which also
   keeps a browser's own translation away from them). */
:root:lang(th) body :not([translate="no"], [translate="no"] *),
:root:lang(zh) body :not([translate="no"], [translate="no"] *) { letter-spacing: normal !important; }