/* EVERY RULE HERE IS SCOPED TO :is(body.concord-view, a PARKED Concord window). The desktop parks an
   unfocused window by moving its nodes into an .osw-slot, and body.concord-view belongs to whichever
   window is focused -- so gated on the body alone, a Concord window behind another app lost every rule
   in this file while still on screen: custom emoji drawn at full size, the room bar back in its
   pre-consolidation layout, the hover menu as a wide bar (all reported 2026-10-23). os.js snapshot()
   marks the slot data-body-view; tests/client/test_concord_parked_window_looks_the_same_full_app.py. */
/* Concord's self-contained workspace skin. Kept separate so stale PWA shell CSS cannot unstyle it. */
/* ==== CONCORD THEMES ====================================================================
   Every colour, corner and shadow below this block reads a `--cct-*` token, so a theme is a set of
   token values and nothing else. A NEW Concord surface (voice, forum, banners…) must use the tokens
   too, or it draws in one theme only -- tests/client/test_concord_theme_tokens.py fails on a raw
   hex colour or a white/black rgba() outside this block.

   CASCADE ORDER IS THE DESIGN. `:root` and `[data-cc-theme="x"]` have the same specificity, so the
   blocks are ordered: (1) the ROLE tokens, derived from the core palette -- what every preset except
   Classic uses; (2) Cyberpunk, the default, on the bare root so a page with no script still paints
   it; (3) the other presets, which set core values; (4) Classic LAST, which sets every role token to
   the literal it had before themes existed -- that is what keeps Classic pixel-identical.
   A custom accent / background is set inline on <html> by concord.js and so beats every preset.
   Presets are written as `[data-cc-theme=…]`, not `:root[…]`, so the picker's swatches (which carry
   the same attribute) preview their preset with the very same values. */
:root{
  --cct-toolbar:var(--cct-pop);--cct-menu:var(--cct-pop);--cct-identity:var(--cct-sunk);--cct-media:var(--cct-sunk);
  --cct-compose:var(--cct-raised);--cct-reply:var(--cct-raised);--cct-card:var(--cct-raised);
  --cct-room:var(--cct-raised);--cct-joined:var(--cct-raised);--cct-room-hover:var(--cct-hover);--cct-joined-hover:var(--cct-hover);
  --cct-chip-2:var(--cct-chip);--cct-chip-2-hover:var(--cct-hover);--cct-public-icon:var(--cct-chip);
  --cct-title:var(--cct-strong);--cct-fg-menu:var(--cct-text);--cct-input:var(--cct-text);--cct-label:var(--cct-text);
  --cct-icon:var(--cct-text);--cct-icon-2:var(--cct-text);--cct-react-fg:var(--cct-text);
  --cct-fg-2:var(--cct-muted);--cct-fg-3:var(--cct-muted);--cct-fg-4:var(--cct-dim);--cct-discover-fg:var(--cct-muted);
  --cct-section:var(--cct-muted);--cct-hash:var(--cct-dim);--cct-header-hash:var(--cct-muted);--cct-welcome:var(--cct-muted);
  --cct-placeholder:var(--cct-dim);--cct-room-sub:var(--cct-muted);--cct-reply-fg:var(--cct-muted);
  --cct-hl-rgb:var(--cct-accent-rgb);--cct-soft-rgb:var(--cct-accent-rgb);--cct-react-rgb:var(--cct-accent2-rgb);--cct-react-mine:var(--cct-accent2);
  /* Status colours: the same as Classic on the dark presets; Light overrides them for contrast. */
  --cct-ok:#35c875;--cct-public-fg:#69dca5;--cct-private-fg:#ffc266;--cct-gold:#ffd36a;--cct-star:#ffd76a;
  --cct-danger:#ff8095;--cct-danger-2:#ff7b7e;--cct-error:#ff8c91;--cct-dissolve:#ff5c7a;
  /* The red filled close of a sheet (the desktop window close's red); a theme may restyle it. */
  --cct-close:#e81123;--cct-close-hover:#c50f1f;--cct-on-close:#ffffff;
  --cct-mention:#79b8ff;--cct-mention-bg:rgba(88,166,255,.16);--cct-mention-me:#ffd479;--cct-warn:#fabe3c;--cct-warn-rgb:250,190,60;
  --cct-unread-bg:#4a3a15;--cct-unread-fg:#ffcf6b;
  --cct-font-display:inherit;--cct-glow:0 0 0 transparent;--cct-glow-strong:0 0 0 transparent;--cct-scan:linear-gradient(transparent,transparent);--cct-fx:0;
}
/* CYBERPUNK -- the default. Near-black indigo, neon cyan with a magenta second accent, angular
   corners, Orbitron (bundled: static/fonts/orbitron.woff2) for names and headings. */
:root,[data-cc-theme="cyberpunk"]{
  --cct-rail:#05040c;--cct-side:#0a0918;--cct-main:#0e0c1f;--cct-hover:#1a1738;--cct-raised:#141130;--cct-pop:#0c0a1d;
  --cct-sunk:#07060f;--cct-chip:#1b1838;
  --cct-text:#e8ebff;--cct-strong:#ffffff;--cct-muted:#a3abdf;--cct-dim:#8189c4;
  --cct-accent:#00f0ff;--cct-accent-rgb:0,240,255;--cct-accent2:#ff2bd6;--cct-accent2-rgb:255,43,214;--cct-on-accent:#03020a;
  --cct-line:rgba(0,240,255,.16);--cct-tint-rgb:150,190,255;--cct-shade-rgb:0,0,0;--cct-round:.55;
  --cct-scrim:rgba(3,2,10,.82);--cct-font-display:'Orbitron','Inter',system-ui,sans-serif;
  --cct-glow:0 0 10px rgba(var(--cct-accent-rgb),.35);--cct-glow-strong:0 0 18px rgba(var(--cct-accent-rgb),.55);
  --cct-scan:repeating-linear-gradient(0deg,rgba(var(--cct-accent-rgb),.07) 0 1px,transparent 1px 3px);--cct-fx:1;
}
/* SYNTHWAVE -- dusk purple, hot pink and sunset gold, soft corners. */
[data-cc-theme="synthwave"]{
  --cct-rail:#120a24;--cct-side:#1a0f33;--cct-main:#21133f;--cct-hover:#33205c;--cct-raised:#2a1850;--cct-pop:#1a0f33;
  --cct-sunk:#120a24;--cct-chip:#341f5e;
  --cct-text:#f6ecff;--cct-strong:#ffffff;--cct-muted:#cdb3ee;--cct-dim:#ab90d6;
  --cct-accent:#ff5fd2;--cct-accent-rgb:255,95,210;--cct-accent2:#ffb86b;--cct-accent2-rgb:255,184,107;--cct-on-accent:#1a0420;
  --cct-line:rgba(255,95,210,.2);--cct-tint-rgb:255,220,255;--cct-shade-rgb:10,0,25;--cct-round:1.3;
  --cct-scrim:rgba(18,6,36,.8);--cct-font-display:'Orbitron','Inter',system-ui,sans-serif;
  --cct-glow:0 0 10px rgba(var(--cct-accent-rgb),.35);--cct-glow-strong:0 0 18px rgba(var(--cct-accent-rgb),.5);
  --cct-scan:linear-gradient(90deg,rgba(var(--cct-accent-rgb),.18),rgba(var(--cct-accent2-rgb),.08));--cct-fx:1;
}
/* MONERO -- Monero's own palette: the orange (#F26822 / #FF6600) over dark charcoal greys (#4C4C4C
   down to #1E1E1E), white text. A colour theme only. */
[data-cc-theme="monero"]{
  --cct-rail:#161616;--cct-side:#1e1e1e;--cct-main:#252525;--cct-hover:#3a3a3a;--cct-raised:#2e2e2e;--cct-pop:#1e1e1e;
  --cct-sunk:#181818;--cct-chip:#4c4c4c;
  --cct-text:#ffffff;--cct-strong:#ffffff;--cct-muted:#c7c7c7;--cct-dim:#a6a6a6;
  --cct-accent:#ff6600;--cct-accent-rgb:255,102,0;--cct-accent2:#f26822;--cct-accent2-rgb:242,104,34;--cct-on-accent:#161616;
  --cct-line:rgba(255,102,0,.22);--cct-tint-rgb:255,255,255;--cct-shade-rgb:0,0,0;--cct-round:.9;
  --cct-scrim:rgba(12,12,12,.82);
  --cct-glow:0 0 10px rgba(var(--cct-accent-rgb),.3);--cct-glow-strong:0 0 16px rgba(var(--cct-accent-rgb),.45);
  --cct-scan:linear-gradient(90deg,rgba(var(--cct-accent-rgb),.16),rgba(var(--cct-accent-rgb),.03));--cct-font-display:inherit;--cct-fx:0;
}
/* LIGHT -- white paper, indigo accent; every status colour darkened to keep AA on white. */
[data-cc-theme="light"]{
  --cct-rail:#e3e6ef;--cct-side:#f1f3f8;--cct-main:#ffffff;--cct-hover:#e2e6f1;--cct-raised:#f5f6fa;--cct-pop:#ffffff;
  --cct-sunk:#e9ecf3;--cct-chip:#d9dde9;
  --cct-text:#1b1f2e;--cct-strong:#0a0c14;--cct-muted:#4f5770;--cct-dim:#626a80;
  --cct-accent:#4f46e5;--cct-accent-rgb:79,70,229;--cct-accent2:#c026d3;--cct-accent2-rgb:192,38,211;--cct-on-accent:#ffffff;
  --cct-line:rgba(20,30,60,.14);--cct-tint-rgb:20,30,60;--cct-shade-rgb:40,50,80;--cct-round:1;
  --cct-scrim:rgba(40,44,60,.45);
  --cct-glow:0 0 0 transparent;--cct-glow-strong:0 0 0 transparent;--cct-scan:linear-gradient(transparent,transparent);--cct-font-display:inherit;--cct-fx:0;
  --cct-ok:#1f9d55;--cct-public-fg:#0f7a46;--cct-private-fg:#985700;--cct-gold:#8a6100;--cct-star:#b7791f;
  --cct-danger:#c81e3a;--cct-danger-2:#c81e3a;--cct-error:#c81e3a;--cct-dissolve:#c81e3a;
  --cct-mention:#1d5fd6;--cct-mention-bg:rgba(29,95,214,.12);--cct-mention-me:#7a4f00;--cct-warn:#d99a00;--cct-warn-rgb:217,154,0;
  --cct-unread-bg:#fff0c2;--cct-unread-fg:#7a4f00;
}
/* OLED -- true black for OLED screens and a high-contrast yellow accent; strong borders, no glow. */
[data-cc-theme="oled"]{
  --cct-rail:#000000;--cct-side:#000000;--cct-main:#000000;--cct-hover:#1c1c1c;--cct-raised:#0d0d0d;--cct-pop:#0d0d0d;
  --cct-sunk:#000000;--cct-chip:#1a1a1a;
  --cct-text:#ffffff;--cct-strong:#ffffff;--cct-muted:#d0d0d0;--cct-dim:#a8a8a8;
  --cct-accent:#ffe14d;--cct-accent-rgb:255,225,77;--cct-accent2:#4de1ff;--cct-accent2-rgb:77,225,255;--cct-on-accent:#000000;
  --cct-line:rgba(255,255,255,.32);--cct-tint-rgb:255,255,255;--cct-shade-rgb:0,0,0;--cct-round:.8;
  --cct-scrim:rgba(0,0,0,.86);
  --cct-glow:0 0 0 transparent;--cct-glow-strong:0 0 0 transparent;--cct-scan:linear-gradient(transparent,transparent);--cct-font-display:inherit;--cct-fx:0;
}
/* MATCH APP THEME -- Concord takes the app's own theme variables, whichever app theme is on. */
[data-cc-theme="app"]{
  --cct-rail:var(--bg);--cct-side:var(--bg);--cct-main:var(--bg2);--cct-hover:var(--panel2);--cct-raised:var(--panel2);
  --cct-pop:var(--bg2);--cct-sunk:var(--bg);--cct-chip:var(--panel2);
  --cct-text:var(--text);--cct-strong:var(--text);--cct-muted:var(--muted);--cct-dim:var(--muted);
  --cct-accent:var(--neon);--cct-accent-rgb:var(--accent-rgb);--cct-accent2:var(--neon2);--cct-accent2-rgb:var(--accent2-rgb);
  --cct-on-accent:var(--on-accent);--cct-line:var(--line);--cct-tint-rgb:255,255,255;--cct-shade-rgb:0,0,0;--cct-round:1;
  --cct-scrim:rgba(0,0,0,.6);
  --cct-glow:0 0 0 transparent;--cct-glow-strong:0 0 0 transparent;--cct-scan:linear-gradient(transparent,transparent);--cct-font-display:inherit;--cct-fx:0;
}
:root[data-cc-theme="app"]:is([data-theme="professional"],[data-theme="cherryblossom"],[data-theme="win98"],[data-theme="winxp"],[data-theme="animegirl"]){
  --cct-tint-rgb:20,30,60;--cct-shade-rgb:40,50,80;--cct-scrim:rgba(40,44,60,.45);
  --cct-ok:#1f9d55;--cct-public-fg:#0f7a46;--cct-private-fg:#985700;--cct-gold:#8a6100;--cct-star:#b7791f;
  --cct-danger:#c81e3a;--cct-danger-2:#c81e3a;--cct-error:#c81e3a;--cct-dissolve:#c81e3a;
  --cct-mention:#1d5fd6;--cct-mention-bg:rgba(29,95,214,.12);--cct-mention-me:#7a4f00;--cct-unread-bg:#fff0c2;--cct-unread-fg:#7a4f00;
}
:root[data-cc-theme="app"]:not([data-theme]){--cct-font-display:'Orbitron','Inter',system-ui,sans-serif;--cct-glow:0 0 10px rgba(var(--cct-accent-rgb),.3);--cct-fx:1}
/* CLASSIC -- the look Concord had before themes, value for value (it follows the app's accent,
   text, muted and line colours exactly as it always did). Keep it LAST. */
[data-cc-theme="classic"]{
  --cct-rail:#11131a;--cct-side:#191c25;--cct-main:#20232d;--cct-hover:#2a2e3a;--cct-raised:#2b2f3b;--cct-pop:#171a22;
  --cct-sunk:#151821;--cct-chip:#292d39;
  --cct-text:var(--text);--cct-strong:#fff;--cct-muted:var(--muted);--cct-dim:var(--muted);
  --cct-accent:var(--neon);--cct-accent-rgb:var(--accent-rgb);--cct-accent2:#7785ff;--cct-accent2-rgb:88,101,242;--cct-on-accent:#071115;
  --cct-line:var(--line);--cct-tint-rgb:255,255,255;--cct-shade-rgb:0,0,0;--cct-round:1;--cct-scrim:rgba(7,8,12,.78);
  --cct-toolbar:#20232d;--cct-menu:#11141b;--cct-identity:#151821;--cct-media:#0d0f14;--cct-compose:#2b2f3b;--cct-reply:#252934;
  --cct-card:#20242e;--cct-room:#242833;--cct-room-hover:#2b303c;--cct-joined:#282d39;--cct-joined-hover:#303642;
  --cct-chip-2:#303541;--cct-chip-2-hover:#3a4050;--cct-public-icon:#3b4252;
  --cct-title:#f1f3f8;--cct-fg-menu:#eef1f8;--cct-input:#f2f3f6;--cct-label:#c9ced9;--cct-icon:#d8dce6;--cct-icon-2:#dce0eb;
  --cct-react-fg:#e8eaf0;--cct-fg-2:#aeb4c2;--cct-fg-3:#9fa6b4;--cct-fg-4:#777f90;--cct-discover-fg:#b8bfcc;--cct-section:#9298a8;
  --cct-hash:#8e95a5;--cct-header-hash:#969dac;--cct-welcome:#aab0bd;--cct-placeholder:#969dab;--cct-room-sub:#b0b6c3;
  --cct-reply-fg:#b7bdca;--cct-hl-rgb:45,212,191;--cct-soft-rgb:122,162,247;--cct-react-rgb:88,101,242;--cct-react-mine:#7785ff;
  --cct-close:#e81123;--cct-close-hover:#c50f1f;--cct-on-close:#ffffff;
}

/* Every theme but Classic also re-points the APP's variables inside Concord's own surfaces, so the
   shared pieces drawn there (buttons, inputs, the @ picker, threads, polls, the sheets it opens)
   follow the theme instead of the app's. Classic never did, so it does not now. */
:root:not([data-cc-theme="classic"]) :is(.cc-app,.cc-join,.cc-member-menu,.cc-reaction-picker),
:root:not([data-cc-theme="classic"]) :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) #modal-root .modal{
  --neon:var(--cct-accent);--cyan:var(--cct-accent);--neon2:var(--cct-accent2);--magenta:var(--cct-accent2);
  --accent-rgb:var(--cct-accent-rgb);--accent2-rgb:var(--cct-accent2-rgb);--accent:var(--cct-accent);--on-accent:var(--cct-on-accent);
  --text:var(--cct-text);--muted:var(--cct-muted);--line:var(--cct-line);
  --bg:var(--cct-sunk);--bg2:var(--cct-main);--panel:var(--cct-raised);--panel2:var(--cct-hover);
  --cc-accent:var(--cct-accent);--cc-line:var(--cct-line);
}
:root:not([data-cc-theme="classic"]) :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) #modal-root .modal{background:var(--cct-raised)!important;color:var(--cct-text)!important;border-color:rgba(var(--cct-accent-rgb),.35)!important;border-radius:calc(14px*var(--cct-round))!important}
:root:not([data-cc-theme="classic"]) :is(.cc-app,.cc-join,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) #modal-root .modal) .btn-neon{background:var(--cct-accent)!important;border-color:var(--cct-accent)!important;color:var(--cct-on-accent)!important;box-shadow:var(--cct-glow)!important;text-shadow:none!important}
:root:not([data-cc-theme="classic"]) :is(.cc-app,.cc-join,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) #modal-root .modal) .btn-ghost{border-color:rgba(var(--cct-accent-rgb),.55)!important;color:var(--cct-text)!important}
:root:not([data-cc-theme="classic"]) :is(.cc-app,.cc-join,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) #modal-root .modal) .input{background:var(--cct-sunk)!important;color:var(--cct-text)!important;border-color:var(--cct-line)!important}
/* Display font for names and headings (Orbitron on the neon presets, the body font elsewhere). */
:root:not([data-cc-theme="classic"]) :is(.cc-channels>header b,.cc-conversation>header>b,.cc-section,.cc-channel-name,.cc-members-pane>header b,.cc-welcome h2,.cc-join-card h2,.cc-discover h2,.cc-public h3,.cc-joined h3){font-family:var(--cct-font-display)!important;letter-spacing:.02em}
:root:not([data-cc-theme="classic"]) .cc-channel-name{font-size:13.5px!important}
:root:not([data-cc-theme="classic"]) :is(.cc-channel.active,.cc-channel:hover) .cc-channel-name{color:var(--cct-strong)!important}
/* Active items: an accent edge, a soft glow and (neon presets) a scanline wash. */
:root:not([data-cc-theme="classic"]) .cc-channel.active{background:var(--cct-scan),linear-gradient(90deg,rgba(var(--cct-accent-rgb),.2),rgba(var(--cct-accent-rgb),.04))!important;box-shadow:inset 3px 0 0 var(--cct-accent),var(--cct-glow)!important;color:var(--cct-strong)!important}
/* The brand mark glows; an ACTIVE community does not -- on the rail a glow means "unread" (ccUnreadGlow). */
:root:not([data-cc-theme="classic"]) .cc-brand{box-shadow:var(--cct-glow-strong)!important}
:root:not([data-cc-theme="classic"]) .cc-server.active:before{background:var(--cct-accent)!important;box-shadow:var(--cct-glow)!important}
:root:not([data-cc-theme="classic"]) .cc-conversation>header{border-bottom-color:rgba(var(--cct-accent-rgb),.22)!important}
:root:not([data-cc-theme="classic"]) .cc-compose:focus-within{border-color:rgba(var(--cct-accent-rgb),.6)!important;box-shadow:0 0 0 1px rgba(var(--cct-accent-rgb),.35),var(--cct-glow)!important}
/* The composer's textarea is the one control EXCLUDED: a textarea is :focus-visible whenever it has focus, so this
   ring drew a second, inner box around the message while typing ("there is a rectangle box when you enter your
   message in the room ... so everywhere"). The bar around it already lights up (focus-within). */
:root:not([data-cc-theme="classic"]) :is(.cc-app,.cc-join,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) #modal-root .modal) :is(button,a,input,textarea,select,[tabindex]):not(.cc-compose textarea):focus-visible{outline:2px solid var(--cct-accent)!important;outline-offset:2px!important;box-shadow:var(--cct-glow-strong)!important}
/* The neon presets (Cyberpunk, Synthwave, and Match-app on the app's own cyberpunk look) add their
   second accent to section labels and the channel mark, and a faint corner wash behind the chat. */
:root:is(:not([data-cc-theme]),[data-cc-theme="cyberpunk"],[data-cc-theme="synthwave"]) :is(.cc-section,.cc-conversation>header .cc-hash){color:var(--cct-accent2)!important}
:root:is(:not([data-cc-theme]),[data-cc-theme="cyberpunk"],[data-cc-theme="synthwave"]) .cc-conversation>header{box-shadow:0 1px 0 rgba(var(--cct-accent-rgb),.22),0 8px 22px -14px rgba(var(--cct-accent2-rgb),.7)!important}
:root:is(:not([data-cc-theme]),[data-cc-theme="cyberpunk"],[data-cc-theme="synthwave"]) .cc-conversation{background-image:radial-gradient(900px 520px at 100% 0%,rgba(var(--cct-accent2-rgb),.07),transparent 62%),radial-gradient(800px 480px at 0% 100%,rgba(var(--cct-accent-rgb),.06),transparent 60%)!important}
:root:is(:not([data-cc-theme]),[data-cc-theme="cyberpunk"],[data-cc-theme="synthwave"]) .cc-communities{box-shadow:inset -1px 0 0 rgba(var(--cct-accent-rgb),.14)!important}
/* The neon presets breathe on the active channel; nobody who asked for less motion sees it move,
   and nothing animates while the app is backgrounded (body.anim-off). */
@keyframes ccThemePulse{0%,100%{box-shadow:inset 3px 0 0 var(--cct-accent),0 0 6px rgba(var(--cct-accent-rgb),.25)}50%{box-shadow:inset 3px 0 0 var(--cct-accent),0 0 16px rgba(var(--cct-accent-rgb),.55)}}
:root:is(:not([data-cc-theme]),[data-cc-theme="cyberpunk"],[data-cc-theme="synthwave"]) .cc-channel.active{animation:ccThemePulse 3.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){:root .cc-channel.active{animation:none!important}}
body.anim-off .cc-channel.active{animation:none!important}

/* The theme picker (Concord's user bar → palette). */
.cc-theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin:14px 0}
.cc-theme-swatch{display:flex;flex-direction:column;gap:7px;min-height:44px;padding:7px;border:2px solid var(--cct-line);border-radius:calc(12px*var(--cct-round));background:var(--cct-side);color:var(--cct-text);font:inherit;font-weight:600;font-size:13px;line-height:1.2;text-align:start;cursor:pointer}
.cc-theme-swatch.on{border-color:var(--cct-accent);box-shadow:0 0 0 2px rgba(var(--cct-accent-rgb),.35)}
.cc-theme-swatch>span:last-child{display:flex;justify-content:space-between;align-items:center;gap:6px}
.cc-theme-prev{display:grid;grid-template-columns:14% 30% 1fr;height:54px;overflow:hidden;border-radius:calc(8px*var(--cct-round));border:1px solid var(--cct-line)}
.cc-theme-prev i{display:block}.cc-theme-prev i:nth-child(1){background:var(--cct-rail)}.cc-theme-prev i:nth-child(2){background:var(--cct-side);padding:6px 4px}
.cc-theme-prev i:nth-child(2)::before{content:"";display:block;height:7px;border-radius:3px;background:rgba(var(--cct-accent-rgb),.55);box-shadow:inset 2px 0 0 var(--cct-accent)}
.cc-theme-prev i:nth-child(3){background:var(--cct-main);padding:7px 6px;display:flex;flex-direction:column;gap:4px}
.cc-theme-prev b{display:block;height:5px;border-radius:3px;background:var(--cct-text);opacity:.8}.cc-theme-prev b+b{width:60%;background:var(--cct-accent);opacity:1}
.cc-theme-custom{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.cc-theme-custom label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--muted)}
.cc-theme-custom input[type=color]{width:100%;height:44px;padding:3px;border:1px solid var(--line);border-radius:10px;background:transparent;cursor:pointer}
.cc-theme-custom .btn{grid-column:1/-1;min-height:44px}
.cc-theme-note{margin:8px 0 0;font-size:12px;color:var(--muted)}
@media(max-width:520px){.cc-theme-grid{grid-template-columns:1fr 1fr}}
/* ==== END CONCORD THEMES ==== */
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-actions{gap:2px!important;padding:3px!important;border-radius:calc(9px*var(--cct-round))!important;max-width:max-content!important}:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-actions button{display:grid!important;width:32px!important;min-width:32px!important;max-width:32px!important;height:30px!important;padding:0!important;font-size:16px!important;font-weight:750!important}:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-actions button::after{content:none!important;display:none!important}.cc-reaction{min-height:28px!important;padding:3px 8px!important;border-color:rgba(var(--cct-react-rgb),.48)!important;background:rgba(var(--cct-react-rgb),.13)!important}.cc-reaction:hover{border-color:var(--cct-accent)!important;background:rgba(var(--cct-hl-rgb),.12)!important}
@media(max-width:820px){:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app{width:100%!important;max-width:100%!important;min-width:0!important}:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-channels{min-width:0!important;max-width:calc(100vw - 62px)!important}:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-conversation{width:100vw!important;max-width:100vw!important;overflow:hidden!important}:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-actions button{width:36px!important;min-width:36px!important;max-width:36px!important;height:36px!important}}
.cc-public-icon{overflow:hidden!important}.cc-public-icon img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}.cc-public-icon>span{display:grid!important;place-items:center!important;width:100%!important;height:100%!important}
.cc-member-help{margin:4px 0 10px!important;color:var(--cct-muted)!important;font-size:12px!important}.cc-member-menu{position:fixed!important;z-index:10000!important;display:grid!important;width:182px!important;padding:5px!important;border:1px solid rgba(var(--cct-tint-rgb),.13)!important;border-radius:calc(10px*var(--cct-round))!important;background:var(--cct-menu)!important;box-shadow:0 14px 38px rgba(var(--cct-shade-rgb),.55)!important}.cc-member-menu button{min-height:38px!important;padding:7px 10px!important;border:0!important;border-radius:calc(7px*var(--cct-round))!important;background:transparent!important;color:var(--cct-fg-menu)!important;text-align:start!important;font:600 13px/1.2 inherit!important}.cc-member-menu button:hover,.cc-member-menu button:focus-visible{background:var(--cc-hover)!important;outline:0!important}.cc-member-menu button.danger{color:var(--cct-danger)!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .app{grid-template-columns:300px minmax(0,1fr)!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;column-gap:0!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .rightbar,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .rb-toggle,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) #rb-toggle{display:none!important;visibility:hidden!important;pointer-events:none!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .main,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .feed.feed-dm{width:100%!important;max-width:none!important;min-width:0!important;margin:0!important}
/* `100%`, NEVER `100vw`, AND THAT ONE UNIT IS THE WHOLE 'concord still not maximizing to
   width' BUG. The client scales the UI with `body{zoom}` by viewport, and `vw` is resolved
   against the DEVICE viewport with no regard for zoom — so at zoom 0.67 a `max-width:100vw`
   caps this at 1280 CSS px inside a body that is actually 1910 CSS px wide, and a third of
   the monitor goes unused. It looked correct on exactly one class of display: the ones wide
   enough to be at zoom 1, which is why every earlier fix here appeared to work. Measured:
   1280px viewport -> 858px used (422px wasted); 1920 -> 1478 (442 wasted); 3072 -> full.
   `100%` is relative to the parent and therefore already in the zoomed coordinate space.
   The `overflow-x:clip` half is the part that was actually wanted and is unchanged. */
html:has(body.concord-view),body.concord-view,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .app,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .main,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .feed,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-conversation,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-messages{max-width:100%!important;overflow-x:clip!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-messages{overscroll-behavior-x:none!important;touch-action:pan-y!important}
/* Tablets were falling between the phone drill-down (<=820px) and the wide desktop assumptions.
   Explicitly consume the remaining track and remove the shell's content caps at common 834–1180px
   tablet widths; the conversation column, not an empty right gutter, gets every spare pixel. */
@media(min-width:821px) and (max-width:1180px){
  /* `100%`, not `100vw` — the SAME unit bug as the cap above, and this is the copy that broke
     Concord in a desktop WINDOW. This block covers 821-1180px, which is exactly the size a
     PosterChan window opens at, and `vw` is the DEVICE viewport with no regard for the
     client's body{zoom}. Measured in a 900px window: .app 603px of 900, the chat 161px, and
     the conversation column ZERO. Full screen never enters this block, which is why it
     looked fine there — and why dragging the window past 1180px 'fixed' it, reported as
     "it starts not fit to width then it fits if you resize sway window". */
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .app{grid-template-columns:240px minmax(0,1fr)!important;width:100%!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .main,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .feed.feed-dm{width:100%!important;max-width:none!important;min-width:0!important;margin:0!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app{width:100%!important;max-width:none!important;grid-template-columns:62px 220px minmax(0,1fr) 190px!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-conversation{width:auto!important;max-width:none!important}
}
.osw-body>#feed.feed-dm:has(.cc-app){width:100%!important;height:100%!important;max-width:none!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important}.osw-slot:has(>.cc-app){padding:0!important;opacity:1!important;overflow:hidden!important}.osw-slot>.cc-app{width:100%!important;height:100%!important;min-height:0!important}
/* PosterChanOS scales its desktop with `body { zoom }`. A maximised frame therefore occupies the
   work area's *layout* width, which is intentionally wider than 100vw. The generic browser safety
   cap above used 100vw on every Concord descendant; under desktop zoom that clipped the workspace
   before the frame's right edge and left a black/empty strip. Inside a managed OS window the frame,
   not the viewport, is the sizing authority. Keep every grid/flex link shrinkable and let it consume
   the complete osw-body width. */
body.os-on.concord-view .osw-body>#feed.feed-dm:has(.cc-app),
body.os-on.concord-view .osw-body>#feed.feed-dm:has(.cc-app)>.cc-app,
body.os-on.concord-view .osw-slot>.cc-app,
body.os-on.concord-view .osw-body .cc-conversation,
body.os-on.concord-view .osw-body .cc-messages{
  width:100%!important;max-width:none!important;min-width:0!important
}
.cc-settings-description{display:block!important;width:100%!important;min-height:76px!important;margin-top:10px!important;resize:vertical!important;font:14px/1.4 inherit!important}.cc-member-list{display:flex!important;flex-direction:column!important;gap:3px!important;max-height:50vh!important;overflow:auto!important;margin-top:8px!important}.cc-member{display:flex!important;align-items:center!important;gap:9px!important;width:100%!important;min-width:0!important;padding:7px 8px!important;border:0!important;border-radius:calc(8px*var(--cct-round))!important;background:transparent!important;color:inherit!important;text-align:start!important;cursor:pointer!important}.cc-member:hover,.cc-member:focus-visible{background:var(--cc-hover)!important;outline:0!important}.cc-member img{flex:0 0 32px!important;width:32px!important;height:32px!important;border-radius:50%!important;object-fit:cover!important}.cc-member>span{min-width:0!important}.cc-member b{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:13px!important}.cc-member small{display:block!important;color:var(--cct-muted)!important;font-size:11px!important}
.cc-attach-choices{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:18px!important}.cc-attach-choices .btn{min-height:48px!important}@media(max-width:520px){.cc-attach-choices{grid-template-columns:1fr!important}}
.cc-visibility-line{display:flex;flex-direction:column;gap:2px;margin-top:6px;padding:8px 10px;border:1px solid var(--cct-line);border-radius:8px}.cc-visibility-line span{opacity:.7;font-size:.86em}.cc-visibility{padding:3px 7px!important;border-radius:999px!important;font-size:10px!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.35px!important}.cc-visibility.public{background:rgba(45,196,129,.14)!important;color:var(--cct-public-fg)!important}.cc-visibility.private{background:rgba(245,166,35,.15)!important;color:var(--cct-private-fg)!important}
.cc-channel-name{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:inherit!important;color:inherit!important}.cc-channel-kind{flex:0 0 auto!important}.cc-channel-lock{flex:0 0 14px!important;width:14px!important;height:14px!important;margin-inline-start:auto!important;opacity:.65!important}.cc-zap-tally{display:inline-flex!important;align-items:center!important;min-height:28px!important;padding:3px 9px!important;border:1px solid rgba(255,196,64,.45)!important;border-radius:calc(9px*var(--cct-round))!important;background:rgba(255,196,64,.1)!important;color:var(--cct-gold)!important;font-size:11px!important;font-weight:800!important}
.feed.feed-dm:has(.cc-app){padding:0!important;overflow:hidden!important;position:relative!important;display:flex!important;flex-direction:column!important}.feed.feed-dm:has(.cc-app)>.cc-app{flex:1 1 auto!important;height:auto!important;min-height:0!important}.feed.feed-dm:has(.cc-app)>.messages-tabs{width:100%!important}
.cc-app{--cc-rail:var(--cct-rail);--cc-side:var(--cct-side);--cc-main:var(--cct-main);--cc-hover:var(--cct-hover);display:grid!important;grid-template-columns:68px 248px minmax(0,1fr) 220px!important;height:100%!important;min-height:0!important;overflow:hidden!important;background:var(--cc-main)!important;color:var(--cct-text)!important;font-family:inherit!important}
.cc-app:not(:has(>.cc-members-pane)),.cc-app:has(>.cc-members-pane.hidden){grid-template-columns:68px 248px minmax(0,1fr)!important}
.cc-members-pane{display:flex!important;flex-direction:column!important;min-width:0!important;min-height:0!important;background:var(--cc-side)!important;border-inline-start:1px solid rgba(var(--cct-shade-rgb),.35)!important}.cc-members-pane.hidden{display:none!important}.cc-members-pane>header{display:flex!important;align-items:center!important;justify-content:space-between!important;flex:0 0 54px!important;padding:0 14px!important;border-bottom:1px solid rgba(var(--cct-shade-rgb),.35)!important}.cc-members-pane>header span{color:var(--cct-muted)!important;font-size:12px!important}.cc-members-scroll{flex:1!important;min-height:0!important;overflow-y:auto!important;padding:10px 8px!important}.cc-members-pane .cc-member{background:transparent!important}.cc-members-pane .cc-member:hover{background:var(--cc-hover)!important}
@media(min-width:821px) and (max-width:1180px){.cc-app:not(:has(>.cc-members-pane)),.cc-app:has(>.cc-members-pane.hidden){grid-template-columns:62px 220px minmax(0,1fr)!important}}
.cc-app *{box-sizing:border-box}.cc-communities{display:flex!important;flex-direction:column!important;align-items:center!important;gap:9px!important;min-width:0!important;padding:11px 7px!important;overflow-y:auto!important;background:var(--cc-rail)!important;border-inline-end:1px solid rgba(var(--cct-tint-rgb),.04)!important}
.cc-brand,.cc-server{display:grid!important;place-items:center!important;flex:0 0 46px!important;width:46px!important;height:46px!important;margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:var(--cct-chip)!important;color:var(--cct-fg-menu)!important;font:800 15px/1 inherit!important;cursor:pointer!important;transition:border-radius .16s,background .16s,color .16s!important}.cc-brand{border-radius:calc(15px*var(--cct-round))!important;background:var(--cct-accent)!important;color:var(--cct-on-accent)!important;font-size:22px!important}.cc-server:hover,.cc-server.active{border-radius:calc(14px*var(--cct-round))!important;background:var(--cct-accent)!important;color:var(--cct-on-accent)!important}.cc-server.active:before{content:"";position:absolute;inset-inline-start:0;width:4px;height:34px;border-radius:0 calc(4px*var(--cct-round)) calc(4px*var(--cct-round)) 0;background:var(--cct-strong)}.cc-server{position:relative}.cc-add{font-size:25px!important;color:var(--cct-accent)!important}
.cc-discovery-button{font-size:24px!important;color:var(--cct-discover-fg)!important}
.cc-server-img{display:block!important;width:100%!important;height:100%!important;border-radius:inherit!important;object-fit:cover!important}.cc-server-glyph{display:block!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.cc-server:has(.cc-server-img):hover,.cc-server.active:has(.cc-server-img){background:var(--cct-chip)!important}
.cc-server.unread:after{content:"";position:absolute!important;inset-inline-start:-7px!important;width:5px!important;height:10px!important;border-radius:0 calc(4px*var(--cct-round)) calc(4px*var(--cct-round)) 0!important;background:var(--cct-strong)!important}.cc-channel.unread{color:var(--cct-strong)!important;font-weight:800!important}.cc-channel.unread:after{content:"";width:7px!important;height:7px!important;margin-inline-start:auto!important;border-radius:50%!important;background:var(--cct-accent)!important}
.cc-channels{display:flex!important;flex-direction:column!important;min-width:0!important;min-height:0!important;background:var(--cc-side)!important;border-inline-end:1px solid rgba(var(--cct-shade-rgb),.35)!important}.cc-channels>header,.cc-conversation>header{display:flex!important;align-items:center!important;gap:9px!important;flex:0 0 54px!important;min-height:54px!important;padding:0 12px!important;border-bottom:1px solid rgba(var(--cct-shade-rgb),.35)!important;background:rgba(var(--cct-shade-rgb),.08)!important;box-shadow:0 1px 2px rgba(var(--cct-shade-rgb),.18)!important}.cc-channels>header>div{flex:1!important;min-width:0!important}.cc-channels header b,.cc-identity b{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:14px!important}.cc-channels header small,.cc-identity small{display:block!important;margin-top:2px!important;color:var(--cct-muted)!important;font-size:11px!important}.cc-channel-list{flex:1!important;min-height:0!important;overflow-y:auto!important;padding:11px 8px!important}.cc-section{padding:13px 8px 5px!important;color:var(--cct-section)!important;font-size:10px!important;font-weight:800!important;letter-spacing:.65px!important}.cc-channel-row{display:flex!important;align-items:center!important;min-width:0!important}.cc-channel{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;flex:1!important;min-height:40px!important;margin:1px 0!important;padding:7px 9px!important;border:0!important;border-radius:calc(7px*var(--cct-round))!important;background:transparent!important;color:var(--cct-fg-2)!important;font:600 15px/1.2 inherit!important;text-align:start!important;cursor:pointer!important}.cc-channel:hover,.cc-channel.active{background:var(--cc-hover)!important;color:var(--cct-strong)!important}.cc-channel span{font-size:20px!important;color:var(--cct-hash)!important}.cc-channel .ic{width:17px!important;height:17px!important}.cc-channel-star{display:grid!important;place-items:center!important;flex:0 0 34px!important;width:34px!important;height:34px!important;padding:0!important;border:0!important;border-radius:calc(7px*var(--cct-round))!important;background:transparent!important;color:var(--cct-fg-4)!important;font-size:18px!important;cursor:pointer!important}.cc-channel-star:hover,.cc-channel-star[aria-pressed="true"]{background:var(--cc-hover)!important;color:var(--cct-star)!important}.cc-channel-row:not(:hover):not(.starred) .cc-channel-star{opacity:.35!important}.cc-empty-side{padding:24px 12px!important;text-align:center!important;color:var(--cct-muted)!important;font-size:13px!important;line-height:1.45!important}
.cc-identity{display:flex!important;align-items:center!important;gap:9px!important;flex:0 0 56px!important;padding:7px 9px!important;background:var(--cct-identity)!important}.cc-identity>div{flex:1!important;min-width:0!important}.cc-status{display:block!important;flex:0 0 10px!important;width:10px!important;height:10px!important;border-radius:50%!important;background:var(--cct-ok)!important;box-shadow:0 0 0 3px rgba(53,200,117,.12)!important}.cc-head-btn,.cc-compose-btn,.cc-mobile-back{display:grid!important;place-items:center!important;flex:0 0 38px!important;width:38px!important;height:38px!important;margin:0!important;padding:0!important;border:0!important;border-radius:calc(8px*var(--cct-round))!important;background:transparent!important;color:var(--cct-fg-2)!important;cursor:pointer!important}.cc-head-btn:hover,.cc-compose-btn:hover{background:var(--cc-hover)!important;color:var(--cct-strong)!important}.cc-head-btn .ic,.cc-compose-btn .ic{width:19px!important;height:19px!important}.cc-mobile-back{display:none!important;font-size:28px!important}
/* ONE OWNER OF scrollTop — `overflow-anchor:none`, for the same reason `.feed` sets it.
   The browser anchors a scroller itself when content grows above the viewport, and this room ALSO
   restores the reader's anchor from a ResizeObserver. Two corrections for one decrypting picture,
   in an order nothing guarantees, is "scrolling through a room history constantly jerks me to
   different positions". The JS is the owner because it is the half that also has to handle a full
   repaint (where every row is replaced and the browser has nothing left to anchor to) and iOS,
   which does not implement overflow-anchor at all. */
.cc-conversation{display:flex!important;flex-direction:column!important;min-width:0!important;min-height:0!important;background:var(--cc-main)!important}.cc-conversation>header .cc-hash{font-size:23px!important;font-weight:500!important;color:var(--cct-header-hash)!important}.cc-conversation>header>b{font-size:15px!important}.cc-topic{max-width:44%!important;padding-inline-start:11px!important;border-inline-start:1px solid rgba(var(--cct-tint-rgb),.1)!important;color:var(--cct-fg-3)!important;font-size:12px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.cc-spacer{flex:1!important}.cc-messages{display:flex!important;flex:1!important;min-height:0!important;overflow-y:auto!important;overflow-anchor:none!important;padding:22px!important;background:linear-gradient(180deg,rgba(var(--cct-tint-rgb),.008),transparent)!important}.cc-welcome{max-width:560px!important;margin:auto!important;text-align:center!important;color:var(--cct-welcome)!important}.cc-welcome h2{margin:0 0 9px!important;color:var(--cct-title)!important;font-size:24px!important}.cc-welcome p{margin:0 0 18px!important;line-height:1.55!important}.cc-welcome .concord-mark,.cc-welcome-hash{display:grid!important;place-items:center!important;width:64px!important;height:64px!important;margin:0 auto 17px!important;border-radius:calc(20px*var(--cct-round))!important;background:var(--cct-accent)!important;color:var(--cct-on-accent)!important;font-size:30px!important;font-weight:900!important}.cc-welcome-hash{border-radius:50%!important;background:var(--cct-chip-2)!important;color:var(--cct-strong)!important;font-size:35px!important}
/* The channel that could not be READ, as opposed to the one that is genuinely new. Amber rather
   than the neutral hash, because the two states used to be one sentence and the wrong one. */
.cc-welcome-unread .cc-welcome-hash{background:var(--cct-unread-bg)!important;color:var(--cct-unread-fg)!important}
.cc-welcome-retry{padding:9px 16px!important;border:1px solid rgba(var(--cct-tint-rgb),.18)!important;border-radius:calc(9px*var(--cct-round))!important;background:var(--cct-chip-2)!important;color:var(--cct-title)!important;font:inherit!important;cursor:pointer!important}
.cc-welcome-retry:hover{background:var(--cct-chip-2-hover)!important}
.cc-welcome-retry[disabled]{opacity:.6!important;cursor:default!important}
.cc-compose{display:flex!important;align-items:flex-end!important;gap:8px!important;flex:0 0 auto!important;margin:0 16px 16px!important;padding:6px!important;border:1px solid rgba(var(--cct-tint-rgb),.08)!important;border-radius:calc(11px*var(--cct-round))!important;background:var(--cct-compose)!important;box-shadow:0 4px 16px rgba(var(--cct-shade-rgb),.12)!important}.cc-compose textarea{flex:1!important;min-width:0!important;max-height:140px!important;min-height:40px!important;margin:0!important;padding:10px 6px!important;resize:none!important;border:0!important;outline:0!important;background:transparent!important;color:var(--cct-input)!important;font:15px/1.35 inherit!important}.cc-compose textarea:focus,.cc-compose textarea:focus-visible,.cc-compose textarea:not(:placeholder-shown){border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;-webkit-appearance:none!important;appearance:none!important}.cc-compose textarea::placeholder{color:var(--cct-placeholder)!important}.cc-compose textarea:disabled{opacity:.45!important}.cc-compose .btn{flex:0 0 auto!important;height:40px!important;min-height:40px!important;margin:0!important}.cc-compose .cc-compose-btn{height:40px!important}.cc-reply{margin:0 16px!important;padding:8px 12px!important;border:1px solid rgba(var(--cct-tint-rgb),.08)!important;border-bottom:0!important;border-radius:calc(9px*var(--cct-round)) calc(9px*var(--cct-round)) 0 0!important;background:var(--cct-reply)!important}
.cc-join{position:absolute!important;inset:0!important;z-index:20!important;display:grid!important;place-items:center!important;padding:18px!important;background:var(--cct-scrim)!important;backdrop-filter:blur(7px)!important}.cc-join.hidden{display:none!important}.cc-join-card{width:min(480px,100%)!important;padding:26px!important;border:1px solid rgba(var(--cct-tint-rgb),.11)!important;border-radius:calc(18px*var(--cct-round))!important;background:var(--cct-card)!important;box-shadow:0 24px 80px rgba(var(--cct-shade-rgb),.6)!important}.cc-join-card .concord-mark{display:grid!important;place-items:center!important;width:48px!important;height:48px!important;margin-bottom:15px!important;border-radius:calc(14px*var(--cct-round))!important;background:var(--cct-accent)!important;color:var(--cct-on-accent)!important;font-size:23px!important;font-weight:900!important}.cc-join-card h2{margin:0 0 7px!important;color:var(--cct-strong)!important}.cc-join-card p{line-height:1.45!important}.cc-join-card .input{width:100%!important;margin-top:10px!important;font-size:16px!important}.cc-join-actions{display:flex!important;justify-content:flex-end!important;gap:8px!important;margin-top:17px!important}
.cc-discover{width:min(760px,100%)!important;margin:auto!important}.cc-discover>.concord-mark{display:grid!important;place-items:center!important;width:58px!important;height:58px!important;border-radius:calc(17px*var(--cct-round))!important;background:var(--cct-accent)!important;color:var(--cct-on-accent)!important;font-size:27px!important;font-weight:900!important}.cc-discover h2{margin:14px 0 5px!important}.cc-discover>p{color:var(--cct-muted)!important}.cc-primary-actions{display:flex!important;gap:9px!important;margin:18px 0 28px!important}.cc-public{display:grid!important;gap:8px!important;padding-top:20px!important;border-top:1px solid rgba(var(--cct-tint-rgb),.1)!important}.cc-public h3{margin:0!important}.cc-public-empty span{display:block!important;color:var(--cct-muted)!important;font-size:12px!important}.cc-public-empty{padding:18px!important;border:1px dashed rgba(var(--cct-tint-rgb),.14)!important;border-radius:calc(12px*var(--cct-round))!important;background:rgba(var(--cct-shade-rgb),.08)!important}.cc-public-empty span{margin-top:5px!important;line-height:1.45!important}.cc-public-room{display:grid!important;grid-template-columns:42px minmax(0,1fr) auto!important;align-items:center!important;gap:11px!important;padding:10px 12px!important;border:1px solid rgba(var(--cct-tint-rgb),.08)!important;border-radius:calc(12px*var(--cct-round))!important;background:var(--cct-room)!important;color:var(--cct-strong)!important;text-align:start!important;cursor:pointer!important}.cc-public-room:hover{border-color:rgba(var(--cct-hl-rgb),.45)!important;background:var(--cct-room-hover)!important}.cc-public-icon{display:grid!important;place-items:center!important;width:42px!important;height:42px!important;border-radius:calc(13px*var(--cct-round))!important;background:var(--cct-public-icon)!important;color:var(--cct-strong)!important;font-size:13px!important;font-weight:900!important}.cc-public-copy{min-width:0!important}.cc-public-copy b,.cc-public-copy small,.cc-public-copy em{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.cc-public-copy small{margin-top:2px!important;color:var(--cct-room-sub)!important;font-size:12px!important}.cc-public-copy em{margin-top:3px!important;color:var(--cct-fg-4)!important;font-size:10px!important;font-style:normal!important}.cc-public-room strong{padding:7px 11px!important;border-radius:calc(8px*var(--cct-round))!important;background:var(--cct-accent)!important;color:var(--cct-on-accent)!important;font-size:12px!important}.cc-label{display:block!important;margin-top:16px!important;color:var(--cct-label)!important;font-size:12px!important;font-weight:700!important}.cc-message-list{width:100%!important;align-self:flex-start!important}.cc-message{display:flex!important;align-items:flex-start!important;gap:9px!important;padding:8px 4px!important}.cc-message-avatar{flex:0 0 32px!important;width:32px!important;height:32px!important;border-radius:50%!important;object-fit:cover!important}.cc-message-body{min-width:0!important;flex:1!important}.cc-message b{margin-inline-end:8px!important}.cc-message time{color:var(--cct-muted)!important;font-size:11px!important}.cc-message p{margin:3px 0 0!important;white-space:pre-wrap!important;overflow-wrap:anywhere!important}
.cc-joined{display:grid!important;gap:8px!important;margin:0 0 24px!important;padding-bottom:20px!important;border-bottom:1px solid rgba(var(--cct-tint-rgb),.1)!important}.cc-joined h3{margin:0!important}.cc-joined>div small{color:var(--cct-muted)!important}.cc-joined-room{display:grid!important;grid-template-columns:42px minmax(0,1fr) auto!important;align-items:center!important;gap:11px!important;padding:10px 12px!important;border:1px solid rgba(var(--cct-tint-rgb),.1)!important;border-radius:calc(12px*var(--cct-round))!important;background:var(--cct-joined)!important;color:var(--cct-strong)!important;text-align:start!important;cursor:pointer!important}.cc-joined-room:hover,.cc-joined-room:active{border-color:rgba(var(--cct-hl-rgb),.5)!important;background:var(--cct-joined-hover)!important}.cc-joined-room strong{padding:7px 11px!important;border-radius:calc(8px*var(--cct-round))!important;background:rgba(var(--cct-tint-rgb),.08)!important;color:var(--cct-strong)!important;font-size:12px!important}.cc-joined-room.unread{border-color:rgba(var(--cct-tint-rgb),.28)!important}.cc-joined-room.unread .cc-public-copy b{font-weight:850!important;color:var(--cct-strong)!important}
.cc-message{position:relative!important}.cc-message:hover{background:rgba(var(--cct-tint-rgb),.025)!important}.cc-message-actions{position:absolute!important;inset-inline-end:5px!important;top:1px!important;display:none!important;padding:2px!important;border:1px solid rgba(var(--cct-tint-rgb),.1)!important;border-radius:calc(8px*var(--cct-round))!important;background:var(--cct-pop)!important}.cc-message:hover .cc-message-actions,.cc-message:focus-within .cc-message-actions{display:flex!important}.cc-message-actions button,.cc-reaction-picker button{display:grid!important;place-items:center!important;width:30px!important;height:28px!important;padding:0!important;border:0!important;border-radius:calc(6px*var(--cct-round))!important;background:transparent!important;color:var(--cct-icon)!important;font-size:16px!important;cursor:pointer!important}.cc-message-actions button:hover,.cc-reaction-picker button:hover{background:var(--cc-hover)!important;color:var(--cct-strong)!important}.cc-message-reply{margin:0 0 5px!important;padding-inline-start:8px!important;border-inline-start:2px solid var(--cct-accent)!important;color:var(--cct-fg-2)!important;font-size:12px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;cursor:pointer!important}.cc-message-reply:hover{color:var(--cct-strong)!important;background:rgba(var(--cct-tint-rgb),.035)!important}.cc-message-reply b{color:var(--cct-strong)!important}.cc-message-target{animation:cc-target-flash 1.8s ease-out}@keyframes cc-target-flash{0%,35%{background:rgba(var(--cct-react-rgb),.28)}100%{background:transparent}}.cc-reactions{display:flex!important;flex-wrap:wrap!important;gap:4px!important;margin-top:5px!important}.cc-reaction{display:flex!important;align-items:center!important;gap:4px!important;min-height:26px!important;padding:2px 7px!important;border:1px solid rgba(var(--cct-hl-rgb),.25)!important;border-radius:calc(8px*var(--cct-round))!important;background:rgba(var(--cct-hl-rgb),.08)!important;color:var(--cct-strong)!important;cursor:pointer!important}.cc-reaction b{margin:0!important;font-size:11px!important}.cc-reaction-picker{position:absolute!important;z-index:8!important;inset-inline-end:5px!important;top:34px!important;display:flex!important;flex-wrap:wrap!important;width:140px!important;padding:5px!important;border:1px solid rgba(var(--cct-tint-rgb),.12)!important;border-radius:calc(9px*var(--cct-round))!important;background:var(--cct-pop)!important;box-shadow:0 10px 30px rgba(var(--cct-shade-rgb),.45)!important}.cc-reply{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;color:var(--cct-reply-fg)!important;font-size:12px!important}.cc-reply.hidden{display:none!important}.cc-reply span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.cc-reply button{border:0!important;background:transparent!important;color:var(--cct-strong)!important;font-size:20px!important;cursor:pointer!important}
.cc-encrypted-attachment,.cc-plain-attachment{display:block!important;width:fit-content!important;max-width:min(560px,100%)!important;min-width:0!important;margin-top:7px!important;overflow:hidden!important;color:var(--cct-muted)!important}.cc-attachment-open{display:block!important;width:fit-content!important;max-width:100%!important;margin:0!important;padding:0!important;border:0!important;border-radius:calc(10px*var(--cct-round))!important;background:transparent!important;cursor:zoom-in!important}.cc-encrypted-attachment img,.cc-encrypted-attachment video,.cc-plain-attachment img,.cc-plain-attachment video{display:block!important;width:auto!important;max-width:100%!important;height:auto!important;max-height:min(58vh,480px)!important;object-fit:contain!important;border-radius:calc(10px*var(--cct-round))!important;background:var(--cct-media)!important}.cc-attachment-media{position:relative!important;width:fit-content!important;max-width:100%!important}.cc-attachment-expand{position:absolute!important;top:7px!important;right:7px!important;display:grid!important;place-items:center!important;width:34px!important;height:34px!important;padding:0!important;border:1px solid rgba(var(--cct-tint-rgb),.2)!important;border-radius:calc(8px*var(--cct-round))!important;background:rgba(10,12,17,.82)!important;color:var(--cct-strong)!important;font-size:18px!important;cursor:zoom-in!important}/* A DEFINITE width, never a percentage: the attachment box is width:fit-content with overflow:hidden, and a percentage width inside a shrink-to-fit box is cyclic -- the box sized itself to 0 px and clipped the player away ("i uploaded mp3 file in concord just now and nothing shows"). max-width still lets it shrink on a phone. */.cc-encrypted-attachment audio,.cc-plain-attachment audio{display:block!important;width:420px!important;max-width:100%!important}.cc-encrypted-attachment a,.cc-plain-attachment a{display:inline-flex!important;max-width:100%!important;padding:8px 11px!important;border-radius:calc(8px*var(--cct-round))!important;background:rgba(var(--cct-tint-rgb),.06)!important;overflow-wrap:anywhere!important}.cc-attachment-error{color:var(--cct-error)!important}
.cc-message-actions button{display:flex!important;width:auto!important;min-width:64px!important;gap:5px!important;padding:0 9px!important;font-size:14px!important;font-weight:750!important}.cc-message-actions button::after{content:attr(title)!important;font-size:11px!important}.cc-compose{position:relative!important}.cc-mention-menu{position:absolute!important;z-index:12!important;inset-inline:44px 54px!important;bottom:calc(100% + 7px)!important;max-height:min(300px,40vh)!important;overflow:auto!important;padding:5px!important;border:1px solid rgba(var(--cct-tint-rgb),.14)!important;border-radius:calc(11px*var(--cct-round))!important;background:var(--cct-pop)!important;box-shadow:0 14px 40px rgba(var(--cct-shade-rgb),.55)!important}.cc-mention-menu button{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;width:100%!important;min-height:42px!important;padding:7px 10px!important;border:0!important;border-radius:calc(7px*var(--cct-round))!important;background:transparent!important;color:var(--cct-strong)!important;text-align:start!important}.cc-mention-menu button.active,.cc-mention-menu button:hover{background:var(--cc-hover)!important}.cc-mention-menu small{color:var(--cct-muted)!important}.cc-message .xdc-card{max-width:min(420px,100%)!important;margin-top:8px!important;box-sizing:border-box!important}
@media(max-width:820px){:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .app{grid-template-columns:minmax(0,1fr)!important;padding:0!important}.cc-app{display:flex!important}.cc-communities{flex:0 0 62px!important;width:62px!important;padding:9px 5px!important}.cc-brand,.cc-server{width:44px!important;height:44px!important;flex-basis:44px!important}.cc-channels{flex:1!important;border:0!important}.cc-conversation{display:none!important;position:fixed!important;inset:0!important;z-index:45!important}.cc-app.show-chat .cc-communities,.cc-app.show-chat .cc-channels{display:none!important}.cc-app.show-chat .cc-conversation{display:flex!important}.cc-mobile-back{display:grid!important;min-width:44px!important;width:44px!important;height:44px!important}.cc-conversation>header{padding-top:env(safe-area-inset-top)!important;height:auto!important}.cc-topic{display:none!important}.cc-messages{padding:14px 12px!important}.cc-compose{margin:0 8px calc(8px + env(safe-area-inset-bottom))!important}.cc-compose-btn,.cc-head-btn{min-width:44px!important;width:44px!important;height:44px!important}.cc-channel{min-height:48px!important;font-size:16px!important}.cc-join{position:fixed!important;z-index:60!important;place-items:end center!important;padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom))!important}.cc-join-card{padding:20px 16px!important;border-radius:calc(18px*var(--cct-round))!important}.cc-join-actions .btn{flex:1!important;min-height:46px!important}.cc-message-actions{display:flex!important;position:static!important;float:right!important}.cc-message-actions button{width:34px!important;height:34px!important}.cc-reaction-picker{top:40px!important}.cc-reply{margin-inline:8px!important}}
/* The other half of "+". Creating a community used to be reachable only while you had none, so this
   is the way back to it from the sheet people actually open. A link, not a third button: joining is
   what the sheet is for and this must not compete with it. */
.cc-join-alt{display:flex!important;flex-direction:column!important;gap:8px!important;
  margin:14px 0 0!important;padding-top:14px!important;border-top:1px solid var(--cct-line)!important;
  color:var(--cct-muted)!important;font-size:13px!important;text-align:center!important}
.cc-join-alt .btn{width:100%!important;min-height:46px!important}
/* The + beside TEXT CHANNELS. Only the owner sees it (`canAddChannel`), so it sits in the section
   header rather than taking a row of its own — a row would leave a gap for everybody else. */
.cc-section-head{display:flex!important;align-items:center!important;justify-content:space-between!important}
.cc-add-channel{border:0!important;background:none!important;color:var(--cct-muted)!important;
  cursor:pointer!important;font-size:17px!important;line-height:1!important;padding:0 4px!important;
  min-width:28px!important;min-height:28px!important;border-radius:calc(6px*var(--cct-round))!important}
.cc-add-channel:hover{background:rgba(var(--cct-tint-rgb),.08)!important;color:var(--cct-strong)!important}

/* Compact Discord/Armada-style message controls. Keep this final block authoritative over legacy rules. */
@media(max-width:820px){.cc-members-pane{display:none!important}}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-actions{position:absolute!important;z-index:6!important;inset-inline-end:10px!important;top:-14px!important;display:flex!important;align-items:center!important;gap:2px!important;padding:3px!important;border:1px solid rgba(var(--cct-tint-rgb),.13)!important;border-radius:calc(10px*var(--cct-round))!important;background:var(--cct-toolbar)!important;box-shadow:0 7px 22px rgba(var(--cct-shade-rgb),.38)!important;opacity:0!important;visibility:hidden!important;transform:translateY(3px)!important;transition:opacity .12s ease,transform .12s ease,visibility .12s!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message:hover .cc-message-actions,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message:focus-within .cc-message-actions{opacity:1!important;visibility:visible!important;transform:none!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-actions button{display:grid!important;place-items:center!important;width:32px!important;min-width:32px!important;max-width:32px!important;height:30px!important;padding:0!important;border:0!important;border-radius:calc(7px*var(--cct-round))!important;background:transparent!important;color:var(--cct-icon-2)!important;font-size:16px!important;line-height:1!important;cursor:pointer!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-actions button:hover,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-actions button:focus-visible{background:rgba(var(--cct-tint-rgb),.1)!important;color:var(--cct-strong)!important;outline:0!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-actions .cc-delete-action:hover{background:rgba(237,66,69,.18)!important;color:var(--cct-danger-2)!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-actions button::after{content:none!important;display:none!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-action-sep{width:1px!important;height:20px!important;margin:0 2px!important;background:rgba(var(--cct-tint-rgb),.12)!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-reactions{gap:5px!important;margin-top:7px!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-reaction{min-height:28px!important;padding:3px 9px!important;border:1px solid rgba(var(--cct-tint-rgb),.12)!important;border-radius:calc(9px*var(--cct-round))!important;background:rgba(var(--cct-tint-rgb),.055)!important;color:var(--cct-react-fg)!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-reaction-emoji{display:block!important;width:22px!important;height:22px!important;object-fit:contain!important;border-radius:calc(4px*var(--cct-round))!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-reaction:hover{border-color:rgba(var(--cct-react-rgb),.7)!important;background:rgba(var(--cct-react-rgb),.14)!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-reaction.mine{border-color:var(--cct-react-mine)!important;background:rgba(var(--cct-react-rgb),.25)!important;color:var(--cct-strong)!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-reaction-picker{display:grid!important;grid-template-columns:repeat(4,32px)!important;width:auto!important;gap:2px!important;padding:6px!important;border-radius:calc(11px*var(--cct-round))!important;background:var(--cct-toolbar)!important}
/* The ellipsis is a real disclosure control on every screen size. Previously cc-actions-open only
   affected the mobile media query, so desktop clicks changed state without changing pixels while
   hover/focus left the old full toolbar hanging around. */
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-actions button:not(.cc-action-trigger){display:none!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message.cc-actions-open .cc-message-actions{display:flex!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message.cc-actions-open .cc-message-actions button{display:grid!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message.cc-actions-open .cc-action-trigger{background:rgba(var(--cct-tint-rgb),.12)!important}
@media(max-width:820px),(hover:none){:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-actions{position:static!important;float:none!important;width:max-content!important;margin:7px 0 0 auto!important;opacity:1!important;visibility:visible!important;transform:none!important;box-shadow:none!important;background:rgba(var(--cct-tint-rgb),.035)!important}:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-actions button{display:none!important;width:34px!important;min-width:34px!important;max-width:34px!important;height:34px!important}:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-actions .cc-action-trigger,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message.cc-actions-open .cc-message-actions button{display:grid!important}:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message.cc-actions-open .cc-action-trigger{background:rgba(var(--cct-tint-rgb),.12)!important}:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-reaction-picker{position:fixed!important;inset:auto 10px calc(74px + env(safe-area-inset-bottom)) auto!important;grid-template-columns:repeat(4,40px)!important}:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-reaction-picker button{width:40px!important;height:40px!important}}

/* Classic-mode phone shell: one real screen at a time, with a horizontal community switcher. */
@media(max-width:820px){
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .feed.feed-dm:has(.cc-app){padding:0!important;overflow:hidden!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app{position:fixed!important;z-index:39!important;inset:calc(58px + env(safe-area-inset-top)) 0 calc(61px + env(safe-area-inset-bottom)) 0!important;width:100vw!important;height:auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;background:var(--cc-side)!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-communities{display:flex!important;flex-direction:row!important;align-items:center!important;flex:0 0 62px!important;width:100%!important;max-width:none!important;height:62px!important;padding:7px 10px!important;gap:8px!important;overflow-x:auto!important;overflow-y:hidden!important;border:0!important;border-bottom:1px solid rgba(var(--cct-tint-rgb),.07)!important;scrollbar-width:none!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-communities::-webkit-scrollbar{display:none!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-brand,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-server{flex:0 0 46px!important;width:46px!important;height:46px!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-server.active:before{inset:auto auto -7px 6px!important;width:34px!important;height:3px!important;border-radius:calc(3px*var(--cct-round)) calc(3px*var(--cct-round)) 0 0!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-server.unread:after{inset:3px 3px auto auto!important;width:8px!important;height:8px!important;border-radius:50%!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-channels{display:flex!important;flex:1 1 auto!important;width:100%!important;max-width:none!important;min-height:0!important;border:0!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-channel-list{padding:8px 10px 12px!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-channel{min-height:50px!important;padding:10px 12px!important;border-radius:calc(10px*var(--cct-round))!important;font-size:16px!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-section{padding:10px 11px 6px!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-identity{padding-bottom:calc(8px + env(safe-area-inset-bottom))!important}
  /* An open channel takes the screen down to the app's bottom nav, never over it: the list stops at the same
     inset ("you lose the navbar on the bottom when using concord on android", 2026-10-25 --
     tests/client/test_concord_keeps_the_bottom_nav_full_app.py). */
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app.show-chat{inset:0 0 calc(61px + env(safe-area-inset-bottom)) 0!important;z-index:45!important;height:auto!important;background:var(--cc-main)!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app.show-chat .cc-conversation{display:flex!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app.show-chat .cc-communities,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app.show-chat .cc-channels{display:none!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app.home-view #cc-back-channels{display:grid!important}
  /* The community finder is a destination inside Discover, not a modal chat
     drill-down.  Keep Classic's top and bottom navigation reachable here or
     entering Concord traps the user above every other Discover view. */
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app.home-view{inset:calc(58px + env(safe-area-inset-top)) 0 calc(61px + env(safe-area-inset-bottom)) 0!important;z-index:39!important;height:auto!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app.home-view .cc-conversation{position:absolute!important;inset:0!important;height:100%!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-conversation>header{flex:0 0 auto!important;min-height:calc(54px + env(safe-area-inset-top))!important;padding:env(safe-area-inset-top) 7px 0!important;gap:5px!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-conversation>header .cc-hash,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-conversation>header .cc-visibility,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) #cc-publish-listing{display:none!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-conversation>header>b{min-width:0!important;max-width:34vw!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:16px!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-head-btn,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-mobile-back{flex:0 0 38px!important;width:38px!important;min-width:38px!important;height:38px!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-conversation{min-width:0!important;max-width:100vw!important;overflow:hidden!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-messages{width:100%!important;max-width:100%!important;padding:12px 9px 8px!important;overflow-x:hidden!important;overscroll-behavior:contain!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-list,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-body{width:100%!important;max-width:100%!important;min-width:0!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-body a,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-body p,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-body pre{max-width:100%!important;overflow-wrap:anywhere!important;word-break:break-word!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-body img,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-body video,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-body iframe,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-body .link-card,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-body .xdc-card{max-width:100%!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message{gap:8px!important;padding:7px 2px!important;background:transparent!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-avatar{flex-basis:30px!important;width:30px!important;height:30px!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message p{font-size:15px!important;line-height:1.42!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-actions{gap:0!important;margin:4px 0 0 auto!important;padding:0!important;border:0!important;background:transparent!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-actions .cc-action-sep{display:none!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-message-actions button{width:38px!important;min-width:38px!important;max-width:38px!important;height:34px!important;background:rgba(var(--cct-tint-rgb),.045)!important}
  /* EVERY CONTROL IN THE ROW IS ONE HEIGHT (42px) AND THE ROW HAS REAL GAPS. The textarea used to carry the
     global `textarea{margin:6px 0}`, so the row was 54px tall around 40-42px controls; with flex-end the Send
     button sat on the row's floor, 7px below the input's centre and 5px off the bar's edge, and a 2px gap put
     it against the input ("send button not centered ... touching bottom, also touching message box", APK).
     Equal heights + flex-end centre it on one line and keep it on the bottom line if the input grows. */
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-compose{gap:6px!important;margin:0 6px calc(6px + env(safe-area-inset-bottom))!important;padding:6px!important;border-radius:calc(14px*var(--cct-round))!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-compose-btn{flex-basis:40px!important;width:40px!important;min-width:40px!important;height:42px!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-compose textarea{min-height:42px!important;margin:0!important;padding:10px 4px!important;font-size:16px!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-compose .btn{height:42px!important;min-height:42px!important;min-width:58px!important;padding:0 12px!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-discover{align-self:flex-start!important;margin:0 auto!important;padding:8px 4px 18px!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-discover>.concord-mark{width:48px!important;height:48px!important;border-radius:calc(14px*var(--cct-round))!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-discover h2{font-size:22px!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-primary-actions{margin:14px 0 22px!important;flex-wrap:wrap!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-primary-actions .btn{flex:1 1 145px!important;min-height:44px!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-public-room{grid-template-columns:42px minmax(0,1fr)!important;padding:10px!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-public-room>strong,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-joined-room>strong{display:none!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-joined-room{grid-template-columns:42px minmax(0,1fr)!important;min-height:64px!important;padding:10px!important}
}
/* Call stays on the room bar at every width now that the bar is only search, call and the menu (Armada's). */
@media(max-width:370px){:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-conversation>header>b{max-width:30vw!important}:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-compose #cc-emoji{display:none!important}}

/* Phone Concord follows the working PosterChanOS workspace, not a separate card UI.  The same
   vertical community rail + channel pane are visible before a room is opened and become one
   dismissible drawer over the conversation afterwards.  This final block intentionally owns the
   mobile cascade over the older horizontal-strip experiment above. */
.cc-drawer-backdrop{display:none}
@media(max-width:820px){
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app:not(.show-chat){
    display:grid!important;
    grid-template-columns:58px minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr)!important;
    flex-direction:initial!important;
  }
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app:not(.show-chat) .cc-communities{
    grid-column:1!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    width:58px!important;
    max-width:58px!important;
    height:100%!important;
    padding:8px 6px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    border:0!important;
    border-inline-end:1px solid rgba(var(--cct-tint-rgb),.06)!important;
  }
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app:not(.show-chat) .cc-channels{
    grid-column:2!important;
    display:flex!important;
    width:100%!important;
    max-width:none!important;
    height:100%!important;
  }
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app:not(.show-chat) .cc-brand,
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app:not(.show-chat) .cc-server{
    flex:0 0 46px!important;
    width:46px!important;
    height:46px!important;
  }
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app.show-chat:not(.drawer-open) .cc-communities,
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app.show-chat:not(.drawer-open) .cc-channels{display:none!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app.show-chat.drawer-open .cc-drawer-backdrop{
    display:block!important;
    position:fixed!important;
    z-index:50!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    padding:0!important;
    border:0!important;
    background:rgba(var(--cct-shade-rgb),.58)!important;
  }
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app.show-chat.drawer-open .cc-communities{
    display:flex!important;
    position:fixed!important;
    z-index:52!important;
    inset:0 auto 0 0!important;
    flex-direction:column!important;
    align-items:center!important;
    width:58px!important;
    max-width:58px!important;
    height:100dvh!important;
    padding:calc(8px + env(safe-area-inset-top)) 6px calc(8px + env(safe-area-inset-bottom))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    border:0!important;
    border-inline-end:1px solid rgba(var(--cct-tint-rgb),.06)!important;
  }
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app.show-chat.drawer-open .cc-channels{
    display:flex!important;
    position:fixed!important;
    z-index:52!important;
    inset:0 auto 0 58px!important;
    width:min(300px,calc(88vw - 58px))!important;
    max-width:calc(100vw - 58px)!important;
    height:100dvh!important;
    padding-top:env(safe-area-inset-top)!important;
    padding-bottom:env(safe-area-inset-bottom)!important;
    border:0!important;
    box-shadow:18px 0 38px rgba(var(--cct-shade-rgb),.46)!important;
  }
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app.show-chat.drawer-open .cc-brand,
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app.show-chat.drawer-open .cc-server{
    flex:0 0 46px!important;
    width:46px!important;
    height:46px!important;
  }
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app.show-chat.drawer-open .cc-conversation{display:flex!important}
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-mobile-back{font-size:22px!important;font-weight:800!important}
}
/* A MESSAGE THAT TAGS YOU HAS TO LOOK LIKE IT. The tags were always published and nothing on
   screen ever said so — reported as "its not tagging users in concord right so they get the
   mention or highlight like armada does it". Tint the row, mark the handle. */
.cc-mention{border-radius:calc(5px*var(--cct-round))!important;padding:0 3px!important;background:var(--cct-mention-bg)!important;color:var(--cct-mention)!important;font-weight:650!important}
.cc-mention-me{background:rgba(var(--cct-warn-rgb),.22)!important;color:var(--cct-mention-me)!important}
.cc-message.cc-mentions-me{position:relative!important;background:rgba(var(--cct-warn-rgb),.07)!important}
.cc-message.cc-mentions-me::before{content:''!important;position:absolute!important;inset-block:0!important;inset-inline-start:0!important;width:3px!important;background:var(--cct-warn)!important;border-radius:calc(2px*var(--cct-round))!important}

/* A POSTERCHAN WINDOW HAS NO SIDEBAR, SO CONCORD MUST NOT RESERVE A COLUMN FOR ONE.
   `html.pc-oswin` hides `.sidebar` (the window IS the app; a nav rail inside it is a second copy of
   something the desktop already provides). Concord then forced `grid-template-columns:300px
   minmax(0,1fr)` with !important anyway, so with the sidebar gone `.main` became the FIRST grid
   item and landed in the 240/300px column while the 1fr column sat empty. Measured in a 900px
   window: .app 900, .main 161, .cc-app 240 CSS px, and the conversation column ZERO — the chat had
   less room than its own member list needs. One column here; the window is the frame. */
html.pc-oswin :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .app{grid-template-columns:minmax(0,1fr)!important}
html.pc-oswin :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .sidebar{display:none!important}

/* A single check means delivery confirmed, never a read receipt. */
.cc-delivery-confirmed{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;vertical-align:middle;white-space:nowrap;color:var(--cct-muted);line-height:1}
.cc-delivery-confirmed .ic{width:14px;height:14px;flex:none}

/* AN INVITATION, BEFORE IT IS ANSWERED. Sits inside the existing join card, so it inherits the
   dialog's frame rather than inventing a second one. */
.cc-join-actions.hidden{display:none!important}
/* Management actions must remain reachable in a narrow community dialog. */
#cc-settings-dialog .cc-join-actions{flex-wrap:wrap!important}
#cc-settings-dialog .cc-join-card{max-height:100%!important;overflow:auto!important;box-sizing:border-box!important;min-width:0!important}
/* "Upload image…" under a community icon field: its own line, full width on a phone. */
.cc-icon-pick{display:block;margin:6px 0 2px;min-height:40px;max-width:100%}
@media (max-width:600px){.cc-icon-pick{width:100%}}
.cc-edited{margin-left:6px;font-size:11px;color:var(--cct-muted)}
.cc-channel-more{flex:0 0 auto;min-width:32px;border:0;background:transparent;color:var(--cct-muted);cursor:pointer;border-radius:calc(8px*var(--cct-round))}
.cc-channel-more:hover{color:rgb(var(--cct-accent-rgb));background:rgba(var(--cct-accent-rgb),.1)}
@media (max-width:600px){.cc-channel-more{min-width:44px;min-height:44px}}
#cc-pins small{margin-left:2px;font-size:11px;color:rgb(var(--cct-accent-rgb))}
.cc-pin-list{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow-y:auto}
.cc-pin-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:8px 10px;border:1px solid var(--cct-line);border-radius:calc(10px*var(--cct-round));background:transparent;color:inherit;cursor:pointer;font:inherit;overflow-wrap:anywhere}
.cc-pin-item:hover{border-color:rgb(var(--cct-accent-rgb))}
.cc-pin-item small{color:var(--cct-muted)}
.cc-message.cc-flash{outline:2px solid rgb(var(--cct-accent-rgb));outline-offset:2px;transition:outline-color 1.4s}
.cc-typing{min-height:0;height:0;overflow:hidden;padding:0 16px;font-size:12px;color:var(--cct-muted);font-style:italic;transition:height .15s}
.cc-typing.on{height:18px}
.cc-dissolve{display:block;width:100%;margin:12px 0 4px;color:var(--cct-dissolve);border-color:rgba(255,92,122,.45)}
.cc-banner{flex:0 0 auto;height:96px;overflow:hidden;border-bottom:1px solid var(--cct-line)}
.cc-banner img{display:block;width:100%;height:100%;object-fit:cover}

/* NEW MESSAGES GLOW ON THE RAIL. The only signal was a 5px white tick at the icon's edge (8px dot on a
   phone) — easy to miss on a rail of icons, which is what "some kind of a glow when a community you
   are in gets new messages" asked for. The icon itself now carries a ring in the theme's accent and
   a slow breathing glow; the tick stays as the shape cue for anybody who cannot tell colours apart.
   Motion is dropped for reduced-motion users and while the app is backgrounded (body.anim-off), the
   ring and glow are not. */
.cc-server.unread:not(.active){box-shadow:0 0 0 2px rgba(var(--cct-accent-rgb),.95),0 0 16px 3px rgba(var(--cct-accent-rgb),.55)!important;
  animation:ccUnreadGlow 2.6s ease-in-out infinite!important}
@keyframes ccUnreadGlow{0%,100%{box-shadow:0 0 0 2px rgba(var(--cct-accent-rgb),.95),0 0 10px 1px rgba(var(--cct-accent-rgb),.4)}
  50%{box-shadow:0 0 0 2px rgba(var(--cct-accent-rgb),.95),0 0 22px 6px rgba(var(--cct-accent-rgb),.7)}}
@media (prefers-reduced-motion:reduce){.cc-server.unread:not(.active){animation:none!important}}
body.anim-off .cc-server.unread:not(.active){animation:none!important}

/* A Communities image's box is reserved before its pixels arrive (concord.js attachmentBoxStyle), so
   a repaint never shrinks the room and re-grows it — the scrollbar no longer jumps up on a message. */
.cc-sized,.cc-attachment-open[data-cc-sized]{display:block!important;width:var(--cc-w)!important;max-width:100%!important;aspect-ratio:var(--cc-ar)!important;height:auto!important;box-sizing:border-box!important}
.cc-attachment-open[data-cc-sized] img{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important}
/* A video whose size is known reserves its box: the chat around it does not move while it loads. */
.cc-attachment-media[data-cc-sized]{display:block!important;width:var(--cc-w)!important;max-width:100%!important;aspect-ratio:var(--cc-ar)!important;height:auto!important;box-sizing:border-box!important}
.cc-attachment-media[data-cc-sized] video{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important}
span.cc-attachment-wait.cc-sized{display:grid!important;place-items:center!important;border-radius:calc(10px*var(--cct-round))!important;background:rgba(var(--cct-tint-rgb),.04)!important}
/* A THREAD'S "← Back · Thread" BAR IS A HEADER, NOT A COLUMN. .cc-messages is a flex ROW (it bottom-
   aligns the list), so the bar became a narrow column beside the messages — in the middle of the
   screen on a desktop, and on a phone it squeezed the whole thread into a strip ("replying to a post
   has a big bug, weird thread button with a back button appears, messes up the display"). */
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-messages:has(>.cc-thread-bar){flex-direction:column!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-messages>.cc-thread-bar{flex:0 0 auto!important;width:100%!important;box-sizing:border-box!important;position:sticky!important;top:0!important;z-index:5!important;display:flex!important;align-items:center!important;gap:10px!important;margin:0 0 12px!important;padding:8px 10px!important;border-radius:calc(10px*var(--cct-round))!important;background:var(--cc-main,#15171d)!important;border:1px solid rgba(var(--cct-tint-rgb),.08)!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-messages>.cc-thread-bar button{display:inline-flex!important;align-items:center!important;gap:4px!important;white-space:nowrap!important;padding:4px 10px!important;border-radius:calc(8px*var(--cct-round))!important;border:1px solid rgba(var(--cct-tint-rgb),.14)!important;background:transparent!important;color:inherit!important;cursor:pointer!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-messages>.cc-thread-bar span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-messages:has(>.cc-thread-bar)>.cc-message-list{width:100%!important;flex:1 0 auto!important}

/* Community folders in the rail (Armada's model): closed, a 2x2 of its communities' icons; open, a
   tinted pill holding the folder glyph and its communities. */
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-folder{display:flex!important;flex-direction:column!important;align-items:center!important;gap:6px!important;border-radius:calc(16px*var(--cct-round))!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-folder.open{background:rgba(var(--cct-soft-rgb),.12)!important;padding:4px 0!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-folder-btn{position:relative!important;overflow:hidden!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-folder-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:2px!important;width:100%!important;height:100%!important;padding:4px!important;box-sizing:border-box!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-folder-mini{display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;border-radius:calc(5px*var(--cct-round))!important;font-size:9px!important;min-width:0!important;min-height:0!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-folder-mini img{width:100%!important;height:100%!important;object-fit:cover!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-folder-glyph{font-size:18px!important}
/* "Check my communities" report: a phone is the device it is for, so it wraps and scrolls inside the modal. */
.cc-mcheck-out{white-space:pre-wrap;overflow-wrap:anywhere;max-height:50vh;overflow:auto;font-size:12px;line-height:1.45;margin:8px 0;padding:8px;border-radius:calc(8px*var(--cct-round));background:rgba(127,127,127,.12)}
/* The room header at phone width: inside a ROOM (the header carries #cc-call), the secondary room actions
   live behind ⋯ (concord.js #cc-head-more) so Members, Copy invite link and the buttons used mid-
   conversation stay on screen. Outside a room the header has room for everything and ⋯ never shows —
   that is where Invites is used most (direct invitations arrive before you are in the room). */
.cc-head-more{display:none!important}
/* INSIDE A ROOM THE HEADER IS 🔍 📞 ☰, at every width (Armada's room bar). Everything else is in the ☰ menu, which
   presses these same buttons -- hidden, never removed, so each action keeps one implementation. */
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-conversation>header:has(#cc-call) :is(#cc-pins,#cc-threads-toggle,#cc-publish-listing,#cc-direct-send,#cc-manage-links,#cc-copy-link,#cc-leave-shortcut,#cc-notify-head,#cc-direct-inbox,#ccg-head-issues,#cc-members,#cc-ban-npub){display:none!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-conversation>header:has(#cc-call) .cc-head-more{display:grid!important;place-items:center;font-size:20px;line-height:1}
/* Search results (concord.js openRoomSearch). */
.cc-search-results{display:grid;gap:6px;margin-top:10px;max-height:60vh;overflow:auto}
.cc-search-note{margin:6px 0 0}
.cc-search-hit{display:grid;gap:2px;width:100%;padding:9px 11px;border:1px solid rgba(var(--cct-tint-rgb),.1);border-radius:calc(10px*var(--cct-round));background:var(--cct-raised);color:var(--cct-text);text-align:start;cursor:pointer;min-width:0}
.cc-search-hit:hover,.cc-search-hit:focus-visible{border-color:rgba(var(--cct-accent-rgb),.5)}
.cc-search-where{display:flex;justify-content:space-between;gap:8px;color:var(--cct-muted);font-size:12px}
.cc-search-hit b{color:var(--cct-strong);font-size:13px}
.cc-search-text{font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.cc-search-text mark{background:rgba(var(--cct-accent-rgb),.3);color:inherit;border-radius:3px;padding:0 1px}
/* Code in messages (messageContentHtml: `inline` and ``` fenced blocks). A block keeps its line breaks
   and scrolls sideways INSIDE itself, so a long command never widens the chat on a phone. */
.cc-message-body .cc-code{font-family:var(--mono,monospace);font-size:.9em;padding:.1em .35em;border-radius:calc(5px*var(--cct-round));
  background:rgba(127,127,160,.16);border:1px solid var(--cct-line);word-break:break-all}
.cc-message-body .cc-codeblock{display:block;box-sizing:border-box;max-width:100%;margin:6px 0;padding:8px 10px;
  border-radius:calc(8px*var(--cct-round));background:rgba(var(--cct-shade-rgb),.35);border:1px solid var(--cct-line);
  overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:pre!important;overflow-wrap:normal!important;word-break:normal!important}
.cc-message-body .cc-codeblock code{font-family:var(--mono,monospace);font-size:.86em;line-height:1.45;white-space:pre;background:none;border:0;padding:0;word-break:normal}
/* Icon upload state under "Upload image…": uploading / uploaded (with the picture) / failed + Retry. */
.cc-icon-status{display:flex!important;align-items:center!important;gap:10px!important;margin-top:8px!important;padding:8px 10px!important;border-radius:10px!important;background:rgba(var(--cct-tint-rgb),.05)!important;font-size:13px!important;min-width:0!important}
.cc-icon-status[hidden]{display:none!important}
.cc-icon-status img{flex:0 0 40px!important;width:40px!important;height:40px!important;border-radius:10px!important;object-fit:cover!important}
.cc-icon-status span{flex:1 1 auto!important;min-width:0!important;overflow-wrap:anywhere!important}
.cc-icon-status.uploading span::before{content:""!important;display:inline-block!important;width:10px!important;height:10px!important;margin-inline-end:7px!important;border:2px solid var(--cct-accent)!important;border-right-color:transparent!important;border-radius:50%!important;animation:ccIconSpin .8s linear infinite!important;vertical-align:-1px!important}
.cc-icon-status.done span{color:var(--cct-accent)!important}
.cc-icon-status.failed{background:rgba(239,68,68,.12)!important}
.cc-icon-status.failed span{color:var(--cct-error)!important}
@keyframes ccIconSpin{to{transform:rotate(360deg)}}
/* The phone drawer is a class flip now (setMobileDrawer), so it can slide instead of popping in.
   Transform only -- never opacity, so a frozen or disabled animation can never leave it invisible.
   THE SLIDE IS KEYED ON `drawer-opening`, WHICH ONLY THE OPEN GESTURE SETS -- never on `drawer-open`,
   which every rebuild of the workspace carries. Keyed on the state, the drawer slid in from -28px again
   on EVERY render while it was open, and switching community from inside it renders two or three times
   (the switch, the cached history, the network history): measured, the channel list jerked sideways
   x=30->58 twice per switch -- "concord shakes when changing room/community". */
@media(max-width:820px){
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app.show-chat.drawer-open.drawer-opening .cc-communities,
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app.show-chat.drawer-open.drawer-opening .cc-channels{animation:ccDrawerIn .16s ease-out}
}
@keyframes ccDrawerIn{from{transform:translateX(-28px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app.show-chat.drawer-open .cc-communities,
  :is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-app.show-chat.drawer-open .cc-channels{animation:none!important}
}
/* A scrollbar that comes and goes changes the width of everything beside it: a short channel has none,
   a long one has one, so the rows re-wrapped on every switch on a desktop. The gutter is always kept. */
.cc-messages,.cc-channel-list,.cc-members-scroll{scrollbar-gutter:stable}
/* A plain (unencrypted) picture with an imeta `dim` reserves its box before it loads, like an
   encrypted one (`data-cc-sized` carries --cc-w/--cc-ar, see attachmentBoxStyle). */
.cc-plain-attachment[data-cc-sized]{width:var(--cc-w)!important;max-width:100%!important;aspect-ratio:var(--cc-ar)!important;box-sizing:border-box!important}
.cc-plain-attachment[data-cc-sized] img{width:100%!important;height:100%!important;max-height:none!important}

/* Starred channel: the same i-star icon, filled. Icons, not the \2606/\2605/\22EF text characters, which
 * several system fonts (PosterChanOS, headless Chrome) have no glyph for and draw as empty boxes. */
svg.ic.cc-starred{fill:currentColor}
.cc-channel-more svg.ic,.cc-action-trigger svg.ic,.cc-head-more svg.ic{width:18px;height:18px}

/* COMMUNITY SETTINGS HAS A WAY OUT AT THE TOP. The sheet scrolls, and its only exit used to be a
 * "Cancel" among five look-alike buttons at the bottom. The header sticks to the top of the card
 * while it scrolls, so the close button is always on screen; on a phone the ‹ (the same back glyph as the room
 * header's) leads it. */
#cc-settings-dialog .cc-sheet-head{position:sticky;top:-26px;z-index:2;display:flex;align-items:center;gap:8px;margin:-26px -26px 12px;padding:16px 16px 10px 26px;background:var(--cct-card);border-bottom:1px solid rgba(var(--cct-tint-rgb),.08)}
#cc-settings-dialog .cc-sheet-head h2{flex:1 1 auto;min-width:0;margin:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cc-settings-dialog .cc-sheet-close,#cc-settings-dialog .cc-sheet-back{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:calc(8px*var(--cct-round));background:transparent;color:var(--cct-fg-2);font:inherit;font-size:20px;font-weight:700;line-height:1;cursor:pointer}
#cc-settings-dialog .cc-sheet-back{display:none;font-size:26px;font-weight:800}
#cc-settings-dialog .cc-sheet-close .ic{width:20px;height:20px}
#cc-settings-dialog .cc-sheet-close:hover,#cc-settings-dialog .cc-sheet-back:hover,#cc-settings-dialog .cc-sheet-close:focus-visible,#cc-settings-dialog .cc-sheet-back:focus-visible{background:var(--cc-hover,rgba(var(--cct-tint-rgb),.08));color:var(--cct-strong)}
#cc-settings-dialog .cc-sheet-close:focus-visible,#cc-settings-dialog .cc-sheet-back:focus-visible{outline:2px solid rgb(var(--cct-accent-rgb));outline-offset:1px}
/* A refused save is written INSIDE the sticky action bar, above Save, so it is on screen wherever the card is scrolled. */
#cc-settings-dialog .cc-settings-error{flex:1 0 100%;order:-1;margin:0 0 4px;color:var(--cct-error);font-size:13px;line-height:1.4;overflow-wrap:anywhere}
#cc-settings-dialog .cc-settings-error[hidden]{display:none}
@media(max-width:820px){
  #cc-settings-dialog .cc-sheet-head{top:-20px;margin:-20px -16px 12px;padding:10px 8px 8px}
  #cc-settings-dialog .cc-sheet-head h2{font-size:19px!important}
  #cc-settings-dialog .cc-sheet-back{display:grid;flex-basis:44px;width:44px;height:44px}
  #cc-settings-dialog .cc-sheet-close{flex-basis:44px;width:44px;height:44px}
}
/* THE CLOSE IS A RED FILLED ✕ ("Community Settings should have red filled X to close like the rest of the posterchan UI",
   2026-10-15) -- the desktop window close's red (--cct-close), filled at rest, never only on hover. After the shared
   sheet-close rules above so it wins on specificity order, and the back arrow stays neutral. */
#cc-settings-dialog .cc-sheet-close{background:var(--cct-close);color:var(--cct-on-close);border-radius:50%;flex:0 0 34px;width:34px;height:34px;min-width:34px;min-height:34px}
#cc-settings-dialog .cc-sheet-close:hover,#cc-settings-dialog .cc-sheet-close:focus-visible{background:var(--cct-close-hover);color:var(--cct-on-close)}
#cc-settings-dialog .cc-sheet-close .ic{width:18px;height:18px}

/* "Ban by npub" at the foot of the members pane: someone who is not listed right now can still be banned. */
.cc-members-pane .cc-ban-npub{margin:8px 10px 10px;align-self:stretch;flex:0 0 auto}
/* ── Concord × git (concord-git.js): repository activity rows, the ticket panel, Projects ──
 * Panels are fixed to the viewport (they outlive a room repaint): a right-hand sheet on a desktop,
 * the whole screen on a phone. Below modals (100) so a confirm or the JSON view opens above them. */
.ccg-intro{display:flex;gap:10px;align-items:center;padding:10px 12px;margin:6px 0 10px;border:1px solid rgba(var(--cct-accent-rgb),.35);border-radius:calc(10px*var(--cct-round));background:rgba(var(--cct-tint-rgb),.05);color:var(--cct-text);font-size:13px}
.ccg-intro img{width:32px;height:32px;border-radius:50%;flex:none;object-fit:cover}
.ccg-intro>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ccg-intro small{color:var(--cct-muted,inherit);opacity:.8;overflow-wrap:anywhere}
.ccg-intro .btn{flex:none}
.ccg-row{display:flex;gap:9px;align-items:flex-start;padding:7px 4px;margin:2px 0;border-inline-start:2px solid rgba(var(--cct-accent-rgb),.45);border-radius:0 calc(8px*var(--cct-round)) calc(8px*var(--cct-round)) 0;background:rgba(var(--cct-tint-rgb),.03);color:var(--cct-text);font-size:13px}
.ccg-row:hover{background:rgba(var(--cct-tint-rgb),.06)}
.ccg-ico{flex:0 0 26px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:rgba(var(--cct-accent-rgb),.12);font-size:13px;line-height:1}
.ccg-main{min-width:0;flex:1}
.ccg-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;color:var(--cct-muted);min-width:0}
.ccg-line time{margin-inline-start:auto;font-size:11px;color:var(--cct-muted)}
.ccg-who{display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:none;color:var(--cct-strong);cursor:pointer;font:inherit;max-width:100%}
.ccg-who img{width:18px;height:18px;border-radius:50%;object-fit:cover;flex:0 0 18px}
.ccg-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.ccg-mention{display:inline;padding:0;border:0;background:none;color:var(--cct-accent,var(--accent));font:inherit;font-weight:600;cursor:pointer}
.ccg-mention:hover{text-decoration:underline}
.ccg-repo{padding:1px 6px;border-radius:calc(6px*var(--cct-round));background:rgba(var(--cct-tint-rgb),.07);color:var(--cct-fg-2,var(--cct-muted));font-size:11px;font-family:ui-monospace,monospace}
.ccg-subject{display:block;margin:3px 0 0;padding:0;border:0;background:none;color:var(--cct-accent);font:600 14px/1.35 inherit;text-align:start;cursor:pointer;overflow-wrap:anywhere}
.ccg-subject.ccg-inline{display:inline;margin:0;font-size:13px}
.ccg-subject:hover,.ccg-preview:hover{text-decoration:underline}
.ccg-preview{display:block;margin:2px 0 0;padding:0;border:0;background:none;color:var(--cct-text);font:13px/1.4 inherit;text-align:start;cursor:pointer;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.ccg-comment{margin-top:4px}.ccg-comment.ccg-cont{margin-top:1px;padding-inline-start:23px}
.ccg-muted{color:var(--cct-muted)}
.ccg-st-open{color:var(--cct-ok)}.ccg-st-draft{color:var(--cct-muted)}.ccg-st-closed{color:var(--cct-danger)}.ccg-st-merged,.ccg-st-resolved{color:var(--cct-accent2)}
.ccg-status{display:inline-block;padding:1px 8px;border-radius:999px;border:1px solid currentColor;font-size:11px;font-weight:700;line-height:1.5}
.ccg-ci-run{margin-top:4px}.ccg-ci-run summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.ccg-ci-run summary::-webkit-details-marker{display:none}
.ccg-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--cct-muted);flex:0 0 9px}
.ccg-ci-success{background:var(--cct-ok)}.ccg-ci-failure,.ccg-ci-timed_out,.ccg-ci-startup_failure{background:var(--cct-danger)}.ccg-ci-in_progress,.ccg-ci-queued{background:var(--cct-warn)}
.ccg-ico.ccg-ci-success,.ccg-ico.ccg-ci-failure,.ccg-ico.ccg-ci-in_progress{color:var(--cct-on-accent)}
.ccg-before{display:inline-flex;gap:3px;margin-inline-start:4px}
.ccg-jobs{margin:6px 0 0;padding-inline-start:18px}.ccg-jobs li{margin:3px 0}
.ccg-log{max-height:220px;overflow:auto;margin:4px 0;padding:8px;border-radius:calc(6px*var(--cct-round));background:rgba(var(--cct-shade-rgb),.25);font-size:11px;white-space:pre-wrap}
.ccg-chan-badge{width:12px;height:12px;margin-inline-start:4px;opacity:.6;flex:0 0 12px}
.ccg-projects-entry{margin-bottom:6px}
.ccg-x{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border:0;border-radius:calc(9px*var(--cct-round));background:transparent;color:var(--cct-strong);font-size:24px;cursor:pointer}
.ccg-x:hover{background:rgba(var(--cct-tint-rgb),.08)}
.ccg-linkbtn{padding:0;border:0;background:none;color:var(--cct-accent);font:inherit;cursor:pointer}
.ccg-label{display:inline-block;margin:2px 2px 0 0;padding:2px 8px;border:1px solid rgba(var(--cct-accent-rgb),.35);border-radius:999px;background:rgba(var(--cct-accent-rgb),.08);color:var(--cct-strong);font-size:11px;cursor:pointer}
.ccg-label.on{background:var(--cct-accent);color:var(--cct-on-accent)}
.ccg-label-input{width:110px;padding:3px 8px;border:1px dashed rgba(var(--cct-tint-rgb),.25);border-radius:999px;background:transparent;color:var(--cct-text);font-size:12px}
.ccg-labels{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:8px 0}
.ccg-guest{margin-inline-start:6px;padding:0 6px;border-radius:999px;background:rgba(var(--cct-tint-rgb),.1);color:var(--cct-muted);font-size:10px;font-weight:700;text-transform:uppercase}
.ccg-error{color:var(--cct-error)}
.ccg-img{display:block;max-width:100%;max-height:320px;margin:6px 0;border-radius:calc(8px*var(--cct-round))}
.ccg-md{overflow-wrap:anywhere;line-height:1.5}.ccg-md p{margin:6px 0}.ccg-md pre{overflow:auto;padding:8px;border-radius:calc(6px*var(--cct-round));background:rgba(var(--cct-shade-rgb),.25);font-size:12px}
.ccg-md code{font-family:ui-monospace,monospace;font-size:.92em}.ccg-md blockquote{margin:6px 0;padding-inline-start:10px;border-inline-start:3px solid rgba(var(--cct-tint-rgb),.2);color:var(--cct-muted)}
.ccg-md h4,.ccg-md h5,.ccg-md h6{margin:10px 0 4px}.ccg-md a{color:var(--cct-accent)}
.ccg-json{max-height:60vh;overflow:auto;font-size:11px;white-space:pre-wrap;overflow-wrap:anywhere}
/* the ticket panel */
.ccg-panel{position:fixed;z-index:90;top:0;bottom:0;inset-inline-end:0;width:min(420px,100vw);display:flex;flex-direction:column;background:var(--cct-pop);color:var(--cct-text);border-inline-start:1px solid rgba(var(--cct-tint-rgb),.12);box-shadow:-12px 0 40px rgba(var(--cct-shade-rgb),.45)}
.ccg-panel-head{display:flex;gap:8px;align-items:flex-start;padding:calc(12px + env(safe-area-inset-top)) 12px 10px 16px;border-bottom:1px solid rgba(var(--cct-tint-rgb),.1)}
.ccg-panel-head>div{min-width:0;flex:1}.ccg-panel-head small{color:var(--cct-muted);text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:.04em}
.ccg-panel-head h3{margin:2px 0 4px;font-size:17px;line-height:1.3;color:var(--cct-strong);overflow-wrap:anywhere}.ccg-panel-head p{margin:0;color:var(--cct-muted);font-size:12px}
.ccg-status-actions{display:flex;flex-wrap:wrap;gap:6px;padding:8px 16px;border-bottom:1px solid rgba(var(--cct-tint-rgb),.08)}
.ccg-panel-body{flex:1;overflow:auto;padding:8px 16px;-webkit-overflow-scrolling:touch}
.ccg-post{position:relative;padding:10px 0;border-bottom:1px solid rgba(var(--cct-tint-rgb),.07);font-size:14px}
.ccg-own{position:absolute;inset-inline-end:0;top:8px;display:flex;gap:2px}
.ccg-own button{width:34px;height:34px;border:0;border-radius:calc(6px*var(--cct-round));background:transparent;color:var(--cct-muted);cursor:pointer}
.ccg-own button:hover{background:rgba(var(--cct-tint-rgb),.08);color:var(--cct-strong)}
.ccg-edit-box{width:100%;margin-top:6px;resize:vertical}.ccg-edit-actions{display:flex;gap:6px;margin-top:6px}
.ccg-links{margin:12px 0 4px;font-size:12px}.ccg-empty{margin:14px 0}
.ccg-panel-foot{padding:8px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid rgba(var(--cct-tint-rgb),.1)}
.ccg-compose{display:flex;align-items:flex-end;gap:6px;padding:5px;border:1px solid rgba(var(--cct-tint-rgb),.12);border-radius:calc(10px*var(--cct-round));background:var(--cct-compose,transparent)}
.ccg-compose textarea{flex:1;min-width:0;min-height:40px;max-height:160px;padding:9px 6px;border:0;outline:0;resize:none;background:transparent;color:var(--cct-input,var(--cct-text));font:15px/1.35 inherit}
.ccg-attach{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border:0;border-radius:calc(8px*var(--cct-round));background:transparent;color:var(--cct-icon,var(--cct-muted));cursor:pointer}
.ccg-compose .btn{height:40px;flex:0 0 auto}
.ccg-panel-foot small{display:block;margin-top:5px;font-size:11px}
/* Projects */
.ccg-projects{position:fixed;z-index:80;inset:24px max(24px,calc((100vw - 1120px)/2));display:flex;flex-direction:column;background:var(--cct-pop);color:var(--cct-text);border:1px solid rgba(var(--cct-tint-rgb),.12);border-radius:calc(14px*var(--cct-round));box-shadow:0 20px 70px rgba(var(--cct-shade-rgb),.6);overflow:hidden}
body.ccg-projects-open::before{content:"";position:fixed;inset:0;z-index:79;background:rgba(4,2,12,.55)}
/* In the windowed desktop (.os-root, z 300) these opened UNDER every window -- "Issues and Pull Requests does nothing
   on desktop" (2026-10-22). Lifted the way client.css lifts .modal-bg there (340), and kept below it, because the
   new-issue form they open IS that modal. */
body.os-on .ccg-projects{z-index:320}body.os-on.ccg-projects-open::before{z-index:319}body.os-on .ccg-panel{z-index:330}
.ccg-proj-head{display:flex;gap:12px;align-items:flex-start;padding:16px 16px 8px 20px}.ccg-proj-head>div:first-child{flex:1;min-width:0}
.ccg-proj-head h2{margin:0;color:var(--cct-strong)}.ccg-proj-head p{margin:2px 0 0;font-size:13px}
.ccg-proj-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.ccg-tabs{display:flex;gap:4px;align-items:center;padding:0 16px;border-bottom:1px solid rgba(var(--cct-tint-rgb),.1);overflow-x:auto;scrollbar-width:none}
.ccg-tabs button{flex:0 0 auto;min-height:40px;padding:8px 12px;border:0;border-bottom:2px solid transparent;background:none;color:var(--cct-muted);font:600 13px inherit;cursor:pointer}
.ccg-tabs button.on{color:var(--cct-strong);border-bottom-color:var(--cct-accent)}
.ccg-chip{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;margin-inline-start:8px;padding:2px 4px 2px 10px;border-radius:999px;background:rgba(var(--cct-accent-rgb),.14);color:var(--cct-strong);font-size:12px}
.ccg-chip button{width:24px;height:24px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.ccg-proj-body{flex:1;overflow:auto;padding:14px 20px 24px;-webkit-overflow-scrolling:touch}
.ccg-proj-body h4{margin:18px 0 8px;color:var(--cct-strong)}
.ccg-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ccg-stats>*{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px;border:1px solid rgba(var(--cct-tint-rgb),.1);border-radius:calc(10px*var(--cct-round));background:rgba(var(--cct-tint-rgb),.03);color:var(--cct-text);font:inherit;text-align:start;cursor:pointer}
.ccg-stats>div{cursor:default}.ccg-stats b{font-size:22px;color:var(--cct-strong)}.ccg-stats span{font-size:12px;color:var(--cct-muted)}
.ccg-people{display:flex;flex-wrap:wrap;gap:6px}.ccg-people button{padding:0;border:0;background:none;cursor:pointer}.ccg-people img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.ccg-graph{display:grid;grid-template-rows:repeat(7,11px);grid-auto-flow:column;grid-auto-columns:11px;gap:3px;overflow-x:auto;padding-bottom:4px}
.ccg-graph i{border-radius:2px;background:rgba(var(--cct-tint-rgb),.08)}
.ccg-graph .ccg-g1{background:rgba(var(--cct-accent-rgb),.3)}.ccg-graph .ccg-g2{background:rgba(var(--cct-accent-rgb),.5)}.ccg-graph .ccg-g3{background:rgba(var(--cct-accent-rgb),.75)}.ccg-graph .ccg-g4{background:var(--cct-accent)}
.ccg-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.ccg-filters .input{flex:1 1 180px;min-width:0;margin:0}.ccg-filters select.input{flex:0 0 auto;width:auto}
.ccg-seg{display:inline-flex;border:1px solid rgba(var(--cct-tint-rgb),.14);border-radius:calc(8px*var(--cct-round));overflow:hidden}
.ccg-seg button{min-height:36px;padding:6px 12px;border:0;background:transparent;color:var(--cct-muted);font:600 12px inherit;cursor:pointer}
.ccg-seg button.on{background:rgba(var(--cct-accent-rgb),.16);color:var(--cct-strong)}
.ccg-items{display:flex;flex-direction:column;border:1px solid rgba(var(--cct-tint-rgb),.1);border-radius:calc(10px*var(--cct-round));overflow:hidden}
.ccg-item{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-bottom:1px solid rgba(var(--cct-tint-rgb),.07);cursor:pointer}
.ccg-item:last-child{border-bottom:0}.ccg-item:hover,.ccg-item:focus-visible{background:rgba(var(--cct-tint-rgb),.05);outline:0}
.ccg-item-main{flex:1;min-width:0}.ccg-item-main b{display:block;color:var(--cct-strong);overflow-wrap:anywhere}.ccg-item-main small{display:block;margin-top:2px;font-size:12px}
.ccg-item-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto;font-size:12px}
.ccg-repos.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}.ccg-repos.list{display:flex;flex-direction:column;gap:8px}
.ccg-repo-card{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid rgba(var(--cct-tint-rgb),.1);border-radius:calc(10px*var(--cct-round));background:rgba(var(--cct-tint-rgb),.03);cursor:pointer}
.ccg-repo-card:hover,.ccg-repo-card:focus-visible{border-color:rgba(var(--cct-accent-rgb),.5);outline:0}
.ccg-repo-card h4{margin:0}.ccg-repo-card p{margin:0;font-size:13px;color:var(--cct-text);overflow-wrap:anywhere}
.ccg-repo-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:12px}.ccg-repo-meta a{color:var(--cct-accent)}
.ccg-repo-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}
.ccg-stack{display:flex}.ccg-stack img{width:22px;height:22px;margin-inline-end:-6px;border:2px solid var(--cct-pop);border-radius:50%;object-fit:cover}
.ccg-bar{height:4px;border-radius:2px;background:rgba(var(--cct-accent2-rgb,var(--cct-accent-rgb)),.35);overflow:hidden}.ccg-bar i{display:block;height:100%;background:var(--cct-accent)}
/* picker + settings (inside the app's modal and the settings sheet) */
.ccg-pick-list{display:flex;flex-direction:column;gap:6px;max-height:min(50vh,420px);overflow:auto;margin-top:10px}
.ccg-pick-row{display:flex;gap:10px;align-items:center;width:100%;min-height:48px;padding:8px 10px;border:1px solid rgba(127,127,127,.2);border-radius:10px;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}
.ccg-pick-row:hover:not([disabled]){border-color:var(--cct-accent)}.ccg-pick-row[disabled]{opacity:.5;cursor:default}
.ccg-pick-row img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:0 0 32px}.ccg-pick-row span{min-width:0}
.ccg-pick-row b,.ccg-pick-row small{display:block;overflow:hidden;text-overflow:ellipsis}.ccg-pick-row small{opacity:.7;font-size:12px}
.ccg-settings{margin-top:16px}.ccg-settings h4{margin:0 0 4px;color:var(--cct-label,var(--cct-strong));font-size:12px}
.ccg-settings-list{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.ccg-settings-row{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid rgba(var(--cct-tint-rgb),.1);border-radius:calc(10px*var(--cct-round))}
.ccg-settings-row img{width:28px;height:28px;border-radius:50%;object-fit:cover}.ccg-settings-row span{flex:1;min-width:0}
.ccg-settings-row b,.ccg-settings-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ccg-settings-row small{color:var(--cct-muted);font-size:12px}
@media(max-width:820px){
  .ccg-panel{width:100vw;border:0}
  .ccg-projects{inset:0;border:0;border-radius:0}
  .ccg-proj-head{padding:calc(10px + env(safe-area-inset-top)) 10px 6px 14px}
  .ccg-proj-head p{display:none}
  .ccg-proj-tools .btn{min-height:40px}
  .ccg-proj-body{padding:12px 12px calc(24px + env(safe-area-inset-bottom))}
  .ccg-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ccg-repos.grid{grid-template-columns:1fr}
  .ccg-item{padding:12px 10px}
  .ccg-line time{margin-inline-start:0}
  .ccg-who b{max-width:120px}
  .ccg-x{width:44px;height:44px;flex-basis:44px}
}

/* A pending invitation is a card on the Concord home and above the channel list (concord.js inviteCardHtml). */
.cc-invite-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;margin:0 0 12px;padding:10px 12px;border:1px solid rgba(var(--cct-accent-rgb),.45);border-radius:calc(12px*var(--cct-round));background:rgba(var(--cct-accent-rgb),.1);color:var(--cct-strong);font:inherit;text-align:start;cursor:pointer}
.cc-invite-card>span:first-child{font-size:20px}.cc-invite-card b,.cc-invite-card small{display:block}.cc-invite-card small{margin-top:2px;color:var(--cct-muted);font-size:12px}
.cc-invite-card strong{padding:6px 12px;border-radius:calc(8px*var(--cct-round));background:var(--cct-accent);color:var(--cct-on-accent);font-size:12px}
.cc-channel-list .cc-invite-card{margin:4px 0 10px}
.cc-invite-count{margin-inline-start:5px;padding:0 6px;border-radius:999px;background:var(--cct-accent);color:var(--cct-on-accent);font-size:11px;font-weight:700}

/* The community-notifications bell, switched off (concord.js concordNotifyOn). */
.cc-head-btn.cc-notify-off{opacity:.6}
/* The bell lives in the rooms drawer's footer; a phone -- which on the Concord home never shows that drawer -- gets
   a copy in the header (concord.js #cc-notify-head). The desktop shows the footer, so the copy is hidden there. */
@media(min-width:821px){.cc-notify-head{display:none!important}}
/* The Concord HOME has no community and no channel: no message composer there ("Message #general" to nobody). */
.cc-app.home-view .cc-compose,.cc-app.home-view .cc-reply,.cc-app.home-view .cc-typing{display:none!important}

/* AN INVITATION, ON ITS OWN SHEET (concord.js invitePreviewHtml). Fixed to the VIEWPORT -- the join dialogs are
   absolute inside .cc-app, which on a phone is wider than the screen, and that put the card's right half off it.
   It never shares a class with the "You have an invitation" banner (.cc-invite-card, a three-column grid): it did,
   and the review was laid out as that banner -- name, mark and buttons squeezed into columns. */
.cc-invite-sheet{position:fixed!important;inset:0!important;z-index:1200!important;padding:16px!important;overflow:auto!important}
.cc-invite-review{position:relative!important;box-sizing:border-box!important;width:min(440px,100%)!important;max-height:100%!important;overflow:auto!important;padding:24px 22px 20px!important;text-align:start!important}
.cc-invite-close{position:absolute!important;top:10px!important;inset-inline-end:10px!important;width:34px!important;height:34px!important;border:0!important;border-radius:50%!important;background:transparent!important;color:var(--cct-muted)!important;font-size:22px!important;line-height:1!important;cursor:pointer!important}
.cc-invite-close:hover,.cc-invite-close:focus-visible{background:rgba(var(--cct-tint-rgb),.08)!important;color:var(--cct-text)!important}
.cc-invite-kicker{margin:0 40px 10px 0!important;color:var(--cct-muted)!important;font-size:12px!important;font-weight:700!important;letter-spacing:.06em!important;text-transform:uppercase!important}
.cc-invite-head{display:flex!important;align-items:center!important;gap:14px!important;min-width:0!important}
.cc-invite-review .cc-invite-head .concord-mark{flex:0 0 56px!important;width:56px!important;height:56px!important;margin:0!important;font-size:26px!important}
.cc-invite-head h2{flex:1 1 auto!important;min-width:0!important;margin:0!important;color:var(--cct-title)!important;font-size:22px!important;line-height:1.25!important;overflow-wrap:anywhere!important}
.cc-invite-by{display:flex!important;align-items:center!important;gap:9px!important;margin:16px 0 0!important;color:var(--cct-fg-2)!important;font-size:14px!important;min-width:0!important}
.cc-invite-by span:last-child{min-width:0!important;overflow-wrap:anywhere!important}
.cc-invite-by b{color:var(--cct-strong)!important}
.cc-invite-av{flex:0 0 28px!important;width:28px!important;height:28px!important;border-radius:50%!important;object-fit:cover!important;display:grid!important;place-items:center!important;background:var(--cct-chip)!important;color:var(--cct-text)!important;font-size:13px!important;font-weight:700!important}
.cc-invite-desc{margin:14px 0 0!important;color:var(--cct-text)!important;font-size:14px!important;line-height:1.5!important;overflow-wrap:anywhere!important}
.cc-invite-meta{margin:8px 0 0!important;color:var(--cct-muted)!important;font-size:13px!important}
.cc-invite-review .cc-invite-note{margin:16px 0 0!important;padding:10px 12px!important;border-radius:calc(10px*var(--cct-round))!important;background:rgba(var(--cct-tint-rgb),.05)!important;color:var(--cct-fg-3)!important;font-size:12.5px!important;line-height:1.5!important}
.cc-invite-actions{display:flex!important;flex-direction:row-reverse!important;gap:10px!important;margin-top:18px!important}
.cc-invite-actions .btn{flex:1 1 0!important;min-height:44px!important}
@media(max-width:520px){.cc-invite-sheet{place-items:end center!important;padding:0!important}
  .cc-invite-review{width:100%!important;border-radius:calc(18px*var(--cct-round)) calc(18px*var(--cct-round)) 0 0!important;padding-bottom:calc(18px + env(safe-area-inset-bottom))!important}
  .cc-invite-actions{flex-direction:column!important}}
/* The invitations list: one card per invitation, named. */
.cc-direct-list{display:grid!important;gap:10px!important;margin-top:12px!important}
.cc-direct-card{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:10px!important;padding:12px!important;border:1px solid rgba(var(--cct-tint-rgb),.12)!important;border-radius:calc(12px*var(--cct-round))!important;background:var(--cct-raised)!important;min-width:0!important}
.cc-direct-main{flex:1 1 220px!important;display:flex!important;align-items:center!important;gap:11px!important;min-width:0!important;padding:0!important;border:0!important;background:none!important;color:inherit!important;text-align:start!important;cursor:pointer!important}
.cc-direct-card .concord-mark{flex:0 0 40px!important;width:40px!important;height:40px!important;margin:0!important;display:grid!important;place-items:center!important;border-radius:calc(11px*var(--cct-round))!important;background:var(--cct-accent)!important;color:var(--cct-on-accent)!important;font-weight:900!important}
.cc-direct-text{min-width:0!important}.cc-direct-text b,.cc-direct-main>b{display:block!important;color:var(--cct-strong)!important;overflow-wrap:anywhere!important}
.cc-direct-text small,.cc-direct-main small{display:block!important;margin-top:2px!important;color:var(--cct-muted)!important;font-size:12px!important;overflow-wrap:anywhere!important}
.cc-direct-btns{display:flex!important;gap:8px!important;margin-inline-start:auto!important}
.cc-direct-btns .btn{min-height:38px!important}
/* In the channel column (~170px) the banner is a NOTICE, not a paragraph: its explanation wrapped into five lines
   of 9px text. Title and Review only there; the full sentence stays on the main screen and in the sheet. */
.cc-channel-list .cc-invite-card small{display:none}
.cc-channel-list .cc-invite-card b{font-size:12.5px;line-height:1.3}

/* The open-thread bar (concord.js threadBarHtml): a header strip, not a floating box. Full width under the room
   header, the same surface as the conversation, a hairline below; the back control is a link-like button. */
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-messages>.cc-thread-bar{margin:0 0 10px!important;padding:8px 6px!important;border:0!important;border-bottom:1px solid rgba(var(--cct-tint-rgb),.1)!important;border-radius:0!important;background:var(--cct-main)!important;gap:8px!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-messages>.cc-thread-bar button{flex:0 0 auto!important;gap:6px!important;padding:6px 8px!important;border:0!important;border-radius:calc(8px*var(--cct-round))!important;color:var(--cct-accent)!important;font-weight:600!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-messages>.cc-thread-bar button:hover,:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-messages>.cc-thread-bar button:focus-visible{background:rgba(var(--cct-tint-rgb),.07)!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-messages>.cc-thread-bar button span:first-child{font-size:20px!important;line-height:1!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-messages>.cc-thread-bar .cc-thread-what{min-width:0!important;display:flex!important;flex-direction:column!important;padding-inline-start:8px!important;border-inline-start:1px solid rgba(var(--cct-tint-rgb),.12)!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-messages>.cc-thread-bar .cc-thread-what b{color:var(--cct-strong)!important;font-size:14.5px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-messages>.cc-thread-bar .cc-thread-what small{color:var(--cct-muted)!important;font-size:12px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
/* The @-picker under a textarea that is not the composer (the edit box): below it, inside the sheet. */
/* Known members, grouped (concord.js memberRow): Admins, then Members. */
.cc-member-group{margin:10px 4px 4px!important;color:var(--cct-section)!important;font-size:11px!important;font-weight:800!important;letter-spacing:.06em!important;text-transform:uppercase!important}
.cc-member-group:first-child{margin-top:2px!important}
.cc-member-group span{margin-inline-start:4px!important;font-weight:600!important;opacity:.8!important}
.cc-member-group.hidden{display:none!important}
/* Owners/moderators: the people here this node has blocked (concord.js nodeBlockNoteHtml). */
.cc-node-block-note{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px 12px!important;margin:6px 10px!important;padding:9px 12px!important;border:1px solid rgba(var(--cct-warn-rgb),.45)!important;border-radius:calc(10px*var(--cct-round))!important;background:rgba(var(--cct-warn-rgb),.08)!important;color:var(--cct-text)!important;font-size:13px!important;line-height:1.4!important}
.cc-node-block-note span{flex:1 1 220px!important;min-width:0!important}
/* Editing in the chat bar (2026-10-22): the bar says so in the accent, so an edit is never mistaken for a new message. */
.cc-reply.cc-editing{border-inline-start:3px solid var(--cct-accent)!important}.cc-reply.cc-editing span{white-space:normal!important}

/* Find your community: the search over the public list. */
.cc-public .cc-public-q{display:block;width:100%;box-sizing:border-box;margin:8px 0 10px}
.cc-public .cc-public-nomatch{margin:6px 2px}
/* COMMUNITIES' OWN DIALOGS (cord-spaces: new channel, new post...) are appended to the PAGE, outside .cc-app, so their
   buttons took the APP's accent -- an orange "Create channel" under a red Communities theme (Vyram, 2026-10-24). They
   take Communities' accent instead; --cct-* are resolved on :root, so this cannot loop with the "app"/classic themes. */
.pc-cord-spaces-dialog{--neon:var(--cct-accent);--cyan:var(--cct-accent);--neon2:var(--cct-accent2);--accent-rgb:var(--cct-accent-rgb);--accent2-rgb:var(--cct-accent2-rgb);--on-accent:var(--cct-on-accent)}

/* The channel topic opens in full (concord.js openTopic): the line is a button on a wide screen; on a phone, where the
   line is hidden, the ⓘ button is the way in. */
.cc-conversation>header .cc-topic{cursor:pointer}
.cc-topic-open{display:none!important}
@media(max-width:820px){:is(body.concord-view,.osw-slot[data-body-view~="concord-view"]) .cc-topic-open{display:inline-grid!important;place-items:center!important}}
.cc-topic-full{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;margin:8px 0 0}