/* HUD w stylu Jagged Alliance: Deadly Games - twarde krawedzie, fazowane
   panele, wersaliki i bursztynowe akcenty, ale w zadanej palecie. */
:root{
  --bg:#EEEEEE; --panel:#FAFAFA; --card:#FFFFFF;
  --accent:#FAC100; --accent-hover:#EFAB00; --accent-active:#EBA300; --accent-soft:#EFB300;
  --line:#D9D9DE; --text:#000000; --muted:#6b6b70;
  --edge-light:#FFFFFF; --edge-dark:#C2C2C9;
  --scan:rgba(0,0,0,.028); --scan-feed:rgba(0,0,0,.02); --veil:rgba(0,0,0,.45);
  --hud: "Consolas", "DejaVu Sans Mono", "Courier New", monospace;
}
/* Tryb ciemny: ten sam HUD, przyciemniony metal, akcent bez zmian. */
[data-theme="dark"]{
  --bg:#1C1C21; --panel:#25252B; --card:#2D2D34;
  --line:#3A3A43; --text:#EDEDF0; --muted:#9A9AA6;
  --edge-light:#3E3E48; --edge-dark:#121216;
  --scan:rgba(0,0,0,.14); --scan-feed:rgba(0,0,0,.12); --veil:rgba(0,0,0,.62);
}
[data-theme="military"]{
  --bg:#2C3126; --panel:#39402F; --card:#454D39;
  --line:#20241A; --text:#EDF0E2; --muted:#A9B394;
  --edge-light:#586248; --edge-dark:#181C12;
  --scan:rgba(0,0,0,.16); --scan-feed:rgba(0,0,0,.13); --veil:rgba(0,0,0,.62);
}
[data-theme="amber"]{
  --bg:#120E07; --panel:#1B150B; --card:#241C0F;
  --line:#3A2D16; --text:#FFD98A; --muted:#B08C4A;
  --edge-light:#4A3A1C; --edge-dark:#080602;
  --scan:rgba(250,193,0,.05); --scan-feed:rgba(250,193,0,.04); --veil:rgba(0,0,0,.7);
}
[data-theme="blue"]{
  --bg:#0E151C; --panel:#161F29; --card:#1E2A36;
  --line:#2C3B4A; --text:#E3EEF7; --muted:#8FA5B7;
  --edge-light:#33475A; --edge-dark:#080D12;
  --scan:rgba(0,0,0,.15); --scan-feed:rgba(0,0,0,.12); --veil:rgba(0,0,0,.64);
}
[data-theme="paper"]{
  --bg:#E8E4DA; --panel:#F3EFE5; --card:#FFFDF7;
  --line:#CFC8B8; --text:#1A1712; --muted:#6E6656;
  --edge-light:#FFFFFF; --edge-dark:#C3BBA8;
  --scan:rgba(0,0,0,.02); --scan-feed:rgba(0,0,0,.015); --veil:rgba(0,0,0,.4);
}
[data-theme="vscode"]{
  --bg:#1E1E1E; --panel:#252526; --card:#2D2D30;
  --line:#3C3C3C; --text:#D4D4D4; --muted:#9DA5B4;
  --edge-light:#3C3C3C; --edge-dark:#121212;
  --scan:rgba(255,255,255,.02); --scan-feed:rgba(255,255,255,.01); --veil:rgba(0,0,0,.7);
  --accent:#007ACC; --accent-hover:#3B8DDA; --accent-active:#2A7EC7; --accent-soft:#1F5C8A;
}
[data-theme="terminal"]{
  --bg:#0B0F0A; --panel:#101710; --card:#132018;
  --line:#1E3427; --text:#D6F9D6; --muted:#8CCF9E;
  --edge-light:#1B3825; --edge-dark:#060A07;
  --scan:rgba(255,255,255,.025); --scan-feed:rgba(255,255,255,.02); --veil:rgba(0,0,0,.72);
  --accent:#3AD777; --accent-hover:#57EA91; --accent-active:#2CC86B; --accent-soft:#1C7A46;
}
[data-theme="email"]{
  --bg:#F4F7FB; --panel:#FFFFFF; --card:#F8FAFD;
  --line:#D7E0EC; --text:#1F2A37; --muted:#5B6B82;
  --edge-light:#FFFFFF; --edge-dark:#B8C6D8;
  --scan:rgba(25,50,80,.02); --scan-feed:rgba(25,50,80,.015); --veil:rgba(32,44,62,.48);
  --accent:#3B82F6; --accent-hover:#2563EB; --accent-active:#1D4ED8; --accent-soft:#BFDBFE;
}
[data-theme="baroque"]{
  --bg:#1b0705; --panel:rgba(48,10,7,.93); --card:rgba(70,16,10,.94);
  --line:#8d4b15; --text:#f7d58a; --muted:#d1a55c;
  --edge-light:#d99a32; --edge-dark:#351006;
  --scan:rgba(255,190,70,.015); --scan-feed:rgba(255,190,70,.01); --veil:rgba(13,2,1,.72);
  --accent:#a96718; --accent-hover:#d08a22; --accent-active:#7f3e0d; --accent-soft:#c78627;
  --hud:"Georgia", "Times New Roman", serif;
}
[data-theme="starcraft"]{
  --bg:#07121d; --panel:rgba(10,26,40,.94); --card:rgba(15,39,58,.96);
  --line:#24516c; --text:#d8efff; --muted:#78a2bb;
  --edge-light:#3d7897; --edge-dark:#02080d;
  --scan:rgba(94,190,235,.045); --scan-feed:rgba(94,190,235,.03); --veil:rgba(0,5,10,.78);
  --accent:#e2b83f; --accent-hover:#f2d36a; --accent-active:#b8891d; --accent-soft:#276d91;
  --hud:"Orbitron", "Arial Black", "Trebuchet MS", "Segoe UI", sans-serif;
}
[data-theme="protoss"]{
  --bg:#0b1021; --panel:rgba(18,24,49,.94); --card:rgba(28,36,70,.96);
  --line:#40517f; --text:#edf3ff; --muted:#9eafd1;
  --edge-light:#7188bd; --edge-dark:#050713;
  --scan:rgba(159,187,255,.04); --scan-feed:rgba(159,187,255,.025); --veil:rgba(3,6,18,.78);
  --accent:#e2bd58; --accent-hover:#f2d87b; --accent-active:#b98e2f; --accent-soft:#4b66a0;
  --hud:"Orbitron", "Arial Black", "Trebuchet MS", "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);font-size:15px;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:
    repeating-linear-gradient(0deg, var(--scan) 0 1px, transparent 1px 3px),
    var(--bg);
}
html[data-theme="baroque"] body{
  background-color:#1b0705;
  background-image:url("skins/baroque/source.jpg");
  background-size:100% 100%;
  background-position:top left;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
html[data-theme="starcraft"] body{
  font-family:"Rajdhani", "Segoe UI", sans-serif;
  background-color:#07121d;
  background-image:url("skins/starcraft/source.jpg");
  background-size:100% 100%;
  background-position:top left;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
html[data-theme="protoss"] body{
  font-family:"Rajdhani", "Segoe UI", sans-serif;
  background-color:#0b1021;
  background-image:url("skins/protoss/source.jpg");
  background-size:100% 100%;
  background-position:top left;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
[data-theme="starcraft"] button,
[data-theme="starcraft"] input,
[data-theme="starcraft"] select,
[data-theme="starcraft"] .tag,
[data-theme="starcraft"] .sub{font-family:"Rajdhani", "Segoe UI", sans-serif}
[data-theme="protoss"] button,
[data-theme="protoss"] input,
[data-theme="protoss"] select,
[data-theme="protoss"] .tag,
[data-theme="protoss"] .sub{font-family:"Rajdhani", "Segoe UI", sans-serif}

/* --- fazowane krawedzie --- */
.bevel{border:2px solid;border-color:var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light)}
.inset{border:2px solid;border-color:var(--edge-dark) var(--edge-light) var(--edge-light) var(--edge-dark)}

button{
  font-family:var(--hud);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  cursor:pointer;color:var(--text);background:var(--panel);padding:8px 14px;border-radius:0;
  border:2px solid;border-color:var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light);
  box-shadow:0 0 0 1px var(--line);
}
button:hover{background:var(--accent-hover);color:#000}
button:active{border-color:var(--edge-dark) var(--edge-light) var(--edge-light) var(--edge-dark);background:var(--accent-active);color:#000}
button:disabled{opacity:.45;cursor:default;background:var(--panel);color:var(--text)}
button.primary{background:var(--accent);color:#000}
button.primary:hover{background:var(--accent-hover)}
button.ghost{background:var(--card)}
button.ghost:hover{background:var(--accent);color:#000}
button.icon{padding:6px 11px;font-size:15px}
button.logout-icon{font-size:19px;line-height:1;padding:5px 9px}
.side-head button.icon{width:42px;height:42px;padding:4px;display:grid;place-items:center}
.side-head button.icon .material-symbols-outlined{font-size:20px}
.button-label{margin-left:4px}
.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-feature-settings:'liga'}
button.block{width:100%}

input,select,textarea{
  font-family:var(--hud);font-size:13px;color:var(--text);background:var(--card);
  width:100%;padding:9px 10px;border-radius:0;resize:vertical;
  border:2px solid;border-color:var(--edge-dark) var(--edge-light) var(--edge-light) var(--edge-dark);
  box-shadow:0 0 0 1px var(--line);
}
select option{background:var(--card);color:var(--text)}
select option:checked{background:var(--accent);color:#000}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-2px}
label{display:block;font-family:var(--hud);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.hidden{display:none!important}
.spacer{flex:1}
.tag{font-family:var(--hud);font-size:11px;letter-spacing:.5px;color:var(--muted)}

::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--panel);border:2px solid;border-color:var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light)}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* ---------------- logowanie ---------------- */
.auth-wrap{min-height:100%;display:grid;place-items:center;padding:24px}
.auth{
  width:100%;max-width:420px;background:var(--panel);padding:22px;
  border:2px solid;border-color:var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light);
  box-shadow:0 0 0 1px var(--line), 0 6px 0 rgba(0,0,0,.06);
}
.brand{display:flex;align-items:center;gap:10px;background:var(--accent);color:#000;padding:8px 10px;margin:-22px -22px 16px;
  border-bottom:2px solid var(--edge-dark)}
.dot{width:18px;height:18px;background:var(--card);border:2px solid;border-color:var(--edge-dark) var(--edge-light) var(--edge-light) var(--edge-dark)}
.brand h1{font-family:var(--hud);font-size:15px;letter-spacing:3px;text-transform:uppercase;margin:0}
.sub{font-family:var(--hud);color:var(--muted);font-size:11px;letter-spacing:.5px;margin:0 0 18px}
.sub.last{margin:16px 0 0}
.field{margin-bottom:14px}
.tabs{display:flex;gap:4px;background:var(--bg);padding:4px;margin-bottom:16px;
  border:2px solid;border-color:var(--edge-dark) var(--edge-light) var(--edge-light) var(--edge-dark)}
.tabs button{flex:1;box-shadow:none}
.tabs button.on{background:var(--accent);color:#000;border-color:var(--edge-dark) var(--edge-light) var(--edge-light) var(--edge-dark)}
.msg{font-family:var(--hud);font-size:12px;padding:9px 10px;background:var(--card);margin-bottom:14px;
  border-left:4px solid var(--accent-soft);box-shadow:0 0 0 1px var(--line);color:var(--text);}
.msg.err{border-left-color:var(--accent-active);background:#F5E4A1;color:#000000;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}

/* ---------------- szkielet aplikacji ---------------- */
/* Siatka trzyma sie wysokosci okna, przewija sie wylacznie lista wiadomosci.
   min-height:0 jest konieczne, inaczej dlugi feed rozpycha kolumne. */
.app{display:grid;grid-template-columns:308px 1fr;height:100vh;height:100dvh;gap:6px;padding:6px;overflow:hidden}
.side{
  background:var(--bg);display:flex;flex-direction:column;min-width:0;min-height:0;
  border:2px solid;border-color:var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light);
  box-shadow:0 0 0 1px var(--line);
}
.side-head{
  display:flex;align-items:center;gap:8px;padding:8px;background:var(--accent);color:#000;
  border-bottom:2px solid var(--edge-dark);
}
.side-head .who{flex:1;min-width:0;font-family:var(--hud)}
.side-head .who b{display:block;font-size:13px;letter-spacing:1px;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-head .who span{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#000;opacity:.6}
.side-head .who .status-indicator{display:block;width:8px;height:8px;margin-top:4px;border-radius:50%;background:#25c76a;box-shadow:0 0 0 2px rgba(0,0,0,.16),0 0 8px rgba(37,199,106,.7);opacity:1}
.side-head .who .status-indicator.offline{background:#8c98a1;box-shadow:0 0 0 2px rgba(0,0,0,.16)}

.new-chat{padding:10px;display:grid;gap:8px;background:var(--panel);border-bottom:2px solid var(--edge-dark);
  box-shadow:inset 0 2px 0 var(--edge-light)}
.tabs.mini{margin-bottom:2px;padding:3px}
.tabs.mini button{padding:6px 4px;font-size:11px;letter-spacing:0}
.pane{display:none;gap:8px}
.pane.on{display:grid}
.check{display:flex;align-items:center;gap:8px;font-family:var(--hud);font-size:11px;letter-spacing:.5px;
  text-transform:uppercase;color:var(--muted);margin:0}
.check input{width:auto;box-shadow:none}
.rooms{max-height:196px;overflow:auto;display:grid;gap:4px}
.room-row{display:flex;align-items:center;gap:8px;padding:6px;background:var(--card);
  border-left:4px solid var(--accent-soft);box-shadow:0 0 0 1px var(--line)}
.room-row .meta{flex:1;min-width:0}
.room-row b{display:block;font-family:var(--hud);font-size:12px;text-transform:uppercase;letter-spacing:.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-row button{padding:5px 9px;font-size:11px}

.list{flex:1;overflow:auto;min-height:0;padding:6px;background:var(--bg)}
.list .empty-note{padding:12px}
.item{
  width:100%;text-align:left;display:flex;align-items:center;gap:9px;margin-bottom:4px;padding:8px;
  background:var(--panel);box-shadow:0 0 0 1px var(--line);
  border:2px solid;border-color:var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light);
  text-transform:none;letter-spacing:0;font-weight:400;
}
.item:hover{background:var(--card)}
.item.on{background:var(--card);border-left:4px solid var(--accent);padding-left:6px}
.avatar{
  width:32px;height:32px;flex:none;display:grid;place-items:center;background:var(--accent);color:#000;
  font-family:var(--hud);font-size:14px;font-weight:700;
  border:2px solid;border-color:var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light);
}
.avatar[src]{object-fit:cover}
.avatar-large{width:56px;height:56px}
.avatar.room{background:var(--accent-soft)}
.item .meta{min-width:0;flex:1}
.item .meta b{display:block;font-family:var(--hud);font-size:12px;letter-spacing:.5px;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{font-family:var(--hud);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  background:var(--accent-active);color:#000;padding:3px 6px;box-shadow:0 0 0 1px var(--line)}

/* ---------------- panel czatu ---------------- */
.main{
  display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--panel);
  border:2px solid;border-color:var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light);
  box-shadow:0 0 0 1px var(--line);
}
.top{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--accent);color:#000;
  flex:none;border-bottom:2px solid var(--edge-dark)}
.top b{font-family:var(--hud);font-size:13px;letter-spacing:1.5px;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top button{padding:6px 10px;font-size:11px}
.pill{
  font-family:var(--hud);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);
  background:var(--card);padding:4px 8px;
  border:2px solid;border-color:var(--edge-dark) var(--edge-light) var(--edge-light) var(--edge-dark);
}
.pill.server{color:#000;background:var(--accent-soft)}
#convState:empty{display:none}
.chat-people{display:flex;align-items:center;gap:6px;min-height:48px;padding:6px 10px;overflow-x:auto;flex:none;background:var(--bg);border-bottom:2px solid var(--edge-dark)}
.chat-person{display:flex;align-items:center;gap:5px;flex:none;padding:3px 7px 3px 3px;background:var(--panel);border:1px solid var(--line);font-family:var(--hud)}
.chat-person-avatar{width:28px;height:28px;display:grid;place-items:center;flex:none;background:var(--accent);color:#000;font-size:11px;font-weight:700;object-fit:cover;border:1px solid var(--edge-dark)}
.chat-person-meta{display:flex;flex-direction:column;min-width:0;line-height:1.1}
.chat-person-meta b{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;letter-spacing:.4px;text-transform:uppercase}
.chat-person-meta span{font-size:9px;color:var(--muted);text-transform:uppercase}
.chat-person.online .chat-person-meta span{color:#16833b}

.feed{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px;display:flex;flex-direction:column;gap:8px;
  background:linear-gradient(0deg, rgba(0,0,0,.02) 0 1px, transparent 1px 4px), var(--panel);
  box-shadow:inset 0 2px 0 var(--edge-dark)}
.older{align-self:center;flex:none}
.bubble{
  max-width:min(620px,74%);padding:8px 11px 10px 11px;background:var(--card);color:var(--text);
  white-space:pre-wrap;word-break:break-word;
  position:relative;
  white-space:pre-wrap;word-break:break-word;
  border:2px solid;border-color:var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light);
  box-shadow:0 0 0 1px var(--line);
  padding-right:62px;
}
.bubble.me{align-self:flex-end;background:var(--accent);color:#000}
.bubble .from{display:block;font-family:var(--hud);font-size:10px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--accent-active);margin-bottom:3px;display:flex;align-items:center;gap:6px}
.message-avatar{width:24px;height:24px;display:grid;place-items:center;flex:none;background:var(--accent);color:#000;
  font-size:9px;font-weight:700;object-fit:cover;border:1px solid var(--edge-dark)}
.bubble.me .from{color:#000;opacity:.65}
.bubble .time{display:block;font-family:var(--hud);font-size:10px;letter-spacing:.5px;color:var(--muted);margin-top:5px}
.bubble.me .time{color:rgba(0,0,0,.6)}
.bubble.sys{align-self:center;background:var(--bg);color:var(--muted);font-family:var(--hud);font-size:11px;
  letter-spacing:.5px;max-width:82%}
.file{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.file .clip{font-family:var(--hud);font-size:12px;letter-spacing:.5px}
.file .clip::before{content:"[FILE] "}
.file button{padding:4px 9px;font-size:10px}
.thumb{display:block;margin-top:6px;max-width:280px;max-height:220px;cursor:pointer;
  border:2px solid;border-color:var(--edge-dark) var(--edge-light) var(--edge-light) var(--edge-dark)}
.clip-video{display:block;margin-top:6px;max-width:320px;max-height:240px;background:#000;
  border:2px solid;border-color:var(--edge-dark) var(--edge-light) var(--edge-light) var(--edge-dark)}
.embed{display:block;margin-top:6px;width:min(420px,100%);aspect-ratio:16/9;border:0;
  outline:2px solid var(--edge-dark);outline-offset:0}
.file .gone{color:var(--muted);font-style:italic}
.audio{display:block;margin-top:6px;width:min(320px,100%)}
.bubble a{color:var(--accent-active);text-decoration:underline;word-break:break-all}
.bubble.me a{color:#000}
.bubble a:hover{background:var(--accent-soft);color:#000}
.message-reactions{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;min-height:28px}
.message-reaction{display:inline-flex;align-items:center;gap:4px;padding:4px 7px;background:var(--panel);border:1px solid var(--line);font-size:12px;cursor:pointer}
.message-reaction:hover{background:var(--accent-soft);color:#000}
.message-reaction .count{font-family:var(--hud);font-size:10px;opacity:.8}
.message-actions{position:absolute;top:8px;right:8px;display:flex;justify-content:flex-end;align-items:center;gap:6px;z-index:3}
.message-pin-toggle,.message-menu-button{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;box-shadow:none;transition:all .12s ease}
.message-pin-toggle:hover,.message-menu-button:hover{background:var(--accent-soft);color:#000}
.message-pin-toggle.pinned{background:var(--accent);color:#000;border-color:var(--edge-dark)}
.message-pin-toggle .material-symbols-outlined,.message-menu-button .material-symbols-outlined{font-size:16px;line-height:1}
.message-menu{position:relative;display:inline-flex}
.message-menu-panel{position:absolute;right:0;top:calc(100% + 6px);display:none;flex-direction:column;min-width:180px;padding:8px;gap:6px;background:var(--panel);border:2px solid;border-color:var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light);box-shadow:0 8px 18px rgba(0,0,0,.16);z-index:8}
.message-menu.open .message-menu-panel{display:flex}
.message-menu-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;background:var(--card);border:1px solid var(--line);color:var(--text);font-family:var(--hud);font-size:10px;letter-spacing:.8px;text-transform:uppercase;cursor:pointer;box-shadow:none}
.message-menu-item:hover{background:var(--accent-soft);color:#000}
.pinned-strip{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;padding:8px 12px;border-bottom:2px solid var(--edge-dark);background:var(--bg);min-height:46px;overflow:hidden}
.pinned-strip.hidden{display:none}
.pinned-items{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;min-width:0;flex:1;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
.pinned-items::-webkit-scrollbar{display:none}
.pinned-all-button{flex:0 0 30px;width:30px;height:30px;padding:0;margin-left:auto;z-index:1}
.pinned-all-button .material-symbols-outlined{font-size:18px;line-height:1}
.pinned-popover-list{display:flex;flex-direction:column;gap:6px;min-height:0}
.pinned-modal-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.pinned-modal-actions .check{margin:0}
.pinned-modal-actions button:disabled{opacity:.45;cursor:not-allowed}
.pinned-modal-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;background:var(--accent);color:#000;font-size:10px;letter-spacing:0;border:1px solid var(--edge-dark);vertical-align:middle}
.pin-pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:5px 8px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);font-family:var(--hud);font-size:10px;letter-spacing:.8px;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.pin-pill .pin-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:var(--accent);color:#000;border-radius:50%;font-size:12px;font-weight:700}
.pin-pill .pin-badge.poll,.pin-popover-item .pin-mini.poll{border-radius:0}
.pin-pill .pin-badge .material-symbols-outlined,.pin-popover-item .pin-mini .material-symbols-outlined{font-size:14px;line-height:1}
.pin-pill-copy{display:block;max-width:min(320px,45vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pin-popover-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;background:var(--card);border:1px solid var(--line);cursor:pointer;text-align:left}
.pin-popover-item:hover{background:var(--accent-soft)}
.pin-popover-item .summary{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.pin-select{flex:0 0 auto;width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.pin-popover-item small{font-family:var(--hud);font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.pin-item-copy{display:block;min-width:0;max-width:calc(100% - 26px);overflow:hidden}
.pin-popover-item b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.pin-popover-item .pin-mini{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#000;font-size:12px}
.pin-unpin{display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px;width:26px;height:26px;padding:0;background:var(--panel);border:1px solid var(--line);color:var(--muted);font-family:var(--hud);font-size:12px;font-weight:700;cursor:pointer}
.pin-unpin:hover{background:var(--danger,#d55);color:#fff;border-color:var(--edge-dark)}
.reaction-trigger{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--line);background:transparent;cursor:pointer;box-shadow:none;font-family:Georgia,serif;font-size:17px;font-weight:400;color:var(--muted);opacity:.7}
.reaction-trigger:hover{background:var(--accent-soft);color:#000}
.reaction-picker{position:absolute;left:0;top:calc(100% + 6px);display:grid;grid-template-columns:repeat(6,30px);grid-auto-rows:30px;gap:6px;padding:8px;max-height:122px;overflow-y:auto;overflow-x:hidden;background:var(--panel);border:2px solid;border-color:var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light);box-shadow:0 8px 18px rgba(0,0,0,.15);z-index:4;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .18s ease, transform .18s ease}
.message-reactions.open .reaction-picker{opacity:1;transform:translateY(0);pointer-events:auto}
.reaction-emoji{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:var(--card);border:1px solid var(--line);cursor:pointer;font-size:18px}
.reaction-emoji:hover{background:var(--accent-soft);transform:translateY(-1px)}
.reaction-confetti{position:fixed;width:6px;height:10px;z-index:60;pointer-events:none;animation:reaction-confetti-pop .75s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes reaction-confetti-pop{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(.7) rotate(var(--r))}}
@media (prefers-reduced-motion: reduce){.reaction-confetti{display:none}}

.new-message-toast{position:fixed;right:20px;bottom:92px;z-index:15;padding:10px 14px;background:var(--accent);color:#000;border:2px solid var(--edge-dark);box-shadow:0 0 0 1px var(--line),0 8px 18px rgba(0,0,0,.16);font-family:var(--hud);font-size:11px;letter-spacing:1px;text-transform:uppercase;cursor:pointer}
.new-message-toast:not(.has-label){width:42px;height:42px;padding:4px;display:grid;place-items:center}
.new-message-toast:not(.has-label) .material-symbols-outlined{font-size:21px}

.lightbox{position:fixed;inset:0;background:var(--veil);display:grid;place-items:center;z-index:30;padding:20px}
.lightbox .shot{max-width:min(96vw,1100px);background:var(--panel);padding:0;
  border:2px solid;border-color:var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light);
  box-shadow:0 0 0 1px var(--line), 0 10px 0 rgba(0,0,0,.25)}
.lightbox .shot-bar{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--accent);color:#000;
  font-family:var(--hud);font-size:12px;letter-spacing:1px;text-transform:uppercase;
  border-bottom:2px solid var(--edge-dark)}
.lightbox .shot-bar button{padding:4px 9px;font-size:11px}
.lightbox .shot-body{display:grid;place-items:center;background:var(--card);min-width:280px;min-height:120px}
.lightbox img,.lightbox video{display:block;max-width:min(96vw,1100px);max-height:78vh}

.modal .box.wide{max-width:620px}
.gal-list{display:grid;gap:6px;max-height:52vh;overflow:auto;min-width:0}
.gal-item{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px;background:var(--card);min-width:0;
  border-left:4px solid var(--accent-soft);box-shadow:0 0 0 1px var(--line)}
.gal-item .meta{flex:1;min-width:0;overflow:hidden}
.gal-item b{display:block;font-family:var(--hud);font-size:12px;letter-spacing:.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gal-item .tag{display:block;white-space:normal;word-break:break-word;line-height:1.35}
.gal-item img{width:44px;height:44px;object-fit:cover;flex:none;max-width:100%;
  border:2px solid;border-color:var(--edge-dark) var(--edge-light) var(--edge-light) var(--edge-dark)}
.gal-item .icon-box{width:44px;height:44px;flex:none;display:grid;place-items:center;background:var(--panel);
  font-family:var(--hud);font-size:10px;font-weight:700;max-width:100%;
  border:2px solid;border-color:var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light)}
.gal-item .tiny-avatar{width:34px;height:34px;flex:none;display:grid;place-items:center;background:var(--accent);color:#000;
  font-family:var(--hud);font-size:13px;font-weight:700;border:2px solid;border-color:var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light)}
.gal-item button{padding:4px 9px;font-size:10px;white-space:nowrap;justify-self:start}
#peopleList .gal-item{grid-template-columns:auto minmax(0,1fr) auto auto auto}
#peopleList .gal-item .meta{min-width:0}
#peopleList .gal-item button{grid-column:auto;width:auto;justify-self:stretch}
#galList .gal-item{grid-template-columns:auto auto minmax(0,1fr) auto auto}
#galList .gal-item button{grid-column:auto;width:auto;justify-self:stretch}
.gal-item audio.gallery-audio{grid-column:1 / -1;width:100%;min-width:0;height:40px}

.composer{display:flex;flex-wrap:wrap;gap:8px;padding:8px;background:var(--panel);flex:none;border-top:2px solid var(--edge-dark);
  box-shadow:inset 0 2px 0 var(--edge-light)}
.reply-bar{display:flex;align-items:center;gap:8px;flex:1 0 100%;min-width:0;padding:6px 8px;background:var(--card);border-left:3px solid var(--accent);color:var(--muted)}
.reply-copy{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--hud);font-size:11px;flex:1}
.reply-bar button{padding:3px 6px;flex:none}
.poll-card{margin:4px 0 8px;padding:10px;background:rgba(255,255,255,.16);border-left:3px solid var(--accent-active);display:grid;gap:6px}
.poll-question{font-family:var(--hud);font-size:13px;color:#102a4c}
.poll-content{margin:0;color:#183556;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.35}
.poll-status{font-family:var(--hud);font-size:10px;color:#315577}
.poll-option{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;text-align:left;padding:7px 9px;font-family:inherit;font-size:14px;font-weight:400;text-transform:none;letter-spacing:0;white-space:normal;overflow-wrap:anywhere;line-height:1.3;background:#202631;color:#c7d0da;border-color:#65707d #0b0e13 #0b0e13 #65707d}
.poll-option > span:first-child{min-width:0;flex:1}
.poll-voters{display:block;flex:1 0 100%;margin-top:3px;color:#8f9eab;font-size:11px;font-weight:400;line-height:1.25;overflow-wrap:anywhere}
.poll-dates textarea,
#pollContent{display:block;width:100%;height:120px;min-height:120px;max-height:220px;resize:vertical;overflow-y:scroll}
#pollModal .box{max-height:calc(100dvh - 24px);overflow-y:auto}
.poll-option.selected{background:#d4aa35;color:#111d2c;border-color:#f4d76d #705719 #705719 #f4d76d}
.poll-option:disabled{opacity:.75;cursor:default}
.poll-count{font-family:var(--hud);font-size:10px}
.poll-dates{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.poll-options{display:grid;gap:6px;margin-bottom:7px}
.poll-manage-list{display:grid;gap:7px;max-height:50vh;overflow:auto}
.poll-manage-row{display:flex;align-items:center;gap:7px;padding:8px;background:var(--card);border-left:3px solid var(--accent-soft);cursor:pointer}
.poll-manage-row .meta{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.poll-manage-row button{padding:5px 8px;font-size:10px;white-space:nowrap}
.message-reply{margin:3px 0 9px;padding:7px 9px;border-left:4px solid var(--accent-soft);background:rgba(255,255,255,.72);color:#102a4c;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.message-reply-action{position:absolute;right:8px;bottom:8px;width:28px;height:28px;padding:2px;border:0;background:var(--panel);box-shadow:0 0 0 1px var(--line);color:var(--muted);font-size:14px;line-height:1;opacity:.62;border-radius:5px;z-index:3;pointer-events:auto}
.message-reply-action .material-symbols-outlined{pointer-events:none}
.message-reply-action .material-symbols-outlined{font-size:15px}
.message-reply-action:hover{background:var(--accent-soft);color:#000}
.message-reply:hover{background:var(--accent-soft);color:var(--text)}
.message-target{animation:message-target-pulse 1.6s ease-out}
@keyframes message-target-pulse{0%,100%{box-shadow:0 0 0 1px var(--line)}50%{box-shadow:0 0 0 3px var(--accent),0 0 18px var(--accent-soft)}}
.feed.is-loading::before{content:'Wczytywanie starszych wiadomosci...';position:sticky;top:0;z-index:5;align-self:center;padding:5px 10px;background:var(--accent);color:#000;font-family:var(--hud);font-size:10px;letter-spacing:.7px;text-transform:uppercase;box-shadow:0 0 0 1px var(--line)}
.composer input{flex:1}
.progress{
  font-family:var(--hud);font-size:13px;letter-spacing:1px;white-space:pre;overflow:hidden;flex:none;
  padding:7px 10px;background:var(--card);color:var(--text);border-top:2px solid var(--edge-dark);
}
.empty{flex:1;display:grid;place-items:center;text-align:center;padding:30px;min-height:0;
  font-family:var(--hud);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}

/* ---------------- skorka graficzna Barok ---------------- */
[data-theme="baroque"] .app{gap:10px;padding:clamp(10px,2vw,28px)}
[data-theme="baroque"] .side,
[data-theme="baroque"] .main{background:rgba(39,7,5,.78);border:2px solid #a8661c;box-shadow:0 0 0 2px #321006, inset 0 0 22px rgba(0,0,0,.5)}
[data-theme="baroque"] .side-head,
[data-theme="baroque"] .top{background:linear-gradient(90deg,#55120b,#9b4d12 48%,#541008);color:#f9d98b;border-color:#d59a35;text-shadow:1px 1px #351006}
[data-theme="baroque"] .side-head .who span{color:#f4c56d;opacity:.85}
[data-theme="baroque"] .list,
[data-theme="baroque"] .feed{background:rgba(49,9,7,.64);box-shadow:inset 0 0 18px rgba(0,0,0,.35)}
[data-theme="baroque"] .item,
[data-theme="baroque"] .bubble,
[data-theme="baroque"] .new-chat,
[data-theme="baroque"] .composer,
[data-theme="baroque"] .progress{background:rgba(76,17,10,.9);border-color:#d0922d #4a1309 #4a1309 #d0922d;box-shadow:0 0 0 1px #7a3b10, inset 0 0 12px rgba(0,0,0,.25)}
[data-theme="baroque"] .bubble.me{background:linear-gradient(135deg,#a75a15,#702208);color:#ffe4a4}
[data-theme="baroque"] .bubble .from{color:#f2b84e}
[data-theme="baroque"] .bubble .time{color:#d6a35a}
[data-theme="baroque"] button,
[data-theme="baroque"] input,
[data-theme="baroque"] select{background:linear-gradient(#8b3e0e,#4b1108);color:#f9d98b;border-color:#d99b34 #421108 #421108 #d99b34;box-shadow:0 0 0 1px #6f310c}
[data-theme="baroque"] button:hover,
[data-theme="baroque"] button.primary,
[data-theme="baroque"] .item:hover{background:linear-gradient(#c17b22,#71310b);color:#fff1be}
[data-theme="baroque"] input::placeholder{color:#c69550}
[data-theme="baroque"] .avatar{background:linear-gradient(135deg,#d09028,#6c2609);color:#fff0b4;border-color:#e2ae4c #4c1208 #4c1208 #e2ae4c}
[data-theme="baroque"] .item.on{background:linear-gradient(90deg,#9b4c11,#5d180a);border-left-color:#f0b33b}
[data-theme="baroque"] .pill,
[data-theme="baroque"] .badge{background:#7f3c0d;color:#ffe4a4;border-color:#d99b34}
[data-theme="baroque"] .reaction-trigger,
[data-theme="baroque"] .message-reaction,
[data-theme="baroque"] .reaction-picker,
[data-theme="baroque"] .reaction-emoji{background:#5a180b;border-color:#c07820;color:#f8d88e}
[data-theme="baroque"] .modal .box,
[data-theme="baroque"] .lightbox .shot{background:#421009;border-color:#d0922d #421108 #421108 #d0922d}
[data-theme="baroque"] .modal h3,
[data-theme="baroque"] .lightbox .shot-bar{background:linear-gradient(90deg,#9a4a11,#c07820,#8d3b0b);color:#ffe5a0}
[data-theme="baroque"] .auth{background:rgba(53,10,7,.94);border-color:#d0922d #421108 #421108 #d0922d}
[data-theme="baroque"] .brand{background:linear-gradient(90deg,#8f3e0d,#c37d22,#8f3e0d);color:#ffe6a3}

/* ---------------- skorka Starcraft ---------------- */
[data-theme="starcraft"] .app{gap:8px;padding:clamp(8px,1.5vw,20px)}
[data-theme="starcraft"] .side,
[data-theme="starcraft"] .main{background:rgba(5,18,29,.84);border-color:#4c87a4 #02080d #02080d #4c87a4;box-shadow:0 0 0 1px #1e4a62, inset 0 0 24px rgba(34,130,177,.12)}
[data-theme="starcraft"] .side-head,
[data-theme="starcraft"] .top{background:linear-gradient(90deg,#0b344b,#176d91 50%,#0a2a3e);color:#f3d56a;border-color:#80c6df;text-shadow:0 0 8px rgba(95,211,255,.7)}
[data-theme="starcraft"] .side-head .who span{color:#a9dcf2;opacity:.9}
[data-theme="starcraft"] .list,
[data-theme="starcraft"] .feed{background:rgba(5,22,35,.68);box-shadow:inset 0 0 22px rgba(35,138,184,.12)}
[data-theme="starcraft"] .item,
[data-theme="starcraft"] .bubble,
[data-theme="starcraft"] .new-chat,
[data-theme="starcraft"] .composer,
[data-theme="starcraft"] .progress,
[data-theme="starcraft"] .chat-people{background:rgba(11,35,52,.92);border-color:#3d7897 #02080d #02080d #3d7897;box-shadow:0 0 0 1px #1e4a62}
[data-theme="starcraft"] .bubble.me{background:linear-gradient(135deg,#d4a932,#80631d);color:#07121d}
[data-theme="starcraft"] .bubble .from{color:#6fd4f4}
[data-theme="starcraft"] .bubble .time{color:#8db8ce}
[data-theme="starcraft"] button,
[data-theme="starcraft"] input,
[data-theme="starcraft"] select{background:linear-gradient(#174c68,#0b2638);color:#d8efff;border-color:#62a8c5 #02080d #02080d #62a8c5;box-shadow:0 0 0 1px #1e4a62}
[data-theme="starcraft"] select option{background:#0b2638;color:#d8efff}
[data-theme="starcraft"] select option:checked{background:#d0a934;color:#07121d}
[data-theme="starcraft"] button:hover,
[data-theme="starcraft"] button.primary,
[data-theme="starcraft"] .item:hover{background:linear-gradient(#d9b33d,#80631d);color:#07121d}
[data-theme="starcraft"] input::placeholder{color:#78a2bb}
[data-theme="starcraft"] .avatar{background:linear-gradient(135deg,#e4bf48,#246b8a);color:#06121b;border-color:#bce9f6 #02080d #02080d #bce9f6}
[data-theme="starcraft"] .item.on{background:linear-gradient(90deg,#174e6a,#0b2639);border-left-color:#e5c34d}
[data-theme="starcraft"] .pill,
[data-theme="starcraft"] .badge{background:#1b6b8c;color:#e7f8ff;border-color:#71c6e4}
[data-theme="starcraft"] .bubble{background:linear-gradient(135deg,rgba(15,57,80,.98),rgba(8,30,48,.98));color:#e4f6ff;border-color:#4d9abd #06131d #06131d #4d9abd;box-shadow:0 0 0 1px #1c526e, inset 0 0 16px rgba(84,201,239,.1)}
[data-theme="starcraft"] .bubble.me{background:linear-gradient(135deg,#d9b33d,#a77d22);color:#08141d;border-color:#f2d36a #48350d #48350d #f2d36a;box-shadow:0 0 0 1px #7d611c, inset 0 0 16px rgba(255,232,133,.18)}
[data-theme="starcraft"] .bubble .from{color:#72d9fa}
[data-theme="starcraft"] .bubble.me .from{color:#102b3a;opacity:.78}
[data-theme="starcraft"] .message-reply{background:rgba(224,241,250,.9);border-left-color:#2f8fb4;color:#102a4c}
[data-theme="starcraft"] .bubble:not(.me) .message-reply{color:#bdeaff}
[data-theme="starcraft"] .bubble.me .message-reply{background:rgba(239,228,176,.92);border-left-color:#80631d;color:#102a4c}
[data-theme="starcraft"] .message-reply:hover{background:#276d91;color:#fff}
[data-theme="starcraft"] .bubble.me .message-reply:hover{background:#80631d;color:#fff8ce}
[data-theme="starcraft"] .message-reply-action{background:#254d50;color:#d9e9d2;border-color:#6e8d78;opacity:.9}
[data-theme="starcraft"] .poll-card{background:rgba(224,241,250,.86);border-left-color:#2f8fb4}
[data-theme="starcraft"] .poll-question,[data-theme="starcraft"] .poll-content{color:#102a4c}
[data-theme="starcraft"] .poll-status{color:#315577}
[data-theme="starcraft"] .poll-option{background:#122b42;color:#c5dce8;border-color:#5798bc #06131d #06131d #5798bc}
[data-theme="starcraft"] .bubble .time{color:#9bc9dc}
[data-theme="starcraft"] .bubble.me .time{color:#253b42}
[data-theme="starcraft"] .bubble a{color:#8ee6ff}
[data-theme="starcraft"] .bubble.me a{color:#102b3a}
[data-theme="starcraft"] .bubble a:hover{background:#2d789a;color:#fff}
[data-theme="starcraft"] .bubble.me a:hover{background:#f2d36a;color:#07121d}
[data-theme="starcraft"] .bubble .file .clip{color:inherit}
[data-theme="starcraft"] .bubble .file .clip::before{color:inherit}
[data-theme="starcraft"] .bubble.sys{background:rgba(5,20,31,.9);color:#8fb7c9;border-color:#28556c}
[data-theme="starcraft"] .bubble .message-avatar{background:#287b9e;color:#e8faff;border-color:#7fd1eb}
[data-theme="starcraft"] .bubble.me .message-avatar{background:#f0c94e;color:#172631;border-color:#ffe897}
[data-theme="starcraft"] .reaction-trigger,
[data-theme="starcraft"] .message-reaction,
[data-theme="starcraft"] .reaction-picker,
[data-theme="starcraft"] .reaction-emoji{background:#0d3046;border-color:#397d9d;color:#d7f3ff}
[data-theme="starcraft"] .modal .box,
[data-theme="starcraft"] .lightbox .shot{background:#0b2638;border-color:#62a8c5 #02080d #02080d #62a8c5}
[data-theme="starcraft"] .modal h3,
[data-theme="starcraft"] .lightbox .shot-bar{background:linear-gradient(90deg,#14506e,#d0a934,#14506e);color:#07121d}
[data-theme="starcraft"] .auth{background:rgba(7,24,38,.95);border-color:#62a8c5 #02080d #02080d #62a8c5}
[data-theme="starcraft"] .brand{background:linear-gradient(90deg,#14506e,#d0a934,#14506e);color:#07121d}
[data-theme="starcraft"] .side,
[data-theme="starcraft"] .main,
[data-theme="starcraft"] .auth,
[data-theme="starcraft"] .modal .box,
[data-theme="starcraft"] .lightbox .shot{border-radius:10px;overflow:hidden}
[data-theme="starcraft"] button,
[data-theme="starcraft"] input,
[data-theme="starcraft"] select{border-radius:5px}
[data-theme="starcraft"] .item,
[data-theme="starcraft"] .bubble,
[data-theme="starcraft"] .chat-person,
[data-theme="starcraft"] .gal-item{border-radius:8px}
[data-theme="starcraft"] .bubble{border-left-width:3px}
[data-theme="starcraft"] .avatar,
[data-theme="starcraft"] .message-avatar,
[data-theme="starcraft"] .chat-person-avatar,
[data-theme="starcraft"] .tiny-avatar{border-radius:50%}
[data-theme="starcraft"] .reaction-trigger,
[data-theme="starcraft"] .reaction-emoji{border-radius:50%}

/* ---------------- skorka Protoss ---------------- */
[data-theme="protoss"] .app{gap:10px;padding:clamp(8px,1.5vw,20px)}
[data-theme="protoss"] .side,
[data-theme="protoss"] .main{background:rgba(10,15,35,.82);border-color:#7188bd #050713 #050713 #7188bd;box-shadow:0 0 0 1px #334875,inset 0 0 26px rgba(139,165,255,.14);border-radius:12px;overflow:hidden}
[data-theme="protoss"] .side-head,
[data-theme="protoss"] .top{background:linear-gradient(100deg,#27366e,#536da9 48%,#202c5e);color:#f5d77b;border-color:#b8caff;text-shadow:0 0 9px rgba(168,203,255,.7)}
[data-theme="protoss"] .side-head .who span{color:#d1e3ff;opacity:.9}
[data-theme="protoss"] .list,
[data-theme="protoss"] .feed{background:rgba(8,15,36,.68);box-shadow:inset 0 0 24px rgba(104,143,230,.14)}
[data-theme="protoss"] .item,
[data-theme="protoss"] .bubble,
[data-theme="protoss"] .new-chat,
[data-theme="protoss"] .composer,
[data-theme="protoss"] .progress,
[data-theme="protoss"] .chat-people{background:rgba(24,34,68,.9);border-color:#6e87bd #050713 #050713 #6e87bd;box-shadow:0 0 0 1px #334875}
[data-theme="protoss"] .item,
[data-theme="protoss"] .bubble,
[data-theme="protoss"] .chat-person,
[data-theme="protoss"] .gal-item{border-radius:9px}
[data-theme="protoss"] button,
[data-theme="protoss"] input,
[data-theme="protoss"] select{background:linear-gradient(#304883,#17264f);color:#edf3ff;border-color:#9bb4e8 #050713 #050713 #9bb4e8;box-shadow:0 0 0 1px #40517f;border-radius:6px}
[data-theme="protoss"] select option{background:#17264f;color:#edf3ff}
[data-theme="protoss"] select option:checked{background:#e2bd58;color:#10162b}
[data-theme="protoss"] button:hover,
[data-theme="protoss"] button.primary,
[data-theme="protoss"] .item:hover{background:linear-gradient(#e2bd58,#a9822e);color:#11162a}
[data-theme="protoss"] .item.on{background:linear-gradient(100deg,#354f91,#1c2c5d);border-left-color:#f0cf68}
[data-theme="protoss"] .avatar{background:linear-gradient(135deg,#f0d16e,#6e8bd0);color:#10162b;border-color:#d8e6ff #050713 #050713 #d8e6ff;border-radius:50%}
[data-theme="protoss"] .pill,
[data-theme="protoss"] .badge{background:#405b99;color:#eff5ff;border-color:#a4bff1}
[data-theme="protoss"] .bubble{background:linear-gradient(135deg,rgba(45,65,119,.97),rgba(19,30,68,.98));color:#f0f5ff;border-color:#91ace4 #070b1d #070b1d #91ace4;box-shadow:0 0 0 1px #405b99,inset 0 0 18px rgba(147,184,255,.12)}
[data-theme="protoss"] .bubble.me{background:linear-gradient(135deg,#e2bd58,#ad842c);color:#11182b;border-color:#ffe291 #564014 #564014 #ffe291;box-shadow:0 0 0 1px #826524,inset 0 0 18px rgba(255,232,145,.2)}
[data-theme="protoss"] .bubble .from{color:#c4dcff}
[data-theme="protoss"] .bubble.me .from{color:#28344b;opacity:.82}
[data-theme="protoss"] .bubble .time{color:#b5c9ed}
[data-theme="protoss"] .bubble.me .time{color:#354044}
[data-theme="protoss"] .message-reply{background:rgba(224,235,255,.92);border-left-color:#637fbd;color:#102a4c}
[data-theme="protoss"] .bubble.me .message-reply{background:rgba(239,228,176,.92);border-left-color:#9a7425;color:#102a4c}
[data-theme="protoss"] .bubble.me .message-reply:hover{background:#a9822e;color:#fff8dc}
[data-theme="protoss"] .message-reply-action{background:#334c79;color:#f1d77b;border-color:#9ab5e4;opacity:.9}
[data-theme="protoss"] .bubble a{color:#b9eaff}
[data-theme="protoss"] .bubble.me a{color:#1b3151}
[data-theme="protoss"] .reaction-trigger,
[data-theme="protoss"] .message-reaction,
[data-theme="protoss"] .reaction-picker,
[data-theme="protoss"] .reaction-emoji{background:#1c3268;border-color:#7898d1;color:#edf4ff}
[data-theme="protoss"] .modal .box,
[data-theme="protoss"] .lightbox .shot{background:#17264f;border-color:#9bb4e8 #050713 #050713 #9bb4e8;border-radius:12px;overflow:hidden}
[data-theme="protoss"] .modal h3,
[data-theme="protoss"] .lightbox .shot-bar{background:linear-gradient(100deg,#344c91,#e2bd58,#344c91);color:#11162a}
[data-theme="protoss"] .auth{background:rgba(15,24,53,.95);border-color:#9bb4e8 #050713 #050713 #9bb4e8;border-radius:12px}
[data-theme="protoss"] .brand{background:linear-gradient(100deg,#344c91,#e2bd58,#344c91);color:#11162a}
[data-theme="protoss"] .message-avatar,
[data-theme="protoss"] .chat-person-avatar,
[data-theme="protoss"] .tiny-avatar{border-radius:50%;background:linear-gradient(135deg,#f0d16e,#6e8bd0);color:#10162b;border-color:#d8e6ff #050713 #050713 #d8e6ff}
[data-theme="protoss"] .poll-card{background:rgba(224,235,255,.9);border-left-color:#637fbd}
[data-theme="protoss"] .poll-question,[data-theme="protoss"] .poll-content{color:#102a4c}
[data-theme="protoss"] .poll-status{color:#315577}
[data-theme="protoss"] .poll-option{background:#202b4d;color:#d0d8e8;border-color:#7188bd #080d1d #080d1d #7188bd}

/* ---------------- modal ---------------- */
.modal{position:fixed;inset:0;background:var(--veil);display:grid;place-items:center;z-index:20;padding:20px;overflow:hidden}
.modal .box{
  background:var(--panel);padding:20px;width:100%;max-width:400px;min-height:0;max-height:calc(100dvh - 40px);overflow:hidden;overscroll-behavior:contain;display:flex;flex-direction:column;
  border:2px solid;border-color:var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light);
  box-shadow:0 0 0 1px var(--line), 0 8px 0 rgba(0,0,0,.15);
}
.modal-scroll{min-height:0;flex:1 1 auto;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding-right:2px}
.modal .row{flex:0 0 auto}
.modal h3{font-family:var(--hud);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#000;
  margin:-20px -20px 14px;padding:8px 10px;background:var(--accent);border-bottom:2px solid var(--edge-dark)}
.modal .sub{margin:0 0 12px}
.modal .row{display:flex;gap:8px;margin-top:14px}
.modal .row button{flex:1}
.modal .field .check{margin-bottom:8px}
.danger{margin-top:16px;padding:12px;background:var(--card);border-left:4px solid var(--accent-active);
  box-shadow:0 0 0 1px var(--line)}
.danger .sub{margin:0 0 10px}
.danger button{width:100%;background:var(--accent-active)}
.danger button:hover{background:var(--accent-hover)}
.avatar-editor{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.avatar-editor input{width:auto;flex:1;min-width:180px}
.settings-tabs{margin-bottom:14px}
#settingsProfile> .field input{margin-bottom:8px}

@media (max-width: 980px){
  .app{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:100dvh}
  .side{min-height:220px}
  .main{min-height:45vh}
  .feed{padding:12px}
  .bubble{max-width:88%}
  .modal .box{max-width:min(92vw, 420px);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);padding:16px}
  .modal .box.wide{max-width:min(92vw, 520px)}
}

@media (max-width: 760px){
  body:has(#appView:not(.hidden)){overflow:hidden}
  .app{display:block;padding:0;gap:0;width:100%;height:100dvh;overflow:hidden}
  .side{
    position:fixed;left:0;top:0;bottom:0;width:min(82vw, 320px);z-index:50;
    transform:translateX(-104%);transition:transform .2s ease;
    box-shadow:8px 0 0 rgba(0,0,0,.12);
    border-right:2px solid var(--edge-dark);
  }
  .side.open{transform:translateX(0)}
  .main{display:flex;width:100%;height:100%;min-height:0;overflow:hidden}
  .drawer-backdrop{
    position:fixed;inset:0;background:var(--veil);opacity:0;pointer-events:none;
    transition:opacity .2s ease;z-index:49;
  }
  .drawer-backdrop.show{opacity:1;pointer-events:auto}
  #btnBack{display:inline-flex !important}
  .top{padding:8px 10px}
  .top .spacer{display:none}
}

@media (max-width: 640px){
  .app{padding:0;gap:0}
  .side-head .who span{display:none}
  .side-head .who .status-indicator{display:block}
  .top{flex-wrap:wrap;padding:8px}
  .top .spacer{display:none}
  .top button[data-mobile-icon]{width:32px;height:32px;padding:4px;font-size:0;letter-spacing:0}
  .top button[data-mobile-icon]::before{content:attr(data-mobile-icon);font-family:'Material Symbols Outlined';font-size:18px;line-height:1;font-feature-settings:'liga'}
  .top .pill[data-mobile-icon]{width:32px;height:32px;padding:5px;display:grid;place-items:center;font-size:0;letter-spacing:0}
  .top .pill[data-mobile-icon]::before{content:attr(data-mobile-icon);font-family:'Material Symbols Outlined';font-size:18px;line-height:1;color:var(--text);font-feature-settings:'liga'}
  .composer{flex-wrap:wrap}
  .new-message-toast{right:12px;bottom:88px}
  .modal{padding:12px}
  .modal .row{display:flex;flex-wrap:wrap;gap:8px}
  .row button{flex:1 1 100%}
  .gal-list{max-height:46vh}
  .chat-people{min-height:44px;padding:5px 8px}
  .chat-person{padding-right:6px}
  .gal-item{grid-template-columns:auto auto minmax(0,1fr);padding:8px 6px}
  .gal-item .meta{grid-column:2 / -1}
  .gal-item button{grid-column:2 / -1;width:100%;justify-self:stretch}
  .gal-item img,.gal-item .icon-box{width:36px;height:36px}
  #peopleList .gal-item{grid-template-columns:auto minmax(0,1fr) auto auto auto}
  #peopleList .gal-item button.people-action{width:34px;height:34px;padding:4px;font-size:0;letter-spacing:0;display:grid;place-items:center}
  #peopleList .gal-item button.people-action::before{content:attr(data-mobile-icon);font-family:'Material Symbols Outlined';font-size:17px;line-height:1;font-feature-settings:'liga'}
  #galList .gal-item{grid-template-columns:auto auto minmax(0,1fr) auto auto}
  #galList .gal-item button.media-action{width:34px;height:34px;padding:4px;font-size:0;letter-spacing:0;display:grid;place-items:center}
  #galList .gal-item button.media-action::before{content:attr(data-mobile-icon);font-family:'Material Symbols Outlined';font-size:17px;line-height:1;font-feature-settings:'liga'}
}