/* ===== AVERO v2 — një faqe: hyrja (jashtë) + chat + admin (brenda), e njëjta ngjyrë kudo ===== */
:root{
 --paper:#F4ECE4;--ink:#2B1624;--ink-2:#43253A;--accent:#E08A6D;--accent-dark:#A8503A;--panel:#FBF6F1;--line:#E2D4CC;--muted:#6B5662;--green:#2F7D5B;--danger:#A3334F;
 --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;--sans:"Jost","Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";
 /* sfondi: dritë e butë lart djathtas, hije e lehtë poshtë majtas (i njëjti jashtë dhe brenda) */
 --bg:radial-gradient(60vmax 60vmax at 88% 18%,#fffaf6 0%,#fffaf600 60%),radial-gradient(50vmax 45vmax at 8% 100%,#e8d9ce 0%,#e8d9ce00 70%),#F4ECE4;
 --glass:linear-gradient(160deg,#ffffffb3 0%,#fbf6f173 100%);
 --glass-strong:linear-gradient(160deg,#ffffffe6 0%,#fbf6f1c7 100%);
 --glass-border:#ffffffcc;
 --shadow-card:0 2px 0 #ffffff inset,0 -1px 0 #2b16240f inset,0 40px 90px -20px #2b162440,0 12px 30px -12px #2b162426;
 --shadow-soft:0 1px 0 #ffffff inset,0 -1px 0 #2b16240a inset,0 26px 60px -30px #2b162440,0 8px 22px -16px #2b162426;
 --radius:24px;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{font-family:var(--sans);font-weight:400;color:var(--ink);background:var(--bg);background-color:var(--paper);-webkit-font-smoothing:antialiased;position:relative}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{opacity:.6;cursor:default}
.hidden{display:none!important}
.glass{background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);border:1px solid var(--glass-border);box-shadow:var(--shadow-soft)}

/* ===== Postimi 1 – elementet e përbashkëta ===== */
.p-logo{display:flex;align-items:center;gap:18px;font:500 44px/1 var(--serif);letter-spacing:.04em;color:var(--ink)}
.p-mark{width:56px;height:56px;flex:0 0 auto}
.p-copy em{display:block;font:italic 400 clamp(60px,8.4vw,156px)/.98 var(--serif);color:var(--ink)}
.p-copy p{margin:44px 0 0;font:300 clamp(18px,1.95vw,36px)/1.45 var(--sans);max-width:21em;color:var(--ink)}
.p-paths{display:block;width:min(860px,100%);aspect-ratio:860/220;height:auto}
.b-mark{width:32px;height:32px;flex:0 0 auto}

/* ===== JASHTË: foto në gjithë ekranin + hyrja djathtas si xham ===== */
.overlay{position:fixed;inset:0;z-index:30;display:grid;grid-template-columns:minmax(0,1fr) clamp(360px,30vw,470px);column-gap:clamp(24px,4vw,90px);padding-right:clamp(20px,5vw,110px);align-items:safe center;background:var(--bg);background-color:var(--paper);overflow:auto}
.auth-poster{height:100vh;height:100dvh;min-height:560px;min-width:0;padding:clamp(28px,7vh,110px) 0 clamp(28px,7vh,110px) clamp(28px,6.5vw,140px);display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.auth-poster .p-logo{font-size:clamp(30px,min(2.6vw,4.4vh),52px)}
.auth-poster .p-mark{width:clamp(40px,min(3.2vw,5.4vh),64px);height:clamp(40px,min(3.2vw,5.4vh),64px)}
.auth-poster .p-copy em{font-size:clamp(56px,min(8.6vw,15.5vh),190px)}
.auth-poster .p-copy p{font-size:clamp(17px,min(1.9vw,3.3vh),40px);margin-top:clamp(20px,4vh,48px)}
.auth-poster .p-paths{width:min(100%,62vw,1100px)}
.auth-side{position:relative;display:grid;place-items:center;min-width:0;padding:24px 0}
.auth-side:before{content:"";position:absolute;width:130%;aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#e08a6d38 0%,#e08a6d14 40%,#e08a6d00 70%);pointer-events:none}
.card{position:relative;width:100%;border-radius:26px;padding:clamp(26px,4.4vh,40px) clamp(22px,2.4vw,36px);text-align:center;background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);border:1px solid var(--glass-border);box-shadow:var(--shadow-card)}
.card-brand{display:flex;align-items:center;justify-content:center;gap:12px;font:500 40px/1 var(--serif);letter-spacing:.04em}
.card-brand .b-mark{width:40px;height:40px}
.tagline{margin:10px 0 0;color:var(--muted);font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:300}
.card form{margin:0}
.card input:not([type=checkbox]){display:block;width:100%;margin:10px 0;padding:14px 16px;border-radius:12px;border:1px solid #D8C6BC;background:#ffffffd9;color:var(--ink);font-size:15px;outline:0}
.card input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #e08a6d33}
.btn{display:block;width:100%;margin:10px 0;padding:14px;border-radius:12px;font-size:15px}
.primary{border:0;background:var(--ink);color:var(--paper);font-weight:500;letter-spacing:.02em}.primary:hover:not(:disabled){background:var(--ink-2)}
.secondary{border:1px solid var(--ink);background:transparent;color:var(--ink)}.secondary:hover:not(:disabled){background:#2b16240d}
.btn.danger{background:#8a2f45;color:#fff;border:0}.btn.danger:hover:not(:disabled){background:#72243a}
.linkbtn{display:block;width:100%;margin:4px 0;padding:8px;font-size:14px;background:none;border:0;color:var(--muted);border-radius:10px}.linkbtn:hover{color:var(--ink);background:#2b16240d}
.error{color:var(--danger);font-size:13px;line-height:1.45;margin:12px 0 0}
.info{color:#1f5e42;background:#dcefe5b3;border:1px solid #bcdcca;border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.45;margin:12px 0 0;text-align:left}
.error:empty,.info:empty{display:none}
.hint,.fine{color:var(--muted);font-size:13px;line-height:1.5}.fine{margin:18px 0 0}
.card .hint{margin:8px 4px}
.room-pick{margin:14px 0 4px;text-align:left}
.room-pick small{display:block;color:var(--muted);font-size:11px;letter-spacing:.2em;margin:0 2px 8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #D8C6BC;background:#ffffffb3;color:var(--muted);padding:7px 12px;border-radius:999px;font-size:13px;line-height:1.2}
.chip span{color:var(--accent-dark)}
.chip:hover{color:var(--ink);border-color:var(--ink)}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}.chip.on span{color:var(--accent)}
.loading{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);padding:34px 0 18px}
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid #2b162426;border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== BRENDA: Postimi 1 si wallpaper pas chat-it ===== */
.wallpaper{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;display:none}
body[data-screen=chat] .wallpaper{display:block}
.poster{position:absolute;left:calc(clamp(220px,18vw,270px) + 60px);right:calc(clamp(240px,20vw,300px) + 60px);top:120px;bottom:120px;padding:3vh 3%;display:flex;flex-direction:column;justify-content:space-between;opacity:.22}
.poster .p-copy em{font-size:clamp(46px,5.6vw,120px)}.poster .p-copy p{font-size:clamp(15px,1.3vw,24px);margin-top:22px}
.poster .p-logo{font-size:32px}.poster .p-mark{width:42px;height:42px}

.shell{position:relative;z-index:2;display:grid;grid-template-columns:clamp(220px,18vw,270px) minmax(0,1fr) clamp(240px,20vw,300px);gap:18px;height:100vh;height:100dvh;padding:18px}
.shell:before{content:"";position:fixed;right:-12vmax;top:-12vmax;width:62vmax;height:62vmax;border-radius:50%;background:radial-gradient(circle,#e08a6d26 0%,#e08a6d0f 40%,#e08a6d00 70%);pointer-events:none;z-index:-1}
.panel{border-radius:var(--radius);padding:24px 14px;display:flex;flex-direction:column;min-height:0;min-width:0}
.brand{display:flex;align-items:center;gap:10px;font:500 32px/1 var(--serif);letter-spacing:.04em;margin:4px 10px 34px;color:var(--ink)}
.panel small{display:block;color:var(--muted);font-size:11px;letter-spacing:.2em;margin:0 10px 12px}
#roomList{display:flex;flex-direction:column;gap:4px;overflow:auto;min-height:0}
.room{display:flex;align-items:center;gap:10px;width:100%;border:1px solid transparent;background:transparent;color:var(--muted);padding:12px 13px;border-radius:14px;text-align:left;font-size:15px;white-space:nowrap}
.room .ico{width:22px;height:22px;display:grid;place-items:center;color:var(--accent-dark);flex:0 0 auto}
.room .ico .ic{width:19px;height:19px}
.room:hover{background:#ffffffa6;color:var(--ink)}
.room.active{background:#ffffff;color:var(--ink);border-color:#ffffff;box-shadow:inset 3px 0 0 var(--accent),0 12px 26px -18px #2b162466}
.left-foot{margin-top:auto;flex:0 0 auto;display:flex;flex-direction:column;gap:12px;padding-top:16px}
.me-card{display:flex;flex-direction:column;gap:12px;padding:12px;border-radius:18px;background:#ffffffb8;border:1px solid #ffffff;box-shadow:0 16px 32px -26px #2b162480}
.me-row{display:flex;align-items:center;gap:11px;min-width:0}
.me-av{position:relative;width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-weight:500;font-size:16px;box-shadow:0 8px 16px -10px #2b1624aa}
.me-av:after{content:"";position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid #ffffff}
.me-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.me-info b{font-weight:500;color:var(--ink);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-info span{font-size:12px;color:var(--green);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-logout{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px 12px;border-radius:12px;border:1px solid #2b16241f;background:#ffffff8c;color:var(--ink);font-size:14px;transition:background .15s,color .15s,border-color .15s}
.side-logout .ic{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--accent-dark);transition:color .15s}
.side-logout:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.side-logout:hover .ic{color:var(--accent)}
.side-logout:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.free{margin:0;padding:0 8px;text-align:center;font:italic 400 17px/1.2 var(--serif);color:var(--muted);letter-spacing:.01em}
#logout,.me{display:none}
@media (max-height:700px) and (min-width:861px){
 .brand{margin-bottom:20px}.room{padding:9px 12px}.left-foot{gap:8px;padding-top:10px}.me-card{padding:10px;gap:10px}
}
.center{display:flex;flex-direction:column;min-width:0;min-height:0;gap:14px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:20px;padding:12px 18px 12px 24px;min-height:74px}
.bar-title{min-width:0;flex:1}
body.dm-mode .bar{padding-left:12px}
.bar-title b{display:block;font:italic 400 28px/1.1 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar small{display:block;color:var(--green);font-size:12px;margin-top:4px;letter-spacing:.02em}
.bar small.bad{color:var(--danger)}
.header-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.me{font-size:13px;color:var(--muted);margin-right:6px;white-space:nowrap}
.me b{font-weight:500;color:var(--ink)}
.badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;background:#f6dcd3;color:#8a3a26;margin-left:6px;vertical-align:middle}
.ghost{background:none;border:1px solid transparent;color:var(--muted);padding:9px 12px;font-size:14px;border-radius:12px;white-space:nowrap}
.ghost:hover{color:var(--ink);background:#ffffffa6;border-color:#ffffff}
.ghost.strong{color:var(--ink);border-color:#2b16241f;background:#ffffff8c}
#messages{flex:1;min-height:0;overflow:auto;padding:8px clamp(6px,3vw,44px);display:flex;flex-direction:column;gap:12px}
.msg{display:flex;gap:12px;max-width:min(720px,90%);align-items:flex-start}
.msg:first-child{margin-top:auto}
.msg.mine{margin-left:auto;flex-direction:row-reverse}
.avatar{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--ink);font-weight:500;box-shadow:0 8px 16px -10px #a8503aaa}
.msg.mine .avatar{background:var(--ink);color:var(--paper)}
.bubble{min-width:0;background:linear-gradient(160deg,#ffffffe6 0%,#fbf6f1d1 100%);border:1px solid #ffffff;border-radius:18px;padding:10px 14px;box-shadow:0 16px 32px -24px #2b162470}
.msg.mine .bubble{background:linear-gradient(160deg,#fff8f3f2 0%,#fbe8def0 100%)}
.meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.meta b{color:var(--ink);font-weight:500;font-size:13px}
.acts{margin-left:auto;display:flex;gap:4px;opacity:0;transition:opacity .15s}
.msg:hover .acts,.msg:focus-within .acts{opacity:1}
@media (hover:none){.acts{opacity:1}}
.text{margin-top:4px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.empty{align-self:center;margin:auto 0;color:var(--muted);background:#ffffffb3;border:1px solid #ffffff;border-radius:16px;padding:14px 20px;text-align:center;box-shadow:var(--shadow-soft)}
.composer{position:relative;display:flex;flex-direction:column;gap:6px;border-radius:22px;padding:8px;margin:0}
.composer-row{display:flex;gap:4px;align-items:flex-end}
.composer textarea{flex:1;min-width:0;background:transparent;border:0;outline:0;padding:11px 8px;font-size:15px;line-height:1.45;resize:none;height:44px;max-height:140px;overflow-y:auto;scrollbar-width:thin}
.composer textarea::placeholder{color:#8d7a84}
.send{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;border:0;color:var(--paper);background:var(--ink);border-radius:50%;padding:0;box-shadow:0 10px 20px -12px #2b1624cc;transition:background .15s,transform .1s}
.send .ic{width:20px;height:20px}
.send:hover:not(:disabled){background:var(--ink-2)}
.send:active:not(:disabled){transform:scale(.94)}
.composer:not(.has-text) #send{display:none}
.composer.has-text #micBtn{display:none}
.composer.busy .send{opacity:.6;pointer-events:none}
.people-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
#peopleTitle{display:block;margin:0 10px 6px;font:italic 400 28px/1.1 var(--serif)}
#users{display:flex;flex-direction:column;gap:8px;overflow:auto;min-height:0}
.user{display:flex;align-items:center;gap:4px;padding:6px 6px 6px 8px;border-radius:16px;background:#ffffffb8;border:1px solid #ffffff;min-width:0}
.u-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0;border:0;background:none;padding:4px 2px;text-align:left;border-radius:12px}
.u-main:hover .uname{text-decoration:underline;text-underline-offset:3px;text-decoration-color:#e08a6d99}
.uname{display:block;font-weight:500;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user .tag{flex:0 0 auto}
.user.self .u-main{cursor:default}
.user.self .u-main:hover .uname{text-decoration:none}
.user.ignored .uname{color:var(--muted);text-decoration:line-through}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 auto}
.mini{border:1px solid var(--line);background:#fff;color:var(--ink);font-size:12px;padding:5px 10px;border-radius:999px;font-family:var(--sans)}
.mini:hover{border-color:var(--ink)}
.mini.danger{color:#8a2f45;border-color:#ebc6ce}.mini.danger:hover{border-color:#8a2f45}
.you{font-size:12px;color:var(--muted)}
.panel .hint{margin:6px 10px}
.mini.strong{background:var(--ink);color:var(--paper);border-color:var(--ink)}.mini.strong:hover{background:var(--ink-2)}

/* ===== Mesazhet private ===== */
#roomList{flex-shrink:0}
.dm-section{margin-top:22px;display:flex;flex-direction:column;flex:0 1 auto;min-height:0}
#dmList,#dmListMobile{display:flex;flex-direction:column;gap:4px;overflow:auto;min-height:0}
.dm-item .nm{display:flex;flex-direction:column;min-width:0;text-align:left}
.panel .dm-item .nm small{display:block;margin:2px 0 0;letter-spacing:0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.dm-item .udot{display:none;width:9px;height:9px;border-radius:50%;background:var(--accent);margin-left:auto;flex:0 0 auto;box-shadow:0 0 0 3px #e08a6d33}
.dm-item.unread .udot{display:block}
.dm-item.unread .nm{color:var(--ink);font-weight:500}
.dm-mobile{display:none!important;margin-bottom:14px}
.dm-only{display:none!important}
body.dm-mode .dm-only{display:inline-grid!important}
#peopleToggle.has-unread:after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-left:6px;vertical-align:middle}

/* ===== ADMIN (e njëjta faqe, e njëjta ngjyrë) ===== */
.admin-panel{position:relative;z-index:2;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:14px;padding:18px}
.admin-panel:before{content:"";position:fixed;right:-12vmax;top:-12vmax;width:62vmax;height:62vmax;border-radius:50%;background:radial-gradient(circle,#e08a6d26 0%,#e08a6d0f 40%,#e08a6d00 70%);pointer-events:none;z-index:-1}
.admin-title{display:flex!important;align-items:center;gap:10px;font:500 28px/1 var(--serif)!important;letter-spacing:.06em}
.admin-nav{display:flex;gap:8px;overflow:auto;padding:2px}
.admin-nav button{border:1px solid #ffffff;background:#ffffffa6;color:var(--ink);padding:10px 18px;border-radius:999px;font-size:14px;white-space:nowrap;box-shadow:0 10px 24px -20px #2b162466}
.admin-nav button:hover{background:#fff}
.admin-nav button.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.admin-main{flex:1;min-height:0;overflow:auto;border-radius:var(--radius);padding:clamp(18px,3vw,34px)}
.admin-main h2{margin:0 0 18px;font:italic 400 40px/1.1 var(--serif)}
.admin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.stat{background:#ffffffc7;border:1px solid #ffffff;border-radius:18px;padding:22px;box-shadow:0 18px 40px -30px #2b162470}
.stat b{display:block;font:500 46px/1 var(--serif);color:var(--accent-dark)}
.stat span{display:block;color:var(--muted);margin-top:8px}
.admin-row{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#ffffffc7;border:1px solid #ffffff;border-radius:14px;padding:14px 16px;margin:8px 0}
.admin-row .sub{color:var(--muted);font-size:13px;margin-top:4px;word-break:break-word}
.admin-row.done{opacity:.6}
.row-acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:middle}
.tag.ok{background:#dcefe5;color:#1f5e42}.tag.bad{background:#f6dcd3;color:#8a3a26}.tag.info{background:#ece3f0;color:#4a2e57}
.admin-main .hint{margin:16px 2px 0}

/* ===== Dritarja e konfirmimit + njoftimet ===== */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:#2b162433;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal-card{width:min(440px,100%);border-radius:24px;padding:26px 24px;background:var(--glass-strong);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);border:1px solid var(--glass-border);box-shadow:var(--shadow-card)}
.modal-card h3{margin:0 0 8px;font:italic 400 30px/1.15 var(--serif)}
.modal-card p{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.5}
.modal-card input,.modal-card textarea{display:block;width:100%;margin:8px 0;padding:12px 14px;border-radius:12px;border:1px solid #D8C6BC;background:#ffffffe6;font-size:15px;outline:0;resize:vertical}
.modal-card input:focus,.modal-card textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #e08a6d33}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.modal-actions .btn{width:auto;margin:0;padding:11px 20px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:80;max-width:min(560px,92vw);background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:12px;box-shadow:0 16px 40px #2b162440;font-size:14px}
.toast.bad{background:#8a2f45}
.only-mobile{display:none}

/* ===== v5: ikonat, prania (pika jeshile), njerëzit, emoji, zëri, bashkëngjitjet ===== */
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;pointer-events:none}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;flex:0 0 auto;padding:0;border-radius:50%;border:1px solid transparent;background:none;color:var(--muted);transition:background .15s,color .15s,border-color .15s}
.icon-btn:hover{color:var(--ink);background:#ffffffb3;border-color:#ffffff}
.icon-btn.strong{color:var(--ink);border-color:#2b16241f;background:#ffffff8c}
.icon-btn.strong:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.icon-btn.light{color:#fff;background:#ffffff26;border-color:#ffffff33}.icon-btn.light:hover{background:#ffffff40;color:#fff}
.icon-btn.only-mobile{display:none}
.icon-btn:focus-visible,.send:focus-visible,.tool:focus-visible,.u-main:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ghost .ic{width:18px;height:18px;vertical-align:-4px;margin-right:6px}
.bar small.muted{color:var(--muted)}
/* avatarët dhe pika e pranisë */
.u-av{position:relative;width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--ink);font-weight:500;font-size:14px;line-height:1}
.u-av.self{background:var(--ink);color:var(--paper)}
.pdot{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;border:2px solid #ffffff;background:var(--green);display:none}
.pdot.on{display:block}
.user .icon-btn{width:36px;height:36px}
.user .icon-btn .ic{width:19px;height:19px}
.u-chat{color:var(--accent-dark)}
.u-chat:hover{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}
.utag{flex:0 0 auto;font-size:11px;padding:2px 8px;border-radius:999px;background:#2b16240f;color:var(--muted);margin-right:6px}
.utag.admin{background:var(--ink);color:var(--paper)}
.dm-item .u-av{width:30px;height:30px;flex-basis:30px;font-size:13px}
.room.dm-item{padding:8px 11px}
/* karta "unë": tingulli dhe njoftimet */
.me-info{flex:1}
.me-tools{display:flex;gap:2px;margin-left:auto;flex:0 0 auto}
.tool{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;border:0;background:none;color:#a4939c;padding:0}
.tool .ic{width:18px;height:18px}
.tool:hover{background:#2b16240d;color:var(--ink)}
.tool[aria-pressed="true"]{color:var(--ink)}
.me-mobile{display:none}
.me-av.off:after{background:#b9aab2}
/* menuja e vogël */
.pop-menu{position:fixed;z-index:60;min-width:210px;max-width:calc(100vw - 24px);padding:6px;border-radius:16px;background:var(--glass-strong);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);border:1px solid #ffffff;box-shadow:var(--shadow-card)}
.pop-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;background:none;border-radius:10px;text-align:left;font-size:14px;color:var(--ink)}
.pop-menu button .ic{width:18px;height:18px;color:var(--accent-dark)}
.pop-menu button:hover,.pop-menu button:focus-visible{background:#2b16240d;outline:0}
.pop-menu .danger,.pop-menu .danger .ic{color:#8a2f45}
.pop-menu hr{border:0;border-top:1px solid #2b162414;margin:4px 6px}
/* mesazhet */
.msg.mention-me .bubble{background:linear-gradient(160deg,#fff3ee 0%,#fde6dc 100%);box-shadow:inset 3px 0 0 var(--accent),0 16px 32px -24px #2b162470}
.mention{color:var(--accent-dark);font-weight:500;background:#e08a6d1f;border-radius:6px;padding:0 3px}
.admin-badge{font-size:10px;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:2px 7px;border-radius:999px}
.text.big{font-size:34px;line-height:1.25}
.text:empty{display:none}
.att{margin-top:6px}
.att-img{display:block;padding:0;border:0;background:#2b16240f;border-radius:12px;overflow:hidden;width:300px;max-width:100%;max-height:420px;cursor:zoom-in;position:relative}
.att-img img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.att-img.loading:after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:2px solid #2b162426;border-top-color:var(--accent);animation:spin .8s linear infinite}
.att-audio{display:flex;align-items:center;gap:10px;width:260px;max-width:100%;padding:2px 0}
.att-audio .play{width:38px;height:38px;flex:0 0 38px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);display:grid;place-items:center;padding:0}
.att-audio .play .ic{width:18px;height:18px}
.att-audio.loading .play{opacity:.55}
.att-audio .track{flex:1;height:6px;border-radius:3px;background:#2b16241f;position:relative;cursor:pointer;touch-action:none}
.att-audio .track i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:var(--accent)}
.att-audio .dur{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
.att-audio .mi{color:var(--accent-dark)}
.att-name{font-size:12px;color:var(--muted);margin-top:4px;word-break:break-word}
.att-file{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;border-radius:14px;background:#ffffffb3;border:1px solid #ffffff;width:300px;max-width:100%}
.att-file .fi{width:38px;height:38px;flex:0 0 38px;border-radius:10px;display:grid;place-items:center;background:#e08a6d26;color:var(--accent-dark)}
.att-file .fm{flex:1;min-width:0}
.att-file .fn{display:block;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att-file .fs{display:block;font-size:12px;color:var(--muted)}
.att-video video{display:block;width:340px;max-width:100%;max-height:360px;border-radius:12px;background:#1f1119}
.att-bad{font-size:13px;color:var(--muted);font-style:italic}
/* bashkëngjitjet që presin dërgimin */
.attach-bar{display:flex;gap:8px;flex-wrap:wrap;padding:4px 4px 2px}
.chip-file{position:relative;display:flex;align-items:center;gap:8px;padding:6px 4px 6px 6px;border-radius:14px;background:#ffffffcc;border:1px solid #ffffff;max-width:min(270px,100%);font-size:13px;overflow:hidden}
.chip-file img,.chip-file .ci{width:38px;height:38px;flex:0 0 38px;border-radius:9px;object-fit:cover}
.chip-file .ci{display:grid;place-items:center;background:#e08a6d26;color:var(--accent-dark)}
.chip-file .cn{min-width:0;flex:1}
.chip-file .cn b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip-file .cn span{color:var(--muted);font-size:12px}
.chip-file .icon-btn{width:30px;height:30px}
.chip-file .icon-btn .ic{width:16px;height:16px}
.chip-file .prog{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--accent);transition:width .2s}
.composer.busy .chip-file .icon-btn{visibility:hidden}
/* regjistrimi i zërit */
.rec-bar{display:flex;align-items:center;gap:10px;min-height:44px}
.composer.recording .composer-row,.composer.recording .attach-bar{display:none}
.rec-dot{width:10px;height:10px;border-radius:50%;background:#d23c4f;flex:0 0 auto;animation:recPulse 1s ease-in-out infinite}
@keyframes recPulse{50%{opacity:.25}}
#recTime{font-variant-numeric:tabular-nums;font-weight:500;min-width:38px}
.rec-label{flex:1;color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* emoji */
.emoji-panel{position:absolute;left:6px;bottom:calc(100% + 8px);z-index:20;width:min(360px,calc(100vw - 28px));border-radius:20px;background:var(--glass-strong);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);border:1px solid #ffffff;box-shadow:var(--shadow-card);overflow:hidden}
.emoji-tabs{display:flex;gap:2px;padding:6px 6px 0;border-bottom:1px solid #2b162412}
.emoji-tabs button{flex:1;border:0;background:none;padding:7px 0 9px;font-size:18px;line-height:1;border-radius:10px 10px 0 0;opacity:.5;filter:grayscale(.4)}
.emoji-tabs button:hover{opacity:.85}
.emoji-tabs button.on{opacity:1;filter:none;box-shadow:inset 0 -2px 0 var(--accent)}
.emoji-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;padding:8px;height:236px;overflow-y:auto;align-content:start;scrollbar-width:thin}
.emoji-grid button{border:0;background:none;font-size:24px;line-height:1;padding:6px 0;border-radius:10px;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.emoji-grid button:hover,.emoji-grid button:focus-visible{background:#2b16240f;outline:0}
.emoji-note{grid-column:1/-1;color:var(--muted);font-size:13px;padding:12px 6px}
/* @tag */
.mention-box{position:absolute;left:52px;bottom:calc(100% + 8px);z-index:21;min-width:220px;max-width:min(320px,calc(100vw - 80px));padding:6px;border-radius:16px;background:var(--glass-strong);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);border:1px solid #ffffff;box-shadow:var(--shadow-card)}
.mention-box button{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:0;background:none;border-radius:10px;text-align:left;font-size:14px}
.mention-box button.on,.mention-box button:hover{background:#2b16240f}
.mention-box .u-av{width:28px;height:28px;flex-basis:28px;font-size:12px}
/* foto e plotë */
.lightbox{position:fixed;inset:0;z-index:75;display:grid;place-items:center;padding:24px;background:#1f1119eb}
.lightbox img{max-width:100%;max-height:calc(100dvh - 48px);border-radius:12px;box-shadow:0 30px 80px #0009}
.lightbox-bar{position:absolute;top:14px;right:14px;display:flex;gap:8px}
.shell.dragging #messages{outline:2px dashed var(--accent);outline-offset:-6px;border-radius:20px}
/* admin */
.admin-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
#adminSearch{flex:1;min-width:200px;padding:11px 14px;border-radius:12px;border:1px solid #D8C6BC;background:#ffffffd9;font-size:14px;outline:0}
#adminSearch:focus{border-color:var(--accent);box-shadow:0 0 0 3px #e08a6d33}
.seg{display:flex;gap:4px;flex-wrap:wrap}
.seg button{border:1px solid #ffffff;background:#ffffffa6;color:var(--ink);padding:8px 14px;border-radius:999px;font-size:13px}
.seg button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.room-stats{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.room-stat{padding:10px 14px;border-radius:14px;background:#ffffffb8;border:1px solid #ffffff;font-size:14px}
.room-stat b{color:var(--accent-dark);font-weight:500;margin-left:6px}

/* admin: monitori live + AI */
.nbadge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:6px;border-radius:999px;background:var(--accent);color:var(--ink);font-size:11px;font-weight:500;vertical-align:1px}
.admin-nav button.active .nbadge{background:var(--accent);color:var(--ink)}
.admin-row .grow{flex:1;min-width:0}
.health{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.hstat{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#ffffffc7;border:1px solid #ffffff;font-size:13px}
.hstat i{width:8px;height:8px;border-radius:50%;background:#b9aab2}
.hstat.ok i{background:var(--green)}.hstat.bad i{background:#d23c4f}
.ai-box{background:linear-gradient(160deg,#fff8f3f2 0%,#fbe8def0 100%);border:1px solid #ffffff;border-radius:18px;padding:16px 18px;margin:0 0 18px;box-shadow:0 18px 40px -30px #2b162470}
.ai-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ai-head b{font:italic 400 24px/1.1 var(--serif)}
.ai-steps{margin:6px 0 12px;padding-left:20px;font-size:14px;line-height:1.55;color:var(--ink)}
.ai-steps a{color:var(--accent-dark)}
.ai-connect{display:flex;gap:8px;flex-wrap:wrap}
.ai-connect input{flex:1;min-width:200px;padding:10px 12px;border-radius:12px;border:1px solid #D8C6BC;background:#ffffffe6;font-size:14px;outline:0}
.ai-connect input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #e08a6d33}
.ai-auto{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--muted);margin:4px 0 12px;cursor:pointer}
.ai-auto input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink);flex:0 0 auto}
.ai-auto b{color:var(--ink);font-weight:500}
.ai-actions{display:flex;gap:8px;flex-wrap:wrap}
.ai-verdict{display:flex;flex-direction:column;gap:3px;margin-top:8px;padding:8px 10px;border-radius:12px;background:#ffffffb3;border-left:3px solid #b9aab2;font-size:13px;line-height:1.45}
.ai-verdict b{font-weight:500}
.ai-verdict.sev-medium{border-left-color:#e0a96d}.ai-verdict.sev-high{border-left-color:var(--accent)}.ai-verdict.sev-critical{border-left-color:#d23c4f}.ai-verdict.sev-none,.ai-verdict.sev-low{border-left-color:var(--green)}
.mini.rec{box-shadow:0 0 0 2px var(--accent)}
.mini.ai-btn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mini.ai-btn:disabled{opacity:.6}
.mon-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 4px}
.mon-head h3{margin:0;font:italic 400 26px/1.2 var(--serif)}
.err-msg{word-break:break-word}

/* ===== v5.1: Reply, Delete for me / for everyone, "po shkruan…" ===== */
.acts{gap:2px}
.m-act{width:30px;height:30px;color:#8d7a84}
.m-act .ic{width:17px;height:17px}
.m-act:hover{background:#2b16240d;border-color:transparent;color:var(--ink)}
.quote{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;max-width:340px;margin:6px 0 2px;padding:6px 10px;border:0;border-left:3px solid var(--accent);border-radius:10px;background:#2b16240a;text-align:left;cursor:pointer;font:inherit;color:inherit}
.quote:hover{background:#2b162412}
.quote b{font-size:12px;font-weight:500;color:var(--accent-dark)}
.quote span{display:block;max-width:100%;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quote .qi{width:14px;height:14px;vertical-align:-2px;margin-right:5px}
.quote.to-me{border-left-color:var(--ink)}
.quote.to-me b{color:var(--ink)}
.msg.mine .quote{background:#2b16240d}
@keyframes flash{0%,100%{box-shadow:0 16px 32px -24px #2b162470}30%{box-shadow:0 0 0 3px #e08a6d99,0 16px 32px -24px #2b162470}}
.msg.flash .bubble{animation:flash 1.4s ease}
.reply-bar{display:flex;align-items:center;gap:10px;padding:8px 6px 8px 10px;margin:0 2px;border-radius:14px;background:#ffffffc7;border:1px solid #ffffff;box-shadow:inset 3px 0 0 var(--accent);animation:rbIn .16s ease}
@keyframes rbIn{from{opacity:0;transform:translateY(6px)}}
.rb-ic{color:var(--accent-dark);display:grid;place-items:center;flex:0 0 auto}
.rb-ic .ic{width:18px;height:18px}
.rb-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rb-main b{font-size:12px;font-weight:500;color:var(--accent-dark)}
.rb-main span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-bar .icon-btn{width:32px;height:32px}
.composer.recording .reply-bar{display:none}
.bar small.typing{color:var(--accent-dark);font-style:italic}

/* ===== Ekrane të ndryshme ===== */
@media (max-width:1100px){
 .shell{grid-template-columns:210px minmax(0,1fr) 240px}
 .poster{left:270px;right:300px}
 .admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-height:760px) and (min-width:901px){
 .card{padding:24px 28px}.card-brand{font-size:34px}.card-brand .b-mark{width:34px;height:34px}
 .card input:not([type=checkbox]){padding:12px 14px;margin:8px 0}.btn{padding:12px;margin:8px 0}.fine{margin-top:12px}
}
@media (max-width:900px){
 .overlay{grid-template-columns:1fr;align-content:start;align-items:start;padding-right:0;column-gap:0}
 .auth-poster{height:auto;min-height:0;padding:28px 24px 8px;gap:24px}
 .auth-poster .p-copy em{font-size:clamp(46px,13vw,76px)}.auth-poster .p-copy p{font-size:17px;margin-top:18px}
 .auth-poster .p-logo{font-size:30px}.auth-poster .p-mark{width:38px;height:38px}
 .auth-side{padding:8px 16px 40px}.auth-side:before{width:100%}
 .card{max-width:470px;padding:30px 22px}
}
@media (max-width:860px){
 .shell{grid-template-columns:76px minmax(0,1fr);gap:12px;padding:12px}
 .left{padding:18px 8px}
 .left .brand span,.left small,.left-foot,.room .nm{display:none}
 .left .brand{justify-content:center;margin:0 0 22px}
 .room{justify-content:center;padding:12px 0}.room .ico{width:auto}.room .ico .ic{width:21px;height:21px}
 .room.dm-item{padding:8px 0}
 .right{position:fixed;top:12px;right:12px;bottom:12px;width:min(300px,86vw);z-index:40;transform:translateX(calc(100% + 30px));transition:transform .25s ease;background:var(--glass-strong)}
 body.people-open .right{transform:none}
 .only-mobile{display:inline-block}
 .icon-btn.only-mobile{display:inline-grid}
 .me-mobile{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;margin:4px 0 16px;border-radius:16px;background:#ffffffb8;border:1px solid #ffffff}
 .me-mobile .me-av{width:34px;height:34px;flex-basis:34px;font-size:14px}
 .me-mobile .me-av:after{width:10px;height:10px}
 .me-mobile-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
 .composer textarea{font-size:16px}
 .poster{left:110px;right:24px}
 .bar{padding:10px 10px 10px 16px;min-height:64px}.bar-title b{font-size:22px}
 .me{display:none}
 #logout{display:inline-block}
 .admin-panel{padding:12px}.admin-row{flex-direction:column;align-items:flex-start}.row-acts{justify-content:flex-start}
 .dm-section{display:none!important}
 .dm-mobile:not(.hidden){display:flex!important;flex-direction:column;flex:0 1 auto;min-height:0;max-height:45%}
 .dm-mobile .dm-item{justify-content:flex-start;padding:10px 12px}
 .dm-mobile .dm-item .nm{display:flex}
 .dm-mobile .room.dm-item{padding:8px 10px}
}
@media (max-width:560px){
 .shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
 .left{flex-direction:row;align-items:center;gap:6px;padding:8px 10px;border-radius:18px;overflow-x:auto;scrollbar-width:none}
 .left::-webkit-scrollbar{display:none}
 .left .brand{margin:0 6px 0 2px}
 #roomList{flex-direction:row;gap:4px;overflow:visible}
 .room{width:auto;padding:9px 12px;gap:6px}.room .nm{display:inline;font-size:14px}.room .ico{font-size:15px}
 .admin-panel .bar{flex-wrap:wrap}.admin-panel .bar-title b{white-space:normal;font-size:24px!important}
 .admin-panel .header-actions{width:100%;justify-content:flex-start}
 .poster{left:16px;right:16px;top:150px}
 .header-actions .ghost{padding:8px 9px;font-size:13px}
 .header-actions{flex-wrap:nowrap;gap:4px}
 #peopleToggle span{display:none}#peopleToggle .ic{margin:0}
 body.dm-mode #logout,body.dm-mode #saveAccountBtn,body.dm-mode #adminButton{display:none}
 .bar{gap:6px}
 .icon-btn{width:38px;height:38px}
 .room .ico .ic{width:17px;height:17px}
 .emoji-panel{left:0;width:calc(100vw - 24px)}
 .emoji-grid{grid-template-columns:repeat(7,minmax(0,1fr));height:210px}
 .mention-box{left:0}
 .admin-grid{grid-template-columns:1fr 1fr;gap:10px}.stat{padding:16px}.stat b{font-size:34px}
 .admin-main h2{font-size:32px}
 .msg{max-width:100%}
}