/* ChatVerse v3 — nowy układ, komponenty i identyfikacja wizualna, niezależnie od v2. */
:root {
  --bg:#090b15; --shell:#0b1020; --panel:#0c1222; --panel-deep:#0c1120;
  --rail:#080c19; --surface:#20253c; --surface-hover:#2b3152;
  --border:rgba(182,182,255,.12); --border-strong:rgba(182,182,255,.21);
  --purple:#9e72ff; --purple-light:#c5a8ff; --cyan:#4bdfff;
  --green:#36dea6; --text:#f4f3ff; --muted:#a6accb; --muted-soft:#777f9e;
}
html {color-scheme:dark}
body {
  background:#080b16;
  background-image:
    radial-gradient(ellipse 41% 64% at 0 0,rgba(105,64,223,.23),transparent),
    radial-gradient(ellipse 39% 44% at 100% 100%,rgba(17,185,205,.11),transparent);
}
body::before{opacity:.12;background-size:86px 86px}
.ambient{opacity:.12}
.app-shell {
  width:calc(100% - 20px);height:calc(100dvh - 20px);max-width:1880px;
  background:#0b1122;
  border-radius:21px;
  border-color:rgba(180,164,255,.22);
  box-shadow:0 28px 90px rgba(0,0,0,.6),0 0 52px rgba(116,72,243,.16);
}
.global-header {
  flex:0 0 72px;padding:0 22px 0 23px;gap:18px;
  background:linear-gradient(96deg,#16162d 0%,#12182d 50%,#0e1b2d 100%);
  border-bottom:1px solid rgba(191,171,255,.17);
}
.brand {gap:12px}
.brand-icon {width:43px;height:43px;color:#b793ff;filter:drop-shadow(0 0 12px rgba(160,98,255,.55))}
.brand-icon svg{width:37px;height:37px}
.brand-words strong{font-size:24px;letter-spacing:-1.2px}
.brand-words small{font-size:9px;letter-spacing:1.4px;color:#b6b1d7}
.header-center {
  flex:1;justify-content:center;gap:16px;min-width:0;
  color:#b4bcda;
}
.header-quick-search {
  display:flex;align-items:center;gap:11px;
  width:clamp(225px,31vw,445px);height:40px;
  padding:0 12px 0 14px;min-width:0;
  text-align:left;border-radius:11px;
  color:#aeb8d6;font-size:12px;
  background:rgba(6,11,30,.46);
  border:1px solid rgba(177,183,242,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.header-quick-search:hover {background:rgba(38,37,70,.9);border-color:rgba(174,139,255,.37)}
.header-quick-search svg{width:16px;height:16px;color:#b6a4fc;flex-shrink:0}
.header-quick-search .search-label{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-quick-search kbd {
  flex-shrink:0;display:inline-block;
  padding:3px 6px;border-radius:5px;
  background:rgba(181,179,238,.09);color:#a8afd0;
  font-family:inherit;font-size:10px;line-height:1.3;border:1px solid rgba(181,179,238,.15);
}
.header-presence {display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:11px;color:#b2bbd9}
.header-presence .live-pulse {width:7px;height:7px}
.header-actions{gap:11px}
.preview-pill {letter-spacing:1.3px;font-size:9px;padding:7px 11px;color:#93f0e4;background:rgba(31,207,172,.075);border-color:rgba(32,206,176,.27)}
.header-profile {
  display:grid;place-items:center;width:37px;height:37px;
  border-radius:12px;border:1px solid rgba(229,171,255,.35);
  color:#fff;font-size:13px;font-weight:800;
  background:linear-gradient(135deg,#fa8c95,#9455f6);
  box-shadow:0 4px 16px rgba(156,78,198,.22);
}
.secondary-button.sign-in-button{border-radius:10px;background:rgba(131,92,245,.16);border-color:rgba(174,140,251,.33)}
.app-grid{grid-template-columns:78px 274px minmax(0,1fr) 237px;gap:0;background:#0b1020}
.server-rail {
  gap:14px;padding:19px 12px;
  background:linear-gradient(180deg,#11112a 0%,#10162a 39%,#090f1e 100%);
  border-right:1px solid rgba(190,170,255,.15);
}
.server-item{
  width:51px;height:51px;flex-basis:51px;border-radius:18px;
  background:#252644;color:#c4c3e0;box-shadow:0 2px 9px rgba(0,0,0,.12);
}
.server-item:hover{border-radius:16px;transform:translateY(-1px) scale(1.04)}
.server-item.active{
  background:linear-gradient(135deg,#bb67ff,#7048ff 58%,#2977ad);
  border-color:rgba(230,201,255,.62);
  box-shadow:0 0 0 4px rgba(176,96,251,.18),0 9px 24px rgba(137,78,247,.35);
}
.server-item.active::before {content:"";position:absolute;left:-12px;width:4px;height:35px;background:#bf84ff;border-radius:0 5px 5px 0}
.server-item{position:relative}
.server-add{color:#6bdef2;background:rgba(27,172,196,.1);border-color:rgba(55,215,242,.4)}
.rail-divider{width:30px}
.rail-bottom-label{border-radius:13px;border-color:rgba(175,153,245,.19);background:rgba(175,153,245,.04)}
.channel-sidebar{
  background:#15162a;
  border-right:1px solid rgba(177,164,255,.13);
}
.server-heading{
  min-height:67px;padding:0 20px;font-size:13px;
  background:rgba(255,255,255,.02);
  border-bottom:1px solid rgba(173,171,239,.11);
}
.tiny-server-mark{border-radius:11px;background:linear-gradient(135deg,#9e60f6,#714edb);color:white}
.sidebar-scroll{padding:20px 13px}
.sidebar-announcement{
  position:relative;overflow:hidden;isolation:isolate;display:block;
  padding:19px 15px 16px;border-radius:16px;
  min-height:176px;margin-bottom:26px;
  background:linear-gradient(135deg,#6737be 1%,#4736a6 45%,#1d5485 100%);
  border:1px solid rgba(201,169,255,.36);
  box-shadow:0 13px 34px rgba(63,38,147,.28),inset 0 1px rgba(255,255,255,.09);
}
.sidebar-announcement::before{
  content:"";position:absolute;z-index:-1;right:-41px;top:-53px;
  width:176px;height:176px;border-radius:50%;border:22px solid rgba(255,255,255,.10);
  transform:rotate(25deg);box-shadow:0 0 0 17px rgba(255,255,255,.045),0 0 0 37px rgba(255,255,255,.025);
}
.sidebar-announcement::after{
  content:"✦";position:absolute;right:24px;top:32px;color:#e5d3ff;font-size:29px;
  filter:drop-shadow(0 0 12px #ab78ff);
}
.sidebar-announcement .announcement-emoji{display:none}
.sidebar-announcement .announcement-badge{
  display:inline-flex;padding:5px 8px;
  border:1px solid rgba(255,255,255,.19);border-radius:6px;
  background:rgba(255,255,255,.1);
  color:#eee2ff;font-size:9px;font-weight:900;letter-spacing:1.7px;margin-bottom:14px;
}
.sidebar-announcement b{font-size:18px;line-height:1.16;letter-spacing:-.5px;max-width:190px}
.sidebar-announcement small{font-size:11px;color:#dfd9fb;line-height:1.45;margin-top:8px}
.sidebar-announcement .announcement-action{
  margin-top:14px;border:0;background:#f0eaff;
  border-radius:9px;color:#3e2c84;padding:8px 12px;font-size:11px;font-weight:800;
  box-shadow:0 4px 10px rgba(34,14,92,.25);
}
.sidebar-announcement .announcement-action:hover{background:white}
.sidebar-section-label,.list-caption{margin-left:11px;margin-right:8px;color:#9296be;font-size:9.5px;letter-spacing:1.4px}
.channel-list {gap:5px}
.channel,.side-shortcut{color:#abaacb;min-height:42px;font-size:13px;border-radius:10px;padding:9px 11px}
.channel svg,.side-shortcut svg{color:#928db4}
.channel:hover,.side-shortcut:hover{color:white;background:rgba(171,148,247,.10)}
.channel.active{
  background:linear-gradient(90deg,rgba(151,101,251,.27),rgba(113,86,213,.13));
  border:1px solid rgba(177,125,255,.27);
  box-shadow:inset 3px 0 #be8aff,0 3px 14px rgba(92,58,188,.10);
}
.channel.active svg {color:#dac1ff}
.channel-unread{width:7px;height:7px}
.sidebar-section-spaced{margin-top:25px}
.sidebar-tip{
  position:relative;overflow:hidden;margin-top:26px;padding:14px 14px 15px;
  background:linear-gradient(120deg,rgba(31,182,208,.13),rgba(157,93,236,.13)),#191f37;
  border:1px solid rgba(87,191,220,.23);border-radius:13px;
}
.sidebar-tip .tip-star{font-size:18px;color:#6ce9f2;margin-bottom:2px}
.sidebar-tip b{font-size:12px}
.sidebar-tip p{font-size:10px;line-height:1.42;margin-top:5px}
.account-bar{
  background:#1d1b37;padding:14px 16px;
  border-top:1px solid rgba(170,154,244,.20);
}
.account-bar:hover{background:#272444}
.account-bar .avatar{box-shadow:0 0 0 3px rgba(171,113,251,.13)}
.main-panel {background:#0e1224;position:relative}
.panel-header{
  height:67px;min-height:67px;padding:0 23px;
  background:linear-gradient(100deg,#191b33,#141a30);
  border-bottom:1px solid rgba(190,176,243,.13);
}
.panel-title>svg{width:23px;height:23px;color:#b49bff}
.panel-title h1{font-size:16px}
.panel-title>span:not(.vertical-line){color:#abb3d1}
.panel-actions .icon-button{border:1px solid rgba(170,168,222,.12);background:rgba(173,178,241,.05);border-radius:10px}
.panel-actions .icon-button:hover{background:rgba(143,91,241,.18);border-color:rgba(181,134,255,.34)}
.community-banner{
  position:relative;isolation:isolate;flex:0 0 144px;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:15px;
  padding:20px 27px 18px;
  background:linear-gradient(111deg,#452a94 0%,#333b9d 48%,#14517a 100%);
  border-bottom:1px solid rgba(169,155,255,.27);
  box-shadow:inset 0 -17px 22px rgba(14,16,53,.11);
}
.community-banner::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(circle at 71% 38%,rgba(180,121,255,.39),transparent 30%),
             radial-gradient(circle at 89% 55%,rgba(43,224,238,.23),transparent 35%);
}
.community-banner::after {
  content:"";position:absolute;z-index:-1;width:320px;height:320px;right:10%;top:-142px;
  border:1px solid rgba(238,217,255,.20);border-radius:50%;
  box-shadow:0 0 0 30px rgba(205,204,255,.035),0 0 0 64px rgba(205,204,255,.028),0 0 0 108px rgba(205,204,255,.025);
}
.banner-main{z-index:1;min-width:0}
.banner-eyebrow{display:flex;align-items:center;gap:8px;color:#d6dcff;font-size:9px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase}
.banner-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:#66f0cb;box-shadow:0 0 9px #66f0cb}
.community-banner h2{margin:7px 0 2px;font-size:clamp(17px,2vw,26px);line-height:1.15;letter-spacing:-.8px;color:#fff}
.community-banner p{margin:0;color:#e2ddff;font-size:11.5px;max-width:500px}
.banner-links{display:flex;gap:8px;margin-top:13px}
.banner-links button{
  border:1px solid rgba(242,237,255,.28);border-radius:8px;
  background:rgba(255,255,255,.14);color:white;
  padding:7px 12px;font-size:11px;font-weight:750;transition:background .2s,transform .2s;
}
.banner-links button:hover{background:rgba(255,255,255,.27);transform:translateY(-1px)}
.banner-deco{align-self:stretch;position:relative;flex:0 0 160px;pointer-events:none}
.banner-orb {
  position:absolute;top:-6px;right:14px;width:111px;height:111px;border-radius:33px;
  transform:rotate(-18deg);
  background:linear-gradient(130deg,rgba(255,255,255,.32),rgba(181,153,255,.16) 45%,rgba(80,217,246,.26));
  box-shadow:0 18px 33px rgba(20,13,87,.24),inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter:blur(4px);
}
.banner-orb::after {content:"✦";position:absolute;top:25px;left:34px;color:white;font-size:56px;transform:rotate(18deg);text-shadow:0 4px 15px #895bff}
.banner-small-orb {
  position:absolute;right:4px;bottom:1px;width:33px;height:33px;border-radius:11px;
  background:linear-gradient(130deg,#55e0eb,#7b76ff);transform:rotate(12deg);
  box-shadow:0 7px 18px rgba(24,18,85,.2);
}
.chat-search{background:#171a34;border-bottom-color:rgba(192,161,255,.17)}
.message-scroll{
  padding:12px 0 12px;
  background:radial-gradient(ellipse 90% 60% at 100% 0,rgba(69,61,140,.10),transparent 70%),#0d1323;
}
.channel-welcome{margin:0 22px 12px}
.channel-welcome .welcome-icon{width:38px;height:38px;margin-bottom:7px}
.channel-welcome h2{font-size:18px}
.channel-welcome p{font-size:11px}
.day-divider{margin:2px 25px 10px;font-size:9px;color:#7e8bb4}
.messages{padding:0 14px 7px}
.message{
  padding:7px 12px;gap:13px;margin:1px 0 2px;
  border-radius:12px;border:1px solid transparent;
  transition:background .18s,border-color .18s,transform .18s;
}
.message:hover{
  background:linear-gradient(90deg,rgba(154,117,250,.10),rgba(62,140,200,.035));
  border-color:rgba(177,145,255,.10);
  transform:translateX(2px);
}
.message > .avatar{width:38px;height:38px;flex-basis:38px;border:2px solid rgba(244,229,255,.23)}
.message-meta strong{font-size:13px}
.message-meta time{font-size:10px}
.message-main p{font-size:12.5px;line-height:1.5;color:#e5e8fc}
.role-chip{border-radius:5px}
.message-attachment{
  width:min(100%,325px);margin:7px 0 6px;
  border-radius:12px;border-color:rgba(197,148,247,.36);
  box-shadow:0 11px 25px rgba(12,12,35,.33);
}
.reaction{
  border-radius:7px;background:#222540;border-color:rgba(189,168,253,.2);padding:3px 8px;
}
.reaction[aria-pressed="true"]{background:rgba(150,96,254,.33);border-color:rgba(197,169,255,.65)}
.composer-wrap{
  padding:11px 18px 12px;
  background:linear-gradient(180deg,#11172a,#151a31);
  border-top:1px solid rgba(190,176,243,.14);
}
.composer {
  min-height:51px;border-radius:13px;
  background:#262843;border:1px solid rgba(190,175,253,.27);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 6px 22px rgba(0,0,0,.22);
}
.composer-plus{background:#ae92ff;color:#27165b;font-size:21px}
.composer input{font-size:12.5px}
.send-button{
  background:linear-gradient(140deg,#b675ff,#7159f8);
  border-radius:9px;
  box-shadow:0 4px 16px rgba(130,74,251,.35);
}
.composer-help {font-size:9px}
.members-panel{
  padding:18px 12px;
  background:linear-gradient(180deg,#17172f,#12172b);
  border-left:1px solid rgba(192,169,255,.15);
}
.members-overview {
  position:relative;overflow:hidden;padding:15px 13px;margin-bottom:21px;
  border:1px solid rgba(191,151,255,.23);
  background:linear-gradient(135deg,rgba(138,89,239,.18),rgba(47,158,197,.09));
  border-radius:15px;
}
.members-overview::after{content:"✧";position:absolute;right:9px;top:-8px;font-size:70px;color:rgba(213,194,255,.08)}
.members-overview .online-label{color:#97e4d5;font-size:9px;font-weight:850;letter-spacing:1.3px}
.members-overview strong{display:block;font-size:17px;letter-spacing:-.5px;margin:5px 0 2px}
.members-overview p{font-size:10px;color:#acb3cf;line-height:1.4;margin:0 0 11px}
.overview-faces{display:flex;align-items:center;padding-left:6px}
.overview-faces .avatar{width:30px;height:30px;flex-basis:30px;font-size:11px;margin-left:-6px;border:2px solid #242242}
.overview-faces>span:last-child{margin-left:9px;color:#b0b8d7;font-size:10px}
.members-title{margin:0 4px 15px;color:#9d9ec4}
.member-group{margin-bottom:15px}
.member-group h2{font-size:9px;color:#929dbe;margin-bottom:5px}
.member{
  padding:5px 7px;margin:2px 0;min-height:42px;border-radius:9px;
}
.member:hover{background:rgba(165,129,240,.1)}
.member b{font-size:11.5px}
.member small{font-size:9.5px}
.member .avatar{box-shadow:0 3px 12px rgba(0,0,0,.17)}
.member-footer{position:static;margin:12px 0 0;border-radius:10px;padding:10px;background:rgba(40,43,74,.64);border-color:rgba(182,145,247,.18)}
.friends-list{background:#17172d}
.friends-header{background:linear-gradient(100deg,#191936,#11233b)}
.friend-tabs{background:#15182f}
.friend-tab.active{background:rgba(154,110,250,.27);border-color:rgba(196,158,255,.33);color:#f1e4ff}
.dm-panel{background:#10152a}
.dm-header{background:#1a1b36}
.bubble.outgoing{background:linear-gradient(125deg,#9f6afa,#7259e9);color:white}
.bubble.incoming{background:#282d48}
.modal-card{background:linear-gradient(150deg,#252440,#1c2037);border-color:rgba(192,155,255,.29)}
@media(max-width:1350px){
  .app-grid{grid-template-columns:67px 226px minmax(0,1fr) 194px}
  .server-rail{padding:18px 8px}
  .server-item{width:47px;height:47px;flex-basis:47px}
  .server-item.active::before{left:-8px}
  .sidebar-scroll{padding:13px 9px}
  .sidebar-announcement{min-height:160px;padding:15px 11px}
  .sidebar-announcement b{font-size:16px}
  .members-panel{padding:12px 9px}
  .banner-deco{flex-basis:110px}
  .banner-orb{right:5px;width:85px;height:85px;border-radius:24px}
  .banner-orb::after{top:17px;left:25px;font-size:45px}
  .header-presence{display:none}
}
@media(max-width:1050px){
  .app-grid{grid-template-columns:67px 238px minmax(0,1fr)}
  .members-panel{display:none}
  .app-shell.show-members .members-panel{
    display:block;position:absolute;top:0;bottom:0;right:0;width:240px;z-index:7;
    box-shadow:-20px 0 65px rgba(0,0,0,.6);
  }
  .header-quick-search{width:clamp(190px,29vw,340px)}
  .banner-deco{display:none}
}
@media(max-width:760px){
  .app-shell{width:calc(100% - 12px);height:calc(100dvh - 12px)}
  .global-header{padding:0 14px}
  .header-center{justify-content:flex-end}
  .header-quick-search{width:39px;height:39px;justify-content:center;padding:0;flex-shrink:0}
  .header-quick-search .search-label,.header-quick-search kbd {display:none}
  .app-grid{grid-template-columns:61px minmax(0,1fr)}
  .server-rail{padding-inline:6px}
  .server-item{width:47px;height:47px;flex-basis:47px}
  .channel-sidebar{left:61px}
  .community-banner{flex-basis:128px;padding:17px 20px}
  .community-banner h2{font-size:22px}
  .community-banner p{font-size:11px}
  .banner-links{margin-top:10px}
}
@media(max-width:560px){
  .app-shell{width:100%;height:100dvh;border:0;border-radius:0}
  .global-header{flex-basis:62px}
  .brand-words strong{font-size:20px}
  .brand-words small{font-size:8px}
  .header-actions .header-profile{width:34px;height:34px;border-radius:10px}
  .header-quick-search{width:34px;height:34px}
  .app-grid{grid-template-columns:minmax(0,1fr)}
  .server-rail{display:none}
  .channel-sidebar{left:0;width:min(285px,84vw)}
  .panel-header{height:57px;min-height:57px;padding:0 14px}
  .community-banner{flex-basis:126px;padding:16px 16px 13px}
  .community-banner h2{font-size:19px;letter-spacing:-.4px}
  .community-banner p{font-size:10px}
  .banner-eyebrow{font-size:8px;letter-spacing:1px}
  .banner-links button{padding:6px 9px;font-size:10px}
  .message{padding:7px 5px}
  .message >.avatar{width:34px;height:34px;flex-basis:34px}
  .message-main p{font-size:11.8px}
  .members-panel{display:none}
  .composer-wrap{padding:8px 12px}
  .composer{min-height:45px}
}
@media(max-height:700px) and (min-width:561px) {
  .community-banner{flex-basis:103px;padding:13px 25px}
  .community-banner h2{font-size:20px;margin:4px 0 1px}
  .banner-links{margin-top:8px}
  .banner-orb{width:80px;height:80px}
  .message-scroll{padding-top:4px}
}
@media(prefers-reduced-motion:reduce){
  .message,.banner-links button{transition:none}
  .message:hover,.banner-links button:hover{transform:none}
}
/* Przepisanie wyjątków z poprzednich warstw CSS tylko dla nowego layoutu. */
@media(min-width:1251px){
  .app-shell.members-hidden .app-grid{grid-template-columns:78px 274px minmax(0,1fr)}
}
@media(min-width:1051px) and (max-width:1350px){
  .app-shell.members-hidden .app-grid{grid-template-columns:67px 226px minmax(0,1fr)}
}