:root {
  --accent: #4FA3F7;
  --out1: #5BAEE5;
  --out2: #4FA3F7;
  --wall1: #0E1621;
  --wall2: #0E1621;
  --bg: #17212B;
  --fg: #FFFFFF;
  --muted: #A8B5C2;
  --muted2: #7A8794;
  --line: #3D4E61;
  --line2: #2F3F52;
  --glass: rgba(23, 33, 43, 0.85);
  --glass2: #2A3A4D;
  --glass3: rgba(255, 255, 255, 0.05);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.15);
  --shadow: 0 4px 12px rgba(0,0,0,0.2);
  --shadow2: 0 8px 24px rgba(0,0,0,0.3);
  --radius: 10px;
  --radius2: 12px;
  --radius3: 16px;
  --tap: rgba(255, 255, 255, 0.08);
  --tap2: rgba(255, 255, 255, 0.12);
  --t-snap: 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-base: 250ms cubic-bezier(0.25, 1, 0.5, 1);
  --t-slow: 450ms cubic-bezier(0.16, 1, 0.3, 1);
  --ep-bg: #1C1C1E;
  --ep-divider: #3A3A3C;
  --ep-icon: #A8A8AD;
}
html[data-theme="light"] {
  --accent: #0066CC;
  --out1: #0066CC;
  --out2: #005BB5;
  --bg: #FFFFFF;
  --fg: #000000;
  --muted: #595959;
  --muted2: #8C8C8C;
  --line: #D4D4D4;
  --line2: #C1C1C1;
  --glass: rgba(255, 255, 255, 0.95);
  --glass2: #F0F0F0;
  --glass3: rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 2px rgba(114,114,114,0.15);
  --shadow: 0 4px 12px rgba(114,114,114,0.15);
  --shadow2: 0 8px 24px rgba(114,114,114,0.2);
  --tap: rgba(0, 0, 0, 0.05);
  --tap2: rgba(0, 0, 0, 0.08);
  --wall1: #D4DBDF;
  --wall2: #D4DBDF;
  --ep-bg: #F0F0F0;
  --ep-divider: #D0D0D0;
  --ep-icon: #757575;
}
html[data-theme="light"] .bubble.me {
  background: linear-gradient(135deg, var(--out2), var(--out1));
  color: #FFFFFF;
}
html[data-theme="light"] .bubble.me .body {
  color: #FFFFFF;
}
html[data-theme="light"] .bubble.me .meta {
  color: rgba(255,255,255,0.85);
}
html.theme-telegram {
  --accent:#2196F3;
  --out1:#0D47A1;
  --out2:#1565C0;
  --wall1:#0E1621;
  --wall2:#0A1017;
}
html.theme-sunset {
  --accent:#E53935;
  --out1:#8C1C00;
  --out2:#B71C1C;
  --wall1:#1A080D;
  --wall2:#120509;
}
html.theme-mint {
  --accent:#00897B;
  --out1:#005A4A;
  --out2:#00796B;
  --wall1:#051A16;
  --wall2:#02100D;
}
html.theme-violet {
  --accent:#7C4DFF;
  --out1:#45148C;
  --out2:#6200EA;
  --wall1:#120821;
  --wall2:#090411;
}
html.theme-sky {
  --accent:#039BE5;
  --out1:#004D7A;
  --out2:#01579B;
  --wall1:linear-gradient(135deg, #0F1721 0%, #122D44 100%);
  --wall2:#122D44;
}
html.theme-lavender {
  --accent:#9C27B0;
  --out1:#60007A;
  --out2:#7B1FA2;
  --wall1:linear-gradient(135deg, #140B1F, #1F0C29);
  --wall2:#1F0C29;
}
html.theme-midnight {
  --accent:#546E7A;
  --out1:#1A2A36;
  --out2:#263238;
  --wall1:linear-gradient(135deg, #0A1014, #15212B, #1C2D39);
  --wall2:#0A1014;
}
html[data-theme="light"].theme-telegram { --accent:#0088CC; --out1:#26A7DE; --out2:#0088CC; --wall1:#DBE7EE; --wall2:#DBE7EE; }
html[data-theme="light"].theme-sunset   { --accent:#FF5252; --out1:#FF7070; --out2:#FF5252; --wall1:#F9E2E5; --wall2:#F9E2E5; }
html[data-theme="light"].theme-mint     { --accent:#00BFA5; --out1:#14D9BD; --out2:#00BFA5; --wall1:#DAE6E4; --wall2:#DAE6E4; }
html[data-theme="light"].theme-violet   { --accent:#7C4DFF; --out1:#9D7AFF; --out2:#7C4DFF; --wall1:#E6E2EE; --wall2:#E6E2EE; }
html[data-theme="light"].theme-sky      { --accent:#00B0FF; --out1:#33C2FF; --out2:#00B0FF; --wall1:#D9E9F2; --wall2:#D9E9F2; }
html[data-theme="light"].theme-lavender { --accent:#E040FB; --out1:#E870FC; --out2:#E040FB; --wall1:#EFE2F0; --wall2:#EFE2F0; }
html[data-theme="light"].theme-midnight { --accent:#607D8B; --out1:#78909C; --out2:#607D8B; --wall1:#E2E7EA; --wall2:#E2E7EA; }
a.msg-link {
  color: var(--out2);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
  transition: color var(--t-snap);
}
a.msg-link:visited { color: var(--out2); }
a.msg-link:hover, a.msg-link:focus { color: var(--accent); }
.sw-default { background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04)); }
.sw-telegram { background: linear-gradient(135deg, #42A5F5, #1976D2); }
.sw-sunset   { background: linear-gradient(135deg, #FF7043, #E64A19); }
.sw-mint     { background: linear-gradient(135deg, #4DB6AC, #00897B); }
.sw-violet   { background: linear-gradient(135deg, #9575CD, #673AB7); }
.sw-sky      { background: linear-gradient(135deg, #4FC3F7, #0288D1); }
.sw-lavender { background: linear-gradient(135deg, #CE93D8, #8E24AA); }
.sw-midnight { background: linear-gradient(135deg, #78909C, #455A64); }
.avatar {
  position: relative;
  box-shadow: 
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 6px 12px rgba(255, 255, 255, 0.2),
    inset 0 -8px 16px rgba(0, 0, 0, 0.3),
    0 10px 20px rgba(0, 0, 0, 0.3);
  transform-style: preserve-3d;
  background-size: 400% 400% !important;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}
.avatar canvas.vanta-canvas {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: -1 !important;
  border-radius: inherit;
}
.avatar > *:not(canvas) {
  position: relative;
  z-index: 2;
}
.avatar:hover, 
.chatitem:hover .avatar,
.chatitem.active .avatar {
  animation-play-state: running;
}
.avatar::before {
  content: "";
  position: absolute;
  top: -150%; left: -150%; width: 300%; height: 300%;
  background: linear-gradient(135deg, rgba(255,255,255,0) 42%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 58%);
  transform: rotate(45deg) translate3d(0, -100%, 0);
  animation: sheen 6s infinite cubic-bezier(0.4, 0, 0.2, 1);
  animation-play-state: paused;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}
.avatar:hover::before,
.chatitem:hover .avatar::before,
.chatitem.active .avatar::before {
  animation-play-state: running;
}
.avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 25% 15%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 40%);
  mix-blend-mode: overlay;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
  z-index: 1; 
  pointer-events: none;
}
.avatar.vanta-active { background: transparent !important; }
.avatar.avc-0 { background: #3D8FFF; }
.avatar.avc-1 { background: #FFA033; }
.avatar.avc-2 { background: #33ADA3; }
.avatar.avc-3 { background: #FF8533; }
.avatar.avc-4 { background: #FF3D52; }
.avatar.avc-5 { background: #A33D9D; }
.avatar.avc-6 { background: #3DADC7; }
.avatar.avc-7 { background: #33AD85; }
.avatar.avc-8 { background: #FFB599; }
.avatar.avc-9 { background: #F05C6B; }
.avatar.avc-10 { background: #6B94F5; }
.avatar.avc-11 { background: #5C6B8A; }
[data-theme="light"] .chatitem:hover {
  background: rgba(0,0,0,0.03);
}
@media (min-width: 769px) {
  [data-theme="light"] .chatitem.active {
    background: var(--accent);
  }
  [data-theme="light"] .chatitem.active .chatrow1 .title {
    color: #fff;
  }
}
html[data-theme="light"] .bubble.me .body { color: #ffffff; }
html[data-theme="light"] .bubble.me .meta { color: rgba(255, 255, 255, 0.85); }
html[data-theme="light"] .modal { background: rgba(15,23,42,.4); }
* {
  transition: border-color var(--t-base), color var(--t-base);
}
.bubble {
  background: linear-gradient(135deg, var(--glass2), var(--bg));
  box-shadow: var(--shadow-sm);
}
.bubble.me {
  background: linear-gradient(135deg, var(--out2), var(--out1));
  box-shadow: var(--shadow-sm);
}
.chatitem {
  transition: transform var(--t-base), background-color var(--t-base) !important;
  will-change: transform;
}
.chatitem:hover {
  transform: translate3d(0, -1px, 0) scale(1.01);
  background: var(--glass2);
}
@keyframes floatGradient {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}
@keyframes sheen {
  0% { transform: rotate(45deg) translate3d(0, -100%, 0); }
  20%, 100% { transform: rotate(45deg) translate3d(0, 100%, 0); }
}