/* ChatVerse • Visual refinement v2. Warstwa nad styles.css, bez zmian logiki. */
:root {
  --shell:#0c1120; --panel:#111728; --panel-deep:#0e1422;
  --rail:#090e1b; --surface:#1c253a; --surface-hover:#27324a;
  --border:rgba(158,177,226,.105); --border-strong:rgba(163,181,238,.18);
  --text:#eff3ff; --muted:#99a7c3; --muted-soft:#7182a4;
  --purple:#9265fb; --purple-light:#b59dff; --cyan:#39d6e8;
}
html { background:#090c15; }
body {
  background:radial-gradient(ellipse 45% 70% at 2% 7%,rgba(113,72,235,.19),transparent 80%),
             radial-gradient(ellipse 34% 55% at 96% 88%,rgba(24,157,188,.1),transparent 78%),#090c15;
  -webkit-font-smoothing:antialiased;
}
body::before {opacity:.1; background-size:70px 70px}
body::after {opacity:.12}
.app-shell {
  width:min(1840px,calc(100% - 24px));
  height:calc(100dvh - 24px);
  min-height:0;
  border-radius:15px;
  border:1px solid rgba(170,176,235,.19);
  box-shadow:0 18px 66px rgba(0,0,0,.54),0 0 45px rgba(126,92,230,.08);
}
.global-header {
  flex-basis:66px;
  padding:0 22px;
  background:linear-gradient(100deg,#11162a 0%,#0e1425 70%,#111b2e 100%);
  border-bottom-color:rgba(167,185,233,.14);
}
.brand-icon {filter:drop-shadow(0 0 14px rgba(126,87,252,.35))}
.brand-words strong {font-size:22px;letter-spacing:-.7px}
.brand-words small {font-size:10px;letter-spacing:.75px}
.header-center {font-size:12px}
.header-center .live-pulse {width:7px;height:7px}
.preview-pill {font-size:9px;padding:6px 10px;border-color:rgba(57,214,232,.19)}
.secondary-button {background:linear-gradient(125deg,rgba(142,99,250,.24),rgba(111,73,220,.16)); border-color:rgba(163,135,245,.28)}
.app-grid {grid-template-columns:69px 252px minmax(0,1fr) 224px}
.server-rail {
  padding:16px 9px; gap:10px;
  background:linear-gradient(#0b1223,#0a0f1d);
}
.server-item {width:46px;height:46px;flex-basis:46px;background:#1b243b;border-radius:15px}
.server-item.active {
  border-color:rgba(194,171,255,.72);
  background:linear-gradient(135deg,#8053ec 15%,#377daf);
  box-shadow:0 0 0 3px rgba(139,92,246,.105),0 6px 22px rgba(113,76,249,.23);
}
.server-add {background:rgba(39,193,218,.07);border-style:solid}
.channel-sidebar {background:#131b2c}
.server-heading {
  min-height:62px; padding:0 17px;font-size:13px;
  background:rgba(255,255,255,.014);
}
.tiny-server-mark {background:#342957;color:#cebcff}
.sidebar-scroll {padding:17px 11px;scrollbar-width:thin;scrollbar-color:#33405b transparent}
.sidebar-announcement {
  margin-bottom:23px;padding:14px 11px;border-color:rgba(155,129,243,.18);
  background:linear-gradient(120deg,rgba(119,80,218,.20),rgba(55,101,160,.09));
}
.sidebar-announcement b {font-size:12px}
.sidebar-announcement small {font-size:10.5px}
.sidebar-section-label,.list-caption {font-size:9.5px;letter-spacing:1.25px;color:#8b9cbc}
.sidebar-section-spaced {margin-top:23px}
.channel,.side-shortcut {min-height:42px;padding:9px 11px;font-size:13px;letter-spacing:.06px;border-radius:9px}
.channel.active {
  background:linear-gradient(90deg,rgba(141,99,248,.24),rgba(141,99,248,.1));
  border-color:rgba(171,139,248,.2);
  box-shadow:inset 3px 0 0 #aa82ff;
}
.channel:hover,.side-shortcut:hover {background:rgba(133,148,198,.12)}
.sidebar-tip {
  padding:14px 15px;margin-top:26px;
  background:linear-gradient(140deg,rgba(112,76,195,.13),rgba(34,211,238,.045)),#182237;
}
.sidebar-tip .tip-star {margin-bottom:5px;font-size:20px}
.sidebar-tip p {font-size:10.5px}
.account-bar {background:#11192a;padding:11px 14px}
.main-panel {background:#0e1422}
.panel-header {
  height:62px;min-height:62px;
  background:linear-gradient(105deg,#151c2e,#131b2c);
  padding:0 23px;
}
.panel-title h1 {font-size:15px;letter-spacing:.08px}
.panel-title > span:not(.vertical-line) {font-size:12px}
.panel-actions .icon-button:hover {background:rgba(153,123,243,.14);color:#d3bfff}
.message-scroll {
  background:radial-gradient(circle at 57% 23%,rgba(77,91,151,.08),transparent 46%),
             linear-gradient(180deg,#0f1423,#0e1422);
  padding:21px 0 19px;
  scrollbar-color:#34425e transparent;
}
.channel-welcome {margin:0 28px 20px}
.welcome-icon {
  width:46px;height:46px;border-radius:14px;margin-bottom:10px;
  background:linear-gradient(140deg,#8a5cf5,#288aa7);
  box-shadow:0 8px 23px rgba(86,70,201,.15);
}
.welcome-icon svg {width:24px;height:24px}
.channel-welcome h2 {font-size:23px;letter-spacing:-.55px}
.channel-welcome p {font-size:12.5px}
.day-divider {margin:8px 26px 17px;color:#8393b4;font-size:9px;letter-spacing:1px}
.messages {padding:0 15px 10px}
.message {
  gap:13px;padding:10px 12px;margin:0 0 3px;
  border:1px solid transparent;border-radius:10px;
  transition:background-color .18s,border-color .18s;
}
.message:hover {background:rgba(159,173,221,.055);border-color:rgba(178,193,248,.055)}
.message > .avatar {width:38px;height:38px;flex:0 0 38px}
.message-meta {gap:8px;margin-bottom:3px}
.message-meta strong {font-size:13px;letter-spacing:.04px}
.message-meta time {font-size:10.5px;color:#7f91b0}
.role-chip {font-size:8px;letter-spacing:.25px;padding:2px 7px;border-radius:5px}
.message-main p {font-size:13px;line-height:1.57;color:#e0e8f9}
.message-attachment {
  margin:11px 0 10px;width:min(100%,405px);
  border-radius:12px;border-color:rgba(147,151,235,.24);
}
.reaction {background:#1d273c;border-color:rgba(142,165,221,.17);color:#c9d5ed}
.reaction:hover {transform:translateY(-1px)}
.composer-wrap {
  padding:12px 22px 13px;
  background:linear-gradient(180deg,#111827,#101725);
  border-top:1px solid rgba(164,181,229,.08);
}
.composer {
  min-height:50px;border-radius:12px;
  background:#222d43;border-color:rgba(173,190,239,.17);
  box-shadow:0 7px 22px rgba(0,0,0,.12);
}
.composer-plus {background:#a6b7d8;color:#141c2e}
.composer input,.dm-compose input {font-size:13px}
.send-button {background:linear-gradient(135deg,#9b6cff,#7553ed);box-shadow:0 3px 13px rgba(137,94,251,.28)}
.composer-help {font-size:9.5px;color:#7d8cac}
.members-panel {
  padding:20px 12px 23px;
  background:linear-gradient(180deg,#151c2e,#121a2b);
  scrollbar-color:#34415e transparent;
}
.members-title {margin:0 0 19px;font-size:9.5px}
.member-group {margin-bottom:15px}
.member-group h2 {margin:0 0 9px 3px;font-size:9px;color:#9caac6}
.member {min-height:42px;margin:2px 0;border-radius:8px;padding:3px 4px}
.member:hover {background:rgba(157,175,224,.065)}
.member b {font-size:12px}
.member small {font-size:10px}
.member-footer {
  position:static;margin-top:15px;
  padding:11px 10px;background:#1c2840;
  border-color:rgba(162,179,227,.11);
}
.member-footer b {font-size:10px}
.friend-tabs {background:#111828}
.friend-tab.active {background:rgba(137,95,247,.18);border-color:rgba(155,122,248,.25)}
.friends-list {background:#141d2f}
.friend-contact.selected {background:rgba(136,95,247,.16)}
.modal-card {box-shadow:0 24px 110px rgba(0,0,0,.65),0 0 45px rgba(139,92,246,.16)}
@media (max-width:1250px) {
  .app-grid {grid-template-columns:64px 220px minmax(0,1fr) 190px}
  .members-panel {padding:18px 10px}
}
@media (max-width:1050px) {
  .app-grid {grid-template-columns:64px 229px minmax(0,1fr)}
}
@media (max-width:760px) {
  .app-shell {width:calc(100% - 12px);height:calc(100dvh - 12px)}
  .app-grid {grid-template-columns:62px minmax(0,1fr)}
  .channel-sidebar {left:62px}
  .message-scroll {padding-top:16px}
  .messages {padding:0 10px 6px}
  .message-main p {font-size:12.5px}
}
@media (max-width:560px) {
  .app-shell {width:100%;height:100dvh;border:0;border-radius:0}
  .global-header {flex-basis:62px}
  .app-grid {grid-template-columns:minmax(0,1fr)}
  .channel-sidebar {left:0}
  .panel-header {height:57px;min-height:57px}
  .message {padding:8px 5px;gap:9px}
  .message-main p {font-size:12px;line-height:1.55}
  .message-meta strong {font-size:12px}
  .message > .avatar {width:34px;height:34px;flex:0 0 34px}
  .channel-welcome h2 {font-size:19px}
  .composer-wrap {padding:9px 12px 11px}
  .composer {min-height:47px}
}
@media (prefers-reduced-motion:reduce) {.message,.reaction {transition:none}}

/* V2.1: pełny wątek #ogólny na typowym ekranie 1600×900. */
@media (min-width: 761px) and (min-height: 740px) {
  .message-scroll {padding-top:12px;padding-bottom:7px}
  .message {padding-top:6px;padding-bottom:6px;margin-bottom:0}
  .message-meta {margin-bottom:1px}
  .message-main p {line-height:1.47}
  .message-attachment {width:min(100%,342px);margin:7px 0 6px}
  .day-divider {margin:0 26px 11px}
}