:root{--bg:#eaf1f6;--h1:#0c3454;--h2:#1b78c2;--dot:#ffffff80;--panel:#fff;--ink:#16202b;--mute:#6b7886;--line:#e4e8ee;--brand:#1b78c2;--brand-ink:#fff;
--chat:#d3e3ee;--mine:#cdeebd;--theirs:#fff;--danger:#d64545;--ok:#2f9e5b;--r:14px;
font-family:Vazirmatn,"Segoe UI",Tahoma,"Noto Sans Arabic",system-ui,sans-serif}
@media(prefers-color-scheme:dark){:root{--bg:#0e1621;--h1:#0a1d2e;--h2:#12476f;--dot:#ffffff0a;--panel:#17212b;--ink:#e8eef4;--mute:#8596a6;--line:#24313f;--brand:#4aa3ff;--brand-ink:#06121f;--chat:#0b141d;--mine:#2b5278;--theirs:#182533}}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{--hh:62px;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.7;-webkit-text-size-adjust:100%}
a{color:var(--brand);text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.flash{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:50;padding:8px 18px;border-radius:99px;color:#fff;box-shadow:0 6px 20px #0003}
.flash.ok{background:var(--ok)}.flash.err{background:var(--danger)}
.error{color:var(--danger);margin:.3em 0;font-size:14px}.hint{color:var(--mute);font-size:14px;margin:.4em 0}
/* auth / forms */
body.auth{background:linear-gradient(160deg,var(--h1),var(--h2) 65%,#5fb3e6);display:grid;place-items:center;padding:20px;min-height:100%;height:auto}
.card{width:100%;max-width:400px;background:var(--panel);padding:28px;border-radius:20px;box-shadow:0 10px 40px #0001;display:grid;gap:12px}
.card h1,.wrap h1{font-size:21px;margin:0}
label{display:grid;gap:4px;font-size:14px;color:var(--mute)}
input:not([type=file]):not([type=hidden]),textarea{width:100%;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink)}
input:focus,textarea:focus{border-color:var(--brand);outline:none}
.btn{display:block;text-align:center;border:0;background:var(--brand);color:var(--brand-ink);padding:11px 18px;border-radius:12px;font-weight:700;cursor:pointer}
.btn:hover{filter:brightness(1.08)}.alt{text-align:center;margin:0;font-size:14px;color:var(--mute)}
/* app shell */
.app{display:grid;grid-template-columns:minmax(300px,380px) 1fr;height:calc(100dvh - var(--hh));overflow:hidden}
.side{background:var(--panel);border-inline-end:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.side-h{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line)}
.me{display:flex;gap:10px;align-items:center}.me small,.chat-h small{display:block;color:var(--mute);font-size:12px;line-height:1.3}
.side-h nav{display:flex;gap:2px;align-items:center}.side-h form{margin:0}
.ico{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:none;border:0;cursor:pointer;font-size:17px;color:var(--ink)}
.ico:hover{background:var(--bg)}
.dot{position:absolute;top:0;inset-inline-start:0;background:var(--danger);color:#fff;font:700 11px/1 inherit;padding:3px 5px;border-radius:99px}
.avatar{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:linear-gradient(135deg,#4aa3ff,#1f5fd0)}
.list{overflow-y:auto;flex:1}
.item{display:flex;gap:12px;padding:10px 14px;color:var(--ink);align-items:center}
.item:hover{background:var(--bg)}.item.active{background:var(--brand);color:var(--brand-ink)}
.item.active .snip,.item.active time{color:inherit;opacity:.85}
.item .body{flex:1;min-width:0}.row{display:flex;justify-content:space-between;gap:8px;align-items:center}
.row b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snip{color:var(--mute);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
time{color:var(--mute);font-size:11px;white-space:nowrap}
.badge{font-size:11px;background:var(--line);color:var(--mute);padding:0 8px;border-radius:99px}
.empty,.placeholder{color:var(--mute);text-align:center;padding:40px 20px}
.main{background-image:radial-gradient(var(--dot) 1.3px,transparent 1.5px);background-size:24px 24px;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--chat)}
.placeholder{margin:auto}.placeholder span{font-size:48px}
.chat-h{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--line)}
.grow{flex:1;min-width:0}.grow b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.back{display:none;font-size:30px;line-height:1;padding:0 6px;color:var(--ink)}
.pill{border:1px solid var(--line);background:var(--bg);padding:4px 14px;border-radius:99px;cursor:pointer;font-size:13px;color:var(--ink)}
.pill:hover{border-color:var(--brand)}.pill.ok{background:var(--ok);color:#fff;border:0}.pill.danger{color:var(--danger)}
/* chat */
#chat{flex:1;display:flex;flex-direction:column;min-height:0}
#msgs{flex:1;overflow-y:auto;padding:14px clamp(10px,5%,60px);display:flex;flex-direction:column;gap:4px;overscroll-behavior:contain}
.day{align-self:center;background:#0004;color:#fff;font-size:12px;padding:1px 12px;border-radius:99px;margin:10px 0 4px}
.msg{max-width:min(78%,520px);padding:6px 11px 4px;border-radius:16px;box-shadow:0 1px 1px #0001;word-wrap:break-word;overflow-wrap:anywhere}
.msg.mine{margin-left:auto;background:var(--mine);border-bottom-right-radius:4px}
.msg.theirs{margin-right:auto;background:var(--theirs);border-bottom-left-radius:4px}
.who{font-size:12px;font-weight:700;color:var(--brand)}
.txt{white-space:pre-wrap}.msg time{display:block;text-align:end;font-size:11px;margin-top:-2px}
.pic{display:block;max-width:100%;max-height:300px;border-radius:10px;margin:2px 0 4px}
.file{display:flex;gap:10px;align-items:center;color:inherit;padding:4px 0}
.file i{font-style:normal;width:40px;height:40px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center}
.file span{display:block;font-size:12px;color:var(--mute)}.file b{display:block;word-break:break-all}
#composer{background:var(--panel);padding:8px 12px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.bar{display:flex;gap:6px;align-items:flex-end}
.bar textarea{resize:none;max-height:140px;border-radius:20px;padding:9px 16px}
.send{flex:none;width:42px;height:42px;border:0;border-radius:50%;background:var(--brand);color:var(--brand-ink);cursor:pointer;font-size:16px;transform:scaleX(-1)}
.send:disabled{opacity:.5}.attach{flex:none}
.chip{display:inline-flex;gap:8px;align-items:center;background:var(--bg);padding:2px 12px;border-radius:99px;font-size:13px;margin-bottom:6px}
.chip button{border:0;background:none;cursor:pointer;color:var(--danger)}
#err:empty{display:none}.closed-note{padding:14px;text-align:center;color:var(--mute);background:var(--panel)}
.newform{display:grid;gap:14px;padding:20px;max-width:640px;width:100%;margin:0 auto;overflow-y:auto}
/* admin */
.wrap{max-width:900px;margin:0 auto;padding:20px}.admin-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
body.admin-page{height:auto;--hh:62px}.table-scroll{overflow-x:auto;background:var(--panel);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;min-width:620px}th,td{padding:10px 14px;text-align:start;border-bottom:1px solid var(--line)}
th{color:var(--mute);font-weight:600;font-size:13px}td form{display:flex;gap:6px;margin:0}
.st{font-size:13px}.st-pending{color:#c58a00}.st-active{color:var(--ok)}.st-blocked{color:var(--danger)}
/* mobile: one pane at a time */
@media(max-width:800px){
.app{grid-template-columns:1fr}
.app.list .main,.app.chat .side,.app.new .side{display:none}
.back{display:block}.msg{max-width:88%}
}
@media(prefers-reduced-motion:no-preference){.msg{animation:pop .15s ease-out}@keyframes pop{from{transform:scale(.97);opacity:0}}}

.logout{margin-inline-start:6px;white-space:nowrap}

/* header */
.top{height:var(--hh);display:flex;align-items:center;gap:18px;padding:0 20px;background:linear-gradient(100deg,var(--h1),var(--h2));color:#fff;box-shadow:0 2px 12px #0003;position:relative;z-index:5}
.brand{display:flex;gap:10px;align-items:center;color:#fff}.brand .logo{width:38px;height:38px}
.brand b{display:block;font-size:17px;line-height:1.3}.brand small,.welcome small{display:block;font-size:12px;opacity:.75;line-height:1.3}
.welcome{flex:1;padding-inline-start:18px;border-inline-start:1px solid #fff3;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top nav{display:flex;gap:8px;align-items:center}.top form{margin:0}
.top .pill{background:#ffffff1f;border-color:#ffffff33;color:#fff;padding:5px 16px}
.top .pill:hover{background:#ffffff33;border-color:#fff6}.top .pill.primary{background:#fff;color:var(--h1);border-color:#fff;font-weight:700}
.rel{position:relative}.top .dot{top:-6px;inset-inline-start:-6px}
.brand-lg{text-align:center}.brand-lg .logo{width:60px;height:60px}.brand-lg h2{margin:6px 0 0;font-size:20px}.brand-lg p{margin:0;color:var(--mute);font-size:14px}
.admin-t{margin:0 0 14px;font-size:20px}
/* search */
.search{padding:10px 12px;border-bottom:1px solid var(--line)}
.search input{border-radius:99px!important;padding:8px 16px!important}
.grp{padding:8px 16px 2px;font-size:12px;color:var(--mute);font-weight:700}
.item .snip mark,.item b mark,mark{background:#ffd84d;color:#1a1a1a;border-radius:3px;padding:0 1px}
@media(max-width:800px){
.top{padding:0 12px;gap:10px}.hide-sm,.brand small,.welcome small{display:none}.welcome{padding-inline-start:10px}
.top .pill{padding:4px 10px;font-size:12.5px}.brand b{font-size:15px}
body.mode-chat,body.mode-new{--hh:0px}body.mode-chat .top,body.mode-new .top{display:none}
}