:root{
  --bg: #0b0c10;
  --panel: #11131a;
  --panel2:#0f1117;
  --card:#141824;
  --text:#e8eaf1;
  --muted:#a5acbd;
  --faint: rgba(255,255,255,.11);
  --border: rgba(255,255,255,.16);
  --accent:#7c3aed;
  --accent2:#22c55e;
  --danger:#ef4444;
  --warn:#f59e0b;
  --warn-soft: rgba(245,158,11,.16);
  --warn-border: rgba(245,158,11,.34);
  --warn-glow: rgba(245,158,11,.28);
  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --radius: 20px;
  --radius2: 28px;
  --icon-filter: brightness(0) saturate(100%) invert(88%) sepia(11%) saturate(368%) hue-rotate(183deg) brightness(91%) contrast(88%);
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --ui-accent: #8b5cf6;
  --ui-accent-soft: rgba(139,92,246,.24);
  --ui-accent-border: rgba(139,92,246,.38);
  --glass-panel: linear-gradient(180deg, rgba(21,27,43,.62), rgba(15,19,33,.52));
  --glass-panel-strong: linear-gradient(180deg, rgba(20,25,39,.66), rgba(16,22,35,.52));
  --glass-border: rgba(255,255,255,.18);
  --bubble-in-bg: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  --bubble-out-bg: linear-gradient(135deg, rgba(124,58,237,.42), rgba(124,58,237,.22));
  --bubble-out-border: rgba(124,58,237,.28);
  --file-bg: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  --file-bg-hover: rgba(255,255,255,.12);
  --audio-in-bg: linear-gradient(135deg, rgba(124,58,237,.22), rgba(34,197,94,.16));
  --audio-out-bg: linear-gradient(135deg, rgba(124,58,237,.34), rgba(34,197,94,.18));
  --chat-bg: linear-gradient(180deg, rgba(18,23,38,.44), rgba(13,17,29,.32)), radial-gradient(1200px 720px at 22% 12%, rgba(124,58,237,.16), transparent 50%), radial-gradient(1400px 900px at 72% 8%, rgba(34,197,94,.10), transparent 48%);
}
html[data-theme="light"]{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --panel2:#ffffff;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#56607a;
  --faint: rgba(15,23,42,.08);
  --border: rgba(15,23,42,.13);
  --shadow: 0 20px 50px rgba(15,23,42,.12);
  --accent:#7c3aed;
  --accent2:#16a34a;
  --danger:#ef4444;
  --warn:#d97706;
  --warn-soft: rgba(217,119,6,.14);
  --warn-border: rgba(217,119,6,.26);
  --warn-glow: rgba(217,119,6,.18);
  --icon-filter: brightness(0) saturate(100%) invert(14%) sepia(16%) saturate(1031%) hue-rotate(184deg) brightness(95%) contrast(90%);
  --ui-accent: #7c3aed;
  --ui-accent-soft: rgba(124,58,237,.22);
  --ui-accent-border: rgba(124,58,237,.34);
  --glass-panel: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
  --glass-panel-strong: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.70));
  --glass-border: rgba(15,23,42,.18);
  --bubble-in-bg: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
  --bubble-out-bg: linear-gradient(135deg, rgba(124,58,237,.24), rgba(124,58,237,.12));
  --bubble-out-border: rgba(124,58,237,.22);
  --file-bg: linear-gradient(135deg, rgba(15,23,42,.06), rgba(15,23,42,.03));
  --file-bg-hover: rgba(15,23,42,.1);
  --audio-in-bg: linear-gradient(135deg, rgba(124,58,237,.20), rgba(34,197,94,.14));
  --audio-out-bg: linear-gradient(135deg, rgba(124,58,237,.24), rgba(34,197,94,.15));
  --chat-bg: linear-gradient(180deg, rgba(246,247,251,.86), rgba(246,247,251,.70));
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: radial-gradient(1400px 900px at 15% 10%, rgba(124,58,237,.22), transparent 55%),
              radial-gradient(1200px 800px at 90% 25%, rgba(34,197,94,.14), transparent 55%),
              var(--bg);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow:hidden;
}
/* Scrollbars */
*::-webkit-scrollbar{
  width: 12px;
  height: 12px;
}
*::-webkit-scrollbar-track{
  background: transparent;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(124,58,237,.85), rgba(99,102,241,.78));
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
*::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(124,58,237,.95), rgba(79,70,229,.88));
}
img{ display:block; }
a{ color:inherit; }

.app{
  height:100%;
  min-height: 0;
  min-width: 0;
  display:flex;
}

@keyframes fade-up{
  from{ opacity:0; transform: translateY(10px) scale(.99); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes fade-up-out{
  from{ opacity:1; transform: translateY(0) scale(1); }
  to{ opacity:0; transform: translateY(10px) scale(.99); }
}
@keyframes fade-in{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes slide-in-right{
  from{ opacity:0; transform: translateX(14px); }
  to{ opacity:1; transform: translateX(0); }
}
@keyframes slide-out-right{
  from{ opacity:1; transform: translateX(0); }
  to{ opacity:0; transform: translateX(18px); }
}
@keyframes profile-attention-pulse{
  0%, 100%{
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(245,158,11,.32);
  }
  55%{
    transform: scale(1.08);
    box-shadow: 0 0 0 9px rgba(245,158,11,0);
  }
}
@keyframes username-suggestion-in{
  from{
    opacity: 0;
    transform: translateY(10px) scale(.94);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes msg-row-enter-bottom{
  0%{
    opacity: 0;
    transform: translate3d(0, 20px, 0) scale(.992);
    filter: saturate(.92);
  }
  72%{
    opacity: 1;
    transform: translate3d(0, -1px, 0) scale(1.001);
    filter: saturate(1.02);
  }
  100%{
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: saturate(1);
  }
}
@keyframes msg-row-delete-drop{
  0%{
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    filter: saturate(1);
  }
  22%{
    opacity: 1;
    transform: translate3d(0, -2px, 0) rotate(var(--delete-row-tilt-jolt, -.8deg)) scale(var(--delete-row-scale-jolt, 1.006));
    filter: saturate(var(--delete-row-sat-jolt, 1.07));
  }
  58%{
    opacity: .96;
    transform: translate3d(0, var(--delete-row-drop-mid-y, 14px), 0) rotate(var(--delete-row-tilt-mid, -3.2deg)) scale(var(--delete-row-scale-mid, .986));
    filter: saturate(var(--delete-row-sat-mid, 1.12));
  }
  100%{
    opacity: 0;
    transform: translate3d(0, var(--delete-row-drop-y, 44px), 0) rotate(var(--delete-row-tilt-end, -8.4deg)) scale(var(--delete-row-scale-end, .93));
    filter: saturate(var(--delete-row-sat-end, 1.18)) blur(var(--delete-row-blur, .6px));
  }
}
@keyframes msg-row-delete-drop-me{
  0%{
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    filter: saturate(1);
  }
  22%{
    opacity: 1;
    transform: translate3d(0, -2px, 0) rotate(var(--delete-row-tilt-jolt, .8deg)) scale(var(--delete-row-scale-jolt, 1.006));
    filter: saturate(var(--delete-row-sat-jolt, 1.07));
  }
  58%{
    opacity: .96;
    transform: translate3d(0, var(--delete-row-drop-mid-y, 14px), 0) rotate(var(--delete-row-tilt-mid, 3.2deg)) scale(var(--delete-row-scale-mid, .986));
    filter: saturate(var(--delete-row-sat-mid, 1.12));
  }
  100%{
    opacity: 0;
    transform: translate3d(0, var(--delete-row-drop-y, 44px), 0) rotate(var(--delete-row-tilt-end, 8.4deg)) scale(var(--delete-row-scale-end, .93));
    filter: saturate(var(--delete-row-sat-end, 1.18)) blur(var(--delete-row-blur, .6px));
  }
}
@keyframes msg-bubble-delete-fracture{
  0%{
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
    filter: none;
  }
  30%{
    opacity: 1;
    transform: translate3d(var(--delete-bubble-shift-x-a, -1px), 0, 0) rotate(var(--delete-bubble-tilt-a, -1.2deg));
  }
  56%{
    opacity: .98;
    transform: translate3d(var(--delete-bubble-shift-x-b, 1px), var(--delete-bubble-shift-y-b, 2px), 0) rotate(var(--delete-bubble-tilt-b, .9deg));
  }
  100%{
    opacity: 0;
    transform: translate3d(0, var(--delete-bubble-drop-y, 18px), 0) rotate(var(--delete-bubble-tilt-end, -7deg)) scale(var(--delete-bubble-scale-end, .94));
    filter: blur(var(--delete-bubble-blur, .45px));
  }
}
@keyframes msg-bubble-delete-fracture-me{
  0%{
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
    filter: none;
  }
  30%{
    opacity: 1;
    transform: translate3d(var(--delete-bubble-shift-x-a, 1px), 0, 0) rotate(var(--delete-bubble-tilt-a, 1.2deg));
  }
  56%{
    opacity: .98;
    transform: translate3d(var(--delete-bubble-shift-x-b, -1px), var(--delete-bubble-shift-y-b, 2px), 0) rotate(var(--delete-bubble-tilt-b, -.9deg));
  }
  100%{
    opacity: 0;
    transform: translate3d(0, var(--delete-bubble-drop-y, 18px), 0) rotate(var(--delete-bubble-tilt-end, 7deg)) scale(var(--delete-bubble-scale-end, .94));
    filter: blur(var(--delete-bubble-blur, .45px));
  }
}
@keyframes msg-bubble-delete-shard-a{
  0%{
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  28%{
    opacity: .9;
  }
  100%{
    opacity: 0;
    transform: translate3d(var(--delete-shard-a-x, -24px), var(--delete-shard-a-y, 34px), 0) rotate(var(--delete-shard-a-rot, -22deg)) scale(var(--delete-shard-a-scale, .84));
  }
}
@keyframes msg-bubble-delete-shard-b{
  0%{
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  28%{
    opacity: .86;
  }
  100%{
    opacity: 0;
    transform: translate3d(var(--delete-shard-b-x, 24px), var(--delete-shard-b-y, 34px), 0) rotate(var(--delete-shard-b-rot, 24deg)) scale(var(--delete-shard-b-scale, .84));
  }
}
@keyframes msg-bubble-delete-content{
  0%{
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
  }
  100%{
    opacity: 0;
    transform: translate3d(0, var(--delete-content-drop-y, 10px), 0) scale(var(--delete-content-scale-end, .96));
    filter: blur(var(--delete-content-blur, .25px));
  }
}
@keyframes selection-bar-in{
  0%{ opacity: 0; transform: translateY(12px) scale(.98); filter: saturate(.9); }
  70%{ opacity: 1; transform: translateY(-1px) scale(1.01); filter: saturate(1.05); }
  100%{ opacity: 1; transform: translateY(0) scale(1); filter: saturate(1); }
}
@keyframes selection-chip-pop{
  0%{ transform: scale(.8); opacity: .6; }
  60%{ transform: scale(1.12); opacity: 1; }
  100%{ transform: scale(1); opacity: 1; }
}
@keyframes checks-seen-pop{
  0%{ transform: translateY(1px) scale(.8); opacity: .42; filter: drop-shadow(0 0 0 rgba(34,197,94,0)); }
  58%{ transform: translateY(-1px) scale(1.2); opacity: 1; filter: drop-shadow(0 0 8px rgba(34,197,94,.36)); }
  100%{ transform: translateY(-1px) scale(1); opacity: 1; filter: drop-shadow(0 0 0 rgba(34,197,94,0)); }
}
@keyframes chat-find-surface-in{
  0%{ opacity: 0; transform: translateY(-8px) scale(.985); filter: saturate(.9) blur(.2px); }
  70%{ opacity: 1; transform: translateY(0) scale(1.003); filter: saturate(1.04) blur(0); }
  100%{ opacity: 1; transform: translateY(0) scale(1); filter: saturate(1) blur(0); }
}
@keyframes chat-find-surface-out{
  0%{ opacity: 1; transform: translateY(0) scale(1); filter: saturate(1) blur(0); }
  100%{ opacity: 0; transform: translateY(-10px) scale(.986); filter: saturate(.9) blur(.3px); }
}
@keyframes chat-find-result-in{
  0%{ opacity: 0; transform: translateY(10px) scale(.986); }
  68%{ opacity: 1; transform: translateY(-1px) scale(1.002); }
  100%{ opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes chat-find-count-pulse{
  0%, 100%{ transform: translateY(0); opacity: .9; }
  45%{ transform: translateY(-1px); opacity: 1; }
}
@keyframes chat-find-active-glow{
  0%, 100%{ opacity: .55; }
  50%{ opacity: .9; }
}
@keyframes chat-find-skeleton-shimmer{
  from{ background-position: 200% 0; }
  to{ background-position: -160% 0; }
}
@keyframes chat-switch-content-in{
  0%{ opacity: .72; transform: translateY(7px) scale(.994); filter: saturate(.92) blur(.45px); }
  72%{ opacity: 1; transform: translateY(0) scale(1.004); filter: saturate(1.05) blur(0); }
  100%{ opacity: 1; transform: translateY(0) scale(1); filter: saturate(1) blur(0); }
}
@keyframes chat-date-chip-in{
  0%{ opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.94); }
  65%{ opacity: 1; transform: translateX(-50%) translateY(0) scale(1.03); }
  100%{ opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes chat-date-popover-in{
  0%{ opacity: 0; transform: translateY(-12px) scale(.965) rotateX(10deg); filter: blur(.4px) saturate(.9); }
  72%{ opacity: 1; transform: translateY(0) scale(1.012) rotateX(0deg); filter: blur(0) saturate(1.08); }
  100%{ opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); filter: blur(0) saturate(1); }
}
@keyframes chat-date-popover-out{
  0%{ opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); filter: blur(0) saturate(1); }
  100%{ opacity: 0; transform: translateY(-8px) scale(.98) rotateX(6deg); filter: blur(.5px) saturate(.9); }
}
@keyframes chat-date-grid-in{
  from{ opacity: .72; transform: translateY(5px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes chat-date-day-in{
  from{ opacity: 0; transform: translateY(5px) scale(.96); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

/* Auth */
.auth{
  flex:1; display:flex; align-items:center; justify-content:center;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px;
}
.auth-card{
  width: min(480px, 100%);
  background: linear-gradient(180deg, rgba(20,24,36,.72), rgba(12,16,26,.62));
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: 22px;
  backdrop-filter: blur(18px) saturate(1.15);
}
html[data-theme="light"] .auth-card{
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.58));
}
@media (max-width: 900px), (max-height: 800px){
  .auth{
    min-height: 100dvh;
    align-items: flex-start;
    justify-content: center;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 24px;
  }
  .auth-card{
    margin: 0 auto;
  }
}
.brand{ display:flex; gap:14px; align-items:center; margin-bottom: 18px; }
.brand-mark{
  width:44px; height:44px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(124,58,237,.25), rgba(34,197,94,.20));
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border);
}
.brand-mark img{ width:28px; height:28px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.35)); }
.brand-title{ font-weight: 740; font-size: 18px; letter-spacing: .2px; }
.brand-subtitle{ margin-top:2px; opacity:.8; font-size: 13px; color: var(--muted); }

.auth-tabs{
  --auth-tabs-glider-x: 0px;
  --auth-tabs-glider-y: 0px;
  --auth-tabs-glider-w: 0px;
  --auth-tabs-glider-h: 0px;
  position:relative;
  display:flex;
  gap:8px;
  background: var(--panel2);
  border:1px solid var(--border);
  padding:6px;
  border-radius: 14px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.auth-tabs-glider{
  position:absolute;
  top: 0;
  left: 0;
  height: var(--auth-tabs-glider-h);
  width: var(--auth-tabs-glider-w);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124,58,237,.30), rgba(124,58,237,.16));
  border: 1px solid rgba(124,58,237,.34);
  box-shadow:
    0 10px 26px rgba(124,58,237,.24),
    inset 0 1px 0 rgba(255,255,255,.24);
  transform: translate3d(var(--auth-tabs-glider-x), var(--auth-tabs-glider-y), 0);
  transition:
    transform .44s cubic-bezier(.23,.88,.22,1),
    width .36s cubic-bezier(.23,.88,.22,1),
    height .34s cubic-bezier(.23,.88,.22,1),
    opacity .22s ease;
  z-index: 0;
  pointer-events: none;
}
.auth-tabs.is-no-motion .auth-tabs-glider{
  transition: none;
}
.tab{
  position:relative;
  z-index: 1;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0; background: transparent; color: var(--muted);
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 650;
  line-height: 1.15;
  text-align:center;
  transition: color .24s ease, background-color .24s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.tab.is-active{
  background: transparent;
  color: var(--text);
}
.tab:hover{ transform: none; }
.tab:focus,
.tab:focus-visible{
  outline: none;
  box-shadow: none;
}

.auth-panels{
  margin-top: 14px;
  position:relative;
  overflow: hidden;
  transition: height .42s cubic-bezier(.2,.86,.2,1);
}
.auth-panels.is-no-motion{
  transition: none;
}
.auth-form{
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-top: 0;
  display:flex;
  flex-direction:column;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(24px, 0, 0) scale(.986);
  transition:
    opacity .28s ease,
    transform .46s cubic-bezier(.2,.86,.2,1),
    visibility .46s step-end;
  will-change: opacity, transform;
}
.auth-form.is-active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity .28s ease,
    transform .46s cubic-bezier(.2,.86,.2,1),
    visibility 0s linear;
}
.auth-form.is-entering-from-left{
  transform: translate3d(-24px, 0, 0) scale(.986);
}
.auth-form.is-entering-from-right{
  transform: translate3d(24px, 0, 0) scale(.986);
}
.auth-form.is-leaving-to-left{
  opacity: 0;
  transform: translate3d(-24px, 0, 0) scale(.986);
}
.auth-form.is-leaving-to-right{
  opacity: 0;
  transform: translate3d(24px, 0, 0) scale(.986);
}
.field{ display:flex; flex-direction:column; gap:7px; }
.field span{ font-size: 12px; color: var(--muted); }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), textarea{
  width:100%;
  border:0;
  background-color: rgba(255,255,255,.04);
  background-image: none;
  color: var(--text);
  padding: 11px 12px;
  border-radius: 14px;
  outline: none;
  box-shadow: none;
  filter: saturate(1);
  will-change: background-color, box-shadow, filter;
  transition:
    background-color .28s cubic-bezier(.22,1,.36,1),
    box-shadow .32s cubic-bezier(.22,1,.36,1),
    filter .24s cubic-bezier(.22,1,.36,1);
}
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), html[data-theme="light"] textarea{
  background-color: rgba(15,23,42,.03);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus, textarea:focus{
  background-color: rgba(124,58,237,.12);
  box-shadow: inset 0 0 0 1px rgba(124,58,237,.18), inset 0 0 26px rgba(124,58,237,.12);
  filter: saturate(1.03);
}
textarea{
  resize:none;
  min-height: 44px;
  max-height: 160px;
  line-height: 1.35;
  padding-right: 14px;
}
.hint{ font-size: 12px; color: var(--muted); opacity:.9; line-height: 1.45; }
.crypto-warning{
  margin-top: 14px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(239,68,68,.55);
  background: rgba(239,68,68,.08);
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}

.auth-footer{
  margin-top: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.link{
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,.25);
  padding-bottom: 2px;
}
html[data-theme="light"] .link{ border-bottom-color: rgba(15,23,42,.25); }
.link:hover{ color: var(--text); }

.is-hidden{ display:none !important; }
.is-invisible{ opacity:0; pointer-events:none; }

/* Buttons */
.btn, .icon-btn{
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  border-radius: 14px;
  cursor:pointer;
  user-select:none;
  transition: transform .08s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
.btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding: 11px 14px;
  font-weight: 700;
  border-radius: 18px;
}
.btn.primary{
  background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(124,58,237,.65));
  border-color: rgba(124,58,237,.65);
  box-shadow: 0 10px 30px rgba(124,58,237,.22);
}
.btn.danger{
  color: #fee2e2;
  background:
    linear-gradient(160deg, rgba(239,68,68,.94), rgba(220,38,38,.82));
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(185,28,28,.34);
  transition: transform .08s ease, filter .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn.danger:hover{
  filter: brightness(1.08);
  box-shadow: 0 14px 32px rgba(185,28,28,.4);
}
.btn.danger:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(248,113,113,.28),
    0 14px 32px rgba(185,28,28,.4);
}
.btn.ghost{
  background: transparent;
  color: var(--muted);
}
.btn span,
.menu-check span,
.msg-menu-btn-label{
  color: inherit;
  text-shadow: none;
  filter: none;
  transition: color .12s ease;
}
.btn:active, .icon-btn:active{ transform: scale(.985); }
.btn:disabled, .icon-btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-icon{ width:18px; height:18px; opacity:.92; }
.icon-btn{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius: 18px;
  background: rgba(255,255,255,.07);
}
.icon-btn img{ width:18px; height:18px; opacity:.95; filter: var(--icon-filter); }
.btn-icon{ filter: var(--icon-filter); }
.icon-btn span{ font-size:16px; line-height:1; opacity:.9; }
.sidebar .icon-btn img,
.chat-header .icon-btn img,
.composer .icon-btn img,
.toast-actions img{
  filter: var(--icon-filter);
}
.sidebar-actions .icon-btn,
.chat-header .icon-btn,
.composer .icon-btn{
  border: 0;
}
#settingsBtn{
  background: linear-gradient(180deg, rgba(124,58,237,.18), rgba(124,58,237,.08));
  position: relative;
  display:grid;
  place-items:center;
}
#settingsBtn:hover{
  background: linear-gradient(180deg, rgba(124,58,237,.26), rgba(124,58,237,.13));
}
#settingsBtn img{
  width: 20px;
  height: 20px;
  margin: 0;
  display: block;
  transform: none;
}

/* Shell */
.shell{
  flex:1;
  display:flex;
  height:100%;
  min-height: 0;
  min-width: 0;
  overflow:hidden;
  border-radius: 0;
}

.sidebar{
  width: 360px;
  min-width: 300px;
  min-height: 0;
  background: var(--glass-panel);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(22px) saturate(1.2);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
html[data-theme="light"] .sidebar{
  background: var(--glass-panel);
}
.sidebar-header{
  padding: 16px 16px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.sidebar-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
  flex: 1;
  transition: transform .2s ease;
}
.sidebar-profile-trigger{
  padding: 8px 14px;
  margin: -8px -14px;
  border-radius: 22px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: box-shadow .14s ease, transform .12s ease;
}
.sidebar-profile-trigger:focus-visible{
  outline: none;
  background: transparent;
  box-shadow: none;
}
.sidebar-profile-trigger:active{
  transform: scale(.992);
}
.sidebar-left .title{
  min-width: 0;
}
.title-self-handle:empty{
  display: none;
}
.me-avatar{
  width:40px;
  height:40px;
  font-size: 12px;
  position: relative;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
.me-avatar.needs-profile-attention{
  box-shadow: 0 0 0 1px var(--warn-border), 0 14px 30px var(--warn-glow);
}
.me-avatar.needs-profile-attention::after{
  content: "";
  position: absolute;
  top: -4px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fbbf24, #f97316);
  border: 2px solid rgba(17,19,26,.92);
  box-shadow: 0 10px 22px rgba(249,115,22,.28);
  animation: profile-attention-pulse 1.8s ease-in-out infinite;
}
html[data-theme="light"] .me-avatar.needs-profile-attention::after{
  border-color: rgba(255,255,255,.96);
}
.title-main{
  font-weight: 780;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.title-sub{
  font-size: 12px;
  color: var(--muted);
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  transition: color .22s ease, text-shadow .22s ease, opacity .22s ease;
}
#meLabel{
  cursor: pointer;
  transition: color .22s ease, text-shadow .22s ease, opacity .22s ease;
}
#meLabel.is-profile-reminder{
  color: var(--warn);
  font-weight: 700;
  text-shadow: 0 0 18px var(--warn-glow);
}
.sidebar-left.has-profile-attention:hover{
  transform: translateY(-1px);
}
.sidebar-left.has-profile-attention:hover .me-avatar{
  transform: translateY(-1px) scale(1.02);
}
.sidebar-left.has-profile-attention:hover #meLabel{
  opacity: 1;
}
.sidebar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex:none;
}
.sidebar-actions .icon-btn{
  display:grid;
  place-items:center;
  flex:none;
  width: 44px;
  height: 44px;
}

.sidebar-search{
  margin: 0 12px 10px;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 0;
  background: rgba(255,255,255,.03);
}
.search-icon{ width:18px; height:18px; opacity:.7; }
.search-icon{ filter: var(--icon-filter); }
.sidebar-search input{
  border:0; padding:0; background: transparent; border-radius:0;
  outline:none;
}
.sidebar-search input:focus{ border:0; }

.chat-list{
  flex: 1;
  min-height: 0;
  overflow:auto;
  padding: 4px 8px 12px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
.chat-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 10px;
  border-radius: 20px;
  cursor:pointer;
  transition: background .15s ease, box-shadow .15s ease;
  position:relative;
}
.chat-item:hover{ background: rgba(255,255,255,.05); }
html[data-theme="light"] .chat-item:hover{
  background: rgba(15,23,42,.04);
}
.chat-item.is-active{
  background: rgba(124,58,237,.16);
  box-shadow: inset 0 0 0 1px rgba(124,58,237,.28);
}
.chat-item.is-favorites{
  border: 0;
  background: linear-gradient(145deg, rgba(245,158,11,.16), rgba(245,158,11,.05));
}
.chat-item.is-favorites:hover{
  background: linear-gradient(145deg, rgba(245,158,11,.24), rgba(245,158,11,.08));
}
.chat-item.is-favorites.is-active{
  background: linear-gradient(145deg, rgba(245,158,11,.26), rgba(245,158,11,.11));
}
.chat-item.is-favorites .avatar{
  background: linear-gradient(145deg, rgba(245,158,11,.44), rgba(180,83,9,.24));
}
.chat-item.is-favorites .chat-name{
  color: rgba(254,243,199,.98);
}
.chat-item.is-favorites .chat-name::before{
  content: "★";
  margin-right: 6px;
  color: rgba(245,158,11,.96);
}
.chat-item.is-favorites .chat-preview{
  color: rgba(253,224,71,.86);
}
.chat-item.is-favorites .chat-tail-icon{
  color: rgba(245,158,11,.96);
}
html[data-theme="light"] .chat-item.is-favorites{
  border: 0;
  background: linear-gradient(145deg, rgba(254,243,199,.76), rgba(254,243,199,.46));
}
html[data-theme="light"] .chat-item.is-favorites:hover{
  background: linear-gradient(145deg, rgba(254,243,199,.94), rgba(254,243,199,.6));
}
html[data-theme="light"] .chat-item.is-favorites .chat-name{
  color: rgba(120,53,15,.92);
}
html[data-theme="light"] .chat-item.is-favorites .chat-preview{
  color: rgba(146,64,14,.74);
}
html[data-theme="light"] .chat-item.is-favorites .chat-tail-icon{
  color: rgba(180,83,9,.92);
}
.avatar{
  width:42px; height:42px;
  border-radius: 999px;
  display:grid; place-items:center;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(124,58,237,.30), rgba(34,197,94,.20));
  border:0;
  color: rgba(232,234,241,.95);
  flex:none;
  overflow: hidden;
  position: relative;
}
.avatar-initials{
  position: relative;
  z-index: 1;
  font-weight: 800;
}
html[data-theme="light"] .avatar{ color: rgba(15,23,42,.85); }
.avatar img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: 50% 50%;
  display:block;
  z-index: 2;
}
.avatar.has-image{
  color: transparent;
  background: rgba(255,255,255,.05);
}
.avatar.has-image .avatar-initials{
  opacity: 0;
}
.chat-item.is-muted .chat-preview,
.chat-item.is-muted .chat-time{
  opacity: .7;
}
.chat-item.is-pinned .chat-name{
  color: #f5d37a;
}
html[data-theme="light"] .chat-item.is-pinned .chat-name{
  color: #92400e;
}
.chat-meta{ min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.chat-avatar-slot{ flex:none; display:flex; }
.chat-name{ font-weight: 760; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; }
.chat-preview{ font-size: 12px; color: var(--muted); white-space:nowrap; overflow:hidden; text-overflow: ellipsis; }
.chat-right{ display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:6px; }
.chat-time{
  font-size:11px;
  color: var(--muted);
  line-height: 1.15;
  min-height: 13px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  text-align:right;
  font-variant-numeric: tabular-nums;
}
.chat-tail{ min-height:22px; display:flex; align-items:center; justify-content:flex-end; }
.chat-tail-icon{ height:22px; font-size:14px; line-height:22px; }
.chat-list-divider{
  margin: 12px 10px 8px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  opacity: .8;
}
.me-avatar{
  cursor: pointer;
}
.profile-panel-backdrop{
  position: fixed;
  inset: 0;
  z-index: 66;
  background: rgba(2, 6, 23, .52);
  backdrop-filter: blur(3px);
  opacity: 0;
}
.profile-panel-backdrop.is-open{
  opacity: 1;
  transition: opacity .24s ease;
}
.profile-panel-backdrop.is-closing{
  opacity: 0;
  transition: opacity .2s ease;
}
.profile-panel-backdrop.is-user-view{
  display:none;
}
.profile-panel{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 68;
  width: min(460px, 100vw);
  background:
    radial-gradient(130% 120% at 100% 0%, rgba(56,189,248,.18), transparent 52%),
    linear-gradient(180deg, rgba(12,17,28,.98), rgba(9,13,23,.96));
  border-left: 1px solid rgba(148,163,184,.26);
  box-shadow: -24px 0 46px rgba(2,6,23,.52);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  transform: translateX(108%);
}
.profile-panel.is-open{
  transform: translateX(0);
  transition: transform .3s cubic-bezier(.2,.86,.2,1);
}
.profile-panel.is-closing{
  transform: translateX(108%);
  transition: transform .24s cubic-bezier(.4,0,.9,.3);
}
html[data-theme="light"] .profile-panel{
  background:
    radial-gradient(130% 120% at 100% 0%, rgba(56,189,248,.16), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,250,252,.96));
  border-left-color: rgba(148,163,184,.28);
  box-shadow: -24px 0 44px rgba(15,23,42,.2);
}
.profile-panel.is-self-view{
  --profile-panel-self-offset: 22px;
  --profile-panel-self-opacity: 0;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 100vw;
  height: 100dvh;
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
  background: #080a0e;
  color-scheme: dark;
  transform: translateY(var(--profile-panel-self-offset));
  opacity: var(--profile-panel-self-opacity);
}
.profile-panel.is-self-view.is-open{
  --profile-panel-self-offset: 0px;
  --profile-panel-self-opacity: 1;
  transition: transform .26s cubic-bezier(.2,.86,.2,1), opacity .2s ease;
}
.profile-panel.is-self-view.is-closing{
  --profile-panel-self-offset: 22px;
  --profile-panel-self-opacity: 0;
  transition: transform .2s cubic-bezier(.4,0,.9,.3), opacity .16s ease;
}
.profile-panel-header{
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px;
  border-bottom: 1px solid rgba(148,163,184,.24);
  display:grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items:center;
  gap: 8px;
}
.profile-panel-title{
  font-weight: 760;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-panel-body{
  min-height: 0;
  overflow:auto;
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.profile-panel.is-self-view .profile-panel-header{
  position: sticky;
  top: 0;
  z-index: 2;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) clamp(14px, 2.8vw, 28px) 10px;
  grid-template-columns: minmax(102px, 1fr) auto minmax(102px, 1fr);
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass-panel);
  backdrop-filter: blur(24px) saturate(1.22);
  -webkit-backdrop-filter: blur(24px) saturate(1.22);
}
.profile-panel.is-self-view .profile-panel-title{
  color: rgba(255,255,255,.9);
  font-weight: 720;
}
.profile-panel.is-self-view #profilePanelBack,
.profile-panel.is-self-view #profilePanelClose{
  width: auto;
  min-width: 102px;
  height: 44px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(2,6,23,.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
.profile-panel.is-self-view #profilePanelBack{
  justify-self: start;
}
.profile-panel.is-self-view #profilePanelClose{
  justify-self: end;
}
.profile-panel.is-self-view #profilePanelBack img,
.profile-panel.is-self-view #profilePanelClose img{
  display: none;
}
.profile-panel.is-self-view #profilePanelBack::after,
.profile-panel.is-self-view #profilePanelClose::after{
  font-size: 14px;
  line-height: 1;
  font-weight: 650;
  color: rgba(255,255,255,.9);
  content: attr(data-label);
}
.profile-panel.is-self-view .profile-panel-body{
  padding: 12px clamp(14px, 3.2vw, 34px) calc(env(safe-area-inset-bottom, 0px) + 24px);
  gap: 16px;
  align-items: center;
  background: #080a0e;
}
.profile-self-screen{
  width: min(720px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.profile-self-hero{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 20px 0 20px;
}
.profile-self-avatar-btn{
  border: 0;
  background: none;
  padding: 0;
  position: relative;
  width: 108px;
  height: 108px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  isolation: isolate;
  cursor: pointer;
}
.profile-self-avatar-aura{
  position: absolute;
  inset: -18px;
  z-index: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.profile-self-avatar-aura::before{
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 32%, rgba(108,168,255,.26), transparent 52%),
    radial-gradient(circle at 70% 68%, rgba(85,255,196,.18), transparent 56%),
    radial-gradient(circle, rgba(255,255,255,.08), transparent 72%);
  filter: blur(18px);
  opacity: .82;
}
.profile-self-avatar{
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  font-size: 30px;
}
.profile-self-avatar-glow{
  width: 100%;
  height: 100%;
  transform: scale(1.08);
  opacity: .6;
  filter: blur(18px) saturate(1.16);
  mix-blend-mode: screen;
}
.profile-self-avatar-glow .avatar-initials{
  opacity: 0;
}
.profile-self-avatar-glow img{
  opacity: .94;
}
.profile-self-avatar-glow:not(.has-image){
  background: linear-gradient(135deg, rgba(89,152,255,.24), rgba(66,228,176,.22));
}
.profile-self-avatar-camera{
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.profile-self-avatar-camera img{
  width: 40px;
  height: 40px;
  filter: brightness(0) invert(1) drop-shadow(0 6px 14px rgba(0,0,0,.45));
  opacity: .98;
}
.profile-panel.is-self-view .profile-self-avatar-btn{
  width: 162px;
  height: 162px;
}
.profile-panel.is-self-view .profile-self-avatar-aura{
  inset: -27px;
}
.profile-panel.is-self-view .profile-self-avatar-aura::before{
  filter: blur(24px);
}
.profile-panel.is-self-view .profile-self-avatar{
  font-size: 44px;
}
.profile-panel.is-self-view .profile-self-avatar-glow{
  filter: blur(24px) saturate(1.16);
}
.profile-panel.is-self-view .profile-self-avatar-camera img{
  width: 52px;
  height: 52px;
}
.profile-self-block{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-self-surface{
  background: rgba(255,255,255,.08);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.profile-self-input-row{
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 13px 20px 11px;
  transition: background .22s ease, box-shadow .22s ease, transform .18s ease;
}
.profile-self-input-row.is-invalid{
  background: linear-gradient(180deg, rgba(248,113,113,.16), rgba(248,113,113,.08));
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.24);
}
.profile-self-input-row-handle{
  gap: 2px;
}
.profile-self-input-row + .profile-self-input-row,
.profile-self-row-btn + .profile-self-row-btn{
  border-top: 1px solid rgba(255,255,255,.08);
}
.profile-self-input-prefix{
  flex: none;
  font-size: 16px;
  line-height: 1.28;
  color: rgba(255,255,255,.52);
  user-select: none;
}
.profile-self-note{
  padding: 0 20px;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255,255,255,.56);
}
.profile-self-note-stack,
.profile-self-username-stack{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profile-self-note-status{
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 16px;
  flex-wrap: wrap;
  transition: color .18s ease, opacity .18s ease;
}
.profile-self-note-status-text{
  flex: 1 1 180px;
  min-width: 0;
}
.profile-self-note-status::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: .92;
  flex: none;
}
.profile-self-note-status.is-muted{
  color: rgba(255,255,255,.56);
}
.profile-self-note-status.is-pending{
  color: rgba(250,204,21,.92);
}
.profile-self-note-status.is-success{
  color: rgba(74,222,128,.9);
}
.profile-self-note-status.is-current{
  color: rgba(125,211,252,.9);
}
.profile-self-note-status.is-warning{
  color: var(--warn);
}
.profile-self-note-status.is-error{
  color: rgba(248,113,113,.92);
}
.profile-self-note-action{
  margin-left: auto;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  color: rgba(255,255,255,.88);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 8px 12px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .16s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.profile-self-note-action:hover{
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
}
.profile-self-note-action:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.16);
}
.profile-self-note-status.is-warning .profile-self-note-action{
  background: linear-gradient(135deg, rgba(251,191,36,.2), rgba(249,115,22,.16));
  color: rgba(255,248,235,.98);
  box-shadow: 0 8px 20px rgba(249,115,22,.14), inset 0 1px 0 rgba(255,255,255,.12);
}
.profile-self-note-status.is-warning .profile-self-note-action:hover{
  background: linear-gradient(135deg, rgba(251,191,36,.26), rgba(249,115,22,.2));
}
.profile-username-suggestions{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px) scale(.98);
  pointer-events: none;
  transition: max-height .32s cubic-bezier(.22,1,.36,1), opacity .22s ease, transform .22s ease;
}
.profile-username-suggestions.is-visible{
  max-height: 220px;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.profile-username-suggestions-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 20px 0;
}
.profile-username-suggestions-label{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.64);
}
.profile-username-suggestions-hint{
  font-size: 11px;
  color: rgba(255,255,255,.42);
}
.profile-username-suggestion-list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 20px 0;
}
.profile-username-suggestion{
  border: 1px solid var(--warn-border);
  background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(249,115,22,.16));
  color: rgba(255,246,221,.98);
  border-radius: 999px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(249,115,22,.14), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  animation: username-suggestion-in .34s cubic-bezier(.22,1,.36,1) both;
  animation-delay: var(--suggestion-delay, 0ms);
}
.profile-username-suggestion:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(249,115,22,.2), inset 0 1px 0 rgba(255,255,255,.16);
  background: linear-gradient(135deg, rgba(251,191,36,.22), rgba(249,115,22,.2));
}
.profile-username-suggestion:focus-visible{
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(255,214,102,.65);
  box-shadow: 0 0 0 3px rgba(251,191,36,.18), 0 16px 34px rgba(249,115,22,.2);
}
.profile-username-suggestion-handle{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
}
html[data-theme="light"] .profile-self-input-row.is-invalid{
  background: linear-gradient(180deg, rgba(254,242,242,.96), rgba(254,226,226,.88));
  box-shadow: inset 0 0 0 1px rgba(239,68,68,.18);
}
html[data-theme="light"] .profile-self-note-action{
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,250,252,.86));
  color: rgba(51,65,85,.88);
  box-shadow: 0 8px 18px rgba(148,163,184,.12), inset 0 1px 0 rgba(255,255,255,.86);
}
html[data-theme="light"] .profile-self-note-status.is-warning .profile-self-note-action{
  background: linear-gradient(135deg, rgba(254,243,199,.98), rgba(255,237,213,.94));
  color: rgba(120,53,15,.96);
  box-shadow: 0 10px 22px rgba(217,119,6,.12), inset 0 1px 0 rgba(255,255,255,.76);
}
html[data-theme="light"] .profile-username-suggestions-label{
  color: rgba(120,53,15,.76);
}
html[data-theme="light"] .profile-username-suggestions-hint{
  color: rgba(120,53,15,.54);
}
html[data-theme="light"] .profile-username-suggestion{
  background: linear-gradient(135deg, rgba(254,243,199,.98), rgba(255,237,213,.94));
  color: rgba(120,53,15,.96);
  box-shadow: 0 14px 28px rgba(217,119,6,.12), inset 0 1px 0 rgba(255,255,255,.72);
}
html[data-theme="light"] .profile-username-suggestion:hover{
  border-color: rgba(255,214,102,.5);
}
.profile-self-split-row{
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 12px 20px;
}
.profile-self-split-row + .profile-self-split-row{
  border-top: 1px solid rgba(255,255,255,.08);
}
.profile-self-split-label{
  flex: none;
  font-size: 15px;
  line-height: 1.2;
  color: rgba(255,255,255,.94);
}
.profile-self-row-btn{
  width: 100%;
  border: 0;
  background: transparent;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 15px 20px 13px;
  color: rgba(255,255,255,.95);
  cursor: pointer;
}
.profile-self-row-label{
  font-size: 16px;
  line-height: 1.2;
  color: rgba(255,255,255,.94);
}
.profile-self-row-value{
  justify-self: end;
  font-size: 15px;
  line-height: 1.2;
  color: rgba(255,255,255,.74);
  text-align: right;
}
.profile-self-row-value.is-placeholder{
  color: rgba(255,255,255,.38);
}
.profile-self-row-arrow{
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 18px;
  min-width: 18px;
  height: 18px;
  color: rgba(255,255,255,.42);
}
.profile-self-row-arrow::before{
  content: "";
  width: 8px;
  height: 8px;
  border-top: 1.8px solid currentColor;
  border-right: 1.8px solid currentColor;
  transform: rotate(45deg);
}
.profile-panel.is-self-view input.profile-self-input,
.profile-panel.is-self-view textarea.profile-self-input{
  width: 100%;
  border: 0 !important;
  border-radius: 0;
  padding: 0;
  background: transparent !important;
  color: rgba(255,255,255,.95);
  box-shadow: none !important;
  font-size: 16px;
  line-height: 1.28;
}
.profile-self-input-row-handle .profile-self-input{
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}
.profile-panel.is-self-view input.profile-self-inline-input{
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-size: 14px;
  color: rgba(255,255,255,.74);
}
.profile-self-input::placeholder{
  color: rgba(255,255,255,.38);
}
.profile-panel.is-self-view input.profile-self-input:focus,
.profile-panel.is-self-view textarea.profile-self-input:focus{
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.profile-self-textarea{
  min-height: 84px;
  max-height: 172px;
  resize: none;
}
.profile-birthday-picker{
  width: min(340px, 100%);
  margin: 0 auto;
}
.profile-birthday-picker-month{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.profile-birthday-month-name{
  font-size: 15px;
  font-weight: 760;
  letter-spacing: .02em;
  color: inherit;
}
.profile-birthday-year-switch{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(15,23,42,.34);
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.profile-birthday-year-menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: 138px;
  max-height: 228px;
  padding: 8px;
  border-radius: 20px;
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(56,189,248,.16), transparent 52%),
    linear-gradient(180deg, rgba(15,23,42,.98), rgba(2,6,23,.96));
  border: 1px solid rgba(148,163,184,.2);
  box-shadow: 0 18px 36px rgba(2,6,23,.34), inset 0 1px 0 rgba(255,255,255,.04);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-8px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 14;
}
.profile-birthday-year-menu.is-open{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
.profile-birthday-year-menu-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 212px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-gutter: stable;
}
.profile-birthday-year-option{
  min-width: 72px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(226,232,240,.72);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
  white-space: nowrap;
}
.profile-birthday-year-option:hover{
  color: rgba(241,245,249,.96);
}
.profile-birthday-year-option:focus-visible{
  outline: 2px solid rgba(125,211,252,.55);
  outline-offset: 2px;
}
.profile-birthday-year-option.is-active{
  background: linear-gradient(180deg, rgba(34,197,94,.18), rgba(56,189,248,.16));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 18px rgba(15,23,42,.18);
  color: rgba(248,250,252,.98);
}
.profile-birthday-year-item{
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 13px;
  background: rgba(255,255,255,.02);
  color: rgba(226,232,240,.82);
  font-size: 13px;
  font-weight: 760;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.profile-birthday-year-item:hover{
  background: rgba(51,65,85,.46);
  color: rgba(248,250,252,.98);
  transform: translateY(-1px);
}
.profile-birthday-year-item:focus-visible{
  outline: 2px solid rgba(125,211,252,.52);
  outline-offset: 2px;
}
.profile-birthday-year-item.is-active{
  background: linear-gradient(180deg, rgba(34,197,94,.18), rgba(56,189,248,.16));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 20px rgba(15,23,42,.18);
  color: rgba(248,250,252,.98);
}
html[data-theme="light"] .profile-birthday-year-switch{
  background: rgba(226,232,240,.88);
  border-color: rgba(148,163,184,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
html[data-theme="light"] .profile-birthday-year-menu{
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(14,165,233,.14), transparent 54%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,245,249,.96));
  border-color: rgba(148,163,184,.26);
  box-shadow: 0 18px 36px rgba(148,163,184,.24), inset 0 1px 0 rgba(255,255,255,.96);
}
html[data-theme="light"] .profile-birthday-year-option{
  color: rgba(51,65,85,.72);
}
html[data-theme="light"] .profile-birthday-year-option:hover{
  color: rgba(15,23,42,.9);
}
html[data-theme="light"] .profile-birthday-year-option.is-active{
  background: linear-gradient(180deg, rgba(220,252,231,.98), rgba(186,230,253,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 8px 18px rgba(148,163,184,.2);
  color: rgba(15,23,42,.92);
}
html[data-theme="light"] .profile-birthday-year-item{
  background: rgba(255,255,255,.64);
  color: rgba(51,65,85,.78);
}
html[data-theme="light"] .profile-birthday-year-item:hover{
  background: rgba(226,232,240,.92);
  color: rgba(15,23,42,.92);
}
html[data-theme="light"] .profile-birthday-year-item.is-active{
  background: linear-gradient(180deg, rgba(220,252,231,.98), rgba(186,230,253,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 10px 20px rgba(148,163,184,.22);
  color: rgba(15,23,42,.92);
}
.profile-birthday-picker-foot{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.profile-panel.is-self-view .btn.primary{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.95);
}
.profile-panel.is-self-view .btn.ghost{
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.74);
}

@media (min-width: 901px){
  .profile-panel.is-self-view .profile-panel-body{
    padding: 10px 18px calc(env(safe-area-inset-bottom, 0px) + 18px);
    gap: 12px;
  }
  .profile-self-screen{
    width: min(560px, 100%);
    gap: 10px;
  }
  .profile-self-hero{
    padding: 20px 0 20px;
  }
  .profile-self-avatar-btn{
    width: 76px;
    height: 76px;
  }
  .profile-self-avatar-aura{
    inset: -14px;
  }
  .profile-self-avatar-aura::before{
    filter: blur(14px);
  }
  .profile-self-avatar{
    font-size: 20px;
  }
  .profile-self-avatar-glow{
    filter: blur(14px) saturate(1.14);
  }
  .profile-self-avatar-camera img{
    width: 28px;
    height: 28px;
  }
  .profile-panel.is-self-view .profile-self-avatar-btn{
    width: 114px;
    height: 114px;
  }
  .profile-panel.is-self-view .profile-self-avatar-aura{
    inset: -21px;
  }
  .profile-panel.is-self-view .profile-self-avatar-aura::before{
    filter: blur(18px);
  }
  .profile-panel.is-self-view .profile-self-avatar{
    font-size: 30px;
  }
  .profile-panel.is-self-view .profile-self-avatar-glow{
    filter: blur(18px) saturate(1.14);
  }
  .profile-panel.is-self-view .profile-self-avatar-camera img{
    width: 38px;
    height: 38px;
  }
  .profile-self-surface{
    border-radius: 28px;
  }
  .profile-self-input-row{
    min-height: 46px;
    padding: 5px 12px 5px;
  }
  .profile-self-input-row.is-bio{
    padding: 14px 16px 9px;
  }
  .profile-self-note{
    padding: 0 16px;
    font-size: 10px;
  }
  .profile-username-suggestions-head{
    padding: 2px 16px 0;
  }
  .profile-username-suggestion-list{
    padding: 8px 16px 0;
    gap: 8px;
  }
  .profile-username-suggestion{
    padding: 8px 12px;
  }
  .profile-self-split-row{
    min-height: 44px;
    padding: 5px 16px;
  }
  .profile-self-split-label{
    font-size: 13px;
  }
  .profile-panel.is-self-view input.profile-self-input,
  .profile-panel.is-self-view textarea.profile-self-input{
    font-size: 14px;
    line-height: 1.22;
  }
  .profile-self-input-prefix{
    font-size: 14px;
    line-height: 1.22;
  }
  .profile-panel.is-self-view input.profile-self-inline-input{
    font-size: 13px;
  }
  .profile-self-row-label{
    font-size: 14px;
  }
  .profile-self-row-value{
    font-size: 13px;
  }
  .profile-self-textarea{
    min-height: 72px;
    max-height: 120px;
  }
  .profile-self-row-btn{
    padding: 12px 16px 11px;
  }
  .profile-birthday-year-switch{
    padding: 2px;
    gap: 3px;
  }
  .profile-birthday-year-option{
    min-width: 66px;
    height: 26px;
    font-size: 11px;
  }
  .profile-birthday-year-menu{
    width: 130px;
    max-height: 212px;
  }
  .profile-birthday-year-item{
    min-height: 34px;
    font-size: 12px;
  }
  .profile-birthday-picker-foot{
    gap: 8px;
  }
}

.profile-panel.is-user-view{
  --profile-panel-user-offset: 84px;
  --profile-panel-user-opacity: 0;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 100vw;
  height: 100dvh;
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, rgba(9,11,15,.995), rgba(11,14,20,.995));
  transform: translateX(var(--profile-panel-user-offset));
  opacity: var(--profile-panel-user-opacity);
}
.profile-panel.is-user-view.is-open{
  --profile-panel-user-offset: 0px;
  --profile-panel-user-opacity: 1;
  transition: transform .28s cubic-bezier(.2,.86,.2,1), opacity .22s ease;
}
.profile-panel.is-user-view.is-closing{
  --profile-panel-user-offset: 84px;
  --profile-panel-user-opacity: 0;
  transition: transform .28s cubic-bezier(.2,.86,.2,1), opacity .22s ease;
}
.profile-panel.is-user-view.is-dragging{
  transition: none !important;
}
html[data-theme="light"] .profile-panel.is-user-view{
  background: linear-gradient(180deg, rgba(9,11,15,.995), rgba(11,14,20,.995));
}
.profile-panel.is-user-view .profile-panel-header{
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 18px 10px;
  grid-template-columns: minmax(96px, 1fr) auto minmax(96px, 1fr);
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(7,9,13,.84), rgba(7,9,13,0));
}
.profile-panel.is-user-view .profile-panel-title{
  color: rgba(255,255,255,.84);
  font-weight: 720;
  justify-self: center;
}
html[data-theme="light"] .profile-panel.is-user-view .profile-panel-title{
  color: rgba(255,255,255,.84);
}
.profile-panel.is-user-view #profilePanelClose{
  display:inline-flex;
  justify-self: end;
  width: 96px;
  height: 42px;
  min-width: 96px;
}
.profile-panel.is-user-view #profilePanelBack,
.profile-panel.is-user-view #profilePanelClose{
  width: auto;
  height: 42px;
  min-width: 96px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow: none;
  transition: background .16s ease, border-color .16s ease, opacity .16s ease;
}
.profile-panel.is-user-view #profilePanelBack{
  padding: 0 14px 0 10px;
  justify-self: start;
  gap: 8px;
}
.profile-panel.is-user-view #profilePanelClose{
  padding: 0 16px;
}
.profile-panel.is-user-view #profilePanelBack:hover,
.profile-panel.is-user-view #profilePanelClose.is-visible:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
}
.profile-panel.is-user-view #profilePanelClose:not(.is-visible){
  visibility:hidden;
  pointer-events:none;
}
.profile-panel.is-user-view #profilePanelBack::after,
.profile-panel.is-user-view #profilePanelClose::after{
  content: attr(data-label);
  font-size: 14px;
  line-height: 1;
  font-weight: 650;
  color: rgba(255,255,255,.88);
}
.profile-panel.is-user-view #profilePanelBack img{
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}
.profile-panel.is-user-view #profilePanelClose img{
  display:none;
}
.profile-panel.is-user-view #profilePanelClose:disabled{
  opacity: .52;
  cursor: default;
}
.profile-panel.is-user-view .profile-panel-body{
  padding: 0;
  gap: 0;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior-x: contain;
}
.profile-sheet{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.profile-card{
  border: 0;
  background: rgba(15,23,42,.34);
  border-radius: 18px;
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
html[data-theme="light"] .profile-card{
  background: rgba(255,255,255,.9);
}
.profile-panel.is-self-view .profile-card{
  background: rgba(255,255,255,.04);
}
html[data-theme="light"] .profile-panel.is-self-view .profile-card{
  background: rgba(255,255,255,.9);
}
.profile-hero{
  display:flex;
  align-items:center;
  gap: 12px;
}
.profile-hero .avatar{
  width: 68px;
  height: 68px;
  font-size: 18px;
}
.profile-hero-meta{
  min-width: 0;
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.profile-hero-name{
  font-size: 19px;
  font-weight: 780;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-hero-sub{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-upload-btn{
  align-self:flex-start;
  min-height: 34px;
  border-radius: 11px;
  padding: 0 10px;
  font-size: 12px;
}
.profile-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.profile-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  border: 1px solid rgba(148,163,184,.2);
  border-radius: 12px;
  padding: 9px 10px;
  background: rgba(15,23,42,.28);
}
html[data-theme="light"] .profile-row{
  background: rgba(248,250,252,.92);
  border-color: rgba(148,163,184,.22);
}
.profile-row-label{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .02em;
}
.profile-row-value{
  font-size: 14px;
  font-weight: 640;
  text-align: right;
  word-break: break-word;
}
.profile-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-actions .btn{
  flex: 1 1 140px;
}
.profile-media-card-shell{
  position: relative;
  overflow: hidden;
}
.profile-tabs{
  --profile-tabs-glider-x: 0px;
  --profile-tabs-glider-y: 0px;
  --profile-tabs-glider-w: 0px;
  --profile-tabs-glider-h: 0px;
  position:relative;
  display:flex;
  align-items:center;
  gap: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 6px;
  border-radius: 16px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  user-select: none;
  -webkit-user-select: none;
}
.profile-tabs::-webkit-scrollbar{
  display:none;
}
.profile-tabs-glider{
  position:absolute;
  top: 0;
  left: 0;
  height: var(--profile-tabs-glider-h);
  width: var(--profile-tabs-glider-w);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 12px 28px rgba(2,6,23,.2), inset 0 1px 0 rgba(255,255,255,.14);
  transform: translate3d(var(--profile-tabs-glider-x), var(--profile-tabs-glider-y), 0);
  transition:
    transform .44s cubic-bezier(.23,.88,.22,1),
    width .36s cubic-bezier(.23,.88,.22,1),
    height .34s cubic-bezier(.23,.88,.22,1),
    opacity .22s ease;
  z-index: 0;
  pointer-events: none;
}
.profile-tabs.is-no-motion .profile-tabs-glider{
  transition: none;
}
.profile-tab{
  position: relative;
  z-index: 1;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  font-weight: 760;
  padding: 9px 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: color .24s ease;
}
.profile-tab:hover{
  color: rgba(255,255,255,.92);
}
.profile-tab.is-active{
  color: rgba(255,255,255,.98);
  background: transparent;
}
html[data-theme="light"] .profile-tab{
  color: rgba(51,65,85,.72);
}
html[data-theme="light"] .profile-tab:hover{
  color: rgba(15,23,42,.92);
}
html[data-theme="light"] .profile-tab.is-active{
  color: rgba(15,23,42,.96);
}
html[data-theme="light"] .profile-tabs{
  background: rgba(241,245,249,.92);
  border-color: rgba(148,163,184,.18);
}
html[data-theme="light"] .profile-tabs-glider{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
  border-color: rgba(148,163,184,.18);
  box-shadow: 0 12px 24px rgba(148,163,184,.16), inset 0 1px 0 rgba(255,255,255,.98);
}
.profile-assets-content{
  margin-top: 2px;
  position: relative;
  min-height: 120px;
  overflow: hidden;
  transition: height .42s cubic-bezier(.2,.86,.2,1);
}
.profile-assets-content.is-no-motion{
  transition: none;
}
.profile-assets-pane{
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(24px, 0, 0) scale(.986);
  transition:
    opacity .28s ease,
    transform .46s cubic-bezier(.2,.86,.2,1),
    visibility .46s step-end;
  will-change: opacity, transform;
}
.profile-assets-pane.is-active{
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity .28s ease,
    transform .46s cubic-bezier(.2,.86,.2,1),
    visibility 0s linear;
}
.profile-assets-pane.is-entering-from-left{
  transform: translate3d(-24px, 0, 0) scale(.986);
}
.profile-assets-pane.is-entering-from-right{
  transform: translate3d(24px, 0, 0) scale(.986);
}
.profile-assets-pane.is-leaving-to-left{
  position:absolute;
  opacity: 0;
  visibility: visible;
  transform: translate3d(-24px, 0, 0) scale(.986);
}
.profile-assets-pane.is-leaving-to-right{
  position:absolute;
  opacity: 0;
  visibility: visible;
  transform: translate3d(24px, 0, 0) scale(.986);
}
.profile-assets{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.profile-asset{
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  padding: 12px 12px;
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.profile-asset:hover{
  transform: translateY(-1px);
  border-color: rgba(125,211,252,.28);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: 0 14px 24px rgba(2,6,23,.12);
}
html[data-theme="light"] .profile-asset{
  background: rgba(255,255,255,.95);
  border-color: rgba(148,163,184,.24);
}
.profile-asset-main{
  min-width: 0;
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.profile-asset-title{
  font-size: 13px;
  font-weight: 680;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-asset-sub{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.profile-asset-time{
  font-size: 11px;
  color: var(--muted);
}
.profile-asset-actions{
  display:flex;
  align-items:center;
  align-self:center;
  gap: 6px;
}
.profile-asset-actions .btn{
  border-radius: 11px;
  min-height: 32px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 650;
}
.profile-media-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.profile-media-card{
  min-width: 0;
  display:flex;
  flex-direction:column;
}
.profile-media-card-stage{
  position: relative;
  aspect-ratio: 0.96;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    radial-gradient(120% 120% at 0% 0%, rgba(56,189,248,.14), transparent 48%),
    rgba(10,14,24,.96);
  box-shadow: 0 24px 36px rgba(2,6,23,.24), inset 0 1px 0 rgba(255,255,255,.08);
  transition: background .22s ease, box-shadow .22s ease;
}
.profile-media-card-stage:focus-visible{
  outline: 2px solid rgba(125,211,252,.65);
  outline-offset: 3px;
}
.profile-media-card-media{
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(130% 120% at 0% 0%, rgba(56,189,248,.16), transparent 44%),
    linear-gradient(180deg, rgba(8,12,22,.94), rgba(3,7,18,.98));
}
.profile-media-card-media.is-error{
  background: linear-gradient(180deg, rgba(40,10,18,.82), rgba(14,8,12,.94));
}
.profile-media-card-media.is-fallback{
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(14,165,233,.16), transparent 46%),
    radial-gradient(120% 120% at 100% 100%, rgba(14,165,233,.1), transparent 42%),
    linear-gradient(180deg, rgba(8,12,22,.95), rgba(3,7,18,.98));
}
.profile-media-card-thumb{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.profile-media-card-placeholder,
.profile-media-card-error{
  position: relative;
  z-index: 1;
  padding: 18px;
  text-align:center;
}
.profile-media-card-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,.84);
}
.profile-media-card-placeholder-glyph{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.08);
  font-size: 24px;
}
.profile-media-card-placeholder-text,
.profile-media-card-error{
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,.7);
}
.profile-media-card-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding: 14px;
  background: linear-gradient(180deg, rgba(2,6,23,0), rgba(2,6,23,0) 36%, rgba(2,6,23,0));
  transition: background .22s ease, opacity .22s ease;
}
.profile-media-card-overlay-top,
.profile-media-card-overlay-bottom{
  opacity: 0;
  transition: opacity .2s ease, transform .24s cubic-bezier(.2,.86,.2,1);
}
.profile-media-card-overlay-top{
  transform: translate3d(0, -8px, 0);
}
.profile-media-card-overlay-bottom{
  transform: translate3d(0, 8px, 0);
}
.profile-media-card-stage:hover .profile-media-card-overlay,
.profile-media-card-stage:focus-visible .profile-media-card-overlay,
.profile-media-card-stage:focus-within .profile-media-card-overlay{
  background: linear-gradient(180deg, rgba(2,6,23,.14), rgba(2,6,23,.04) 28%, rgba(2,6,23,.76) 100%);
}
.profile-media-card-stage:hover .profile-media-card-overlay-top,
.profile-media-card-stage:hover .profile-media-card-overlay-bottom,
.profile-media-card-stage:focus-visible .profile-media-card-overlay-top,
.profile-media-card-stage:focus-visible .profile-media-card-overlay-bottom,
.profile-media-card-stage:focus-within .profile-media-card-overlay-top,
.profile-media-card-stage:focus-within .profile-media-card-overlay-bottom{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.profile-media-card-overlay-top,
.profile-media-card-overlay-bottom{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}
.profile-media-card-overlay-top{
  justify-content:flex-end;
}
.profile-media-card-overlay-bottom{
  align-items:center;
  justify-content:center;
}
.profile-media-card-date{
  font-size: 12px;
  line-height: 1.3;
  font-weight: 640;
  letter-spacing: .01em;
  color: rgba(255,255,255,.88);
  text-shadow: 0 2px 10px rgba(2,6,23,.55);
}
.profile-media-card-action{
  border: 0;
  border-radius: 999px;
  min-height: 34px;
  padding: 0 12px;
  background: transparent;
  color: rgba(255,255,255,.94);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: color .16s ease, opacity .16s ease;
}
.profile-media-card-action:hover{
  color: rgba(255,255,255,1);
  opacity: 1;
}
.profile-empty{
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px dashed rgba(148,163,184,.3);
  color: var(--muted);
  font-size: 12px;
}
.profile-media-empty{
  padding: 22px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-style: solid;
}
.profile-media-empty-title{
  font-size: 15px;
  font-weight: 760;
  color: rgba(255,255,255,.94);
}
.profile-media-empty-text{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,.62);
}
.profile-loading{
  padding: 10px;
  font-size: 12px;
  color: var(--muted);
}
.profile-form-actions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.profile-form-actions .btn{
  flex: 1 1 130px;
}
.profile-panel .field span{
  font-size: 11px;
  letter-spacing: .02em;
}
html[data-theme="light"] .profile-media-card-stage{
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,245,249,.92)),
    radial-gradient(120% 120% at 0% 0%, rgba(56,189,248,.12), transparent 48%);
  box-shadow: 0 18px 30px rgba(148,163,184,.18), inset 0 1px 0 rgba(255,255,255,.92);
}
html[data-theme="light"] .profile-media-card-media{
  background:
    radial-gradient(130% 120% at 0% 0%, rgba(56,189,248,.14), transparent 44%),
    linear-gradient(180deg, rgba(248,250,252,.96), rgba(226,232,240,.96));
}
html[data-theme="light"] .profile-media-card-media.is-fallback{
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(56,189,248,.12), transparent 48%),
    linear-gradient(180deg, rgba(248,250,252,.98), rgba(226,232,240,.96));
}
html[data-theme="light"] .profile-media-card-placeholder,
html[data-theme="light"] .profile-media-card-error{
  color: rgba(51,65,85,.72);
}
html[data-theme="light"] .profile-media-card-placeholder-glyph{
  background: rgba(15,23,42,.08);
  color: rgba(15,23,42,.82);
}
html[data-theme="light"] .profile-media-card-overlay{
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0) 32%, rgba(15,23,42,0));
}
html[data-theme="light"] .profile-media-card-stage:hover .profile-media-card-overlay,
html[data-theme="light"] .profile-media-card-stage:focus-visible .profile-media-card-overlay,
html[data-theme="light"] .profile-media-card-stage:focus-within .profile-media-card-overlay{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 28%, rgba(15,23,42,.72) 100%);
}
html[data-theme="light"] .profile-media-card-date{
  color: rgba(255,255,255,.92);
}
html[data-theme="light"] .profile-media-empty{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.9));
}
html[data-theme="light"] .profile-media-empty-title{
  color: rgba(15,23,42,.94);
}
html[data-theme="light"] .profile-media-empty-text{
  color: rgba(51,65,85,.7);
}
.profile-section-title{
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.profile-user-view{
  min-height: 100%;
  display:flex;
  flex-direction:column;
  touch-action: pan-y pinch-zoom;
}
.profile-user-hero{
  min-height: 360px;
  padding: calc(env(safe-area-inset-top, 0px) + 104px) 24px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  position:relative;
}
.profile-user-avatar{
  width: 132px;
  height: 132px;
  font-size: 36px;
  border: 0;
  box-shadow: 0 22px 46px rgba(0,0,0,.34);
}
.profile-user-name{
  margin-top: 14px;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.08;
  font-weight: 820;
  color: rgba(255,255,255,.96);
}
.profile-user-status{
  margin-top: 6px;
  font-size: 14px;
  color: rgba(255,255,255,.62);
}
.profile-user-actions{
  width: min(620px, 100%);
  margin: 28px auto 34px;
  align-self: center;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 180px));
  justify-content:center;
  gap: 14px;
}
.profile-user-action{
  border: 0;
  min-height: 84px;
  padding: 10px 12px;
  border-radius: 22px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 8px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 32px rgba(0,0,0,.2);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
  cursor: pointer;
}
.profile-user-action:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 20px 36px rgba(0,0,0,.24);
}
.profile-user-action-icon{
  width: 24px;
  height: 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: currentColor;
}
.profile-user-action-icon svg,
.profile-user-action-icon img{
  width: 24px;
  height: 24px;
  display:block;
}
.profile-user-action-icon svg{
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.profile-user-action-icon svg circle{
  fill: currentColor;
  stroke: none;
}
.profile-user-action-icon img{
  filter: brightness(0) invert(1);
  opacity: .94;
}
.profile-user-action-label{
  font-size: 14px;
  line-height: 1.1;
  font-weight: 640;
}
.profile-user-content{
  flex:1;
  padding: 78px 20px 32px;
}
.profile-contact-editor{
  min-height: 100%;
  width: min(560px, calc(100vw - 28px));
  max-width: 100%;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 96px) 0 calc(env(safe-area-inset-bottom, 0px) + 24px);
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.profile-contact-editor.profile-self-screen{
  width: min(560px, 100%);
  gap: 10px;
}
.profile-contact-editor-hero{
  gap: 0;
  padding: 2px 0 0;
}
.profile-contact-editor-avatar-wrap{
  width: 100%;
  height: 100%;
  display:grid;
  place-items:center;
}
.profile-contact-editor-hero .profile-self-avatar-btn{
  width: 108px;
  height: 108px;
}
.profile-contact-editor-hero .profile-self-avatar-camera img{
  width: 40px;
  height: 40px;
}
.profile-contact-editor-handle{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255,255,255,.56);
}
.profile-contact-editor-section{
  width: 100%;
}
.profile-contact-editor-surface{
  width: 100%;
  background: rgba(255,255,255,.08);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.profile-contact-editor-themed .profile-self-input-row{
  min-height: 50px;
  padding: 1px 12px 1px;
}
.profile-contact-editor-themed .profile-self-input-row.is-bio{
  align-items:flex-start;
  padding: 10px 12px 10px;
}
.profile-panel.is-user-view .profile-contact-editor-themed input.profile-self-input,
.profile-panel.is-user-view .profile-contact-editor-themed textarea.profile-self-input{
  width: 100%;
  border: 0 !important;
  border-radius: 0;
  padding: 0;
  background: transparent !important;
  color: rgba(255,255,255,.95);
  box-shadow: none !important;
  font-size: 15px;
  line-height: 1.28;
}
.profile-panel.is-user-view .profile-contact-editor-themed input.profile-self-input:focus,
.profile-panel.is-user-view .profile-contact-editor-themed textarea.profile-self-input:focus{
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.profile-contact-editor-themed .profile-self-input::placeholder{
  color: rgba(255,255,255,.38);
}
.profile-contact-editor-themed .profile-self-textarea{
  min-height: 88px;
  max-height: 140px;
  line-height: 1.35;
}
.profile-contact-editor-action-card{
  width: 100%;
}
.profile-user-stack{
  width: min(920px, 100%);
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap: 16px;
}
.profile-panel.is-user-view .profile-card{
  background: rgba(18,20,25,.92);
  border-radius: 28px;
  padding: 22px 24px;
  box-shadow: 0 22px 44px rgba(2,6,23,.24);
}
.profile-panel.is-user-view .profile-section-title{
  color: var(--ui-accent);
  letter-spacing: .08em;
}
.profile-user-line{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.profile-user-line:first-of-type{
  border-top: 0;
  padding-top: 4px;
}
.profile-section-title + .profile-user-line{
  border-top: 0;
  padding-top: 4px;
}
.profile-user-line-copy-wrap{
  min-width: 0;
  display:flex;
  flex-direction:column;
  gap: 4px;
  position: relative;
}
.profile-user-line-copy-wrap.has-hover-hint{
  overflow: visible;
}
.profile-user-line-label{
  font-size: 13px;
  color: rgba(255,255,255,.56);
  text-transform: lowercase;
}
.profile-user-line-value{
  font-size: 18px;
  line-height: 1.35;
  color: rgba(255,255,255,.94);
  word-break: break-word;
}
.profile-user-line-value.is-clickable{
  cursor: pointer;
}
.profile-user-line-value.is-accent{
  color: var(--ui-accent);
}
.profile-user-hover-card{
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  z-index: 4;
  width: max-content;
  min-width: 170px;
  max-width: min(420px, calc(100vw - 40px));
  padding: 9px 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(18,20,25,.98), rgba(15,18,23,.96));
  box-shadow: 0 14px 30px rgba(0,0,0,.3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px) scale(.97);
  transition: opacity .18s ease, transform .2s cubic-bezier(.2,.9,.2,1);
}
.profile-user-hover-card::after{
  content: "";
  position: absolute;
  left: 16px;
  top: 100%;
  width: 10px;
  height: 10px;
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(15,18,23,.98);
  transform: translateY(-6px) rotate(45deg);
}
.profile-user-line-copy-wrap.has-hover-hint:hover .profile-user-hover-card,
.profile-user-line-copy-wrap.has-hover-hint:focus-within .profile-user-hover-card{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.profile-user-hover-card-title{
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.54);
}
.profile-user-hover-card-text{
  font-size: 12px;
  line-height: 1.38;
  color: rgba(255,255,255,.94);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-user-hover-card-meta{
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255,255,255,.62);
}
.profile-user-line-copy{
  border: 0;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  border-radius: 999px;
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
}
.profile-user-line-copy:hover{
  background: rgba(255,255,255,.1);
}
.profile-user-line-copy-icon{
  width: 18px;
  height: 18px;
  display:block;
}
.profile-user-line-copy-icon rect{
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.profile-user-line-button{
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ui-accent);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 14px 0 4px;
  font-size: 17px;
  font-weight: 620;
  cursor: pointer;
}
.profile-user-line-button.is-danger{
  color: #ff655e;
}
.profile-user-line-arrow{
  font-size: 22px;
  line-height: 1;
  opacity: .78;
}
.profile-panel.is-user-view .profile-tab{
  background: transparent;
  border-color: transparent;
  color: rgba(255,255,255,.62);
}
.profile-panel.is-user-view .profile-tab.is-active{
  color: rgba(255,255,255,.96);
  background: transparent;
}
.profile-panel.is-user-view .profile-asset{
  border: 0;
  background: rgba(255,255,255,.05);
}
.profile-panel.is-user-view .profile-media-card-stage{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    radial-gradient(120% 120% at 0% 0%, rgba(56,189,248,.18), transparent 46%),
    rgba(7,11,20,.98);
}
.profile-panel.is-user-view .profile-media-card-media{
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(56,189,248,.14), transparent 46%),
    linear-gradient(180deg, rgba(6,10,18,.98), rgba(2,6,14,1));
}
.profile-panel.is-user-view .profile-empty{
  border-color: rgba(255,255,255,.12);
}
.profile-contact-sheet,
.profile-action-sheet,
.profile-confirm-sheet{
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.profile-contact-sheet-top{
  display:flex;
  align-items:center;
  gap: 14px;
}
.profile-contact-sheet-avatar-slot{
  flex:none;
}
.profile-contact-sheet-avatar{
  width: 74px;
  height: 74px;
  font-size: 22px;
}
.profile-contact-sheet-meta{
  min-width: 0;
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.profile-contact-sheet-name{
  font-size: 22px;
  font-weight: 780;
  line-height: 1.08;
}
.profile-contact-sheet-sub{
  font-size: 13px;
  color: var(--muted);
}
.profile-contact-sheet-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-contact-sheet-note{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}
.profile-contact-sheet-toggle.is-disabled{
  opacity: .72;
  cursor: default;
}
.profile-contact-sheet-toggle.is-disabled input{
  cursor: not-allowed;
}
.profile-action-sheet-btn{
  width: 100%;
  border: 0;
  border-radius: 20px;
  background: rgba(255,255,255,.05);
  color: var(--text);
  text-align:left;
  padding: 16px 18px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.profile-action-sheet-btn-title{
  font-size: 16px;
  font-weight: 760;
}
.profile-action-sheet-btn-sub{
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.profile-confirm-title{
  font-size: 24px;
  font-weight: 800;
  text-align:center;
}
.profile-confirm-text{
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  text-align:center;
}
.profile-confirm-actions{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.chat-item-user{
  border: 1px solid rgba(124,58,237,.18);
  background: rgba(124,58,237,.06);
}
.chat-item-search-message{
  border: 1px solid rgba(56,189,248,.2);
  background: rgba(56,189,248,.06);
}
.chat-item.is-drop-target{
  border: 1px dashed var(--ui-accent-border);
  background: var(--ui-accent-soft);
}
.badge{
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(124,58,237,.85);
  color: white;
  font-size: 12px;
  font-weight: 780;
  box-shadow: 0 10px 22px rgba(124,58,237,.25);
}

/* Main */
.main{
  --chat-header-height: 74px;
  --chat-composer-height: 76px;
  flex:1;
  display:flex;
  flex-direction:column;
  position: relative;
  min-height: 0;
  min-width: 0;
  background: var(--chat-bg);
  overflow: hidden;
}
html[data-theme="light"] .main{
  background: var(--chat-bg);
}

.chat-header{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 18;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px;
  border-bottom: 1px solid var(--glass-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background: linear-gradient(180deg, rgba(15,20,34,.62), rgba(15,20,34,.38));
  backdrop-filter: blur(24px) saturate(1.22);
  -webkit-backdrop-filter: blur(24px) saturate(1.22);
}
html[data-theme="light"] .chat-header{
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.7));
}
.chat-header-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;
}
.chat-header-avatar-slot{ flex:none; display:flex; align-items:center; justify-content:center; }
.chat-header-avatar-slot.is-actionable{
  cursor: pointer;
}
.chat-header-peer-avatar{
  width: 42px;
  height: 42px;
}
.chat-title{ min-width: 0; }
.chat-title-main{ font-weight: 820; letter-spacing:.2px; }
.chat-title-main.is-actionable{
  cursor: pointer;
}
.chat-title-sub{ font-size: 12px; color: var(--muted); margin-top:2px; }
.chat-header-actions{ display:flex; gap:8px; flex:none; }
.chat-date-btn{
  position: relative;
  overflow: hidden;
  border-color: rgba(56,189,248,.34);
  background: linear-gradient(150deg, rgba(8,47,73,.72), rgba(37,99,235,.44));
  box-shadow: inset 0 1px 0 rgba(241,245,249,.22), 0 10px 20px rgba(2,6,23,.28);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.chat-date-btn::after{
  content: "";
  position: absolute;
  inset: -32% -45%;
  background: linear-gradient(120deg, transparent, rgba(186,230,253,.38), transparent 74%);
  opacity: 0;
  transform: translateX(-38px) rotate(12deg);
  transition: opacity .22s ease, transform .32s ease;
  pointer-events: none;
}
.chat-date-btn:hover:not(:disabled){
  transform: translateY(-1px) scale(1.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 14px 24px rgba(2,6,23,.34);
  filter: saturate(1.08);
}
.chat-date-btn:hover:not(:disabled)::after{
  opacity: 1;
  transform: translateX(32px) rotate(12deg);
}
.chat-date-btn:active:not(:disabled){
  transform: translateY(0) scale(.985);
}
.chat-date-btn span{
  position: relative;
  z-index: 1;
  font-size: 16px;
  line-height: 1;
}
html[data-theme="light"] .chat-date-btn{
  border-color: rgba(14,165,233,.3);
  background: linear-gradient(150deg, rgba(224,242,254,.94), rgba(186,230,253,.86));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 20px rgba(14,116,144,.18);
}
.chat-date-input-native{
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.chat-date-popover{
  position: absolute;
  right: 12px;
  top: calc(var(--chat-header-height) + 54px);
  z-index: 22;
  width: min(340px, calc(100% - 24px));
  padding: 12px 12px 10px;
  border-radius: 18px;
  border: 0;
  background:
    radial-gradient(140% 120% at 12% -18%, rgba(56,189,248,.24), transparent 52%),
    linear-gradient(180deg, rgba(8,13,27,.94), rgba(9,14,28,.86));
  box-shadow: 0 26px 48px rgba(2,6,23,.56), inset 0 1px 0 rgba(186,230,253,.18);
  backdrop-filter: blur(16px) saturate(1.18);
  -webkit-backdrop-filter: blur(16px) saturate(1.18);
  transform-origin: top right;
  opacity: 0;
  pointer-events: none;
}
.chat-date-popover.is-open{
  pointer-events: auto;
  animation: chat-date-popover-in .34s cubic-bezier(.18,.94,.18,1) both;
}
.chat-date-popover.is-closing{
  pointer-events: none;
  animation: chat-date-popover-out .22s cubic-bezier(.3,0,.8,.2) both;
}
html[data-theme="light"] .chat-date-popover{
  border-color: rgba(15,23,42,.15);
  background:
    radial-gradient(150% 120% at 12% -16%, rgba(14,165,233,.18), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,250,252,.94));
  box-shadow: 0 20px 38px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.92);
}
.chat-date-picker-head{
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.chat-date-picker-month{
  text-align: center;
  font-size: 14px;
  font-weight: 760;
  letter-spacing: .02em;
  color: rgba(241,245,249,.96);
}
html[data-theme="light"] .chat-date-picker-month{
  color: rgba(15,23,42,.9);
}
.chat-date-picker-nav{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(30,41,59,.58), rgba(15,23,42,.4));
  border: 1px solid rgba(148,163,184,.24);
  font-size: 0;
  line-height: 0;
  color: rgba(241,245,249,.95);
}
.chat-date-picker-nav::before{
  content: "";
  position: absolute;
  inset: 0;
  width: 6px;
  height: 6px;
  margin: auto;
  border-top: 1.8px solid currentColor;
  border-right: 1.8px solid currentColor;
  box-sizing: border-box;
  transform: rotate(45deg);
}
.chat-date-picker-nav.prev::before{
  transform: rotate(-135deg);
}
html[data-theme="light"] .chat-date-picker-nav{
  background: linear-gradient(180deg, rgba(241,245,249,.92), rgba(226,232,240,.84));
  border-color: rgba(148,163,184,.3);
  color: rgba(15,23,42,.82);
}
.chat-date-picker-weekdays{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 7px;
}
.chat-date-picker-weekday{
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(148,163,184,.92);
}
.chat-date-picker-grid{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.chat-date-picker-grid.is-animate{
  animation: chat-date-grid-in .2s ease both;
}
.chat-date-picker-grid.is-animate .chat-date-picker-day{
  animation: chat-date-day-in .24s cubic-bezier(.18,.9,.3,1) both;
  animation-delay: var(--day-delay, 0ms);
}
.chat-date-picker-day{
  position: relative;
  min-width: 0;
  height: 34px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: rgba(15,23,42,.26);
  color: rgba(241,245,249,.95);
  cursor: pointer;
  font-size: 13px;
  font-weight: 640;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.chat-date-picker-day::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  transform: translateX(-50%);
  opacity: 0;
  background: rgba(56,189,248,.95);
}
.chat-date-picker-day:hover{
  background: rgba(56,189,248,.18);
  border-color: rgba(125,211,252,.36);
  transform: translateY(-1px);
}
.chat-date-picker-day:focus-visible{
  outline: none;
  border-color: rgba(125,211,252,.6);
  box-shadow: 0 0 0 2px rgba(56,189,248,.24);
}
.chat-date-picker-day.is-outside{
  color: rgba(148,163,184,.62);
  background: rgba(15,23,42,.12);
}
.chat-date-picker-day.is-today{
  border-color: rgba(110,231,183,.62);
  box-shadow: inset 0 0 0 1px rgba(110,231,183,.45);
}
.chat-date-picker-day.has-messages::after{
  opacity: 1;
}
.chat-date-picker-day.is-selected{
  border-color: rgba(125,211,252,.66);
  background: linear-gradient(165deg, rgba(59,130,246,.54), rgba(14,165,233,.5));
  color: rgba(255,255,255,.98);
  box-shadow: 0 12px 18px rgba(2,132,199,.26);
}
html[data-theme="light"] .chat-date-picker-day{
  background: rgba(241,245,249,.84);
  color: rgba(15,23,42,.88);
}
html[data-theme="light"] .chat-date-picker-day.is-outside{
  background: rgba(241,245,249,.54);
  color: rgba(100,116,139,.72);
}
html[data-theme="light"] .chat-date-picker-day:hover{
  background: rgba(186,230,253,.7);
  border-color: rgba(56,189,248,.44);
}
html[data-theme="light"] .chat-date-picker-day.is-selected{
  background: linear-gradient(165deg, rgba(2,132,199,.9), rgba(14,165,233,.84));
  color: #fff;
  box-shadow: 0 10px 18px rgba(14,116,144,.24);
}
.chat-date-picker-foot{
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.chat-date-picker-today{
  border: 1px solid rgba(148,163,184,.3);
  background: linear-gradient(180deg, rgba(15,23,42,.52), rgba(15,23,42,.32));
  color: rgba(226,232,240,.96);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 680;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.chat-date-picker-today:hover{
  transform: translateY(-1px);
  border-color: rgba(125,211,252,.44);
  background: linear-gradient(180deg, rgba(30,41,59,.62), rgba(30,41,59,.44));
}
html[data-theme="light"] .chat-date-picker-today{
  border-color: rgba(148,163,184,.34);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,245,249,.9));
  color: rgba(15,23,42,.86);
}
.download-hud-host{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--chat-header-height) - 6px);
  z-index: 14;
  height: 0;
  pointer-events: none;
}
.download-hud-host.has-active{
  pointer-events: auto;
}
.chat-scroll-date-badge{
  position: absolute;
  top: calc(var(--chat-header-height) + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  padding: 6px 12px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(180deg, rgba(8,12,22,.84), rgba(9,13,24,.66));
  color: rgba(241,245,249,.96);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 24px rgba(2,6,23,.35);
  backdrop-filter: blur(16px) saturate(1.14);
  -webkit-backdrop-filter: blur(16px) saturate(1.14);
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
}
.chat-scroll-date-badge.is-visible{
  opacity: 1;
}
.chat-scroll-date-badge.is-animate{
  animation: chat-date-chip-in .24s cubic-bezier(.16,1,.3,1) both;
}
html[data-theme="light"] .chat-scroll-date-badge{
  border-color: rgba(15,23,42,.2);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.8));
  color: rgba(15,23,42,.88);
}
.chat-find-bar{
  position: absolute;
  left: 12px;
  right: 12px;
  top: calc(var(--chat-header-height) + 8px);
  z-index: 19;
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 8px;
  border-radius: 16px;
  border: 0;
  background: linear-gradient(180deg, rgba(15,20,34,.72), rgba(15,20,34,.52));
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  box-shadow: 0 16px 28px rgba(2,6,23,.34);
  transform-origin: top center;
}
.chat-find-bar.with-media-player{
  top: calc(var(--chat-header-height) + 74px);
}
.chat-find-bar.search-animate-in{
  animation: chat-find-surface-in .34s cubic-bezier(.16,1,.3,1) both;
}
.chat-find-bar.search-animate-out{
  animation: chat-find-surface-out .22s cubic-bezier(.3,0,.8,.2) both;
}
html[data-theme="light"] .chat-find-bar{
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.78));
}
.chat-find-bar input{
  flex: 1;
  min-width: 0;
  border-radius: 12px;
  padding: 9px 10px;
}
.chat-find-count{
  flex:none;
  min-width: 52px;
  text-align:center;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color .18s ease, transform .18s ease;
}
.chat-find-count.is-scanning{
  color: rgba(125,211,252,.95);
  animation: chat-find-count-pulse 1.05s ease-in-out infinite;
}
.chat-find-bar .icon-btn{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1;
}
.chat-find-date-btn{
  flex:none;
}
.chat-find-results{
  position: absolute;
  left: 12px;
  right: 12px;
  top: calc(var(--chat-header-height) + 62px);
  z-index: 19;
  max-height: min(50vh, 420px);
  overflow: auto;
  display:flex;
  flex-direction:column;
  gap: 6px;
  padding: 8px;
  border-radius: 16px;
  border: 0;
  background: linear-gradient(180deg, rgba(15,20,34,.92), rgba(15,20,34,.82));
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  box-shadow: 0 20px 38px rgba(2,6,23,.44);
  transform-origin: top center;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
.chat-find-results.with-media-player{
  top: calc(var(--chat-header-height) + 128px);
}
.chat-find-results.search-animate-in{
  animation: chat-find-surface-in .38s cubic-bezier(.16,1,.3,1) both;
}
.chat-find-results.search-animate-out{
  animation: chat-find-surface-out .2s cubic-bezier(.3,0,.8,.2) both;
}
.chat-find-results::-webkit-scrollbar{
  width: 7.5px;
}
.chat-find-results::-webkit-scrollbar-track{
  background: transparent;
}
.chat-find-results::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(56,189,248,.55), rgba(59,130,246,.5));
  border: 2px solid rgba(2,6,23,.24);
}
html[data-theme="light"] .chat-find-results{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
}
.chat-find-empty{
  padding: 12px;
  text-align:center;
  font-size: 12px;
  color: var(--muted);
}
.chat-find-result{
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 10px 12px;
  min-height: 60px;
  cursor: pointer;
  text-align:left;
  transform: translateY(8px) scale(.985);
  opacity: 0;
  animation: chat-find-result-in .35s cubic-bezier(.2,.95,.2,1) both;
  animation-delay: var(--find-row-delay, 0ms);
  transition: background .18s ease, border-color .18s ease, transform .2s ease, box-shadow .2s ease;
  will-change: transform, opacity;
  overflow: visible;
}
.chat-find-result:hover{
  background: rgba(125,211,252,.08);
  border-color: rgba(125,211,252,.24);
  transform: translateY(0) scale(1);
  box-shadow: 0 10px 18px rgba(56,189,248,.14);
}
.chat-find-result.is-active{
  background: rgba(125,211,252,.16);
  border-color: rgba(125,211,252,.44);
  transform: translateX(3px) scale(1.004);
  box-shadow: 0 14px 24px rgba(56,189,248,.2);
}
.chat-find-result.is-active::after{
  content: "";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  border: 0;
  pointer-events:none;
  animation: chat-find-active-glow 1.5s ease-in-out infinite;
}
.chat-find-avatar{
  width: 34px;
  height: 34px;
  min-width: 34px;
  transform: translateZ(0);
}
.chat-find-result-body{
  min-width: 0;
  flex: 1;
  display:flex;
  flex-direction:column;
  gap: 5px;
}
.chat-find-result-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 8px;
}
.chat-find-result-sender{
  flex:1;
  min-width:0;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.24;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-find-result-ts{
  flex:none;
  font-size: 11px;
  line-height: 1.15;
  color: var(--muted);
  text-align:right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chat-find-result-preview{
  font-size: 13px;
  color: rgba(226,232,240,.9);
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
html[data-theme="light"] .chat-find-result-preview{
  color: rgba(30,41,59,.82);
}
.chat-find-highlight{
  background: linear-gradient(90deg, rgba(56,189,248,.22), rgba(56,189,248,.3));
  color: inherit;
  padding: 0 2px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(125,211,252,.22);
}
.chat-find-skeleton-row{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 8px;
  border-radius: 12px;
  border: 0;
  background: rgba(255,255,255,.02);
}
.chat-find-skeleton-avatar{
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 999px;
  background: linear-gradient(110deg, rgba(148,163,184,.18), rgba(148,163,184,.06), rgba(148,163,184,.18));
  background-size: 220% 100%;
  animation: chat-find-skeleton-shimmer 1.1s linear infinite;
}
.chat-find-skeleton-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap: 8px;
  padding-top: 2px;
}
.chat-find-skeleton-line{
  height: 9px;
  border-radius: 6px;
  background: linear-gradient(110deg, rgba(148,163,184,.18), rgba(148,163,184,.06), rgba(148,163,184,.18));
  background-size: 220% 100%;
  animation: chat-find-skeleton-shimmer 1.1s linear infinite;
}
.chat-find-skeleton-line.w-short{ width: 42%; }
.chat-find-skeleton-line.w-full{ width: 92%; }
.chat-pinned-bar{
  position: absolute;
  left: 12px;
  right: 12px;
  top: calc(var(--chat-header-height) + 8px);
  z-index: 18;
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 16px;
  border: 0;
  background: linear-gradient(180deg, rgba(15,20,34,.58), rgba(15,20,34,.34));
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}
.chat-pinned-bar.with-find{
  top: calc(var(--chat-header-height) + 74px);
}
.chat-pinned-bar.with-media-player{
  top: calc(var(--chat-header-height) + 88px);
}
.chat-pinned-bar.with-find.with-media-player{
  top: calc(var(--chat-header-height) + 154px);
}
html[data-theme="light"] .chat-pinned-bar{
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62));
}
.chat-pinned-main{
  flex:1;
  min-width: 0;
  border: 0;
  background: rgba(255,255,255,.02);
  color: var(--text);
  border-radius: 12px;
  padding: 7px 10px;
  text-align: left;
  cursor: pointer;
  display:flex;
  flex-direction:column;
  gap: 2px;
}
.chat-pinned-main:hover{
  background: rgba(255,255,255,.06);
}
.chat-pinned-kicker{
  font-size: 11px;
  font-weight: 760;
  color: rgba(125,211,252,.92);
  letter-spacing: .02em;
}
html[data-theme="light"] .chat-pinned-kicker{
  color: rgba(2,132,199,.95);
}
.chat-pinned-text{
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-pinned-count{
  flex:none;
  min-width: 52px;
  text-align:right;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
@keyframes chat-media-popover-in{
  from{
    opacity: 0;
    transform: translateY(-4px) scale(.96);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes chat-media-popover-out{
  from{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to{
    opacity: 0;
    transform: translateY(-4px) scale(.96);
  }
}
.chat-media-bar{
  position: absolute;
  left: 12px;
  right: 12px;
  top: calc(var(--chat-header-height) + 8px);
  z-index: 19;
  border-radius: 9px 9px 16px 16px;
  border: 0;
  background: linear-gradient(180deg, rgba(15,20,34,.74), rgba(15,20,34,.56));
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  box-shadow: 0 16px 28px rgba(2,6,23,.34);
  overflow: visible;
  padding-top: 12px;
  opacity: 0;
  transform: translateY(-8px) scale(.985);
  pointer-events: none;
  transition: transform .28s cubic-bezier(.2,.86,.24,1), opacity .22s ease;
}
.chat-media-bar.is-open{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.chat-media-bar.is-closing{
  opacity: 0;
  transform: translateY(-6px) scale(.99);
  pointer-events: none;
}
.chat-media-progress{
  --chat-media-progress-height: 7px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0px;
  width: auto;
  margin: 0;
  height: var(--chat-media-progress-height);
  background: rgba(148,163,184,.28);
  border-radius: 9px 9px 0 0;
  overflow: hidden;
  cursor: pointer;
}
.chat-media-progress-fill{
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, rgba(34,197,94,.95), rgba(56,189,248,.9));
  border-radius: 9px 0 0 0;
  transition: width .12s linear;
}
.chat-media-progress-fill.is-complete{
  border-radius: 9px 9px 0 0;
}
.chat-media-body{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 2px 8px 8px;
}
.chat-media-play{
  width: 38px;
  height: 38px;
  border-radius: 13px;
  font-size: 16px;
  font-weight: 760;
  flex: none;
}
.chat-media-main{
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  color: inherit;
  padding: 7px 9px;
  display:flex;
  align-items:center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .22s ease;
}
.chat-media-main:hover{
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.chat-media-avatar-slot{
  width: 32px;
  height: 32px;
  min-width: 32px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.chat-media-avatar-slot .avatar{
  width: 32px;
  height: 32px;
}
.chat-media-text{
  min-width: 0;
  display:flex;
  flex-direction:column;
  gap: 1px;
}
.chat-media-title{
  font-size: 13px;
  font-weight: 760;
  color: rgba(241,245,249,.98);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-media-subtitle{
  font-size: 12px;
  color: rgba(191,219,254,.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.chat-media-controls{
  display:flex;
  align-items:center;
  gap: 6px;
  flex: none;
}
.chat-media-control-wrap{
  position: relative;
  display:flex;
  align-items:center;
}
.chat-media-btn{
  width: 34px;
  height: 34px;
  border-radius: 11px;
  border: 0;
  background: transparent;
  color: rgba(241,245,249,.96);
  display:grid;
  place-items:center;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition: color .16s ease, opacity .16s ease, background .16s ease;
}
.chat-media-btn:hover{
  transform: none;
  color: rgba(191,219,254,.98);
  background: rgba(148,163,184,.08);
}
.chat-media-btn.is-active{
  color: rgba(134,239,172,.98);
  background: rgba(34,197,94,.12);
}
.chat-media-btn:active{
  transform: none;
  opacity: .94;
}
.chat-media-btn:focus-visible{
  outline: none;
}
.chat-media-rate{
  width: auto;
  min-width: 48px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.chat-media-audio-btn{
  font-size: 0;
}
.chat-media-audio-icon{
  width: 18px;
  height: 18px;
  display:block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chat-media-audio-main{
  fill: currentColor;
  stroke: none;
}
.chat-media-audio-mute{
  display: none;
  stroke: rgba(248,113,113,.96);
  stroke-width: 2.1;
}
.chat-media-audio-btn.is-muted .chat-media-audio-wave{
  display: none;
}
.chat-media-audio-btn.is-muted .chat-media-audio-mute{
  display: block;
}
.chat-media-popover{
  position: absolute;
  top: calc(100% + 1px);
  right: 0;
  border-radius: 16px;
  border: 0;
  background: linear-gradient(180deg, rgba(15,23,42,.96), rgba(15,23,42,.9));
  box-shadow: 0 16px 32px rgba(2,6,23,.42);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  padding: 10px 12px;
  z-index: 22;
  opacity: 0;
  transform: translateY(-4px) scale(.96);
  transform-origin: top right;
  pointer-events: none;
}
.chat-media-popover::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.chat-media-popover.is-open{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  animation: chat-media-popover-in .24s cubic-bezier(.2,.9,.2,1) both;
}
.chat-media-popover.is-closing{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: none;
  animation: chat-media-popover-out .2s cubic-bezier(.2,.9,.2,1) both;
}
.chat-media-popover-title{
  font-size: 11px;
  color: rgba(191,219,254,.94);
  font-weight: 740;
  letter-spacing: .015em;
}
.chat-media-popover-value{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(241,245,249,.97);
  font-variant-numeric: tabular-nums;
  font-weight: 740;
}
.chat-media-speed-popover{
  min-width: 216px;
}
.chat-media-volume-popover{
  width: 74px;
  min-width: 74px;
  padding: 10px 8px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;
}
.chat-media-volume-popover .chat-media-popover-title{
  text-align:center;
}
.chat-media-volume-popover .chat-media-popover-value{
  margin-top: 0;
  font-size: 12px;
}
.chat-media-slider{
  --chat-media-slider-thumb-size: 16px;
  --chat-media-slider-track-size: 8px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  height: var(--chat-media-slider-thumb-size);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  background:
    linear-gradient(90deg, rgba(34,197,94,.92) 50%, rgba(148,163,184,.28) 50%)
    center / 100% var(--chat-media-slider-track-size) no-repeat;
  transition: background .06s linear;
}
.chat-media-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: var(--chat-media-slider-thumb-size);
  height: var(--chat-media-slider-thumb-size);
  margin-top: calc((var(--chat-media-slider-track-size) - var(--chat-media-slider-thumb-size)) / 2);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.65);
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.96), rgba(226,232,240,.88));
  box-shadow: 0 4px 10px rgba(2,6,23,.4);
}
.chat-media-slider::-webkit-slider-runnable-track{
  height: var(--chat-media-slider-track-size);
  border-radius: 999px;
  border: 0;
  background: transparent;
}
.chat-media-slider::-moz-range-thumb{
  width: var(--chat-media-slider-thumb-size);
  height: var(--chat-media-slider-thumb-size);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.65);
  background: rgba(241,245,249,.97);
  box-shadow: 0 4px 10px rgba(2,6,23,.4);
}
.chat-media-slider::-moz-range-track{
  height: var(--chat-media-slider-track-size);
  border-radius: 999px;
  border: 0;
  background: transparent;
}
.chat-media-speed-slider{
  margin: 10px 0 0;
}
.chat-media-volume-slider-wrap{
  width: 24px;
  height: 116px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 4px 0 3px;
}
.chat-media-volume-slider{
  width: 108px;
  height: var(--chat-media-slider-thumb-size);
  transform: rotate(-90deg) translateZ(0);
  transform-origin: center;
  margin: 0;
}
.chat-media-close{
  color: rgba(220,252,231,.96);
}
html[data-theme="light"] .chat-media-bar{
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.78));
  box-shadow: 0 14px 26px rgba(15,23,42,.18);
}
html[data-theme="light"] .chat-media-main{
  background: rgba(248,250,252,.72);
}
html[data-theme="light"] .chat-media-main:hover{
  background: rgba(241,245,249,.94);
}
html[data-theme="light"] .chat-media-title{
  color: rgba(15,23,42,.9);
}
html[data-theme="light"] .chat-media-subtitle{
  color: rgba(30,64,175,.76);
}
html[data-theme="light"] .chat-media-btn{
  background: transparent;
  color: rgba(15,23,42,.84);
}
html[data-theme="light"] .chat-media-btn.is-active{
  color: rgba(5,150,105,.92);
  background: rgba(14,165,233,.12);
}
html[data-theme="light"] .chat-media-btn:hover{
  background: rgba(148,163,184,.2);
}
html[data-theme="light"] .chat-media-popover{
  border-color: rgba(148,163,184,.3);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
  box-shadow: 0 14px 28px rgba(15,23,42,.18);
}
html[data-theme="light"] .chat-media-popover-title{
  color: rgba(30,64,175,.8);
}
html[data-theme="light"] .chat-media-popover-value{
  color: rgba(15,23,42,.88);
}
html[data-theme="light"] .chat-media-slider{
  background:
    linear-gradient(90deg, rgba(16,185,129,.88) 50%, rgba(148,163,184,.36) 50%)
    center / 100% var(--chat-media-slider-track-size) no-repeat;
}
.message-selection-bar{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(var(--chat-composer-height) + 10px);
  z-index: 22;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 16px;
  border: 0;
  background: linear-gradient(180deg, rgba(15,20,34,.86), rgba(12,17,30,.74));
  box-shadow: 0 14px 28px rgba(2,6,23,.34);
  backdrop-filter: blur(18px) saturate(1.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
  transform-origin: bottom center;
}
.message-selection-bar.is-active{
  animation: selection-bar-in .25s cubic-bezier(.2,.86,.24,1) both;
}
.message-selection-count{
  flex:none;
  min-width: 92px;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .02em;
  color: rgba(226,232,240,.94);
}
.message-selection-actions{
  min-width: 0;
  flex:1;
  display:flex;
  flex-wrap: wrap;
  justify-content:flex-end;
  align-items:center;
  gap: 6px;
}
.message-selection-btn{
  min-height: 34px;
  border-radius: 12px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
.message-selection-btn:disabled{
  opacity: .45;
}
.message-selection-btn:not(:disabled){
  animation: selection-chip-pop .22s cubic-bezier(.2,.86,.24,1);
}
html[data-theme="light"] .message-selection-bar{
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.88));
  box-shadow: 0 14px 22px rgba(15,23,42,.15);
}
html[data-theme="light"] .message-selection-count{
  color: rgba(15,23,42,.8);
}

.messages{
  flex:1;
  min-height: 0;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-anchor: none;
  margin-bottom: var(--chat-composer-height);
  padding: calc(var(--chat-header-height) + 14px) 0 16px;
  transition: padding-top .24s ease;
  display:flex;
  flex-direction:column;
  gap: 10px;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
.messages.is-chat-switching{
  overflow-y: hidden;
}
.messages.is-chat-switching > :not(.chat-switch-skeleton){
  opacity: 0;
  pointer-events: none;
}
.messages.is-chat-switch-reveal{
  animation: chat-switch-content-in .16s cubic-bezier(.2,.86,.24,1) both;
}
.chat-switch-skeleton{
  width: min(760px, 100%);
  min-height: 100%;
  display:flex;
  flex-direction:column;
  gap: 10px;
  pointer-events:none;
}
.chat-switch-row{
  width: 100%;
  max-width: min(620px, 92%);
  display:flex;
  align-items:flex-end;
  gap: 10px;
}
.chat-switch-row.me{
  margin-left:auto;
  justify-content:flex-end;
}
.chat-switch-avatar{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  flex:none;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(90deg, rgba(148,163,184,.2), rgba(226,232,240,.32), rgba(148,163,184,.2));
  background-size: 220% 100%;
  animation: chat-find-skeleton-shimmer 1s linear infinite;
}
.chat-switch-bubble{
  width: min(100%, var(--switch-bubble-w, 58%));
  min-height: 42px;
  border-radius: 16px;
  padding: 10px 12px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.chat-switch-row.me .chat-switch-bubble{
  border-radius: 16px 16px 10px 16px;
  border-color: rgba(124,58,237,.28);
  background: linear-gradient(135deg, rgba(124,58,237,.24), rgba(124,58,237,.12));
}
.chat-switch-line{
  width: min(100%, var(--switch-line-w, 74%));
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.34), rgba(255,255,255,.14));
  background-size: 220% 100%;
  animation: chat-find-skeleton-shimmer .94s linear infinite;
}
.chat-switch-row.me .chat-switch-line{
  background: linear-gradient(90deg, rgba(196,181,253,.3), rgba(221,214,254,.46), rgba(196,181,253,.3));
}
html[data-theme="light"] .chat-switch-avatar{
  border-color: rgba(15,23,42,.12);
  background: linear-gradient(90deg, rgba(148,163,184,.26), rgba(226,232,240,.78), rgba(148,163,184,.26));
}
html[data-theme="light"] .chat-switch-bubble{
  border-color: rgba(148,163,184,.28);
  background: rgba(255,255,255,.78);
}
html[data-theme="light"] .chat-switch-row.me .chat-switch-bubble{
  border-color: rgba(139,92,246,.34);
  background: linear-gradient(135deg, rgba(196,181,253,.58), rgba(167,139,250,.36));
}
html[data-theme="light"] .chat-switch-line{
  background: linear-gradient(90deg, rgba(148,163,184,.24), rgba(241,245,249,.92), rgba(148,163,184,.24));
}
.empty-state.chat-empty-conversation{
  margin-top: 8px;
}
.messages.has-download-hud{
  padding-top: calc(var(--chat-header-height) + 76px);
}
.messages.has-chat-find{
  padding-top: calc(var(--chat-header-height) + 66px);
}
.messages.has-chat-pinned{
  padding-top: calc(var(--chat-header-height) + 66px);
}
.messages.has-chat-media-player{
  padding-top: calc(var(--chat-header-height) + 66px);
}
.messages.has-chat-find.has-chat-pinned{
  padding-top: calc(var(--chat-header-height) + 122px);
}
.messages.has-chat-find.has-chat-media-player{
  padding-top: calc(var(--chat-header-height) + 122px);
}
.messages.has-chat-pinned.has-chat-media-player{
  padding-top: calc(var(--chat-header-height) + 136px);
}
.messages.has-chat-find.has-chat-pinned.has-chat-media-player{
  padding-top: calc(var(--chat-header-height) + 192px);
}
.messages.has-chat-find.has-download-hud{
  padding-top: calc(var(--chat-header-height) + 132px);
}
.messages.has-chat-pinned.has-download-hud{
  padding-top: calc(var(--chat-header-height) + 132px);
}
.messages.has-chat-media-player.has-download-hud{
  padding-top: calc(var(--chat-header-height) + 132px);
}
.messages.has-chat-find.has-chat-pinned.has-download-hud{
  padding-top: calc(var(--chat-header-height) + 188px);
}
.messages.has-chat-find.has-chat-media-player.has-download-hud{
  padding-top: calc(var(--chat-header-height) + 188px);
}
.messages.has-chat-pinned.has-chat-media-player.has-download-hud{
  padding-top: calc(var(--chat-header-height) + 202px);
}
.messages.has-chat-find.has-chat-pinned.has-chat-media-player.has-download-hud{
  padding-top: calc(var(--chat-header-height) + 258px);
}
.empty-state{
  margin:auto;
  max-width: 420px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:10px;
  color: var(--muted);
  padding: 26px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 20px;
  background: rgba(255,255,255,.02);
}
html[data-theme="light"] .empty-state{
  border-color: rgba(15,23,42,.18);
  background: rgba(15,23,42,.02);
}
.empty-hero{
  width:58px; height:58px; margin:0 auto;
  border-radius: 20px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(124,58,237,.12);
  border:1px solid rgba(124,58,237,.22);
}
.empty-hero img{ width:26px; height:26px; opacity:.9; }
.empty-title{ color: var(--text); font-weight: 820; font-size: 16px; }
.empty-text{ font-size: 13px; line-height: 1.5; }

.msg-date-separator{
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 8px 0 4px;
  pointer-events:none;
  animation: fade-in .2s ease both;
}
.msg-date-separator > span{
  display: inline-flex;
  max-width: calc(100% - 32px);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(6,10,18,.78), rgba(7,10,18,.64));
  color: rgba(226,232,240,.95);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .015em;
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
  backdrop-filter: blur(12px) saturate(1.1);
}
html[data-theme="light"] .msg-date-separator > span{
  border-color: rgba(15,23,42,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
  color: rgba(30,41,59,.9);
}

.msg-unread-separator{
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 12px 0 6px;
  pointer-events: none;
  animation: fade-in .2s ease both;
}
.msg-unread-separator > span{
  display: inline-flex;
  max-width: calc(100% - 32px);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(56,189,248,.44);
  background: linear-gradient(180deg, rgba(7,32,46,.82), rgba(6,26,37,.72));
  color: rgba(125,211,252,.98);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: .015em;
  box-shadow: 0 10px 20px rgba(2,6,23,.28);
  backdrop-filter: blur(12px) saturate(1.08);
}
html[data-theme="light"] .msg-unread-separator > span{
  border-color: rgba(14,116,144,.28);
  background: linear-gradient(180deg, rgba(236,253,255,.96), rgba(224,242,254,.9));
  color: rgba(14,116,144,.96);
}

.msg-row{
  display:flex;
  width: 100%;
  padding: 0 5px;
  gap: 0;
  align-items:flex-end;
  position: relative;
  transition: opacity .16s ease, transform .24s cubic-bezier(.2,.8,.25,1), filter .16s ease, gap .24s cubic-bezier(.2,.8,.25,1);
}
.msg-row.is-entering-bottom{
  animation: msg-row-enter-bottom .32s cubic-bezier(.16,.9,.24,1) both;
  will-change: transform, opacity, filter;
}
.msg-row.is-delete-cracking{
  pointer-events: none;
  z-index: 6;
  will-change: transform, opacity, filter;
  animation: msg-row-delete-drop .58s cubic-bezier(.18,.72,.24,1) both;
}
.msg-row.me.is-delete-cracking{
  animation-name: msg-row-delete-drop-me;
}
.msg-row.me{ justify-content:flex-end; }
.msg-select-toggle{
  display: inline-flex;
  width: 0;
  height: 22px;
  min-width: 0;
  border-radius: 999px;
  border: 0;
  background: rgba(148,163,184,.26);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 2px 8px rgba(2,6,23,.22);
  cursor: pointer;
  overflow: hidden;
  transform-origin: center;
  opacity: 0;
  transform: scale(.84);
  pointer-events: none;
  visibility: hidden;
  align-items:center;
  justify-content:center;
  transition:
    background .12s cubic-bezier(.4,0,.2,1),
    box-shadow .12s cubic-bezier(.4,0,.2,1),
    width .24s cubic-bezier(.2,.8,.25,1),
    min-width .24s cubic-bezier(.2,.8,.25,1),
    opacity .2s cubic-bezier(.2,.8,.25,1),
    transform .2s cubic-bezier(.2,.8,.25,1);
}
.msg-select-toggle.is-disabled{
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.msg-select-toggle:hover{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.2),
    0 6px 14px rgba(2,6,23,.26);
}
.msg-select-toggle:focus-visible{
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 0 0 5px rgba(125,211,252,.22),
    0 2px 8px rgba(2,6,23,.22);
}
.msg-select-toggle-mark{
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  display:block;
  position: relative;
  font-size: 0;
  line-height: 0;
}
.msg-select-toggle-mark::after{
  content:"";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("/static/icons/check.svg") center / contain no-repeat;
  mask: url("/static/icons/check.svg") center / contain no-repeat;
  transform: translate(-50%, -50%) scale(.55);
  opacity: 0;
  transition: transform .12s cubic-bezier(.4,0,.2,1), opacity .12s cubic-bezier(.4,0,.2,1);
}
.messages.is-selection-mode .msg-select-toggle{
  width: 22px;
  min-width: 22px;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  visibility: visible;
}
.msg-select-toggle.is-checked{
  background: linear-gradient(160deg, rgba(96,165,250,.98), rgba(14,165,233,.9));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.32),
    0 0 0 3px rgba(56,189,248,.16),
    0 6px 14px rgba(14,116,144,.24);
}
.msg-select-toggle.is-checked .msg-select-toggle-mark::after{
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.msg-row.is-selected-message .msg-bubble{
  border-color: rgba(56,189,248,.72);
  box-shadow: 0 0 0 1px rgba(56,189,248,.3), 0 16px 28px rgba(2,6,23,.34);
}
.messages.is-selection-mode .msg-row{
  cursor: pointer;
  gap: 10px;
}
.messages.is-selection-mode .msg-row,
.messages.is-selection-mode .msg-row *{
  user-select: none;
  -webkit-user-select: none;
}
.messages.is-selection-clearing .msg-select-toggle{
  pointer-events: none;
  width: 0;
  min-width: 0;
  opacity: 0;
  transform: scale(.84);
}
.messages.is-selection-clearing .msg-row{
  gap: 0;
}
.messages.is-selection-mode .msg-row.is-selected-message{
  transform: translateX(2px);
}
html[data-theme="light"] .forward-sheet .pick-check,
html[data-theme="light"] .poll-compose-correct{
  background: rgba(148,163,184,.24);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.4),
    0 2px 8px rgba(15,23,42,.1);
}
html[data-theme="light"] .forward-sheet .pick.is-selected .pick-check,
html[data-theme="light"] .poll-compose-correct:checked{
  background: linear-gradient(160deg, rgba(56,189,248,.94), rgba(2,132,199,.86));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.36),
    0 0 0 3px rgba(56,189,248,.12),
    0 6px 14px rgba(3,105,161,.16);
}
html[data-theme="light"] .msg-row.is-selected-message .msg-bubble{
  border-color: rgba(2,132,199,.5);
  box-shadow: 0 0 0 1px rgba(14,165,233,.24), 0 12px 22px rgba(15,23,42,.16);
}
.msg-bubble{
  max-width: min(680px, 84%);
  padding: 10px 12px;
  border-radius: 24px;
  border: 0;
  background: var(--bubble-in-bg);
  position:relative;
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  isolation: isolate;
  backdrop-filter: blur(14px) saturate(1.16);
}
.msg-row.me .msg-bubble{
  background: var(--bubble-out-bg);
}
.msg-row.is-delete-cracking .msg-bubble{
  overflow: visible;
  transform-origin: 22% 56%;
  will-change: transform, opacity, filter;
  animation: msg-bubble-delete-fracture .58s cubic-bezier(.16,.78,.2,1) both;
}
.msg-row.me.is-delete-cracking .msg-bubble{
  transform-origin: 78% 56%;
  animation-name: msg-bubble-delete-fracture-me;
}
.msg-row.is-delete-cracking .msg-bubble > *{
  animation: msg-bubble-delete-content .58s cubic-bezier(.16,.78,.2,1) both;
}
.msg-row.is-delete-cracking .msg-bubble:not(.msg-bubble-voice-note):not(.msg-bubble-round-video)::before,
.msg-row.is-delete-cracking .msg-bubble:not(.msg-bubble-voice-note):not(.msg-bubble-round-video)::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.msg-row.is-delete-cracking .msg-bubble:not(.msg-bubble-voice-note):not(.msg-bubble-round-video)::before{
  background:
    linear-gradient(var(--delete-crack-angle-a, 130deg), rgba(255,255,255,.34), rgba(255,255,255,.04) 62%),
    repeating-linear-gradient(var(--delete-crack-lines-a, 154deg), rgba(255,255,255,.30) 0 1px, transparent 1px 9px);
  clip-path: polygon(0 0, 64% 0, 46% 100%, 0 100%);
  animation: msg-bubble-delete-shard-a .58s cubic-bezier(.18,.72,.24,1) both;
}
.msg-row.is-delete-cracking .msg-bubble:not(.msg-bubble-voice-note):not(.msg-bubble-round-video)::after{
  background:
    linear-gradient(var(--delete-crack-angle-b, 312deg), rgba(255,255,255,.3), rgba(255,255,255,.04) 64%),
    repeating-linear-gradient(var(--delete-crack-lines-b, 24deg), rgba(255,255,255,.26) 0 1px, transparent 1px 10px);
  clip-path: polygon(58% 0, 100% 0, 100% 100%, 41% 100%);
  animation: msg-bubble-delete-shard-b .58s cubic-bezier(.18,.72,.24,1) both;
}
.msg-row[data-delete-fracture="2"].is-delete-cracking .msg-bubble:not(.msg-bubble-voice-note):not(.msg-bubble-round-video)::before{
  clip-path: polygon(0 0, 56% 0, 38% 100%, 0 100%);
}
.msg-row[data-delete-fracture="2"].is-delete-cracking .msg-bubble:not(.msg-bubble-voice-note):not(.msg-bubble-round-video)::after{
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 30% 100%);
}
.msg-row[data-delete-fracture="3"].is-delete-cracking .msg-bubble:not(.msg-bubble-voice-note):not(.msg-bubble-round-video)::before{
  clip-path: polygon(0 0, 70% 0, 58% 100%, 0 100%);
}
.msg-row[data-delete-fracture="3"].is-delete-cracking .msg-bubble:not(.msg-bubble-voice-note):not(.msg-bubble-round-video)::after{
  clip-path: polygon(64% 0, 100% 0, 100% 100%, 52% 100%);
}
.msg-row[data-delete-fracture="4"].is-delete-cracking .msg-bubble:not(.msg-bubble-voice-note):not(.msg-bubble-round-video)::before{
  clip-path: polygon(0 0, 61% 0, 47% 100%, 0 100%);
}
.msg-row[data-delete-fracture="4"].is-delete-cracking .msg-bubble:not(.msg-bubble-voice-note):not(.msg-bubble-round-video)::after{
  clip-path: polygon(60% 0, 100% 0, 100% 100%, 48% 100%);
}
.msg-row[data-delete-fracture="5"].is-delete-cracking .msg-bubble:not(.msg-bubble-voice-note):not(.msg-bubble-round-video)::before{
  clip-path: polygon(0 0, 68% 0, 50% 100%, 0 100%);
}
.msg-row[data-delete-fracture="5"].is-delete-cracking .msg-bubble:not(.msg-bubble-voice-note):not(.msg-bubble-round-video)::after{
  clip-path: polygon(56% 0, 100% 0, 100% 100%, 36% 100%);
}
@media (prefers-reduced-motion: reduce){
  .msg-row.is-delete-cracking,
  .msg-row.is-delete-cracking .msg-bubble,
  .msg-row.is-delete-cracking .msg-bubble > *,
  .msg-row.is-delete-cracking .msg-bubble::before,
  .msg-row.is-delete-cracking .msg-bubble::after{
    animation: none !important;
  }
}
html[data-theme="light"] .msg-bubble{ box-shadow: 0 10px 22px rgba(15,23,42,.08); }
.msg-bubble.msg-bubble-voice-note,
.msg-bubble.msg-bubble-round-video{
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  /* Round inline video + backdrop blur can trigger square video compositing artifacts while scrolling. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: max-width .22s cubic-bezier(.2,.86,.24,1), padding .22s cubic-bezier(.2,.86,.24,1), border-radius .22s cubic-bezier(.2,.86,.24,1);
}
.msg-row.me .msg-bubble.msg-bubble-voice-note,
.msg-row.me .msg-bubble.msg-bubble-round-video{
  background: transparent;
}
.msg-text{
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.36;
}
.msg-caption{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.msg-bubble.msg-bubble-call{
  min-width: 196px;
}
.msg-call-log{
  display:flex;
  align-items:center;
  gap: 10px;
}
.msg-call-icon{
  width: 18px;
  height: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: none;
  opacity: .9;
}
.msg-call-icon-img{
  width: 18px;
  height: 18px;
  display:block;
  filter: var(--icon-filter);
}
.msg-call-main{
  min-width: 0;
  display:flex;
  flex-direction:column;
  gap: 2px;
}
.msg-call-title{
  font-weight: 760;
  line-height: 1.26;
}
.msg-call-sub{
  font-size: 12px;
  line-height: 1.26;
  color: var(--muted);
}
.msg-reply{
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border-left: 3px solid rgba(124,58,237,.75);
  background: rgba(124,58,237,.14);
}
.msg-reply.is-link{
  cursor: pointer;
  transition: transform .12s ease, background .14s ease, border-color .14s ease;
}
.msg-reply.is-link:hover{
  background: rgba(124,58,237,.24);
  border-left-color: rgba(167,139,250,.92);
  transform: translateY(-1px);
}
.msg-reply.is-link:focus-visible{
  outline: 2px solid rgba(125,211,252,.72);
  outline-offset: 2px;
}
.msg-reply-sender{
  font-size: 11px;
  font-weight: 780;
}
.msg-reply-body{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-poll{
  margin-top: 2px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  border-radius: 16px;
  border: 0;
  background: linear-gradient(180deg, rgba(15,23,42,.28), rgba(15,23,42,.14));
  padding: 10px;
  position: relative;
  overflow: hidden;
}
.msg-poll.is-poll-updated{
  animation: poll-refresh-in .34s cubic-bezier(.2,.86,.24,1);
}
.msg-poll.is-quiz-win{
  border-color: rgba(74,222,128,.62);
  box-shadow: 0 0 0 1px rgba(74,222,128,.28), 0 0 24px rgba(34,197,94,.18);
}
.msg-poll.is-quiz-fail{
  border-color: rgba(251,146,60,.52);
  box-shadow: 0 0 0 1px rgba(249,115,22,.22), 0 0 24px rgba(251,146,60,.12);
}
.msg-poll-question{
  font-weight: 700;
  line-height: 1.34;
}
.msg-poll-sub{
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
}
.msg-poll-options{
  display:flex;
  flex-direction:column;
  gap: 7px;
}
.msg-poll-option{
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  color: inherit;
  padding: 8px;
  text-align: left;
  display:flex;
  flex-direction:column;
  gap: 6px;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.msg-poll-option:hover:not(:disabled){
  border-color: rgba(125,211,252,.56);
  background: rgba(125,211,252,.12);
  transform: translateY(-1px);
}
.msg-poll-option:disabled{
  cursor: default;
}
.msg-poll-option.is-selected{
  border-color: rgba(125,211,252,.62);
  background: rgba(59,130,246,.18);
}
.msg-poll-option.is-correct{
  border-color: rgba(74,222,128,.72);
  background: rgba(34,197,94,.18);
}
.msg-poll-option.is-wrong{
  border-color: rgba(251,146,60,.7);
  background: rgba(249,115,22,.18);
}
.msg-poll-option-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}
.msg-poll-option-text{
  flex:1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.34;
  word-break: break-word;
}
.msg-poll-option-score{
  flex:none;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.msg-poll-option-bar{
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: rgba(148,163,184,.26);
  overflow: hidden;
}
.msg-poll-option-fill{
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(56,189,248,.94), rgba(59,130,246,.92));
  border-radius: 999px;
  transition: width .22s cubic-bezier(.2,.8,.25,1);
}
.msg-poll-footer{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}
.msg-poll-submit,
.msg-poll-info{
  min-height: 32px;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 12px;
}
.msg-poll-result{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}
.msg-poll-result.is-pass{
  color: rgba(134,239,172,.98);
  animation: poll-quiz-pass .5s cubic-bezier(.2,.86,.24,1) both;
}
.msg-poll-result.is-fail{
  color: rgba(253,186,116,.98);
  animation: poll-quiz-fail .46s cubic-bezier(.2,.86,.24,1) both;
}
html[data-theme="light"] .msg-poll{
  border-color: rgba(59,130,246,.26);
  background: linear-gradient(180deg, rgba(248,250,252,.95), rgba(241,245,249,.9));
}
html[data-theme="light"] .msg-poll-option{
  border-color: rgba(148,163,184,.42);
  background: rgba(255,255,255,.68);
}
html[data-theme="light"] .msg-poll-option.is-selected{
  background: rgba(191,219,254,.62);
}
html[data-theme="light"] .msg-poll-option.is-correct{
  background: rgba(187,247,208,.72);
}
html[data-theme="light"] .msg-poll-option.is-wrong{
  background: rgba(254,215,170,.72);
}
@keyframes poll-refresh-in{
  0%{
    transform: translateY(5px) scale(.985);
    opacity: .68;
  }
  100%{
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
@keyframes poll-quiz-pass{
  0%{
    transform: translateY(3px);
    opacity: .82;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes poll-quiz-fail{
  0%{
    transform: translateX(-4px);
    opacity: .82;
  }
  50%{
    transform: translateX(3px);
  }
  100%{
    transform: translateX(0);
    opacity: 1;
  }
}
.msg-meta{
  margin-top: 6px;
  display:flex;
  gap: 8px;
  align-items:center;
  justify-content:flex-end;
  font-size: 11px;
  line-height: 1;
  color: var(--muted);
  opacity: .9;
}
.msg-meta-time{
  display:flex;
  align-items:center;
  user-select: none;
  -webkit-user-select: none;
}
.checks{
  --check-stroke: 2px;
  display:inline-flex;
  align-items:center;
  gap: 2px;
  padding: 2px 4px;
  border-radius: 2px;
  color: var(--muted);
  transform: translateY(-1px);
  transition: color .22s ease, transform .2s ease, filter .2s ease;
}
.check{
  width: 4px;
  height: 9px;
  border-right: var(--check-stroke) solid currentColor;
  border-bottom: var(--check-stroke) solid currentColor;
  border-radius: 1px;
  opacity: .86;
  transform: rotate(44deg);
  transform-origin: 50% 72%;
  transition: opacity .18s ease, transform .24s cubic-bezier(.2,.86,.24,1);
}
.checks.double .check:first-child{
  width: 5px;
  margin-right: 0;
  opacity: .86;
  transform: rotate(44deg);
}
.checks.double .check:last-child{
  margin-left: 0;
}

.msg-file{
  position: relative;
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 12px;
  padding-right: 82px;
  min-height: 70px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: var(--file-bg);
  cursor:pointer;
  transition: transform .08s ease, background .15s ease;
}
.msg-file:hover{ background: var(--file-bg-hover); }
.msg-file:active{ transform: scale(.99); }
.msg-row.is-jump-focus .msg-bubble{
  border-color: rgba(125,211,252,.72);
  box-shadow: 0 0 0 1px rgba(125,211,252,.42), 0 18px 32px rgba(2,6,23,.36);
  animation: msg-jump-focus .9s ease;
}
.msg-row.is-search-match .msg-bubble{
  border-color: rgba(125,211,252,.44);
}
.msg-row.is-search-active .msg-bubble{
  border-color: rgba(125,211,252,.86);
  box-shadow: 0 0 0 1px rgba(125,211,252,.46), 0 18px 30px rgba(2,6,23,.34);
}
.msg-row.is-pressed .msg-bubble{
  border-color: rgba(125,211,252,.72);
  box-shadow: 0 0 0 1px rgba(125,211,252,.34), 0 18px 32px rgba(2,6,23,.36);
}
.msg-row.is-jump-focus .msg-bubble.msg-bubble-round-video,
.msg-row.is-search-match .msg-bubble.msg-bubble-round-video,
.msg-row.is-pressed .msg-bubble.msg-bubble-round-video,
.msg-row.is-search-active .msg-bubble.msg-bubble-round-video{
  border-color: transparent;
  box-shadow: none;
}
.msg-row.is-jump-focus .msg-bubble.msg-bubble-round-video .msg-round-video-wrap{
  border-color: rgba(125,211,252,.72);
  box-shadow: 0 0 0 1px rgba(125,211,252,.42), 0 18px 32px rgba(2,6,23,.36);
  animation: msg-jump-focus .9s ease;
}
.msg-row.is-search-match .msg-bubble.msg-bubble-round-video .msg-round-video-wrap{
  border-color: rgba(125,211,252,.44);
}
.msg-row.is-pressed .msg-bubble.msg-bubble-round-video .msg-round-video-wrap{
  border-color: rgba(125,211,252,.72);
  box-shadow: 0 0 0 1px rgba(125,211,252,.34), 0 18px 32px rgba(2,6,23,.36);
}
.msg-row.is-search-active .msg-bubble.msg-bubble-round-video .msg-round-video-wrap{
  border-color: rgba(125,211,252,.86);
  box-shadow: 0 0 0 1px rgba(125,211,252,.46), 0 18px 30px rgba(2,6,23,.34);
}
@keyframes msg-jump-focus{
  0%{ transform: scale(.985); }
  35%{ transform: scale(1.01); }
  100%{ transform: scale(1); }
}
.msg-forwarded{
  margin-bottom: 8px;
  display:inline-flex;
  align-items:center;
  gap: 6px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.34);
  background: rgba(15,23,42,.26);
  color: rgba(226,232,240,.94);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 4px 8px;
}
.msg-forwarded-icon{
  font-size: 12px;
  line-height: 1;
}
.msg-image-wrap{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.24);
  min-width: 180px;
}
.msg-image-wrap.is-manual{
  min-height: 220px;
  cursor: pointer;
}
.msg-image{
  width: min(280px, 100%);
  max-height: 340px;
  object-fit: cover;
  display:block;
}
.msg-image-label{
  position:absolute;
  left:10px;
  bottom:10px;
  background: rgba(15,17,23,.72);
  border:1px solid var(--border);
  border-radius: 10px;
  font-size: 11px;
  padding: 4px 7px;
}
.msg-media-size{
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 4;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.36);
  background: rgba(9,14,28,.74);
  color: rgba(241,245,249,.96);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 4px 8px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 16px rgba(2,6,23,.36);
}
.msg-file-size{
  top: 8px;
  right: 10px;
}
.msg-media-meta{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 6px;
  pointer-events: none;
}
.msg-media-meta .msg-media-size{
  position: static;
  top: auto;
  right: auto;
}
.msg-video-duration{
  background: rgba(4,9,21,.72);
}
.msg-download-cancel{
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 6;
  border: 1px solid rgba(248,113,113,.46);
  background: rgba(127,29,29,.58);
  color: rgba(254,226,226,.98);
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 760;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(.95);
  transition: opacity .2s ease, transform .22s ease, background .16s ease;
}
.msg-download-cancel:hover{
  background: rgba(185,28,28,.65);
}
.msg-download-cancel-glyph{
  font-size: 14px;
  line-height: 1;
}
.msg-row.has-download-transfer .msg-bubble{
  box-shadow: 0 20px 36px rgba(15,23,42,.28);
}
.msg-row.has-download-transfer.is-download-offscreen .msg-bubble{
  border-style: dashed;
  border-color: rgba(125,211,252,.44);
}
.msg-row.has-download-transfer.is-download-detached .msg-download-cancel{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.msg-image-wrap.is-loading .image-inline-loader{
  display:flex;
}
.msg-media-manual{
  position:absolute;
  inset: 0;
  z-index: 3;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px;
  background: linear-gradient(180deg, rgba(2,6,23,.42), rgba(2,6,23,.58));
}
.msg-media-manual-btn{
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(2,6,23,.64);
  color: rgba(241,245,249,.96);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 8px 14px;
  cursor: pointer;
}
.msg-media-manual-btn:hover{
  background: rgba(2,6,23,.78);
}
.media-loader{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  display:none;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(9,12,20,.72);
  color: var(--text);
  z-index: 3;
  pointer-events:none;
}
.media-loader.is-interactive{
  pointer-events:auto;
  gap:10px;
  max-width: calc(100% - 16px);
}
.media-loader-video{
  --media-progress: 0;
  --tg-ring-circumference: 176;
  display:none;
  align-items:center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(8,12,24,.78);
  box-shadow: 0 10px 28px rgba(2,6,23,.45);
  width: min(248px, calc(100% - 16px));
}
html[data-theme="light"] .media-loader-video{
  border-color: rgba(100,116,139,.28);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(15,23,42,.16);
}
.media-loader-video.is-visible{
  display:flex;
}
.media-loader-video.is-dialog{
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  margin: 2px auto 0;
  width: min(340px, 100%);
  max-width: 100%;
}
.tg-loader-core{
  border: 0;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.16), rgba(8,12,24,.55));
  padding: 0;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  position: relative;
  display:grid;
  place-items:center;
  cursor: pointer;
  flex: none;
}
.tg-loader-core.is-disabled{
  cursor: default;
}
.tg-loader-core:focus-visible{
  outline: 2px solid rgba(125,211,252,.7);
  outline-offset: 2px;
}
.tg-loader-ring{
  width: 64px;
  height: 64px;
  transform: rotate(-90deg);
}
.tg-loader-track{
  fill: none;
  stroke: rgba(148,163,184,.3);
  stroke-width: 4;
}
.tg-loader-bar{
  fill: none;
  stroke: #38bdf8;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: var(--tg-ring-circumference);
  stroke-dashoffset: calc(var(--tg-ring-circumference) - ((var(--tg-ring-circumference) * var(--media-progress)) / 100));
  transition: stroke-dashoffset .16s linear;
}
.media-loader-video.is-indeterminate .tg-loader-ring{
  animation: tg-loader-spin .85s linear infinite;
}
.media-loader-video.is-indeterminate .tg-loader-value{
  opacity: .8;
}
.media-loader-video.is-error .tg-loader-bar{
  stroke: #ef4444;
}
.tg-loader-value{
  position:absolute;
  inset: 0;
  display:grid;
  place-items:center;
  font-size: 30px;
  font-weight: 500;
  color: rgba(241,245,249,.98);
  text-shadow: 0 1px 8px rgba(2,6,23,.45);
  letter-spacing: .01em;
}
html[data-theme="light"] .tg-loader-value{
  color: rgba(15,23,42,.9);
}
.tg-loader-meta{
  min-width: 0;
  display:flex;
  flex-direction:column;
  gap: 2px;
}
.tg-loader-status{
  font-size: 12px;
  font-weight: 700;
  color: rgba(241,245,249,.96);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-theme="light"] .tg-loader-status{
  color: rgba(15,23,42,.88);
}
.tg-loader-bytes{
  font-size: 11px;
  color: rgba(148,163,184,.95);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html[data-theme="light"] .tg-loader-bytes{
  color: rgba(71,85,105,.9);
}
.tg-loader-bytes.is-hidden{
  display:none;
}
.media-loader-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(124,58,237,.95);
  box-shadow: 0 0 0 0 rgba(124,58,237,.6);
  animation: media-pulse 1.2s ease infinite;
}
.media-loader-text{
  font-size: 11px;
  color: var(--muted);
}
.media-loader-progress{
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.media-loader-progress.is-hidden{
  display:none;
}
.media-loader-cancel{
  border: 1px solid rgba(239,68,68,.45);
  background: rgba(127,29,29,.45);
  color: rgba(254,226,226,.98);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.media-loader-cancel:hover{
  background: rgba(185,28,28,.55);
}
@keyframes media-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(124,58,237,.45); }
  80%{ box-shadow: 0 0 0 9px rgba(124,58,237,0); }
  100%{ box-shadow: 0 0 0 0 rgba(124,58,237,0); }
}
@keyframes tg-loader-spin{
  from{ transform: rotate(-90deg); }
  to{ transform: rotate(270deg); }
}
.msg-video-wrap{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: rgba(0,0,0,.34);
  min-width: 220px;
  box-shadow: 0 16px 32px rgba(0,0,0,.24);
}
.msg-video-wrap.is-manual{
  cursor: pointer;
}
.msg-video{
  width: min(360px, 100%);
  max-height: 360px;
  display:block;
  background: rgba(0,0,0,.45);
  object-fit: cover;
}
.msg-video-wrap.is-manual .msg-video{
  min-height: 240px;
  opacity: .28;
}
.msg-video-wrap.has-poster .msg-video{
  opacity: 1;
}
.msg-video-wrap.is-manual.has-poster .msg-video{
  opacity: .96;
}
.msg-video-wrap.is-manual::after{
  background: linear-gradient(180deg, rgba(4,7,14,.12) 42%, rgba(4,7,14,.72) 100%);
}
.msg-video-wrap::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4,7,14,.08) 52%, rgba(4,7,14,.62) 100%);
}
.msg-video-wrap.is-loading .video-inline-loader,
.msg-video-wrap.is-buffering .video-inline-loader{
  display:flex;
}
.msg-video-wrap.is-loading .msg-video-play,
.msg-video-wrap.is-loading .msg-video-controls{
  opacity: 0;
  pointer-events: none;
}
.msg-video-wrap .msg-image-label{
  bottom: auto;
  top: 10px;
  z-index: 3;
}
.msg-video-open{
  position: absolute;
  top: 10px;
  right: 10px;
  border: 1px solid var(--border);
  background: rgba(15,17,23,.76);
  color: var(--text);
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.msg-video-play{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.36);
  background: rgba(8,10,18,.44);
  color: rgba(241,245,249,.98);
  backdrop-filter: blur(8px) saturate(1.1);
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index: 3;
  transition: transform .14s ease, background .14s ease, opacity .18s ease;
}
.msg-video-play:hover{
  transform: translate(-50%, -50%) scale(1.04);
  background: rgba(8,10,18,.56);
}
.msg-video-play-glyph{
  font-size: 18px;
  line-height: 1;
}
.msg-video-play-manual{
  width: 86px;
  height: 86px;
  border-width: 2px;
  background: rgba(7,13,28,.44);
  opacity: 0;
  pointer-events: none;
}
.msg-video-play-manual .msg-video-play-glyph{
  font-size: 30px;
  transform: translateX(2px);
}
.msg-video-wrap.is-manual .msg-video-play-manual{
  opacity: 1;
  pointer-events: auto;
}
.msg-video-wrap.is-playing .msg-video-play{
  opacity: .18;
}
.msg-video-controls{
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items:center;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(8,11,20,.62);
  backdrop-filter: blur(9px) saturate(1.12);
  border-radius: 12px;
  padding: 6px 8px;
}
.msg-video-controls.has-open{
  grid-template-columns: auto 1fr auto auto;
}
.msg-video-time{
  font-size: 11px;
  font-weight: 700;
  color: rgba(241,245,249,.95);
  font-variant-numeric: tabular-nums;
  min-width: 78px;
}
.msg-video-progress{
  position: relative;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.16);
  cursor:pointer;
  overflow:hidden;
}
.msg-video-progress-fill{
  position:absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(124,58,237,.92), rgba(34,197,94,.84));
}
.msg-video-tool{
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  background: rgba(15,23,42,.44);
  color: rgba(241,245,249,.96);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .04em;
  padding: 4px 7px;
  cursor:pointer;
}
.msg-video-tool:hover{
  background: rgba(15,23,42,.62);
}
.msg-round-video-wrap{
  --round-progress: 0;
  position: relative;
  width: 216px;
  height: 216px;
  border-radius: 50%;
  overflow: visible;
  border: 1px solid var(--border);
  background: radial-gradient(circle at 30% 20%, rgba(124,58,237,.22), rgba(0,0,0,.3));
  cursor: pointer;
  isolation: isolate;
  transform: scale(1);
  transition: width .18s cubic-bezier(.2,.86,.24,1), height .18s cubic-bezier(.2,.86,.24,1), border-radius .25s cubic-bezier(.2,.86,.24,1), transform .08s linear, box-shadow .16s ease, border-color .16s ease;
  will-change: width, height, transform;
}
.msg-row.is-round-expanded .msg-bubble.msg-bubble-round-video{
  max-width: min(452px, 92vw);
  padding: 0;
  border-radius: 0;
}
.msg-row.is-round-expanded .msg-round-video-wrap{
  width: min(332px, 78vw);
  height: min(332px, 78vw);
  border-radius: 50%;
  border-color: rgba(125,211,252,.52);
  box-shadow: 0 16px 36px rgba(15,23,42,.44);
  transform: scale(1);
}
.msg-row.is-round-expanded .msg-round-video-wrap.is-round-square{
  border-radius: 20px;
}
.msg-row.is-round-expanded .msg-round-video-wrap.is-round-square .msg-round-progress-ring{
  opacity: .06;
}
.msg-round-progress-ring{
  position: absolute;
  inset: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  pointer-events: none;
  z-index: 3;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.msg-round-progress-track,
.msg-round-progress-fill{
  fill: none;
  stroke-width: .8;
}
.msg-round-progress-track{
  stroke: transparent;
  display: none;
}
.msg-round-progress-fill{
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: none;
}
.msg-round-video-clip{
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 99.6%, transparent 100%);
  mask-image: radial-gradient(circle at 50% 50%, #000 99.6%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.msg-round-video-wrap::before{
  content:"";
  position:absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1.8px solid rgba(255,255,255,.14);
  pointer-events:none;
  z-index: 2;
}
.msg-round-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center center;
  display:block;
  background: transparent;
  transition: transform .2s ease, opacity .2s ease;
  transform: none;
  -webkit-transform: none;
  backface-visibility: visible;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 99.6%, transparent 100%);
  mask-image: radial-gradient(circle at 50% 50%, #000 99.6%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@media (hover: hover) and (pointer: fine){
  .msg-round-video-wrap:hover .msg-round-video{
    transform: scale(1.01);
  }
}
.msg-round-video-wrap.is-loading .msg-round-video,
.msg-round-video-wrap.is-buffering .msg-round-video{
  opacity: .44;
}
.msg-round-video-wrap.has-poster .msg-round-video{
  opacity: 1;
}
.msg-round-video-wrap.has-poster.is-loading .msg-round-video,
.msg-round-video-wrap.has-poster.is-buffering .msg-round-video{
  opacity: .8;
}
.msg-video-wrap.is-error,
.msg-round-video-wrap.is-error{
  border-color: rgba(239,68,68,.48);
}
.msg-round-video-wrap.is-loading .video-inline-loader,
.msg-round-video-wrap.is-buffering .video-inline-loader{
  display:flex;
}
.msg-round-video-wrap.is-manual{
  cursor: pointer;
}
.msg-round-video-wrap.is-round-square .msg-round-video-clip,
.msg-round-video-wrap.is-round-square .msg-round-video{
  -webkit-mask-image: none;
  mask-image: none;
}
.round-video-shape-handle{
  --round-handle-drag-x: 0px;
  --round-handle-drag-y: 0px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(9,12,20,.76), rgba(2,6,23,.58));
  box-shadow: 0 8px 14px rgba(2,6,23,.36), inset 0 1px 0 rgba(255,255,255,.22);
  color: rgba(226,232,240,.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  transform: translate(
    var(--round-handle-drag-x),
    calc(6px + var(--round-handle-drag-y))
  ) scale(.9);
  transition: opacity .16s ease, transform .2s cubic-bezier(.2,.86,.24,1), border-color .16s ease, background .16s ease;
  cursor: grab;
  touch-action: none;
}
.round-video-shape-handle:active{
  cursor: grabbing;
}
.msg-round-video-wrap.is-expanded:not(.is-loading):not(.is-paused) .round-video-shape-handle{
  opacity: 1;
  pointer-events: auto;
  transform: translate(var(--round-handle-drag-x), var(--round-handle-drag-y)) scale(1);
}
.msg-round-video-wrap.is-shape-dragging .round-video-shape-handle{
  box-shadow: 0 10px 16px rgba(2,6,23,.42), inset 0 1px 0 rgba(255,255,255,.26);
}
.msg-round-video-wrap.is-round-square .round-video-shape-handle{
  background: linear-gradient(180deg, rgba(30,41,59,.86), rgba(15,23,42,.74));
}
.round-video-shape-handle-glyph{
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 0 0 2px 0;
  transform: rotate(0deg);
  opacity: .9;
  transform-origin: 50% 50%;
  transition: transform .34s cubic-bezier(.2,.86,.24,1.16), opacity .2s ease;
  will-change: transform;
}
.msg-round-video-wrap.is-round-square .round-video-shape-handle-glyph{
  transform: translate(1px, 1px) rotate(180deg);
}
.round-video-badge{
  position:absolute;
  left:50%;
  bottom: 12px;
  transform: translateX(-50%);
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.3);
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.04)),
    linear-gradient(135deg, rgba(99,102,241,.28), rgba(56,189,248,.18) 52%, rgba(16,185,129,.15));
  color: rgba(247,251,255,.96);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .045em;
  text-shadow: 0 1px 6px rgba(15,23,42,.45), 0 0 8px rgba(125,211,252,.2);
  padding: 4px 11px;
  z-index: 4;
  overflow:hidden;
  isolation:isolate;
  box-shadow:
    0 6px 14px rgba(2,6,23,.3),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(12px) saturate(1.35);
  -webkit-backdrop-filter: blur(12px) saturate(1.35);
}
.round-video-badge::before{
  content:"";
  position:absolute;
  inset: 1px 2px auto 2px;
  height: 52%;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0));
  opacity: .4;
}
.round-video-badge::after{
  content:"";
  position:absolute;
  inset: -24% -38%;
  pointer-events:none;
  background: radial-gradient(circle at 40% 26%, rgba(255,255,255,.16), rgba(255,255,255,0) 58%);
  mix-blend-mode: screen;
}
html[data-theme="light"] .round-video-badge{
  border-color: rgba(71,85,105,.26);
  background:
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.24)),
    linear-gradient(135deg, rgba(99,102,241,.2), rgba(56,189,248,.14) 52%, rgba(16,185,129,.11));
  color: rgba(15,23,42,.94);
  text-shadow: 0 1px 5px rgba(255,255,255,.35);
}
html[data-theme="light"] .round-video-badge::after{
  opacity: .34;
}
html[data-theme="light"] .round-video-shape-handle{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,245,249,.88));
  color: rgba(15,23,42,.86);
  box-shadow: 0 8px 14px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.9);
}
.msg-audio-card{
  --voice-wave-base: rgba(208,222,255,.34);
  --voice-wave-active: rgba(150,229,255,.98);
  --voice-wave-glow: rgba(127,207,255,.62);
  --voice-wave-speed: 1;
  position: relative;
  width: min(470px, 78vw);
  max-width: 100%;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 25px;
  background:
    radial-gradient(140% 130% at 12% 8%, rgba(170,210,255,.16), transparent 56%),
    var(--audio-in-bg);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 14px 30px rgba(5,10,30,.3);
  padding: 11px 13px 9px;
  display:grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  gap: 7px 11px;
  align-items:center;
  overflow:hidden;
  isolation: isolate;
}
.msg-audio-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  opacity:.42;
  background: linear-gradient(90deg, rgba(255,255,255,.12), transparent 22%, transparent 78%, rgba(255,255,255,.08));
}
.msg-audio-card > *{
  position: relative;
  z-index: 1;
}
.msg-row.me .msg-audio-card{
  background:
    radial-gradient(145% 130% at 14% 10%, rgba(178,220,255,.15), transparent 56%),
    var(--audio-out-bg);
}
.msg-row.me .msg-audio-card::before{
  opacity:.34;
}
.msg-audio-card.voice-deep{
  --voice-wave-base: rgba(186,188,255,.34);
  --voice-wave-active: #acb8ff;
  --voice-wave-glow: rgba(154,163,255,.62);
  --voice-wave-speed: 0.82;
}
.msg-audio-card.voice-balanced{
  --voice-wave-base: rgba(208,222,255,.34);
  --voice-wave-active: rgba(150,229,255,.98);
  --voice-wave-glow: rgba(127,207,255,.62);
  --voice-wave-speed: 1;
}
.msg-audio-card.voice-bright{
  --voice-wave-base: rgba(188,255,240,.32);
  --voice-wave-active: #8fffe6;
  --voice-wave-glow: rgba(97,255,229,.62);
  --voice-wave-speed: 1.22;
}
.msg-audio-card.is-loading .audio-inline-loader,
.msg-audio-card.is-buffering .audio-inline-loader,
.msg-audio-card.is-manual .audio-inline-loader{
  display:flex;
}
.msg-audio-card.is-error{
  border-color: rgba(239,68,68,.55);
  background: rgba(239,68,68,.12);
  box-shadow: none;
}
.audio-play-btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: radial-gradient(130% 130% at 30% 20%, rgba(255,255,255,.3), rgba(255,255,255,.08));
  color: rgba(236,244,255,.96);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
  display:grid;
  place-items:center;
  cursor:pointer;
  grid-row: 1 / span 2;
  transition: transform .15s ease, border-color .2s ease, background .2s ease;
}
.audio-play-btn:hover{
  transform: translateY(-1px);
}
.audio-play-btn:active{
  transform: translateY(0);
}
.audio-play-glyph{
  font-size: 15px;
  line-height: 1;
}
.audio-wave-host{
  min-height: 34px;
  min-width: 0;
  overflow: hidden;
  display:flex;
  align-items:center;
  cursor: pointer;
}
.audio-wave-scene{
  position: relative;
  width: 100%;
  height: 34px;
  min-width: 0;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.audio-wave-svg{
  width: 100%;
  height: 100%;
  display:block;
  overflow:visible;
}
.audio-wave-base{
  stroke: var(--voice-wave-base);
  stroke-width: 2.2px;
  opacity: .72;
}
.audio-wave-ghost{
  stroke: var(--voice-wave-base);
  pointer-events: none;
}
.audio-wave-ghost-near{
  stroke-width: 1.6px;
  opacity: .27;
}
.audio-wave-ghost-far{
  stroke-width: 1.3px;
  opacity: .18;
}
.audio-wave-glow{
  stroke: var(--voice-wave-glow);
  stroke-width: 7.6px;
  opacity: .45;
  filter: blur(4px);
  transition: stroke-dashoffset .06s linear;
}
.audio-wave-progress{
  stroke: var(--voice-wave-active);
  stroke-width: 2.7px;
  filter: drop-shadow(0 0 6px var(--voice-wave-glow));
  transition: stroke-dashoffset .06s linear;
}
.audio-wave-scene.is-playing .audio-wave-progress{
  animation: audio-wave-glow calc(1.7s / var(--voice-wave-speed, 1)) ease-in-out infinite alternate;
}
@keyframes audio-wave-glow{
  from{ filter: drop-shadow(0 0 4px var(--voice-wave-glow)); }
  to{ filter: drop-shadow(0 0 10px var(--voice-wave-glow)); }
}
.audio-meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.audio-time{
  font-size: 12px;
  color: rgba(233,241,255,.95);
  text-shadow: 0 1px 0 rgba(0,0,0,.22);
  font-variant-numeric: tabular-nums;
}
.audio-tag{
  font-size: 11px;
  color: rgba(216,229,255,.78);
  letter-spacing: .02em;
}
.audio-inline-loader{
  left: 54%;
  top: 50%;
}
.msg-audio{
  width: min(320px, 72vw);
}
html[data-theme="light"] .msg-audio-card{
  border-color: rgba(15,23,42,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 10px 22px rgba(15,23,42,.14);
}
html[data-theme="light"] .audio-play-btn{
  color: rgba(15,23,42,.86);
  border-color: rgba(15,23,42,.14);
  background: radial-gradient(130% 130% at 30% 20%, rgba(255,255,255,.88), rgba(255,255,255,.56));
}
html[data-theme="light"] .audio-time{
  color: rgba(15,23,42,.82);
  text-shadow: none;
}
html[data-theme="light"] .audio-tag{
  color: rgba(30,41,59,.62);
}
.msg-upload-row{ animation: fade-up .18s ease both; }
.msg-upload-bubble{
  min-width: min(360px, 82vw);
}
.msg-upload-title{
  font-weight: 760;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-upload-status{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
.msg-upload-track{
  margin-top: 8px;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  border: 0;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  position: relative;
}
.msg-upload-fill{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--ui-accent), rgba(34,197,94,.75));
  transition: width .16s ease;
}
.msg-upload-track.is-indeterminate .msg-upload-fill{
  width: 40%;
  animation: upload-indeterminate 1.15s linear infinite;
}
.msg-upload-actions{
  margin-top: 10px;
  display:flex;
  justify-content:flex-end;
}
.msg-upload-cancel{
  min-height: 30px;
  padding: 6px 10px;
  border: 0;
}
.msg-upload-bubble.is-failed{
  border-color: rgba(239,68,68,.55);
  background: rgba(239,68,68,.12);
}
.msg-upload-bubble.is-canceled{
  border-color: rgba(148,163,184,.42);
  background: rgba(71,85,105,.18);
}
.download-hud{
  position: absolute;
  left: 14px;
  right: 14px;
  top: 8px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.34);
  background: linear-gradient(135deg, rgba(9,14,27,.94), rgba(7,12,24,.86));
  box-shadow: 0 18px 34px rgba(2,6,23,.44);
  backdrop-filter: blur(14px) saturate(1.08);
  overflow: hidden;
  pointer-events: auto;
  transform: translateY(-8px) scale(.98);
  opacity: 0;
  transition: transform .24s ease, opacity .24s ease, box-shadow .2s ease;
}
.download-hud.is-visible{
  transform: translateY(0) scale(1);
  opacity: 1;
}
.download-hud.is-pulse{
  animation: download-hud-pulse .34s ease;
}
.download-hud.is-error{
  border-color: rgba(248,113,113,.52);
}
.download-hud.is-canceled{
  border-color: rgba(148,163,184,.48);
}
.download-hud-strip{
  position: relative;
  height: 4px;
  background: rgba(148,163,184,.26);
  overflow: hidden;
}
.download-hud-strip-fill{
  display:block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(139,92,246,.98), rgba(56,189,248,.96), rgba(34,197,94,.88));
  transition: width .16s ease;
}
.download-hud-strip.is-indeterminate .download-hud-strip-fill{
  width: 36%;
  animation: upload-indeterminate 1.05s linear infinite;
}
.download-hud-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 8px 10px 0;
}
.download-hud-title{
  font-size: 12px;
  font-weight: 760;
  color: rgba(226,232,240,.98);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.download-hud-cancel{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(248,113,113,.44);
  background: rgba(127,29,29,.52);
  color: rgba(254,226,226,.98);
  display:grid;
  place-items:center;
  cursor: pointer;
  flex: none;
  transition: transform .16s ease, background .16s ease;
}
.download-hud-cancel:hover{
  transform: scale(1.05);
  background: rgba(185,28,28,.62);
}
.download-hud-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding: 4px 10px 10px;
}
.download-hud-status{
  font-size: 12px;
  color: rgba(226,232,240,.96);
  font-weight: 650;
}
.download-hud-bytes{
  font-size: 12px;
  color: rgba(148,163,184,.96);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .download-hud{
  border-color: rgba(100,116,139,.3);
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(241,245,249,.9));
  box-shadow: 0 16px 28px rgba(15,23,42,.2);
}
html[data-theme="light"] .download-hud-title{
  color: rgba(15,23,42,.92);
}
html[data-theme="light"] .download-hud-status{
  color: rgba(30,41,59,.92);
}
html[data-theme="light"] .msg-media-size{
  border-color: rgba(100,116,139,.3);
  background: rgba(255,255,255,.9);
  color: rgba(15,23,42,.9);
}
@keyframes download-hud-pulse{
  0%{ box-shadow: 0 18px 34px rgba(2,6,23,.44); }
  50%{ box-shadow: 0 22px 40px rgba(59,130,246,.26); }
  100%{ box-shadow: 0 18px 34px rgba(2,6,23,.44); }
}
@media (max-width: 760px){
  .messages.has-download-hud{
    padding-top: calc(var(--chat-header-height) + 86px);
  }
  .chat-media-bar{
    left: 10px;
    right: 10px;
  }
  .chat-media-progress{
    --chat-media-progress-height: 6px;
  }
  .chat-media-body{
    padding: 1px 7px 7px;
    gap: 6px;
  }
  .chat-media-play{
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 15px;
  }
  .chat-media-btn{
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }
  .chat-media-rate{
    min-width: 44px;
    padding: 0 7px;
    font-size: 11px;
  }
  .chat-media-main{
    padding: 6px 8px;
    gap: 7px;
  }
  .chat-media-avatar-slot,
  .chat-media-avatar-slot .avatar{
    width: 28px;
    height: 28px;
    min-width: 28px;
  }
  .chat-media-title{
    font-size: 12px;
  }
  .chat-media-subtitle{
    font-size: 11px;
  }
  .chat-media-popover{
    top: calc(100% + 3px);
  }
  .chat-media-speed-popover{
    min-width: 186px;
    right: -1px;
    padding: 9px 10px;
  }
  .chat-media-popover-title{
    font-size: 10px;
  }
  .chat-media-popover-value{
    font-size: 12px;
  }
  .chat-media-volume-popover{
    width: 68px;
    min-width: 68px;
    right: -4px;
    padding: 9px 7px 8px;
  }
  .chat-media-volume-slider-wrap{
    width: 22px;
    height: 104px;
    margin: 3px 0 2px;
  }
  .chat-media-volume-slider{
    width: 96px;
  }
  .download-hud{
    left: 10px;
    right: 10px;
    top: 6px;
  }
  .download-hud-head{
    padding: 8px 9px 0;
  }
  .download-hud-meta{
    padding: 4px 9px 9px;
  }
  .download-hud-cancel{
    width: 28px;
    height: 28px;
  }
}
@keyframes upload-indeterminate{
  from{ transform: translateX(-120%); }
  to{ transform: translateX(320%); }
}
.msg-reactions{
  margin-top: 8px;
  display:flex;
  flex-wrap: wrap;
  gap:6px;
}
.msg-reaction{
  border: 0;
  background: rgba(34,197,94,.20);
  color: var(--text);
  border-radius: 999px;
  padding: 4px 8px 4px 5px;
  min-height: 30px;
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-size: 12px;
  cursor:pointer;
  transform-origin: center;
  transition: background .14s ease, transform .24s cubic-bezier(.2,.8,.25,1), opacity .2s ease;
}
.msg-reaction.is-entering{
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(.86);
}
.msg-reaction.is-ghost{
  transition: none !important;
}
.msg-reaction:hover{
  background: rgba(34,197,94,.30);
  transform: translateY(-1px);
}
.msg-reaction.is-me{
  background: rgba(34,197,94,.34);
}
.msg-reaction-avatar{
  width: 20px;
  height: 20px;
  border: 0;
  background: rgba(255,255,255,.16);
}
.msg-reaction-emoji{
  font-size: 17px;
  line-height: 1;
}
.msg-reaction-count{
  font-weight: 760;
  font-size: 10px;
  opacity: .88;
  margin-left: 1px;
}
.msg-reaction-count.is-hidden{
  display: none;
}
.file-icon{
  width:40px; height:40px;
  border-radius: 16px;
  background: var(--ui-accent-soft);
  border:1px solid var(--ui-accent-border);
  display:flex; align-items:center; justify-content:center;
  font-weight: 800;
  color: var(--text);
  flex:none;
}
.file-meta{ min-width:0; flex:1; }
.file-name{ font-weight: 760; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; }
.file-sub{ font-size: 12px; color: var(--muted); margin-top:2px; }

.typing{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  display:flex;
  gap:6px;
  align-items:center;
}
.dots{ display:inline-flex; gap:3px; }
.dot{
  width:5px; height:5px; border-radius: 999px;
  background: var(--muted);
  opacity:.55;
  animation: bounce 1.1s infinite;
}
.dot:nth-child(2){ animation-delay:.15s; }
.dot:nth-child(3){ animation-delay:.3s; }
@keyframes bounce{
  0%, 100%{ transform: translateY(0); opacity:.55; }
  50%{ transform: translateY(-4px); opacity:1; }
}
.composer{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--glass-border);
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, rgba(15,20,34,.62), rgba(15,20,34,.38));
  backdrop-filter: blur(24px) saturate(1.22);
  -webkit-backdrop-filter: blur(24px) saturate(1.22);
}
.jump-latest-btn,
.jump-round-btn{
  position: absolute;
  right: 18px;
  z-index: 18;
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--ui-accent-border);
  background: radial-gradient(circle at 30% 28%, rgba(196,181,253,.44), rgba(124,58,237,.56));
  color: rgba(241,245,249,.98);
  box-shadow: 0 12px 28px rgba(76,29,149,.34);
  backdrop-filter: blur(10px) saturate(1.12);
  display:grid;
  place-items:center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(.94);
  transition: opacity .2s ease, transform .22s ease, background .16s ease, border-color .16s ease;
}
.jump-latest-btn{
  bottom: calc(var(--chat-composer-height) + 16px);
}
.jump-round-btn{
  bottom: calc(var(--chat-composer-height) + 72px);
}
.jump-latest-btn.is-visible,
.jump-round-btn.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.jump-latest-btn:hover,
.jump-round-btn:hover{
  border-color: rgba(167,139,250,.74);
  background: radial-gradient(circle at 30% 28%, rgba(216,180,254,.5), rgba(124,58,237,.68));
}
.main.has-selection-mode .jump-latest-btn,
.main.has-selection-mode .jump-round-btn{
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(14px) scale(.92) !important;
}
.jump-latest-icon{
  font-size: 24px;
  line-height: 1;
  display: block;
  transform: none;
}
.jump-latest-badge{
  position: absolute;
  top: -5px;
  right: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  background: linear-gradient(180deg, rgba(248,113,113,.98), rgba(220,38,38,.96));
  box-shadow: 0 8px 18px rgba(127,29,29,.34);
  border: 1px solid rgba(255,255,255,.2);
}
.jump-latest-badge.is-hidden{
  display: none;
}
.jump-round-icon{
  width: 18px;
  height: 18px;
  position: relative;
  display: block;
  line-height: 0;
  font-size: 0;
  transform: none;
}
.jump-round-icon::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid currentColor;
  opacity: .92;
}
.jump-round-icon::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
  opacity: .88;
}
.forward-sheet{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.forward-sheet .pick{
  justify-content: space-between;
}
.forward-sheet .pick.is-disabled{
  opacity: .56;
  cursor: not-allowed;
}
.forward-sheet .pick-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.forward-sheet .pick-check{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 0;
  background: rgba(148,163,184,.26);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 2px 8px rgba(2,6,23,.22);
  position: relative;
  transition: transform .12s cubic-bezier(.4,0,.2,1), background .12s cubic-bezier(.4,0,.2,1), box-shadow .12s cubic-bezier(.4,0,.2,1);
}
.forward-sheet .pick-check::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  background: #fff;
  -webkit-mask: url("/static/icons/check.svg") center / contain no-repeat;
  mask: url("/static/icons/check.svg") center / contain no-repeat;
  transform: translate(-50%, -50%) scale(.55);
  opacity: 0;
  transition: transform .12s cubic-bezier(.4,0,.2,1), opacity .12s cubic-bezier(.4,0,.2,1);
}
.forward-sheet .pick.is-selected .pick-check{
  background: linear-gradient(160deg, rgba(96,165,250,.98), rgba(14,165,233,.9));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.32),
    0 0 0 3px rgba(56,189,248,.16),
    0 6px 14px rgba(14,116,144,.24);
  transform: scale(1.04);
}
.forward-sheet .pick.is-selected .pick-check::after{
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.forward-sheet .forward-actions{
  display:flex;
  gap: 8px;
  justify-content:flex-end;
}
html[data-theme="light"] .composer{
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.7));
}
html[data-theme="light"] .composer-typing-char{
  color: rgba(30,41,59,.88);
  text-shadow: 0 0 6px rgba(56,189,248,.18);
}
html[data-theme="light"] .composer-typing-tail{
  border-color: rgba(59,130,246,.38);
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.96), rgba(147,197,253,.76) 60%, rgba(96,165,250,.5));
  box-shadow: 0 0 0 1px rgba(59,130,246,.2), 0 0 12px rgba(56,189,248,.22);
}
html[data-theme="light"] .msg-forwarded{
  border-color: rgba(100,116,139,.32);
  background: rgba(226,232,240,.66);
  color: rgba(15,23,42,.88);
}
html[data-theme="light"] .jump-latest-btn,
html[data-theme="light"] .jump-round-btn{
  border-color: rgba(124,58,237,.34);
  background: radial-gradient(circle at 30% 28%, rgba(221,214,254,.92), rgba(167,139,250,.84));
  color: rgba(49,46,129,.95);
  box-shadow: 0 12px 24px rgba(124,58,237,.22);
}
.messages.is-drop-target,
.composer.is-drop-target{
  background: var(--ui-accent-soft);
  border: 1px dashed var(--ui-accent-border);
}
.composer-input{
  flex:1;
  position:relative;
  min-width:0;
  max-width: 940px;
  display:flex;
  align-items:center;
}
.composer-poll-btn{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
}
.composer-poll-btn span{
  line-height: 1;
  transform: translateY(-1px);
}
.composer #messageInput{
  width:100%;
  min-height: 40px;
  padding: 10px 14px;
  line-height: 20px;
  border-radius: 18px;
  border: 0;
  background: rgba(255,255,255,.07);
}
html[data-theme="light"] .composer #messageInput{
  background: rgba(15,23,42,.06);
}
#sendBtn{
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  padding: 0;
  flex: none;
  box-shadow: 0 12px 30px rgba(124,58,237,.26);
  transition: transform .16s ease, opacity .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#sendBtn:focus,
#sendBtn:focus-visible{
  outline: none;
}
#sendBtn .btn-icon{
  width: 24px;
  height: 24px;
  transition: opacity .16s ease, transform .18s cubic-bezier(.2,.8,.2,1);
  transform-origin: 50% 52%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}
#sendBtn .btn-icon.is-icon-out{
  opacity: 0;
  transform: scale(.62) rotate(-14deg);
}
#sendBtn .btn-icon.is-icon-in{
  animation: send-icon-in .24s cubic-bezier(.22,.85,.24,1);
}
#sendBtn.is-recording{
  background: linear-gradient(145deg, rgba(124,58,237,.98), rgba(99,102,241,.90));
  border-color: rgba(139,92,246,.92);
  box-shadow: 0 16px 42px rgba(99,102,241,.40);
  transform: scale(1);
}
#sendBtn.is-recording:not(.is-locked){
  opacity: 0;
  pointer-events: none;
  box-shadow: none;
}
#sendBtn.is-recording.is-locked{
  opacity: 1;
  transform: scale(1);
}
#sendBtn.is-recording:not(.is-locked) .btn-icon{
  opacity: 0;
  visibility: hidden;
}
#sendBtn.is-recording.is-cancel-armed{
  opacity: 1;
  background: linear-gradient(145deg, rgba(248,113,113,.98), rgba(239,68,68,.92));
  border-color: rgba(252,136,136,.95);
  box-shadow: 0 14px 34px rgba(185,28,28,.35);
}
@keyframes send-icon-in{
  0%{
    opacity: 0;
    transform: scale(.64) rotate(13deg);
  }
  65%{
    opacity: 1;
    transform: scale(1.1) rotate(-4deg);
  }
  100%{
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

.recorder-hud{
  --rec-cancel: 0;
  --rec-lock: 0;
  --rec-main-left: 0px;
  --rec-main-width: 100vw;
  --rec-strip-bottom: 0px;
  --rec-strip-height: 68px;
  --rec-anchor-x: calc(100vw - 24px);
  --rec-anchor-y: calc(100vh - 78px);
  --rec-orb-x: var(--rec-anchor-x);
  --rec-orb-y: var(--rec-anchor-y);
  --rec-orb-size: 54px;
  --rec-orb-icon-size: 18px;
  --rec-video-center-x: 50vw;
  --rec-video-center-y: 44vh;
  --rec-video-size: 267px;
  --rec-live: 0;
  position: fixed;
  inset: 0;
  z-index: 96;
  pointer-events: none;
}
.recorder-strip{
  position: fixed;
  left: var(--rec-main-left);
  width: var(--rec-main-width);
  bottom: var(--rec-strip-bottom);
  height: var(--rec-strip-height);
  border-top: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(30,33,40,.95), rgba(33,35,41,.90));
  backdrop-filter: blur(14px) saturate(1.1);
  display:flex;
  align-items:center;
  padding: 0 26px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
html[data-theme="light"] .recorder-strip{
  border-top-color: rgba(15,23,42,.17);
  background: linear-gradient(180deg, rgba(250,251,255,.95), rgba(244,247,252,.92));
}
.recorder-timer{
  display:flex;
  align-items:center;
  gap: 18px;
  min-width: 164px;
  position: relative;
  z-index: 2;
}
.recorder-timer-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #8b5cf6;
  box-shadow: 0 0 0 6px rgba(124,58,237,.16);
  animation: recorder-dot-pulse 1.6s ease-in-out infinite;
}
.recorder-time{
  font-size: clamp(22px, 1.6vw, 31px);
  font-weight: 520;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: rgba(241,245,249,.98);
}
html[data-theme="light"] .recorder-time{
  color: rgba(15,23,42,.88);
}
.recorder-hint{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(15px, 1.3vw, 19px);
  color: rgba(226,232,240,.82);
  white-space: nowrap;
  text-align: center;
  letter-spacing: .01em;
  max-width: calc(100% - 330px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.recorder-strip-actions{
  margin-left: auto;
  display:flex;
  align-items:center;
  gap: 10px;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.recorder-strip-actions.is-visible{
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.recorder-action-btn{
  width: 35px;
  height: 35px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(15,19,31,.64);
  display:grid;
  place-items:center;
  cursor: pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.recorder-action-btn:hover{
  transform: scale(1.05);
}
.recorder-action-btn:active{
  transform: scale(.96);
}
.recorder-action-send{
  background: linear-gradient(145deg, rgba(124,58,237,.96), rgba(99,102,241,.88));
  border-color: rgba(167,139,250,.86);
}
.recorder-action-cancel{
  background: rgba(15,19,31,.68);
}
html[data-theme="light"] .recorder-action-btn{
  border-color: rgba(15,23,42,.18);
  background: rgba(255,255,255,.86);
}
html[data-theme="light"] .recorder-action-cancel{
  background: rgba(255,255,255,.9);
}
.recorder-action-icon{
  width: 15px;
  height: 15px;
  filter: brightness(0) saturate(100%) invert(100%);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}
html[data-theme="light"] .recorder-action-cancel .recorder-action-icon{
  filter: var(--icon-filter);
}
html[data-theme="light"] .recorder-hint{
  color: rgba(15,23,42,.55);
}
.recorder-hud.is-locked .recorder-hint{
  color: rgba(221,214,254,.94);
}
.recorder-hud.is-cancel-armed .recorder-hint{
  color: rgba(254,202,202,.94);
}
html[data-theme="light"] .recorder-hud.is-locked .recorder-hint{
  color: rgba(91,33,182,.82);
}
html[data-theme="light"] .recorder-hud.is-cancel-armed .recorder-hint{
  color: rgba(185,28,28,.82);
}
.recorder-lock-rail{
  position: fixed;
  left: calc(var(--rec-anchor-x) - 26px);
  top: calc(var(--rec-anchor-y) - 192px - (var(--rec-lock) * 18px));
  width: 52px;
  height: 126px;
  border-radius: 26px;
  border: 2px solid rgba(148,163,184,.52);
  background: linear-gradient(180deg, rgba(22,24,29,.94), rgba(19,22,28,.90));
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
  opacity: calc(0.66 + (var(--rec-lock) * 0.34));
  display:grid;
  grid-template-rows: 1fr auto;
  place-items:center;
  padding: 12px 0 9px;
  transition: border-color .14s ease, background .14s ease, transform .14s ease, opacity .14s ease, box-shadow .14s ease, top .08s linear;
}
html[data-theme="light"] .recorder-lock-rail{
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,249,252,.94));
  border-color: rgba(71,85,105,.36);
}
.recorder-lock-glyph,
.recorder-lock-arrow{
  width: 23px;
  height: 23px;
  background: rgba(139,92,246,.94);
  display:block;
  transition: background .14s ease, transform .14s ease;
}
.recorder-lock-glyph{
  -webkit-mask: url("/static/icons/lock.svg") center / contain no-repeat;
  mask: url("/static/icons/lock.svg") center / contain no-repeat;
}
.recorder-lock-arrow{
  -webkit-mask: url("/static/icons/arrow-right.svg") center / contain no-repeat;
  mask: url("/static/icons/arrow-right.svg") center / contain no-repeat;
  transform: rotate(-90deg) translateY(-1px);
}
.recorder-hud.is-lock-ready .recorder-lock-rail{
  border-color: rgba(167,139,250,.92);
  box-shadow: 0 12px 30px rgba(76,29,149,.34);
}
.recorder-hud.is-cancel-armed .recorder-lock-rail{
  opacity: .28;
}
.recorder-hud.is-locked .recorder-lock-rail{
  border-color: rgba(167,139,250,.98);
  background: linear-gradient(180deg, rgba(124,58,237,.97), rgba(109,40,217,.95));
}
.recorder-hud.is-locked .recorder-lock-glyph,
.recorder-hud.is-locked .recorder-lock-arrow{
  background: rgba(241,245,249,.98);
}
.recorder-orb{
  position: fixed;
  left: calc(var(--rec-orb-x) - (var(--rec-orb-size) / 2));
  top: calc(var(--rec-orb-y) - (var(--rec-orb-size) / 2));
  width: var(--rec-orb-size);
  height: var(--rec-orb-size);
  border-radius: 999px;
  border: 1px solid rgba(148,104,241,.94);
  background: radial-gradient(circle at 34% 26%, rgba(167,139,250,.98), rgba(124,58,237,.97) 58%, rgba(91,33,182,.97));
  box-shadow: 0 12px 22px rgba(76,29,149,.38);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition: left .08s linear, top .08s linear, width .2s ease, height .2s ease, transform .12s ease, box-shadow .12s ease, border-color .12s ease, opacity .12s ease;
}
.recorder-orb::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:inherit;
  background: rgba(139,92,246,.2);
  opacity: calc(.72 + (var(--rec-live) * .22));
  transform: scale(calc(1 + (var(--rec-cancel) * 0.08)));
  transition: transform .12s ease, background .12s ease;
}
.recorder-orb::after{
  content:"";
  position:absolute;
  inset:-9px;
  border-radius:inherit;
  border: 1.5px solid rgba(196,181,253,.42);
  opacity: 0;
  transform: scale(.9);
}
.recorder-hud.is-active .recorder-orb::before{
  animation: recorder-orb-core-glow 1.7s ease-in-out infinite;
}
.recorder-hud.is-active .recorder-orb::after{
  animation: recorder-orb-halo 1.85s cubic-bezier(.2,.82,.22,1) infinite;
}
.recorder-orb-icon{
  width: var(--rec-orb-icon-size);
  height: var(--rec-orb-icon-size);
  display: block;
  margin: 0;
  position: relative;
  z-index: 1;
  filter: brightness(0) saturate(100%) invert(100%);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  transform: translateY(-0.5px);
}
.recorder-orb-preview{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recorder-hud.is-video .recorder-orb{
  width: calc(var(--rec-video-size) * 0.833333);
  height: calc(var(--rec-video-size) * 0.833333);
  left: calc(var(--rec-video-center-x) - ((var(--rec-video-size) * 0.833333) / 2));
  top: calc(var(--rec-video-center-y) - ((var(--rec-video-size) * 0.833333) / 2));
  border-width: 2px;
  border-color: rgba(167,139,250,.82);
  background: #0f1117;
  box-shadow: 0 28px 58px rgba(76,29,149,.48);
  transform: scale(calc(1 + (var(--rec-live) * 0.18)));
}
.recorder-hud.is-video.is-active .recorder-orb::after{
  inset: -16px;
  border-color: rgba(196,181,253,.28);
}
.recorder-hud.is-video .recorder-orb-preview{
  border-radius: inherit;
}
.recorder-hud.is-video .recorder-strip{
  background: linear-gradient(180deg, rgba(22,23,30,.92), rgba(24,26,34,.90));
}
html[data-theme="light"] .recorder-hud.is-video .recorder-strip{
  background: linear-gradient(180deg, rgba(249,250,255,.95), rgba(243,246,252,.93));
}
.recorder-hud.is-cancel-armed .recorder-orb{
  border-color: rgba(252,150,150,.92);
  background: radial-gradient(circle at 34% 26%, rgba(248,129,129,.98), rgba(239,85,85,.96) 58%, rgba(220,38,38,.95));
  box-shadow: 0 18px 30px rgba(153,27,27,.45);
  transform: scale(1.04);
}
.recorder-hud.is-video.is-cancel-armed .recorder-orb{
  transform: scale(calc(1.04 + (var(--rec-live) * 0.12)));
}
.recorder-hud.is-cancel-armed .recorder-orb::before{
  background: rgba(248,113,113,.24);
}
.recorder-hud.is-cancel-armed .recorder-orb::after{
  border-color: rgba(254,202,202,.46);
}
.recorder-hud.is-orb-hidden .recorder-orb{
  opacity: 0;
  transform: scale(.8);
}
.recorder-hud.is-just-started .recorder-strip{
  animation: recorder-strip-enter .24s cubic-bezier(.2,.86,.28,1) both;
}
.recorder-hud.is-just-started .recorder-orb{
  animation: recorder-orb-enter .28s cubic-bezier(.2,.9,.24,1) both;
}
.recorder-hud.is-exiting .recorder-strip{
  animation: recorder-strip-exit .22s cubic-bezier(.28,.2,.24,1) both;
}
.recorder-hud.is-exiting .recorder-orb{
  animation: recorder-orb-exit .24s cubic-bezier(.3,.2,.24,1) both;
}
.recorder-hud.is-exiting .recorder-lock-rail{
  animation: recorder-lock-exit .2s cubic-bezier(.3,.18,.24,1) both;
}
@keyframes recorder-strip-enter{
  from{
    opacity: 0;
    transform: translateY(20px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes recorder-orb-enter{
  from{
    opacity: 0;
    transform: scale(.76);
  }
  to{
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes recorder-strip-exit{
  from{
    opacity: 1;
    transform: translateY(0);
  }
  to{
    opacity: 0;
    transform: translateY(20px);
  }
}
@keyframes recorder-orb-exit{
  from{
    opacity: 1;
    transform: scale(1);
  }
  to{
    opacity: 0;
    transform: scale(.78);
  }
}
@keyframes recorder-lock-exit{
  from{
    opacity: calc(0.66 + (var(--rec-lock) * 0.34));
    transform: translateY(0) scale(1);
  }
  to{
    opacity: 0;
    transform: translateY(14px) scale(.84);
  }
}
@keyframes recorder-dot-pulse{
  0%, 100%{ opacity: .72; transform: scale(.93); }
  50%{ opacity: 1; transform: scale(1.04); }
}
@keyframes recorder-orb-halo{
  0%{
    opacity: .08;
    transform: scale(.9);
  }
  58%{
    opacity: .42;
    transform: scale(1.08);
  }
  100%{
    opacity: 0;
    transform: scale(1.2);
  }
}
@keyframes recorder-orb-core-glow{
  0%, 100%{
    opacity: calc(.62 + (var(--rec-live) * .22));
  }
  50%{
    opacity: calc(.86 + (var(--rec-live) * .12));
  }
}
@media (prefers-reduced-motion: reduce){
  .recorder-hud.is-active .recorder-orb::before,
  .recorder-hud.is-active .recorder-orb::after{
    animation: none;
  }
}
.reply-chip{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% + 8px);
  padding: 9px 10px;
  border-radius: 16px;
  background: rgba(124,58,237,.14);
  border: 1px solid rgba(124,58,237,.22);
  color: var(--text);
  font-size: 12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.reply-chip button{
  border:0; background: transparent; color: var(--muted);
  cursor:pointer;
  font-weight: 800;
}
.history-loader{
  margin: 4px auto 10px;
  font-size: 12px;
  color: var(--muted);
}
.file-send{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.file-send-video-loader{
  align-items:center;
}
.file-send-video-loader .hint{
  text-align:center;
}
.file-send-preview{
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.03);
  display:flex;
  gap:12px;
  align-items:center;
}
.file-send-image{
  display:block;
  width: min(360px, 100%);
  max-height: 320px;
  border-radius: 12px;
  object-fit: cover;
}
.file-send-glyph{
  width:48px;
  height:48px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(124,58,237,.2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  flex:none;
}
.file-send-meta{
  min-width:0;
}
.file-send-preview-image{
  justify-content: center;
  padding: 10px;
}
.file-send-preview-image-stage{
  position: relative;
  padding: 0;
  overflow: hidden;
}
.file-send-image-overlay{
  position: absolute;
  right: 12px;
  bottom: 12px;
  display:flex;
  align-items:center;
  gap: 8px;
  z-index: 2;
}
.file-send-image-tool{
  border: 0;
  background: rgba(8,12,24,.62);
  color: rgba(241,245,249,.96);
  border-radius: 999px;
  min-height: 36px;
  height: 36px;
  padding: 0 12px;
  display:flex;
  align-items:center;
  gap: 6px;
  cursor:pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 18px rgba(2,6,23,.45);
  transition: transform .14s ease, background .16s ease, box-shadow .16s ease;
}
.file-send-image-tool:hover{
  background: rgba(19,30,52,.74);
  transform: translateY(-1px);
  box-shadow: 0 11px 22px rgba(2,6,23,.5);
}
.file-send-image-tool:active{
  transform: translateY(0);
}
.file-send-image-tool-icon{
  font-size: 18px;
  line-height: 1;
  transform: translateY(-1px);
}
.file-send-image-tool-label{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}
.file-send-image-tools{
  display:flex;
  align-items:center;
  justify-content: flex-start;
  gap: 10px;
}
.file-send-image-sub{
  font-size: 12px;
  color: var(--muted);
}
.image-edit-modal{
  gap: 14px;
}
.image-edit-topbar{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.image-edit-topbar .btn{
  min-height: 42px;
}
.image-edit-topbar .btn.is-active{
  background: linear-gradient(135deg, rgba(124,58,237,.34), rgba(99,102,241,.18));
  border-color: rgba(167,139,250,.6);
}
.image-edit-stage{
  width: 100%;
  display:flex;
  justify-content:center;
}
.image-edit-canvas-wrap{
  position: relative;
  width: 100%;
  max-width: 560px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  background: #090d18;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.34), 0 18px 40px rgba(2,6,23,.42);
}
.image-edit-canvas-wrap.is-crop-mode{
  border-radius: 0;
}
.image-edit-canvas{
  display:block;
  width: 100%;
  touch-action: none;
  cursor: default;
}
.image-edit-canvas.is-draw-mode{
  cursor: crosshair;
}
.image-edit-canvas.is-drawing{
  cursor: none;
}
.image-edit-crop-overlay{
  position:absolute;
  inset:0;
  touch-action: none;
}
.image-edit-crop-overlay.is-hidden{
  display:none;
}
.image-edit-crop-box{
  position:absolute;
  border: 2px solid rgba(125,211,252,.94);
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(3,8,22,.52), 0 0 0 1px rgba(56,189,248,.28), inset 0 0 0 1px rgba(226,232,240,.58);
  cursor: move;
}
.image-edit-crop-box.is-dragging{
  box-shadow: 0 0 0 9999px rgba(3,8,22,.62), 0 0 0 1px rgba(125,211,252,.42), inset 0 0 0 1px rgba(226,232,240,.86);
}
.image-edit-crop-handle{
  position:absolute;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  border: 2px solid rgba(15,23,42,.84);
  background: rgba(186,230,253,.98);
  box-shadow: 0 2px 8px rgba(2,6,23,.45);
}
.image-edit-crop-handle-nw{
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  cursor: nwse-resize;
}
.image-edit-crop-handle-ne{
  right: 0;
  top: 0;
  transform: translate(50%, -50%);
  cursor: nesw-resize;
}
.image-edit-crop-handle-sw{
  left: 0;
  bottom: 0;
  transform: translate(-50%, 50%);
  cursor: nesw-resize;
}
.image-edit-crop-handle-se{
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
  cursor: nwse-resize;
}
.image-edit-controls{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.image-edit-controls.is-hidden{
  display:none;
}
.image-edit-colors{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.image-edit-color{
  --swatch-color: #ff4d67;
  border: 1px solid rgba(255,255,255,.22);
  background: var(--swatch-color);
  border-radius: 12px;
  width: 100%;
  min-height: 34px;
  cursor:pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.image-edit-color.is-active{
  border-color: rgba(226,232,240,.9);
  box-shadow: 0 0 0 2px rgba(125,211,252,.32), 0 12px 20px rgba(2,6,23,.32);
  transform: translateY(-1px);
}
.image-edit-brush{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items:center;
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
}
.image-edit-brush span{
  font-size: 13px;
  color: var(--muted);
}
.image-edit-brush input{
  margin: 0;
}
.image-edit-brush-value{
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  min-width: 38px;
  text-align: right;
}
.image-edit-actions{
  display:flex;
  gap: 8px;
}
.image-edit-actions .btn{
  flex: 1;
  min-height: 42px;
}
html[data-theme="light"] .image-edit-topbar .btn.is-active{
  background: linear-gradient(135deg, rgba(221,214,254,.92), rgba(199,210,254,.88));
  border-color: rgba(129,140,248,.5);
}
html[data-theme="light"] .image-edit-canvas-wrap{
  border-color: rgba(15,23,42,.14);
  background: linear-gradient(180deg, rgba(236,241,249,.96), rgba(222,230,243,.92));
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.34), 0 14px 30px rgba(15,23,42,.12);
}
html[data-theme="light"] .image-edit-crop-box{
  box-shadow: 0 0 0 9999px rgba(15,23,42,.24), 0 0 0 1px rgba(56,189,248,.26), inset 0 0 0 1px rgba(255,255,255,.84);
}
html[data-theme="light"] .image-edit-brush{
  background: rgba(255,255,255,.72);
}
html[data-theme="light"] .file-send-image-tool{
  background: rgba(248,250,255,.88);
  color: rgba(15,23,42,.9);
  box-shadow: 0 8px 16px rgba(15,23,42,.16);
}
html[data-theme="light"] .file-send-image-tool:hover{
  background: rgba(238,242,255,.96);
}
html[data-theme="light"] .media-viewer-image-frame{
  background: radial-gradient(circle at 30% 24%, rgba(241,245,249,.96), rgba(226,232,240,.9));
}
html[data-theme="light"] .media-viewer-download-icon{
  color: rgba(71,85,105,.86);
}
html[data-theme="light"] .media-viewer-download-icon:hover{
  color: rgba(15,23,42,.98);
}
@media (max-width: 760px){
  .file-send-image{
    width: min(100%, 360px);
    max-height: 52vh;
  }
  .file-send-image-overlay{
    right: 9px;
    bottom: 9px;
  }
  .file-send-image-tool{
    min-height: 34px;
    height: 34px;
    padding: 0 10px;
    gap: 5px;
  }
  .file-send-image-tool-icon{
    font-size: 16px;
  }
  .file-send-image-tool-label{
    font-size: 11px;
  }
  .image-edit-colors{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .image-edit-crop-handle{
    width: 18px;
    height: 18px;
  }
  .media-viewer.media-viewer-image-modal .media-viewer-image-frame{
    height: min(66vh, 540px);
    max-height: calc(92vh - 150px);
    border-radius: 14px;
  }
  .media-viewer.media-viewer-image-modal .media-viewer-download-icon{
    top: 10px;
    right: 10px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }
  .media-viewer.media-viewer-image-modal .media-viewer-download-glyph{
    width: 30px;
    height: 30px;
  }
}
.media-viewer{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.profile-media-viewer{
  display:flex;
  flex-direction:column;
  gap: 14px;
  min-height: 0;
}
.profile-media-viewer-stage{
  position: relative;
  min-height: min(72vh, 760px);
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(56,189,248,.12), transparent 48%),
    linear-gradient(180deg, rgba(6,10,18,.98), rgba(2,6,14,1));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 26px 46px rgba(2,6,23,.32);
}
.profile-media-viewer-surface{
  position: relative;
  min-height: inherit;
  overflow: hidden;
  padding: 28px clamp(48px, 5vw, 72px);
}
.profile-media-viewer-surface.is-loading::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}
.profile-media-viewer-pane{
  position: absolute;
  inset: 0;
  padding: inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity .28s ease,
    transform .46s cubic-bezier(.2,.86,.2,1),
    visibility .46s step-end;
  will-change: opacity, transform;
}
.profile-media-viewer-pane.is-active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity .28s ease,
    transform .46s cubic-bezier(.2,.86,.2,1),
    visibility 0s linear;
}
.profile-media-viewer-pane.is-entering-from-left{
  transform: translate3d(-24px, 0, 0) scale(.986);
}
.profile-media-viewer-pane.is-entering-from-right{
  transform: translate3d(24px, 0, 0) scale(.986);
}
.profile-media-viewer-pane.is-leaving-to-left{
  opacity: 0;
  visibility: visible;
  transform: translate3d(-24px, 0, 0) scale(.986);
}
.profile-media-viewer-pane.is-leaving-to-right{
  opacity: 0;
  visibility: visible;
  transform: translate3d(24px, 0, 0) scale(.986);
}
.profile-media-viewer-asset{
  max-width: 100%;
  max-height: min(64vh, 720px);
  display:block;
  border-radius: 22px;
  box-shadow: 0 24px 42px rgba(2,6,23,.44);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}
.profile-media-viewer-image{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(3,7,18,.68);
}
.profile-media-viewer-video-shell{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.profile-media-viewer-video{
  width: min(960px, 100%);
  background: rgba(0,0,0,.88);
  border: 1px solid rgba(255,255,255,.08);
}
.profile-media-viewer-video-badge{
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(2,6,23,.58);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 12px;
  font-weight: 760;
}
.profile-media-viewer-video-badge-glyph{
  font-size: 14px;
  line-height: 1;
}
.profile-media-viewer-nav,
.profile-media-viewer-hitzone{
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.94);
}
.profile-media-viewer-hitzone{
  width: 24%;
  min-width: 96px;
}
.profile-media-viewer-hitzone.is-prev{
  left: 0;
}
.profile-media-viewer-hitzone.is-next{
  right: 0;
}
.profile-media-viewer-nav{
  top: 50%;
  bottom: auto;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(2,6,23,.58);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateY(-50%);
  transition: transform .18s ease, background .18s ease, opacity .18s ease;
}
.profile-media-viewer-nav:hover:not(:disabled){
  transform: translateY(-50%) scale(1.04);
  background: rgba(15,23,42,.76);
}
.profile-media-viewer-nav:disabled,
.profile-media-viewer-hitzone:disabled{
  opacity: 0;
  pointer-events: none;
}
.profile-media-viewer-nav span{
  font-size: 32px;
  line-height: 1;
}
.profile-media-viewer-nav.is-prev{
  left: 18px;
}
.profile-media-viewer-nav.is-next{
  right: 18px;
}
.profile-media-viewer-meta{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;
}
.profile-media-viewer-meta-main{
  min-width: 0;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.profile-media-viewer-head{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.profile-media-viewer-chip,
.profile-media-viewer-counter{
  display:inline-flex;
  align-items:center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.profile-media-viewer-chip{
  background: linear-gradient(140deg, rgba(56,189,248,.28), rgba(14,165,233,.14));
  border: 1px solid rgba(125,211,252,.24);
  color: rgba(255,255,255,.96);
}
.profile-media-viewer-counter{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.64);
}
.profile-media-viewer-title{
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.06;
  font-weight: 820;
  color: rgba(255,255,255,.98);
  letter-spacing: -.02em;
}
.profile-media-viewer-subtitle{
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,.72);
}
.profile-media-viewer-date{
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255,255,255,.52);
}
.profile-media-viewer-actions{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}
.profile-media-viewer-loading,
.profile-media-viewer-error{
  position: relative;
  z-index: 1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 12px;
  text-align:center;
  color: rgba(255,255,255,.72);
}
.profile-media-viewer-loading-glyph{
  width: 60px;
  height: 60px;
  border-radius: 20px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.08);
  font-size: 28px;
}
.profile-media-viewer-loading-text,
.profile-media-viewer-error-text{
  font-size: 13px;
  line-height: 1.45;
}
.profile-media-viewer-error-title{
  font-size: 18px;
  line-height: 1.15;
  font-weight: 780;
  color: rgba(255,255,255,.94);
}
html[data-theme="light"] .profile-media-viewer-stage{
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(56,189,248,.12), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,245,249,.96));
  border-color: rgba(148,163,184,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 22px 42px rgba(148,163,184,.18);
}
html[data-theme="light"] .profile-media-viewer-image,
html[data-theme="light"] .profile-media-viewer-video{
  border-color: rgba(148,163,184,.2);
}
html[data-theme="light"] .profile-media-viewer-nav{
  background: rgba(255,255,255,.88);
  border-color: rgba(148,163,184,.24);
  color: rgba(15,23,42,.86);
}
html[data-theme="light"] .profile-media-viewer-counter{
  background: rgba(255,255,255,.92);
  border-color: rgba(148,163,184,.22);
  color: rgba(51,65,85,.72);
}
html[data-theme="light"] .profile-media-viewer-title{
  color: rgba(15,23,42,.96);
}
html[data-theme="light"] .profile-media-viewer-subtitle{
  color: rgba(51,65,85,.7);
}
html[data-theme="light"] .profile-media-viewer-date{
  color: rgba(100,116,139,.86);
}
html[data-theme="light"] .profile-media-viewer-loading,
html[data-theme="light"] .profile-media-viewer-error{
  color: rgba(51,65,85,.74);
}
html[data-theme="light"] .profile-media-viewer-loading-glyph{
  background: rgba(15,23,42,.06);
  color: rgba(15,23,42,.82);
}
@media (max-width: 900px){
  .profile-media-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profile-media-viewer-stage{
    min-height: min(66vh, 640px);
    border-radius: 22px;
  }
  .profile-media-viewer-surface{
    padding: 20px 18px 24px;
  }
  .profile-media-viewer-asset{
    max-height: min(56vh, 560px);
    border-radius: 18px;
  }
  .profile-media-viewer-meta{
    flex-direction: column;
    align-items: stretch;
  }
  .profile-media-viewer-actions .btn{
    flex: 1 1 160px;
  }
}
@media (max-width: 640px){
  .profile-media-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .profile-media-card-stage{
    border-radius: 22px;
  }
  .profile-media-card-overlay{
    padding: 12px;
  }
  .profile-media-card-action{
    width: 100%;
    justify-content:center;
  }
  .profile-media-viewer-stage{
    min-height: min(60vh, 520px);
  }
  .profile-media-viewer-hitzone{
    width: 28%;
    min-width: 64px;
  }
  .profile-media-viewer-nav{
    width: 44px;
    height: 44px;
  }
  .profile-media-viewer-nav span{
    font-size: 28px;
  }
  .profile-media-viewer-title{
    font-size: 22px;
  }
}
@media (prefers-reduced-motion: reduce){
  .profile-assets-pane,
  .profile-assets-pane.is-active{
    transition: none;
  }
  .profile-media-viewer-pane,
  .profile-media-viewer-pane.is-active{
    transition: none;
  }
}
.media-viewer-image-modal{
  height: 100%;
  min-height: 0;
}
.media-viewer-image-frame{
  position: relative;
  width: min(920px, 100%);
  height: min(74vh, 760px);
  max-height: calc(86vh - 140px);
  border-radius: 18px;
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(circle at 30% 24%, rgba(16,24,40,.72), rgba(3,8,24,.95));
}
.media-viewer-image{
  width: min(720px, 100%);
  max-height: 72vh;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.3);
}
.media-viewer-image-static{
  width: 100%;
  height: 100%;
  max-height: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}
.media-viewer-download-icon{
  position:absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  border: 0;
  background: transparent;
  color: rgba(148,163,184,.96);
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  display:grid;
  place-items:center;
  cursor: pointer;
  transition: transform .14s ease, color .14s ease;
}
.media-viewer-download-icon:focus,
.media-viewer-download-icon:focus-visible{
  outline: none;
  box-shadow: none;
}
.media-viewer-download-glyph{
  width: 32px;
  height: 32px;
  display:block;
  opacity: .94;
  filter: drop-shadow(0 1px 1px rgba(2,6,23,.35));
}
.media-viewer-download-icon:hover{
  transform: scale(1.08);
  color: rgba(226,232,240,.98);
}
.media-viewer-download-icon:hover .media-viewer-download-glyph{
  opacity: 1;
  filter: drop-shadow(0 2px 3px rgba(2,6,23,.42));
}
.media-viewer-download-icon:active{
  transform: scale(0.98);
}
.media-viewer-video{
  width: min(720px, 100%);
  max-height: 72vh;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.45);
}
.media-viewer-video-wrap{
  width: min(720px, 100%);
}
.media-viewer-video-wrap .msg-video{
  width: 100%;
  max-height: 72vh;
}
.media-player{
  position: relative;
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
}
.media-player .media-viewer-video{
  width: 100%;
  max-height: 72vh;
  min-height: min(72vh, 520px);
  border: 0;
  border-radius: 0;
  object-fit: contain;
  background: #000;
}
.media-player.is-transfer .media-viewer-video{
  filter: none;
  opacity: 1;
}
.media-player.has-poster.is-transfer .media-viewer-video{
  filter: none;
  opacity: 1;
}
.media-player-badge{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(8,11,20,.7);
  color: rgba(241,245,249,.95);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 8px;
}
.media-player-badge.is-hidden{
  display:none;
}
.media-player-center{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.88);
  background: rgba(15,23,42,.42);
  color: #fff;
  z-index: 6;
  display:grid;
  place-items:center;
  cursor: pointer;
  transition: transform .12s ease, background .16s ease, opacity .16s ease;
}
.media-player-center:hover{
  transform: translate(-50%, -50%) scale(1.03);
  background: rgba(15,23,42,.6);
}
.media-player-center.is-hidden{
  opacity: 0;
  pointer-events: none;
}
.media-player-center-glyph{
  font-size: 44px;
  line-height: 1;
  transform: translateY(-1px);
}
.media-player-transfer{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 66px;
  z-index: 5;
  height: 5px;
  border-radius: 999px;
  background: rgba(148,163,184,.45);
  overflow: hidden;
}
.media-player-transfer.is-hidden{
  display:none;
}
.media-player-transfer-fill{
  display:block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b5cf6, #38bdf8);
  transition: none;
}
.media-player-controls{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-top: 1px solid rgba(148,163,184,.25);
  background: linear-gradient(180deg, rgba(2,6,23,.2), rgba(2,6,23,.76));
  backdrop-filter: blur(10px) saturate(1.05);
}
.media-player-controls-left,
.media-player-controls-right{
  display:flex;
  align-items:center;
  gap: 7px;
  min-width: 0;
}
.media-player-btn{
  min-width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(8,11,20,.55);
  color: rgba(241,245,249,.98);
  font-size: 16px;
  display:grid;
  place-items:center;
  cursor: pointer;
  padding: 0 10px;
}
.media-player-btn:hover{
  background: rgba(8,11,20,.75);
}
.media-player-btn:disabled{
  opacity: .45;
  cursor: default;
}
.media-player-time{
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: rgba(241,245,249,.96);
  white-space: nowrap;
}
.media-player-transfer-text{
  font-size: 12px;
  color: rgba(148,163,184,.95);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.media-player-seek{
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.25);
  cursor: pointer;
  overflow: hidden;
}
.media-player-seek-fill{
  position:absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, #8b5cf6, #38bdf8);
}
html[data-theme="light"] .media-player-center{
  border-color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.2);
}
html[data-theme="light"] .media-player-controls{
  border-top-color: rgba(71,85,105,.26);
  background: linear-gradient(180deg, rgba(248,250,252,.24), rgba(15,23,42,.48));
}
@media (max-width: 760px){
  .media-player .media-viewer-video{
    min-height: min(68vh, 460px);
  }
  .media-player-center{
    width: 84px;
    height: 84px;
  }
  .media-player-center-glyph{
    font-size: 38px;
  }
  .media-player-transfer{
    bottom: 108px;
  }
  .media-player-controls{
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px 10px;
  }
  .media-player-controls-left,
  .media-player-controls-right{
    justify-content: space-between;
  }
  .media-player-transfer-text{
    display:none;
  }
}
.media-viewer-audio{
  width: min(520px, 100%);
}
body.is-round-viewer-open{
  overflow: auto;
}
.round-viewer{
  --round-progress: 0;
  --round-burn-level: calc(.16 + (var(--round-progress, 0) * .38));
  position: fixed;
  left: 0;
  top: 0;
  width: 226px;
  height: 286px;
  z-index: 128;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.round-viewer.is-hidden{
  display:none;
}
.round-viewer-backdrop{
  display:none;
}
.round-viewer-frame{
  position: absolute;
  inset: 0;
  border-radius: 32px;
  border: 1px solid rgba(115,84,245,.38);
  background: linear-gradient(180deg, rgba(74,43,149,.84), rgba(57,31,119,.78));
  box-shadow: 0 18px 48px rgba(2,6,23,.5);
  overflow: hidden;
}
.round-viewer-ring{
  position: absolute;
  left: 50%;
  top: 9px;
  width: calc(100% - 22px);
  aspect-ratio: 1 / 1;
  transform: translateX(-50%) scale(1);
  border-radius: 50%;
  overflow: hidden;
  padding: 6px;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.22), rgba(255,255,255,0) 38%),
    conic-gradient(
      from -90deg at 50% 50%,
      rgba(139,92,246,.95) 0turn,
      rgba(56,189,248,.88) calc(var(--round-progress, 0) * .58turn),
      rgba(16,185,129,.85) calc(var(--round-progress, 0) * 1turn),
      rgba(16,185,129,0) calc(var(--round-progress, 0) * 1turn),
      rgba(16,185,129,0) 1turn
    );
  box-shadow:
    0 18px 38px rgba(2,6,23,.48),
    0 0 26px rgba(45,212,191,var(--round-burn-level));
  cursor: pointer;
  transition: transform .08s linear, box-shadow .12s ease;
  will-change: transform;
}
.round-viewer-ring::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(236,253,245,.2);
  pointer-events:none;
  z-index: 2;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.1),
    0 0 16px rgba(45,212,191,calc(var(--round-burn-level) * .85));
}
.round-viewer.is-mini .round-viewer-ring{
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  transform: scale(1);
  padding: 4px;
  box-shadow:
    0 12px 28px rgba(2,6,23,.46),
    0 0 16px rgba(56,189,248,.22);
  cursor: grab;
}
.round-viewer.is-mini:active .round-viewer-ring{
  cursor: grabbing;
}
.round-viewer.is-mini .round-viewer-frame{
  border-radius: 50%;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.round-viewer-video{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(0,0,0,.42);
  display:block;
  position: relative;
  z-index: 1;
}
.round-viewer-loader{
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  display:none;
  z-index: 4;
}
.round-viewer-loader.media-loader-video{
  width: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.round-viewer-loader .tg-loader-meta{
  display:none;
}
.round-viewer-loader .tg-loader-core{
  width: 56px;
  height: 56px;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), rgba(8,12,24,.6));
}
.round-viewer-loader .tg-loader-ring{
  width: 56px;
  height: 56px;
}
.round-viewer.is-mini .round-viewer-loader .tg-loader-core{
  width: 44px;
  height: 44px;
}
.round-viewer.is-mini .round-viewer-loader .tg-loader-ring{
  width: 44px;
  height: 44px;
}
.round-viewer.is-loading .round-viewer-loader,
.round-viewer.is-buffering .round-viewer-loader{
  display:flex;
}
.round-viewer-progress{
  display:none;
  position:absolute;
  left:50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: 72%;
  height: 6px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.32);
  background: rgba(2,6,23,.42);
  overflow:hidden;
  z-index: 5;
  transition: opacity .16s ease;
}
.round-viewer-progress-fill{
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, rgba(139,92,246,.95), rgba(56,189,248,.88), rgba(16,185,129,.85));
  transition: width .12s linear;
}
.round-viewer-time{
  display:none;
  position:absolute;
  left:50%;
  bottom: 24px;
  transform: translateX(-50%);
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.32);
  background: rgba(8,12,24,.58);
  color: rgba(241,245,249,.97);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  padding: 4px 10px;
  z-index: 6;
  white-space: nowrap;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  transition: opacity .16s ease;
}
.round-viewer.is-mini .round-viewer-progress,
.round-viewer.is-mini .round-viewer-time{
  opacity: 0;
  pointer-events: none;
}
.round-viewer.is-paused .round-viewer-ring::after{
  content: "❚❚";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.34);
  background: rgba(8,12,24,.42);
  color: rgba(241,245,249,.96);
  display:grid;
  place-items:center;
  font-size: 20px;
  letter-spacing: -2px;
  text-indent: -2px;
  z-index: 7;
  pointer-events:none;
}
.msg-bubble.msg-bubble-round-video.is-round-viewer-source-hidden{
  visibility: hidden;
}
.avatar-cropper{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.avatar-crop-frame{
  width: min(320px, 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.3);
  overflow: hidden;
  position: relative;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.avatar-crop-frame.is-dragging{ cursor: grabbing; }
.avatar-crop-frame::after{
  content:"";
  position:absolute;
  inset: 8px;
  border-radius: 999px;
  border: 1px dashed rgba(255,255,255,.45);
  pointer-events:none;
}
.avatar-crop-image{
  position:absolute;
  left:50%;
  top:50%;
  transform-origin: center center;
  pointer-events:none;
}

/* Modal */
.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 20px;
  z-index: 140;
}
.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  animation: fade-in .18s ease both;
}
.modal.is-closing{
  pointer-events:none;
}
.modal.is-closing .modal-backdrop{
  animation: fade-out .18s ease both;
}
.modal-card{
  position:relative;
  width: min(760px, 100%);
  max-height: min(86vh, 780px);
  min-height: 0;
  overflow:hidden;
  background: var(--glass-panel-strong);
  border: 0;
  border-radius: 30px;
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  animation: fade-up .20s cubic-bezier(.2,.7,.2,1) both;
  backdrop-filter: blur(22px) saturate(1.15);
}
.modal.is-closing .modal-card{
  animation: fade-up-out .20s cubic-bezier(.2,.7,.2,1) both;
}
.modal-header{
  padding: 16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.modal-title{ font-weight: 820; font-size: 18px; }
.modal-header .icon-btn{
  border: 0;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(148,163,184,.14);
}
.modal-header .icon-btn:hover{
  background: rgba(148,163,184,.22);
}
html[data-theme="light"] .modal-header{
  border-bottom-color: rgba(15,23,42,.08);
}
html[data-theme="light"] .modal-header .icon-btn{
  background: rgba(148,163,184,.2);
}
html[data-theme="light"] .modal-header .icon-btn:hover{
  background: rgba(148,163,184,.3);
}
.modal-body{
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.modal .auth-tabs{
  border-radius: 999px;
  background: rgba(255,255,255,.03);
}
.modal .tab{
  border-radius: 999px;
}
.modal .tab.is-active{
  background: linear-gradient(135deg, rgba(124,58,237,.9), rgba(124,58,237,.6));
  color: #fff;
}
.row{
  display:flex;
  gap:10px;
  align-items:center;
}
.row > *{ flex:1; }
.menu-check{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 11px 13px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(148,163,184,.18), rgba(148,163,184,.06));
  color: var(--text);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background .2s ease, box-shadow .2s ease;
}
.menu-check:hover{
  background: linear-gradient(145deg, rgba(148,163,184,.22), rgba(148,163,184,.1));
  box-shadow: 0 10px 24px rgba(2,6,23,.22);
}
.menu-check input{
  width: 22px;
  height: 22px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display:grid;
  place-items:center;
  background: rgba(148,163,184,.26);
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 2px 8px rgba(2,6,23,.22);
  transition: background .12s cubic-bezier(.4,0,.2,1), box-shadow .12s cubic-bezier(.4,0,.2,1);
}
.menu-check:hover input{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.2),
    0 6px 14px rgba(2,6,23,.26);
}
.menu-check input:focus-visible{
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 0 0 5px rgba(125,211,252,.22),
    0 2px 8px rgba(2,6,23,.22);
}
.menu-check input::after{
  content:"";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  background: #fff;
  -webkit-mask: url("/static/icons/check.svg") center / contain no-repeat;
  mask: url("/static/icons/check.svg") center / contain no-repeat;
  transform: translate(-50%, -50%) scale(.55);
  opacity: 0;
  transition: transform .12s cubic-bezier(.4,0,.2,1), opacity .12s cubic-bezier(.4,0,.2,1);
}
.menu-check input:checked{
  background: linear-gradient(160deg, rgba(96,165,250,.98), rgba(14,165,233,.9));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.32),
    0 0 0 3px rgba(56,189,248,.16),
    0 6px 14px rgba(14,116,144,.24);
}
.menu-check input:checked::after{
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.menu-check input:disabled{
  opacity: .56;
  cursor: not-allowed;
}
html[data-theme="light"] .menu-check{
  background: linear-gradient(145deg, rgba(148,163,184,.22), rgba(148,163,184,.1));
}
html[data-theme="light"] .menu-check:hover{
  background: linear-gradient(145deg, rgba(148,163,184,.28), rgba(148,163,184,.14));
  box-shadow: 0 9px 20px rgba(15,23,42,.12);
}
.modal .row .btn{
  min-height: 48px;
  border-radius: 16px;
}
.poll-compose{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.poll-compose-question{
  width: 100%;
  min-height: 62px;
  resize: vertical;
}
.poll-compose-label{
  font-size: 12px;
  color: var(--muted);
}
.poll-compose-list{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.poll-compose-list.is-reordering{
  user-select: none;
}
.poll-compose-option{
  display:grid;
  grid-template-columns: 26px 34px minmax(0, 1fr) auto 34px;
  gap: 8px;
  align-items:center;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  background: rgba(255,255,255,.03);
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.poll-compose-option.is-pressing{
  border-color: rgba(125,211,252,.45);
}
.poll-compose-option.is-dragging{
  border-color: rgba(125,211,252,.68);
  box-shadow: 0 14px 26px rgba(2,6,23,.34);
  transform: scale(1.01);
}
.poll-compose-number{
  font-size: 12px;
  color: var(--muted);
  text-align:center;
  font-variant-numeric: tabular-nums;
}
.poll-compose-handle{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 16px;
  font-weight: 820;
  line-height: 1;
  cursor: grab;
}
.poll-compose-handle:active{
  cursor: grabbing;
}
.poll-compose-option-input{
  width: 100%;
  min-height: 38px;
}
.poll-compose-correct-wrap{
  display:none;
  align-items:center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.poll-compose-list.is-quiz .poll-compose-correct-wrap{
  display:flex;
}
.poll-compose-correct{
  width: 22px;
  height: 22px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  background: rgba(148,163,184,.26);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 2px 8px rgba(2,6,23,.22);
  cursor: pointer;
  transition: background .12s cubic-bezier(.4,0,.2,1), box-shadow .12s cubic-bezier(.4,0,.2,1);
}
.poll-compose-correct::after{
  content:"";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  background: #fff;
  -webkit-mask: url("/static/icons/check.svg") center / contain no-repeat;
  mask: url("/static/icons/check.svg") center / contain no-repeat;
  transform: translate(-50%, -50%) scale(.55);
  opacity: 0;
  transition: transform .12s cubic-bezier(.4,0,.2,1), opacity .12s cubic-bezier(.4,0,.2,1);
}
.poll-compose-correct:focus-visible{
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 0 0 5px rgba(125,211,252,.22),
    0 2px 8px rgba(2,6,23,.22);
}
.poll-compose-correct:checked{
  background: linear-gradient(160deg, rgba(96,165,250,.98), rgba(14,165,233,.9));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.32),
    0 0 0 3px rgba(56,189,248,.16),
    0 6px 14px rgba(14,116,144,.24);
}
.poll-compose-correct:checked::after{
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.poll-compose-remove{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(248,113,113,.12);
  color: rgba(254,226,226,.98);
  font-size: 18px;
}
.poll-compose-remove:disabled{
  opacity: .42;
  cursor: not-allowed;
}
.poll-compose-add{
  align-self:flex-start;
  min-height: 38px;
  border-radius: 12px;
}
.poll-compose-error{
  border: 1px solid rgba(248,113,113,.48);
  border-radius: 12px;
  background: rgba(127,29,29,.22);
  color: rgba(254,202,202,.98);
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.36;
}
.poll-compose-error.is-hidden{
  display:none;
}
.poll-voters-modal{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.poll-voters-option{
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.poll-voters-title{
  font-size: 13px;
  font-weight: 760;
  line-height: 1.32;
}
.poll-voters-count{
  font-size: 11px;
  color: var(--muted);
}
.poll-voters-empty{
  font-size: 12px;
  color: var(--muted);
}
.poll-voters-list{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
}
.poll-voter-chip{
  border: 1px solid rgba(125,211,252,.34);
  border-radius: 999px;
  background: rgba(56,189,248,.14);
  color: var(--text);
  padding: 4px 9px;
  font-size: 12px;
  line-height: 1.2;
}
.list{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.newchat-menu{
  --newchat-mode-glider-x: 0px;
  --newchat-mode-glider-y: 0px;
  --newchat-mode-glider-w: 0px;
  --newchat-mode-glider-h: 0px;
  position:relative;
  display:grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 4px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(148,163,184,.22);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.newchat-mode-glider{
  position:absolute;
  top: 0;
  left: 0;
  height: var(--newchat-mode-glider-h);
  width: var(--newchat-mode-glider-w);
  border-radius: 17px;
  border: 1px solid rgba(124,58,237,.48);
  background: linear-gradient(145deg, rgba(124,58,237,.34), rgba(124,58,237,.14));
  box-shadow:
    0 12px 26px rgba(124,58,237,.22),
    inset 0 1px 0 rgba(255,255,255,.24);
  transform: translate3d(var(--newchat-mode-glider-x), var(--newchat-mode-glider-y), 0);
  transition:
    transform .44s cubic-bezier(.2,.88,.22,1),
    width .34s cubic-bezier(.2,.88,.22,1),
    height .34s cubic-bezier(.2,.88,.22,1);
  pointer-events: none;
  z-index: 0;
}
.newchat-menu.is-no-motion .newchat-mode-glider{
  transition: none;
}
.newchat-sheet{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.newchat-content{
  position:relative;
  overflow: hidden;
  transition: height .42s cubic-bezier(.2,.86,.2,1);
}
.newchat-content.is-no-motion{
  transition: none;
}
.newchat-content.is-switching{
  pointer-events: none;
}
.newchat-content-item{
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.newchat-content-item.is-enter-from-right{
  opacity: 0;
  transform: translate3d(28px, 0, 0) scale(.99);
}
.newchat-content-item.is-enter-from-left{
  opacity: 0;
  transform: translate3d(-28px, 0, 0) scale(.99);
}
.newchat-content-item.is-enter-active{
  transition: opacity .30s ease, transform .46s cubic-bezier(.2,.86,.2,1);
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.newchat-content-item.is-exit-to-left{
  transition: opacity .26s ease, transform .38s cubic-bezier(.2,.86,.2,1);
  opacity: 0;
  transform: translate3d(-24px, 0, 0) scale(.986);
}
.newchat-content-item.is-exit-to-right{
  transition: opacity .26s ease, transform .38s cubic-bezier(.2,.86,.2,1);
  opacity: 0;
  transform: translate3d(24px, 0, 0) scale(.986);
}
.newchat-mode{
  position:relative;
  z-index:1;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  border-radius: 18px;
  padding: 14px 12px;
  text-align:left;
  cursor:pointer;
  transition: border-color .24s ease, color .24s ease, background-color .24s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.newchat-mode .name{
  font-weight: 760;
}
.newchat-mode .sub{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.newchat-mode.is-active{
  border-color: rgba(124,58,237,.46);
  color: #f8f5ff;
}
.newchat-mode:hover{ transform: none; }
.newchat-mode:focus,
.newchat-mode:focus-visible{
  outline: none;
  box-shadow: none;
}
.settings-sheet{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.settings-sheet .pick{
  border-radius: 20px;
  padding: 12px;
  background: rgba(255,255,255,.035);
}
.settings-sheet .pill{
  align-self:flex-start;
  background: rgba(255,255,255,.04);
}
.pick{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 10px 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  cursor:pointer;
  background: rgba(255,255,255,.03);
}
.pick:hover{ background: rgba(255,255,255,.05); }
.pick .meta{ min-width:0; }
.pick .meta .name{ font-weight: 760; }
.pick .meta .sub{ font-size: 12px; color: var(--muted); margin-top:2px; }
.bg-swatch-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 10px;
  margin: 10px 0 4px;
}
.bg-swatch{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 20px rgba(0,0,0,.26);
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
  position: relative;
  overflow: hidden;
}
.bg-swatch:hover{
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(124,58,237,.6);
  box-shadow: 0 14px 28px rgba(0,0,0,.32);
}
.bg-swatch::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.16);
  pointer-events: none;
}
.palette-chip-row{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.palette-chip{
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.05);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.palette-chip:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.1);
  border-color: rgba(124,58,237,.44);
}
.palette-controls{
  margin-top: 10px;
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap: wrap;
}
.palette-controls input[type="color"]{
  width: 42px;
  height: 42px;
  padding: 3px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.06);
  cursor: pointer;
}
.palette-controls .btn{
  flex: 0 0 auto;
  min-height: 42px;
  border-radius: 12px;
}
.bg-custom{
  display:flex;
  gap: 8px;
  align-items:center;
  margin-top: 6px;
  flex-wrap: wrap;
}
.bg-custom input{
  flex:1 1 220px;
}
.bg-custom .btn{
  padding: 9px 12px;
}
.pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: 7px 10px;
  background: rgba(255,255,255,.03);
  font-size: 12px;
  color: var(--muted);
  user-select: none;
  -webkit-user-select: none;
}

/* Borderless settings / poll / file-send modal flows */
.modal.modal-context-settings .modal-card,
.modal.modal-context-poll .modal-card,
.modal.modal-context-file-send .modal-card,
.modal.modal-context-media-viewer .modal-card{
  border: 0;
}
.modal.modal-context-settings .modal-card{
  background: #080b10;
  box-shadow: 0 30px 70px rgba(0,0,0,.42);
}
html[data-theme="light"] .modal.modal-context-settings .modal-card{
  background: #f4f6f8;
  box-shadow: 0 24px 48px rgba(15,23,42,.16);
}
.modal.modal-context-danger .modal-card{
  width: min(460px, calc(100vw - 22px));
  max-height: min(72vh, 560px);
  border: 0;
}
.modal.modal-context-profile-popup .modal-card{
  width: min(460px, calc(100vw - 24px));
  max-height: min(82vh, 720px);
  border: 0;
  background: rgba(16,19,26,.98);
  box-shadow: 0 28px 56px rgba(2,6,23,.44);
}
.modal.modal-context-profile-popup .modal-header{
  border-bottom: 0;
  padding: 18px 18px 8px;
}
.modal.modal-context-profile-popup .modal-body{
  padding: 8px 18px 18px;
}
html[data-theme="light"] .modal.modal-context-profile-popup .modal-card{
  background: rgba(255,255,255,.98);
  box-shadow: 0 20px 44px rgba(15,23,42,.16);
}
.modal.modal-context-danger .modal-header{
  border-bottom: 0;
  padding: 18px 18px 8px;
}
.modal.modal-context-danger .modal-body{
  padding: 8px 18px 18px;
  gap: 14px;
}
.modal.modal-context-settings .modal-header,
.modal.modal-context-poll .modal-header,
.modal.modal-context-file-send .modal-header,
.modal.modal-context-media-viewer .modal-header{
  border-bottom: 0;
}

.modal.modal-context-settings .btn,
.modal.modal-context-settings .pick,
.modal.modal-context-settings .pill,
.modal.modal-context-settings .avatar,
.modal.modal-context-settings .bg-swatch,
.modal.modal-context-settings .bg-swatch::after,
.modal.modal-context-settings .palette-chip,
.modal.modal-context-settings input,
.modal.modal-context-settings textarea,
.modal.modal-context-settings .palette-controls input[type="color"]{
  border: 0;
}

.modal.modal-context-poll .btn,
.modal.modal-context-poll input,
.modal.modal-context-poll textarea,
.modal.modal-context-poll .menu-check,
.modal.modal-context-poll .poll-compose-option,
.modal.modal-context-poll .poll-compose-handle,
.modal.modal-context-poll .poll-compose-remove,
.modal.modal-context-poll .poll-compose-error,
.modal.modal-context-poll .poll-voters-option,
.modal.modal-context-poll .poll-voter-chip{
  border: 0;
}

.modal.modal-context-file-send .btn,
.modal.modal-context-file-send textarea,
.modal.modal-context-file-send .file-send-preview,
.modal.modal-context-file-send .file-send-glyph{
  border: 0;
}

.modal.modal-context-media-viewer .modal-card{
  width: min(1180px, calc(100vw - 20px));
  max-height: min(94vh, 940px);
}
.modal.modal-context-media-viewer .modal-body{
  padding: 10px 12px 14px;
  overflow: hidden;
}
.danger-confirm-modal{
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.danger-confirm-note{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.danger-confirm-actions{
  margin-top: 2px;
}
.danger-confirm-actions .btn{
  min-height: 50px;
  border-radius: 16px;
  border: 0;
}
.danger-confirm-actions .btn.ghost{
  background: rgba(148,163,184,.12);
  color: var(--text);
}
.danger-confirm-actions .btn.ghost:hover{
  background: rgba(148,163,184,.2);
}
.modal.modal-context-danger .menu-check:hover{
  background: linear-gradient(145deg, rgba(148,163,184,.18), rgba(148,163,184,.06));
  box-shadow: none;
}
.modal.modal-context-danger .menu-check:hover input:not(:checked){
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 2px 8px rgba(2,6,23,.22);
}
.modal.modal-context-danger .menu-check:hover input:checked{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.32),
    0 0 0 3px rgba(56,189,248,.16),
    0 6px 14px rgba(14,116,144,.24);
}
.modal.modal-context-danger .menu-check:hover span{
  animation: none;
}
html[data-theme="light"] .modal.modal-context-danger .menu-check:hover{
  background: linear-gradient(145deg, rgba(148,163,184,.22), rgba(148,163,184,.1));
  box-shadow: none;
}
.modal.modal-context-chat-preview .modal-card{
  width: min(520px, 100%);
  max-height: min(76vh, 680px);
}
.modal.modal-context-chat-preview .modal-body{
  padding: 0;
}
.chat-preview-mini{
  display:flex;
  flex-direction:column;
  gap: 0;
  min-height: 0;
}
.chat-preview-mini-shell{
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}
.chat-preview-mini-main{
  --chat-header-height: 62px;
  --chat-composer-height: 0px;
  height: min(64vh, 540px);
  min-height: 360px;
}
.chat-preview-mini-main .chat-header{
  padding: 10px 12px;
}
.chat-preview-mini-main .chat-header-peer-avatar{
  width: 38px;
  height: 38px;
}
.chat-preview-mini-main .chat-title-main{
  font-size: 14px;
}
.chat-preview-mini-main .chat-title-sub{
  font-size: 11px;
}
.chat-preview-mini-messages{
  gap: 8px;
  margin-bottom: 0;
  padding-bottom: 16px;
}
.chat-preview-mini-messages .msg-row{
  pointer-events: auto;
}
.chat-preview-mini-messages .msg-bubble{
  max-width: min(86%, 520px);
}
.chat-preview-mini-messages .msg-select-toggle{
  display: none !important;
}
.chat-preview-mini-messages .msg-reaction,
.chat-preview-mini-messages .msg-poll button,
.chat-preview-mini-messages .msg-poll [role='button']{
  pointer-events: none;
}
.chat-preview-mini-status{
  margin: auto;
  padding: 18px;
  text-align: center;
}

/* Call overlay */
.call{
  position:fixed;
  inset:0;
  z-index: 60;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
}
.call-card{
  width: min(900px, 100%);
  border-radius: 22px;
  border: 0;
  background: rgba(17,19,26,.85);
  box-shadow: var(--shadow);
  overflow:hidden;
}
html[data-theme="light"] .call-card{
  background: rgba(255,255,255,.9);
}
.call-top{
  padding: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom: 0;
}
.call-peer-name{ font-weight: 840; }
.call-status{ font-size: 12px; color: var(--muted); margin-top:2px; }
.call-media{
  position:relative;
  background: rgba(0,0,0,.35);
  height: min(60vh, 520px);
  overflow:hidden;
}
.call-media video{
  width:100%;
  height:100%;
  object-fit: cover;
  background: rgba(0,0,0,.3);
}
.call.is-screen-share #remoteVideo{
  object-fit: contain;
  background: #05070f;
}
#localVideo{
  position:absolute;
  right: 14px;
  bottom: 14px;
  width: 240px;
  height: 150px;
  border-radius: 18px;
  border: 0;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.call-actions{
  padding: 14px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap: wrap;
  border-top: 0;
}
.call-actions .btn{
  min-width: 140px;
  justify-content:center;
  border: 0;
}
#callClose{
  border: 0;
}
.call-actions .btn.is-active{
  background: rgba(56,189,248,.16);
  border-color: rgba(56,189,248,.42);
  color: var(--text);
}
html[data-theme="light"] .call-actions .btn.is-active{
  background: rgba(14,165,233,.12);
}

@media (max-width: 760px){
  .call{
    padding: 10px;
  }
  .call-card{
    border-radius: 18px;
  }
  #localVideo{
    width: 148px;
    height: 92px;
    border-radius: 14px;
    right: 10px;
    bottom: 10px;
  }
  .call-actions .btn{
    min-width: calc(50% - 5px);
  }
  #screenBtn{
    min-width: 100%;
  }
}

/* Toast */
.toast{
  position: fixed;
  right: 16px;
  top: calc(env(safe-area-inset-top, 0px) + 72px);
  z-index: 80;
  display:flex;
  flex-direction:column;
  gap: 8px;
  pointer-events:none;
}
.toast-item{
  pointer-events:auto;
  background: var(--glass-panel-strong);
  border: 0.35px solid var(--border);
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
  width: min(420px, calc(100vw - 24px));
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  animation: slide-in-right .2s ease both;
}
.toast-item.is-closing{
  pointer-events: none;
  animation: slide-out-right .22s cubic-bezier(.4,0,.2,1) both;
}
html[data-theme="light"] .toast-item{ background: var(--glass-panel-strong); }
.toast-title{ font-weight: 800; }
.toast-msg{ font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.toast-actions{ display:flex; gap:8px; align-items:center; }
.toast-actions .icon-btn{ width:36px; height:36px; border-radius: 14px; }
.toast-close{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: none;
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  font-size: 16px;
  line-height: 1;
}
.toast-close:hover{
  background: rgba(255,255,255,.12);
}
@media (prefers-reduced-motion: reduce){
  .toast-item,
  .toast-item.is-closing{
    animation: none;
  }
}

.msg-menu-backdrop{
  position: fixed;
  inset: 0;
  z-index: 88;
  background: rgba(8,10,16,.34);
  backdrop-filter: blur(6px) saturate(1.08);
  animation: fade-in .16s ease both;
}
.msg-menu-backdrop.is-over-modal{
  z-index: 148;
}
.msg-menu-backdrop.is-closing{
  animation: fade-out .16s ease both;
}
.messages.is-menu-open .msg-row{
  opacity: .38;
  transform: scale(.994);
  transition: opacity .16s ease, transform .22s cubic-bezier(.2,.8,.25,1);
}
.messages.is-menu-open .msg-row.is-menu-focus{
  opacity: 1;
  transform: translate3d(0, var(--menu-focus-shift-y, 0px), 0) scale(1.012);
  position: relative;
  z-index: 89;
}
.messages.is-menu-open .msg-row.is-menu-focus .msg-bubble{
  box-shadow: 0 22px 44px rgba(0,0,0,.34);
}

.msg-menu{
  position: fixed;
  --msg-menu-reaction-expanded-offset: 0px;
  --msg-menu-reaction-dock-left: 0px;
  --msg-menu-reaction-dock-width: 0px;
  --msg-menu-reaction-panel-height: 0px;
  min-width: 214px;
  max-width: min(300px, calc(100vw - 16px));
  background: linear-gradient(165deg, rgba(22,26,39,.96), rgba(15,18,28,.94));
  border: 0;
  border-radius: 20px;
  box-shadow:
    0 26px 46px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.06);
  padding: 9px;
  z-index: 90;
  display:flex;
  flex-direction:column;
  gap:7px;
  transform-origin: top left;
  backdrop-filter: blur(18px) saturate(1.12);
  overflow: visible;
}
.msg-menu.is-over-modal{
  z-index: 149;
}
.msg-menu-body{
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  margin-top: var(--msg-menu-reaction-expanded-offset);
  transition: margin-top .26s cubic-bezier(.22,1,.36,1);
  will-change: margin-top;
}
.msg-menu.is-open{ animation: menu-pop .18s cubic-bezier(.2,.8,.25,1) both; }
.msg-menu.is-closing{
  animation: menu-pop-out .16s ease both;
  pointer-events: none;
}
@keyframes menu-pop{
  from{ opacity:0; transform: translateY(6px) scale(.96); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes menu-pop-out{
  from{ opacity:1; transform: translateY(0) scale(1); }
  to{ opacity:0; transform: translateY(8px) scale(.95); }
}
@keyframes fade-out{
  from{ opacity:1; }
  to{ opacity:0; }
}
html[data-theme="light"] .msg-menu{
  background: linear-gradient(165deg, rgba(255,255,255,.96), rgba(248,250,252,.94));
  box-shadow:
    0 22px 38px rgba(15,23,42,.18),
    inset 0 1px 0 rgba(255,255,255,.72);
}
.msg-menu-btn{
  border: 0;
  background: transparent;
  color: var(--text);
  display:flex;
  align-items:center;
  gap: 11px;
  text-align: left;
  border-radius: 13px;
  padding: 10px 11px;
  font-size: 14px;
  font-weight: 620;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.msg-menu-btn-icon{
  width: 18px;
  min-width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: .95;
  font-size: 15px;
  line-height: 1;
  transform: translateY(0);
  transition: transform .16s cubic-bezier(.2,.86,.24,1);
}
.msg-menu-btn-icon-img{
  width: 18px;
  height: 18px;
  display:block;
  opacity: .95;
  filter: var(--icon-filter);
}
.msg-menu-btn-icon-svg{
  width: 18px;
  height: 18px;
  display:block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.msg-menu-btn-label{
  flex: 1 1 auto;
  min-width: 0;
  user-select: none;
  -webkit-user-select: none;
}
.msg-menu-btn:hover{
  background: rgba(148,163,184,.2);
}
.msg-menu-btn:focus-visible{
  outline: none;
  background: rgba(148,163,184,.24);
  box-shadow: 0 0 0 2px rgba(125,211,252,.22);
}
.msg-menu-btn:hover .msg-menu-btn-icon,
.msg-menu-btn:focus-visible .msg-menu-btn-icon{
  transform: translateY(-1px);
}
html[data-theme="light"] .msg-menu-btn:hover{
  background: rgba(148,163,184,.22);
}
html[data-theme="light"] .msg-menu-btn:focus-visible{
  background: rgba(148,163,184,.22);
  box-shadow: 0 0 0 2px rgba(37,99,235,.22);
}
.msg-menu-btn.danger{
  color: #fca5a5;
}
.msg-menu-btn.danger:hover{
  background: rgba(239,68,68,.2);
  color: #fecaca;
}
html[data-theme="light"] .msg-menu-btn.danger{
  color: #dc2626;
}
html[data-theme="light"] .msg-menu-btn.danger:hover{
  background: rgba(239,68,68,.14);
  color: #b91c1c;
}
.msg-menu-separator{
  height: 1px;
  margin: 2px 4px;
  background: rgba(148,163,184,.24);
}
.msg-menu-separator-flush{
  margin: 0 11px;
}
html[data-theme="light"] .msg-menu-separator{
  background: rgba(15,23,42,.14);
}
.msg-menu-info{
  padding: 2px 10px 8px;
  font-size: 11px;
  color: var(--muted);
}
.msg-menu-reactions{
  --msg-menu-reactions-radius: 26px;
  position: absolute;
  left: var(--msg-menu-reaction-dock-left);
  width: var(--msg-menu-reaction-dock-width);
  max-width: calc(100vw - 16px);
  top: -64px;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: min(320px, calc(100vw - 16px));
  border-radius: var(--msg-menu-reactions-radius);
  background: linear-gradient(165deg, rgba(25,30,42,.97), rgba(16,19,28,.95));
  box-shadow:
    0 18px 28px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
  pointer-events: auto;
  z-index: 2;
}
.msg-menu-reactions-top{
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  min-height: 52px;
  padding: 6px 8px 6px 10px;
  background: transparent;
  box-shadow: none;
}
.msg-menu-reactions-top::after{
  display: none;
}
html[data-theme="light"] .msg-menu-reactions-top{
  background: transparent;
}
html[data-theme="light"] .msg-menu-reactions{
  background: linear-gradient(165deg, rgba(255,255,255,.98), rgba(244,246,250,.96));
  box-shadow:
    0 14px 24px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.88);
}
.msg-menu-emojis-preview{
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.msg-menu-emoji-toggle{
  border: 1px solid rgba(255,255,255,.08);
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  margin-left: auto;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: background .16s ease, border-color .16s ease, transform .18s ease;
}
.msg-menu-reactions.is-expanded .msg-menu-emoji-toggle{
  transform: translateY(1px);
}
.msg-menu-emoji-toggle:hover{
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.14);
}
.msg-menu-emoji-toggle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(125,211,252,.28);
}
html[data-theme="light"] .msg-menu-emoji-toggle{
  border-color: rgba(15,23,42,.08);
  background: rgba(15,23,42,.06);
  color: #0f172a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.84);
}
html[data-theme="light"] .msg-menu-emoji-toggle:hover{
  background: rgba(15,23,42,.1);
  border-color: rgba(15,23,42,.14);
}
.msg-menu-emoji-toggle-glyph{
  width: 14px;
  height: 14px;
  display: block;
  transform-origin: 50% 50%;
  transform: rotate(0deg);
  transition: transform .18s cubic-bezier(.22,1,.36,1);
}
.msg-menu-emoji-toggle-glyph-svg{
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.msg-menu-reactions.is-expanded .msg-menu-emoji-toggle-glyph{
  transform: rotate(180deg);
}
.msg-menu-emojis-panel{
  position: relative;
  background: transparent;
  box-shadow: none;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform-origin: top center;
  transform: translate3d(0, -10px, 0) scale(.97);
  transition:
    max-height .26s cubic-bezier(.22,1,.36,1),
    opacity .16s ease,
    transform .18s cubic-bezier(.22,1,.36,1),
    padding .26s cubic-bezier(.22,1,.36,1);
  padding: 0 6px 0;
  margin-top: 0;
  will-change: max-height, opacity, transform;
}
.msg-menu-reactions.is-expanded .msg-menu-emojis-panel{
  max-height: var(--msg-menu-reaction-panel-height);
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  padding: 0 6px 6px;
}
html[data-theme="light"] .msg-menu-emojis-panel{
  background: transparent;
}
.msg-menu-emojis-scroll{
  max-height: calc(var(--msg-menu-reaction-panel-height) - 6px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(124,58,237,.45) transparent;
  scrollbar-gutter: stable;
}
.msg-menu-emojis-scroll::-webkit-scrollbar{
  width: 5.25px;
}
.msg-menu-emojis-scroll::-webkit-scrollbar-track{
  background: transparent;
}
.msg-menu-emojis-scroll::-webkit-scrollbar-thumb{
  background: rgba(124,58,237,.42);
  border-radius: 999px;
}
.msg-menu-emojis-grid{
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  justify-content: stretch;
  justify-items: center;
  align-content: start;
  gap: 6px 4px;
  padding: 2px 0 0;
}
.msg-menu-emoji{
  --emoji-scale: 1;
  border: 0;
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 21px;
  line-height: 1;
  transition: background .1s ease, transform .09s ease-out;
  transform: translateZ(0) scale(var(--emoji-scale));
}
.msg-menu-emoji.is-preview{
  width: 32px;
  height: 32px;
  font-size: 21px;
}
.msg-menu-emoji.is-grid{
  width: 100%;
  max-width: 32px;
  height: 32px;
}
.msg-menu-emoji:hover{
  --emoji-scale: 1.1;
}
.msg-menu-emoji.is-me{
  background: rgba(124,58,237,.24);
}

/* Mobile */
.mobile-only{ display:none; }
html.touch-context-menu-disabled .chat-list,
html.touch-context-menu-disabled .messages,
html.touch-context-menu-disabled .chat-item,
html.touch-context-menu-disabled .profile-panel-body,
html.touch-context-menu-disabled .profile-asset,
html.touch-context-menu-disabled .chat-find-results,
html.touch-context-menu-disabled .chat-find-result,
html.touch-context-menu-disabled .modal-body,
html.touch-context-menu-disabled .chat-preview-mini-shell,
html.touch-context-menu-disabled .chat-preview-mini-messages,
html.touch-context-menu-disabled .msg-row,
html.touch-context-menu-disabled .msg-bubble,
html.touch-context-menu-disabled .msg-menu,
html.touch-context-menu-disabled .msg-menu-emojis-scroll{
  -webkit-touch-callout: none;
}
html.touch-context-menu-disabled input,
html.touch-context-menu-disabled textarea,
html.touch-context-menu-disabled select,
html.touch-context-menu-disabled [contenteditable=""],
html.touch-context-menu-disabled [contenteditable="true"],
html.touch-context-menu-disabled [contenteditable="plaintext-only"]{
  -webkit-touch-callout: default;
}
@media (max-width: 900px){
  html,
  body{
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }
  .app,
  .shell{
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }
  .sidebar,
  .main{
    height: 100%;
    min-height: 0;
  }
  .chat-list,
  .messages{
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .msg-bubble{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .profile-panel{
    width: 100vw;
    max-width: 100vw;
    border-left: 0;
  }
  .profile-panel-body{
    padding: 10px;
  }
  .profile-panel.is-self-view .profile-panel-header{
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 8px;
    grid-template-columns: minmax(88px, 1fr) auto minmax(88px, 1fr);
  }
  .profile-panel.is-self-view #profilePanelBack,
  .profile-panel.is-self-view #profilePanelClose{
    min-width: 88px;
    height: 40px;
  }
  .profile-panel.is-self-view .profile-panel-body{
    padding: 2px 10px calc(env(safe-area-inset-bottom, 0px) + 20px);
  }
  .profile-self-screen{
    gap: 12px;
  }
  .profile-self-avatar-btn{
    width: 92px;
    height: 92px;
  }
  .profile-self-avatar-aura{
    inset: -16px;
  }
  .profile-self-avatar-aura::before{
    filter: blur(16px);
  }
  .profile-self-avatar{
    font-size: 24px;
  }
  .profile-self-avatar-glow{
    filter: blur(16px) saturate(1.15);
  }
  .profile-self-avatar-camera img{
    width: 34px;
    height: 34px;
  }
  .profile-panel.is-self-view .profile-self-avatar-btn{
    width: 138px;
    height: 138px;
  }
  .profile-panel.is-self-view .profile-self-avatar-aura{
    inset: -24px;
  }
  .profile-panel.is-self-view .profile-self-avatar-aura::before{
    filter: blur(20px);
  }
  .profile-panel.is-self-view .profile-self-avatar{
    font-size: 36px;
  }
  .profile-panel.is-self-view .profile-self-avatar-glow{
    filter: blur(20px) saturate(1.15);
  }
  .profile-panel.is-self-view .profile-self-avatar-camera img{
    width: 46px;
    height: 46px;
  }
  .profile-self-surface{
    border-radius: 28px;
  }
  .profile-self-input-row{
    min-height: 50px;
    padding: 1px 12px 1px;
  }
  .profile-self-input-row-handle{
    gap: 1px;
  }
  .profile-self-input-row.is-bio{
    padding: 10px 12px 10px;
  }
  .profile-panel.is-self-view input.profile-self-input,
  .profile-panel.is-self-view textarea.profile-self-input{
    font-size: 15px;
  }
  .profile-self-textarea{
    min-height: 88px;
    max-height: 140px;
  }
  .profile-self-note{
    padding: 0 16px;
    font-size: 10px;
  }
  .profile-username-suggestions-head{
    padding: 2px 16px 0;
  }
  .profile-username-suggestion-list{
    padding: 8px 16px 0;
    gap: 8px;
  }
  .profile-username-suggestion{
    padding: 8px 12px;
  }
  .profile-self-split-row{
    min-height: 48px;
    padding: 1px 12px;
  }
  .profile-self-split-label{
    font-size: 14px;
  }
  .profile-self-row-btn{
    padding: 13px 16px 12px;
  }
  .profile-self-row-label{
    font-size: 15px;
  }
  .profile-self-row-value{
    font-size: 14px;
  }
  .profile-panel.is-self-view input.profile-self-inline-input{
    font-size: 14px;
  }
  .profile-self-input-prefix{
    font-size: 15px;
  }
  .profile-birthday-year-option{
    min-width: 74px;
    height: 30px;
    font-size: 12px;
  }
  .profile-birthday-year-menu{
    width: 136px;
    max-height: 224px;
  }
  .profile-birthday-year-item{
    min-height: 36px;
    font-size: 13px;
  }
  .profile-birthday-picker-foot{
    gap: 8px;
  }
  .profile-panel.is-user-view{
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
  }
  .profile-panel.is-user-view .profile-user-hero{
    min-height: 320px;
    padding: calc(env(safe-area-inset-top, 0px) + 96px) 16px 20px;
  }
  .profile-panel.is-user-view .profile-user-avatar{
    width: 112px;
    height: 112px;
  }
  .profile-panel.is-user-view #profilePanelBack,
  .profile-panel.is-user-view #profilePanelClose{
    min-width: 84px;
  }
  .profile-panel.is-user-view .profile-user-actions{
    width: min(100%, 520px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .profile-panel.is-user-view .profile-user-action{
    min-height: 76px;
    border-radius: 20px;
    padding: 8px 10px;
  }
  .profile-panel.is-user-view .profile-user-action-label{
    font-size: 13px;
  }
  .profile-panel.is-user-view .profile-user-content{
    padding: 44px 12px 24px;
  }
  .profile-panel.is-user-view .profile-card{
    border-radius: 22px;
    padding: 18px;
  }
  .profile-contact-editor{
    width: min(calc(100vw - 24px), 100%);
    padding: calc(env(safe-area-inset-top, 0px) + 92px) 0 calc(env(safe-area-inset-bottom, 0px) + 20px);
  }
  .profile-contact-editor.profile-self-screen{
    width: 100%;
    gap: 10px;
  }
  .profile-contact-editor-hero{
    padding-top: 0;
  }
  .profile-contact-editor-themed .profile-self-input-row{
    min-height: 50px;
    padding: 1px 12px 1px;
  }
  .profile-contact-editor-themed .profile-self-input-row.is-bio{
    padding: 10px 12px 10px;
  }
  .profile-contact-editor-themed .profile-self-textarea{
    min-height: 88px;
    max-height: 140px;
  }
  .profile-contact-editor-handle{
    font-size: 12px;
  }
  .profile-confirm-actions{
    grid-template-columns: 1fr;
  }
  .sidebar{ width: 100%; min-width: 0; }
  .main{ display:none; }
  .shell.is-chat-open .main{ display:flex; animation: slide-in-right .18s ease both; }
  .shell.is-chat-open .sidebar{ display:none; }
  .mobile-only{ display:flex; }
  .chat-header-actions{
    gap:6px;
  }
  .chat-scroll-date-badge{
    top: calc(var(--chat-header-height) + 8px);
    font-size: 12px;
    padding: 5px 10px;
  }
  .chat-find-bar{
    left: 10px;
    right: 10px;
    top: calc(var(--chat-header-height) + 6px);
    padding: 7px;
    gap: 6px;
  }
  .chat-find-results{
    left: 10px;
    right: 10px;
    top: calc(var(--chat-header-height) + 58px);
    max-height: min(54vh, 360px);
    padding: 6px;
    gap: 5px;
  }
  .chat-date-popover{
    left: 10px;
    right: 10px;
    width: auto;
    top: calc(var(--chat-header-height) + 56px);
    padding: 10px;
    border-radius: 16px;
  }
  .chat-date-picker-grid{
    gap: 5px;
  }
  .chat-date-picker-day{
    height: 32px;
    font-size: 12px;
    border-radius: 10px;
  }
  .chat-find-result{
    padding: 8px 9px;
    min-height: 52px;
    gap: 8px;
  }
  .chat-find-avatar{
    width: 30px;
    height: 30px;
    min-width: 30px;
  }
  .chat-find-result-sender{
    font-size: 13px;
  }
  .chat-find-result-preview{
    font-size: 12px;
    line-height: 1.36;
  }
  .chat-pinned-bar{
    left: 10px;
    right: 10px;
    top: calc(var(--chat-header-height) + 6px);
    padding: 6px 7px;
    gap: 6px;
  }
  .chat-media-bar{
    top: calc(var(--chat-header-height) + 6px);
  }
  .message-selection-bar{
    left: 10px;
    right: 10px;
    bottom: calc(var(--chat-composer-height) + 8px);
    padding: 7px 8px;
    border-radius: 14px;
    gap: 6px;
    align-items: stretch;
    flex-direction: column;
  }
  .message-selection-count{
    min-width: 0;
    font-size: 11px;
  }
  .message-selection-actions{
    gap: 5px;
    justify-content: flex-start;
  }
  .message-selection-btn{
    min-height: 32px;
    border-radius: 10px;
    padding: 0 8px;
    font-size: 11px;
    flex: 1 1 calc(50% - 5px);
  }
  .chat-pinned-bar.with-find{
    top: calc(var(--chat-header-height) + 68px);
  }
  .chat-pinned-bar.with-media-player{
    top: calc(var(--chat-header-height) + 80px);
  }
  .chat-pinned-bar.with-find.with-media-player{
    top: calc(var(--chat-header-height) + 146px);
  }
  .chat-pinned-count{
    min-width: 48px;
    font-size: 11px;
  }
  .chat-pinned-main{
    padding: 6px 9px;
  }
  .chat-pinned-text{
    font-size: 12px;
  }
  .chat-find-count{
    min-width: 44px;
    font-size: 11px;
  }
  .messages.has-chat-find{
    padding-top: calc(var(--chat-header-height) + 62px);
  }
  .messages.has-chat-pinned{
    padding-top: calc(var(--chat-header-height) + 62px);
  }
  .messages.has-chat-find.has-chat-pinned{
    padding-top: calc(var(--chat-header-height) + 118px);
  }
  .messages.has-chat-media-player{
    padding-top: calc(var(--chat-header-height) + 62px);
  }
  .messages.has-chat-find.has-chat-media-player{
    padding-top: calc(var(--chat-header-height) + 118px);
  }
  .messages.has-chat-pinned.has-chat-media-player{
    padding-top: calc(var(--chat-header-height) + 130px);
  }
  .messages.has-chat-find.has-chat-pinned.has-chat-media-player{
    padding-top: calc(var(--chat-header-height) + 186px);
  }
  .messages.has-chat-find.has-download-hud{
    padding-top: calc(var(--chat-header-height) + 126px);
  }
  .messages.has-chat-pinned.has-download-hud{
    padding-top: calc(var(--chat-header-height) + 126px);
  }
  .messages.has-chat-media-player.has-download-hud{
    padding-top: calc(var(--chat-header-height) + 126px);
  }
  .messages.has-chat-find.has-chat-media-player.has-download-hud{
    padding-top: calc(var(--chat-header-height) + 182px);
  }
  .messages.has-chat-pinned.has-chat-media-player.has-download-hud{
    padding-top: calc(var(--chat-header-height) + 194px);
  }
  .messages.has-chat-find.has-chat-pinned.has-download-hud{
    padding-top: calc(var(--chat-header-height) + 182px);
  }
  .messages.has-chat-find.has-chat-pinned.has-chat-media-player.has-download-hud{
    padding-top: calc(var(--chat-header-height) + 250px);
  }
  .newchat-menu{
    grid-template-columns: 1fr;
  }
  .toast{
    right: 8px;
    left: 8px;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
  }
  .toast-item{
    width: 100%;
  }
  #localVideo{ width: 160px; height: 110px; }
  #sendBtn{
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
  .recorder-strip{
    padding: 0 14px;
  }
  .recorder-timer{
    gap: 12px;
    min-width: 122px;
  }
  .recorder-time{
    font-size: 20px;
  }
  .recorder-hint{
    font-size: 14px;
    max-width: calc(100% - 230px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .recorder-strip-actions{
    gap: 8px;
  }
  .recorder-action-btn{
    width: 32px;
    height: 32px;
  }
  .recorder-action-icon{
    width: 13px;
    height: 13px;
  }
  .recorder-lock-rail{
    width: 46px;
    height: 112px;
    left: calc(var(--rec-anchor-x) - 23px);
    top: calc(var(--rec-anchor-y) - 170px - (var(--rec-lock) * 14px));
  }
  .recorder-lock-glyph,
  .recorder-lock-arrow{
    width: 20px;
    height: 20px;
  }
  .recorder-hud{
    --rec-orb-size: 50px;
    --rec-orb-icon-size: 17px;
  }
  .msg-audio-card{
    width: min(100%, 86vw);
    padding: 8px 10px;
    grid-template-columns: 40px 1fr;
    gap: 6px 8px;
  }
  .msg-video{
    width: min(100%, 86vw);
    max-height: 320px;
  }
  .msg-video-play{
    width: 52px;
    height: 52px;
  }
  .msg-video-controls{
    left: 8px;
    right: 8px;
    bottom: 8px;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .msg-video-time{
    min-width: 0;
  }
  .jump-latest-btn,
  .jump-round-btn{
    right: 12px;
    width: 44px;
    height: 44px;
  }
  .jump-latest-btn{
    bottom: calc(var(--chat-composer-height) + 12px);
  }
  .jump-round-btn{
    bottom: calc(var(--chat-composer-height) + 64px);
  }
  .jump-latest-icon{
    font-size: 22px;
  }
  .jump-latest-badge{
    top: -4px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
  }
  .jump-round-icon{
    width: 17px;
    height: 17px;
  }
  .palette-controls{
    gap: 6px;
  }
  .audio-play-btn{
    width: 40px;
    height: 40px;
  }
  .audio-wave-host{
    min-height: 30px;
  }
  .audio-wave-scene{
    height: 30px;
  }
  .poll-compose-option{
    grid-template-columns: 22px 30px minmax(0, 1fr) 30px;
    row-gap: 6px;
  }
  .poll-compose-correct-wrap{
    grid-column: 1 / -1;
    padding-left: 56px;
  }
  .poll-compose-handle,
  .poll-compose-remove{
    width: 30px;
    height: 30px;
  }
  .msg-poll{
    padding: 9px;
    border-radius: 14px;
  }
  .msg-poll-option{
    padding: 7px;
  }
}

@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.checks.seen{
  background: transparent;
  color: #22c55e;
  transform: translateY(-1px);
  filter: drop-shadow(0 0 6px rgba(34,197,94,.2));
  box-shadow: none;
}
.checks.seen .check{ opacity:1; }
.checks.seen-animate{
  animation: checks-seen-pop .52s cubic-bezier(.2,.86,.24,1) both;
}
html[data-theme="light"] .checks.seen{
  color: #16a34a;
  filter: drop-shadow(0 0 6px rgba(22,163,74,.18));
}