/* WeChat — production UI system */
@font-face{font-family:Vazirmatn;src:url('../fonts/Vazirmatn-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url('../fonts/Vazirmatn-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Vazirmatn;src:url('../fonts/Vazirmatn-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Vazirmatn;src:url('../fonts/Vazirmatn-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Vazirmatn;src:url('../fonts/Vazirmatn-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
:root{
  --bg-0:#111214;--bg-1:#18191c;--bg-2:#202226;--bg-3:#292c31;--bg-4:#30343a;
  --text-0:#fff;--text-1:#e7e8ea;--text-2:#aeb2b9;--muted:#777d87;
  --primary-0:#7c5cff;--primary-1:#a18cff;--primary-hover:#6848ef;
  --danger:#ff4d5f;--warning:#f5a623;--success:#36c978;--info:#54a9ff;
  --border-soft:rgba(255,255,255,.085);--border-strong:rgba(255,255,255,.14);
  --shadow-sm:0 2px 8px rgba(0,0,0,.18);--shadow:0 16px 45px rgba(0,0,0,.28);
  --radius-sm:9px;--radius:13px;--radius-lg:20px;
  --font-fa:'Vazirmatn','Segoe UI',Tahoma,sans-serif;
}
html,body{height:100%;margin:0}
body{
  font-family:var(--font-fa);color:var(--text-1);background:
  radial-gradient(circle at 10% 0%,rgba(124,92,255,.10),transparent 34rem),
  radial-gradient(circle at 100% 100%,rgba(84,169,255,.05),transparent 32rem),
  var(--bg-0);
  min-height:100vh;line-height:1.5;
}
body,button,input,textarea,select{font-family:var(--font-fa)}
button,input,textarea,select{font-size:inherit}
button,a{ -webkit-tap-highlight-color:transparent}
a{color:var(--primary-1);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--primary-1);outline-offset:2px}
::selection{background:rgba(124,92,255,.35);color:#fff}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#3d4148;border-radius:99px}
::-webkit-scrollbar-track{background:transparent}

/* Shared */
.page-center{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:22px}
.brand .logo{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary-0),var(--primary-1));color:#fff;font-weight:800;
  box-shadow:0 8px 25px rgba(124,92,255,.28)
}
.brand h1{font-size:1.3rem;color:var(--text-0);margin:0}
.card{background:rgba(24,25,28,.94);border:1px solid var(--border-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:24px}
.card.narrow{width:100%;max-width:430px}
.card-header{margin-bottom:20px}.card-header h2{color:var(--text-0);font-size:1.15rem;margin:0 0 5px}.card-header p{color:var(--text-2);font-size:.86rem;margin:0}
.field{margin-bottom:16px}label{display:block;color:var(--text-2);font-size:.83rem;margin-bottom:7px}
.input,input[type=text],input[type=password],input[type=search],input[type=file],select,textarea{
  width:100%;background:var(--bg-2);border:1px solid var(--border-soft);color:var(--text-0);
  padding:11px 13px;border-radius:var(--radius-sm);outline:none;transition:border-color .16s,box-shadow .16s,background .16s;
}
textarea{resize:none;line-height:1.5}
.input:focus,input:focus,select:focus,textarea:focus{border-color:var(--primary-0);box-shadow:0 0 0 3px rgba(124,92,255,.16);background:var(--bg-3)}
.help-text{font-size:.76rem;color:var(--muted);margin:5px 0 0}.error-text{font-size:.8rem;color:#ff8894;margin-top:5px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;
  padding:9px 15px;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;
  color:var(--text-0);background:var(--bg-3);font-weight:600;text-decoration:none!important;
  transition:background .16s,border-color .16s,transform .06s,opacity .16s
}
.btn:hover{background:var(--bg-4)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:linear-gradient(135deg,var(--primary-0),#947dff);box-shadow:0 6px 18px rgba(124,92,255,.18)}
.btn-primary:hover{background:linear-gradient(135deg,var(--primary-hover),var(--primary-0))}
.btn-danger{background:rgba(255,77,95,.14);border-color:rgba(255,77,95,.25);color:#ff9aa5}.btn-danger:hover{background:rgba(255,77,95,.22)}
.btn-warning{background:rgba(245,166,35,.14);border-color:rgba(245,166,35,.25);color:#ffc76b}
.btn-success{background:rgba(54,201,120,.14);border-color:rgba(54,201,120,.25);color:#7ce0aa}
.btn-ghost{background:transparent;border-color:var(--border-soft);color:var(--text-1)}
.btn-ghost:hover{background:var(--bg-2);border-color:var(--border-strong)}
.btn-sm{min-height:34px;padding:7px 11px;font-size:.78rem}.btn-icon{width:40px;padding:7px}
.btn.w-100{width:100%}
.alert{padding:11px 13px;border-radius:var(--radius-sm);font-size:.84rem;margin-bottom:14px;border:1px solid transparent}
.alert-danger{background:rgba(255,77,95,.10);color:#ff9aa5;border-color:rgba(255,77,95,.20)}
.alert-success{background:rgba(54,201,120,.10);color:#7ce0aa;border-color:rgba(54,201,120,.20)}
.alert-warning{background:rgba(245,166,35,.10);color:#ffc76b;border-color:rgba(245,166,35,.20)}
.alert-info{background:rgba(84,169,255,.10);color:#8dc8ff;border-color:rgba(84,169,255,.20)}
#toastHost{position:fixed;right:16px;bottom:16px;z-index:10000;display:flex;flex-direction:column;gap:8px;width:min(360px,calc(100vw - 32px))}
.toast{background:var(--bg-3);border:1px solid var(--border-soft);border-inline-start:4px solid var(--primary-0);color:var(--text-0);padding:11px 13px;border-radius:10px;box-shadow:var(--shadow);font-size:.83rem;animation:toast-in .18s ease-out}
.toast.success{border-inline-start-color:var(--success)}.toast.error{border-inline-start-color:var(--danger)}.toast.warning{border-inline-start-color:var(--warning)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;font-size:.68rem;font-weight:700;white-space:nowrap}
.badge-admin{background:rgba(124,92,255,.16);color:#b3a5ff}.badge-user{background:rgba(255,255,255,.07);color:var(--text-2)}
.badge-banned{background:rgba(255,77,95,.14);color:#ff9aa5}.badge-public{background:rgba(54,201,120,.14);color:#7ce0aa}.badge-admins_only{background:rgba(245,166,35,.14);color:#ffc76b}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.dot-online{background:var(--success);box-shadow:0 0 8px rgba(54,201,120,.65)}.dot-off{background:var(--muted)}
.empty-state{padding:30px 16px;text-align:center;color:var(--muted);font-size:.86rem}
.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.68);align-items:center;justify-content:center;z-index:9999;padding:16px;backdrop-filter:blur(4px)}
.modal-backdrop.open{display:flex}.modal-box{width:min(440px,100%);padding:22px;background:var(--bg-1);border:1px solid var(--border-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.modal-box h3{color:var(--text-0);margin:0 0 18px;font-size:1.05rem}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}

/* Chat */
.chat-shell{
  position:relative;width:min(1180px,100%);height:min(900px,calc(100dvh - 32px));margin:16px auto;
  background:var(--bg-1);border:1px solid var(--border-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow);
  display:flex;flex-direction:column;overflow:hidden;isolation:isolate
}
.chat-topbar{
  flex:0 0 auto;min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 16px;border-bottom:1px solid var(--border-soft);background:rgba(32,34,38,.92);backdrop-filter:blur(12px)
}
.chat-topbar .room-title{display:flex;align-items:center;gap:10px;min-width:0}.chat-topbar .room-title>div{min-width:0}
.chat-topbar h2{font-size:.98rem;color:var(--text-0);margin:0;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.chat-topbar .actions{display:flex;gap:7px;flex-shrink:0}
.chat-messages{
  position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:18px 18px 22px;
  display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain;scroll-behavior:auto;
}
.chat-messages:focus{outline:none}.load-older-btn{
  align-self:center;flex:0 0 auto;background:var(--bg-3);border:1px solid var(--border-soft);color:var(--text-2);
  border-radius:999px;padding:7px 12px;font-size:.75rem;cursor:pointer
}.load-older-btn:hover{background:var(--bg-4);color:var(--text-0)}.load-older-btn:disabled{opacity:.5}
.new-messages-btn{
  position:absolute;z-index:5;bottom:88px;left:50%;transform:translateX(-50%);border:1px solid rgba(124,92,255,.4);
  background:rgba(35,31,57,.96);color:#d9d3ff;border-radius:999px;padding:7px 14px;cursor:pointer;
  box-shadow:0 7px 22px rgba(0,0,0,.28);font-size:.76rem;font-weight:600
}.new-messages-btn:hover{background:#2f294d}.new-messages-btn[hidden],.load-older-btn[hidden]{display:none}
.msg-row{display:flex;align-items:flex-end;max-width:min(78%,760px);animation:message-in .14s ease-out}
.msg-row.me{align-self:flex-end;flex-direction:row-reverse}.msg-row.other{align-self:flex-start}
@keyframes message-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.avatar{width:32px;height:32px;border-radius:50%;flex:0 0 32px;display:grid;place-items:center;color:#fff;font-size:.7rem;font-weight:700;margin:0 7px 2px}
.msg-bubble-wrap{min-width:0;max-width:100%}.msg-bubble{
  position:relative;min-width:0;background:var(--bg-2);border:1px solid rgba(255,255,255,.045);
  border-radius:15px;padding:9px 11px;box-shadow:var(--shadow-sm)
}
.msg-row.me .msg-bubble{background:linear-gradient(145deg,rgba(124,92,255,.29),rgba(124,92,255,.13));border-color:rgba(124,92,255,.16)}
.msg-row.admin .msg-bubble{border-color:rgba(124,92,255,.28)}
.msg-meta{display:flex;align-items:baseline;gap:7px;margin-bottom:3px;min-width:0}.msg-username{font-weight:700;font-size:.77rem;overflow:hidden;text-overflow:ellipsis}
.msg-time{font-size:.64rem;color:var(--muted);white-space:nowrap}.msg-text{font-size:.9rem;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.msg-text .mention{background:rgba(245,166,35,.14);border-radius:5px;padding:0 4px;color:#ffc76b;font-weight:600}
.msg-reply-tag{font-size:.72rem;color:var(--text-2);border-inline-start:2px solid var(--primary-0);padding-inline-start:7px;margin-bottom:5px;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-file{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.msg-file img{max-width:min(320px,100%);max-height:300px;border-radius:10px;display:block;margin:2px 0 5px;cursor:zoom-in;object-fit:contain}
.msg-file a{font-size:.8rem}.msg-actions{position:absolute;top:-13px;inset-inline-end:5px;display:flex;gap:3px;opacity:0;pointer-events:none;transition:opacity .14s}
.msg-row:hover .msg-actions,.msg-row:focus-within .msg-actions{opacity:1;pointer-events:auto}.msg-actions button{width:27px;height:27px;border-radius:50%;border:1px solid var(--border-soft);background:var(--bg-3);color:var(--text-1);cursor:pointer}
.msg-actions button:hover{background:var(--primary-0);color:#fff}
.reply-preview{display:none;align-items:center;justify-content:space-between;gap:10px;background:var(--bg-2);border-inline-start:3px solid var(--primary-0);padding:7px 10px;margin:0 16px 8px;border-radius:8px;font-size:.76rem;color:var(--text-2)}
.reply-preview.open{display:flex}.reply-preview button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1rem}
.typing-hint{height:18px;flex:0 0 18px;padding:0 18px;color:var(--muted);font-size:.7rem}
.chat-input-bar{flex:0 0 auto;padding:10px 16px 14px;border-top:1px solid var(--border-soft);background:rgba(32,34,38,.94);backdrop-filter:blur(12px)}
.chat-input-row{display:flex;align-items:flex-end;gap:7px}.chat-input-row textarea{flex:1;min-height:40px;max-height:140px;padding:9px 12px}
.chat-input-row .btn-icon{font-size:1rem}.chat-input-row .btn-primary{font-size:1rem}
#fileNameTag{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.7rem;color:#b3a5ff;padding:0 3px}
.drop-zone-active .chat-messages{outline:2px dashed var(--primary-0);outline-offset:-8px;background:rgba(124,92,255,.035)}

/* Admin */
.admin-shell{display:flex;min-height:100dvh}.admin-sidebar{
  width:240px;flex:0 0 240px;background:rgba(24,25,28,.96);border-inline-end:1px solid var(--border-soft);
  padding:18px 13px;display:flex;flex-direction:column;gap:3px;position:sticky;top:0;height:100dvh
}
.admin-sidebar .brand{justify-content:flex-start;margin:0 7px 20px}.admin-sidebar a{color:var(--text-2);padding:10px 11px;border-radius:9px;font-size:.83rem;display:flex;align-items:center;gap:8px;white-space:nowrap}
.admin-sidebar a:hover{background:var(--bg-2);text-decoration:none;color:var(--text-0)}.admin-sidebar a.active{background:rgba(124,92,255,.13);color:#b3a5ff;font-weight:700}.admin-sidebar .spacer{flex:1}
.admin-main{flex:1;min-width:0;padding:28px;max-width:calc(100vw - 240px)}
.admin-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:20px}.admin-header h1{font-size:1.35rem;color:var(--text-0);margin:0}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:12px;margin-bottom:20px}
.stat-card{background:var(--bg-1);border:1px solid var(--border-soft);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm)}
.stat-card .stat-label{color:var(--text-2);font-size:.74rem;margin-bottom:5px}.stat-card .stat-value{color:var(--text-0);font-size:1.6rem;font-weight:800}
.table-card{background:var(--bg-1);border:1px solid var(--border-soft);border-radius:var(--radius);overflow:auto;margin-bottom:20px;box-shadow:var(--shadow-sm)}
.table-card .table-toolbar{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;border-bottom:1px solid var(--border-soft);gap:10px;min-width:620px}
.table-card .table-toolbar h3{color:var(--text-0);font-size:.92rem;margin:0}
table{width:100%;min-width:650px;border-collapse:collapse}thead th{text-align:start;font-size:.69rem;color:var(--muted);padding:10px 15px;border-bottom:1px solid var(--border-soft);white-space:nowrap}
tbody td{padding:10px 15px;font-size:.78rem;border-bottom:1px solid var(--border-soft);color:var(--text-1);vertical-align:middle}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:rgba(255,255,255,.018)}
.row-actions{display:flex;gap:5px;flex-wrap:wrap;min-width:260px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;color:#c9c4ff}

/* Responsive */
@media(max-width:900px){
  .admin-shell{display:block}.admin-sidebar{position:sticky;top:0;z-index:20;width:100%;height:auto;min-height:58px;flex-direction:row;align-items:center;overflow-x:auto;border-inline-end:0;border-bottom:1px solid var(--border-soft);padding:7px 10px;background:rgba(24,25,28,.97)}
  .admin-sidebar .brand,.admin-sidebar .spacer{display:none}.admin-sidebar a{flex:0 0 auto}.admin-main{max-width:none;padding:18px 14px}
}
@media(max-width:700px){
  .page-center{padding:14px}.card{padding:18px;border-radius:16px}
  .chat-shell{width:100%;height:100dvh;margin:0;border-radius:0;border:0}
  .chat-topbar{min-height:58px;padding:8px 10px}.chat-topbar .actions .btn-sm{font-size:.7rem;padding:6px 8px}.chat-topbar .actions .btn-sm:first-child{display:none}
  .chat-messages{padding:14px 10px 18px}.msg-row{max-width:94%}.avatar{width:28px;height:28px;flex-basis:28px;margin-inline:4px}
  .msg-bubble{padding:8px 10px;border-radius:13px}.msg-text{font-size:.86rem}.msg-file img{max-height:240px}
  .msg-actions{opacity:1;pointer-events:auto;position:static;justify-content:flex-end;margin-top:5px}.msg-actions button{width:24px;height:24px}
  .chat-input-bar{padding:8px 9px calc(8px + env(safe-area-inset-bottom));}.chat-input-row{gap:5px}
  .chat-input-row .btn-icon{width:38px}.reply-preview{margin-inline:10px}.new-messages-btn{bottom:82px}
  .row-actions{min-width:230px}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:380px){
  .chat-topbar .room-title .btn-icon{width:34px}.chat-topbar h2{font-size:.88rem}.chat-topbar{padding-inline:7px}
  .stat-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}