/* TOPCHIK LIQUID GLASS 3.8 — presentation-only layer.
   No auth, database, chat or messaging logic is changed.
   Strong glass depth, refracted highlights, lavender fluorescence. */

:root {
  --glass-stroke: rgba(226, 210, 255, .30);
  --glass-stroke-bright: rgba(244, 233, 255, .65);
  --glass-glow: rgba(155, 94, 255, .42);
  --glass-soft: rgba(211, 177, 255, .10);
  --glass-shadow: 0 16px 45px rgba(7, 3, 32, .34),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 1px 0 0 rgba(255,255,255,.075);
}

/* Underlying light sources make the translucent surfaces actually read as glass. */
html,body { background:#090719; }
body {
  background:
    radial-gradient(ellipse 44% 56% at 4% 6%, rgba(102,42,227,.29), transparent 76%),
    radial-gradient(ellipse 42% 58% at 98% 91%, rgba(75,48,223,.28), transparent 78%),
    linear-gradient(155deg,#0b081b 0%,#080815 58%,#111028 100%);
}
.ambient-one {background:rgba(126,63,249,.54);opacity:.55}
.ambient-two {background:rgba(69,78,235,.47);opacity:.48}

/* Polished enclosing sheet */
.app-shell {
  background:linear-gradient(145deg, rgba(36,28,69,.86),rgba(10,11,30,.92) 48%,rgba(29,21,53,.87));
  border:1px solid rgba(208,185,255,.29);
  box-shadow:0 0 0 1px rgba(255,255,255,.055), 0 38px 108px rgba(0,0,0,.62), 0 0 80px rgba(110,66,225,.10),
    inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(34px) saturate(135%);
  backdrop-filter:blur(34px) saturate(135%);
}
.app-shell:before {
  box-shadow:inset 0 1px rgba(255,255,255,.26);
  background:linear-gradient(115deg,rgba(255,255,255,.045),transparent 28%,transparent 75%,rgba(153,110,255,.035));
}

/* Frosted panes – preserve existing layout & responsive measurements */
.rail {
  background:linear-gradient(175deg,rgba(34,22,66,.76),rgba(12,10,29,.70) 66%,rgba(42,29,86,.54));
  border-right:1px solid rgba(228,208,255,.20);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.055), 7px 0 26px rgba(7,3,24,.15);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  backdrop-filter:blur(24px) saturate(150%);
}
.side {
  background:linear-gradient(151deg,rgba(60,42,90,.79),rgba(24,21,48,.84) 36%,rgba(23,19,49,.78) 88%);
  border-right:1px solid rgba(229,204,255,.19);
  box-shadow:inset 1px 0 rgba(255,255,255,.08),11px 0 25px rgba(9,5,28,.14);
  -webkit-backdrop-filter:blur(26px) saturate(145%);
  backdrop-filter:blur(26px) saturate(145%);
}
.detail {
  background:linear-gradient(155deg,rgba(65,44,98,.69),rgba(24,19,51,.88));
  border-left:1px solid rgba(222,202,255,.23);
  box-shadow:inset 1px 0 rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(25px) saturate(145%);
  backdrop-filter:blur(25px) saturate(145%);
}
.main {
  background:
    radial-gradient(ellipse 66% 66% at 75% 78%,rgba(195,75,214,.50),transparent 73%),
    radial-gradient(ellipse 84% 77% at 52% 20%,rgba(100,51,215,.90),transparent 80%),
    radial-gradient(ellipse 45% 66% at 5% 52%,rgba(63,47,167,.45),transparent 85%),
    #261c69;
}
.main:before {opacity:.34}
.chat-head {
  background:linear-gradient(135deg,rgba(255,255,255,.095),rgba(45,25,119,.27) 58%,rgba(255,255,255,.045));
  border-bottom:1px solid rgba(240,224,255,.26);
  box-shadow:inset 0 1px rgba(255,255,255,.15),0 12px 38px rgba(21,12,68,.16);
  -webkit-backdrop-filter:blur(30px) saturate(165%);
  backdrop-filter:blur(30px) saturate(165%);
}

/* Buttons: transparent lavender optical layer, broad highlight across top,
   darker lower edge for the sense of liquid depth. */
.primary,.ghost,.round-btn,.head-mini,.attach-btn,.send-btn,.rail-item,.switch {
  position:relative;
  isolation:isolate;
  border:1px solid rgba(227,204,255,.42);
  color:#faf5ff;
  background:linear-gradient(159deg,rgba(255,255,255,.23) 0%,rgba(199,152,255,.16) 28%,rgba(124,74,229,.27) 67%,rgba(51,32,112,.32) 100%);
  box-shadow:0 8px 23px rgba(17,7,55,.19),
    inset 0 1.5px 1px rgba(255,255,255,.54),
    inset 0 -3px 9px rgba(33,15,75,.24),
    inset 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(18px) saturate(185%);
  backdrop-filter:blur(18px) saturate(185%);
  transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .28s ease,background .28s ease,
    border-color .28s ease,filter .28s ease;
}
.primary:before,.ghost:before,.round-btn:before,.head-mini:before,
.attach-btn:before,.send-btn:before,.rail-item:before,.switch:before {
  content:"";position:absolute;pointer-events:none;z-index:-1;inset:1px 2px auto;
  height:46%;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.21),rgba(255,255,255,.045) 58%,transparent);
  opacity:.8;
}
.primary:not(:disabled):hover,.ghost:not(:disabled):hover,.round-btn:not(:disabled):hover,
.head-mini:not(:disabled):hover,.attach-btn:not(:disabled):hover,.send-btn:not(:disabled):hover,
.rail-item:not(:disabled):hover,.switch:not(:disabled):hover {
  transform:translateY(-2px);
  border-color:rgba(255,245,255,.80);
  background:linear-gradient(150deg,rgba(255,255,255,.30),rgba(194,135,255,.31) 48%,rgba(121,71,224,.40));
  box-shadow:0 10px 32px rgba(135,72,254,.29),0 0 20px rgba(159,96,255,.19),
    inset 0 1px 1px rgba(255,255,255,.70),inset 0 -3px 10px rgba(52,28,122,.26);
}
.primary:active,.ghost:active,.round-btn:active,.head-mini:active,
.attach-btn:active,.send-btn:active,.rail-item:active,.switch:active {
  transform:translateY(0) scale(.975);
  box-shadow:inset 0 2px 9px rgba(27,10,80,.37),0 2px 9px rgba(91,44,189,.19);
}
.primary:focus-visible,.ghost:focus-visible,.round-btn:focus-visible,.head-mini:focus-visible,
.attach-btn:focus-visible,.send-btn:focus-visible,.rail-item:focus-visible {
  outline:2px solid #e8c8ff;outline-offset:3px;
}
button:disabled {filter:grayscale(.2);box-shadow:none}
.primary {
  background:linear-gradient(165deg,rgba(233,192,255,.64),rgba(174,122,255,.62) 38%,rgba(112,69,233,.74));
  border-color:rgba(240,217,255,.72);
  box-shadow:0 10px 30px rgba(141,81,255,.36),0 0 20px rgba(157,94,255,.18),
    inset 0 1.5px 1px rgba(255,255,255,.71),inset 0 -4px 10px rgba(79,35,160,.25);
  font-weight:800;text-shadow:0 1px 5px rgba(70,29,150,.22);
}
.primary:not(:disabled):hover {
  background:linear-gradient(158deg,rgba(241,205,255,.85),rgba(190,130,255,.79) 40%,rgba(126,72,239,.85));
}
.send-btn {
  background:linear-gradient(135deg,rgba(254,204,255,.89),rgba(202,119,255,.82) 58%,rgba(136,74,243,.80));
  color:#26133e;
  border-color:rgba(255,240,255,.8);
  box-shadow:0 6px 23px rgba(196,109,247,.40),inset 0 1px 1px rgba(255,255,255,.86);
}
.send-btn:hover {color:#27113b}
.round-btn {border-radius:13px}
.rail-item.active {
  background:linear-gradient(140deg,rgba(229,194,255,.28),rgba(139,87,255,.28));
  border-color:rgba(230,195,255,.70);color:#f8e9ff;
  box-shadow:0 0 25px rgba(163,96,255,.30),inset 0 1px rgba(255,255,255,.4);
}
.rail-item.active:before {
  display:block;left:2px;right:2px;top:2px;bottom:auto;
  height:45%;width:auto;border-radius:11px;background:linear-gradient(180deg,rgba(255,255,255,.20),transparent);
  box-shadow:none;
}

/* Main landing form and dialog panels */
.auth-card,.modal {
  position:relative;
  background:linear-gradient(145deg,rgba(119,104,168,.26),rgba(44,38,82,.45) 40%,rgba(28,25,59,.67));
  border:1px solid rgba(232,217,255,.43);
  border-radius:25px;
  box-shadow:0 35px 92px rgba(5,5,20,.41),0 0 38px rgba(154,114,255,.09),
    inset 0 1.5px 0 rgba(255,255,255,.30),
    inset 1px 0 rgba(255,255,255,.11),inset 0 -1px 0 rgba(170,137,248,.11);
  -webkit-backdrop-filter:blur(30px) saturate(150%);
  backdrop-filter:blur(30px) saturate(150%);
}
.auth-card:before,.modal:before {
  content:"";position:absolute;z-index:0;inset:1px 1px auto;
  height:72px;pointer-events:none;border-radius:24px 24px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,0));
}
.auth-card>* , .modal>* {position:relative;z-index:1}
.auth-card h2 {text-shadow:0 3px 18px rgba(201,145,255,.13)}
.auth-brand-marker,.auth-features span {
  background:linear-gradient(145deg,rgba(252,243,255,.12),rgba(138,91,243,.12));
  border:1px solid rgba(215,184,255,.36);
  box-shadow:inset 0 1px rgba(255,255,255,.20),0 8px 22px rgba(24,8,67,.16);
  -webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);
}
.auth-cover {
  background:
    radial-gradient(ellipse 55% 64% at 7% 25%,rgba(111,68,214,.39),transparent 74%),
    radial-gradient(ellipse 58% 65% at 92% 92%,rgba(85,51,184,.30),transparent 74%),
    #0b0a21;
}
.auth-cover:after {
  content:"";position:absolute;pointer-events:none;inset:0;
  background:linear-gradient(120deg,transparent 34%,rgba(200,145,255,.025) 55%,transparent 69%);
}
.auth-brand .topchik-wordmark {
  filter:drop-shadow(0 0 16px rgba(163,120,255,.35)) drop-shadow(0 6px 32px rgba(91,55,202,.23));
}

/* Form controls are made of dark sapphire translucent glass */
.field,.search-box,.composer {
  background:linear-gradient(145deg,rgba(195,163,255,.14),rgba(55,42,116,.21) 51%,rgba(26,23,68,.36));
  border:1px solid rgba(205,183,255,.36);
  color:#fdfaff;
  box-shadow:inset 0 1.5px rgba(255,255,255,.19),inset 0 -1px rgba(5,5,37,.24),
    0 8px 28px rgba(15,7,58,.13);
  -webkit-backdrop-filter:blur(18px) saturate(145%);backdrop-filter:blur(18px) saturate(145%);
  transition:background .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.field:hover,.search-box:hover,.composer:hover {
  border-color:rgba(226,200,255,.51);
  background:linear-gradient(145deg,rgba(214,180,255,.19),rgba(60,43,121,.29) 60%,rgba(25,22,68,.40));
}
.field:focus,.search-box:focus-within,.composer:focus-within {
  border-color:rgba(234,212,255,.9);
  background:linear-gradient(140deg,rgba(210,162,255,.19),rgba(66,49,133,.36));
  box-shadow:0 0 0 3px rgba(172,115,255,.16),0 0 26px rgba(148,94,255,.14),
    inset 0 1px rgba(255,255,255,.26);
}
.field::placeholder,.search-box input::placeholder,.composer textarea::placeholder {color:#baa9d4}
.composer {border-radius:20px}
.composer-wrap {
  background:linear-gradient(0deg,rgba(27,15,79,.46),transparent 100%);
}
#auth-form .field {min-height:46px}

/* Floating glass cards / message bubbles */
.chat-row {
  border-color:transparent;
  transition:transform .28s ease,background .28s,border-color .28s,box-shadow .28s;
}
.chat-row:hover {
  transform:translateX(2px);
  background:linear-gradient(120deg,rgba(221,193,255,.16),rgba(146,93,255,.10));
  border-color:rgba(234,207,255,.28);
  box-shadow:inset 0 1px rgba(255,255,255,.17),0 5px 18px rgba(0,0,0,.06);
}
.chat-row.selected {
  background:linear-gradient(130deg,rgba(226,192,255,.24),rgba(158,95,245,.19) 65%,rgba(86,43,172,.23));
  border-color:rgba(237,215,255,.42);
  box-shadow:0 7px 25px rgba(130,71,238,.16),
    inset 0 1px 0 rgba(255,255,255,.27),inset 0 -1px rgba(79,40,149,.16);
  -webkit-backdrop-filter:blur(17px);backdrop-filter:blur(17px);
}
.chat-row.selected:before {
  background:#e6b5ff;box-shadow:0 0 18px rgba(223,155,255,.88);
}
.msg-bubble {
  background:linear-gradient(142deg,rgba(193,153,255,.37),rgba(112,77,212,.50) 57%,rgba(92,56,177,.52));
  border:1px solid rgba(242,223,255,.39);
  color:#fff;
  box-shadow:0 12px 31px rgba(29,9,95,.18),inset 0 1.5px rgba(255,255,255,.28),
    inset 0 -1px rgba(64,28,122,.19);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
}
.msg-row.mine .msg-bubble {
  background:linear-gradient(142deg,rgba(252,200,255,.92),rgba(210,145,244,.87) 55%,rgba(174,122,235,.91));
  color:#2a1742;
  border-color:rgba(255,239,255,.62);
  box-shadow:0 12px 36px rgba(86,24,154,.21),inset 0 1.5px rgba(255,255,255,.64);
}
.side-bottom-panel,.profile-banner,.profile-hero,.user-card,.setting-card,
.nebula-share,.avatar-upload,.pending-chip,.status-pill {
  background:linear-gradient(155deg,rgba(237,214,255,.16),rgba(156,111,239,.13) 45%,rgba(38,29,77,.27));
  border:1px solid rgba(224,203,255,.30);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(19px) saturate(130%);
  backdrop-filter:blur(19px) saturate(130%);
}
.user-card,.setting-card,.nebula-share {
  transition:transform .26s ease,border-color .26s ease,box-shadow .26s ease,background .26s ease;
}
.user-card:hover,.nebula-share:hover {
  transform:translateY(-3px);
  border-color:rgba(236,217,255,.58);
  box-shadow:0 12px 29px rgba(60,32,134,.22),inset 0 1px rgba(255,255,255,.34);
}
.profile-hero,.profile-banner {
  background:radial-gradient(ellipse at 25% 10%,rgba(215,169,255,.27),transparent 70%),
    linear-gradient(150deg,rgba(126,85,227,.30),rgba(68,44,140,.36));
}
.nebula-share-icon,.side-bottom-icon {
  background:linear-gradient(140deg,rgba(232,203,255,.30),rgba(138,85,237,.18));
  border:1px solid rgba(228,198,255,.38);
  box-shadow:inset 0 1px rgba(255,255,255,.30),0 0 18px rgba(159,101,255,.13);
}
.profile-banner .banner-label {text-shadow:0 0 15px rgba(240,195,255,.5)}
.avatar {box-shadow:0 0 0 1px rgba(246,224,255,.37),0 6px 15px rgba(24,12,61,.3),
  inset 0 1px 0 rgba(255,255,255,.35)}
#toast-root .toast {
  background:linear-gradient(145deg,rgba(93,64,140,.94),rgba(43,35,81,.97));
  border:1px solid rgba(235,209,255,.49);
  box-shadow:0 16px 37px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(17px);backdrop-filter:blur(17px);
}
.modal-overlay {-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.linkish {color:#d8b8ff;text-shadow:0 0 13px rgba(174,110,255,.27)}
.linkish:hover {color:#fff;text-shadow:0 0 19px rgba(204,157,255,.66)}
.badge,.count-pill,.status-pill {
  background:linear-gradient(145deg,rgba(224,200,255,.20),rgba(151,101,234,.13));
  border:1px solid rgba(221,190,255,.35);
  color:#e9d7ff;
  box-shadow:inset 0 1px rgba(255,255,255,.21);
}
.signal-dot {box-shadow:0 0 0 3px rgba(103,255,203,.11),0 0 17px rgba(103,255,203,.9)}

/* Less motion on touch screens, respect users requesting reduced effects. */
@media (hover:none) {
  .chat-row:hover,.user-card:hover,.nebula-share:hover,
  .primary:hover,.ghost:hover,.round-btn:hover,.head-mini:hover,
  .attach-btn:hover,.send-btn:hover,.rail-item:hover {transform:none}
}
@media(max-width:780px) {
  .app-shell {border:0;border-radius:0;box-shadow:none;background:#100e29}
  .rail {background:linear-gradient(180deg,rgba(36,25,76,.96),rgba(20,16,47,.96))}
  .side {background:linear-gradient(155deg,rgba(53,37,91,.97),rgba(25,20,54,.98))}
  .detail {display:none}
  .chat-row.selected {-webkit-backdrop-filter:none;backdrop-filter:none}
  .main {background:
    radial-gradient(ellipse 85% 61% at 88% 85%,rgba(159,65,188,.59),transparent 73%),
    radial-gradient(ellipse 99% 89% at 45% 10%,rgba(90,54,192,.96),transparent 83%),#271b64}
  .auth-cover {overflow-y:auto}
  .auth-card {padding:24px}
}
@media(prefers-reduced-motion:reduce) {
  .primary,.ghost,.round-btn,.head-mini,.attach-btn,.send-btn,.rail-item,
  .chat-row,.user-card,.nebula-share {transition:none!important}
}