:root{
  color-scheme: light;
}

html[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0f1115;
  --card:#141922;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.12);
  --pri:#60a5fa;
  --pri2:rgba(96,165,250,.15);
  --ok:#22c55e;
  --danger:#ef4444;
  --dangerbg:rgba(239,68,68,.15);
  --wave-voice:#3c5779;
  --wave-voice-progress:#2563eb;
  --wave-audio:#3c5779;
  --wave-audio-progress:#2563eb;
  --wave-bar:#3c5779;
  --wave-bar-progress:#1d4ed8;
}

html.theme-anim *{
  transition:background-color .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease,fill .22s ease;
}

#theme-toggle{order:1}

html[data-theme="dark"] body{background:var(--bg);color:var(--text)}
html[data-theme="dark"] a{
  color:inherit;
  background-color: #2a405e;
}
html[data-theme="dark"] .mention-link{
  color:#cfe3ff;
  background:rgba(96,165,250,.18);
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .main-topbar,
html[data-theme="dark"] .chat-footer,
html[data-theme="dark"] .message,
html[data-theme="dark"] .message-input-wrap,
html[data-theme="dark"] .reply-bar,
html[data-theme="dark"] .voice-panel,
html[data-theme="dark"] .audio-wave,
html[data-theme="dark"] .audio-bar,
html[data-theme="dark"] .upload-menu,
html[data-theme="dark"] .menu-surface,
html[data-theme="dark"] .popup-content,
html[data-theme="dark"] .sidebar-search,
html[data-theme="dark"] .sidebar-search-results,
html[data-theme="dark"] .file-download,
html[data-theme="dark"] .input,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .mini-btn,
html[data-theme="dark"] .alert,
html[data-theme="dark"] .card{
  background:var(--card);
  color:var(--text);
  border-color:var(--line);
}

html[data-theme="dark"] .chat-box{
  background-image:none;
  background-color:var(--bg);
}

html[data-theme="dark"] .message.own{background:rgba(37,99,235,.18)}
html[data-theme="dark"] .message.other{background:var(--card)}
html[data-theme="dark"] .message.own:after{
  background-image:none;
  background-color:#13203b;
  -webkit-mask-image:url(/imgs/corner-own.svg);
  mask-image:url(/imgs/corner-own.svg);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-size:contain;
}
html[data-theme="dark"] .message.other:after{
  background-image:none;
  background-color:#141922;
  -webkit-mask-image:url(/imgs/corner2.svg);
  mask-image:url(/imgs/corner2.svg);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-size:contain;
}

html[data-theme="dark"] .message-info{color:#fff}
html[data-theme="dark"] .date-divider{
  background:rgba(255,255,255,.08);
  border-color:var(--line);
  color:var(--muted);
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
html[data-theme="dark"] .btn,
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .mini-btn{
  background:rgba(255,255,255,.04);
}
html[data-theme="dark"] .btn.primary{
  background:#234672;
  border-color:rgba(37,99,235,.35);
  color:#fff;
}
html[data-theme="dark"] .confirm-modal{
  background:rgba(0,0,0,.55);
}
html[data-theme="dark"] .media-panel{
  background:rgba(0,0,0,.55);
}
html[data-theme="dark"] .media-panel-card{
  background:var(--card);
  border-color:var(--line);
}
html[data-theme="dark"] .media-tab{
  background:rgba(255,255,255,.04);
  border-color:var(--line);
  color:var(--text);
}
html[data-theme="dark"] .media-tab.active{
  background:var(--pri2);
  color:var(--pri);
}
html[data-theme="dark"] .media-toolbar{
  background:rgba(255,255,255,.04);
  border-color:var(--line);
}
html[data-theme="dark"] .media-item{
  background:var(--card);
  border-color:var(--line);
}
html[data-theme="dark"] .media-thumb{
  background:rgba(96,165,250,.18);
  color:#e0ecff;
}
html[data-theme="dark"] .forward-modal{
  background:rgba(0,0,0,.55);
}
html[data-theme="dark"] .forward-row{
  background:rgba(255,255,255,.04);
  border-color:var(--line);
}
html[data-theme="dark"] .forward-avatar{
  background:rgba(96,165,250,.18);
  color:#e0ecff;
}

html[data-theme="dark"] .btn.danger{
  background:rgba(239,68,68,.12);
  border-color:rgba(239,68,68,.35);
  color:#fca5a5;
}

html[data-theme="dark"] .group-popup-content,
html[data-theme="dark"] .group-chip,
html[data-theme="dark"] .group-search-results,
html[data-theme="dark"] .group-member-row{
  background:var(--card);
  border-color:var(--line);
  color:var(--text);
}
html[data-theme="dark"] .group-member-avatar{
  background:rgba(96,165,250,.18);
  color:#e0ecff;
}

html[data-theme="dark"] .admin-user-card{
  background:var(--card);
  border-color:var(--line);
}
html[data-theme="dark"] .admin-user-row,
html[data-theme="dark"] .admin-user-head{
  background:var(--card);
  border-color:var(--line);
}

html[data-theme="dark"] .auth-logo,
html[data-theme="dark"] .pw-eye{
  background:var(--card);
  border-color:var(--line);
  color:var(--text);
}
html[data-theme="dark"] .profile-switch{
  background:rgba(255,255,255,.04);
  border-color:var(--line);
}
html[data-theme="dark"] .profile-avatar-row{
  background:rgba(255,255,255,.04);
  border-color:var(--line);
}
html[data-theme="dark"] .profile-avatar-preview{
  background:rgba(96,165,250,.18);
  color:#e0ecff;
}
html[data-theme="dark"] .topbar-avatar{
  background:var(--card);
  border-color:var(--line);
}
html[data-theme="dark"] .switch-ui{
  background:rgba(255,255,255,.12);
}
html[data-theme="dark"] .switch-ui::after{
  background:var(--card);
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
html[data-theme="dark"] .switch input:checked + .switch-ui{
  background:rgba(239,68,68,.35);
}

html[data-theme="dark"] .admin-select,
html[data-theme="dark"] .admin-pill-select{
  background-color:var(--card);
  color:var(--text);
  border-color:var(--line);
}
html[data-theme="dark"] .admin-pill-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c7d2fe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .admin-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c7d2fe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
html[data-theme="dark"] select.admin-select option,
html[data-theme="dark"] select.admin-pill-select option{
  background-color:#141922;
  color:var(--text);
}

html[data-theme="dark"] .audio-wave-btn{
  background:#13203b;
  border-color:rgba(255,255,255,.14);
  color:#e5e7eb;
}

html[data-theme="dark"] .icon-link.danger{
  border-color:rgb(255 0 0 / 38%);
  background:rgb(255 0 0 / 8%);
  color:#e50b0b;
}

html[data-theme="dark"] .menu-surface button.danger{color:#db0a0a}
html[data-theme="dark"] .reply-cancel{background-color:#13203b}
html[data-theme="dark"] .voice-panel-btn{background-color:#13203b}
html[data-theme="dark"] #group-create-btn{
  background:var(--card);
  border-color:var(--line);
  color:var(--text);
}

html[data-theme="dark"] .chat-row:hover{background:rgba(255,255,255,.04)}
html[data-theme="dark"] .chat-row.selected{background:rgba(96,165,250,.12)}
html[data-theme="dark"] .chat-avatar{background:rgba(96,165,250,.18);color:#e0ecff}

html[data-theme="dark"] .presence-pill,
html[data-theme="dark"] .chat-status-pill,
html[data-theme="dark"] .chat-badge{
  background:rgba(255,255,255,.05);
  border-color:var(--line2);
  color:var(--muted);
}

html[data-theme="dark"] .upload-menu button:hover,
html[data-theme="dark"] .menu-surface button:hover,
html[data-theme="dark"] .chat-row:hover{
  background:rgba(255,255,255,.05);
}

html[data-theme="dark"] .code-block{
  background:rgba(255,255,255,.05);
  border-color:var(--line);
  color:#e5e7eb;
}

html[data-theme="dark"] .search-row{border-bottom-color:var(--line)}
html[data-theme="dark"] .sidebar{border-left-color:var(--line)}
html[data-theme="dark"] .main-topbar{border-bottom-color:var(--line)}
html[data-theme="dark"] .chat-footer{border-top-color:var(--line)}
html[data-theme="dark"] .audio-wave,
html[data-theme="dark"] .audio-bar,
html[data-theme="dark"] .file-download{border-color:var(--line);background-color: transparent}
html[data-theme="dark"] .input:focus{background:rgba(96,165,250,.10)}
html[data-theme="dark"] .message-input-wrap:focus-within{background:transparent}
html[data-theme="dark"] a.linktext {background-color: transparent !important;}
html[data-theme="dark"] .scroll-down-btn {background: #13203b;color: #2563eb;}