:root{
  --app-height: 100vh;
  --visual-viewport-height: 100vh;
  --viewport-offset-top: 0px;
  --keyboard-inset: 0px;
  --bg: #1e1e1e;
  --panel: #262626;
  --panel2:#202020;
  --card:#2b2b2b;
  --text:#f5f5f5;
  --muted:#b0b0b0;
  --faint: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.11);
  --accent:#fa9467;
  --accent2:#e07a4a;
  --danger:#ef4444;
  --warn:#d2d2d2;
  --warn-soft: rgba(210,210,210,.12);
  --warn-border: rgba(196,196,196,.22);
  --warn-glow: rgba(160,169,179,.18);
  --shadow: 0 18px 42px rgba(0,0,0,.24);
  --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: #fa9467;
  --ui-accent-soft: rgba(250,148,103,.16);
  --ui-accent-border: rgba(250,148,103,.26);
  --glass-panel: linear-gradient(180deg, rgba(42,42,42,.96), rgba(32,32,32,.92));
  --glass-panel-strong: linear-gradient(180deg, rgba(46,46,46,.98), rgba(36,36,36,.95));
  --glass-border: rgba(255,255,255,.1);
  --bubble-in-bg: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  --bubble-out-bg: linear-gradient(135deg, rgba(250,148,103,.85), rgba(224,122,74,.92));
  --bubble-out-border: rgba(250,148,103,.26);
  --file-bg: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  --file-bg-hover: rgba(255,255,255,.1);
  --audio-in-bg: #2f2f2f;
  --audio-out-bg: #3a2e28;
  --chat-bg: #1e1e1e;
  --voice-accent: #fa9467;
  --voice-accent-soft: rgba(250,148,103,.16);
  --voice-accent-border: rgba(250,148,103,.26);
  --voice-accent-glow: rgba(250,148,103,.22);
  --surface-1: rgba(255,255,255,.035);
  --surface-2: rgba(255,255,255,.05);
  --surface-3: rgba(255,255,255,.08);
  --surface-4: rgba(255,255,255,.12);
  --surface-strong: rgba(30,30,30,.9);
  --surface-soft: rgba(40,40,40,.82);
  --success: #22c55e;
}
html[data-theme="light"]{
  --bg:#ffffff;
  --panel:#ffffff;
  --panel2:#fafafa;
  --card:#ffffff;
  --text:#1a1a1a;
  --muted:#888888;
  --faint: rgba(17,17,17,.04);
  --border: rgba(17,17,17,.08);
  --shadow: 0 14px 34px rgba(17,17,17,.08);
  --accent:#fa9467;
  --accent2:#e07a4a;
  --danger:#ef4444;
  --warn:#fa9467;
  --warn-soft: rgba(250,148,103,.1);
  --warn-border: rgba(250,148,103,.22);
  --warn-glow: rgba(250,148,103,.15);
  --icon-filter: brightness(0) saturate(100%) invert(14%) sepia(16%) saturate(1031%) hue-rotate(184deg) brightness(95%) contrast(90%);
  --ui-accent: #fa9467;
  --ui-accent-soft: rgba(250,148,103,.12);
  --ui-accent-border: rgba(250,148,103,.24);
  --glass-panel: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.98));
  --glass-panel-strong: linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,255,255,.99));
  --glass-border: rgba(17,17,17,.08);
  --bubble-in-bg: linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,248,248,.96));
  --bubble-out-bg: linear-gradient(135deg, rgba(250,148,103,.18), rgba(250,148,103,.08));
  --bubble-out-border: rgba(250,148,103,.2);
  --file-bg: linear-gradient(135deg, rgba(17,17,17,.03), rgba(17,17,17,.015));
  --file-bg-hover: rgba(17,17,17,.06);
  --audio-in-bg: #f0f2f7;
  --audio-out-bg: #fef0e8;
  --chat-bg: #ffffff;
  --voice-accent: #fa9467;
  --voice-accent-soft: rgba(250,148,103,.12);
  --voice-accent-border: rgba(250,148,103,.22);
  --voice-accent-glow: rgba(250,148,103,.15);
  --surface-1: rgba(17,17,17,.02);
  --surface-2: rgba(17,17,17,.04);
  --surface-3: rgba(17,17,17,.07);
  --surface-4: rgba(17,17,17,.1);
  --surface-strong: rgba(255,255,255,.98);
  --surface-soft: rgba(250,250,250,.98);
  --success: #16a34a;
}

*{ box-sizing:border-box; }
html{
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body{ height:100%; }
body{
  margin:0;
  background: radial-gradient(1300px 860px at 14% 10%, rgba(255,255,255,.04), transparent 54%),
              radial-gradient(1040px 760px at 88% 18%, rgba(255,255,255,.025), transparent 52%),
              var(--bg);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow:hidden;
  overscroll-behavior: none;
}
html[data-theme="light"] body{
  background: #ffffff;
}
html[data-theme="light"] ::selection{
  background: rgba(250,148,103,.3);
  color: #1a1a1a;
}
/* Scrollbars */
*::-webkit-scrollbar{
  width: 12px;
  height: 12px;
}
*::-webkit-scrollbar-track{
  background: transparent;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
  border: 2px solid transparent;
}
*::-webkit-scrollbar-thumb:hover{
  background: rgba(0,0,0,.28);
}
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;
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(255,255,255,.04);
  background-image: none;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  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); }

.auth-phone-card{
  width: min(620px, 100%);
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  position: relative;
}
.auth-brand{
  margin-bottom: 20px;
  align-items: center;
}
.auth-brand-mark{
  width: 58px;
  height: 58px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.18);
  background: linear-gradient(140deg, rgba(73,190,255,.18), rgba(63,223,171,.14));
  box-shadow: 0 18px 42px rgba(7,10,18,.24);
}
.auth-brand-mark img{
  width: 32px;
  height: 32px;
}
.auth-chip-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.auth-chip{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .01em;
}
.auth-step{
  display: none;
  flex-direction: column;
  gap: 18px;
  animation: fade-up .42s cubic-bezier(.2,.86,.2,1);
}
.auth-step.is-active{
  display: flex;
}
.auth-step-head{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth-kicker{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(125,211,252,.82);
}
.auth-title{
  margin: 0;
  font-size: clamp(32px, 5vw, 48px);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 760;
}
.auth-title-code{
  font-size: clamp(28px, 4.4vw, 40px);
}
.auth-copy{
  margin: 0;
  max-width: 34rem;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.auth-phone-wrap{
  position: relative;
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 0 18px;
  border-radius: 28px;
  border: 1px solid rgba(148,163,184,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 24px 48px rgba(7,10,18,.22);
  transition: border-color .28s ease, box-shadow .28s ease, transform .24s ease;
}
.auth-phone-wrap:hover{
  transform: translateY(-1px);
}
.auth-phone-wrap.focused{
  border-color: rgba(125,211,252,.36);
  box-shadow: 0 0 0 4px rgba(125,211,252,.08), 0 24px 48px rgba(7,10,18,.24);
}
.auth-phone-wrap.valid{
  border-color: rgba(34,197,94,.28);
  box-shadow: 0 0 0 4px rgba(34,197,94,.08), 0 24px 48px rgba(7,10,18,.24);
}
.auth-phone-wrap.error{
  border-color: rgba(239,68,68,.32);
  box-shadow: 0 0 0 4px rgba(239,68,68,.08), 0 24px 48px rgba(7,10,18,.24);
}
.flag-slot{
  width: 42px;
  height: 42px;
  flex: none;
  border: 0;
  border-radius: 14px;
  display: grid;
  place-items: center;
  padding: 0;
  margin-right: 10px;
  background: rgba(255,255,255,.05);
  cursor: pointer;
  color: var(--text);
}
.flag-slot.has-flag{
  background: rgba(255,255,255,.03);
}
.flag-inner{
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 22px;
}
.flag-inner.anim-out{
  animation: flag-out .16s ease-in forwards;
}
.flag-inner.anim-in{
  animation: flag-in .32s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes flag-out{
  from{ transform: scale(1) rotate(0deg); opacity: 1; }
  to{ transform: scale(.3) rotate(-18deg); opacity: 0; }
}
@keyframes flag-in{
  from{ transform: scale(.3) rotate(18deg); opacity: 0; }
  60%{ transform: scale(1.08) rotate(-3deg); opacity: 1; }
  to{ transform: scale(1) rotate(0deg); opacity: 1; }
}
.flag-placeholder{
  opacity: .54;
}
.plus-prefix{
  font-size: 20px;
  color: var(--muted);
  margin-right: 2px;
}
.phone-input{
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.phone-input:focus{
  background: transparent;
  box-shadow: none;
}
.phone-input::placeholder{
  color: rgba(176,176,176,.5);
}
.auth-phone-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 22px;
}
.auth-phone-country,
.auth-e164-out{
  font-size: 12px;
  color: var(--muted);
}
.auth-primary-btn{
  min-height: 56px;
  border-radius: 20px;
  font-size: 15px;
  background: linear-gradient(135deg, rgba(67,170,255,.92), rgba(44,205,150,.84));
  border-color: rgba(102,217,255,.42);
  box-shadow: 0 18px 36px rgba(35,140,197,.24);
}
.auth-primary-btn:hover{
  filter: brightness(1.04);
}
.auth-primary-btn.is-busy{
  opacity: .82;
  cursor: wait;
}
.auth-secondary-btn{
  min-height: 50px;
  border-radius: 18px;
}
.auth-footnote{
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.otp-input-row{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.otp-digit{
  min-height: 68px;
  padding: 0;
  text-align: center;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  transition: transform .18s ease, border-color .22s ease, box-shadow .22s ease;
}
.otp-digit:focus{
  background: rgba(125,211,252,.08);
  border-color: rgba(125,211,252,.36);
  box-shadow: 0 0 0 4px rgba(125,211,252,.08);
}
.otp-digit.is-filled{
  border-color: rgba(44,205,150,.3);
}
.auth-code-actions{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-code-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.auth-code-status{
  margin: 0;
}
.auth-resend-link{
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.auth-resend-link:disabled{
  opacity: .56;
  cursor: default;
}
.auth-debug-code{
  min-height: 20px;
  font-size: 12px;
  color: rgba(125,211,252,.86);
  letter-spacing: .02em;
}
.auth-footer-phone{
  margin-top: 28px;
  align-items: center;
}
.auth-footer-links{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.auth-theme-btn{
  min-height: 42px;
  padding: 0 14px;
}
.auth-confirm-phone{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.03);
}
.auth-confirm-phone strong{
  font-size: 22px;
  letter-spacing: -.03em;
}
.auth-phone-card{
  width: min(90vw, 380px);
  padding-top: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.auth-card-icon{
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: transparent;
  border: 0;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
}
.auth-card-icon img{
  width: 20px;
  height: 20px;
  filter: var(--icon-filter);
}
.auth-card-logo{
  width: 80px;
  height: 80px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  opacity: 0;
  animation: auth-phone-card-in .45s .06s cubic-bezier(.2,.8,.2,1) forwards;
}
.auth-card-logo img{
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.auth-simple-title{
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  letter-spacing: -.02em;
}
.auth-simple-sub{
  margin: 0 0 4px;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.auth-simple-sub:empty{
  display: none;
}
.auth-code-phone{
  margin-bottom: 2px;
  font-size: 12px;
  letter-spacing: .01em;
}
.auth-phone-card .auth-step{
  gap: 12px;
}
.auth-phone-card .auth-phone-wrap{
  min-height: 54px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  box-shadow: none;
}
.auth-phone-card .auth-phone-wrap:hover{
  transform: none;
  background: var(--surface-2);
}
.auth-phone-card .flag-slot{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  margin-right: 8px;
  background: var(--surface-2);
}
.auth-phone-card .flag-slot.has-flag{
  background: transparent;
}
.auth-phone-card .plus-prefix{
  font-size: 18px;
  font-weight: 500;
  margin-right: 1px;
}
.auth-phone-card .phone-input{
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .01em;
}
.auth-phone-card .phone-input::placeholder{
  color: rgba(176,176,176,.3);
  font-weight: 400;
}
.auth-actions{
  margin-top: 2px;
}
.auth-phone-card .auth-primary-btn{
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-1));
  border: 0;
  box-shadow: none;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.auth-phone-card .auth-primary-btn:hover{
  background: linear-gradient(180deg, var(--surface-4), var(--surface-2));
  border-color: rgba(255,255,255,.16);
  filter: none;
}
.auth-phone-card .auth-primary-btn:disabled{
  opacity: .35;
}
.auth-phone-card .auth-primary-btn.is-busy{
  opacity: .82;
}
.auth-phone-card .auth-e164-out{
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  min-height: 15px;
  margin-top: 8px;
}
.auth-phone-card .otp-input-row{
  gap: 8px;
}
.auth-phone-card .otp-digit{
  min-height: 56px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.auth-phone-card .otp-digit:focus{
  background: var(--surface-2);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 0 3px rgba(255,255,255,.04);
}
.auth-phone-card .otp-digit.is-filled{
  border-color: rgba(34,197,94,.35);
}
.auth-code-links{
  align-items: center;
  justify-content: space-between;
}
.auth-phone-card .auth-resend-link{
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
}
.auth-phone-card .auth-debug-code{
  min-height: 18px;
  text-align: center;
  color: var(--muted);
}
html[data-theme="light"] .auth-card-icon{
  background: transparent;
  border-color: transparent;
}
html[data-theme="light"] .auth-phone-card .auth-phone-wrap,
html[data-theme="light"] .auth-phone-card .otp-digit{
  background: rgba(15,23,42,.03);
}
html[data-theme="light"] .auth-phone-card .flag-slot{
  background: rgba(15,23,42,.04);
}

@keyframes auth-phone-card-in{
  to{
    transform: translateY(0);
    opacity: 1;
  }
}

.auth.auth-phone-stage{
  flex: 1;
  min-height: 100%;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px;
}

.auth.auth-phone-stage .auth-card.auth-phone-card{
  width: min(90vw, 380px);
  max-width: 100%;
  padding: 32px 24px 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(43,43,43,.96), rgba(38,38,38,.92));
  box-shadow: var(--shadow);
  backdrop-filter: none;
  display: block;
  transform: translateY(20px);
  opacity: 0;
  animation: auth-phone-card-in .5s cubic-bezier(.2,.8,.2,1) forwards;
}

.auth.auth-phone-stage .auth-card-icon{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--surface-3), var(--surface-1));
  border: 1px solid var(--glass-border);
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  opacity: 0;
  animation: auth-phone-card-in .45s .06s cubic-bezier(.2,.8,.2,1) forwards;
}

.auth.auth-phone-stage .auth-card-icon img{
  width: 22px;
  height: 22px;
  filter: var(--icon-filter);
}

.auth.auth-phone-stage .auth-phone-card .auth-step{
  gap: 0;
}

.auth.auth-phone-stage .auth-simple-title{
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  letter-spacing: -.02em;
}

.auth.auth-phone-stage .auth-simple-sub{
  color: var(--muted);
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 22px;
  opacity: 0;
  animation: auth-phone-card-in .45s .1s cubic-bezier(.2,.8,.2,1) forwards;
}

.auth.auth-phone-stage .auth-code-phone{
  margin: 0 0 22px;
  font-size: 13px;
  letter-spacing: 0;
}

.auth.auth-phone-stage .auth-phone-wrap{
  position: relative;
  display: flex;
  align-items: center;
  height: 54px;
  min-height: 54px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  box-shadow: none;
  transition: border-color .3s ease, box-shadow .3s ease, background .2s ease;
}

.auth.auth-phone-stage .auth-phone-wrap:hover{
  transform: none;
  background: var(--surface-2);
}

.auth.auth-phone-stage .auth-phone-wrap.focused{
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 0 3px rgba(255,255,255,.04);
  background: var(--surface-2);
}

.auth.auth-phone-stage .auth-phone-wrap.valid{
  border-color: rgba(34,197,94,.35);
  box-shadow: 0 0 0 3px rgba(34,197,94,.07), 0 0 16px rgba(34,197,94,.06);
}

.auth.auth-phone-stage .auth-phone-wrap.error{
  border-color: rgba(239,68,68,.35);
  box-shadow: 0 0 0 3px rgba(239,68,68,.06);
}

.auth.auth-phone-stage .flag-slot{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  margin-right: 8px;
  background: var(--surface-2);
  border: 1px solid transparent;
}

.auth.auth-phone-stage .flag-slot.has-flag{
  background: transparent;
  border-color: transparent;
}

.auth.auth-phone-stage .plus-prefix{
  font-size: 18px;
  font-weight: 500;
  color: var(--muted);
  margin-right: 1px;
  line-height: 1;
}

.auth.auth-phone-stage .phone-input{
  flex: 1;
  width: auto;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .01em;
}

.auth.auth-phone-stage .phone-input:focus{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.auth.auth-phone-stage .phone-input::placeholder{
  color: rgba(176,176,176,.3);
  font-weight: 400;
}

.auth.auth-phone-stage .auth-actions{
  margin-top: 16px;
}

.auth.auth-phone-stage .auth-primary-btn{
  width: 100%;
  height: 48px;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-1));
  box-shadow: none;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .2s ease, transform .15s ease, background .2s ease, border-color .2s ease;
}

.auth.auth-phone-stage .auth-primary-btn:hover:not(:disabled){
  background: linear-gradient(180deg, var(--surface-4), var(--surface-2));
  border-color: rgba(255,255,255,.16);
  filter: none;
}

.auth.auth-phone-stage .auth-primary-btn:active:not(:disabled){
  transform: scale(.985);
}

.auth.auth-phone-stage .auth-primary-btn:disabled{
  opacity: .35;
  pointer-events: none;
}

.auth.auth-phone-stage .auth-primary-btn.is-busy{
  opacity: .82;
}

.auth.auth-phone-stage .auth-e164-out{
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
  min-height: 15px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.auth.auth-phone-stage .otp-input-row{
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.auth.auth-phone-stage .otp-digit{
  min-height: 56px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.auth.auth-phone-stage .otp-digit:focus{
  background: var(--surface-2);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 0 3px rgba(255,255,255,.04);
}

.auth.auth-phone-stage .otp-digit.is-filled{
  border-color: rgba(34,197,94,.35);
}

.auth.auth-phone-stage .auth-code-links{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 14px;
}

.auth.auth-phone-stage .auth-resend-link{
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
}

.auth.auth-phone-stage .auth-debug-code{
  min-height: 18px;
  text-align: center;
  color: var(--muted);
  margin-top: 8px;
}

/* 2FA password & reset inputs */
.auth-2fa-wrap,
.auth-2fa-reset-wrap{
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  margin: 0 auto 16px;
}
.auth-2fa-input{
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  border-radius: 14px;
  border: 1.5px solid var(--glass-border);
  background: transparent;
  color: var(--fg);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  box-sizing: border-box;
}
.auth-2fa-input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.auth-2fa-input::placeholder{
  color: var(--muted);
  opacity: .7;
}

/* Auth step slide animations */
@keyframes authSlideInRight{
  from{ transform: translateX(60px); opacity: 0; }
  to  { transform: translateX(0);    opacity: 1; }
}
@keyframes authSlideInLeft{
  from{ transform: translateX(-60px); opacity: 0; }
  to  { transform: translateX(0);     opacity: 1; }
}
@keyframes authSlideOutLeft{
  from{ transform: translateX(0);     opacity: 1; }
  to  { transform: translateX(-60px); opacity: 0; }
}
@keyframes authSlideOutRight{
  from{ transform: translateX(0);     opacity: 1; }
  to  { transform: translateX(60px);  opacity: 0; }
}
.auth-slide-in-right{
  animation: authSlideInRight .3s cubic-bezier(.4,0,.2,1) both;
}
.auth-slide-in-left{
  animation: authSlideInLeft .3s cubic-bezier(.4,0,.2,1) both;
}
.auth-slide-out-left{
  animation: authSlideOutLeft .25s cubic-bezier(.4,0,.2,1) both;
  pointer-events: none;
}
.auth-slide-out-right{
  animation: authSlideOutRight .25s cubic-bezier(.4,0,.2,1) both;
  pointer-events: none;
}
.auth-phone-card:has(.auth-slide-out-left, .auth-slide-out-right){
  overflow: hidden;
}

html[data-theme="light"] .auth.auth-phone-stage .auth-card.auth-phone-card{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.96));
}

html[data-theme="light"] .auth.auth-phone-stage .auth-card-icon{
  background: linear-gradient(135deg, rgba(17,17,17,.05), rgba(17,17,17,.02));
  border-color: rgba(17,17,17,.08);
}

html[data-theme="light"] .auth.auth-phone-stage .auth-phone-wrap,
html[data-theme="light"] .auth.auth-phone-stage .otp-digit{
  background: rgba(15,23,42,.03);
}

html[data-theme="light"] .auth.auth-phone-stage .flag-slot{
  background: rgba(15,23,42,.04);
}

@media (max-width: 640px){
  .auth.auth-phone-stage{
    padding: 16px;
  }
}
.phone-country-overlay{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.56);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 90;
}
.phone-country-overlay.open{
  opacity: 1;
  pointer-events: auto;
}
.phone-country-sheet{
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  width: min(94vw, 420px);
  max-height: min(70vh, 620px);
  transform: translate3d(-50%, 18px, 0) scale(.98);
  opacity: 0;
  pointer-events: none;
  border-radius: 28px;
  border: 1px solid rgba(148,163,184,.16);
  background: linear-gradient(180deg, rgba(16,20,30,.98), rgba(10,14,22,.96));
  box-shadow: 0 32px 72px rgba(2,6,23,.44);
  overflow: hidden;
  transition: transform .28s cubic-bezier(.2,.86,.2,1), opacity .2s ease;
  z-index: 91;
}
.phone-country-sheet.open{
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0) scale(1);
}
.phone-country-sheet-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
}
.phone-country-sheet-title{
  font-size: 16px;
  font-weight: 700;
}
.phone-country-sheet-close{
  border: 0;
  background: rgba(255,255,255,.06);
}
.phone-country-search{
  padding: 0 16px 14px;
}
.phone-country-search input{
  min-height: 46px;
  border-radius: 16px;
  font-size: 16px;
}
.phone-country-list{
  overflow: auto;
  max-height: calc(min(70vh, 620px) - 110px);
  padding: 0 10px 10px;
}
.phone-country-item{
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--text);
  padding: 0 12px;
  cursor: pointer;
  text-align: left;
}
.phone-country-item:hover,
.phone-country-item.is-selected{
  background: rgba(255,255,255,.06);
}
.phone-country-flag{
  font-size: 19px;
}
.phone-country-name{
  min-width: 0;
  font-size: 14px;
  font-weight: 560;
}
.phone-country-dial{
  font-size: 13px;
  color: var(--muted);
}
.shake{
  animation: shake .38s ease;
}
@keyframes shake{
  0%, 100%{ transform: translateX(0); }
  20%{ transform: translateX(-6px); }
  40%{ transform: translateX(5px); }
  60%{ transform: translateX(-3px); }
  80%{ transform: translateX(2px); }
}
html[data-theme="light"] .auth-brand-mark{
  border-color: rgba(250,148,103,.24);
  background: linear-gradient(140deg, rgba(250,148,103,.14), rgba(250,148,103,.08));
}
html[data-theme="light"] .auth-chip{
  background: rgba(15,23,42,.03);
  border-color: rgba(148,163,184,.18);
}
html[data-theme="light"] .auth-kicker,
html[data-theme="light"] .auth-debug-code{
  color: rgba(3,105,161,.82);
}
html[data-theme="light"] .auth-phone-wrap,
html[data-theme="light"] .otp-digit{
  border-color: rgba(148,163,184,.2);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 22px 42px rgba(15,23,42,.08);
}
html[data-theme="light"] .flag-slot{
  background: rgba(15,23,42,.04);
}
html[data-theme="light"] .phone-country-sheet{
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.98));
  border-color: rgba(148,163,184,.22);
  box-shadow: 0 32px 72px rgba(15,23,42,.14);
}
html[data-theme="light"] .phone-country-item:hover,
html[data-theme="light"] .phone-country-item.is-selected,
html[data-theme="light"] .auth-confirm-phone{
  background: rgba(15,23,42,.04);
}
@media (max-width: 720px){
  .auth{
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
  }
  .auth-chip-row{
    gap: 8px;
  }
  .auth-chip{
    min-height: 30px;
    padding: 0 12px;
  }
  .auth-title{
    font-size: clamp(28px, 9vw, 40px);
  }
  .auth-phone-wrap{
    min-height: 64px;
    border-radius: 24px;
    padding: 0 16px;
  }
  .phone-input{
    font-size: 18px;
  }
  .otp-input-row{
    gap: 8px;
  }
  .otp-digit{
    min-height: 60px;
    border-radius: 18px;
    font-size: 24px;
  }
  .auth-footer-phone{
    align-items: flex-start;
    flex-direction: column;
  }
  .auth-footer-links{
    justify-content: flex-start;
  }
}

.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;
}

/* ── Global UX Animations ── */

/* Smooth content fade for tab switching */
@keyframes content-fade-in{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}
.contacts-list:not(.is-hidden),
#callsListEl:not(.is-hidden),
.sidebar-profile-view:not(.is-hidden){
  animation: content-fade-in .2s ease-out;
}

/* Button press feedback */
.btn:active, .icon-btn:active{
  transform: scale(0.94);
  transition: transform .08s ease;
}
.sidebar-profile-edit-btn:active{
  transform: scale(0.96);
}

/* Settings category item press */
.settings-cat-item{
  transition: background .15s, transform .1s !important;
}
.settings-cat-item:active{
  transform: scale(0.97);
}

/* Settings detail content fade */
.settings-detail-body > *{
  animation: content-fade-in .2s ease-out;
}

/* Chat folder tab transitions */
.chat-folder-tab{
  transition: color .2s, background .2s, transform .1s !important;
}
.chat-folder-tab:active{
  transform: scale(0.95);
}

/* Search bar focus glow */
.sidebar-search input:focus{
  box-shadow: 0 0 0 2px rgba(250,148,103,.2);
  transition: box-shadow .2s ease;
}

/* Composer input focus */
.composer-input:focus-within{
  box-shadow: 0 0 0 2px rgba(250,148,103,.12);
  transition: box-shadow .2s ease;
}

/* Send button pulse on enabled */
@keyframes send-ready-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(250,148,103,.4); }
  70%{ box-shadow: 0 0 0 8px rgba(250,148,103,0); }
  100%{ box-shadow: 0 0 0 0 rgba(250,148,103,0); }
}

/* Profile panel smooth slide */
.profile-panel{
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s ease !important;
}

/* Modal backdrop fade */
.modal-backdrop{
  transition: opacity .2s ease !important;
}

/* Avatar hover effect */
.avatar{
  transition: transform .15s ease, box-shadow .15s ease;
}
.chat-header .avatar:hover,
.sidebar-profile-avatar:hover{
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

/* Message bubble entrance polish */
.msg-row{
  transition: opacity .15s ease;
}

/* Scroll date badge */
.chat-scroll-date{
  transition: opacity .2s ease, transform .2s ease !important;
}

/* Toast slide-in enhancement */
.toast{
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s ease !important;
}

/* Chat item active highlight transition */
.chat-item.is-active{
  transition: background .25s ease, box-shadow .25s ease;
}

/* Unread badge pop */
.unread-badge{
  transition: transform .2s cubic-bezier(.4,0,.2,1);
}
.unread-badge:not(:empty){
  animation: selection-chip-pop .25s ease-out;
}

/* Streak badge subtle pulse */
.streak-badge{
  transition: transform .15s ease;
}
.streak-badge:hover{
  transform: scale(1.1);
}

/* Call history item hover */
.call-history-item{
  transition: background .15s ease, transform .1s ease;
}
.call-history-item:active{
  transform: scale(0.98);
}

/* AI context panel slide */
.ai-context-panel{
  transition: max-height .3s cubic-bezier(.4,0,.2,1), opacity .25s ease !important;
}

/* Smooth scrollbar */
.chat-list, .contacts-list, #callsListEl, .settings-categories-list, .settings-detail-col{
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(128,128,128,.2) transparent;
}
.chat-list::-webkit-scrollbar,
.contacts-list::-webkit-scrollbar,
#callsListEl::-webkit-scrollbar,
.settings-categories-list::-webkit-scrollbar,
.settings-detail-col::-webkit-scrollbar{
  width: 5px;
}
.chat-list::-webkit-scrollbar-thumb,
.contacts-list::-webkit-scrollbar-thumb,
#callsListEl::-webkit-scrollbar-thumb,
.settings-categories-list::-webkit-scrollbar-thumb,
.settings-detail-col::-webkit-scrollbar-thumb{
  background: rgba(128,128,128,.18);
  border-radius: 4px;
}
.chat-list::-webkit-scrollbar-thumb:hover,
.contacts-list::-webkit-scrollbar-thumb:hover{
  background: rgba(128,128,128,.35);
}

/* Reduced motion: disable all custom animations */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

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

.sidebar{
  width: 360px;
  flex-shrink: 0;
  min-width: 240px;
  min-height: 0;
  position: relative;
  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;
  padding: 0 0 0 12px;
  border-radius: 26px;
  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 !important; border-radius:0;
  outline:none; box-shadow: none !important;
}
.sidebar-search input:focus{ border:0; background: transparent !important; box-shadow: none !important; }

/* Chat folder tabs */
.chat-folder-tabs{
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 8px 8px 12px;
  flex-shrink: 0;
}
.chat-folder-tabs:empty{ display: none; }
.folder-tabs-scroll{
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  min-width: 0;
}
.folder-tabs-scroll::-webkit-scrollbar{ display: none; }
.folder-tabs-actions{
  display: flex;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
  padding-left: 4px;
}
.folder-action-btn{
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 6px;
  transition: color .2s, background .2s;
}
.folder-action-btn:hover{
  color: var(--accent, #fa9467);
  background: rgba(128,128,128,.08);
}
.folder-action-btn.is-spinning svg{
  animation: folder-spin 1s linear infinite;
}
@keyframes folder-spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
/* Folder chat selector in settings */
.folder-chat-selector{
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 10px;
  padding: 8px;
}
.folder-chat-option{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
}
.folder-chat-option:hover{
  background: rgba(128,128,128,.06);
}
.folder-chat-option input[type="checkbox"]{
  accent-color: var(--accent, #fa9467);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.folder-chat-avatar{
  width: 32px !important;
  height: 32px !important;
  font-size: 13px !important;
}
.folder-chat-name{
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

/* Folder Manager redesign */
.folder-mgr-header{ margin-bottom: 20px; }
.folder-mgr-title{
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.folder-mgr-sub{
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}
.folder-mgr-card{
  background: var(--surface, rgba(128,128,128,.04));
  border: 1px solid var(--border, rgba(0,0,0,.06));
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 16px;
}
.folder-mgr-card-head{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.folder-mgr-card-icon{
  color: var(--accent, #fa9467);
  flex-shrink: 0;
  margin-top: 2px;
}
.folder-mgr-card-title{
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.folder-mgr-card-desc{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.folder-mgr-prompt{
  width: 100%;
  border: 1px solid var(--border, rgba(0,0,0,.1));
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-family: inherit;
  resize: none;
  background: var(--bg, #fff);
  color: var(--text);
  margin-bottom: 12px;
  box-sizing: border-box;
}
.folder-mgr-prompt:focus{
  outline: none;
  border-color: var(--accent, #fa9467);
}
.folder-mgr-card-actions{
  display: flex;
  gap: 8px;
}
.folder-mgr-btn{
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border, rgba(0,0,0,.1));
  background: var(--bg, #fff);
  color: var(--text);
  cursor: pointer;
  transition: all .2s;
}
.folder-mgr-btn:hover{
  background: rgba(128,128,128,.06);
}
.folder-mgr-btn-primary{
  background: var(--accent, #fa9467);
  color: #fff;
  border-color: transparent;
}
.folder-mgr-btn-primary:hover{
  opacity: .9;
  background: var(--accent, #fa9467);
}
.folder-mgr-status{
  font-size: 12px;
  margin-top: 8px;
  min-height: 16px;
  transition: color .2s;
}
.folder-mgr-status.is-active{ color: var(--accent, #fa9467); }
.folder-mgr-status.is-success{ color: #22c55e; }
.folder-mgr-status.is-error{ color: var(--danger, #ef4444); }
.folder-mgr-divider{
  height: 1px;
  background: var(--border, rgba(0,0,0,.06));
  margin: 20px 0;
}
.folder-mgr-section-title{
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin-bottom: 12px;
}
.folder-mgr-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.folder-mgr-folder-card{
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all .2s;
  background: var(--bg, #fff);
}
.folder-mgr-folder-card:hover{
  border-color: var(--accent, #fa9467);
  box-shadow: 0 2px 8px rgba(250,148,103,.12);
}
.folder-mgr-folder-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.folder-mgr-folder-name{
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.folder-mgr-folder-count{
  font-size: 12px;
  color: var(--muted);
}
.folder-mgr-folder-unread{
  font-size: 11px;
  color: var(--accent, #fa9467);
  font-weight: 600;
  margin-top: 4px;
}
.folder-mgr-badge{
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .3px;
}
.folder-mgr-badge.ai{
  background: rgba(250,148,103,.12);
  color: var(--accent, #fa9467);
}
.folder-mgr-badge.custom{
  background: rgba(59,130,246,.1);
  color: #3b82f6;
}
.folder-mgr-badge.auto{
  background: rgba(128,128,128,.08);
  color: var(--muted);
}
.folder-mgr-add-card{
  border-style: dashed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 80px;
}
.folder-mgr-add-icon{
  color: var(--muted);
  margin-bottom: 4px;
}
.folder-mgr-add-card:hover .folder-mgr-add-icon{
  color: var(--accent, #fa9467);
}
.folder-mgr-tips{
  background: rgba(250,148,103,.04);
  border-radius: 12px;
  padding: 14px 16px;
}
.folder-mgr-tips-title{
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.folder-mgr-tip{
  font-size: 12px;
  color: var(--muted);
  padding: 3px 0;
  padding-left: 12px;
  position: relative;
}
.folder-mgr-tip::before{
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent, #fa9467);
}
.chat-folder-tab{
  position: relative;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s;
  border-radius: 20px;
}
.chat-folder-tab:hover{
  color: var(--text);
  background: rgba(128,128,128,.08);
}
.chat-folder-tab.is-active{
  color: var(--accent, #fa9467);
}
.chat-folder-tab.is-active::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--accent, #fa9467);
  border-radius: 1px;
}
.chat-folder-tab .folder-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 5px;
  border-radius: 9px;
  background: var(--accent, #fa9467);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.chat-list{
  flex: 1;
  min-height: 0;
  overflow:auto;
  padding: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
.chat-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 14px;
  border-radius: 0;
  cursor:pointer;
  transition: background .18s ease, transform .12s ease;
  position:relative;
  border-bottom: 1px solid var(--border);
}
.chat-item:active{ transform: scale(0.98); }
.chat-item:hover{ background: var(--faint); }
.chat-item.is-active{
  background: rgba(250,148,103,.10);
}
.chat-item.is-favorites{
  background: transparent;
}
.chat-item.is-favorites:hover{
  background: var(--faint);
}
.chat-item.is-favorites.is-active{
  background: rgba(250,148,103,.10);
}
.chat-item.is-favorites .avatar{
  background: var(--surface-2);
}
.chat-item.is-favorites .chat-name{
  color: var(--text);
}
.chat-item.is-favorites .chat-name::before{
  content: "★";
  margin-right: 6px;
  color: rgba(180,180,180,.8);
}
.chat-item.is-favorites .chat-preview{
  color: var(--muted);
}
.chat-item.is-favorites .chat-tail-icon{
  color: rgba(180,180,180,.8);
}
html[data-theme="light"] .chat-item.is-favorites{
  background: transparent;
}
html[data-theme="light"] .chat-item.is-favorites:hover{
  background: var(--faint);
}
html[data-theme="light"] .chat-item.is-favorites .chat-name{
  color: rgba(60,60,60,.92);
}
html[data-theme="light"] .chat-item.is-favorites .chat-preview{
  color: rgba(100,100,100,.74);
}
html[data-theme="light"] .chat-item.is-favorites .chat-tail-icon{
  color: rgba(160,160,160,.8);
}

/* ── Sidebar Bottom Nav ── */
.sidebar-bottom-nav{
  position: relative;
  display: flex;
  align-items: center;
  padding: 6px 8px;
  gap: 4px;
  border-top: 1px solid var(--glass-border);
  background: var(--glass-panel);
  backdrop-filter: blur(22px) saturate(1.2);
  flex-shrink: 0;
}
.sidebar-nav-glider{
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 20px rgba(2,6,23,.15);
  transition: transform .44s cubic-bezier(.23,.88,.22,1), width .36s cubic-bezier(.23,.88,.22,1);
  z-index: 0;
  pointer-events: none;
}
.sidebar-bottom-nav.is-no-motion .sidebar-nav-glider{ transition: none; }
.sidebar-nav-tab{
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(255,255,255,.45);
  font-size: 10px;
  font-weight: 660;
  cursor: pointer;
  transition: color .24s ease;
  user-select: none;
  -webkit-user-select: none;
}
.sidebar-nav-tab:hover{ color: rgba(255,255,255,.75); }
.sidebar-nav-tab.is-active{ color: var(--accent); }
.sidebar-nav-icon{
  width: 22px;
  height: 22px;
  opacity: 0.5;
  transition: opacity .2s ease, filter .2s ease;
  filter: var(--icon-filter, none);
}
.sidebar-nav-tab.is-active .sidebar-nav-icon{ opacity: 1; }
html[data-theme="light"] .sidebar-nav-tab{ color: rgba(51,65,85,.45); }
html[data-theme="light"] .sidebar-nav-tab:hover{ color: rgba(15,23,42,.75); }
html[data-theme="light"] .sidebar-nav-tab.is-active{ color: var(--accent); }
html[data-theme="light"] .sidebar-nav-glider{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.88));
  border-color: rgba(148,163,184,.16);
  box-shadow: 0 8px 20px rgba(148,163,184,.14);
}

/* ── Contacts List ── */
.contacts-list{
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 4px 0 12px;
  -webkit-overflow-scrolling: touch;
}
.contacts-letter-header{
  padding: 10px 20px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.chat-item-contact{ padding: 10px 16px; }
.contacts-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  gap: 8px;
  text-align: center;
}
.contacts-empty-text{
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.contacts-empty-hint{
  font-size: 13px;
  color: var(--muted);
}

/* ── View Once Media ── */
.msg-view-once-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 48px;
  background: linear-gradient(135deg, rgba(128,128,128,.08), rgba(128,128,128,.15));
  border-radius: 12px;
  cursor: pointer;
  transition: background .2s;
}
.msg-view-once-wrap:hover{ background: rgba(250,148,103,.1); }
.msg-view-once-icon{ font-size: 28px; opacity: .6; }
.msg-view-once-label{
  font-size: 13px;
  font-weight: 500;
  color: var(--accent, #fa9467);
}
.msg-view-once-opened{
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  padding: 12px 24px;
}
.file-send-view-once{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  padding: 8px 0;
  cursor: pointer;
}

/* ── Translation Badge ── */
.msg-translated-badge{
  display: inline;
  font-size: 11px;
  color: var(--accent, #fa9467);
  margin-left: 6px;
  font-style: italic;
}

/* ── AI Editor ── */
.composer-ai-editor-btn{
  color: var(--muted);
  opacity: .6;
  transition: opacity .2s, color .2s;
}
.composer-ai-editor-btn:hover{
  opacity: 1;
  color: var(--accent, #fa9467);
}
.composer-ai-editor-btn.is-active{
  opacity: 1;
  color: var(--accent, #fa9467);
}

.ai-editor-panel{
  background: var(--panel, #fff);
  border-top: 1px solid var(--border, rgba(0,0,0,.08));
  overflow: hidden;
  animation: ai-editor-slide-up .25s cubic-bezier(.4,0,.2,1) both;
  box-shadow: 0 -4px 20px rgba(0,0,0,.06);
  height: var(--ai-editor-height, 280px);
  min-height: 140px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
.ai-editor-content{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.ai-editor-panel.is-hidden{
  display: none !important;
}
.ai-editor-panel.is-closing{
  animation: ai-editor-slide-down .2s cubic-bezier(.4,0,.2,1) both;
}
@keyframes ai-editor-slide-up{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes ai-editor-slide-down{
  from{ opacity: 1; transform: translateY(0); }
  to{ opacity: 0; transform: translateY(16px); }
}
.ai-editor-resize{
  flex-shrink: 0;
  height: 14px;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  touch-action: none;
}
.ai-editor-resize::after{
  content: "";
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent, #fa9467);
  opacity: 0.45;
  transition: opacity .15s ease, width .15s ease;
}
.ai-editor-resize:hover::after,
.ai-editor-resize.dragging::after{
  opacity: 0.9;
  width: 56px;
}
.ai-editor-resize.dragging{
  background: rgba(250,148,103,.06);
}

.ai-editor-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 4px;
}
.ai-editor-title{
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #fa9467);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-editor-close{
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--muted);
  padding: 4px;
  border-radius: 50%;
  transition: background .15s, color .15s;
  line-height: 1;
}
.ai-editor-close:hover{
  background: rgba(128,128,128,.1);
  color: var(--text);
}

.ai-editor-actions{
  display: flex;
  gap: 6px;
  padding: 4px 16px 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ai-editor-actions::-webkit-scrollbar{ display: none; }
.ai-editor-action{
  background: rgba(250,148,103,.08);
  border: 1px solid rgba(250,148,103,.2);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  white-space: nowrap;
}
.ai-editor-action:hover{
  background: rgba(250,148,103,.15);
  border-color: rgba(250,148,103,.35);
}
.ai-editor-action:active{
  transform: scale(0.95);
}

.ai-editor-prompt-row{
  display: flex;
  gap: 8px;
  padding: 2px 16px 8px;
  align-items: flex-end;
}
.ai-editor-prompt{
  flex: 1;
  min-height: 32px;
  max-height: 80px;
  padding: 8px 12px;
  border: 1px solid var(--border, rgba(0,0,0,.1));
  border-radius: 18px;
  font-size: 13px;
  background: var(--surface, rgba(128,128,128,.04));
  color: var(--text);
  resize: none;
  outline: none;
  transition: border-color .2s;
  font-family: inherit;
}
.ai-editor-prompt:focus{
  border-color: var(--accent, #fa9467);
}
.ai-editor-prompt::placeholder{
  color: var(--muted);
}
.ai-editor-send{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent, #fa9467);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, transform .1s;
}
.ai-editor-send:hover{ background: #e8834f; }
.ai-editor-send:active{ transform: scale(0.9); }
.ai-editor-send:disabled{
  opacity: .4;
  cursor: default;
}

.ai-editor-result{
  padding: 0 16px 12px;
}
.ai-editor-result-box{
  background: rgba(250,148,103,.05);
  border: 1px solid rgba(250,148,103,.15);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  max-height: 120px;
  overflow-y: auto;
  animation: content-fade-in .2s ease-out;
}
.ai-editor-result-actions{
  display: flex;
  gap: 8px;
  padding: 8px 0 0;
}
.ai-editor-result-btn{
  font-size: 12px;
  padding: 5px 14px;
  border-radius: 14px;
  border: 1px solid var(--border, rgba(0,0,0,.1));
  background: none;
  color: var(--text);
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.ai-editor-result-btn:hover{ background: rgba(128,128,128,.06); }
.ai-editor-result-btn:active{ transform: scale(0.95); }
.ai-editor-result-btn.is-primary{
  background: var(--accent, #fa9467);
  color: #fff;
  border-color: transparent;
}
.ai-editor-result-btn.is-primary:hover{ background: #e8834f; }

/* ── Schedule Message Button ── */
.composer-schedule-btn{
  color: var(--muted);
  opacity: .6;
  transition: opacity .2s, color .2s;
  padding: 6px;
}
.composer-schedule-btn:hover{
  opacity: 1;
  color: var(--accent, #fa9467);
}

/* ── Call History ── */
.call-history-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background .15s;
}
.call-history-item:hover{ background: rgba(128,128,128,.06); }
.call-history-item.is-missed .call-history-name{ color: var(--danger, #ef4444); }
.call-history-body{
  flex: 1;
  min-width: 0;
}
.call-history-name{
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.call-history-meta{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.call-history-dur{ opacity: .7; }
.call-history-tail{
  text-align: right;
  flex-shrink: 0;
}
.call-history-time{
  font-size: 11px;
  color: var(--muted);
}
.call-history-type{
  font-size: 16px;
  margin-top: 2px;
}

/* ── Sidebar Profile View ── */
.sidebar-profile-view{
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sidebar-profile-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.sidebar-profile-avatar{ width: 96px !important; height: 96px !important; font-size: 28px !important; }
.sidebar-profile-name{
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.sidebar-profile-username{
  font-size: 14px;
  color: var(--muted);
}
.sidebar-profile-bio{
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  max-width: 260px;
  line-height: 1.5;
}
.sidebar-profile-edit-btn{
  margin-top: 12px;
  padding: 10px 32px;
  border-radius: 20px;
  border: 0;
  background: var(--accent);
  color: white;
  font-size: 14px;
  font-weight: 660;
  cursor: pointer;
  transition: opacity .15s ease, transform .12s ease;
}
.sidebar-profile-edit-btn:hover{ opacity: 0.88; }
.sidebar-profile-edit-btn:active{ transform: scale(0.97); }

/* ── 3-Panel Settings ── */
.settings-panel{
  display: none;
  min-height: 0;
  min-width: 0;
  background: var(--panel);
  flex: 1;
  overflow: hidden;
}
.settings-panel.is-open{
  display: flex;
  animation: settings-fade-in .2s ease both;
}
.settings-panel.is-closing{
  display: flex;
  animation: settings-fade-out .15s ease both;
}
.shell:has(.settings-panel.is-open) > .main{
  display: none;
}
@keyframes settings-fade-in{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
@keyframes settings-fade-out{
  from{ opacity: 1; }
  to{ opacity: 0; }
}
.settings-categories-col{
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--panel2);
}
.settings-categories-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.settings-categories-header h2{
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.settings-categories-list{
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
}
.settings-cat-item{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  cursor: pointer;
  transition: background .15s ease;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.settings-cat-item:hover{ background: var(--faint); }
.settings-cat-item.is-active{
  background: rgba(250,148,103,.12);
}
.settings-cat-icon{
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  flex-shrink: 0;
  background: rgba(255,255,255,.08);
}
.settings-cat-icon svg{
  width: 16px;
  height: 16px;
}
.settings-cat-text{ flex: 1; min-width: 0; }
.settings-cat-label{
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.settings-cat-desc{
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.settings-detail-col{
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--panel);
}
.settings-detail-body{
  padding: 20px 24px;
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
/* Settings rows — ensure no overflow */
.settings-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  min-height: 44px;
}
.settings-row-body{
  flex: 1;
  min-width: 0;
}
.settings-row-title{
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.settings-row-sub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
}
.settings-row-icon{
  font-size: 18px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.settings-section{
  margin-bottom: 24px;
}
.settings-section-label{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin-bottom: 8px;
}
.settings-section-surface{
  background: var(--surface, rgba(128,128,128,.03));
  border: 1px solid var(--border, rgba(0,0,0,.06));
  border-radius: 12px;
  padding: 4px 16px;
}
.settings-action-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: opacity .15s;
}
.settings-action-row:hover{ opacity: .7; }
.settings-divider{
  height: 1px;
  background: var(--border, rgba(0,0,0,.06));
  margin: 8px 0;
}
.settings-account-row{
  padding: 12px 0;
}
.settings-avatar{
  width: 48px !important;
  height: 48px !important;
  font-size: 18px !important;
}
.settings-edit-profile{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.settings-edit-field{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings-edit-label{
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.settings-edit-actions{
  display: flex;
  gap: 12px;
  padding-top: 8px;
}
.settings-select{
  padding: 6px 12px;
  border: 1px solid var(--border, rgba(0,0,0,.1));
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg, #fff);
  color: var(--text);
  cursor: pointer;
  min-width: 130px;
  flex-shrink: 0;
}
.settings-select:focus{
  outline: none;
  border-color: var(--accent, #fa9467);
}
.settings-session-current{
  background: rgba(250,148,103,.05);
  border-radius: 10px;
  padding: 10px 12px !important;
}
.settings-session-active{
  color: #22c55e !important;
  font-weight: 600;
}
.is-active-lang{
  background: rgba(250,148,103,.06);
  border-radius: 10px;
}
.settings-lang-check{
  color: var(--accent, #fa9467);
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}
/* Language picker with flags */
.lang-picker-search-wrap{
  padding: 8px 0 4px;
}
.lang-picker-search{
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border, rgba(0,0,0,.1));
  border-radius: 10px;
  background: var(--bg, #fff);
  font: inherit;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}
.lang-picker-search:focus{
  border-color: var(--accent, #fa9467);
}
.lang-picker-search::placeholder{
  color: var(--muted);
}
.lang-picker-list{
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 420px;
  overflow-y: auto;
}
.lang-picker-empty{
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.lang-picker-item{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  font: inherit;
  color: var(--text);
  text-align: left;
  width: 100%;
  transition: background .15s;
}
.lang-picker-item:hover{
  background: rgba(128,128,128,.06);
}
.lang-picker-item.is-active{
  background: rgba(250,148,103,.08);
}
.lang-picker-item.is-disabled{
  opacity: .4;
  cursor: default;
}
.lang-picker-item.is-disabled:hover{
  background: none;
}
.lang-picker-flag{
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}
.lang-picker-text{
  flex: 1;
  min-width: 0;
}
.lang-picker-name{
  font-size: 14px;
  font-weight: 500;
}
.lang-picker-sub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
}
.lang-picker-check{
  color: var(--accent, #fa9467);
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}
.sidebar-profile-menu{
  width: 100%;
  margin-top: 24px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.sidebar-profile-menu-item{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 12px;
  transition: background .15s ease;
}
.sidebar-profile-menu-item:hover{ background: var(--faint); }
.sidebar-profile-menu-icon{
  font-size: 22px;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}
.sidebar-profile-menu-text{ flex: 1; min-width: 0; }
.sidebar-profile-menu-label{
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.sidebar-profile-menu-desc{
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
}
.sidebar-profile-menu-arrow{
  font-size: 20px;
  color: var(--muted);
  flex-shrink: 0;
}

/* ── Sidebar Profile Settings Menu ── */
.sidebar-profile-settings{
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-profile-settings-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background .15s ease;
  color: var(--text);
  font: inherit;
}
.sidebar-profile-settings-item:hover{ background: var(--faint); }
.sidebar-profile-settings-item:active{ opacity: .8; }
.sidebar-profile-settings-icon{
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-profile-settings-icon svg{
  width: 14px;
  height: 14px;
}
.sidebar-profile-settings-label{
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  min-width: 0;
}
.sidebar-profile-settings-arrow{
  font-size: 18px;
  color: var(--muted);
  flex-shrink: 0;
  opacity: .5;
}
.sidebar-profile-settings-item.is-danger .sidebar-profile-settings-label{
  color: var(--danger);
}

/* ── Enhanced Search ── */
.search-frequent-row{
  display: flex;
  gap: 14px;
  padding: 10px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.search-frequent-row::-webkit-scrollbar{ display: none; }
.search-frequent-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 60px;
  max-width: 68px;
  cursor: pointer;
  transition: opacity .15s;
}
.search-frequent-item:hover{ opacity: .8; }
.search-frequent-item .avatar{ width: 48px; height: 48px; }
.search-frequent-name{
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.search-recent-remove{
  opacity: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  color: var(--muted);
  font-size: 16px;
  transition: opacity .15s;
}
.chat-item:hover .search-recent-remove{ opacity: .6; }
.search-recent-remove:hover{ opacity: 1 !important; }
.search-section-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 4px;
}
.search-section-title{
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.search-section-clear{
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 2px 6px;
}
.search-section-clear:hover{ color: var(--accent); }

.avatar{
  width:42px; height:42px;
  border-radius: 999px;
  display:grid; place-items:center;
  font-weight: 800;
  background: var(--avatar-fallback-bg, linear-gradient(135deg, rgba(124,58,237,.30), rgba(34,197,94,.20)));
  border:0;
  color: var(--avatar-fallback-color, rgba(232,234,241,.95));
  flex:none;
  overflow: hidden;
  position: relative;
}
.avatar-initials{
  position: relative;
  z-index: 1;
  font-weight: 800;
  transform-origin: 50% 58%;
  will-change: transform, opacity, filter;
}
.avatar-initials.is-live-updating{
  animation: profile-avatar-initials-swap .42s cubic-bezier(.22,.9,.22,1);
}
html[data-theme="light"] .avatar{ color: var(--avatar-fallback-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-preview b, .chat-preview strong{ font-weight: 700; color: var(--text); }
.chat-preview i, .chat-preview em{ font-style: italic; }
.chat-preview u{ text-decoration: underline; }
.chat-preview s{ text-decoration: line-through; }
.chat-preview code{
  font-family: var(--mono, monospace);
  font-size: 11px;
  background: rgba(255,255,255,.06);
  padding: 0 3px;
  border-radius: 3px;
}
.chat-preview a{ color: rgba(167,139,250,.85); text-decoration: none; }
html[data-theme="light"] .chat-preview a{ color: rgba(109,40,217,.75); }
html[data-theme="light"] .chat-preview code{ background: rgba(15,23,42,.05); }
.chat-preview .msg-mention{ color: rgba(167,139,250,.85); font-weight: 600; }
html[data-theme="light"] .chat-preview .msg-mention{ color: rgba(109,40,217,.75); }
.chat-preview .fmt-spoiler{ background: var(--muted); color: transparent; border-radius: 3px; padding: 0 3px; pointer-events: none; }
.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;
  gap: 3px;
}
.chat-time-checks{
  padding: 0;
  gap: 1px;
  transform: scale(.82);
}
.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,.08), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.98));
  border-left-color: rgba(148,163,184,.18);
  box-shadow: -6px 0 16px rgba(15,23,42,.06);
}
.profile-panel.is-self-view{
  --profile-panel-self-offset: 100%;
  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: translate3d(var(--profile-panel-self-offset), 0, 0);
}
/* When opened from settings: keep sidebar visible */
.profile-panel.is-self-view.is-inline{
  left: 360px;
  width: calc(100vw - 360px);
}
.profile-panel.is-self-view.is-open{
  --profile-panel-self-offset: 0px;
  transition: transform .32s cubic-bezier(.2,.86,.2,1);
}
.profile-panel.is-self-view.is-closing{
  --profile-panel-self-offset: 100%;
  transition: transform .32s cubic-bezier(.2,.86,.2,1);
}
.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;
  position: relative;
}

/* subview slide transitions */
@keyframes subviewSlideInRight{
  from{ transform: translateX(100%); }
  to  { transform: translateX(0);    }
}
@keyframes subviewSlideInLeft{
  from{ transform: translateX(-100%); }
  to  { transform: translateX(0);     }
}
@keyframes subviewSlideOutLeft{
  from{ transform: translateX(0);     }
  to  { transform: translateX(-100%); }
}
@keyframes subviewSlideOutRight{
  from{ transform: translateX(0);     }
  to  { transform: translateX(100%);  }
}
.subview-slide-in-right{
  animation: subviewSlideInRight .3s cubic-bezier(.4,0,.2,1) both;
}
.subview-slide-in-left{
  animation: subviewSlideInLeft .3s cubic-bezier(.4,0,.2,1) both;
}
.subview-slide-out-left{
  animation: subviewSlideOutLeft .3s cubic-bezier(.4,0,.2,1) both;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}
.subview-slide-out-right{
  animation: subviewSlideOutRight .3s cubic-bezier(.4,0,.2,1) both;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}
.profile-panel-body:has(.subview-slide-out-left, .subview-slide-out-right){
  overflow: hidden;
}
.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;
}
button.profile-self-avatar-btn{
  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-self-avatar-btn.is-uploading .profile-self-avatar{
  opacity: .6;
  transition: opacity .25s;
}
.profile-self-avatar-btn.is-uploading .profile-self-avatar-glow{
  opacity: .2;
  transition: opacity .25s;
}
.avatar-upload-progress{
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: 999px;
  pointer-events: none;
  background: conic-gradient(
    from -90deg,
    color-mix(in srgb, var(--accent, #fa9467) 55%, transparent) 0deg,
    color-mix(in srgb, var(--accent, #fa9467) 55%, transparent) var(--sweep, 0deg),
    rgba(0,0,0,.45) var(--sweep, 0deg)
  );
  opacity: 0;
  animation: avatar-upload-sweep 2.4s cubic-bezier(.4,.0,.2,1) forwards;
}
.avatar-upload-progress.is-done{
  animation: avatar-upload-done .4s ease forwards;
}
@keyframes avatar-upload-sweep{
  0%   { opacity: 1; --sweep: 0deg; }
  80%  { --sweep: 320deg; }
  100% { --sweep: 355deg; opacity: 1; }
}
@keyframes avatar-upload-done{
  0%   { opacity: 1; --sweep: 360deg; }
  40%  { opacity: .9; --sweep: 360deg; }
  100% { opacity: 0; --sweep: 360deg; }
}
@property --sweep{
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.profile-self-avatar-divider{
  width: 36px;
  height: 1px;
  background: var(--border);
  margin: 6px auto 2px;
  opacity: .5;
}
.profile-self-avatar-plus-btn{
  border: 0;
  background: none;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  border-radius: 999px;
  transition: background .15s;
}
.profile-self-avatar-plus-btn:hover{
  background: rgba(148,163,184,.12);
}
.profile-self-avatar-plus-icon{
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
  opacity: .55;
}
.profile-self-avatar-plus-sign{
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1;
}
.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-avatar-btn.is-preview-updating .profile-self-avatar,
.profile-self-avatar-btn.is-preview-updating .profile-self-avatar-glow{
  animation: profile-avatar-preview-pop .48s cubic-bezier(.22,1,.36,1);
}
.profile-self-avatar-btn.is-preview-updating .profile-self-avatar-aura::before{
  animation: profile-avatar-aura-pulse .56s cubic-bezier(.22,1,.36,1);
}
.profile-self-avatar-btn.is-preview-updating .profile-self-avatar-camera img{
  animation: profile-avatar-camera-nudge .48s cubic-bezier(.22,1,.36,1);
}
@keyframes profile-avatar-initials-swap{
  0%{
    opacity: .22;
    transform: translateY(10px) scale(.72) rotate(-8deg);
    filter: blur(5px);
  }
  54%{
    opacity: 1;
    transform: translateY(-3px) scale(1.09) rotate(2deg);
    filter: blur(0);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0);
  }
}
@keyframes profile-avatar-preview-pop{
  0%{
    transform: scale(1);
  }
  42%{
    transform: scale(1.055);
  }
  100%{
    transform: scale(1);
  }
}
@keyframes profile-avatar-aura-pulse{
  0%{
    opacity: .82;
    transform: scale(.96);
  }
  52%{
    opacity: 1;
    transform: scale(1.08);
  }
  100%{
    opacity: .82;
    transform: scale(1);
  }
}
@keyframes profile-avatar-camera-nudge{
  0%{
    transform: scale(1);
  }
  45%{
    transform: translateY(-1px) scale(1.08);
  }
  100%{
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce){
  .avatar-initials.is-live-updating,
  .profile-self-avatar-btn.is-preview-updating .profile-self-avatar,
  .profile-self-avatar-btn.is-preview-updating .profile-self-avatar-glow,
  .profile-self-avatar-btn.is-preview-updating .profile-self-avatar-aura::before,
  .profile-self-avatar-btn.is-preview-updating .profile-self-avatar-camera img{
    animation: none !important;
  }
}
.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 logout button */
.profile-self-logout-block{
  margin-top: 8px;
  align-items: stretch;
}
.profile-logout-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  border-radius: 18px;
}
.profile-logout-icon{
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
  opacity: .92;
}

.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-avatar-plus-icon{
  filter: none;
  opacity: .45;
}
html[data-theme="light"] .profile-self-avatar-plus-btn:hover{
  background: rgba(148,163,184,.1);
}
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-btn.is-static{
  cursor: default;
}
.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-self-row-btn.is-static .profile-self-row-value{
  color: rgba(255,255,255,.82);
}
.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: 100%;
  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: translate3d(var(--profile-panel-user-offset), 0, 0);
}
.profile-panel.is-user-view.is-open{
  --profile-panel-user-offset: 0px;
  transition: transform .32s cubic-bezier(.2,.86,.2,1);
}
.profile-panel.is-user-view.is-closing{
  --profile-panel-user-offset: 100%;
  transition: transform .32s cubic-bezier(.2,.86,.2,1);
}
.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{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: auto;
  height: 42px;
  min-width: 96px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.1);
  background:
    linear-gradient(180deg, rgba(24,30,46,.56), rgba(12,16,27,.34)),
    radial-gradient(130% 120% at 12% 0%, rgba(139,92,246,.12), transparent 54%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 14px 28px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(139,92,246,.06);
  backdrop-filter: blur(20px) saturate(1.16);
  -webkit-backdrop-filter: blur(20px) saturate(1.16);
  transition: background .16s ease, border-color .16s ease, opacity .16s ease, box-shadow .16s ease, transform .16s ease;
}
.profile-panel.is-user-view #profilePanelBack::before,
.profile-panel.is-user-view #profilePanelClose::before{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 42%, rgba(255,255,255,0) 100%),
    radial-gradient(120% 120% at 18% 0%, rgba(255,255,255,.06), transparent 54%);
  opacity: .72;
  pointer-events: none;
}
.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:
    linear-gradient(180deg, rgba(27,34,52,.62), rgba(14,18,31,.4)),
    radial-gradient(130% 120% at 12% 0%, rgba(139,92,246,.16), transparent 56%);
  border-color: rgba(255,255,255,.14);
  box-shadow:
    0 18px 32px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(139,92,246,.08);
}
.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);
  position: relative;
  z-index: 1;
  font-size: 14px;
  line-height: 1;
  font-weight: 650;
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 6px rgba(0,0,0,.18);
}
.profile-panel.is-user-view #profilePanelBack img{
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}
.profile-panel.is-user-view #profilePanelBack{
  border-color: rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(21,27,41,.62), rgba(12,16,27,.38)),
    radial-gradient(135% 120% at 10% 0%, rgba(139,92,246,.14), transparent 58%);
  box-shadow:
    0 16px 30px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(139,92,246,.08);
}
.profile-panel.is-user-view #profilePanelBack::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.025) 38%, rgba(255,255,255,0) 100%),
    radial-gradient(120% 120% at 18% 0%, rgba(255,255,255,.07), transparent 52%);
  opacity: .64;
}
.profile-panel.is-user-view #profilePanelClose img{
  display:none;
}
.profile-panel.is-user-view #profilePanelClose:disabled{
  opacity: .52;
  cursor: default;
}
html[data-theme="light"] .profile-panel.is-user-view #profilePanelBack,
html[data-theme="light"] .profile-panel.is-user-view #profilePanelClose{
  border-color: rgba(15,23,42,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(244,247,255,.3)),
    radial-gradient(130% 120% at 12% 0%, rgba(124,58,237,.08), transparent 58%);
  box-shadow:
    0 12px 26px rgba(148,163,184,.18),
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -1px 0 rgba(124,58,237,.05);
}
html[data-theme="light"] .profile-panel.is-user-view #profilePanelBack::before,
html[data-theme="light"] .profile-panel.is-user-view #profilePanelClose::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.06) 40%, rgba(255,255,255,0) 100%),
    radial-gradient(120% 120% at 18% 0%, rgba(255,255,255,.24), transparent 54%);
  opacity: .6;
}
html[data-theme="light"] .profile-panel.is-user-view #profilePanelBack:hover,
html[data-theme="light"] .profile-panel.is-user-view #profilePanelClose.is-visible:hover{
  border-color: rgba(15,23,42,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(242,246,255,.36)),
    radial-gradient(130% 120% at 12% 0%, rgba(124,58,237,.1), transparent 58%);
}
.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;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x pinch-zoom;
}
.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: visible;
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: contain;
  transition: height .42s cubic-bezier(.2,.86,.2,1);
}
.profile-assets-content.is-animating{
  overflow: hidden;
}
.profile-assets-content.is-dragging{
  overflow: hidden;
  transition: none;
}
.profile-assets-content.is-no-motion{
  transition: none;
}
.profile-assets-track{
  --profile-assets-active-index: 0;
  --profile-assets-drag-offset: 0px;
  display:flex;
  align-items:flex-start;
  width: 100%;
  transform: translate3d(calc((var(--profile-assets-active-index) * -100%) + var(--profile-assets-drag-offset)), 0, 0);
  transition: transform .46s cubic-bezier(.2,.86,.2,1);
  will-change: transform;
}
.profile-assets-track.is-no-motion,
.profile-assets-track.is-dragging{
  transition: none;
}
.profile-assets-pane{
  flex: 0 0 100%;
  min-width: 100%;
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}
.profile-assets-pane.is-active{
  pointer-events: auto;
}
.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-duration{
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(4,9,21,.72);
  color: rgba(255,255,255,.96);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
  box-shadow: 0 10px 18px rgba(2,6,23,.24);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  pointer-events: none;
}
.profile-media-card-duration-glyph{
  font-size: 10px;
  line-height: 1;
  opacity: .92;
}
.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-card-duration{
  background: rgba(15,23,42,.7);
}
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: 0;
  flex-shrink: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 80px) 24px 20px;
  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:active{
  transform: scale(.992);
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 34px rgba(0,0,0,.24);
}
@media (hover: hover) and (pointer: fine){
  .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: 8px 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-contact-editor-row-btn{
  width: 100%;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.95);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px;
  font-size: 17px;
  font-weight: 620;
  cursor: pointer;
  transition: background .18s ease;
}
.profile-contact-editor-row-btn:active{
  background: rgba(255,255,255,.06);
}
.profile-contact-editor-row-btn.is-danger{
  color: #ff655e;
}
.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(--text);
  letter-spacing: .08em;
}
.profile-user-group{
  display:flex;
  flex-direction:column;
}
.profile-user-group-item{
  width:100%;
}
.profile-user-group-item + .profile-user-group-item{
  border-top: 1px solid rgba(255,255,255,.08);
}
.profile-user-group > .profile-user-group-item > .profile-user-line{
  border-top: 0;
  padding: 12px 0;
}
.profile-user-group > .profile-user-group-item:first-child > .profile-user-line{
  padding-top: 4px;
}
.profile-user-group > .profile-user-group-item > .profile-user-line-button{
  padding-top: 14px;
}
.profile-user-group > .profile-user-group-item:first-child > .profile-user-line-button{
  padding-top: 4px;
}
.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-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(--text);
}
.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(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 14px 0 12px;
  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-action-sheet-btn.is-danger .profile-action-sheet-btn-title{
  color: var(--danger, #ef4444);
}
.profile-action-sheet-btn.is-selected{
  border: 2px solid var(--accent, #fa9467);
  background: rgba(250,148,103,.08);
}
.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);
}

/* ── Streak & Score (Social) ─── */
.streak-badge{
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent, #fa9467);
  white-space: nowrap;
  line-height: 20px;
  margin-top: 2px;
}

/* Profile score card */
.profile-score-card{
  margin: 10px 0 4px;
  min-height: 20px;
}
.score-card-main{
  display: flex;
  align-items: center;
  gap: 6px;
}
.score-card-number{
  font-size: 20px;
  font-weight: 800;
  color: var(--accent, #fa9467);
  display: flex;
  align-items: center;
  gap: 4px;
}
.score-card-icon{
  font-size: 18px;
}
.score-card-label{
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
}
.score-card-stats{
  display: flex;
  gap: 16px;
  margin-top: 6px;
}
.score-card-stat{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.score-stat-val{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.score-stat-label{
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* Sidebar profile score */
.sidebar-profile-score{
  font-size: 14px;
  font-weight: 700;
  color: var(--accent, #fa9467);
  margin-top: 4px;
}
.sidebar-score-streaks{
  font-weight: 600;
  opacity: .8;
}

/* Main */
.main{
  --chat-header-height: 74px;
  --chat-composer-height: 76px;
  --chat-bottom-offset: var(--keyboard-inset, 0px);
  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;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 6px 10px;
  margin: -6px -10px;
}
.chat-title.is-actionable{
  cursor: pointer;
}
.chat-title-main{
  display: block;
  font-weight: 820;
  letter-spacing:.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.chat-title-main.is-actionable{
  cursor: pointer;
}
.chat-title-sub{
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top:2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.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) + var(--chat-bottom-offset) + 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;
  transition: bottom .24s cubic-bezier(.2,.82,.24,1);
}
.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: calc(var(--chat-composer-height) + var(--chat-bottom-offset));
  padding: calc(var(--chat-header-height) + 14px) 0 16px;
  transition: padding-top .24s ease, margin-bottom .24s cubic-bezier(.2,.82,.24,1);
  display:flex;
  flex-direction:column;
  gap: 0;
  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(250,148,103,.28);
  background: linear-gradient(135deg, rgba(250,148,103,.18), rgba(250,148,103,.08));
}
.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), margin-top .24s cubic-bezier(.2,.8,.25,1);
}
.messages > .msg-row{
  margin-top: var(--msg-row-spacing, 10px);
}
.messages > .msg-row:first-child{
  margin-top: 0;
}
.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;
}
.msg-text-inline-meta .msg-meta-inline{
  margin-top: 0;
  margin-inline-start: 8px;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 6px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  vertical-align: baseline;
}
.msg-text-inline-meta .msg-meta-inline .msg-meta-time{
  display: inline-flex;
  align-items: baseline;
  font-size: inherit;
  line-height: inherit;
}
.msg-text-inline-meta .msg-meta-inline .checks{
  padding: 0 0 0 2px;
  gap: 1px;
  transform: translateY(-1px);
}
.msg-ttl-badge{
  display:inline-flex;
  align-items:center;
  font-size:10px;
  opacity:.75;
  cursor:default;
  user-select:none;
  -webkit-user-select:none;
}
.chat-ttl-indicator{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  padding:2px 8px;
  border-radius:12px;
  margin-inline-start:8px;
  user-select:none;
  -webkit-user-select:none;
  cursor:pointer;
}
.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);
}
html[data-theme="light"] .msg-round-video-wrap{
  border: none;
  background: transparent;
  box-shadow: none;
}
html[data-theme="light"] .msg-round-video-wrap::before{
  border: none;
}
html[data-theme="light"] .msg-bubble.msg-bubble-round-video{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.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 var(--border);
  border-radius: 25px;
  background: var(--audio-in-bg);
  box-shadow: none;
  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: none;
}
.msg-audio-card > *{
  position: relative;
  z-index: 1;
}
.msg-row.me .msg-audio-card{
  background: var(--audio-out-bg);
  border-color: var(--bubble-out-border);
}
.msg-row.me .msg-audio-card::before{
  content: none;
}
.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: var(--border);
  box-shadow: none;
}
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);
}

/* ── Voice transcription / summary panels ────────────────── */
.voice-ai-actions{
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  padding: 6px 10px 2px;
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 2px;
}
.voice-transcribe-btn,
.voice-summary-btn{
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(233,241,255,.88);
  cursor: pointer;
  transition: background .15s, opacity .15s;
  font-family: inherit;
  line-height: 1.3;
}
.voice-transcribe-btn:hover,
.voice-summary-btn:hover{
  background: rgba(255,255,255,.18);
}
.voice-transcribe-btn:disabled,
.voice-summary-btn:disabled{
  opacity: .55;
  cursor: default;
}
.voice-transcript-panel,
.voice-summary-panel{
  max-width: min(470px, 78vw);
  margin-top: 6px;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: rgba(233,241,255,.94);
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
}
.voice-summary-panel{
  background: rgba(150,200,255,.07);
  border-color: rgba(150,200,255,.16);
  font-style: italic;
}
html[data-theme="light"] .voice-ai-actions{
  border-top-color: rgba(15,23,42,.1);
}
html[data-theme="light"] .voice-transcribe-btn,
html[data-theme="light"] .voice-summary-btn{
  border-color: rgba(15,23,42,.18);
  background: rgba(15,23,42,.05);
  color: rgba(15,23,42,.78);
}
html[data-theme="light"] .voice-transcribe-btn:hover,
html[data-theme="light"] .voice-summary-btn:hover{
  background: rgba(15,23,42,.12);
}
html[data-theme="light"] .voice-transcript-panel,
html[data-theme="light"] .voice-summary-panel{
  color: rgba(15,23,42,.88);
  border-color: rgba(15,23,42,.12);
  background: rgba(15,23,42,.03);
}
html[data-theme="light"] .voice-summary-panel{
  background: rgba(100,150,200,.07);
  border-color: rgba(100,150,200,.18);
}

.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: var(--chat-bottom-offset);
  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);
  transition: bottom .24s cubic-bezier(.2,.82,.24,1), background .18s ease, border-color .18s ease;
}
.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, bottom .24s cubic-bezier(.2,.82,.24,1);
}
.jump-latest-btn{
  bottom: calc(var(--chat-composer-height) + var(--chat-bottom-offset) + 16px);
}
.jump-round-btn{
  bottom: calc(var(--chat-composer-height) + var(--chat-bottom-offset) + 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;
  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;
  max-height: 160px;
  overflow-y: auto;
  padding: 10px 14px;
  font-family: var(--font);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: normal;
  border-radius: 18px;
  border: 0;
  background: rgba(255,255,255,.07);
  color: var(--text);
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  -webkit-user-modify: read-write-plaintext-only;
  -webkit-user-modify: read-write;
}
.composer #messageInput:empty::before,
.composer #messageInput.is-empty::before{
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}
.composer #messageInput[contenteditable="false"]{
  opacity: .5;
  cursor: not-allowed;
}
html[data-theme="light"] .composer #messageInput{
  background: rgba(15,23,42,.06);
}
/* Formatting inside composer */
.composer #messageInput b, .composer #messageInput strong{ font-weight: 700; }
.composer #messageInput i, .composer #messageInput em{ font-style: italic; }
.composer #messageInput u{ text-decoration: underline; }
.composer #messageInput s, .composer #messageInput strike{ text-decoration: line-through; }
.composer #messageInput code{
  font-family: var(--mono, monospace);
  font-size: 13px;
  background: rgba(255,255,255,.08);
  padding: 1px 5px;
  border-radius: 4px;
}
html[data-theme="light"] .composer #messageInput code{
  background: rgba(15,23,42,.06);
}
.composer #messageInput .fmt-spoiler-edit{
  background: rgba(255,255,255,.12);
  border-radius: 4px;
  padding: 0 2px;
  color: rgba(255,255,255,.4);
}
html[data-theme="light"] .composer #messageInput .fmt-spoiler-edit{
  background: rgba(15,23,42,.1);
  color: rgba(15,23,42,.35);
}
.composer #messageInput .fmt-quote-edit{
  border-left: 3px solid rgba(167,139,250,.6);
  padding-left: 8px;
  color: var(--muted);
}
html[data-theme="light"] .composer #messageInput .fmt-quote-edit{
  border-left-color: rgba(109,40,217,.4);
}
#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;
  touch-action: none;
}
#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: 0;
  right: 0;
  bottom: 100%;
  padding: 10px 14px;
  border-radius: 0;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(24px) saturate(1.22);
  -webkit-backdrop-filter: blur(24px) saturate(1.22);
  border: 0;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid rgba(255,255,255,.04);
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  animation: reply-chip-in .18s cubic-bezier(.2,.82,.24,1) both;
}
html[data-theme="light"] .reply-chip{
  background: rgba(15,23,42,.06);
  border-top-color: rgba(15,23,42,.08);
  border-bottom-color: rgba(15,23,42,.04);
}
@keyframes reply-chip-in{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}
.reply-chip span{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.36;
}
.reply-chip .reply-chip-sender{
  font-weight: 700;
  color: rgba(167,139,250,.95);
  margin-right: 4px;
}
html[data-theme="light"] .reply-chip .reply-chip-sender{
  color: rgba(109,40,217,.88);
}
.reply-chip b, .reply-chip strong{ font-weight: 700; }
.reply-chip i, .reply-chip em{ font-style: italic; }
.reply-chip u{ text-decoration: underline; }
.reply-chip s{ text-decoration: line-through; }
.reply-chip code{ font-family: var(--mono, monospace); font-size: 12px; }
.reply-chip .fmt-spoiler{ background: var(--muted); color: transparent; border-radius: 3px; padding: 0 2px; pointer-events: none; }
.reply-chip button{
  border:0; background: rgba(255,255,255,.08); color: var(--muted);
  cursor:pointer;
  font-weight: 700;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background .14s ease;
  flex-shrink: 0;
}
.reply-chip button:hover{
  background: rgba(255,255,255,.14);
}
html[data-theme="light"] .reply-chip button{
  background: rgba(15,23,42,.06);
}
html[data-theme="light"] .reply-chip button:hover{
  background: rgba(15,23,42,.1);
}

/* ── Composer link preview ── */
.composer-link-preview{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(255,255,255,.07);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid rgba(255,255,255,.04);
  animation: reply-chip-in .18s cubic-bezier(.2,.82,.24,1) both;
  min-height: 0;
}
.composer-link-preview.is-hidden{ display: none; }
.composer-link-preview-thumb{
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255,255,255,.06);
}
.composer-link-preview-body{
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.composer-link-preview-site{
  font-size: 11px;
  font-weight: 680;
  color: rgba(167,139,250,.9);
  text-transform: uppercase;
  letter-spacing: .03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme="light"] .composer-link-preview-site{
  color: rgba(109,40,217,.8);
}
.composer-link-preview-title{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.composer-link-preview-close{
  border: 0;
  background: rgba(255,255,255,.08);
  color: var(--muted);
  cursor: pointer;
  font-weight: 700;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  transition: background .14s ease;
}
.composer-link-preview-close:hover{
  background: rgba(255,255,255,.14);
}
html[data-theme="light"] .composer-link-preview{
  background: rgba(15,23,42,.06);
  border-top-color: rgba(15,23,42,.08);
}

/* ── @mention links in messages ── */
.msg-mention{
  color: rgba(167,139,250,.95);
  font-weight: 600;
  cursor: pointer;
  transition: opacity .12s ease;
}
.msg-mention:hover{
  opacity: .78;
  text-decoration: underline;
}
html[data-theme="light"] .msg-mention{
  color: rgba(109,40,217,.88);
}

.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: 0;
  height: 100%;
  min-height: 0;
  background: #000;
}
.profile-media-viewer-stage{
  position: relative;
  min-height: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  background: #000;
  border: 0;
  box-shadow: none;
}
.profile-media-viewer-surface{
  position: relative;
  min-height: inherit;
  height: 100%;
  overflow: hidden;
  padding: 0;
}
.profile-media-viewer-surface.is-loading::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.22);
}
.profile-media-viewer-pane{
  position: absolute;
  inset: 0;
  padding: 0;
  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{
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  display:block;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}
.profile-media-viewer-image{
  object-fit: contain;
  border: 0;
  background: #000;
}
.profile-media-viewer-video-shell{
  position: relative;
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.profile-media-viewer-video{
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  border: 0;
  pointer-events: auto;
}
.profile-media-viewer-video-badge{
  display: none;
}
.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: 42px;
  height: 42px;
  display:grid;
  place-items:center;
  transform: translateY(-50%);
  transition: transform .18s ease, color .18s ease, opacity .18s ease;
}
.profile-media-viewer-nav:hover:not(:disabled){
  transform: translateY(-50%) scale(1.04);
  color: rgba(255,255,255,1);
}
.profile-media-viewer-nav:disabled,
.profile-media-viewer-hitzone:disabled{
  opacity: 0;
  pointer-events: none;
}
.profile-media-viewer-nav-icon{
  width: 30px;
  height: 30px;
  display: block;
}
.profile-media-viewer-close{
  position: absolute;
  top: max(env(safe-area-inset-top, 0px) + 10px, 10px);
  right: max(env(safe-area-inset-right, 0px) + 10px, 10px);
  z-index: 4;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.94);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color .18s ease, opacity .18s ease, transform .18s ease;
}
.profile-media-viewer-close:hover{
  color: rgba(255,255,255,1);
  transform: scale(1.04);
}
.profile-media-viewer-close:focus-visible{
  outline: none;
  color: rgba(255,255,255,1);
}
.profile-media-viewer-close-icon{
  width: 24px;
  height: 24px;
  display: block;
}
.profile-media-viewer-nav.is-prev{
  left: 14px;
}
.profile-media-viewer-nav.is-next{
  right: 14px;
}
.profile-media-viewer-actions{
  position: absolute;
  left: 50%;
  bottom: max(env(safe-area-inset-bottom, 0px) + 16px, 16px);
  z-index: 4;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: translateX(-50%);
}
.profile-media-viewer-link{
  border: 0;
  background: transparent;
  padding: 0;
  color: rgba(255,255,255,.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 720;
  letter-spacing: .01em;
  cursor: pointer;
  transition: color .16s ease, opacity .16s ease;
}
.profile-media-viewer-link:hover{
  color: rgba(255,255,255,1);
}
.profile-media-viewer-link:focus-visible{
  outline: none;
  color: rgba(255,255,255,1);
}
.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: #000;
}
html[data-theme="light"] .profile-media-viewer-nav{
  color: rgba(255,255,255,.94);
}
html[data-theme="light"] .profile-media-viewer-link{
  color: rgba(255,255,255,.88);
}
html[data-theme="light"] .profile-media-viewer-link:hover,
html[data-theme="light"] .profile-media-viewer-link:focus-visible{
  color: rgba(255,255,255,1);
}
html[data-theme="light"] .profile-media-viewer-close{
  color: rgba(255,255,255,.94);
}
html[data-theme="light"] .profile-media-viewer-loading,
html[data-theme="light"] .profile-media-viewer-error{
  color: rgba(255,255,255,.72);
}
html[data-theme="light"] .profile-media-viewer-loading-glyph{
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.84);
}
@media (max-width: 900px){
  .profile-media-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profile-media-viewer-stage{
    min-height: 100%;
  }
}
@media (max-width: 640px){
  .profile-media-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
    background: rgba(3,7,18,.98);
  }
  .profile-media-card-stage{
    aspect-ratio: 1;
    border-radius: 0;
    box-shadow: inset 0 0 0 .5px rgba(148,163,184,.22);
  }
  .profile-media-card-overlay{
    padding: 8px;
  }
  .profile-media-card-date{
    font-size: 10px;
  }
  .profile-media-card-duration{
    right: 8px;
    bottom: 8px;
    min-height: 22px;
    padding: 0 7px;
    gap: 4px;
    font-size: 10px;
  }
  .profile-media-card-action{
    min-height: 28px;
    padding: 0 8px;
    font-size: 10px;
    text-align: center;
  }
  .profile-media-card-placeholder,
  .profile-media-card-error{
    padding: 12px 8px;
  }
  .profile-media-card-placeholder{
    gap: 6px;
  }
  .profile-media-card-placeholder-glyph{
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 18px;
  }
  .profile-media-card-placeholder-text,
  .profile-media-card-error{
    font-size: 10px;
  }
  html[data-theme="light"] .profile-media-grid{
    background: rgba(226,232,240,.98);
  }
  html[data-theme="light"] .profile-media-card-stage{
    box-shadow: inset 0 0 0 .5px rgba(148,163,184,.34);
  }
  .profile-media-viewer-stage{
    min-height: 100%;
  }
  .profile-media-viewer-hitzone{
    width: 28%;
    min-width: 64px;
  }
  .profile-media-viewer-nav{
    width: 34px;
    height: 34px;
  }
  .profile-media-viewer-nav-icon{
    width: 24px;
    height: 24px;
  }
  .profile-media-viewer-close{
    width: 36px;
    height: 36px;
  }
  .profile-media-viewer-close-icon{
    width: 22px;
    height: 22px;
  }
  .profile-media-viewer-actions{
    bottom: max(env(safe-area-inset-bottom, 0px) + 14px, 14px);
  }
}
@media (prefers-reduced-motion: reduce){
  .profile-assets-track,
  .profile-assets-content{
    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: 14px;
}
.avatar-crop-frame{
  width: min(300px, 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 999px;
  border: none;
  background: rgba(0,0,0,.4);
  overflow: hidden;
  position: relative;
  cursor: grab;
  user-select: none;
  touch-action: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), inset 0 0 40px rgba(0,0,0,.25);
}
.avatar-crop-frame.is-dragging{ cursor: grabbing; }
.avatar-crop-frame::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.12);
  pointer-events:none;
}
.avatar-crop-image{
  position:absolute;
  left:50%;
  top:50%;
  transform-origin: center center;
  pointer-events:none;
}
.avatar-crop-hint{
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  opacity: .7;
}
.avatar-crop-zoom-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px;
  background: rgba(148,163,184,.06);
  border-radius: 12px;
}
.avatar-crop-zoom-label{
  font-size: 13px;
  color: var(--muted);
  flex-shrink: 0;
  opacity: .7;
}
.avatar-crop-zoom-row input[type="range"]{
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 6px;
  background: rgba(148,163,184,.15);
  outline: none;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  cursor: pointer;
}
.avatar-crop-zoom-row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--accent, #fa9467);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.35), 0 0 0 3px rgba(108,138,255,.18);
  margin-top: -6px;
  transition: box-shadow .15s, transform .15s;
}
.avatar-crop-zoom-row input[type="range"]::-webkit-slider-thumb:hover{
  transform: scale(1.12);
  box-shadow: 0 2px 10px rgba(0,0,0,.4), 0 0 0 5px rgba(108,138,255,.22);
}
.avatar-crop-zoom-row input[type="range"]::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--accent, #fa9467);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.35), 0 0 0 3px rgba(108,138,255,.18);
}
.avatar-crop-zoom-row input[type="range"]::-moz-range-thumb:hover{
  box-shadow: 0 2px 10px rgba(0,0,0,.4), 0 0 0 5px rgba(108,138,255,.22);
}
.avatar-crop-zoom-row input[type="range"]::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 6px;
}
.avatar-crop-zoom-row input[type="range"]::-moz-range-track{
  height: 6px;
  border-radius: 6px;
  background: rgba(148,163,184,.15);
}

/* Avatar crop modal context */
.modal.modal-context-avatar-crop .modal-header{
  border-bottom: none;
  padding-bottom: 4px;
}
.modal.modal-context-avatar-crop .modal-title{
  font-size: 16px;
  font-weight: 600;
  opacity: .8;
}
.modal.modal-context-avatar-crop .modal-card{
  max-width: 400px;
}
.avatar-cropper .row{
  gap: 10px;
  padding-top: 4px;
}

/* 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: 16px;
  width: min(540px, 100%);
}
/* ── Settings sections ── */
.settings-section{
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.settings-section-label{
  padding: 0 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  opacity: .7;
}
.settings-section-surface{
  background: rgba(255,255,255,.06);
  border-radius: 22px;
  overflow: hidden;
}
/* ── Settings rows ── */
.settings-row{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
}
.settings-row + .settings-row,
.settings-action-row + .settings-action-row,
.settings-row + .settings-action-row,
.settings-action-row + .settings-row{
  border-top: 1px solid rgba(255,255,255,.06);
}
.settings-row-icon{
  font-size: 20px;
  flex: none;
  width: 28px;
  text-align: center;
  line-height: 1;
}
.settings-row-body{
  flex: 1;
  min-width: 0;
}
.settings-row-title{
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
}
.settings-row-sub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.35;
}
.settings-fingerprint{
  font-family: var(--mono, monospace);
  font-size: 11px;
  letter-spacing: .03em;
  opacity: .8;
}
.settings-account-row{
  gap: 10px;
  flex-wrap: wrap;
}
.settings-account-row .btn{
  font-size: 12px;
  padding: 4px 10px;
  white-space: nowrap;
}
.settings-account-row .settings-avatar{
  width: 42px;
  height: 42px;
  font-size: 16px;
}
.settings-divider{
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 0 18px;
}
/* ── Settings action rows (clickable) ── */
.settings-action-row{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  width: 100%;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.settings-action-row:hover{
  background: rgba(255,255,255,.04);
}
.settings-action-row:active{
  background: rgba(255,255,255,.07);
}
/* ── Settings logout ── */
.settings-logout-section{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-logout-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  border-radius: 18px;
}
.settings-logout-icon{
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
  opacity: .92;
}
/* ── Inline sub-elements inside sections ── */
.settings-section-surface .bg-swatch-grid{
  padding: 4px 18px 10px;
}
.settings-section-surface .bg-custom{
  padding: 0 18px 14px;
}
.settings-section-surface .palette-chip-row{
  padding: 4px 18px 8px;
}
.settings-section-surface .palette-controls{
  padding: 0 18px 14px;
}
html[data-theme="light"] .settings-section-surface{
  background: rgba(15,23,42,.04);
}
html[data-theme="light"] .settings-divider{
  background: rgba(15,23,42,.06);
}
html[data-theme="light"] .settings-row + .settings-row,
html[data-theme="light"] .settings-action-row + .settings-action-row,
html[data-theme="light"] .settings-row + .settings-action-row,
html[data-theme="light"] .settings-action-row + .settings-row{
  border-top-color: rgba(15,23,42,.06);
}
html[data-theme="light"] .settings-action-row:hover{
  background: rgba(15,23,42,.04);
}
/* Legacy pick/pill compat */
.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-profile-media-viewer .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);
  max-width: 580px;
}
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-danger .modal-title,
.modal.modal-context-danger .profile-confirm-title{
  color: #fca5a5;
}
.modal.modal-context-danger .profile-confirm-text{
  color: rgba(254,226,226,.9);
}
.modal.modal-context-danger .danger-confirm-note{
  color: rgba(254,226,226,.72);
}
html[data-theme="light"] .modal.modal-context-danger .modal-title,
html[data-theme="light"] .modal.modal-context-danger .profile-confirm-title{
  color: var(--text);
}
html[data-theme="light"] .modal.modal-context-danger .profile-confirm-text{
  color: var(--muted);
}
html[data-theme="light"] .modal.modal-context-danger .danger-confirm-note{
  color: var(--text);
}
html[data-theme="light"] .modal.modal-context-danger .danger-confirm-note strong{
  color: var(--text);
}
.modal.modal-context-settings .modal-header,
.modal.modal-context-poll .modal-header,
.modal.modal-context-file-send .modal-header,
.modal.modal-context-profile-media-viewer .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"],
.modal.modal-context-settings .settings-section-surface{
  border: 0;
}
.modal.modal-context-settings .settings-section-surface{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.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-profile-media-viewer .modal-card{
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  background: #000;
  box-shadow: none;
  backdrop-filter: none;
}
.modal.modal-context-profile-media-viewer .modal-body{
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: #000;
}
.modal.modal-context-profile-media-viewer{
  padding: 0;
}
.modal.modal-context-profile-media-viewer .modal-backdrop{
  background: #000;
  backdrop-filter: none;
}
.modal.modal-context-profile-media-viewer .modal-header{
  display: none;
}
.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(86vh, 780px);
}
.modal.modal-context-chat-preview .modal-body{
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.chat-preview-mini{
  display:flex;
  flex-direction:column;
  gap: 0;
  min-height: min(60vh, 500px);
  flex: 1 1 auto;
  overflow: hidden;
}
.chat-preview-mini-shell{
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  flex: 1 1 auto;
  min-height: 0;
}
.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;
}

/* ── Preview summary footer & panel ─────────────────── */
.chat-preview-summary-footer{
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.chat-preview-summary-btn{
  font-size: 13px;
  padding: 8px 22px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(233,241,255,.9);
  cursor: pointer;
  transition: background .15s, transform .1s;
  font-family: inherit;
  font-weight: 560;
}
.chat-preview-summary-btn:hover{
  background: rgba(255,255,255,.14);
}
.chat-preview-summary-btn:active{
  transform: scale(.97);
}
.chat-preview-summary-btn:disabled{
  opacity: .55;
  cursor: default;
  transform: none;
}
@keyframes summaryFadeIn{
  from{ opacity:0; max-height:0; padding:0 18px; margin:0 12px; }
  to{ opacity:1; max-height:200px; padding:14px 18px; margin:0 12px; }
}
.chat-preview-summary-panel{
  flex-shrink: 0;
  padding: 14px 18px;
  margin: 0 12px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  color: rgba(233,241,255,.94);
  background: rgba(150,200,255,.07);
  border: 1px solid rgba(150,200,255,.14);
  max-height: 200px;
  overflow-y: auto;
  animation: summaryFadeIn .4s cubic-bezier(.4,0,.2,1) both;
}
html[data-theme="light"] .chat-preview-summary-footer{
  border-top-color: rgba(15,23,42,.08);
}
html[data-theme="light"] .chat-preview-summary-btn{
  border-color: rgba(15,23,42,.16);
  background: rgba(15,23,42,.04);
  color: rgba(15,23,42,.82);
}
html[data-theme="light"] .chat-preview-summary-btn:hover{
  background: rgba(15,23,42,.1);
}
html[data-theme="light"] .chat-preview-summary-panel{
  color: rgba(15,23,42,.88);
  background: rgba(100,150,200,.06);
  border-color: rgba(100,150,200,.16);
}

/* Call overlay */
.call{
  position:fixed;
  inset:0;
  z-index: 60;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(10px, 1.2vw, 18px);
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.15), transparent 28%),
    radial-gradient(circle at top right, rgba(248,113,113,.14), transparent 32%),
    rgba(5,10,18,.76);
  backdrop-filter: blur(16px);
}
.call-card{
  width: min(1680px, 100%);
  height: min(1100px, 100%);
  max-height: 100%;
  display:grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-radius: 24px;
  border: 0;
  background:
    linear-gradient(155deg, rgba(10,18,32,.95), rgba(16,22,38,.86));
  box-shadow: 0 28px 70px rgba(0,0,0,.36);
  overflow:hidden;
}
html[data-theme="light"] .call-card{
  background:
    linear-gradient(155deg, rgba(255,255,255,.98), rgba(241,245,249,.93));
}
.call-top{
  padding: 16px 18px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.call-peer{
  min-width: 0;
  flex: 1 1 auto;
}
.call-peer-name{
  font-weight: 840;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.call-status{
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.call-quality{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 2px;
  min-width: 82px;
}
.call-quality-item{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--muted);
  transition: color .18s ease, opacity .18s ease;
}
.call-quality-item.is-good{ color: #4ade80; }
.call-quality-item.is-fair{ color: #fbbf24; }
.call-quality-item.is-bad{ color: #f87171; }
.call-quality-item.is-unknown{ color: rgba(148,163,184,.86); }
.call-media{
  position:relative;
  background:
    radial-gradient(circle at 18% 18%, rgba(56,189,248,.18), transparent 28%),
    radial-gradient(circle at 85% 20%, rgba(248,113,113,.12), transparent 26%),
    linear-gradient(180deg, rgba(6,10,18,.96), rgba(9,15,27,.9));
  min-height: 0;
  overflow:hidden;
}
.call-media video{
  position:absolute;
  inset: 0;
  width:100%;
  height:100%;
  object-fit: cover;
  background: rgba(0,0,0,.18);
}
.call.is-screen-share #remoteVideo{
  object-fit: contain;
  background: #05070f;
}
.call-local-stage{
  position:absolute;
  right: clamp(14px, 1.5vw, 24px);
  bottom: clamp(14px, 1.5vw, 24px);
  width: clamp(220px, 18vw, 320px);
  height: clamp(132px, 11vw, 188px);
  border-radius: 18px;
  overflow:hidden;
  z-index: 2;
}
.call.is-screen-share .call-local-stage{
  width: clamp(200px, 16vw, 280px);
  height: clamp(120px, 9vw, 160px);
}
#localVideo{
  position:absolute;
  inset: 0;
  border: 0;
  border-radius: inherit;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.call-fallback{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  color: #f8fafc;
}
.call-fallback-remote{
  inset: 0;
  flex-direction:column;
  gap: 18px;
  background:
    radial-gradient(circle at 50% 35%, rgba(56,189,248,.12), transparent 28%),
    radial-gradient(circle at 50% 75%, rgba(248,113,113,.08), transparent 34%);
}
.call-fallback-local{
  inset: 0;
  flex-direction:column;
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(15,23,42,.84), rgba(15,23,42,.58));
  backdrop-filter: blur(12px) saturate(1.05);
}
.call-fallback-avatar-slot{
  display:grid;
  place-items:center;
}
.call-avatar-shell{
  --call-voice-scale: 1;
  position:relative;
  width: 168px;
  height: 168px;
  border-radius: 999px;
  overflow:hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 38%),
    linear-gradient(145deg, rgba(56,189,248,.42), rgba(37,99,235,.2));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 18px 48px rgba(15,23,42,.34);
  transform: scale(var(--call-voice-scale));
  transition: transform .14s ease, box-shadow .18s ease, filter .18s ease;
}
.call-avatar-shell.is-speaking{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 24px 56px rgba(34,197,94,.24);
  filter: saturate(1.08);
}
.call-fallback-local .call-avatar-shell{
  width: 78px;
  height: 78px;
}
.call-avatar-shell img{
  position:absolute;
  inset: 0;
  width:100%;
  height:100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .2s ease;
}
.call-avatar-shell.has-image img{
  opacity: 1;
}
.call-avatar-initials{
  position:absolute;
  inset: 0;
  display:grid;
  place-items:center;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: .04em;
  color: rgba(248,250,252,.96);
}
.call-fallback-local .call-avatar-initials{
  font-size: 24px;
}
.call-fallback-name{
  font-size: 24px;
  font-weight: 760;
  letter-spacing: .01em;
}
.call-fallback-label{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(226,232,240,.75);
}
.call-actions{
  padding: 14px 18px 18px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap: wrap;
  border-top: 0;
}
.call-actions .btn{
  min-width: 140px;
  justify-content:center;
  border: 0;
  background: rgba(255,255,255,.05);
  color: rgba(226,232,240,.94);
}
.call-actions .btn:hover{
  background: rgba(255,255,255,.09);
}
.call-hangup-btn{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(180deg, rgba(239,68,68,.95), rgba(220,38,38,.88));
  box-shadow: 0 14px 36px rgba(185,28,28,.34);
}
.call-hangup-btn img{
  filter: brightness(0) invert(1);
}
.call-actions .btn.is-active{
  background: rgba(56,189,248,.18);
  color: #f8fafc;
}
html[data-theme="light"] .call-actions .btn.is-active{
  background: rgba(14,165,233,.12);
}
.incoming-call{
  position: fixed;
  inset: 0;
  z-index: 78;
  display:grid;
  place-items:center;
  padding: 18px;
  background: rgba(7,11,19,.44);
  backdrop-filter: blur(10px);
}
.incoming-call-card{
  width: min(360px, 100%);
  padding: 28px 24px 24px;
  border-radius: 30px;
  background:
    radial-gradient(circle at top, rgba(56,189,248,.16), transparent 36%),
    linear-gradient(180deg, rgba(12,18,30,.98), rgba(12,18,30,.92));
  box-shadow: 0 30px 80px rgba(0,0,0,.34);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
html[data-theme="light"] .incoming-call-card{
  background:
    radial-gradient(circle at top, rgba(56,189,248,.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(241,245,249,.96));
}
.incoming-call-avatar-slot{
  display:grid;
  place-items:center;
  margin-bottom: 18px;
}
.incoming-call-avatar-slot .call-avatar-shell{
  width: 112px;
  height: 112px;
}
.incoming-call-avatar-slot .call-avatar-initials{
  font-size: 30px;
}
.incoming-call-name{
  font-size: 26px;
  font-weight: 820;
  line-height: 1.12;
}
.incoming-call-subtitle{
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}
.incoming-call-actions{
  margin-top: 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 42px;
}
.call-circle-btn{
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: 0;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow: 0 16px 42px rgba(15,23,42,.22);
  transition: transform .12s ease, filter .18s ease, box-shadow .18s ease;
}
.call-circle-btn:hover{
  filter: brightness(1.04);
}
.call-circle-btn:active{
  transform: scale(.97);
}
.call-circle-btn img{
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}
.call-circle-btn.is-decline{
  background: linear-gradient(180deg, rgba(239,68,68,.95), rgba(220,38,38,.88));
}
.call-circle-btn.is-accept{
  background: linear-gradient(180deg, rgba(34,197,94,.96), rgba(22,163,74,.88));
}
.incoming-call-labels{
  width: 100%;
  margin-top: 10px;
  display:flex;
  justify-content:center;
  gap: 58px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(226,232,240,.72);
}
html[data-theme="light"] .incoming-call-labels{
  color: rgba(51,65,85,.66);
}

@media (max-width: 760px){
  .call{
    padding: 10px;
  }
  .call-card{
    width: 100%;
    height: 100%;
    border-radius: 18px;
  }
  .call-top{
    padding: 14px;
    align-items:flex-start;
    flex-wrap: wrap;
  }
  .call-quality{
    order: 3;
    width: 100%;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    gap: 10px;
  }
  .call-local-stage{
    width: 148px;
    height: 92px;
    border-radius: 14px;
    right: 10px;
    bottom: 10px;
  }
  .call-avatar-shell{
    width: 124px;
    height: 124px;
  }
  .call-fallback-name{
    font-size: 18px;
  }
  .call-fallback-local .call-avatar-shell{
    width: 62px;
    height: 62px;
  }
  .call-actions .btn{
    min-width: calc(50% - 5px);
  }
  #screenBtn{
    min-width: 100%;
  }
  .incoming-call-card{
    padding: 24px 18px 20px;
    border-radius: 24px;
  }
  .incoming-call-actions{
    gap: 32px;
  }
  .call-circle-btn{
    width: 66px;
    height: 66px;
  }
}

/* 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:focus-visible{
  outline: none;
  background: rgba(148,163,184,.24);
  box-shadow: 0 0 0 2px rgba(125,211,252,.22);
}
.msg-menu-btn:focus-visible .msg-menu-btn-icon{
  transform: translateY(-1px);
}
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;
}
html[data-theme="light"] .msg-menu-btn.danger{
  color: #dc2626;
}
.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: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);
}
.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.is-me{
  background: rgba(124,58,237,.24);
}
@media (hover: hover) and (pointer: fine){
  .msg-menu-btn:hover{
    background: rgba(148,163,184,.2);
  }
  .msg-menu-btn:hover .msg-menu-btn-icon{
    transform: translateY(-1px);
  }
  html[data-theme="light"] .msg-menu-btn:hover{
    background: rgba(148,163,184,.22);
  }
  .msg-menu-btn.danger:hover{
    background: rgba(239,68,68,.2);
    color: #fecaca;
  }
  html[data-theme="light"] .msg-menu-btn.danger:hover{
    background: rgba(239,68,68,.14);
    color: #b91c1c;
  }
  .msg-menu-emoji-toggle:hover{
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.14);
  }
  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:hover{
    --emoji-scale: 1.1;
  }
}
.msg-menu-btn.is-touch-hover{
  background: rgba(148,163,184,.24);
}
.msg-menu-emoji.is-touch-hover,
.msg-menu-emoji-toggle.is-touch-hover{
  background: rgba(255,255,255,.14);
}
html[data-theme="light"] .msg-menu-btn.is-touch-hover{
  background: rgba(148,163,184,.22);
}
html[data-theme="light"] .msg-menu-emoji.is-touch-hover,
html[data-theme="light"] .msg-menu-emoji-toggle.is-touch-hover{
  background: rgba(15,23,42,.12);
}

/* Mobile */
.mobile-only{ display:none; }
html.touch-menu-gesture-active,
html.touch-menu-gesture-active body,
html.touch-menu-gesture-active .app,
html.touch-menu-gesture-active .messages,
html.touch-menu-gesture-active .msg-row,
html.touch-menu-gesture-active .msg-bubble,
html.touch-menu-gesture-active .msg-menu,
html.touch-menu-gesture-active .msg-menu *{
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
}
html.touch-menu-gesture-active input,
html.touch-menu-gesture-active textarea,
html.touch-menu-gesture-active select,
html.touch-menu-gesture-active [contenteditable=""],
html.touch-menu-gesture-active [contenteditable="true"],
html.touch-menu-gesture-active [contenteditable="plaintext-only"]{
  user-select: text !important;
  -webkit-user-select: text !important;
  -webkit-touch-callout: default !important;
}
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: var(--app-height, 100dvh);
    min-height: var(--app-height, 100dvh);
    overflow: hidden;
  }
  .shell{
    height: var(--app-height, 100dvh);
    min-height: var(--app-height, 100dvh);
    overflow: hidden;
  }
  .shell{
    position: fixed;
    inset: 0;
    width: 100%;
  }
  .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: var(--app-height, 100dvh) !important;
  }
  .profile-panel.is-user-view .profile-user-hero{
    min-height: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 72px) 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;
    margin: 24px auto 44px;
  }
  .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: 6px 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;
  }
  .shell{
    position: fixed;
  }
  .sidebar,
  .main{
    position: absolute;
    inset: 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
    backface-visibility: hidden;
  }
  .sidebar{
    transform: none;
    opacity: 1;
    filter: none;
    transition: none;
  }
  .sidebar::after{
    content:none;
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(2,6,23,0), rgba(2,6,23,.14));
    opacity: 0;
    transition: none;
    pointer-events:none;
  }
  .main{
    display:flex;
    z-index: 2;
    visibility:hidden;
    pointer-events:none;
    opacity:1;
    transform: translate3d(100%, 0, 0);
    transform-origin: 100% 50%;
    transition: transform .34s cubic-bezier(.22,.88,.22,1);
    box-shadow: none;
    will-change: transform;
    contain: layout paint;
    background: var(--bg);
  }
  html[data-theme="light"] .main{
    background: var(--bg);
  }
  .shell.is-chat-open .sidebar{
    pointer-events:none;
  }
  .shell.is-chat-open .main{
    visibility:visible;
    pointer-events:auto;
    opacity:1;
    transform: translate3d(0, 0, 0);
    box-shadow: none;
    touch-action: pan-y pinch-zoom;
  }
  .shell.is-chat-dragging .main{
    transition: none;
  }
  .shell.is-chat-dragging .messages,
  .shell.is-chat-settling .messages{
    overflow-y: hidden;
    -webkit-overflow-scrolling: auto;
  }
  .mobile-only{ display:flex; }
  .chat-header{
    background: linear-gradient(180deg, #121927 0%, #111726 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  html[data-theme="light"] .chat-header{
    background: linear-gradient(180deg, #ffffff 0%, #f8fafd 100%);
  }
  .chat-header::after{
    content:"";
    position:absolute;
    top: calc(env(safe-area-inset-top, 0px) + 4px);
    left: 50%;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    transform: translateX(-50%);
    opacity: .78;
    pointer-events:none;
  }
  html[data-theme="light"] .chat-header::after{
    background: rgba(15,23,42,.16);
  }
  .composer{
    background: linear-gradient(180deg, #111726 0%, #0f1420 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  html[data-theme="light"] .composer{
    background: linear-gradient(180deg, #ffffff 0%, #f8fafd 100%);
  }
  .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) + var(--chat-bottom-offset) + 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%;
  }
  .call-local-stage{ 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) + var(--chat-bottom-offset) + 12px);
  }
  .jump-round-btn{
    bottom: calc(var(--chat-composer-height) + var(--chat-bottom-offset) + 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));
}

/* Monochrome refresh */
.brand-mark{
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(96,106,118,.2));
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 24px rgba(0,0,0,.18);
}
.auth-card,
.chat-find-bar,
.chat-find-results,
.chat-pinned-bar,
.chat-media-bar,
.chat-date-popover,
.message-selection-bar,
.download-hud,
.modal-card,
.modal.modal-context-settings .modal-card,
.modal.modal-context-profile-popup .modal-card{
  border: 1px solid var(--glass-border);
  background: var(--glass-panel-strong);
  box-shadow: 0 24px 54px rgba(0,0,0,.28);
}
.sidebar,
.chat-header,
.composer,
.profile-panel.is-self-view .profile-panel-header,
.modal.modal-context-profile-popup .modal-card{
  background: var(--glass-panel);
}
html[data-theme="light"] .main{
  background: var(--chat-bg);
}
.profile-panel{
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border-left-color: var(--glass-border);
  box-shadow: -24px 0 46px rgba(0,0,0,.38);
}
.profile-panel.is-self-view,
.profile-panel.is-self-view .profile-panel-body{
  background: linear-gradient(180deg, var(--panel), var(--panel2));
}
.profile-panel-backdrop{
  background: rgba(4,5,7,.56);
}
html[data-theme="light"] .profile-panel-backdrop{
  background: rgba(255,255,255,.72);
}
.profile-self-surface,
.profile-contact-editor-surface,
.profile-panel.is-user-view .profile-card,
.profile-user-hover-card,
.profile-birthday-year-menu{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--glass-border);
  box-shadow: 0 18px 36px rgba(0,0,0,.18);
}
html[data-theme="light"] .profile-self-surface,
html[data-theme="light"] .profile-contact-editor-surface,
html[data-theme="light"] .profile-panel.is-user-view .profile-card,
html[data-theme="light"] .profile-user-hover-card,
html[data-theme="light"] .profile-birthday-year-menu{
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,246,248,.9));
}
html[data-theme="light"] .profile-panel,
html[data-theme="light"] .profile-panel.is-self-view,
html[data-theme="light"] .profile-panel.is-self-view .profile-panel-body{
  background: #ffffff;
  color-scheme: light;
  color: rgba(17,17,17,.92);
}
html[data-theme="light"] .profile-panel.is-user-view,
html[data-theme="light"] .profile-panel.is-user-view .profile-panel-body{
  background: #ffffff;
  color: rgba(17,17,17,.92);
}
html[data-theme="light"] .profile-panel.is-user-view .profile-panel-header{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.84));
  border-bottom: 1px solid rgba(17,17,17,.06);
  backdrop-filter: blur(20px) saturate(1.06);
  -webkit-backdrop-filter: blur(20px) saturate(1.06);
}
html[data-theme="light"] .profile-panel.is-user-view .profile-panel-title{
  color: rgba(17,17,17,.9);
}
html[data-theme="light"] .profile-panel.is-user-view #profilePanelBack,
html[data-theme="light"] .profile-panel.is-user-view #profilePanelClose{
  border-color: rgba(17,17,17,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,246,246,.92));
  box-shadow: 0 12px 24px rgba(17,17,17,.08), inset 0 1px 0 rgba(255,255,255,.82);
}
html[data-theme="light"] .profile-panel.is-user-view #profilePanelBack::before,
html[data-theme="light"] .profile-panel.is-user-view #profilePanelClose::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.16) 42%, rgba(255,255,255,0) 100%),
    radial-gradient(120% 120% at 18% 0%, rgba(255,255,255,.4), transparent 54%);
  opacity: .52;
}
html[data-theme="light"] .profile-panel.is-user-view #profilePanelBack::after,
html[data-theme="light"] .profile-panel.is-user-view #profilePanelClose::after{
  color: rgba(17,17,17,.88);
  text-shadow: none;
}
html[data-theme="light"] .profile-panel.is-user-view #profilePanelBack:hover,
html[data-theme="light"] .profile-panel.is-user-view #profilePanelClose.is-visible:hover{
  border-color: rgba(17,17,17,.12);
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(241,241,241,.94));
}
html[data-theme="light"] .profile-panel.is-user-view #profilePanelBack img{
  filter: var(--icon-filter);
}
html[data-theme="light"] .profile-panel.is-user-view .profile-section-title,
html[data-theme="light"] .profile-panel.is-user-view .profile-user-line-button,
html[data-theme="light"] .profile-panel.is-user-view .profile-user-line-value.is-accent{
  color: rgba(17,17,17,.9);
}
html[data-theme="light"] .profile-panel.is-user-view .profile-user-line-label,
html[data-theme="light"] .profile-panel.is-user-view .profile-contact-editor-handle,
html[data-theme="light"] .profile-panel.is-user-view .profile-user-hover-card-title,
html[data-theme="light"] .profile-panel.is-user-view .profile-user-hover-card-meta{
  color: rgba(17,17,17,.56);
}
html[data-theme="light"] .profile-panel.is-user-view .profile-user-line-value{
  color: rgba(17,17,17,.9);
}
html[data-theme="light"] .profile-panel.is-self-view #profilePanelBack,
html[data-theme="light"] .profile-panel.is-self-view #profilePanelClose{
  background: rgba(17,17,17,.04);
  border-color: rgba(17,17,17,.08);
}
html[data-theme="light"] .profile-panel.is-self-view #profilePanelBack::after,
html[data-theme="light"] .profile-panel.is-self-view #profilePanelClose::after,
html[data-theme="light"] .profile-panel.is-self-view .profile-panel-title,
html[data-theme="light"] .profile-user-name,
html[data-theme="light"] .profile-user-line-value,
html[data-theme="light"] .profile-self-row-label,
html[data-theme="light"] .profile-self-row-value,
html[data-theme="light"] .profile-self-split-label,
html[data-theme="light"] .profile-self-row-btn,
html[data-theme="light"] .profile-self-note-action{
  color: rgba(17,17,17,.9);
}
html[data-theme="light"] .profile-user-status,
html[data-theme="light"] .profile-self-note,
html[data-theme="light"] .profile-self-input-prefix,
html[data-theme="light"] .profile-self-row-value.is-placeholder,
html[data-theme="light"] .profile-self-row-arrow,
html[data-theme="light"] .profile-username-suggestions-label,
html[data-theme="light"] .profile-username-suggestions-hint,
html[data-theme="light"] .profile-user-hover-card-title,
html[data-theme="light"] .profile-user-hover-card-meta,
html[data-theme="light"] .profile-contact-editor-handle,
html[data-theme="light"] .profile-user-line-label{
  color: rgba(17,17,17,.56);
}
html[data-theme="light"] .profile-user-hover-card-text{
  color: rgba(17,17,17,.86);
}
html[data-theme="light"] .profile-panel.is-self-view input.profile-self-input,
html[data-theme="light"] .profile-panel.is-self-view textarea.profile-self-input,
html[data-theme="light"] .profile-panel.is-user-view .profile-contact-editor-themed input.profile-self-input,
html[data-theme="light"] .profile-panel.is-user-view .profile-contact-editor-themed textarea.profile-self-input{
  color: rgba(17,17,17,.92);
}
html[data-theme="light"] .profile-self-input::placeholder,
html[data-theme="light"] .profile-contact-editor-themed .profile-self-input::placeholder{
  color: rgba(17,17,17,.3);
}
html[data-theme="light"] .profile-user-action,
html[data-theme="light"] .profile-panel.is-user-view .profile-user-action,
html[data-theme="light"] .profile-panel.is-user-view .profile-user-action-label{
  color: rgba(17,17,17,.86);
  background: rgba(0,0,0,.04);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
html[data-theme="light"] .profile-user-action-icon img{
  filter: var(--icon-filter);
}
.auth-tabs-glider,
.modal .tab.is-active,
.newchat-mode-glider,
.btn.primary,
#sendBtn,
#sendBtn.is-recording,
.recorder-action-send{
  background: linear-gradient(135deg, rgba(96,102,110,.98), rgba(61,66,73,.94));
  border-color: rgba(177,186,196,.16);
  box-shadow: 0 12px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.14);
  color: var(--text);
}
html[data-theme="light"] .auth-tabs-glider,
html[data-theme="light"] .modal .tab.is-active,
html[data-theme="light"] .newchat-mode-glider,
html[data-theme="light"] .btn.primary,
html[data-theme="light"] #sendBtn,
html[data-theme="light"] #sendBtn.is-recording,
html[data-theme="light"] .recorder-action-send{
  background: linear-gradient(135deg, rgba(250,148,103,.92), rgba(224,122,74,.88));
  border-color: rgba(250,148,103,.3);
  box-shadow: 0 10px 24px rgba(250,148,103,.2), inset 0 1px 0 rgba(255,255,255,.4);
  color: #fff;
}
#settingsBtn{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
#settingsBtn:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus,
textarea:focus,
.profile-panel.is-self-view input.profile-self-input:focus,
.profile-panel.is-self-view textarea.profile-self-input:focus{
  background-color: var(--voice-accent-soft);
  box-shadow: inset 0 0 0 1px var(--voice-accent-border), inset 0 0 26px rgba(128,155,183,.14);
  filter: none;
}
.avatar,
.chat-item.is-favorites .avatar{
  background: linear-gradient(135deg, rgba(163,170,178,.28), rgba(78,84,92,.2));
  color: rgba(245,247,250,.96);
}
html[data-theme="light"] .avatar{
  color: rgba(16,19,23,.88);
}
.sidebar-search,
.chat-item:hover,
.pick,
.pick:hover,
.settings-sheet .pick,
.chat-media-main,
.chat-media-main:hover,
.chat-pinned-main,
.chat-pinned-main:hover,
.profile-user-action,
.profile-user-action:hover,
.profile-user-line-copy,
.profile-user-line-copy:hover,
.profile-self-note-action,
.profile-self-note-action:hover,
.palette-chip,
.palette-chip:hover,
.newchat-menu,
.newchat-mode,
.modal .auth-tabs,
.menu-check,
.menu-check:hover,
.poll-compose-option,
.poll-voters-option{
  background: var(--surface-2);
  border-color: var(--glass-border);
  box-shadow: none;
}
.chat-item.is-favorites,
.chat-item.is-favorites:hover,
.chat-item.is-favorites.is-active{
  background: linear-gradient(145deg, rgba(250,148,103,.1), rgba(255,255,255,.04));
}
.chat-item.is-favorites .chat-name,
.chat-item.is-pinned .chat-name{
  color: var(--text);
}
.chat-item.is-favorites .chat-name::before{
  color: var(--voice-accent);
}
.chat-item.is-favorites .chat-preview,
.chat-item.is-favorites .chat-tail-icon{
  color: var(--muted);
}
.chat-item.is-active,
.chat-item-search-message,
.empty-hero,
.badge,
.chat-date-btn,
.chat-date-picker-day.is-selected,
.chat-find-result.is-active,
.chat-media-btn.is-active,
.chat-media-btn.is-active:hover,
.msg-select-toggle.is-checked,
.forward-sheet .pick.is-selected .pick-check,
.menu-check input:checked,
.poll-compose-correct:checked,
.profile-birthday-year-option.is-active,
.profile-birthday-year-item.is-active,
.call-actions .btn.is-active,
.call-actions .btn.is-active:hover,
.call-circle-btn.is-accept{
  background: linear-gradient(135deg, var(--voice-accent-soft), rgba(255,255,255,.06));
  border-color: var(--voice-accent-border);
  box-shadow: 0 0 0 1px rgba(128,155,183,.12), 0 14px 28px rgba(0,0,0,.16);
  color: var(--text);
}
.chat-date-btn:hover:not(:disabled),
.chat-find-result:hover,
.profile-username-suggestion,
.profile-username-suggestion:hover{
  background: linear-gradient(135deg, rgba(128,155,183,.2), rgba(255,255,255,.06));
  border-color: var(--voice-accent-border);
  box-shadow: 0 14px 28px rgba(0,0,0,.16);
}
.profile-username-suggestion:focus-visible,
.chat-date-picker-day:focus-visible,
.msg-reply.is-link:focus-visible{
  box-shadow: 0 0 0 3px rgba(128,155,183,.18);
  border-color: var(--voice-accent-border);
}
.bg-swatch:hover{
  border-color: var(--voice-accent-border);
  box-shadow: 0 14px 28px rgba(0,0,0,.24);
}
.chat-pinned-kicker,
.chat-find-count.is-scanning,
.chat-media-popover-title,
.profile-section-title,
.profile-user-line-value.is-accent,
.msg-reply-sender,
.profile-self-note-status.is-current,
.profile-self-note-status.is-warning{
  color: var(--voice-accent);
}
.chat-scroll-date-badge,
.msg-date-separator > span{
  background: linear-gradient(180deg, rgba(17,19,23,.88), rgba(10,11,14,.76));
  border: 1px solid var(--glass-border);
  box-shadow: 0 12px 26px rgba(0,0,0,.24);
}
html[data-theme="light"] .chat-scroll-date-badge,
html[data-theme="light"] .msg-date-separator > span{
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(243,245,248,.86));
}
.msg-unread-separator > span{
  border-color: var(--voice-accent-border);
  background: linear-gradient(180deg, rgba(24,29,34,.86), rgba(12,14,17,.78));
  color: rgba(228,235,242,.96);
  box-shadow: 0 12px 24px rgba(0,0,0,.24);
}
html[data-theme="light"] .msg-unread-separator > span{
  background: linear-gradient(180deg, rgba(239,243,247,.96), rgba(230,235,240,.9));
  color: rgba(42,52,63,.94);
}
.msg-reply{
  border-left-color: var(--voice-accent);
  background: rgba(128,155,183,.12);
}
.msg-reply.is-link:hover{
  background: rgba(128,155,183,.18);
  border-left-color: var(--voice-accent);
}
.msg-row.is-selected-message .msg-bubble{
  border-color: var(--voice-accent-border);
  box-shadow: 0 0 0 1px rgba(128,155,183,.18), 0 16px 28px rgba(0,0,0,.22);
}
.msg-poll{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.msg-poll-option:hover:not(:disabled),
.msg-poll-option.is-selected{
  border-color: var(--voice-accent-border);
  background: rgba(128,155,183,.12);
}
.poll-voter-chip{
  border-color: var(--voice-accent-border);
  background: rgba(128,155,183,.12);
}
.msg-poll-option-fill,
.msg-video-progress-fill,
.chat-media-progress-fill,
.msg-upload-fill,
.download-hud-strip-fill{
  background: linear-gradient(90deg, rgba(204,212,221,.94), var(--voice-accent));
}
.msg-reaction{
  background: var(--surface-2);
  color: var(--text);
}
.msg-reaction:hover,
.msg-reaction.is-me{
  background: rgba(128,155,183,.16);
}
.jump-latest-btn,
.jump-round-btn{
  border-color: var(--voice-accent-border);
  background: radial-gradient(circle at 30% 28%, rgba(176,187,200,.3), rgba(88,96,106,.84));
  color: rgba(247,249,251,.96);
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
}
.jump-latest-btn:hover,
.jump-round-btn:hover{
  background: radial-gradient(circle at 30% 28%, rgba(196,205,214,.34), rgba(100,108,118,.9));
  border-color: rgba(176,187,200,.3);
}
html[data-theme="light"] .jump-latest-btn,
html[data-theme="light"] .jump-round-btn{
  color: rgba(16,19,23,.92);
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.96), rgba(204,210,216,.88));
  box-shadow: 0 12px 24px rgba(17,24,39,.14);
}
.chat-find-highlight{
  background: linear-gradient(90deg, rgba(128,155,183,.22), rgba(255,255,255,.06));
  box-shadow: inset 0 0 0 1px rgba(128,155,183,.18);
}
.chat-date-picker-day:hover{
  background: rgba(128,155,183,.12);
  border-color: var(--voice-accent-border);
}
.chat-date-picker-day.has-messages::after{
  background: var(--voice-accent);
}
.chat-find-results::-webkit-scrollbar-thumb,
.msg-menu-emojis-scroll::-webkit-scrollbar-thumb{
  background: rgba(128,155,183,.34);
  border-color: transparent;
}
.msg-menu-emojis-scroll{
  scrollbar-color: rgba(128,155,183,.34) transparent;
}
.msg-menu-emoji.is-me{
  background: rgba(128,155,183,.16);
}
.round-video-badge{
  border-color: rgba(214,220,227,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.03)),
    linear-gradient(135deg, rgba(128,155,183,.18), rgba(62,68,75,.28) 58%, rgba(255,255,255,.04));
  text-shadow: 0 1px 6px rgba(0,0,0,.34), 0 0 8px rgba(128,155,183,.14);
}
html[data-theme="light"] .round-video-badge{
  border-color: rgba(100,116,139,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.64), rgba(255,255,255,.24)),
    linear-gradient(135deg, rgba(126,145,166,.14), rgba(209,214,220,.9) 58%, rgba(255,255,255,.12));
}
.msg-audio-card{
  --voice-wave-base: rgba(210,219,228,.28);
  --voice-wave-active: rgba(223,231,239,.96);
  --voice-wave-glow: rgba(128,155,183,.38);
  border-color: var(--border);
  background: var(--audio-in-bg);
  box-shadow: none;
}
.msg-row.me .msg-audio-card{
  background: var(--audio-out-bg);
}
.msg-audio-card.voice-deep{
  --voice-wave-base: rgba(198,205,214,.3);
  --voice-wave-active: rgba(233,238,244,.96);
  --voice-wave-glow: rgba(120,138,156,.34);
}
.msg-audio-card.voice-balanced{
  --voice-wave-base: rgba(208,216,226,.3);
  --voice-wave-active: rgba(226,234,242,.96);
  --voice-wave-glow: rgba(128,155,183,.38);
}
.msg-audio-card.voice-bright{
  --voice-wave-base: rgba(214,222,231,.32);
  --voice-wave-active: rgba(239,243,247,.98);
  --voice-wave-glow: rgba(149,164,183,.4);
}
.chat-media-subtitle{
  color: var(--muted);
}
.chat-media-btn:hover,
.chat-media-close{
  color: var(--text);
  background: var(--surface-2);
}
.chat-media-slider{
  background:
    linear-gradient(90deg, rgba(128,155,183,.9) 50%, rgba(148,163,184,.28) 50%)
    center / 100% var(--chat-media-slider-track-size, 8px) no-repeat;
}
html[data-theme="light"] .chat-media-slider{
  background:
    linear-gradient(90deg, rgba(111,137,168,.84) 50%, rgba(148,163,184,.36) 50%)
    center / 100% var(--chat-media-slider-track-size, 8px) no-repeat;
}
.audio-play-btn{
  border-color: rgba(255,255,255,.18);
  background: radial-gradient(130% 130% at 30% 20%, rgba(255,255,255,.22), rgba(255,255,255,.05));
}
.audio-time,
.audio-tag{
  color: rgba(232,238,244,.9);
  text-shadow: none;
}
html[data-theme="light"] .audio-time,
html[data-theme="light"] .audio-tag{
  color: rgba(32,40,48,.74);
}
.profile-self-avatar-aura::before{
  background:
    radial-gradient(circle at 32% 32%, rgba(128,155,183,.24), transparent 52%),
    radial-gradient(circle at 70% 68%, rgba(204,212,220,.14), transparent 56%),
    radial-gradient(circle, rgba(255,255,255,.08), transparent 72%);
}
.profile-self-avatar-glow:not(.has-image),
.call-avatar-shell{
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 38%),
    linear-gradient(145deg, rgba(117,128,141,.34), rgba(63,68,75,.18));
}
.call-avatar-shell.is-speaking{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 24px 56px var(--voice-accent-glow);
  filter: saturate(1.02);
}
.profile-self-note-status.is-pending{
  color: rgba(226,232,240,.74);
}
.msg-select-toggle:focus-visible,
.menu-check input:focus-visible,
.poll-compose-correct:focus-visible{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 0 0 4px rgba(128,155,183,.18),
    0 2px 8px rgba(0,0,0,.18);
}
.profile-self-note-status.is-warning .profile-self-note-action,
.profile-username-suggestion{
  border-color: var(--voice-accent-border);
  background: linear-gradient(135deg, rgba(128,155,183,.18), rgba(255,255,255,.05));
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-theme="light"] .profile-self-note-status.is-warning .profile-self-note-action,
html[data-theme="light"] .profile-username-suggestion{
  color: var(--text);
}
.profile-birthday-year-switch,
.chat-date-picker-today{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.call{
  background:
    radial-gradient(circle at top left, rgba(148,163,184,.12), transparent 28%),
    radial-gradient(circle at top right, rgba(128,155,183,.1), transparent 32%),
    rgba(7,9,12,.78);
}
.call-card{
  background: linear-gradient(155deg, rgba(18,21,25,.96), rgba(12,14,17,.9));
  box-shadow: 0 30px 72px rgba(0,0,0,.36);
}
html[data-theme="light"] .call-card{
  background: linear-gradient(155deg, rgba(255,255,255,.98), rgba(241,243,246,.94));
}
.call-media{
  background:
    radial-gradient(circle at 18% 18%, rgba(128,155,183,.14), transparent 28%),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.08), transparent 28%),
    linear-gradient(180deg, rgba(8,10,13,.96), rgba(11,13,16,.9));
}
.call-fallback-remote{
  background:
    radial-gradient(circle at 50% 35%, rgba(128,155,183,.12), transparent 28%),
    radial-gradient(circle at 50% 75%, rgba(255,255,255,.06), transparent 34%);
}
.call-quality-item.is-good{
  color: var(--voice-accent);
}
.call-quality-item.is-fair{
  color: rgba(226,232,240,.76);
}
.call-actions .btn{
  background: var(--surface-2);
  color: var(--text);
}
.call-actions .btn:hover{
  background: var(--surface-3);
}
.incoming-call{
  background: rgba(7,9,12,.48);
}
.incoming-call-card{
  background:
    radial-gradient(circle at top, rgba(128,155,183,.14), transparent 36%),
    linear-gradient(180deg, rgba(16,18,22,.98), rgba(12,14,17,.92));
  box-shadow: 0 30px 80px rgba(0,0,0,.34);
}
html[data-theme="light"] .incoming-call-card{
  background:
    radial-gradient(circle at top, rgba(111,137,168,.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(241,243,246,.96));
}
.call-circle-btn{
  box-shadow: 0 16px 42px rgba(0,0,0,.22);
}
.recorder-strip{
  border-top-color: var(--glass-border);
  background: linear-gradient(180deg, rgba(30,32,36,.96), rgba(21,23,26,.9));
}
html[data-theme="light"] .recorder-strip{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(242,244,247,.92));
}
.recorder-timer-dot{
  background: var(--voice-accent);
  box-shadow: 0 0 0 6px rgba(128,155,183,.12);
}
.recorder-orb,
.recorder-hud.is-locked .recorder-lock-rail{
  background: linear-gradient(145deg, rgba(108,116,126,.96), rgba(70,76,84,.94));
  box-shadow: 0 16px 38px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14);
}
.recorder-orb::before{
  background: radial-gradient(circle at center, rgba(255,255,255,.22), rgba(255,255,255,0) 68%);
}
.recorder-orb::after{
  background: radial-gradient(circle at center, rgba(128,155,183,.28), rgba(128,155,183,0) 72%);
}
.chat-header,
.composer,
.sidebar{
  box-shadow: none;
}
/* Outgoing bubble light theme overrides moved to end of file */
html[data-theme="light"] .msg-row.me .msg-reply{
  background: rgba(17,17,17,.05);
  border-left-color: rgba(17,17,17,.26);
}
.msg-menu,
.msg-menu-reactions{
  border: 1px solid var(--glass-border);
  background: var(--glass-panel-strong);
  box-shadow: 0 24px 54px rgba(0,0,0,.3);
}
.msg-menu-emoji-toggle{
  border-color: var(--glass-border);
  background: var(--surface-1);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.msg-menu-btn:not(.danger):hover,
.msg-menu-btn:not(.danger).is-touch-hover,
.msg-menu-btn:not(.danger):focus-visible,
.msg-menu-emoji-toggle:hover,
.msg-menu-emoji-toggle.is-touch-hover,
.msg-menu-emoji-toggle:focus-visible,
.msg-menu-emoji.is-touch-hover,
.msg-menu-emoji.is-me,
.msg-menu-emoji:hover{
  background: var(--surface-2);
  border-color: var(--glass-border);
  box-shadow: none;
}
.msg-menu-btn:not(.danger):focus-visible,
.msg-menu-emoji-toggle:focus-visible{
  box-shadow: 0 0 0 1px var(--glass-border);
}
.msg-menu-emojis-scroll{
  scrollbar-color: rgba(166,166,166,.34) transparent;
}
.msg-menu-emojis-scroll::-webkit-scrollbar-thumb{
  background: rgba(166,166,166,.34);
}
@media (min-width: 901px){
  .profile-panel.is-user-view .profile-user-view{
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
  }
  .profile-panel.is-user-view .profile-user-hero{
    min-height: auto;
    padding: calc(env(safe-area-inset-top, 0px) + 88px) 28px 16px;
  }
  .profile-panel.is-user-view .profile-user-actions{
    margin: 22px auto 12px;
  }
  .profile-panel.is-user-view .profile-user-content{
    padding: 8px 24px 32px;
  }
  .profile-panel.is-user-view .profile-user-stack{
    gap: 14px;
  }
}
.msg-menu-body{
  gap: 0;
}
.profile-panel.is-user-view .profile-panel-header{
  background: linear-gradient(180deg, rgba(27,29,33,.94), rgba(27,29,33,.76), rgba(27,29,33,0));
}
.profile-panel.is-user-view #profilePanelBack,
.profile-panel.is-user-view #profilePanelClose{
  border-color: var(--glass-border);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  box-shadow: 0 14px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(20px) saturate(1.05);
  -webkit-backdrop-filter: blur(20px) saturate(1.05);
}
.profile-panel.is-user-view #profilePanelBack::before,
.profile-panel.is-user-view #profilePanelClose::before{
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02) 40%, rgba(255,255,255,0) 100%);
  opacity: .56;
}
.profile-panel.is-user-view #profilePanelBack::after,
.profile-panel.is-user-view #profilePanelClose::after{
  color: rgba(245,245,245,.92);
  text-shadow: none;
}
.profile-panel.is-user-view #profilePanelBack:hover,
.profile-panel.is-user-view #profilePanelClose.is-visible:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 16px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.1);
}
.profile-panel .profile-section-title,
.profile-panel .profile-user-line-value.is-accent,
.profile-panel .profile-self-note-status.is-current,
.profile-panel .profile-self-note-status.is-warning{
  color: var(--text);
}
.profile-panel .profile-self-note-status.is-warning .profile-self-note-action,
.profile-panel .profile-username-suggestion{
  border-color: var(--ui-accent-border);
  background: linear-gradient(135deg, var(--surface-2), rgba(255,255,255,.04));
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.profile-panel .profile-self-note-status.is-warning .profile-self-note-action:hover,
.profile-panel .profile-username-suggestion:hover{
  background: linear-gradient(135deg, var(--surface-3), rgba(255,255,255,.05));
  border-color: var(--ui-accent-border);
}
.profile-panel.is-self-view input.profile-self-input:focus,
.profile-panel.is-self-view textarea.profile-self-input:focus,
.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-color: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--glass-border);
}
.profile-panel.is-user-view,
.profile-panel.is-user-view .profile-panel-body{
  background:
    radial-gradient(1200px 760px at 18% 8%, rgba(255,255,255,.035), transparent 54%),
    linear-gradient(180deg, #1f1f1f, #1c1c1c 58%, #191919 100%);
}
.profile-panel.is-user-view .profile-user-content{
  background: transparent;
}
.profile-panel.is-user-view .profile-card,
.profile-panel.is-user-view .profile-contact-editor-surface,
.profile-panel.is-user-view .profile-user-hover-card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 40px rgba(0,0,0,.22);
}
.profile-panel.is-user-view .profile-section-title,
.profile-panel.is-user-view .profile-user-line-button,
.profile-panel.is-user-view .profile-user-line-value.is-accent{
  color: rgba(245,245,245,.94);
}
.profile-panel.is-user-view .profile-user-line-button.is-danger{
  color: #ff655e;
}
.profile-panel.is-user-view .profile-user-line-label,
.profile-panel.is-user-view .profile-contact-editor-handle,
.profile-panel.is-user-view .profile-user-hover-card-title,
.profile-panel.is-user-view .profile-user-hover-card-meta{
  color: rgba(255,255,255,.72);
}
.profile-panel.is-user-view .profile-user-line-value,
.profile-panel.is-user-view .profile-user-hover-card-text,
.profile-panel.is-user-view .profile-user-action,
.profile-panel.is-user-view .profile-user-action-label{
  color: rgba(255,255,255,.92);
}
.profile-panel.is-user-view .profile-user-line-copy{
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.94);
}
.profile-panel.is-user-view .profile-user-line-copy:hover{
  background: rgba(255,255,255,.14);
}
.profile-panel.is-user-view .profile-user-group-item + .profile-user-group-item,
.profile-panel.is-user-view .profile-user-line{
  border-top-color: rgba(255,255,255,.1);
}

/* ── Text formatting context menu ── */
.fmt-menu{
  position: fixed;
  z-index: 200;
  min-width: 200px;
  max-width: 280px;
  background: linear-gradient(165deg, rgba(22,26,39,.96), rgba(15,18,28,.94));
  border-radius: 16px;
  box-shadow:
    0 22px 44px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.06);
  padding: 6px;
  backdrop-filter: blur(18px) saturate(1.12);
  animation: menu-pop .16s cubic-bezier(.2,.8,.25,1) both;
  display: flex;
  flex-direction: column;
}
.fmt-menu.is-closing{
  animation: menu-pop-out .14s ease both;
  pointer-events: none;
}
html[data-theme="light"] .fmt-menu{
  background: linear-gradient(165deg, rgba(255,255,255,.97), rgba(248,250,252,.95));
  box-shadow:
    0 18px 34px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.72);
}
.fmt-menu-sep{
  height: 1px;
  margin: 4px 8px;
  background: rgba(255,255,255,.08);
}
html[data-theme="light"] .fmt-menu-sep{
  background: rgba(15,23,42,.08);
}
.fmt-menu-btn{
  border: 0;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13.5px;
  font-weight: 580;
  cursor: pointer;
  transition: background .14s ease;
}
.fmt-menu-btn:hover{
  background: rgba(255,255,255,.08);
}
html[data-theme="light"] .fmt-menu-btn:hover{
  background: rgba(15,23,42,.06);
}
.fmt-menu-btn-label{
  flex: 1;
  min-width: 0;
}
.fmt-menu-btn-shortcut{
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
.fmt-menu-section-title{
  padding: 6px 10px 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Link popup dialog ── */
.fmt-link-overlay{
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(8,10,16,.44);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-in .14s ease both;
}
.fmt-link-overlay.is-closing{
  animation: fade-out .14s ease both;
}
html[data-theme="light"] .fmt-link-overlay{
  background: rgba(15,23,42,.22);
}
.fmt-link-dialog{
  width: 340px;
  max-width: calc(100vw - 32px);
  background: linear-gradient(165deg, rgba(22,26,39,.97), rgba(15,18,28,.95));
  border-radius: 20px;
  box-shadow: 0 28px 52px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.06);
  padding: 20px;
  backdrop-filter: blur(20px) saturate(1.14);
  animation: menu-pop .18s cubic-bezier(.2,.8,.25,1) both;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
html[data-theme="light"] .fmt-link-dialog{
  background: linear-gradient(165deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow: 0 22px 44px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.72);
}
.fmt-link-dialog h3{
  margin: 0;
  font-size: 16px;
  font-weight: 720;
  color: var(--text);
}
.fmt-link-input{
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.fmt-link-input:focus{
  border-color: rgba(124,58,237,.6);
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}
html[data-theme="light"] .fmt-link-input{
  border-color: rgba(15,23,42,.12);
  background: rgba(15,23,42,.04);
}
html[data-theme="light"] .fmt-link-input:focus{
  border-color: rgba(124,58,237,.5);
}
.fmt-link-label{
  font-size: 12px;
  font-weight: 640;
  color: var(--muted);
  margin-bottom: 4px;
  display: block;
}
.fmt-link-field{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fmt-link-actions{
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}
.fmt-link-actions .btn{
  min-width: 80px;
  padding: 8px 16px;
  font-size: 13.5px;
  border-radius: 12px;
}

/* ── Message text formatting (rendered) ── */
.msg-text b, .msg-text strong, .msg-caption b, .msg-caption strong{
  font-weight: 760;
}
.msg-text i, .msg-text em, .msg-caption i, .msg-caption em{
  font-style: italic;
}
.msg-text s, .msg-caption s{
  text-decoration: line-through;
  opacity: .7;
}
.msg-text u, .msg-caption u{
  text-decoration: underline;
  text-underline-offset: 2px;
}
.msg-text code, .msg-caption code{
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Menlo, monospace;
  font-size: .88em;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(255,255,255,.08);
}
html[data-theme="light"] .msg-text code,
html[data-theme="light"] .msg-caption code{
  background: rgba(15,23,42,.06);
}
.msg-text .fmt-spoiler, .msg-caption .fmt-spoiler{
  background: rgba(255,255,255,.2);
  color: transparent;
  border-radius: 4px;
  padding: 0 3px;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
  user-select: none;
}
.msg-text .fmt-spoiler.is-revealed, .msg-caption .fmt-spoiler.is-revealed{
  color: inherit;
  background: rgba(255,255,255,.06);
}
html[data-theme="light"] .msg-text .fmt-spoiler{
  background: rgba(15,23,42,.18);
}
html[data-theme="light"] .msg-text .fmt-spoiler.is-revealed{
  background: rgba(15,23,42,.06);
}
.msg-text .fmt-quote, .msg-caption .fmt-quote{
  display: block;
  border-left: 3px solid rgba(124,58,237,.6);
  padding-left: 8px;
  margin: 4px 0;
  color: var(--muted);
  font-style: italic;
}
.msg-text a, .msg-caption a{
  color: rgba(167,139,250,.95);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color .14s ease;
}
.msg-text a:hover, .msg-caption a:hover{
  color: rgba(196,181,253,1);
}
html[data-theme="light"] .msg-text a,
html[data-theme="light"] .msg-caption a{
  color: rgba(109,40,217,.88);
}
html[data-theme="light"] .msg-text a:hover,
html[data-theme="light"] .msg-caption a:hover{
  color: rgba(124,58,237,1);
}

/* ── Link previews (Telegram-style) ── */
.link-preview{
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  text-decoration: none;
  color: inherit;
  transition: background .14s ease, border-color .14s ease;
  cursor: pointer;
}
.link-preview:hover{
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.14);
}
html[data-theme="light"] .link-preview{
  background: rgba(15,23,42,.04);
  border-color: rgba(15,23,42,.08);
}
html[data-theme="light"] .link-preview:hover{
  background: rgba(15,23,42,.07);
}
.link-preview-image{
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  display: block;
}
.link-preview-body{
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.link-preview-site{
  font-size: 11px;
  font-weight: 680;
  color: rgba(167,139,250,.9);
  text-transform: uppercase;
  letter-spacing: .03em;
}
html[data-theme="light"] .link-preview-site{
  color: rgba(109,40,217,.8);
}
.link-preview-title{
  font-size: 13.5px;
  font-weight: 680;
  line-height: 1.3;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.link-preview-desc{
  font-size: 12.5px;
  line-height: 1.34;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── AI Assistant ── */
.ai-avatar{
  background: #fff;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}
.ai-avatar-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.ai-avatar-large{
  width: 72px;
  height: 72px;
  font-size: 24px;
  margin: 0 auto 12px;
}
/* AI chat item animations */
.chat-item-ai{
  border-left: 3px solid #fa9467;
}
@keyframes ai-slide-out{
  to{ transform: translateX(-100%); opacity: 0; }
}
@keyframes ai-slide-in{
  from{ transform: translateX(-100%); opacity: 0; }
  to{ transform: translateX(0); opacity: 1; }
}
.chat-item-ai.is-removing{
  animation: ai-slide-out .35s cubic-bezier(.4,0,.2,1) forwards;
  pointer-events: none;
}
.chat-item-ai.is-entering{
  animation: ai-slide-in .35s cubic-bezier(0,.6,.2,1) forwards;
}
/* Folder tab animations */
@keyframes tab-fade-out{
  to{ opacity: 0; transform: scale(.85) translateY(-4px); }
}
@keyframes tab-fade-in{
  from{ opacity: 0; transform: scale(.85) translateY(-4px); }
  to{ opacity: 1; transform: scale(1) translateY(0); }
}
.chat-folder-tab.is-entering{
  animation: tab-fade-in .3s cubic-bezier(0,.6,.2,1) forwards;
}
.chat-folder-tab.is-removing{
  animation: tab-fade-out .25s ease forwards;
  pointer-events: none;
}
/* Generic feature toggle fade */
@keyframes feature-fade-out{
  to{ opacity: 0; transform: scale(.8); }
}
@keyframes feature-fade-in{
  from{ opacity: 0; transform: scale(.8); }
  to{ opacity: 1; transform: scale(1); }
}
.ai-feature-entering{
  animation: feature-fade-in .3s ease forwards;
}
.ai-feature-removing{
  animation: feature-fade-out .25s ease forwards;
  pointer-events: none;
}
.chat-item-ai .ai-avatar{
  width: 46px;
  height: 46px;
}
.ai-preview{
  color: var(--muted);
  font-style: italic;
}
.ai-msg-row{
  padding-right: 12px !important;
}
.ai-msg-row:not(.me){
  padding-left: 36px !important;
}
.ai-msg-row .ai-bubble{
  max-width: 85%;
}
.ai-msg-row:not(.me) .ai-bubble{
  background: var(--bubble-in-bg, rgba(255,255,255,.07));
  border: 1px solid var(--border);
}
.ai-bubble .msg-text{
  white-space: pre-wrap;
  word-break: break-word;
}
/* AI streaming: thinking dots before text arrives */
.ai-streaming .msg-text{
  color: var(--text);
}
.ai-streaming .msg-text::after{
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--accent, #fa9467);
  margin-left: 1px;
  border-radius: 1px;
  animation: ai-cursor-pulse 1s ease-in-out infinite;
  vertical-align: text-bottom;
}
@keyframes ai-cursor-pulse{
  0%, 100%{ opacity: 1; transform: scaleY(1); }
  50%{ opacity: 0.3; transform: scaleY(0.8); }
}
/* Thinking dots shown before first token */
.ai-thinking-dots{
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 4px 0;
}
.ai-thinking-dots .dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, #fa9467);
  animation: ai-dot-bounce 1.4s ease-in-out infinite;
}
.ai-thinking-dots .dot:nth-child(2){ animation-delay: 0.16s; }
.ai-thinking-dots .dot:nth-child(3){ animation-delay: 0.32s; }
@keyframes ai-dot-bounce{
  0%, 80%, 100%{ opacity: 0.25; transform: scale(0.75); }
  40%{ opacity: 1; transform: scale(1); }
}
.ai-error .msg-text{
  color: var(--danger, #ef4444);
}

/* ── AI Markdown Rendering ── */
.ai-md-heading{
  font-weight: 700;
  color: var(--text);
  margin: 8px 0 4px;
  line-height: 1.3;
}
h3.ai-md-heading{ font-size: 15px; }
h4.ai-md-heading{ font-size: 14px; }
h5.ai-md-heading{ font-size: 13px; color: var(--accent, #fa9467); }
.ai-md-list{
  margin: 4px 0 6px;
  padding-left: 18px;
}
.ai-md-list li{
  margin-bottom: 3px;
  line-height: 1.5;
}
.ai-md-list li::marker{
  color: var(--accent, #fa9467);
}
.ai-md-list-sub{
  margin-left: 12px;
  opacity: .85;
}
.ai-md-line{
  line-height: 1.55;
}
.ai-md-code{
  background: var(--surface-2, rgba(255,255,255,.05));
  padding: 1px 5px;
  border-radius: 4px;
  font-family: "SF Mono", Monaco, Consolas, monospace;
  font-size: 0.92em;
  color: var(--accent, #fa9467);
}
.ai-bubble strong, .ai-context-text strong, .ai-summary-text strong{
  font-weight: 700;
  color: var(--text);
}
.ai-bubble em, .ai-context-text em, .ai-summary-text em{
  font-style: italic;
  opacity: .9;
}
html[data-theme="light"] .ai-md-code{
  background: rgba(250,148,103,.08);
}

/* ── AI Message Context Menu ── */
.ai-msg-menu{
  z-index: 9999;
  min-width: 160px;
  background: var(--panel, #262626);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px 0;
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: ai-menu-in .15s ease-out;
}
@keyframes ai-menu-in{
  from{ opacity:0; transform:scale(.95); }
  to{ opacity:1; transform:scale(1); }
}
.ai-msg-menu-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background .1s ease;
  user-select: none;
}
.ai-msg-menu-item:hover{
  background: var(--surface-2, rgba(255,255,255,.05));
}
.ai-msg-menu-item:active{
  background: var(--surface-3, rgba(255,255,255,.08));
}
.ai-msg-menu-icon{
  font-size: 16px;
  width: 20px;
  text-align: center;
}
html[data-theme="light"] .ai-msg-menu{
  background: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

/* ── AI Action Card (single send confirmation) ── */
.ai-action-card{
  margin-top: 10px;
  padding: 14px 16px;
  background: var(--surface-1, rgba(255,255,255,.035));
  border: 1px solid var(--ui-accent-border, rgba(250,148,103,.26));
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ai-action-card .ai-action-icon{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ai-action-card .ai-action-icon svg{
  width: 18px;
  height: 18px;
  color: var(--accent, #fa9467);
  flex-shrink: 0;
}
.ai-action-label{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent, #fa9467);
  margin-bottom: 2px;
  text-transform: uppercase;
}
.ai-action-chat-name{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.ai-action-text{
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--surface-2, rgba(255,255,255,.05));
  border-radius: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  border-left: 3px solid var(--accent, #fa9467);
}
.ai-action-btns{
  display: flex;
  gap: 8px;
}
.ai-action-btns .ai-btn{
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all .15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-action-btns .ai-btn-send{
  background: linear-gradient(135deg, var(--accent, #fa9467), var(--accent2, #e07a4a));
  color: #fff;
  box-shadow: 0 4px 12px rgba(250,148,103,.3);
}
.ai-action-btns .ai-btn-send:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(250,148,103,.4);
}
.ai-action-btns .ai-btn-cancel{
  background: var(--surface-2, rgba(255,255,255,.05));
  color: var(--muted);
  border: 1px solid var(--border);
}
.ai-action-btns .ai-btn-cancel:hover{
  background: var(--surface-3, rgba(255,255,255,.08));
  color: var(--text);
}
.ai-action-done{
  font-size: 13px;
  color: var(--success, #22c55e);
  font-weight: 500;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-action-done svg{
  width: 16px;
  height: 16px;
}
.ai-action-rejected{
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  padding: 8px 12px;
}

/* Light theme: AI assistant incoming bubble */
html[data-theme="light"] .ai-msg-row:not(.me) .ai-bubble{
  background: linear-gradient(180deg, rgba(244,244,246,.98), rgba(237,238,241,.94));
  border: 1px solid rgba(17,17,17,.08);
  box-shadow: 0 8px 20px rgba(17,17,17,.06);
}
html[data-theme="light"] .ai-action-card{
  background: rgba(250,148,103,.04);
  border-color: rgba(250,148,103,.18);
}
html[data-theme="light"] .ai-action-text{
  background: rgba(250,148,103,.06);
}

/* ── Attach Menu ── */
.attach-menu{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  box-shadow: var(--shadow);
  z-index: 999;
  min-width: 180px;
}
.attach-menu-item{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.attach-menu-item:hover{ background: var(--faint); }

/* ── Telegram Import Modal ── */
.tg-import-modal{ padding: 4px 0; }
.tg-import-desc{ font-size: 14px; color: var(--text); margin-bottom: 4px; }
.tg-import-hint{ font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.tg-import-preview{
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-top: 8px;
}
.tg-import-chat-name{ font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.tg-import-stats{ font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.tg-import-preview-msg{
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tg-import-preview-msg:last-child{ border-bottom: none; }
.tg-import-from{ color: var(--accent); font-weight: 500; }
.tg-import-more{ font-size: 12px; color: var(--muted); padding-top: 4px; }
.tg-import-actions{ display: flex; gap: 8px; }

/* ── Smart Replies Bar ── */
.smart-replies-bar{
  display: none;
  gap: 8px;
  padding: 6px 12px;
  overflow-x: auto;
  flex-shrink: 0;
}
.smart-reply-chip{
  padding: 6px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.smart-reply-chip:hover{
  background: var(--ui-accent-soft);
  border-color: var(--accent);
}

/* ── AI Confirm Dialog (analysis permission) ── */
.ai-confirm-dialog{
  margin: 10px 36px;
  padding: 16px 18px;
  background: var(--surface-1, rgba(255,255,255,.035));
  border: 1px solid var(--ui-accent-border, rgba(250,148,103,.26));
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ai-confirm-header{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ai-confirm-header svg{
  width: 20px;
  height: 20px;
  color: var(--accent, #fa9467);
  flex-shrink: 0;
}
.ai-confirm-title{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.ai-confirm-desc{
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
  line-height: 1.5;
}
.ai-confirm-details{
  font-size: 13px;
  color: var(--text);
  margin-bottom: 14px;
  max-height: 140px;
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--surface-2, rgba(255,255,255,.05));
  border-radius: 10px;
  line-height: 1.6;
}
.ai-confirm-details li{
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-confirm-details li::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #fa9467);
  flex-shrink: 0;
}
.ai-confirm-btns{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ai-confirm-btns .ai-btn{
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all .15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-btn-allow{
  background: linear-gradient(135deg, var(--accent, #fa9467), var(--accent2, #e07a4a));
  color: #fff;
  box-shadow: 0 4px 12px rgba(250,148,103,.3);
}
.ai-btn-allow:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(250,148,103,.4);
}
.ai-btn-always{
  background: var(--surface-2, rgba(255,255,255,.05));
  color: var(--accent, #fa9467);
  border: 1px solid var(--ui-accent-border, rgba(250,148,103,.26)) !important;
}
.ai-btn-always:hover{
  background: var(--ui-accent-soft, rgba(250,148,103,.16));
}
.ai-btn-deny{
  background: var(--surface-2, rgba(255,255,255,.05));
  color: var(--muted);
  border: 1px solid var(--border) !important;
}
.ai-btn-deny:hover{
  background: var(--surface-3, rgba(255,255,255,.08));
  color: var(--text);
}
html[data-theme="light"] .ai-confirm-dialog{
  background: rgba(250,148,103,.04);
  border-color: rgba(250,148,103,.18);
}
html[data-theme="light"] .ai-confirm-details{
  background: rgba(17,17,17,.03);
}

/* ── AI Summary Popup (chat list) ── */
.ai-summary-btn{
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--accent, #fa9467);
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex-shrink: 0;
}
.ai-summary-btn:hover{
  background: var(--ui-accent-soft, rgba(250,148,103,.16));
}
.ai-summary-popup{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% + 6px);
  z-index: 200;
  background: var(--panel, #262626);
  border: 1px solid var(--ui-accent-border, rgba(250,148,103,.26));
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.2);
  animation: ai-popup-in 0.2s ease-out;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@keyframes ai-popup-in{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}
.ai-summary-popup-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.ai-summary-popup-title{
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, #fa9467);
}
.ai-summary-popup-close{
  width: 18px;
  height: 18px;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.ai-summary-text{
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-summary-loading{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.ai-summary-loading::before{
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid var(--muted);
  border-top-color: var(--accent, #fa9467);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin{
  to{ transform: rotate(360deg); }
}
html[data-theme="light"] .ai-summary-popup{
  background: #fff;
  border-color: rgba(250,148,103,.18);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.chat-item{
  position: relative;
}

/* ── AI Context Panel (chat header) ── */
.ai-context-panel{
  background: var(--panel, #262626);
  border-bottom: none;
  display: flex;
  flex-direction: column;
  height: var(--ai-panel-height, 30vh);
  min-height: 100px;
  max-height: 70vh;
  animation: ai-panel-slide 0.3s ease-out;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  position: absolute;
  top: var(--chat-header-height, 74px);
  left: 0;
  right: 0;
  z-index: 19;
}
.ai-context-panel.is-hidden{
  display: none;
}
/* Hide floating date badge when context panel is open */
.ai-context-panel:not(.is-hidden) ~ .chat-scroll-date-badge,
.ai-context-panel:not(.is-hidden) ~ section .msg-date-separator{
  opacity: 0 !important;
  pointer-events: none;
}
@keyframes ai-panel-slide{
  from{ height:0; opacity:0; }
  to{ height: var(--ai-panel-height, 30vh); opacity:1; }
}
/* ── AI Context Resize Handle ── */
.ai-context-resize{
  flex-shrink: 0;
  height: 12px;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.ai-context-resize::after{
  content: "";
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent, #fa9467);
  opacity: 0.5;
  transition: opacity .15s ease, width .15s ease;
}
.ai-context-resize:hover::after,
.ai-context-resize.dragging::after{
  opacity: 0.9;
  width: 56px;
}
.ai-context-resize.dragging{
  background: rgba(250,148,103,.06);
}
.ai-context-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
  flex-shrink: 0;
}
.ai-context-header-right{
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-context-title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent, #fa9467);
  letter-spacing: 0.02em;
}
.ai-context-title svg{
  width: 16px;
  height: 16px;
}
.ai-context-content{
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.ai-context-text-wrap{
  overflow-y: auto;
  padding: 12px 16px;
  flex: 1;
  min-height: 0;
}
.ai-context-text{
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-context-close{
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  font-size: 18px;
  border: none;
  background: var(--surface-2, rgba(255,255,255,.05));
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
}
.ai-context-close:hover{
  background: var(--surface-3, rgba(255,255,255,.08));
  color: var(--text);
}
.ai-context-loading{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.ai-context-loading::before{
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid var(--muted);
  border-top-color: var(--accent, #fa9467);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
/* ── AI Context Ask Toggle Button (in header) ── */
.ai-context-ask-toggle{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid var(--ui-accent-border, rgba(250,148,103,.26));
  background: transparent;
  color: var(--accent, #fa9467);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.ai-context-ask-toggle:hover{
  background: var(--ui-accent-soft, rgba(250,148,103,.16));
}
.ai-context-ask-toggle.active{
  background: var(--ui-accent-soft, rgba(250,148,103,.16));
  border-color: var(--accent, #fa9467);
}

/* ── AI Context Q&A Thread ── */
.ai-context-qa-thread{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border, rgba(255,255,255,.08));
}
.ai-context-qa-thread:empty,
.ai-context-qa-thread.is-hidden{
  display: none;
}

/* ── AI Context Ask Input (pinned above resize handle) ── */
.ai-context-ask{
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  padding: 8px 16px;
  border-top: 1px solid var(--border, rgba(255,255,255,.08));
}
.ai-context-ask.is-hidden{
  display: none;
}
.ai-context-ask-input{
  flex: 1;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(255,255,255,.08));
  background: var(--surface-2, rgba(255,255,255,.05));
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color .15s ease;
}
.ai-context-ask-input:focus{
  border-color: var(--accent, #fa9467);
}
.ai-context-ask-input::placeholder{
  color: var(--muted);
}
.ai-context-ask-btn{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, var(--accent, #fa9467), var(--accent2, #e07a4a));
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .15s ease;
}
.ai-context-ask-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(250,148,103,.3);
}
.ai-context-ask-btn:disabled{
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}
.ai-context-ask-btn svg{
  width: 16px;
  height: 16px;
}
.ai-context-answer{
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--surface-2, rgba(255,255,255,.05));
  border-radius: 12px;
  border-left: 3px solid var(--accent, #fa9467);
}
.ai-context-q{
  font-size: 13px;
  color: var(--accent, #fa9467);
  margin-bottom: 8px;
}
.ai-context-a{
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
}
html[data-theme="light"] .ai-context-ask-input{
  background: rgba(17,17,17,.03);
  border-color: rgba(17,17,17,.08);
}
html[data-theme="light"] .ai-context-answer{
  background: rgba(250,148,103,.04);
}

html[data-theme="light"] .ai-context-panel{
  background: #fff;
  border-bottom-color: rgba(250,148,103,.15);
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
}

/* ── AI Bulk Actions Dialog ── */
.ai-bulk-actions{
  margin: 12px 0;
  padding: 18px 20px;
  background: var(--surface-1, rgba(255,255,255,.035));
  border: 1px solid var(--ui-accent-border, rgba(250,148,103,.26));
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.ai-bulk-header{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.ai-bulk-header svg{
  width: 22px;
  height: 22px;
  color: var(--accent, #fa9467);
  flex-shrink: 0;
}
.ai-bulk-title{
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.ai-bulk-subtitle{
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}
.ai-bulk-list{
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  max-height: 220px;
  overflow-y: auto;
  border-radius: 12px;
  background: var(--surface-2, rgba(255,255,255,.05));
}
.ai-bulk-item{
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
  font-size: 13px;
  transition: background .15s ease;
}
.ai-bulk-item:last-child{
  border-bottom: none;
}
.ai-bulk-item:hover{
  background: var(--surface-3, rgba(255,255,255,.06));
}
.ai-bulk-chat-name{
  font-weight: 700;
  color: var(--accent, #fa9467);
  font-size: 12px;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}
.ai-bulk-msg-text{
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.4;
  padding-left: 10px;
  border-left: 2px solid var(--accent, #fa9467);
  opacity: .85;
}
.ai-bulk-btns{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ai-bulk-btns .ai-btn{
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all .15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-bulk-btns .ai-btn-send{
  background: linear-gradient(135deg, var(--accent, #fa9467), var(--accent2, #e07a4a));
  color: #fff;
  box-shadow: 0 4px 12px rgba(250,148,103,.3);
}
.ai-bulk-btns .ai-btn-send:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(250,148,103,.4);
}
.ai-bulk-btns .ai-btn-always{
  background: var(--surface-2, rgba(255,255,255,.05));
  color: var(--accent, #fa9467);
  border: 1px solid var(--ui-accent-border, rgba(250,148,103,.26)) !important;
}
.ai-bulk-btns .ai-btn-always:hover{
  background: var(--ui-accent-soft, rgba(250,148,103,.16));
}
.ai-bulk-btns .ai-btn-cancel{
  background: var(--surface-2, rgba(255,255,255,.05));
  color: var(--muted);
  border: 1px solid var(--border) !important;
}
.ai-bulk-btns .ai-btn-cancel:hover{
  background: var(--surface-3, rgba(255,255,255,.08));
  color: var(--text);
}
html[data-theme="light"] .ai-bulk-actions{
  background: rgba(255,255,255,.95);
  border-color: rgba(250,148,103,.2);
  box-shadow: 0 8px 24px rgba(17,17,17,.06);
}
html[data-theme="light"] .ai-bulk-list{
  background: rgba(17,17,17,.025);
}
html[data-theme="light"] .ai-bulk-item:hover{
  background: rgba(17,17,17,.04);
}

/* ── Proactive Notification Cards ─────────────────────────── */
.proactive-section{
  padding: 8px 12px 16px;
}
.proactive-section-label{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  margin-bottom: 10px;
  padding: 0 4px;
  color: var(--muted);
}

/* ── Chat Thread Tab Bar ───────────────────────────────── */
.thread-tab-bar{
  position: absolute;
  top: var(--chat-header-height, 74px);
  left: 0;
  right: 0;
  z-index: 17;
  /* browser-tab style */
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-bottom: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  height: 42px;
  flex-shrink: 0;
  overflow: hidden;
}
.thread-tab-bar.is-hidden{
  display: none;
}
.thread-tab-bar:not(.is-hidden) ~ .messages,
.thread-tab-bar:not(.is-hidden) ~ * .messages{
  padding-top: calc(var(--chat-header-height) + 42px + 14px) !important;
}
.thread-tabs-scroll{
  display: flex;
  overflow-x: auto;
  border-top: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 4px;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 0 6px 6px;
  align-items: flex-start;
}
.thread-tabs-scroll::-webkit-scrollbar{ display: none; }
.thread-tab{
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 16px;
  border-radius: 0 0 10px 10px;
  white-space: nowrap;
  cursor: pointer;
  font-size: 13px;
  font-weight: 560;
  background: rgba(255,255,255,.06);
  border: 1px solid transparent;
  color: var(--muted, rgba(255,255,255,.5));
  scroll-snap-align: start;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.thread-tab:hover{
  background: rgba(255,255,255,.12);
  color: var(--text, rgba(255,255,255,.9));
}
.thread-tab:active{
  transform: scale(.98);
}
.thread-tab.is-active{
  background: var(--bg, #1e1e1e);
  color: var(--text);
  border-color: var(--border);
  border-top-color: transparent;
  box-shadow: none;
  position: relative;
  margin-top: -1px;
  z-index: 1;
}
.thread-tab-icon{
  font-size: 14px;
}
.thread-tab-title{
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thread-unread-badge{
  display: none;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 8px;
  background: var(--accent, #fa9467);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  padding: 0 4px;
}
.thread-unread-badge.has-unread{
  display: inline-block;
}
.thread-tab.is-active .thread-unread-badge{
  display: none;
}
.thread-add-btn{
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 0 0 8px 8px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  color: var(--muted, rgba(255,255,255,.5));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  margin-top: -1px;
}
.thread-add-btn:hover{
  border-color: var(--accent, #fa9467);
  color: var(--accent, #fa9467);
}
.thread-add-btn:active{
  transform: scale(.92);
}
.thread-create-hint{
  background: rgba(250,148,103,.1) !important;
  color: var(--accent, #fa9467) !important;
  border: 1px dashed rgba(250,148,103,.35) !important;
  font-weight: 600;
  padding: 5px 16px;
}
.thread-create-hint:hover{
  background: rgba(250,148,103,.18) !important;
}
html[data-theme="light"] .thread-create-hint{
  background: rgba(250,148,103,.08) !important;
  border-color: rgba(250,148,103,.3) !important;
}
.thread-ai-hint{
  background: rgba(99,102,241,.1) !important;
  color: rgba(129,140,248,.95) !important;
  border: 1px dashed rgba(99,102,241,.35) !important;
  font-weight: 600;
  padding: 5px 16px;
}
.thread-ai-hint:hover{
  background: rgba(99,102,241,.2) !important;
}
.thread-tab-ai.is-active{
  background: var(--bg, #1e1e1e) !important;
  color: #6366f1 !important;
  border-color: var(--border) !important;
  border-top-color: transparent !important;
  box-shadow: none;
}
html[data-theme="light"] .thread-ai-hint{
  background: rgba(99,102,241,.06) !important;
  color: rgba(79,70,229,.85) !important;
  border-color: rgba(99,102,241,.25) !important;
}
html[data-theme="light"] .thread-tab-ai.is-active{
  color: #fff !important;
}
html[data-theme="light"] .thread-tab-bar{
  background: transparent;
}
html[data-theme="light"] .thread-tab{
  background: rgba(15,23,42,.04);
  color: rgba(15,23,42,.55);
  border-color: transparent;
}
html[data-theme="light"] .thread-tab:hover{
  background: rgba(15,23,42,.08);
  color: rgba(15,23,42,.8);
}
html[data-theme="light"] .thread-tab.is-active{
  background: #fff;
  color: var(--text);
  border-color: rgba(15,23,42,.1);
  border-top-color: transparent;
}
html[data-theme="light"] .thread-tab-ai.is-active{
  background: #fff !important;
  color: #6366f1 !important;
  border-color: rgba(15,23,42,.1) !important;
  border-top-color: transparent !important;
}
html[data-theme="light"] .thread-add-btn{
  color: rgba(15,23,42,.35);
}

@keyframes proactiveSlideIn{
  from{ opacity:0; transform:translateY(12px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.proactive-card{
  margin-bottom: 10px;
  padding: 14px 16px;
  background: var(--surface-1, rgba(255,255,255,.04));
  border: 1px solid rgba(100,180,255,.18);
  border-radius: 14px;
  transition: opacity .3s ease, transform .3s ease;
  animation: proactiveSlideIn .35s cubic-bezier(.4,0,.2,1) both;
}
.proactive-card:nth-child(2){ animation-delay: .06s; }
.proactive-card:nth-child(3){ animation-delay: .12s; }
.proactive-card:nth-child(4){ animation-delay: .18s; }
.proactive-card-done{
  opacity: .5;
  pointer-events: none;
  transform: scale(.98);
}
.proactive-card-header{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.proactive-card-icon{
  font-size: 18px;
  flex-shrink: 0;
}
.proactive-card-title{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}
.proactive-card-source{
  font-size: 11px;
  flex-shrink: 0;
}
.proactive-card-body{
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  opacity: .88;
  margin-bottom: 10px;
  white-space: pre-wrap;
  word-break: break-word;
}
.proactive-card-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.proactive-action-btn{
  padding: 6px 16px;
  border-radius: 10px;
  border: 1px solid rgba(100,180,255,.22);
  background: rgba(100,180,255,.1);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.proactive-action-btn:hover{
  background: rgba(100,180,255,.2);
  box-shadow: 0 2px 8px rgba(100,180,255,.15);
}
.proactive-action-btn:active{
  transform: scale(.96);
}
.proactive-action-btn.ghost{
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
}
.proactive-action-btn.ghost:hover{
  background: rgba(255,255,255,.05);
}
.proactive-action-btn:disabled{
  opacity: .5;
  cursor: default;
}
.proactive-card-status{
  font-size: 12px;
}
html[data-theme="light"] .proactive-card{
  background: rgba(245,248,255,.95);
  border-color: rgba(60,120,200,.14);
}
html[data-theme="light"] .proactive-action-btn{
  background: rgba(60,120,200,.08);
  border-color: rgba(60,120,200,.16);
  color: #1a1a1a;
}
html[data-theme="light"] .proactive-action-btn:hover{
  background: rgba(60,120,200,.16);
}
html[data-theme="light"] .proactive-action-btn.ghost{
  background: transparent;
  border-color: rgba(0,0,0,.1);
  color: rgba(0,0,0,.5);
}

/* Light theme: incoming message bubbles — light bg, dark text */
html[data-theme="light"] .msg-row:not(.me) .msg-bubble:not(.msg-bubble-voice-note):not(.msg-bubble-round-video){
  background: rgba(0,0,0,.04);
  color: #1a1a1a;
}
html[data-theme="light"] .ai-msg-row:not(.me) .ai-bubble{
  color: #1a1a1a;
}

/* Light theme: outgoing message bubbles — peach gradient, white text */
html[data-theme="light"] .msg-row.me .msg-bubble:not(.msg-bubble-voice-note):not(.msg-bubble-round-video){
  background: linear-gradient(135deg, rgba(250,148,103,.85), rgba(224,122,74,.92));
  border: none;
  color: #ffffff;
}
html[data-theme="light"] .msg-row.me .msg-text,
html[data-theme="light"] .msg-row.me .msg-text a{
  color: #ffffff;
}
html[data-theme="light"] .msg-row.me .msg-meta,
html[data-theme="light"] .msg-row.me .msg-text-inline-meta .msg-meta-inline{
  color: rgba(255,255,255,.7);
}


/* ── Social invite banner ────────────────────────────────────────── */
.social-invite-banner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  margin: 6px 10px;
  background: var(--bubble-bg, rgba(255,255,255,.06));
  border: 1px solid var(--accent, #e07a4a);
  border-radius: 12px;
  font-size: 13px;
  flex-shrink: 0;
}
.social-invite-banner-text{
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.social-invite-icon{
  font-size: 16px;
  flex-shrink: 0;
}
.social-invite-banner-actions{
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.social-invite-btn{
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 8px;
  cursor: pointer;
  border: none;
}
.social-invite-btn.btn-primary{
  background: var(--accent, #e07a4a);
  color: #fff;
}
.social-invite-btn.btn-ghost{
  background: transparent;
  color: var(--text-secondary, rgba(255,255,255,.5));
  border: 1px solid var(--border, rgba(255,255,255,.12));
}

/* ── Social toggles in profile ───────────────────────────────────── */
.profile-social-card{
  padding: 14px 16px;
}
.profile-social-rows{
  display: flex;
  flex-direction: column;
  gap: 0;
}
.social-toggle-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.06));
}
.social-toggle-row:last-child{
  border-bottom: none;
}
.social-toggle-icon{
  font-size: 20px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.social-toggle-info{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.social-toggle-name{
  font-size: 14px;
  font-weight: 500;
}
.social-toggle-status{
  font-size: 12px;
  color: var(--text-secondary, rgba(255,255,255,.45));
}
.social-toggle-status.enabled{
  color: #4caf7d;
}
.social-toggle-status.pending{
  color: var(--accent, #e07a4a);
}
/* iOS-style toggle */
.social-toggle-label{
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.social-toggle-input{
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.social-toggle-slider{
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: var(--border, rgba(255,255,255,.18));
  transition: background .2s;
  cursor: pointer;
}
.social-toggle-slider::before{
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
}
.social-toggle-input:checked + .social-toggle-slider{
  background: var(--accent, #e07a4a);
}
.social-toggle-input:checked + .social-toggle-slider::before{
  transform: translateX(20px);
}

/* ── Social invite in-chat card ────────────────────────────────── */
.social-invite-chat-card{
  display: flex;
  justify-content: flex-start;
  padding: 4px 12px;
}
.social-invite-msg-card{
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 14px 16px;
  background: var(--surface-3, rgba(255,255,255,.08));
  border: 1px solid var(--border);
  border-radius: 18px;
  font-size: 13.5px;
  max-width: 340px;
  min-width: 240px;
}
.social-invite-msg-header{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  margin-bottom: 4px;
}
.social-invite-msg-emoji{
  font-size: 18px;
  flex-shrink: 0;
}
.social-invite-msg-text{
  line-height: 1.3;
  color: var(--text);
}
.social-invite-msg-subtitle{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}
.social-invite-msg-actions{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.social-invite-btn{
  padding: 10px 16px;
  border-radius: 10px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, opacity .15s;
  font-family: inherit;
  text-align: center;
}
.social-invite-btn:disabled{
  opacity: .5;
  cursor: default;
}
.social-invite-btn.btn-accept{
  background: rgba(76,175,80,.2);
  color: #4caf50;
}
.social-invite-btn.btn-accept:hover:not(:disabled){
  background: rgba(76,175,80,.3);
}
.social-invite-btn.btn-decline{
  background: var(--surface-2, rgba(255,255,255,.05));
  color: var(--muted);
}
.social-invite-btn.btn-decline:hover:not(:disabled){
  background: var(--surface-3, rgba(255,255,255,.08));
}
.social-invite-msg-status{
  font-size: 12.5px;
  padding: 8px 0 0;
}
.social-invite-msg-waiting{
  color: var(--muted);
  font-style: italic;
}
.social-invite-msg-accepted{
  color: #4caf7d;
  font-weight: 600;
}
.social-invite-msg-declined{
  color: var(--muted);
  text-decoration: line-through;
}

/* ── Settings detail header (mobile back button) ─────────────────── */
.settings-detail-header{
  display: none;
  align-items: center;
  gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--panel2);
}
.settings-detail-back{
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--accent, #fa9467);
  cursor: pointer;
  font-size: 15px;
  font-weight: 640;
  padding: 4px 0;
  -webkit-tap-highlight-color: transparent;
}
.settings-detail-back img{
  width: 20px;
  height: 20px;
  opacity: .7;
}

/* ── Settings panel: single-column layout on narrow screens ─────── */
@media (max-width: 640px){
  .settings-panel{
    overflow: hidden;
  }
  .settings-categories-col{
    position: absolute;
    inset: 0;
    width: 100%;
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 1;
  }
  .settings-detail-col{
    position: absolute;
    inset: 0;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 2;
  }
  .settings-detail-header{
    display: flex;
  }
  .settings-panel.is-detail-view .settings-categories-col{
    transform: translateX(-100%);
    pointer-events: none;
  }
  .settings-panel.is-detail-view .settings-detail-col{
    transform: translateX(0);
  }
}

/* ── Light theme: fix all hardcoded white text ─────────────────────── */
html[data-theme="light"] .profile-self-note-action,
html[data-theme="light"] .profile-self-split-label,
html[data-theme="light"] .profile-self-row-btn,
html[data-theme="light"] .profile-self-row-label,
html[data-theme="light"] .profile-self-row-btn.is-static .profile-self-row-value,
html[data-theme="light"] .profile-panel.is-self-view textarea.profile-self-input,
html[data-theme="light"] .profile-panel.is-user-view .profile-panel-title,
html[data-theme="light"] .profile-panel.is-user-view #profilePanelClose::after,
html[data-theme="light"] .profile-tab:hover,
html[data-theme="light"] .profile-tab.is-active,
html[data-theme="light"] .profile-media-card-placeholder,
html[data-theme="light"] .profile-media-card-date,
html[data-theme="light"] .profile-media-card-action,
html[data-theme="light"] .profile-media-empty-title,
html[data-theme="light"] .profile-user-name,
html[data-theme="light"] .profile-user-action,
html[data-theme="light"] .profile-panel.is-user-view .profile-contact-editor-themed textarea.profile-self-input,
html[data-theme="light"] .profile-contact-editor-row-btn,
html[data-theme="light"] .profile-user-line-value,
html[data-theme="light"] .profile-user-hover-card-text,
html[data-theme="light"] .profile-user-line-copy,
html[data-theme="light"] .profile-panel.is-user-view .profile-tab.is-active,
html[data-theme="light"] .profile-media-viewer-close,
html[data-theme="light"] .profile-media-viewer-error-title,
html[data-theme="light"] .profile-panel.is-user-view .profile-user-action-label,
html[data-theme="light"] .profile-panel.is-user-view .profile-user-line-copy,
html[data-theme="light"] .chat-date-picker-day.is-selected{
  color: var(--text);
}

html[data-theme="light"] .profile-self-input-prefix,
html[data-theme="light"] .profile-self-note,
html[data-theme="light"] .profile-self-note-status.is-muted,
html[data-theme="light"] .profile-username-suggestions-label,
html[data-theme="light"] .profile-self-row-value,
html[data-theme="light"] .profile-panel.is-self-view input.profile-self-inline-input,
html[data-theme="light"] .profile-panel.is-self-view .btn.ghost,
html[data-theme="light"] .profile-tab,
html[data-theme="light"] .profile-media-empty-text,
html[data-theme="light"] .profile-user-status,
html[data-theme="light"] .profile-contact-editor-handle,
html[data-theme="light"] .profile-user-line-label,
html[data-theme="light"] .profile-user-hover-card-title,
html[data-theme="light"] .profile-user-hover-card-meta,
html[data-theme="light"] .profile-panel.is-user-view .profile-tab,
html[data-theme="light"] .profile-media-viewer-error,
html[data-theme="light"] .profile-panel.is-user-view .profile-user-hover-card-meta,
html[data-theme="light"] .social-toggle-status,
html[data-theme="light"] .social-invite-msg-waiting{
  color: var(--muted);
}

html[data-theme="light"] .profile-panel.is-self-view .profile-panel-title,
html[data-theme="light"] .profile-panel.is-self-view #profilePanelClose::after,
html[data-theme="light"] .profile-username-suggestions-hint,
html[data-theme="light"] .profile-self-row-value.is-placeholder,
html[data-theme="light"] .profile-self-row-arrow,
html[data-theme="light"] .profile-self-input::placeholder,
html[data-theme="light"] .profile-media-card-error,
html[data-theme="light"] .profile-contact-editor-themed .profile-self-input::placeholder{
  color: rgba(17,17,17,.42);
}

/* ── Mail Module ───────────────────────────────────────────────── */
.mail-list{
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
.mail-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 10px;
  flex-shrink: 0;
}
.mail-title{
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.mail-actions{
  display: flex;
  gap: 8px;
}
.mail-compose-btn, .mail-sync-btn{
  padding: 6px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.mail-compose-btn:hover, .mail-sync-btn:hover{
  background: var(--surface-3);
}
.mail-item{
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
}
.mail-item:hover{ background: var(--surface-2); }
.mail-item.is-unread{ background: var(--surface-1); }
.mail-item.is-unread .mail-item-name{ font-weight: 700; }
.mail-item.is-unread .mail-item-subject{ font-weight: 600; color: var(--text); }
.mail-item-from{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.mail-item-name{
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-item-date{
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
  margin-left: 8px;
}
.mail-item-subject{
  font-size: 13px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2px;
}
.mail-item-snippet{
  font-size: 12px;
  color: var(--muted);
  opacity: .7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  gap: 8px;
}
.mail-empty div:first-child{ font-size: 48px; }
.mail-setup{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  gap: 12px;
  text-align: center;
}
.mail-setup-icon{ font-size: 56px; }
.mail-setup h3{ margin: 0; color: var(--text); }
.mail-setup-desc{ color: var(--muted); font-size: 13px; max-width: 280px; }
.mail-setup-btn{
  width: 100%;
  max-width: 260px;
  padding: 12px;
  border-radius: 14px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.mail-setup-btn.gmail{ background: #4285F4; color: #fff; }
.mail-setup-btn.gmail:hover{ background: #3367D6; }
.mail-setup-btn.outlook{ background: #0078D4; color: #fff; }
.mail-setup-btn.outlook:hover{ background: #005A9E; }
.mail-setup-btn.generic{ background: var(--surface-3); color: var(--text); }
.mail-setup-btn.generic:hover{ background: var(--surface-4); }
.mail-setup-btn-back{
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
.mail-input{
  width: 100%;
  max-width: 300px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.mail-input:focus{ border-color: var(--accent); }
.mail-textarea{
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  min-height: 150px;
}
/* Mail message view */
.mail-message-view{
  padding: 20px;
  overflow-y: auto;
  height: 100%;
}
.mail-msg-back{
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  padding: 0;
  margin-bottom: 16px;
}
.mail-msg-subject{
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.mail-msg-meta{
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 4px;
}
.mail-msg-to{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 16px;
}
.mail-msg-body{
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  min-height: 100px;
}
.mail-body-iframe{
  width: 100%;
  border: none;
  min-height: 200px;
  border-radius: 8px;
}
.mail-msg-actions{
  margin-top: 20px;
  display: flex;
  gap: 8px;
}
.mail-action-btn{
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
/* Compose modal */
.mail-compose-overlay{
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mail-compose-modal{
  background: var(--panel);
  border-radius: 20px;
  padding: 24px;
  width: min(480px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.mail-compose-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mail-compose-header h3{ margin: 0; color: var(--text); }
.mail-compose-close{
  background: none;
  border: none;
  color: var(--muted);
  font-size: 24px;
  cursor: pointer;
}
.mail-compose-actions{ display: flex; justify-content: flex-end; }
.mail-send-btn{
  padding: 10px 24px;
  border-radius: 12px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.mail-send-btn:hover{ opacity: .9; }

/* Mail contact-based view */
.mail-contact-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
}
.mail-contact-item:hover{ background: var(--surface-2); }
.mail-contact-item.is-active{ background: var(--surface-3); }
.mail-contact-item.is-unread .mail-contact-name{ font-weight: 700; }
.mail-contact-item.is-unread .mail-contact-subject{ color: var(--text); font-weight: 600; }
.mail-contact-avatar{
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 16px; font-weight: 700; color: #fff;
}
.mail-contact-meta{
  flex: 1; min-width: 0;
}
.mail-contact-top{
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 3px;
}
.mail-contact-name{
  font-size: 14px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-contact-date{
  font-size: 11px; color: var(--muted); flex-shrink: 0; margin-left: 8px;
}
.mail-contact-bottom{
  display: flex; justify-content: space-between; align-items: center;
}
.mail-contact-subject{
  font-size: 12.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}
.mail-contact-badge{
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 10px;
  margin-left: 8px; flex-shrink: 0;
}

/* Mail thread view */
.mail-thread-view{
  display: flex; flex-direction: column;
  align-items: center;
  height: 100%; overflow-y: auto;
  padding: 0;
}
.mail-thread-header{
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}
.mail-thread-contact-name{
  font-size: 16px; font-weight: 700; color: var(--text);
}
.mail-thread-contact-email{
  font-size: 12px; color: var(--muted); flex: 1;
}
.mail-thread-loading{
  padding: 40px; text-align: center; color: var(--muted);
}
.mail-thread-messages{
  flex: 1; overflow-y: auto; padding: 12px 20px;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}
.mail-thread-message{
  padding: 12px 16px;
  border-radius: 14px;
  cursor: pointer;
  transition: background .15s;
  max-width: 85%;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.mail-thread-message:hover{ background: var(--surface-3); }
.mail-thread-message.is-me{
  align-self: flex-end;
  background: var(--bubble-out-bg);
  border-color: var(--bubble-out-border);
}
.mail-thread-msg-header{
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
.mail-thread-msg-from{
  font-size: 12px; font-weight: 600; color: var(--text);
}
.mail-thread-msg-date{
  font-size: 11px; color: var(--muted);
}
.mail-thread-msg-subject{
  font-size: 13px; font-weight: 500; color: var(--text);
  margin-bottom: 2px;
}
.mail-thread-msg-snippet{
  font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* ── Voice message clean style (override all glass effects) ── */
.msg-audio-card,
.msg-audio-card.voice-deep,
.msg-audio-card.voice-balanced,
.msg-audio-card.voice-bright {
  background: linear-gradient(135deg, rgba(200,200,200,.08), rgba(160,160,160,.04)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: 1px solid var(--border) !important;
}
.msg-audio-card::before {
  display: none !important;
}
.msg-row.me .msg-audio-card,
.msg-row.me .msg-audio-card.voice-deep,
.msg-row.me .msg-audio-card.voice-balanced,
.msg-row.me .msg-audio-card.voice-bright {
  background: linear-gradient(135deg, rgba(250,148,103,.08), rgba(200,160,140,.04)) !important;
}
html[data-theme="light"] .msg-audio-card,
html[data-theme="light"] .msg-audio-card.voice-deep,
html[data-theme="light"] .msg-audio-card.voice-balanced,
html[data-theme="light"] .msg-audio-card.voice-bright {
  background: linear-gradient(135deg, rgba(230,235,245,.5), rgba(240,242,248,.3)) !important;
  box-shadow: none !important;
  border-color: rgba(0,0,0,.08) !important;
}
html[data-theme="light"] .msg-row.me .msg-audio-card {
  background: linear-gradient(135deg, rgba(250,200,170,.2), rgba(255,235,220,.15)) !important;
}
/* Waveform more visible */
.msg-audio-card {
  --voice-wave-base: rgba(150,160,180,.5) !important;
  --voice-wave-active: var(--accent) !important;
}
html[data-theme="light"] .msg-audio-card {
  --voice-wave-base: rgba(80,100,130,.3) !important;
  --voice-wave-active: var(--accent) !important;
}

/* ── Panel resize handles ── */
.panel-resize-handle{
  width: 4px;
  cursor: col-resize;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  background: transparent;
  transition: background .15s;
}
.panel-resize-handle:hover,
.panel-resize-handle.is-dragging{
  background: var(--accent);
  opacity: .5;
}
.panel-resize-handle::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -4px; right: -4px;
}
body.is-panel-resizing{
  cursor: col-resize !important;
  user-select: none !important;
}
body.is-panel-resizing *{
  cursor: col-resize !important;
  user-select: none !important;
  pointer-events: none !important;
}
body.is-panel-resizing .panel-resize-handle{
  pointer-events: auto !important;
}

/* ── AI Calendar View — 3-column layout ── */
.ai-calendar-view{
  flex: 1;
  min-height: 0;
  background: var(--bg);
  display: flex;
  overflow: hidden;
}
.ai-cal-left{
  width: 300px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.ai-cal-center{
  flex: 1; overflow-y: auto; padding: 14px 20px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.ai-cal-right{
  width: 300px; flex-shrink: 0;
  border-left: 1px solid var(--border);
  overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.ai-cal-right.is-empty{
  align-items: center; justify-content: center; color: var(--muted); font-size: 13px;
}
@media(max-width:900px){
  .ai-calendar-view{flex-direction:column;}
  .ai-cal-left{width:100%;border-right:none;border-bottom:1px solid var(--border);max-height:320px;}
  .ai-cal-right{width:100%;border-left:none;border-top:1px solid var(--border);}
}
.ai-cal-header{
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-cal-title{
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  text-align: center;
}
.ai-cal-nav{
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.ai-cal-nav:hover{ background: var(--faint); }
.ai-cal-days{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.ai-cal-day-name{
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 4px 0;
}
.ai-cal-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.ai-cal-cell{
  aspect-ratio: 1;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: default;
  transition: background .15s;
  position: relative;
}
.ai-cal-cell.has-events{ cursor: pointer; }
.ai-cal-cell.has-events:hover{ background: var(--faint); }
.ai-cal-cell.today .ai-cal-num{
  background: var(--accent);
  color: white;
  border-radius: 50%;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.ai-cal-num{
  font-size: 13px;
  color: var(--text);
}
.ai-cal-cell.empty{ opacity: 0; }
.ai-cal-dots{
  display: flex;
  gap: 3px;
}
.ai-cal-dot{
  width: 5px; height: 5px;
  border-radius: 50%;
}
.ai-cal-event-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ai-cal-section-title{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  padding: 8px 0 4px;
}
.ai-cal-event-card{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-1);
  border-left: 3px solid var(--accent);
  transition: background .15s;
}
.ai-cal-event-card:hover{ background: var(--surface-2); }
.ai-cal-event-icon{ font-size: 18px; flex-shrink: 0; }
.ai-cal-event-body{ flex: 1; min-width: 0; }
.ai-cal-event-title{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.ai-cal-event-desc{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-cal-event-time{
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}
.ai-cal-empty{
  text-align: center;
  color: var(--muted);
  padding: 40px 0;
  font-size: 13px;
}

/* ── Calendar additions ── */
.ai-cal-add-btn{
  margin-left: auto;
  padding: 6px 14px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ai-cal-add-btn:hover{ background: var(--ui-accent-soft); }
.ai-cal-cell.selected{ background: var(--ui-accent-soft); border-radius: 10px; }
.ai-cal-day-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}
.ai-cal-add-day-btn{
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.ai-cal-add-day-btn:hover{ background: var(--faint); }
.ai-cal-empty-day{
  text-align: center;
  color: var(--muted);
  padding: 16px 0;
  font-size: 13px;
}
.ai-cal-event-card.is-done{
  opacity: .5;
}
.ai-cal-event-card.is-done .ai-cal-event-title{
  text-decoration: line-through;
}
.ai-cal-event-edit{
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .15s;
}
.ai-cal-event-card:hover .ai-cal-event-edit{ opacity: 1; }

/* Calendar modal */
.ai-cal-modal{ display: flex; flex-direction: column; gap: 12px; }
.ai-cal-modal-field{ display: flex; flex-direction: column; gap: 4px; }
.ai-cal-modal-field label{ font-size: 12px; font-weight: 600; color: var(--muted); }
.ai-cal-modal-row{ flex-direction: row; align-items: center; gap: 8px; }
.ai-cal-input{
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.ai-cal-textarea{ resize: vertical; min-height: 40px; }
.ai-cal-colors{ display: flex; gap: 8px; }
.ai-cal-color-swatch{
  width: 24px; height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .15s, transform .1s;
}
.ai-cal-color-swatch:hover{ transform: scale(1.15); }
.ai-cal-color-swatch.is-active{ border-color: var(--text); }
.ai-cal-status{ font-size: 12px; color: var(--danger); min-height: 16px; }
.ai-cal-modal-actions{ display: flex; gap: 8px; margin-top: 4px; }

/* ── Calendar timeline (Apple-style) ── */
.ai-cal-day-header{
  display: flex; align-items: center; gap: 12px; padding: 8px 0;
}
.ai-cal-day-big-num{
  font-size: 36px; font-weight: 700; color: var(--accent); line-height: 1;
}
.ai-cal-day-info{ display: flex; flex-direction: column; }
.ai-cal-day-weekday{ font-size: 14px; font-weight: 600; color: var(--text); }
.ai-cal-day-monthyear{ font-size: 12px; color: var(--muted); }
.ai-cal-allday-bar{
  padding: 6px 12px; border-radius: 6px; color: white; font-size: 13px;
  font-weight: 500; cursor: pointer; margin-bottom: 4px;
}
.ai-cal-timeline{
  flex: 1; overflow-y: auto;
}
.ai-cal-hour-row{
  display: flex; min-height: 40px;
  border-top: 1px solid var(--border);
}
.ai-cal-hour-label{
  width: 50px; flex-shrink: 0; font-size: 11px; color: var(--muted);
  padding: 4px 8px 0 0; text-align: right;
}
.ai-cal-hour-slot{
  flex: 1; min-height: 40px; position: relative; padding: 2px 4px;
}
.ai-cal-hour-event{
  padding: 4px 8px; border-radius: 6px; margin-bottom: 2px;
  background: var(--surface-2); border-left: 3px solid var(--accent);
  cursor: pointer; transition: background .15s;
  display: flex; align-items: center; gap: 6px;
}
.ai-cal-hour-event:hover{ background: var(--surface-3); }
.ai-cal-hour-ev-title{ font-size: 12px; font-weight: 500; color: var(--text); }
.ai-cal-hour-ev-time{ font-size: 10px; color: var(--muted); }

/* ── Right panel suggestions ── */
.ai-cal-suggestions{
  display: flex; flex-direction: column; gap: 8px;
}
.ai-cal-suggestion{
  padding: 10px; border-radius: 10px;
  background: var(--surface-1); border: 1px solid var(--border);
}
.ai-cal-sug-title{
  font-size: 13px; font-weight: 600; color: var(--text);
}
.ai-cal-sug-body{
  font-size: 12px; color: var(--muted); margin-top: 2px;
}
.ai-cal-sug-actions{
  display: flex; gap: 6px; margin-top: 6px;
}
.ai-cal-sug-btn{
  padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--accent); font-size: 11px;
  cursor: pointer; font-weight: 500;
}
.ai-cal-sug-btn:hover{ background: var(--faint); }
.ai-cal-sug-btn.muted{ color: var(--muted); }