@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --g:#d4a853;--gl:#f0d68a;--gd:#b8922e;
  --bg:#080810;--bg2:#0c0c16;--bg3:#10101c;--bg4:#181830;
  --t:#f0ede4;--tm:#9e9a90;--td:#8a867a;
  --accent:#a78bfa;--green:#34d399;--red:#f87171;--blue:#60a5fa;
  --gg:linear-gradient(135deg,#b8922e 0%,#d4a853 25%,#f0d68a 50%,#d4a853 75%,#b8922e 100%);
  --sidebar-w:260px;--members-w:240px;
  --glow:rgba(212,168,83,.12);--glow-strong:rgba(212,168,83,.25);
  --border:rgba(212,168,83,.06);--border-hover:rgba(212,168,83,.15);
  --surface:rgba(255,255,255,.02);--surface-hover:rgba(255,255,255,.045);
}
html{height:100%}
body{font-family:'Inter',sans-serif;background:var(--bg);background-image:radial-gradient(ellipse at 20% 50%,rgba(212,168,83,.03) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(167,139,250,.03) 0%,transparent 50%);color:var(--t);height:100%;overflow:hidden;-webkit-font-smoothing:antialiased}

/* ===== THEMES ===== */
[data-theme="aube"]{--g:#b8860b;--gl:#daa520;--gd:#8b6508;--bg:#faf7f2;--bg2:#f4f0e8;--bg3:#ede8de;--bg4:#e2dcd0;--t:#2c2416;--tm:#7a7060;--td:#a09888;--accent:#8b5cf6;--green:#16a34a;--red:#dc2626;--blue:#2563eb;--gg:linear-gradient(135deg,#8b6508 0%,#b8860b 25%,#daa520 50%,#b8860b 75%,#8b6508 100%);--glow:rgba(184,134,11,.1);--glow-strong:rgba(184,134,11,.2);--border:rgba(184,134,11,.12);--border-hover:rgba(184,134,11,.25);--surface:rgba(0,0,0,.02);--surface-hover:rgba(0,0,0,.04)}
[data-theme="aube"] body{background:var(--bg);background-image:radial-gradient(ellipse at 20% 50%,rgba(184,134,11,.04) 0%,transparent 50%);color:var(--t)}
[data-theme="aube"] .gate{background:var(--bg)}
[data-theme="aube"] .sidebar{background:var(--bg2);border-right-color:var(--border)}
[data-theme="aube"] .ch-header{background:linear-gradient(90deg,var(--bg),rgba(184,134,11,.02))}
[data-theme="aube"] .right-panel{background:var(--bg2);border-left-color:var(--border)}
[data-theme="aube"] .msg:hover{background:rgba(0,0,0,.02)}
[data-theme="aube"] .msg .msg-content{color:rgba(44,36,22,.85)}
[data-theme="aube"] .msg .msg-avatar{background:linear-gradient(135deg,var(--bg4),rgba(184,134,11,.1));border-color:var(--border)}
[data-theme="aube"] .gate-form input,[data-theme="aube"] .msg-input-box textarea{background:rgba(255,255,255,.7);border-color:var(--border);color:var(--t)}
[data-theme="aube"] .sb-user{background:linear-gradient(90deg,rgba(0,0,0,.04),rgba(184,134,11,.03))}
[data-theme="aube"] .modal-box,.profile-box{background:var(--bg);border-color:var(--border-hover)}
[data-theme="aube"] .modal-box .field input,[data-theme="aube"] .modal-box .field textarea,.profile-field input,.profile-field textarea{background:rgba(255,255,255,.6);border-color:var(--border);color:var(--t)}
[data-theme="aube"] .emoji-picker,.msg-hover-actions{background:var(--bg3)}
[data-theme="aube"] .toast{background:var(--bg3)}
[data-theme="aube"] .msg.pinned{background:linear-gradient(90deg,rgba(184,134,11,.06),transparent 60%)}
[data-theme="aube"] .date-sep span{background:var(--bg)}

[data-theme="foret"]{--g:#8fbc6a;--gl:#b5d99c;--gd:#5a8a3a;--bg:#0a110c;--bg2:#0e1610;--bg3:#121c15;--bg4:#1a2a1e;--t:#e4ede6;--tm:#7e9a82;--td:#506854;--accent:#66d9ef;--green:#22c55e;--red:#f87171;--blue:#60a5fa;--gg:linear-gradient(135deg,#5a8a3a 0%,#8fbc6a 25%,#b5d99c 50%,#8fbc6a 75%,#5a8a3a 100%);--glow:rgba(143,188,106,.12);--glow-strong:rgba(143,188,106,.25);--border:rgba(143,188,106,.08);--border-hover:rgba(143,188,106,.18);--surface:rgba(255,255,255,.02);--surface-hover:rgba(255,255,255,.04)}
[data-theme="foret"] body{background:var(--bg);background-image:radial-gradient(ellipse at 30% 60%,rgba(143,188,106,.04) 0%,transparent 50%);color:var(--t)}
[data-theme="foret"] .sidebar{background:var(--bg2);border-right-color:var(--border)}
[data-theme="foret"] .ch-header{background:linear-gradient(90deg,var(--bg),rgba(143,188,106,.02))}
[data-theme="foret"] .right-panel{background:var(--bg2);border-left-color:var(--border)}
[data-theme="foret"] .msg .msg-avatar{background:linear-gradient(135deg,var(--bg4),rgba(143,188,106,.08));border-color:var(--border)}
[data-theme="foret"] .sb-user{background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(143,188,106,.02))}
[data-theme="foret"] .date-sep span{background:var(--bg)}

[data-theme="amethyste"]{--g:#c084fc;--gl:#d8b4fe;--gd:#9333ea;--bg:#0e0a14;--bg2:#120e1a;--bg3:#161220;--bg4:#201a30;--t:#ece6f4;--tm:#9a8eaa;--td:#6a5e7a;--accent:#f472b6;--green:#34d399;--red:#f87171;--blue:#60a5fa;--gg:linear-gradient(135deg,#9333ea 0%,#c084fc 25%,#d8b4fe 50%,#c084fc 75%,#9333ea 100%);--glow:rgba(192,132,252,.12);--glow-strong:rgba(192,132,252,.25);--border:rgba(192,132,252,.08);--border-hover:rgba(192,132,252,.18);--surface:rgba(255,255,255,.02);--surface-hover:rgba(255,255,255,.04)}
[data-theme="amethyste"] body{background:var(--bg);background-image:radial-gradient(ellipse at 20% 50%,rgba(192,132,252,.04) 0%,transparent 50%);color:var(--t)}
[data-theme="amethyste"] .sidebar{background:var(--bg2);border-right-color:var(--border)}
[data-theme="amethyste"] .ch-header{background:linear-gradient(90deg,var(--bg),rgba(192,132,252,.02))}
[data-theme="amethyste"] .right-panel{background:var(--bg2);border-left-color:var(--border)}
[data-theme="amethyste"] .msg .msg-avatar{background:linear-gradient(135deg,var(--bg4),rgba(192,132,252,.08));border-color:var(--border)}
[data-theme="amethyste"] .sb-user{background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(192,132,252,.02))}
[data-theme="amethyste"] .date-sep span{background:var(--bg)}

[data-theme="ocean"]{--g:#38bdf8;--gl:#7dd3fc;--gd:#0284c7;--bg:#060d14;--bg2:#0a1220;--bg3:#0e1828;--bg4:#142038;--t:#e0f2fe;--tm:#7eaac4;--td:#4a7a9a;--accent:#f472b6;--green:#34d399;--red:#f87171;--blue:#60a5fa;--gg:linear-gradient(135deg,#0284c7 0%,#38bdf8 25%,#7dd3fc 50%,#38bdf8 75%,#0284c7 100%);--glow:rgba(56,189,248,.12);--glow-strong:rgba(56,189,248,.25);--border:rgba(56,189,248,.08);--border-hover:rgba(56,189,248,.18);--surface:rgba(255,255,255,.02);--surface-hover:rgba(255,255,255,.04)}
[data-theme="ocean"] body{background:var(--bg);background-image:radial-gradient(ellipse at 30% 70%,rgba(56,189,248,.04) 0%,transparent 50%);color:var(--t)}
[data-theme="ocean"] .sidebar{background:var(--bg2);border-right-color:var(--border)}
[data-theme="ocean"] .ch-header{background:linear-gradient(90deg,var(--bg),rgba(56,189,248,.02))}
[data-theme="ocean"] .right-panel{background:var(--bg2);border-left-color:var(--border)}
[data-theme="ocean"] .msg .msg-avatar{background:linear-gradient(135deg,var(--bg4),rgba(56,189,248,.08));border-color:var(--border)}
[data-theme="ocean"] .sb-user{background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(56,189,248,.02))}
[data-theme="ocean"] .date-sep span{background:var(--bg)}

[data-theme="sable"]{--g:#d4a373;--gl:#e6c9a8;--gd:#a67c52;--bg:#f5f0e8;--bg2:#ede6db;--bg3:#e5ddd0;--bg4:#d9d0c0;--t:#3a2e22;--tm:#8a7a68;--td:#a89880;--accent:#8b5cf6;--green:#16a34a;--red:#dc2626;--blue:#2563eb;--gg:linear-gradient(135deg,#a67c52 0%,#d4a373 25%,#e6c9a8 50%,#d4a373 75%,#a67c52 100%);--glow:rgba(212,163,115,.1);--glow-strong:rgba(212,163,115,.2);--border:rgba(166,124,82,.12);--border-hover:rgba(166,124,82,.25);--surface:rgba(0,0,0,.02);--surface-hover:rgba(0,0,0,.04)}
[data-theme="sable"] body{background:var(--bg);color:var(--t)}
[data-theme="sable"] .gate{background:var(--bg)}
[data-theme="sable"] .sidebar{background:var(--bg2);border-right-color:var(--border)}
[data-theme="sable"] .ch-header{background:linear-gradient(90deg,var(--bg),rgba(212,163,115,.03))}
[data-theme="sable"] .right-panel{background:var(--bg2);border-left-color:var(--border)}
[data-theme="sable"] .msg:hover{background:rgba(0,0,0,.02)}
[data-theme="sable"] .msg .msg-content{color:rgba(58,46,34,.85)}
[data-theme="sable"] .msg .msg-avatar{background:linear-gradient(135deg,var(--bg4),rgba(212,163,115,.12));border-color:var(--border)}
[data-theme="sable"] .gate-form input,[data-theme="sable"] .msg-input-box textarea{background:rgba(255,255,255,.6);border-color:var(--border);color:var(--t)}
[data-theme="sable"] .sb-user{background:linear-gradient(90deg,rgba(0,0,0,.03),rgba(212,163,115,.04))}
[data-theme="sable"] .modal-box,.profile-box{background:var(--bg)}
[data-theme="sable"] .profile-field input,.profile-field textarea{background:rgba(255,255,255,.5)}
[data-theme="sable"] .emoji-picker,.msg-hover-actions{background:var(--bg3)}
[data-theme="sable"] .toast{background:var(--bg3)}
[data-theme="sable"] .date-sep span{background:var(--bg)}

[data-theme="glacier"]{--g:#67e8f9;--gl:#a5f3fc;--gd:#06b6d4;--bg:#f0fafa;--bg2:#e4f4f4;--bg3:#d6ecec;--bg4:#c0dede;--t:#134e4a;--tm:#5a9a94;--td:#7ab0aa;--accent:#a78bfa;--green:#16a34a;--red:#dc2626;--blue:#2563eb;--gg:linear-gradient(135deg,#06b6d4 0%,#67e8f9 25%,#a5f3fc 50%,#67e8f9 75%,#06b6d4 100%);--glow:rgba(103,232,249,.1);--glow-strong:rgba(103,232,249,.2);--border:rgba(6,182,212,.1);--border-hover:rgba(6,182,212,.2);--surface:rgba(0,0,0,.02);--surface-hover:rgba(0,0,0,.04)}
[data-theme="glacier"] body{background:var(--bg);color:var(--t)}
[data-theme="glacier"] .gate{background:var(--bg)}
[data-theme="glacier"] .sidebar{background:var(--bg2);border-right-color:var(--border)}
[data-theme="glacier"] .ch-header{background:linear-gradient(90deg,var(--bg),rgba(103,232,249,.03))}
[data-theme="glacier"] .right-panel{background:var(--bg2);border-left-color:var(--border)}
[data-theme="glacier"] .msg:hover{background:rgba(0,0,0,.02)}
[data-theme="glacier"] .msg .msg-content{color:rgba(19,78,74,.85)}
[data-theme="glacier"] .msg .msg-avatar{background:linear-gradient(135deg,var(--bg4),rgba(103,232,249,.1));border-color:var(--border)}
[data-theme="glacier"] .gate-form input,[data-theme="glacier"] .msg-input-box textarea{background:rgba(255,255,255,.7);border-color:var(--border);color:var(--t)}
[data-theme="glacier"] .sb-user{background:linear-gradient(90deg,rgba(0,0,0,.03),rgba(103,232,249,.04))}
[data-theme="glacier"] .modal-box,.profile-box{background:var(--bg)}
[data-theme="glacier"] .profile-field input,.profile-field textarea{background:rgba(255,255,255,.6)}
[data-theme="glacier"] .emoji-picker,.msg-hover-actions{background:var(--bg3)}
[data-theme="glacier"] .toast{background:var(--bg3)}
[data-theme="glacier"] .date-sep span{background:var(--bg)}

[data-theme="lotus"]{--g:#d4a853;--gl:#f0d68a;--gd:#b8922e;--bg:#fff0f5;--bg2:#ffe4ef;--bg3:#ffd6e8;--bg4:#ffc4dd;--t:#4a1030;--tm:#9e4870;--td:#c07090;--accent:#e8789e;--green:#16a34a;--red:#dc2626;--blue:#7c3aed;--gg:linear-gradient(135deg,#d4a853 0%,#f0d68a 25%,#e8789e 50%,#f0d68a 75%,#d4a853 100%);--glow:rgba(212,168,83,.12);--glow-strong:rgba(212,168,83,.25);--border:rgba(212,168,83,.18);--border-hover:rgba(212,168,83,.35);--surface:rgba(232,120,158,.04);--surface-hover:rgba(232,120,158,.08)}
[data-theme="lotus"] body{background:#fff0f5;background-image:radial-gradient(ellipse at 15% 25%,rgba(255,182,210,.25) 0%,transparent 45%),radial-gradient(ellipse at 85% 75%,rgba(212,168,83,.15) 0%,transparent 45%),radial-gradient(ellipse at 50% 50%,rgba(255,200,220,.1) 0%,transparent 60%);color:var(--t)}
[data-theme="lotus"] .gate{background:#fff0f5}
[data-theme="lotus"] .sidebar{background:linear-gradient(180deg,#ffe8f2,#fff0f5);border-right-color:rgba(212,168,83,.2)}
[data-theme="lotus"] .sb-header{background:linear-gradient(135deg,rgba(255,180,210,.15),rgba(212,168,83,.1));border-bottom-color:rgba(212,168,83,.15)}
[data-theme="lotus"] .sb-header img{filter:drop-shadow(0 0 8px rgba(212,168,83,.5))}
[data-theme="lotus"] .sb-header .title{color:#d4a853;text-shadow:0 0 12px rgba(212,168,83,.2)}
[data-theme="lotus"] .sb-header .sub{color:#e0789e}
[data-theme="lotus"] .ch-header{background:linear-gradient(90deg,rgba(255,240,245,.95),rgba(255,200,220,.3),rgba(212,168,83,.05));border-bottom-color:rgba(212,168,83,.12)}
[data-theme="lotus"] .right-panel{background:#ffe4ef;border-left-color:rgba(212,168,83,.15)}
[data-theme="lotus"] .msg:hover{background:rgba(255,180,210,.1)}
[data-theme="lotus"] .msg .msg-avatar{background:linear-gradient(135deg,#ffb8d4,rgba(212,168,83,.25));border-color:rgba(212,168,83,.3)}
[data-theme="lotus"] .msg .author{color:#d4a853;font-weight:700}
[data-theme="lotus"] .msg .msg-content{color:rgba(74,16,48,.8)}
[data-theme="lotus"] .msg .msg-time{color:#c07090}
[data-theme="lotus"] .member-item.founder .m-name,
[data-theme="lotus"] .msg.msg-owner .msg-author{background:linear-gradient(90deg,#b8850a,#c99520,#b8850a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}
[data-theme="lotus"] .member-item.master .m-name,
[data-theme="lotus"] .msg.msg-master .msg-author{background:linear-gradient(90deg,#b8850a,#c99520,#b8850a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}
[data-theme="lotus"] .member-item.founder .role-title,
[data-theme="lotus"] .member-item.master .role-title{color:#a07008}
[data-theme="lotus"] .member-item.founder{border-color:rgba(184,133,10,.35)}
[data-theme="lotus"] .member-item.master{border-color:rgba(184,133,10,.25)}
[data-theme="lotus"] .msg.msg-owner{border-color:rgba(184,133,10,.2)}
[data-theme="lotus"] .msg.msg-master{border-color:rgba(184,133,10,.15)}

[data-theme="lotus"] .msg-input-box textarea{background:rgba(255,255,255,.8);border:1.5px solid rgba(212,168,83,.25);color:var(--t)}
[data-theme="lotus"] .msg-input-box textarea:focus{border-color:#d4a853;box-shadow:0 0 16px rgba(212,168,83,.15),0 0 30px rgba(255,180,210,.08)}
[data-theme="lotus"] .msg-input-wrap{background:linear-gradient(180deg,rgba(255,228,239,.95),#fff0f5)}
[data-theme="lotus"] .sb-user{background:linear-gradient(90deg,rgba(255,180,210,.1),rgba(212,168,83,.08))}
[data-theme="lotus"] .date-sep span{background:#fff0f5;color:#d4a853;border-color:rgba(212,168,83,.2)}
[data-theme="lotus"] .ch-item.active{background:linear-gradient(90deg,rgba(212,168,83,.12),rgba(255,180,210,.1));color:#d4a853;border-left:3px solid #d4a853}
[data-theme="lotus"] .ch-item:hover{background:rgba(255,180,210,.12)}
[data-theme="lotus"] .ch-item{color:#9e4870}
[data-theme="lotus"] .upgrade-banner{border-color:rgba(212,168,83,.25);background:linear-gradient(135deg,rgba(255,180,210,.1),rgba(212,168,83,.08))}
[data-theme="lotus"] .upgrade-banner .ub-title{color:#d4a853}
[data-theme="lotus"] .modal-box{background:#fff0f5;border-color:rgba(212,168,83,.25)}
[data-theme="lotus"] .modal-box .field input,[data-theme="lotus"] .modal-box .field textarea{background:rgba(255,255,255,.7);border-color:rgba(212,168,83,.2);color:var(--t)}
[data-theme="lotus"] .gate-form input{background:rgba(255,255,255,.7);border-color:rgba(212,168,83,.2);color:var(--t)}
[data-theme="lotus"] .gate-form input:focus{border-color:#d4a853;box-shadow:0 0 12px rgba(212,168,83,.15)}
[data-theme="lotus"] .gate-btn{background:linear-gradient(135deg,#d4a853,#f0d68a,#e8789e);color:#4a1030;font-weight:700;box-shadow:0 4px 20px rgba(212,168,83,.3)}
[data-theme="lotus"] .gate-btn:hover{box-shadow:0 6px 28px rgba(212,168,83,.4)}
[data-theme="lotus"] .msg.pinned{background:linear-gradient(90deg,rgba(212,168,83,.08),rgba(255,180,210,.05),transparent 60%)}
[data-theme="lotus"] .emoji-picker{background:#ffe4ef;border-color:rgba(212,168,83,.2)}
[data-theme="lotus"] .msg-hover-actions{background:linear-gradient(135deg,#fff0f5,#ffe8f2)!important;border-color:rgba(212,168,83,.2)!important}
[data-theme="lotus"] .toast{background:linear-gradient(135deg,#ffe4ef,rgba(212,168,83,.08));border-color:rgba(212,168,83,.2)}
[data-theme="lotus"] .sn-tab{color:#9e4870}
[data-theme="lotus"] .sn-tab.active{color:#d4a853;border-bottom-color:#d4a853}
[data-theme="lotus"] .send-btn{background:linear-gradient(135deg,#d4a853,#f0d68a);color:#4a1030;box-shadow:0 2px 12px rgba(212,168,83,.3)}
[data-theme="lotus"] .sb-section-row .label{color:#d4a853;letter-spacing:2.5px}
[data-theme="lotus"] .create-ch-btn{color:#d4a853;border-color:rgba(212,168,83,.3)}
[data-theme="lotus"] .giri-particles span{background:#d4a853}
[data-theme="lotus"] .giri-particles span::after{background:radial-gradient(circle,rgba(212,168,83,.5) 0%,rgba(255,180,210,.2) 40%,transparent 70%)}

/* ===== LOGIN GATE ===== */
.gate{position:fixed;inset:0;z-index:1000;background:var(--bg);background-image:radial-gradient(ellipse at 50% 30%,rgba(212,168,83,.06) 0%,transparent 60%),radial-gradient(ellipse at 50% 80%,rgba(167,139,250,.04) 0%,transparent 50%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:28px;padding:24px}
.gate.hidden{display:none}
.gate-logo{width:80px;height:80px;border-radius:50%;filter:drop-shadow(0 0 30px rgba(212,168,83,.5));animation:gatePulse 3s ease-in-out infinite}
@keyframes gatePulse{0%,100%{filter:drop-shadow(0 0 30px rgba(212,168,83,.4))}50%{filter:drop-shadow(0 0 50px rgba(212,168,83,.7))}}
.gate h1{font-family:'Playfair Display',serif;font-size:2.2rem;text-align:center;letter-spacing:.5px}
.gate h1 em{color:var(--g);font-weight:700}
.gate p{color:var(--tm);text-align:center;max-width:440px;font-size:.9rem;line-height:1.6}
.gate-form{display:flex;gap:12px;width:100%;max-width:420px}
.gate-form input{flex:1;padding:14px 18px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--t);font-size:.95rem;outline:none;transition:.3s;font-family:'Inter',sans-serif;backdrop-filter:blur(8px)}
.gate-form input:focus{border-color:var(--g);box-shadow:0 0 0 3px rgba(212,168,83,.1)}
.gate-form button{padding:14px 32px;border-radius:12px;border:none;background:var(--gg);color:#0a0a0f;font-weight:700;font-size:.9rem;cursor:pointer;white-space:nowrap;transition:.3s;letter-spacing:.3px;background-size:200% 100%;animation:shimmer 3s ease infinite}
.gate-form button:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--glow-strong)}
@keyframes shimmer{0%{background-position:100% 50%}50%{background-position:0% 50%}100%{background-position:100% 50%}}
.gate-error{color:var(--red);font-size:.85rem;min-height:20px;text-align:center}
.gate-sub{display:flex;gap:16px;align-items:center;margin-top:8px}
.gate-sub a{color:var(--g);text-decoration:underline;font-size:.82rem;transition:.2s}
.gate-sub a:hover{color:var(--gl)}

/* Upgrade banner */
.upgrade-banner{background:linear-gradient(135deg,rgba(212,168,83,.06),rgba(167,139,250,.06));border:1px solid var(--border-hover);border-radius:12px;padding:14px 18px;margin:8px 8px 4px;cursor:pointer;transition:.25s;text-align:center}
.upgrade-banner:hover{border-color:var(--g);box-shadow:0 4px 16px var(--glow);transform:translateY(-1px)}
.upgrade-banner .ub-title{font-family:'Cormorant Garamond',serif;font-size:.9rem;font-weight:700;color:var(--g);margin-bottom:2px}
.upgrade-banner .ub-desc{font-size:.68rem;color:var(--tm);line-height:1.4}






/* Notification volume control */
.notif-section{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.notif-section label{font-size:.75rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--tm);font-weight:600;display:block;margin-bottom:10px}
.notif-volume-wrap{display:flex;align-items:center;gap:12px}
.notif-mute-btn{width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--t);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.notif-mute-btn:hover{background:var(--surface-hover);border-color:var(--border-hover)}
.notif-mute-btn.muted{opacity:.5}
.notif-slider{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:var(--bg4);outline:none;cursor:pointer}
.notif-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--g);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.notif-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--g);cursor:pointer;border:none}
.notif-vol-label{font-size:.8rem;color:var(--tm);min-width:36px;text-align:right}



.pwa-ios-guide{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;padding:20px}
.pwa-ios-box{background:var(--bg2);border:1px solid var(--border-hover);border-radius:20px;padding:28px 24px;max-width:340px;width:100%;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.pwa-ios-close{position:absolute;top:10px;right:14px;background:none;border:none;color:var(--tm);font-size:1.4rem;cursor:pointer}
.pwa-ios-step{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pwa-ios-num{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--g),var(--gl));color:#1a0f14;font-weight:800;font-size:.9rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pwa-ios-step div:last-child{font-size:.88rem;color:var(--t);line-height:1.4}
.pwa-ios-step b{color:var(--g)}
.pwa-ios-note{text-align:center;color:var(--g);font-size:.8rem;font-weight:600;margin:8px 0 0}


/* PWA sidebar install */
.sb-install{padding:6px 14px;margin:4px 10px;display:none;align-items:center;gap:8px;border-radius:8px;cursor:pointer;font-size:.72rem;color:var(--tm);transition:.2s;border:1px solid transparent}
.sb-install:hover{background:rgba(212,168,83,.06);color:var(--g);border-color:rgba(212,168,83,.12)}
.sb-install .sb-install-icon{font-size:.85rem}
.sb-install.visible{display:flex}

/* PWA Install pill */
.pwa-pill{display:none!important;align-items:center;gap:6px;position:fixed;top:12px;right:12px;z-index:60;padding:8px 14px;border-radius:20px;background:var(--bg2);border:1px solid var(--border-hover);font-size:.75rem;color:var(--g);font-weight:600;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.2);transition:.2s;backdrop-filter:blur(8px)}
.pwa-pill:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(0,0,0,.3);border-color:var(--g)}
.pwa-pill-x{background:none;border:none;color:var(--tm);font-size:.9rem;cursor:pointer;padding:0 0 0 6px;line-height:1}
.pwa-pill-x:hover{color:var(--t)}
@media(max-width:600px){.pwa-pill{top:auto;bottom:70px;right:10px;font-size:.7rem;padding:6px 12px}}


/* Video & file attachments */
.msg-video-wrap{margin-top:8px;display:inline-block}
.msg-video{max-width:360px;max-height:280px;border-radius:10px;border:1px solid var(--border);display:block}
.msg-video-actions{display:flex;gap:8px;margin-top:4px}
.msg-video-dl{font-size:.75rem;color:var(--g);text-decoration:none;padding:3px 10px;border:1px solid rgba(212,168,83,.2);border-radius:8px;transition:.2s;display:inline-flex;align-items:center;gap:4px}
.msg-video-dl:hover{background:rgba(212,168,83,.1);border-color:var(--g)}
.msg-file-link{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-top:6px;text-decoration:none;color:var(--t);transition:.2s;font-size:.82rem}
.msg-file-link:hover{border-color:var(--g);background:var(--surface-hover)}
.mf-icon{font-size:1.3rem}
.mf-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.mf-dl{color:var(--g);font-weight:600;font-size:.75rem;white-space:nowrap}
@media(max-width:600px){.msg-video{max-width:100%}}

/* @mention highlight */
.mention-tag{color:var(--g);font-weight:700;background:rgba(212,168,83,.1);padding:1px 4px;border-radius:4px;cursor:pointer}
.mention-tag:hover{background:rgba(212,168,83,.2)}
.member-item:hover{background:rgba(212,168,83,.06)!important;transform:translateX(2px);transition:.15s}


/* ===== CONTENT PROTECTION ===== */
.messages-wrap,.msg-content,.msg,.ch-header{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.msg-input-box textarea{-webkit-user-select:text;user-select:text}
@media print{body{display:none!important}}

/* ===== FLOATING PARTICLES ===== */
.giri-particles{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0;contain:strict}
.giri-particles span{position:absolute;width:3px;height:3px;background:var(--g);border-radius:50%;opacity:0;will-change:transform,opacity;backface-visibility:hidden;transform:translateZ(0)}
.giri-particles span::after{content:'';position:absolute;top:-5px;left:-5px;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle,var(--glow-strong) 0%,transparent 70%);pointer-events:none}
.giri-particles span:nth-child(odd){animation:giriFloat1 linear infinite}
.giri-particles span:nth-child(even){animation:giriFloat2 linear infinite}
.giri-particles span:nth-child(1){left:3%;animation-duration:22s;animation-delay:0s}
.giri-particles span:nth-child(2){left:9%;animation-duration:28s;animation-delay:2s;width:4px;height:4px}
.giri-particles span:nth-child(3){left:16%;animation-duration:18s;animation-delay:5s}
.giri-particles span:nth-child(4){left:22%;animation-duration:32s;animation-delay:1s;width:2px;height:2px}
.giri-particles span:nth-child(5){left:30%;animation-duration:24s;animation-delay:7s;width:4px;height:4px}
.giri-particles span:nth-child(6){left:37%;animation-duration:19s;animation-delay:3s}
.giri-particles span:nth-child(7){left:44%;animation-duration:26s;animation-delay:9s;width:2px;height:2px}
.giri-particles span:nth-child(8){left:50%;animation-duration:21s;animation-delay:4s;width:4px;height:4px}
.giri-particles span:nth-child(9){left:57%;animation-duration:30s;animation-delay:0s}
.giri-particles span:nth-child(10){left:63%;animation-duration:17s;animation-delay:6s;width:4px;height:4px}
.giri-particles span:nth-child(11){left:70%;animation-duration:25s;animation-delay:2s;width:2px;height:2px}
.giri-particles span:nth-child(12){left:76%;animation-duration:20s;animation-delay:8s}
.giri-particles span:nth-child(13){left:82%;animation-duration:28s;animation-delay:1s;width:4px;height:4px}
.giri-particles span:nth-child(14){left:88%;animation-duration:23s;animation-delay:5s}
.giri-particles span:nth-child(15){left:94%;animation-duration:16s;animation-delay:3s;width:2px;height:2px}
.giri-particles span:nth-child(16){left:6%;animation-duration:34s;animation-delay:11s;width:4px;height:4px}
.giri-particles span:nth-child(17){left:26%;animation-duration:27s;animation-delay:6s}
.giri-particles span:nth-child(18){left:46%;animation-duration:20s;animation-delay:9s;width:4px;height:4px}
.giri-particles span:nth-child(19){left:66%;animation-duration:29s;animation-delay:4s;width:2px;height:2px}
.giri-particles span:nth-child(20){left:86%;animation-duration:22s;animation-delay:7s;width:4px;height:4px}
@keyframes giriFloat1{
  0%{transform:translate3d(0,105vh,0) scale(0);opacity:0}
  4%{transform:translate3d(10px,95vh,0) scale(1);opacity:.8}
  20%{transform:translate3d(-15px,75vh,0) scale(.95);opacity:.6}
  40%{transform:translate3d(20px,55vh,0) scale(.85);opacity:.5}
  60%{transform:translate3d(-10px,35vh,0) scale(.7);opacity:.35}
  80%{transform:translate3d(12px,15vh,0) scale(.5);opacity:.2}
  100%{transform:translate3d(-5px,-5vh,0) scale(.3);opacity:0}
}
@keyframes giriFloat2{
  0%{transform:translate3d(0,108vh,0) scale(0);opacity:0}
  5%{transform:translate3d(-12px,93vh,0) scale(1);opacity:.75}
  25%{transform:translate3d(18px,70vh,0) scale(.9);opacity:.55}
  50%{transform:translate3d(-20px,45vh,0) scale(.8);opacity:.4}
  75%{transform:translate3d(14px,20vh,0) scale(.6);opacity:.25}
  100%{transform:translate3d(-8px,-3vh,0) scale(.2);opacity:0}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01s !important;animation-iteration-count:1 !important;transition-duration:.01s !important}.giri-particles{display:none !important}}

/* ===== FLOWERS & BUTTERFLIES ===== */

@media(max-width:680px){.giri-particles{display:none !important}}
@media(min-width:681px) and (max-width:900px){.giri-particles span:nth-child(n+8){display:none}}

/* ===== MAIN LAYOUT ===== */
.app{display:flex;flex-direction:column;height:100vh;height:100dvh;opacity:0;transition:opacity .4s}
.app.visible{opacity:1}

/* ===== SIDEBAR ===== */
.sidebar{width:var(--sidebar-w);background:var(--bg2);background-image:linear-gradient(180deg,rgba(212,168,83,.02) 0%,transparent 30%);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.sb-header{padding:18px 16px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;background:rgba(212,168,83,.015)}
.sb-header img{width:36px;height:36px;border-radius:50%;filter:drop-shadow(0 0 6px rgba(212,168,83,.3))}
.sb-header .title{font-family:'Cormorant Garamond',serif;color:var(--g);font-size:1.1rem;font-weight:700;letter-spacing:.5px}
.sb-header .sub{font-size:.7rem;color:var(--tm)}
.sb-section{padding:12px 8px 4px;font-size:.65rem;text-transform:uppercase;letter-spacing:2px;color:var(--td);font-weight:600}
.sb-channels{flex:1;overflow-y:auto;padding:0 8px 8px}
.sb-channels::-webkit-scrollbar{width:4px}
.sb-channels::-webkit-scrollbar-thumb{background:rgba(212,168,83,.18);border-radius:4px}
/* Sections académiques sidebar — 2026-05-22 */
.acad-section{margin:14px 0 4px}
.acad-section:first-child{margin-top:6px}
.acad-section-header{display:flex;align-items:center;gap:10px;padding:8px 12px 6px;border-bottom:1px solid rgba(212,168,83,.12);margin:0 6px 6px}
.acad-section-icon{font-size:1.1rem;opacity:.85}
.acad-section-titles{display:flex;flex-direction:column;line-height:1.15}
.acad-section-label{font-family:'Cormorant Garamond',serif;font-size:.95rem;font-weight:600;color:var(--g);letter-spacing:.6px}
.acad-section-sub{font-size:.65rem;color:var(--tm);opacity:.7;letter-spacing:.4px;text-transform:uppercase;margin-top:1px}
.acad-section-body{display:flex;flex-direction:column;gap:1px;padding:0 2px}
.ch-item.readonly-channel{opacity:.92}
.ch-item .ro-lock{font-size:.7em;opacity:.55;margin-left:3px}

.ch-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;cursor:pointer;transition:.15s;font-size:.88rem;color:var(--tm);position:relative}
.ch-item:hover{background:rgba(255,255,255,.04);color:var(--t)}
.ch-item.active{background:rgba(212,168,83,.08);color:var(--g);border-left:2px solid var(--g);padding-left:8px}
.ch-item .icon{font-size:1.1rem;width:24px;text-align:center;flex-shrink:0}
.ch-item .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-item .badge{min-width:18px;height:18px;border-radius:9px;background:var(--g);color:#0a0a0f;font-size:.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}

/* User footer */
.sb-user{padding:12px 14px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(212,168,83,.02))}
.sb-user .avatar{width:32px;height:32px;border-radius:50%;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:var(--g);flex-shrink:0;overflow:hidden;cursor:pointer}
.sb-user .avatar img{width:100%;height:100%;object-fit:cover}
.sb-user .info{flex:1;overflow:hidden;cursor:pointer}
.sb-user .uname{font-size:.82rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-user .settings-btn{width:28px;height:28px;border-radius:6px;border:none;background:transparent;color:var(--tm);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;font-size:1rem}
.sb-user .settings-btn:hover{background:rgba(255,255,255,.06);color:var(--t)}

/* ===== MAIN CHAT ===== */
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.ch-header{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;background:linear-gradient(90deg,var(--bg),rgba(212,168,83,.015));flex-shrink:0}
.ch-header .ch-icon{font-size:1.3rem}
.ch-header .ch-info{flex:1}
.ch-header .ch-name{font-weight:600;font-size:1rem}
.ch-header .ch-desc{font-size:.75rem;color:var(--tm)}
.ch-header .ch-actions{display:flex;gap:6px}
.ch-header .ch-actions button{padding:6px 10px;border-radius:6px;border:none;background:rgba(255,255,255,.04);color:var(--tm);cursor:pointer;font-size:.78rem;transition:.2s;display:flex;align-items:center;gap:4px}
.ch-header .ch-actions button:hover{background:rgba(255,255,255,.08);color:var(--t)}

/* Mobile members panel */
.mobile-members-btn{display:none;padding:6px 10px;border-radius:6px;border:none;background:rgba(255,255,255,.04);color:var(--tm);cursor:pointer;font-size:1rem;transition:.2s}
.mobile-members-btn:hover{background:rgba(255,255,255,.08);color:var(--t)}
.mobile-members-overlay{display:none}
.mobile-members-panel{display:none}
@media(max-width:900px){
  .mobile-members-btn{display:flex;align-items:center;justify-content:center}
  .mobile-members-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s}
  .mobile-members-overlay.open{opacity:1;pointer-events:auto}
  .mobile-members-panel{position:fixed;top:0;right:-300px;bottom:0;width:280px;z-index:201;background:var(--bg2);border-left:1px solid var(--border);display:flex;flex-direction:column;transition:right .3s ease;box-shadow:-4px 0 24px rgba(0,0,0,.3)}
  .mobile-members-panel.open{right:0}
  .mobile-members-header{padding:16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
  .mobile-members-header h3{margin:0;font-size:.95rem;font-weight:600;color:var(--t)}
  .mobile-members-close{background:none;border:none;color:var(--tm);font-size:1.3rem;cursor:pointer;padding:4px 8px;border-radius:6px;transition:.15s}
  .mobile-members-close:hover{color:var(--t);background:rgba(255,255,255,.05)}
  .mobile-members-search{padding:8px 12px}
  .mobile-members-search input{width:100%;padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg3);color:var(--t);font-size:16px;outline:none;font-family:inherit}
  .mobile-members-search input:focus{border-color:var(--g)}
  .mobile-members-search input::placeholder{color:var(--td)}
  .mobile-members-list{flex:1;overflow-y:auto;padding:0 8px 16px}
  .mobile-members-list::-webkit-scrollbar{width:3px}
  .mobile-members-list::-webkit-scrollbar-thumb{background:rgba(212,168,83,.1);border-radius:3px}
}
[data-theme="lotus"] .mobile-members-panel{background:linear-gradient(180deg,#ffe8f2,#fff0f5)}

.messages-wrap{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:2px;position:relative}


/* === Butterflies XP === */
.butterfly{position:fixed;font-size:1.6rem;z-index:150;cursor:pointer;animation:butterflyFloat 8s ease-in-out forwards;pointer-events:all;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));transition:transform .1s}
.butterfly:hover{transform:scale(1.3)}
.butterfly.caught{animation:butterflyCatch .5s ease forwards;pointer-events:none}
@keyframes butterflyFloat{
  0%{opacity:0;transform:translateY(20px) rotate(-5deg)}
  5%{opacity:1}
  15%{transform:translateX(30px) translateY(-40px) rotate(5deg)}
  30%{transform:translateX(-20px) translateY(-100px) rotate(-8deg)}
  45%{transform:translateX(50px) translateY(-60px) rotate(3deg)}
  60%{transform:translateX(-30px) translateY(-120px) rotate(-5deg)}
  75%{transform:translateX(40px) translateY(-80px) rotate(7deg)}
  90%{opacity:1;transform:translateX(-10px) translateY(-150px) rotate(-3deg)}
  100%{opacity:0;transform:translateX(20px) translateY(-200px) rotate(5deg)}
}
@keyframes butterflyCatch{
  0%{transform:scale(1);opacity:1}
  50%{transform:scale(1.8);opacity:1}
  100%{transform:scale(0);opacity:0}
}
.xp-popup{position:fixed;z-index:151;font-size:.85rem;font-weight:700;color:#d4a853;pointer-events:none;animation:xpPop 1.2s ease-out forwards;text-shadow:0 1px 3px rgba(0,0,0,.3)}
@keyframes xpPop{
  0%{opacity:0;transform:translateY(0) scale(.5)}
  20%{opacity:1;transform:translateY(-10px) scale(1.1)}
  100%{opacity:0;transform:translateY(-50px) scale(.8)}
}


/* === DM Sidebar Preview === */
@keyframes bannerPop{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.sb-dm-section{padding:8px 10px 4px;border-bottom:1px solid var(--border)}
.sb-dm-label{display:flex;align-items:center;justify-content:space-between;font-size:.65rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--tm);font-weight:600;padding:0 2px 6px}
.sb-dm-label .sb-dm-all{font-size:.7rem;cursor:pointer;opacity:.7;text-transform:none;letter-spacing:0;font-weight:400}
.sb-dm-label .sb-dm-all:hover{opacity:1;color:var(--g)}
.sb-dm-item{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:8px;cursor:pointer;transition:.15s}
.sb-dm-item:hover{background:rgba(255,255,255,.05)}
.sb-dm-item.has-unread{background:rgba(212,168,83,.06)}
.sb-dm-av{width:28px;height:28px;border-radius:50%;flex-shrink:0;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:var(--g);overflow:hidden}
.sb-dm-av img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.sb-dm-body{flex:1;min-width:0}
.sb-dm-name{font-size:.78rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-dm-preview{font-size:.7rem;color:var(--tm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.sb-dm-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.sb-dm-time{font-size:.62rem;color:var(--tm);opacity:.7;white-space:nowrap}
.sb-dm-badge{background:var(--gg);color:#0a0a0f;border-radius:10px;font-size:.6rem;font-weight:800;padding:1px 5px;min-width:16px;text-align:center;line-height:1.4}
.sb-dm-empty{font-size:.72rem;color:var(--tm);text-align:center;padding:8px 4px;opacity:.6}
/* DM icons on desktop members */
.member-item{position:relative}




.msg-avatar[data-dm-id]{cursor:pointer;transition:transform .15s}
.msg-avatar[data-dm-id]:hover{transform:scale(1.1)}
.dm-group-icon{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#d4a853));display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#fff;flex-shrink:0}
.dm-stacked-av{position:relative;width:44px;height:44px;flex-shrink:0}
.dm-stacked-av img,.dm-stacked-av .dm-sa-ph{width:28px;height:28px;border-radius:50%;object-fit:cover;position:absolute;border:2px solid var(--bg);font-size:.6rem;font-weight:700;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--bg3),var(--bg4));color:var(--tm)}
.dm-stacked-av>:nth-child(1){top:0;left:0;z-index:3}
.dm-stacked-av>:nth-child(2){top:4px;left:14px;z-index:2}
.dm-stacked-av>:nth-child(3){top:14px;left:6px;z-index:1}
.dm-header-group-names{font-size:.82rem;font-weight:600;color:var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.dm-header-group-sub{font-size:.68rem;color:var(--tm);display:flex;align-items:center;gap:4px}
.dm-header-group-sub .dm-online-count{display:inline-block;width:6px;height:6px;border-radius:50%;background:#22c55e}
.dm-add-btn{background:none;color:var(--accent);border:1.5px solid var(--border);width:34px;height:34px;border-radius:50%;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-left:auto;flex-shrink:0;transition:all .2s;font-weight:300}
.dm-add-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(1.05)}
.dm-add-btn{background:var(--accent);color:#fff;border:none;width:32px;height:32px;border-radius:50%;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-left:auto;flex-shrink:0;transition:transform .15s}
.dm-add-btn:hover{transform:scale(1.1)}
.dm-sender-name{font-size:.72rem;color:var(--tm);padding:0 6px 2px;font-weight:600}
.dm-mp-cb{width:20px;height:20px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}
.dm-group-start{display:none;position:sticky;bottom:0;padding:12px;background:var(--bg);border-top:1px solid var(--border)}
.dm-group-start.visible{display:block}
.dm-group-start button{width:100%;padding:10px;border:none;border-radius:10px;background:var(--accent);color:#fff;font-weight:600;cursor:pointer;font-size:.9rem}
.dm-group-start button:hover{opacity:.9}
.dm-member-pick{display:flex;align-items:center;gap:10px}
/* === DM Private Messages === */
.dm-overlay{position:fixed;top:0;right:0;bottom:0;width:100%;background:var(--bg);z-index:9999;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);will-change:transform}
@media(min-width:901px){.dm-overlay{width:420px;left:auto;border-left:1px solid var(--border);box-shadow:-4px 0 24px rgba(0,0,0,.12)}}
.dm-overlay.active{transform:translateX(0)}

@media(min-width:901px){

.dm-overlay.active{transform:translateX(0)}
}

.dm-header{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg2);min-height:56px}
.dm-back{background:none;border:none;color:var(--text);font-size:1.4rem;cursor:pointer;padding:6px;border-radius:50%;transition:background .15s;line-height:1}
.dm-back:hover{background:var(--bg3)}
.dm-header-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--border)}
.dm-header-avatar-ph{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#d4a853);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700}
.dm-header-info{flex:1;min-width:0}
.dm-header-info h3{margin:0;font-size:.95rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-header-info small{color:var(--tm);font-size:.75rem}
.dm-header-info .dm-online-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#22c55e;margin-right:4px;vertical-align:middle}
.dm-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:6px;background:var(--bg);min-height:0;overflow-x:hidden}
.dm-date-sep{text-align:center;padding:8px 0;font-size:.72rem;color:var(--tm);font-weight:500}
.dm-msg{display:flex;gap:8px;max-width:80%}
.dm-msg.mine{align-self:flex-end;flex-direction:row-reverse}
@keyframes dmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dm-msg-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0;margin-top:auto}
.dm-msg-content{display:flex;flex-direction:column;gap:1px}
.dm-bubble{padding:10px 14px;border-radius:18px;font-size:.9rem;line-height:1.45;word-wrap:break-word;background:var(--bg2);color:var(--text);border:1px solid var(--border);border-bottom-left-radius:4px;max-width:100%}
.dm-msg.mine .dm-bubble{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 80%,#d4a853));color:#fff;border:none;border-radius:18px;border-bottom-right-radius:4px}
.dm-bubble a{color:inherit;text-decoration:underline}
.dm-time{font-size:.65rem;color:var(--tm);padding:0 6px}
.dm-msg.mine .dm-time{text-align:right}
.dm-input-wrap{padding:8px 12px 12px;border-top:1px solid var(--border);background:var(--bg2)}
.dm-input-box{display:flex;align-items:flex-end;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:24px;padding:4px 6px 4px 16px;transition:border-color .2s}
.dm-input-box:focus-within{border-color:var(--accent)}
.dm-input-box textarea{flex:1;border:none;background:transparent;color:var(--text);font-size:.9rem;resize:none;max-height:100px;outline:none;font-family:inherit;padding:8px 0;line-height:1.35}
.dm-send-btn{width:36px;height:36px;border-radius:50%;border:none;background:var(--accent);color:#fff;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,opacity .15s;flex-shrink:0}
.dm-send-btn:disabled{opacity:.3;transform:scale(.9);cursor:default}
.dm-send-btn:not(:disabled):hover{transform:scale(1.05)}
.dm-convlist{flex:1;overflow-y:auto;padding:8px 0}
.dm-conv{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background .15s;position:relative}
.dm-conv:hover{background:var(--bg3)}
.dm-conv:active{background:var(--bg4,var(--bg3))}
.dm-conv-av{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0}
.dm-conv-av-ph{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#d4a853);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;flex-shrink:0}
.dm-conv-body{flex:1;min-width:0}
.dm-conv-name{font-weight:600;font-size:.92rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-conv-last{font-size:.82rem;color:var(--tm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.dm-conv-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.dm-conv-time{font-size:.7rem;color:var(--tm)}
.dm-conv-badge{min-width:20px;height:20px;border-radius:10px;background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 6px}
.dm-empty{text-align:center;padding:50px 20px;color:var(--tm)}
.dm-empty-icon{font-size:3rem;margin-bottom:12px;opacity:.6}
.dm-empty p{font-size:.88rem;line-height:1.5}
.dm-new-btn{margin:12px 16px;padding:14px 20px;border-radius:14px;border:none;background:var(--accent);color:#fff;font-size:.92rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s,box-shadow .15s;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.dm-new-btn:hover{transform:scale(1.02);box-shadow:0 4px 16px rgba(0,0,0,.2)}
.dm-member-pick{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;transition:background .15s;border-radius:8px;margin:2px 8px}
.dm-member-pick:hover{background:var(--bg3)}
.dm-member-pick img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.dm-member-pick .dm-mp-ph{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}
.dm-member-pick .dm-mp-info{flex:1}
.dm-member-pick .dm-mp-name{font-weight:600;font-size:.9rem;color:var(--text)}
.dm-member-pick .dm-mp-role{font-size:.75rem;color:var(--tm)}
.dm-search{width:100%;padding:10px 14px;border:none;border-bottom:1px solid var(--border);background:var(--bg);color:var(--text);font-size:.9rem;outline:none;font-family:inherit}
.dm-search::placeholder{color:var(--tm)}
.dm-conv-del{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:none;background:transparent;color:var(--tm);font-size:.85rem;cursor:pointer;display:none;align-items:center;justify-content:center;transition:all .15s;z-index:2}
.dm-conv:hover .dm-conv-del{display:flex}
.dm-conv-del:hover{background:rgba(239,68,68,.15);color:#ef4444}
.dm-attach-btn{width:36px;height:36px;border-radius:50%;border:none;background:transparent;color:var(--tm);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s;flex-shrink:0}
.dm-attach-btn:hover{color:var(--accent)}
.dm-file-input{display:none}
.dm-attach-preview{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--bg);border-top:1px solid var(--border);font-size:.82rem;color:var(--text)}
.dm-attach-preview img{max-height:60px;border-radius:6px}
.dm-attach-preview .dm-ap-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-attach-preview .dm-ap-remove{cursor:pointer;color:var(--tm);font-size:1rem;padding:4px}
.dm-attach-preview .dm-ap-remove:hover{color:#ef4444}
.dm-bubble img.dm-msg-img{max-width:260px;max-height:200px;border-radius:10px;cursor:pointer;display:block;margin:4px 0}
.dm-bubble .dm-msg-file{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(0,0,0,.08);border-radius:8px;margin:4px 0;text-decoration:none;color:inherit;font-size:.85rem}
.dm-bubble .dm-msg-file:hover{background:rgba(0,0,0,.12)}
.dm-bubble .dm-msg-file-icon{font-size:1.3rem}
.dm-bubble .dm-msg-file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-delete-confirm{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:100001;display:flex;align-items:center;justify-content:center}
.dm-delete-dialog{background:var(--bg);border-radius:16px;padding:24px;max-width:340px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.dm-delete-dialog h4{margin:0 0 8px;color:var(--text);font-size:1rem}
.dm-delete-dialog p{margin:0 0 20px;color:var(--tm);font-size:.85rem}
.dm-delete-dialog .dm-del-btns{display:flex;gap:10px;justify-content:center}
.dm-delete-dialog .dm-del-btns button{padding:10px 24px;border-radius:10px;border:none;font-size:.88rem;font-weight:600;cursor:pointer}
.dm-delete-dialog .dm-del-cancel{background:var(--bg2);color:var(--text)}
.dm-delete-dialog .dm-del-yes{background:#ef4444;color:#fff}

/* Pull to refresh */
.ptr-indicator{position:absolute;top:0;left:50%;transform:translateX(-50%) translateY(-40px);z-index:10;width:36px;height:36px;border-radius:50%;background:var(--bg2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1rem;transition:transform .2s,opacity .2s;opacity:0;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.ptr-indicator.pulling{opacity:1}
.ptr-indicator.refreshing{opacity:1;transform:translateX(-50%) translateY(10px);animation:ptrSpin .8s linear infinite}
@keyframes ptrSpin{from{transform:translateX(-50%) translateY(10px) rotate(0deg)}to{transform:translateX(-50%) translateY(10px) rotate(360deg)}}

.messages-wrap::-webkit-scrollbar{width:6px}
.messages-wrap::-webkit-scrollbar-thumb{background:rgba(212,168,83,.1);border-radius:3px}
.msg{display:flex;gap:12px;padding:6px 8px;border-radius:8px;transition:.1s;position:relative}
.msg:hover{background:var(--surface)}
.msg .msg-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--bg4),rgba(212,168,83,.08));display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:var(--g);flex-shrink:0;margin-top:2px;overflow:hidden;border:1px solid var(--border)}
.msg .msg-avatar img{width:100%;height:100%;object-fit:cover}
/* Toge GIRI evolutive (liseré tier) — 2026-05-22 */
.msg .msg-avatar, .m-avatar { position: relative; }
.giri-toge-ring { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 3; }
.giri-toge-ring.tier-novice   { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.giri-toge-ring.tier-initie   { box-shadow: inset 0 0 0 2px #4caf50; }
.giri-toge-ring.tier-disciple { box-shadow: inset 0 0 0 2px #8b1538; }
.giri-toge-ring.tier-maitre   { box-shadow: inset 0 0 0 2px #d4a853; animation: giri-toge-gold 3s ease-in-out infinite; }
@keyframes giri-toge-gold {
    0%,100% { box-shadow: inset 0 0 0 2px #d4a853; }
    50%     { box-shadow: inset 0 0 0 2px #f0d078, inset 0 0 8px rgba(255,215,128,.45); }
}
/* Profile avatar (modal) */
.profile-avatar-circle { position: relative; }
.profile-avatar-circle .giri-toge-ring { z-index: 4; }
@media (prefers-reduced-motion: reduce) {
    .giri-toge-ring.tier-maitre { animation: none; }
}

.msg .msg-body{flex:1;min-width:0}
.msg .msg-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.msg .msg-author{font-weight:600;font-size:.88rem;cursor:pointer;transition:opacity .2s}
.msg .msg-author:hover{opacity:.75}
/* Owner & Master message styles */
.msg.msg-owner{background:linear-gradient(135deg,rgba(212,168,83,.06),rgba(212,168,83,.02));border:1px solid rgba(212,168,83,.15);border-radius:12px}
.msg.msg-owner .msg-author{background:linear-gradient(90deg,#d4a853,#f0d68a,#d4a853);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800}
.msg.msg-master{background:linear-gradient(135deg,rgba(212,168,83,.04),rgba(212,168,83,.01));border:1px solid rgba(212,168,83,.1);border-radius:10px}
.msg.msg-master .msg-author{color:var(--g);font-weight:700}

.msg .msg-time{font-size:.7rem;color:var(--td)}
.msg .msg-content{font-size:.9rem;line-height:1.7;word-break:break-word;white-space:pre-wrap;color:rgba(236,233,224,.9)}
.msg .msg-content strong{color:var(--g);font-weight:700;letter-spacing:.2px}
.msg .msg-content a{color:var(--g);text-decoration:underline}
.msg.pinned{border-left:3px solid var(--g);padding-left:12px;background:linear-gradient(90deg,rgba(212,168,83,.04),transparent 60%)}
.msg .pin-badge{position:absolute;top:4px;right:8px;font-size:.6rem;color:var(--g);display:flex;align-items:center;gap:3px}
.msg .reply-ref{font-size:.75rem;color:var(--tm);padding:4px 8px;border-left:2px solid rgba(212,168,83,.3);margin-bottom:4px;background:rgba(255,255,255,.02);border-radius:0 4px 4px 0;cursor:pointer}
.msg .reply-ref:hover{background:rgba(255,255,255,.04)}
.msg .reply-ref strong{color:var(--g)}
.msg-reactions{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.msg-reactions .reaction{padding:4px 12px;border-radius:20px;border:1px solid var(--border);background:var(--surface);font-size:.85rem;cursor:pointer;transition:all .2s cubic-bezier(.175,.885,.32,1.275);display:flex;align-items:center;gap:5px;user-select:none}
.msg-reactions .reaction:hover{border-color:var(--border-hover);background:rgba(212,168,83,.08);transform:scale(1.15)}
.msg-reactions .reaction:active{transform:scale(.9)}
.msg-reactions .reaction.mine{border-color:rgba(212,168,83,.4);background:rgba(212,168,83,.12);box-shadow:0 0 8px rgba(212,168,83,.15)}
.msg-reactions .reaction .count{font-size:.72rem;color:var(--tm);font-weight:600}
.msg-reactions .reaction .emoji-pop{animation:emojiPop .4s cubic-bezier(.175,.885,.32,1.275)}
.reaction-float{position:fixed;pointer-events:none;z-index:9999;font-size:1.5rem;opacity:1;transition:all .8s cubic-bezier(.25,.46,.45,.94)}
.reaction-float.fly{transform:translateY(-60px) scale(1.8);opacity:0}
@keyframes emojiPop{0%{transform:scale(0)}50%{transform:scale(1.4)}100%{transform:scale(1)}}
.msg .msg-hover-actions{position:absolute;top:-12px;right:8px;display:none;gap:4px;background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid rgba(212,168,83,.2);border-radius:12px;padding:4px 6px;box-shadow:0 4px 16px rgba(0,0,0,.08),0 0 0 1px rgba(212,168,83,.06);backdrop-filter:blur(12px)}
.msg:hover .msg-hover-actions{display:flex}
.msg .msg-hover-actions button{width:30px;height:30px;border:none;background:transparent;color:var(--tm);cursor:pointer;border-radius:8px;font-size:.85rem;display:flex;align-items:center;justify-content:center;transition:.2s}
.msg .msg-hover-actions button:hover{background:rgba(212,168,83,.1);color:var(--g);transform:scale(1.1)}
.msg .msg-hover-actions button[title="Supprimer"]:hover{color:var(--red)}
.giri-ctx-menu{position:fixed;z-index:9999;min-width:180px;padding:6px 0;background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid rgba(212,168,83,.2);border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.25),0 0 0 1px rgba(212,168,83,.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;transform:scale(.95);transition:opacity .15s,transform .15s;overflow:hidden}
.giri-ctx-menu.show{opacity:1;transform:scale(1)}
.giri-ctx-menu-item{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:.85rem;color:var(--t);cursor:pointer;transition:.15s;border:none;background:none;width:100%;text-align:left;font-family:inherit}
.giri-ctx-menu-item:hover{background:rgba(212,168,83,.08)}
.giri-ctx-menu-item .ctx-icon{font-size:1rem;width:20px;text-align:center}
.giri-ctx-menu-item.danger{color:#e74c3c}
.giri-ctx-menu-item.danger:hover{background:rgba(231,76,60,.08)}
.giri-ctx-sep{height:1px;margin:4px 12px;background:rgba(212,168,83,.1)}
/* Swipe to reply */
.msg .msg-bubble{transition:transform .2s ease-out}
.msg .swipe-reply-hint{position:absolute;left:4px;top:50%;transform:translateY(-50%) scale(0);opacity:0;width:28px;height:28px;border-radius:50%;background:rgba(212,168,83,.15);display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--g);transition:transform .15s,opacity .15s;pointer-events:none}
.msg .swipe-reply-hint.show{transform:translateY(-50%) scale(1);opacity:1}

.msg-input-wrap{padding:12px 20px 16px;border-top:1px solid rgba(255,255,255,.04);flex-shrink:0}
.msg-input-wrap.master-frame{border:1.5px solid rgba(212,168,83,.25);border-radius:16px;margin:6px 12px 8px;padding:10px 14px 12px;background:linear-gradient(135deg,rgba(212,168,83,.03),rgba(184,146,46,.01));box-shadow:0 0 20px rgba(212,168,83,.04),inset 0 0 30px rgba(212,168,83,.02);animation:masterFrameGlow 4s ease-in-out infinite;position:relative}
.msg-input-wrap.master-frame::before{content:'';position:absolute;top:-1px;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(212,168,83,.3),transparent)}
.msg-input-wrap.master-frame::after{content:'\2726';position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:.5rem;color:rgba(212,168,83,.4);background:var(--bg,#0a0a0f);padding:0 6px}
@keyframes masterFrameGlow{0%,100%{border-color:rgba(212,168,83,.2);box-shadow:0 0 15px rgba(212,168,83,.03),inset 0 0 20px rgba(212,168,83,.01)}50%{border-color:rgba(212,168,83,.35);box-shadow:0 0 25px rgba(212,168,83,.06),inset 0 0 30px rgba(212,168,83,.03)}}
.msg-input-reply{display:none;padding:8px 12px;margin-bottom:8px;border-radius:8px;background:rgba(212,168,83,.04);border:1px solid rgba(212,168,83,.1);font-size:.8rem;color:var(--tm);align-items:center;gap:8px}
.msg-input-reply.visible{display:flex}
.msg-input-reply strong{color:var(--g)}
.msg-input-reply .close-reply{margin-left:auto;cursor:pointer;color:var(--td);font-size:1rem}
.msg-input-reply .close-reply:hover{color:var(--t)}
.typing-indicator{height:22px;padding:2px 16px 4px;margin-bottom:2px;font-size:.75rem;color:var(--tm);opacity:.7;display:flex;align-items:center;gap:6px;overflow:hidden;transition:opacity .2s}
.typing-dots{display:inline-flex;gap:3px}
.typing-dots span{width:4px;height:4px;background:var(--g);border-radius:50%;animation:typingBounce 1.2s infinite}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.msg-input-box{display:flex;gap:10px;align-items:flex-end}
.msg-input-box textarea{flex:1;padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:var(--surface);backdrop-filter:blur(8px);color:var(--t);font-size:.9rem;font-family:'Inter',sans-serif;resize:none;outline:none;transition:.3s;min-height:44px;max-height:160px;line-height:1.5}
.msg-input-box textarea:focus{border-color:rgba(212,168,83,.35);box-shadow:0 0 0 3px var(--glow),0 0 20px rgba(212,168,83,.05)}
.msg-input-box textarea::placeholder{color:var(--td)}
.msg-input-box button{width:44px;height:44px;border-radius:12px;border:none;background:var(--gg);color:#0a0a0f;cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:.3s;flex-shrink:0;box-shadow:0 2px 10px rgba(212,168,83,.15)}
.msg-input-box button:hover{transform:translateY(-2px);box-shadow:0 6px 20px var(--glow-strong)}
.msg-input-box button:disabled{opacity:.3;cursor:not-allowed;transform:none;box-shadow:none}

/* ===== RIGHT PANEL ===== */
.right-panel{width:var(--members-w);background:var(--bg2);background-image:linear-gradient(180deg,rgba(167,139,250,.02) 0%,transparent 30%);border-left:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.rp-section{padding:12px 14px 6px;font-size:.65rem;text-transform:uppercase;letter-spacing:2px;color:var(--td);font-weight:600}
.rp-members{flex:1;overflow-y:auto;padding:0 10px 10px}
.rp-members::-webkit-scrollbar{width:3px}
.rp-members::-webkit-scrollbar-thumb{background:rgba(212,168,83,.1);border-radius:3px}
.member-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;transition:.15s;cursor:default}
.member-item:hover{background:rgba(255,255,255,.03)}
.member-item .m-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--bg4),rgba(212,168,83,.06));display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;color:var(--g);flex-shrink:0;position:relative;overflow:hidden;border:1px solid var(--border)}
.member-item .m-avatar img{width:100%;height:100%;object-fit:cover}
.member-item .m-avatar .online-dot{position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-radius:50%;background:var(--green);border:2px solid var(--bg2)}
.member-item .m-name{font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}

/* Date separator */
.date-sep{text-align:center;padding:12px 0;position:relative}
.date-sep::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.04)}
.date-sep span{position:relative;background:var(--bg);padding:0 14px;font-size:.72rem;color:var(--td);text-transform:uppercase;letter-spacing:1px}

/* Welcome */
.welcome-msg{text-align:center;padding:60px 20px;max-width:500px;margin:auto}
.welcome-msg h2{font-family:'Playfair Display',serif;font-size:1.6rem;margin-bottom:12px;letter-spacing:.3px}
.welcome-msg h2 em{color:var(--g);font-weight:700}
.welcome-msg p{color:var(--tm);font-size:.88rem;line-height:1.6}
.loading-dots{display:flex;gap:4px;align-items:center;justify-content:center;padding:20px}
.loading-dots span{width:6px;height:6px;border-radius:50%;background:var(--g);opacity:.3;animation:dotBounce .8s ease-in-out infinite}
.loading-dots span:nth-child(2){animation-delay:.15s}
.loading-dots span:nth-child(3){animation-delay:.3s}
@keyframes dotBounce{0%,80%,100%{opacity:.3;transform:scale(1)}40%{opacity:1;transform:scale(1.3)}}

/* Emoji picker */
.emoji-picker{position:absolute;bottom:100%;right:0;background:var(--bg3);border:1px solid var(--border-hover);border-radius:16px;padding:12px;display:none;flex-wrap:wrap;gap:2px;width:300px;box-shadow:0 16px 50px rgba(0,0,0,.6);z-index:100;backdrop-filter:blur(16px)}
.emoji-picker.visible{display:flex}
.emoji-picker button{width:38px;height:38px;border:none;background:transparent;font-size:1.4rem;cursor:pointer;border-radius:8px;transition:all .15s cubic-bezier(.175,.885,.32,1.275)}
.emoji-picker button:hover{background:rgba(212,168,83,.1);transform:scale(1.3)}
.emoji-picker button:active{transform:scale(.8)}
.emoji-picker .ep-label{width:100%;font-size:.65rem;color:var(--td);text-transform:uppercase;letter-spacing:1px;padding:6px 4px 2px;font-weight:600}
.msg-quick-react{display:flex;gap:2px;align-items:center}
.msg-quick-react button{width:28px;height:28px;border:none;background:transparent;font-size:1rem;cursor:pointer;border-radius:6px;transition:all .15s cubic-bezier(.175,.885,.32,1.275);padding:0}
.msg-quick-react button:hover{transform:scale(1.3);background:rgba(212,168,83,.08)}
.msg-quick-react button:active{transform:scale(.8)}
.msg-quick-react .more-emoji{font-size:.7rem;color:var(--td);padding:0 4px}

/* Toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--bg3);border:1px solid var(--border-hover);color:var(--t);padding:14px 28px;border-radius:14px;font-size:.85rem;z-index:2000;transition:transform .3s;box-shadow:0 12px 40px rgba(0,0,0,.4);backdrop-filter:blur(12px)}
.toast.visible{transform:translateX(-50%) translateY(0)}

/* Profile modal */

/* Preference toggles */
.pref-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.pref-switch input{opacity:0;width:0;height:0}
.pref-slider{position:absolute;cursor:pointer;inset:0;background:var(--bg3);border-radius:24px;transition:.3s}
.pref-slider:before{content:'';position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s}
.pref-switch input:checked+.pref-slider{background:var(--accent)}
.pref-switch input:checked+.pref-slider:before{transform:translateX(20px)}

.profile-modal{position:fixed;inset:0;z-index:650;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:24px}
.profile-modal.visible{display:flex}
.profile-box{background:var(--bg3);background-image:radial-gradient(ellipse at 50% 0%,var(--glow) 0%,transparent 60%);border:1px solid var(--border-hover);border-radius:20px;padding:32px;max-width:440px;width:100%;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.5);max-height:90vh;overflow-y:auto}
[data-theme="aube"] .profile-box,[data-theme="sable"] .profile-box,[data-theme="glacier"] .profile-box{background:var(--bg)}
.profile-box .close-modal{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--tm);font-size:1.4rem;cursor:pointer}
.profile-box .close-modal:hover{color:var(--t)}
.profile-box h2{font-family:'Playfair Display',serif;font-size:1.3rem;margin-bottom:20px;color:var(--g);text-align:center}
.profile-avatar-wrap{display:flex;justify-content:center;margin-bottom:20px}
.profile-avatar-circle{width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,var(--bg4),var(--glow));display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;color:var(--g);cursor:pointer;position:relative;overflow:hidden;border:2px solid var(--border-hover);transition:.3s}
.profile-avatar-circle:hover{border-color:var(--g);box-shadow:0 0 20px var(--glow)}
.profile-avatar-circle img{width:100%;height:100%;object-fit:cover}
.profile-avatar-circle .avatar-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;color:#fff;font-size:.75rem;font-weight:600}
#leaveCommunityBtn:hover{background:rgba(255,80,80,.15);border-color:rgba(255,80,80,.5);color:rgba(255,80,80,1)}
.profile-avatar-circle:hover .avatar-overlay{display:flex}
.profile-avatar-hint{text-align:center;font-size:.72rem;color:var(--tm);margin-top:6px}
.profile-field{margin-bottom:14px}
.profile-field label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--tm);margin-bottom:5px;font-weight:500}
.profile-field input,.profile-field textarea{width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--t);font-size:.9rem;font-family:'Inter',sans-serif;outline:none;transition:.3s}
.profile-field input:focus,.profile-field textarea:focus{border-color:var(--g)}
.profile-field textarea{resize:vertical;min-height:60px}
.profile-save-btn{width:100%;padding:13px;border-radius:12px;border:none;background:var(--gg);color:#0a0a0f;font-weight:700;font-size:.9rem;cursor:pointer;transition:.3s;letter-spacing:.3px;margin-top:4px;background-size:200% 100%;animation:shimmer 3s ease infinite}
.profile-save-btn:hover{box-shadow:0 4px 16px var(--glow-strong)}
.theme-section{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.theme-section label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--tm);margin-bottom:10px;font-weight:500}
.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.theme-swatch{height:46px;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:.25s;position:relative;overflow:hidden;display:flex;flex-direction:column}
.theme-swatch:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.theme-swatch.active{border-color:var(--g);box-shadow:0 0 12px var(--glow)}
.theme-swatch .ts-top{flex:1}
.theme-swatch .ts-bot{flex:1}
.theme-swatch .ts-label{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:.5rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.ts-nuit .ts-top{background:#0c0c16}.ts-nuit .ts-bot{background:linear-gradient(90deg,#d4a853,#f0d68a)}.ts-nuit .ts-label{color:#d4a853}
.ts-aube .ts-top{background:#faf7f2}.ts-aube .ts-bot{background:linear-gradient(90deg,#b8860b,#daa520)}.ts-aube .ts-label{color:#8b6508}
.ts-foret .ts-top{background:#0e1610}.ts-foret .ts-bot{background:linear-gradient(90deg,#5a8a3a,#b5d99c)}.ts-foret .ts-label{color:#8fbc6a}
.ts-amethyste .ts-top{background:#120e1a}.ts-amethyste .ts-bot{background:linear-gradient(90deg,#9333ea,#d8b4fe)}.ts-amethyste .ts-label{color:#c084fc}
.ts-ocean .ts-top{background:#0a1220}.ts-ocean .ts-bot{background:linear-gradient(90deg,#0284c7,#7dd3fc)}.ts-ocean .ts-label{color:#38bdf8}
.ts-sable .ts-top{background:#f5f0e8}.ts-sable .ts-bot{background:linear-gradient(90deg,#a67c52,#e6c9a8)}.ts-sable .ts-label{color:#a67c52}
.ts-glacier .ts-top{background:#e4f4f4}.ts-glacier .ts-bot{background:linear-gradient(90deg,#06b6d4,#a5f3fc)}.ts-glacier .ts-label{color:#06b6d4}

.ts-lotus .ts-top{background:linear-gradient(135deg,#ffb8d4,#fff0f5)}
.ts-lotus .ts-bot{background:linear-gradient(135deg,#ff8fb8,#d4a853)}
.ts-lotus .ts-label{color:#d4a853;text-shadow:0 1px 2px rgba(255,255,255,.6);font-weight:700}

/* Image attachments */

/* Voice messages */
.voice-btn{width:44px;height:44px;border-radius:12px;border:none;background:linear-gradient(135deg,#4ea8de,#3b82c4);color:#fff;cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:.3s;flex-shrink:0;box-shadow:0 2px 10px rgba(78,168,222,.2);padding:0}
.voice-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(78,168,222,.3)}
.voice-btn.recording{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 2px 10px rgba(239,68,68,.3);animation:pulse-rec 1s ease-in-out infinite}
@keyframes pulse-rec{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.voice-recording-bar{display:none;align-items:center;gap:10px;padding:8px 14px;background:rgba(239,68,68,.06);border-top:1px solid rgba(239,68,68,.15)}
.voice-recording-bar.active{display:flex}
.voice-rec-dot{width:10px;height:10px;border-radius:50%;background:#ef4444;animation:pulse-rec 1s ease-in-out infinite}
.voice-rec-timer{font-size:.82rem;color:var(--t);font-variant-numeric:tabular-nums;min-width:36px}
.voice-rec-cancel{background:none;border:none;color:var(--tm);font-size:.78rem;cursor:pointer;margin-left:auto;padding:4px 10px}
.voice-rec-cancel:hover{color:#ef4444}
.voice-rec-send{background:linear-gradient(135deg,var(--g),#a07c2a);border:none;color:#0d0b08;font-weight:600;font-size:.78rem;padding:6px 14px;border-radius:8px;cursor:pointer}
.msg-audio-transcribe{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:5px 12px;background:linear-gradient(135deg,rgba(201,168,76,.06),rgba(201,168,76,.02));border:1px solid rgba(201,168,76,.12);border-radius:20px;font-size:.74rem;color:var(--g);cursor:pointer;transition:.25s;user-select:none;font-weight:500;letter-spacing:.01em}
.msg-audio-transcribe:hover{background:linear-gradient(135deg,rgba(201,168,76,.14),rgba(201,168,76,.06));border-color:rgba(201,168,76,.25);transform:translateY(-1px)}
.msg-audio-transcribe.loading{opacity:.5;pointer-events:none;animation:pulse-rec 1.5s ease-in-out infinite}
.msg-audio-text{margin-top:8px;padding:10px 14px;background:rgba(201,168,76,.03);border-left:3px solid rgba(201,168,76,.4);border-radius:0 12px 12px 0;font-size:.84rem;color:var(--t);line-height:1.7;font-style:italic;white-space:pre-wrap;animation:fadeSlideIn .3s ease}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.msg-audio{margin-top:8px;padding:10px 14px;background:rgba(255,255,255,.03);border-radius:14px;border:1px solid rgba(255,255,255,.06);max-width:360px}
.msg-audio audio{width:100%;height:36px;border-radius:18px;outline:none;filter:sepia(.2) saturate(1.5) hue-rotate(10deg)}
.msg-audio-label{font-size:.75rem;color:var(--g);margin-bottom:6px;display:flex;align-items:center;gap:5px;font-weight:500;letter-spacing:.02em}
.msg-image{max-width:400px;max-height:300px;border-radius:10px;margin-top:6px;cursor:pointer;transition:.2s;border:1px solid var(--border)}
.msg-image:hover{border-color:var(--border-hover);box-shadow:0 4px 16px rgba(0,0,0,.3)}
.msg-image-full{position:fixed;inset:0;z-index:700;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px);padding:20px}
.msg-image-full img{max-width:95%;max-height:95%;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}

/* Video embeds (YouTube, etc) */
.msg-embed{margin-top:8px;border-radius:10px;overflow:hidden;max-width:480px;border:1px solid var(--border)}
.msg-embed iframe{width:100%;aspect-ratio:16/9;border:none;display:block}
.msg-embed-link{display:flex;gap:10px;padding:10px;background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-top:6px;max-width:480px;text-decoration:none;color:var(--t);transition:.2s}
.msg-embed-link:hover{border-color:var(--border-hover);background:var(--surface-hover)}
.msg-embed-link .embed-icon{font-size:1.5rem;flex-shrink:0;display:flex;align-items:center}
.msg-embed-link .embed-info{flex:1;overflow:hidden}
.msg-embed-link .embed-title{font-size:.82rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-embed-link .embed-url{font-size:.7rem;color:var(--tm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Upload area in input */
.msg-upload-bar{display:none;padding:8px 12px;margin-bottom:8px;border-radius:8px;background:rgba(212,168,83,.04);border:1px solid rgba(212,168,83,.1);font-size:.8rem;color:var(--tm);align-items:center;gap:8px}
.msg-upload-bar.visible{display:flex}
.msg-upload-bar .upload-preview{width:40px;height:40px;border-radius:6px;object-fit:cover;border:1px solid var(--border)}
.msg-upload-bar .upload-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-upload-bar .close-upload{margin-left:auto;cursor:pointer;color:var(--td);font-size:1rem}
.msg-upload-bar .close-upload:hover{color:var(--t)}
.msg-input-box .attach-btn{width:44px;height:44px;border-radius:12px;border:none;background:rgba(255,255,255,.04);color:var(--tm);cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:.2s;flex-shrink:0}
.msg-input-box .attach-btn:hover{background:rgba(255,255,255,.08);color:var(--t)}

/* Online status indicators */
.member-item .m-status{font-size:.6rem;color:var(--tm);margin-left:auto;white-space:nowrap}
.member-item .m-status.online{color:var(--green)}

/* === FOUNDER & ROLES PREMIUM STYLES === */
@keyframes founderGlow{0%,100%{box-shadow:0 0 4px rgba(212,168,83,.12),0 0 10px rgba(212,168,83,.05)}50%{box-shadow:0 0 6px rgba(212,168,83,.18),0 0 14px rgba(212,168,83,.08)}}
@keyframes founderShine{0%{background-position:200% center}100%{background-position:-200% center}}
@keyframes crownFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1.5px) scale(1.08)}}
@keyframes masterGlow{0%,100%{box-shadow:0 0 3px rgba(212,168,83,.1),0 0 8px rgba(212,168,83,.04)}50%{box-shadow:0 0 5px rgba(212,168,83,.15),0 0 12px rgba(212,168,83,.06)}}
.member-item.founder{background:linear-gradient(135deg,rgba(212,168,83,.1),rgba(184,146,46,.04),rgba(212,168,83,.08));border:1px solid rgba(212,168,83,.3);border-radius:10px;padding:8px 10px;position:relative;animation:founderGlow 3s ease-in-out infinite;margin-bottom:4px}
.member-item.founder::before{content:'';position:absolute;inset:0;border-radius:10px;background:linear-gradient(135deg,rgba(212,168,83,.08),transparent 40%,rgba(212,168,83,.04));pointer-events:none}
.member-item.founder .m-avatar{width:38px;height:38px;border:2px solid var(--g);box-shadow:0 0 6px rgba(212,168,83,.15)}
.member-item.founder .m-name{font-size:.88rem;font-weight:800;background:linear-gradient(90deg,#d4a853,#f0d68a,#d4a853,#b8922e,#d4a853);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:founderShine 4s linear infinite}
.member-item.founder .role-badge{display:inline-flex;align-items:center;gap:2px;font-size:.45rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--g);background:linear-gradient(135deg,rgba(212,168,83,.15),rgba(212,168,83,.05));border:1px solid rgba(212,168,83,.25);border-radius:10px;padding:1px 6px;white-space:nowrap;margin-left:4px;vertical-align:middle}
.member-item.founder .role-badge .badge-icon{font-size:.7rem;}
.member-item.founder .role-title{display:block;font-size:.52rem;color:var(--g);opacity:.7;font-style:italic;letter-spacing:.5px;margin-top:-1px}
.member-item.master{background:linear-gradient(135deg,rgba(212,168,83,.06),rgba(184,146,46,.02));border:1px solid rgba(212,168,83,.18);border-radius:9px;padding:7px 9px;position:relative;animation:masterGlow 4s ease-in-out infinite;margin-bottom:3px}
.member-item.master .m-avatar{width:34px;height:34px;border:1.5px solid rgba(212,168,83,.5);box-shadow:0 0 8px rgba(212,168,83,.2)}
.member-item.master .m-name{font-size:.85rem;font-weight:700;background:linear-gradient(90deg,#d4a853,#f0d68a,#d4a853);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.member-item.master .role-badge{display:inline-flex;align-items:center;gap:2px;font-size:.43rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--g);background:rgba(212,168,83,.08);border:1px solid rgba(212,168,83,.15);border-radius:10px;padding:1px 6px;white-space:nowrap;margin-left:4px;vertical-align:middle}
.member-item.master .role-badge .badge-icon{font-size:.6rem}
.member-item.master .role-title{display:block;font-size:.52rem;color:var(--g);opacity:.9;font-style:italic;letter-spacing:.3px;margin-top:-1px}
.member-item.student{background:linear-gradient(135deg,rgba(212,168,83,.07),rgba(255,200,220,.08));border:1px solid rgba(212,168,83,.28);border-radius:9px;padding:7px 9px;margin-bottom:2px}
.member-item.student .m-avatar{width:32px;height:32px;border:1.5px solid rgba(212,168,83,.25)}
.member-item.student .m-name{font-size:.82rem;font-weight:500;color:var(--t)}
.member-item.student .role-badge{display:inline-flex;align-items:center;gap:2px;font-size:.43rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--g);background:rgba(212,168,83,.1);border:1px solid rgba(212,168,83,.22);border-radius:10px;padding:2px 6px;white-space:nowrap;margin-left:4px;vertical-align:middle}
.member-item.student .role-badge .badge-icon{font-size:.5rem}
[data-theme="aube"] .member-item.student{background:linear-gradient(135deg,rgba(251,191,36,.06),rgba(245,158,11,.04));border-color:rgba(251,191,36,.25)}
[data-theme="foret"] .member-item.student{background:linear-gradient(135deg,rgba(34,197,94,.05),rgba(22,163,74,.03));border-color:rgba(34,197,94,.2)}
[data-theme="foret"] .member-item.student .role-badge{color:#22c55e;border-color:rgba(34,197,94,.2);background:rgba(34,197,94,.08)}
[data-theme="foret"] .member-item.student .role-title{color:#22c55e}
[data-theme="amethyste"] .member-item.student{background:linear-gradient(135deg,rgba(167,139,250,.06),rgba(139,92,246,.04));border-color:rgba(167,139,250,.22)}
[data-theme="amethyste"] .member-item.student .role-badge{color:#a78bfa;border-color:rgba(167,139,250,.2);background:rgba(167,139,250,.08)}
[data-theme="amethyste"] .member-item.student .role-title{color:#a78bfa}
[data-theme="ocean"] .member-item.student{background:linear-gradient(135deg,rgba(56,189,248,.05),rgba(14,165,233,.03));border-color:rgba(56,189,248,.2)}
[data-theme="ocean"] .member-item.student .role-badge{color:#38bdf8;border-color:rgba(56,189,248,.2);background:rgba(56,189,248,.08)}
[data-theme="ocean"] .member-item.student .role-title{color:#38bdf8}
[data-theme="sable"] .member-item.student{background:linear-gradient(135deg,rgba(212,168,83,.07),rgba(194,154,70,.04));border-color:rgba(212,168,83,.25)}
[data-theme="glacier"] .member-item.student{background:linear-gradient(135deg,rgba(148,163,184,.06),rgba(100,116,139,.03));border-color:rgba(148,163,184,.2)}
[data-theme="glacier"] .member-item.student .role-badge{color:#94a3b8;border-color:rgba(148,163,184,.2);background:rgba(148,163,184,.08)}
[data-theme="glacier"] .member-item.student .role-title{color:#94a3b8}

.member-item.student .role-title{display:inline;font-size:.52rem;opacity:.85;font-style:italic;letter-spacing:.3px;color:var(--g)}



/* Space navigation bar */

.app-row{display:flex;flex:1;overflow:hidden;min-height:0}
.space-nav{display:flex;align-items:center;justify-content:center;gap:4px;padding:8px 16px;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0;z-index:10}
.sn-tab{padding:7px 20px;border-radius:22px;cursor:pointer;transition:.25s;color:var(--tm);font-size:.82rem;font-weight:500;display:flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid transparent;user-select:none;position:relative}
.sn-tab:hover{background:rgba(255,255,255,.05);color:var(--t)}
.sn-tab.active{background:linear-gradient(135deg,rgba(212,168,83,.12),rgba(212,168,83,.04));color:var(--g);font-weight:600;border-color:rgba(212,168,83,.2)}
.sn-tab .sn-icon{font-size:1rem}
.sn-tab .sn-lock{font-size:.85rem;opacity:.6;margin-left:2px}
.sn-tab.locked{opacity:.6}
.sn-tab.locked:hover{opacity:.8}
.sn-sep{color:var(--td);font-size:.55rem;margin:0 2px}

/* GIRI Academy VIP Modal */
.vip-modal-overlay{position:fixed;inset:0;z-index:800;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px);padding:20px;opacity:0;pointer-events:none;transition:.4s}
.vip-modal-overlay.visible{opacity:1;pointer-events:auto}
.vip-modal{background:linear-gradient(145deg,#1a1510 0%,#0d0b08 50%,#12100c 100%);border:1px solid rgba(212,168,83,.3);border-radius:28px;max-width:560px;width:100%;padding:52px 44px;text-align:center;transform:scale(.85) translateY(20px);transition:.5s cubic-bezier(.4,0,.2,1);box-shadow:0 50px 100px rgba(0,0,0,.7),0 0 80px rgba(212,168,83,.06),inset 0 1px 0 rgba(255,255,255,.03)}
.vip-modal-overlay.visible .vip-modal{transform:scale(1) translateY(0)}
.vip-modal .vm-glow{position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:200px;height:200px;background:radial-gradient(circle,rgba(212,168,83,.15),transparent 70%);pointer-events:none}
.vip-modal .vm-icon{font-size:5rem;margin-bottom:16px;filter:drop-shadow(0 0 30px rgba(212,168,83,.5));animation:vmPulse 3s ease-in-out infinite}
@keyframes vmPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.vip-modal .vm-badge{display:inline-block;padding:4px 16px;border-radius:20px;background:linear-gradient(135deg,rgba(212,168,83,.15),rgba(212,168,83,.05));border:1px solid rgba(212,168,83,.2);font-size:.65rem;text-transform:uppercase;letter-spacing:2px;color:#d4a853;margin-bottom:16px;font-weight:600}
.vip-modal .vm-title{font-family:'Cormorant Garamond',serif;font-size:2.4rem;font-weight:700;background:linear-gradient(135deg,#f0d078,#d4a853,#c4944a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;letter-spacing:1.5px}
.vip-modal .vm-subtitle{font-size:.85rem;color:rgba(255,255,255,.4);margin-bottom:28px;font-style:italic;letter-spacing:.5px}
.vip-modal .vm-desc{font-size:.88rem;color:rgba(255,255,255,.65);line-height:1.8;margin-bottom:36px;max-width:420px;margin-left:auto;margin-right:auto}
.vip-modal .vm-tiers{display:flex;gap:12px;justify-content:center;margin-bottom:36px;flex-wrap:wrap}
.vip-modal .vm-tier{padding:16px 20px;border-radius:16px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);flex:1;min-width:140px;max-width:200px;text-align:center;transition:.3s}
.vip-modal .vm-tier:hover{border-color:rgba(212,168,83,.2);background:rgba(212,168,83,.04)}
.vip-modal .vm-tier .vt-icon{font-size:1.8rem;margin-bottom:6px}
.vip-modal .vm-tier .vt-name{font-size:.75rem;font-weight:600;color:var(--g);margin-bottom:2px}
.vip-modal .vm-tier .vt-desc{font-size:.65rem;color:rgba(255,255,255,.4);line-height:1.3}
.vip-modal .vm-cta{display:inline-block;padding:16px 48px;background:linear-gradient(135deg,#d4a853,#c4944a);color:#0d0b08;font-weight:700;font-size:1rem;border-radius:50px;text-decoration:none;transition:.3s;letter-spacing:.8px;box-shadow:0 10px 40px rgba(212,168,83,.3);text-transform:uppercase}
.vip-modal .vm-cta:hover{transform:translateY(-3px);box-shadow:0 16px 50px rgba(212,168,83,.4)}
.vip-modal .vm-close{position:absolute;top:18px;right:22px;color:rgba(255,255,255,.25);font-size:1.6rem;cursor:pointer;transition:.2s;background:none;border:none;line-height:1}
.vip-modal .vm-close:hover{color:rgba(255,255,255,.5)}

/* Mahayawen Chatbot */
.maha-fab{display:none!important;position:fixed;bottom:24px;right:24px;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f0d68a 0%,#d4a853 40%,#b8922e 80%,#8b6914 100%);border:2px solid rgba(240,214,138,.4);cursor:pointer;z-index:550;display:flex;align-items:center;justify-content:center;font-size:0;box-shadow:0 4px 20px rgba(212,168,83,.35),inset 0 -2px 6px rgba(0,0,0,.2),inset 0 2px 6px rgba(255,255,255,.3);transition:.3s;overflow:hidden}
.maha-fab:hover{transform:scale(1.08);box-shadow:0 6px 30px rgba(212,168,83,.5),inset 0 -2px 6px rgba(0,0,0,.2),inset 0 2px 6px rgba(255,255,255,.3)}
.maha-chat{display:none!important;position:fixed;bottom:90px;right:24px;width:380px;max-height:500px;background:var(--bg);border:1px solid var(--border-hover);border-radius:16px;z-index:550;display:none;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden}
.maha-chat.open{display:flex}
.maha-chat-header{padding:14px 18px;background:linear-gradient(135deg,rgba(212,168,83,.1),rgba(212,168,83,.03));border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.maha-chat-header .mch-name{font-family:'Cormorant Garamond',serif;font-weight:700;color:var(--g);font-size:1rem;flex:1}
.maha-chat-header .mch-close{background:none;border:none;color:var(--tm);cursor:pointer;font-size:1.2rem}
.maha-chat-messages{flex:1;overflow-y:auto;padding:14px;min-height:200px;max-height:350px}
.maha-chat-messages .mcm-msg{margin-bottom:10px;padding:10px 14px;border-radius:12px;font-size:.82rem;line-height:1.5;max-width:85%}
.maha-chat-messages .mcm-msg.bot{background:rgba(212,168,83,.06);border:1px solid rgba(212,168,83,.1);color:var(--t)}
.maha-chat-messages .mcm-msg.user{background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--t);margin-left:auto}
.maha-chat-input{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--border)}
.maha-chat-input input{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 12px;color:var(--t);font-size:.82rem;outline:none}
.maha-chat-input input:focus{border-color:var(--g)}
.maha-chat-input button{padding:8px 16px;background:linear-gradient(135deg,#d4a853,#c4944a);border:none;border-radius:10px;color:#0d0b08;font-weight:600;cursor:pointer;font-size:.8rem}



@media(max-width:900px){.right-panel{display:none}}
.mobile-toggle{display:none;width:36px;height:36px;border:none;background:rgba(255,255,255,.04);color:var(--tm);border-radius:8px;cursor:pointer;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.mobile-toggle:hover{background:rgba(255,255,255,.08);color:var(--t)}



/* MOBILE */
@media(max-width:680px){
  .gate{padding:20px 16px;gap:20px}
  .gate-logo{width:60px;height:60px}
  .gate h1{font-size:1.5rem;line-height:1.3}
  .gate p{font-size:.82rem;padding:0 8px}
  .gate-form{flex-direction:column;gap:10px;padding:0 8px;max-width:100%}
  .gate-form input{width:100%;padding:14px 16px;font-size:16px;border-radius:10px}
  .gate-form button{width:100%;padding:14px;font-size:.95rem;border-radius:10px}
  .gate-sub{flex-direction:column;gap:8px}
  html,body{height:100%;height:100dvh;overflow:hidden;padding-bottom:0}
  .app{height:100dvh;height:100vh;padding-bottom:env(safe-area-inset-bottom, 0px)}
  .space-nav{overflow-x:auto;justify-content:flex-start;padding:4px 8px;gap:0;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
  .space-nav::-webkit-scrollbar{display:none}
  .sn-tab{font-size:.7rem;padding:5px 10px;white-space:nowrap;flex-shrink:0;gap:4px;border-radius:16px}
  .sn-tab .sn-icon{font-size:.85rem}
  .sn-sep{display:none}
  .app-row{flex:1;min-height:0;overflow:hidden}
  .sidebar{position:fixed;left:-100%;top:0;bottom:0;z-index:100;width:280px;transition:left .3s;box-shadow:4px 0 24px rgba(0,0,0,.5);background:var(--bg) !important}
  .sidebar.open{left:0}
  .sidebar-overlay{display:none;position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .3s}
  .sidebar-overlay.open{display:block;opacity:1}
  .mobile-toggle{display:flex !important}
  .main{height:100%;display:flex;flex-direction:column}
  .ch-header{flex-shrink:0;padding:8px 10px;gap:4px 8px;flex-wrap:wrap;align-items:center}
  .ch-header .ch-name{font-size:.85rem;line-height:1.2}
  .ch-header .ch-desc{font-size:.62rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:45vw}
  .ch-header .ch-actions button{padding:4px 8px;font-size:.7rem;min-height:30px;border-radius:6px}
  .ch-header .ch-actions{gap:4px}
  .messages-wrap{flex:1;overflow-y:auto;min-height:0;padding:10px 12px calc(130px + env(safe-area-inset-bottom, 0px));-webkit-overflow-scrolling:touch}
  .msg{padding:8px 10px;gap:8px;border-radius:10px}
  .msg .msg-avatar{width:32px;height:32px;font-size:.7rem}
  .msg .msg-author{font-size:.8rem}
  .msg .msg-badge{font-size:.55rem !important;padding:1px 5px !important;border-radius:6px !important}
  .msg .msg-time{font-size:.65rem}
  .msg .msg-content{font-size:.86rem;line-height:1.5}
  .msg-hover-actions{display:none}

  .msg-input-wrap{padding:8px 10px calc(10px + env(safe-area-inset-bottom, 0px));position:fixed;bottom:0;left:0;right:0;background:var(--bg);border-top:1px solid var(--border);z-index:50;box-shadow:0 -2px 12px rgba(0,0,0,.08)}
  .msg-input-wrap.master-frame{margin:0;border-radius:0;border-left:none;border-right:none;border-bottom:none;border-top:2px solid rgba(212,168,83,.25)}
  .msg-input-box{gap:4px;align-items:flex-end}
  .msg-input-box textarea{font-size:16px;padding:10px 12px;min-height:42px;max-height:120px;border-radius:10px;line-height:1.4}
  .msg-input-box button{min-width:44px;min-height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center}
  .msg-input-box .attach-btn{min-width:40px;min-height:44px;border-radius:12px}
  .voice-btn{min-width:44px;min-height:44px}
  .voice-recording-bar{padding:6px 10px}
  .right-panel{display:none}
  .vip-overlay{padding:16px}
  .vip-box{padding:24px 18px;max-width:100%;border-radius:14px}
  .vip-crown{font-size:2.2rem}
  .vip-title{font-size:1.2rem}
  .vip-desc{font-size:.8rem}
  .vip-btn{padding:12px 18px;font-size:.85rem}
  .vip-email-form input{padding:10px 14px;font-size:16px}
  .vip-whatsapp{flex-direction:column;gap:8px}
  .vip-wa-btn{justify-content:center;padding:10px 14px}
  .vip-modal{padding:24px 18px}
  .vip-modal .vm-title{font-size:1.5rem}
  .vip-modal .vm-tiers{flex-direction:column;align-items:stretch}
  .vip-modal .vm-tier{min-width:auto;max-width:100%;width:100%}
  .profile-modal .pm-box{width:96%;padding:18px 14px;max-height:85vh;overflow-y:auto}
  .create-ch-box{width:96%;padding:18px 14px}
  .mod-alert-box{width:95%;padding:20px 16px}
  .toast{left:10px;right:10px;transform:translateY(100px);font-size:.8rem;padding:12px 16px}
  .toast.visible{transform:translateY(0);left:10px;right:10px}
  .msg-image{max-width:100%;border-radius:8px}
  .msg-audio audio{max-width:100%;width:220px}
  .sb-user{padding:10px 12px}
  .emoji-picker{width:100% !important;max-width:100% !important;left:0 !important;right:0 !important;bottom:0 !important;top:auto !important;position:fixed !important;border-radius:16px 16px 0 0 !important;max-height:50vh !important}
}
/* DM mobile safe area & fixes */
@media(max-width:680px){
  .dm-overlay{padding-bottom:env(safe-area-inset-bottom, 0px)}
  .dm-input-bar{padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px))}
  .dm-list .dm-item{padding:10px 12px}
  .dm-search{font-size:16px !important}
}
@media(max-width:380px){
  .gate h1{font-size:1.3rem}
  .gate p{font-size:.78rem}
  .space-nav{padding:4px 6px}
  .sn-tab{font-size:.68rem;padding:5px 8px}
  .ch-header{padding:8px 10px}
  .msg-input-box textarea{font-size:16px;padding:8px 10px}
}

/* ===== MODERATION ALERTS ===== */
.mod-reason{font-size:.92rem;color:var(--t);margin-bottom:12px;line-height:1.5}
.mod-appeal-btn{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:8px 18px;background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.25);border-radius:10px;color:var(--g);font-size:.82rem;cursor:pointer;transition:.2s}
.mod-appeal-btn:hover{background:rgba(201,168,76,.2);border-color:var(--g)}
.mod-appeal-form{display:none;margin-top:12px;text-align:left}
.mod-appeal-form.visible{display:block}
.mod-appeal-form textarea{width:100%;min-height:80px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--t);font-size:.85rem;font-family:'Inter',sans-serif;resize:vertical;outline:none}
.mod-appeal-form textarea:focus{border-color:var(--g)}
.mod-appeal-form .mod-appeal-send{margin-top:8px;padding:8px 20px;background:var(--gg);border:none;border-radius:10px;color:#0a0a0f;font-weight:600;font-size:.82rem;cursor:pointer}
.mod-appeal-form .mod-appeal-send:disabled{opacity:.5;cursor:not-allowed}
.mod-appeal-result{margin-top:12px;padding:12px 16px;border-radius:10px;font-size:.85rem;line-height:1.6}
.mod-appeal-result.accepted{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);color:#22c55e}
.mod-appeal-result.rejected{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.15);color:var(--t)}
.mod-alert-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.mod-alert-overlay.visible{opacity:1}
.mod-alert{background:var(--bg2);border:1px solid var(--border-hover);border-radius:16px;padding:32px 28px;max-width:420px;width:90%;text-align:center;animation:modSlide .3s ease}
@keyframes modSlide{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.mod-block{border-color:rgba(248,113,113,.3);box-shadow:0 0 40px rgba(248,113,113,.1)}
.mod-warning{border-color:rgba(251,191,36,.3);box-shadow:0 0 40px rgba(251,191,36,.1)}
.mod-icon{font-size:2.5rem;margin-bottom:12px}
.mod-title{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;margin-bottom:8px}
.mod-block .mod-title{color:var(--red)}
.mod-warning .mod-title{color:#fbbf24}
.mod-reason{font-size:.9rem;color:var(--tm);line-height:1.5;margin-bottom:12px}
.mod-count{font-size:.8rem;padding:6px 14px;border-radius:20px;display:inline-block;margin-bottom:12px}
.mod-block .mod-count{background:rgba(248,113,113,.1);color:var(--red)}
.mod-warning .mod-count{background:rgba(251,191,36,.1);color:#fbbf24}
.mod-sub{font-size:.75rem;color:var(--td);margin-bottom:16px;font-style:italic}
.mod-ok{padding:10px 32px;border-radius:10px;border:none;background:var(--gg);color:#0a0a0f;font-weight:700;font-size:.9rem;cursor:pointer;transition:.2s}
.mod-ok:hover{transform:translateY(-1px);box-shadow:0 4px 16px var(--glow-strong)}

/* ===== VIP GATE ===== */
.vip-overlay{position:fixed;inset:0;z-index:8000;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .4s;pointer-events:none}
.vip-overlay.visible{opacity:1;pointer-events:all}
.vip-box{background:linear-gradient(145deg,var(--bg2),var(--bg3));border:1px solid rgba(212,168,83,.25);border-radius:20px;padding:36px 30px;max-width:460px;width:92%;text-align:center;transform:translateY(30px);transition:transform .4s;box-shadow:0 20px 60px rgba(0,0,0,.5);position:relative;z-index:1}
.vip-overlay.visible .vip-box{transform:translateY(0)}
.vip-crown{font-size:3rem;margin-bottom:12px;filter:drop-shadow(0 0 20px rgba(212,168,83,.5));animation:crownFloat 3s ease-in-out infinite}
@keyframes crownFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.vip-title{font-family:'Playfair Display',serif;font-size:1.5rem;color:var(--g);margin-bottom:8px;font-weight:700}
.vip-desc{font-size:.88rem;color:var(--tm);line-height:1.6;margin-bottom:20px}
.vip-choice{display:flex;flex-direction:column;gap:12px}
.vip-btn{padding:14px 24px;border-radius:12px;border:none;font-size:.92rem;font-weight:600;cursor:pointer;transition:.3s;font-family:"Inter",sans-serif;position:relative;z-index:2}
.vip-btn-gold{background:var(--gg);color:#0a0a0f;background-size:200% 100%;animation:shimmer 3s ease infinite}
.vip-btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--glow-strong)}
.vip-btn-outline{display:block;text-align:center;text-decoration:none;background:transparent;border:1px solid var(--border-hover);color:var(--tm)}
.vip-btn-outline:hover{border-color:var(--g);color:var(--t);background:rgba(212,168,83,.05)}
.vip-email-form{display:none;margin-top:16px}
.vip-email-form.visible{display:flex;flex-direction:column;gap:10px}
.vip-email-form input{padding:12px 16px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--t);font-size:.92rem;font-family:'Inter',sans-serif;outline:none;text-align:center}
.vip-email-form input:focus{border-color:var(--g);box-shadow:0 0 0 3px var(--glow)}
.vip-status{font-size:.82rem;min-height:20px;margin-top:4px}
.vip-status.error{color:var(--red)}
.vip-status.success{color:var(--green)}
.vip-whatsapp{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.vip-wa-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:10px;background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.2);color:#25d366;font-size:.8rem;text-decoration:none;transition:.2s;font-weight:500}
.vip-wa-btn:hover{background:rgba(37,211,102,.2);transform:translateY(-1px)}
.vip-close{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--td);font-size:1.3rem;cursor:pointer;padding:4px}
.vip-close:hover{color:var(--t)}
.ch-item.vip-channel{margin-top:6px;padding-top:10px;border-top:1px solid rgba(212,168,83,.12)}
.ch-item.vip-channel .name{color:var(--g);font-weight:500}
.ch-item.vip-channel .icon{filter:drop-shadow(0 0 3px rgba(212,168,83,.3))}

/* ===== CREATE CHANNEL ===== */
.sb-section-row{display:flex;align-items:center;justify-content:space-between;padding:12px 8px 4px}
.sb-section-row .label{font-size:.65rem;text-transform:uppercase;letter-spacing:2px;color:var(--td);font-weight:600}
.create-ch-btn{width:22px;height:22px;border-radius:6px;border:none;background:rgba(212,168,83,.1);color:var(--g);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:.2s;line-height:1}
.create-ch-btn:hover{background:rgba(212,168,83,.2);transform:scale(1.1)}
.create-ch-overlay{position:fixed;inset:0;z-index:8500;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;pointer-events:none}
.create-ch-overlay.visible{opacity:1;pointer-events:all}
.create-ch-box{background:var(--bg2);border:1px solid var(--border-hover);border-radius:16px;padding:28px 24px;max-width:400px;width:90%;animation:modSlide .3s ease}
.create-ch-box h3{font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--g);margin-bottom:16px;text-align:center}
.create-ch-box .field{margin-bottom:12px}
.create-ch-box .field label{display:block;font-size:.78rem;color:var(--tm);margin-bottom:4px}
.create-ch-box .field input{width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--t);font-size:.9rem;font-family:'Inter',sans-serif;outline:none}
.create-ch-box .field input:focus{border-color:var(--g)}
.create-ch-actions{display:flex;gap:10px;margin-top:16px}
.create-ch-actions button{flex:1;padding:10px;border-radius:10px;font-size:.88rem;font-weight:600;cursor:pointer;transition:.2s;font-family:'Inter',sans-serif}
.create-ch-actions .cancel{border:1px solid var(--border);background:transparent;color:var(--tm)}
.create-ch-actions .cancel:hover{border-color:var(--g);color:var(--t)}
.create-ch-actions .confirm{border:none;background:var(--gg);color:#0a0a0f}
.create-ch-actions .confirm:hover{transform:translateY(-1px);box-shadow:0 4px 16px var(--glow-strong)}
.create-ch-status{font-size:.8rem;min-height:18px;margin-top:8px;text-align:center}
.create-ch-status.error{color:var(--red)}
.create-ch-status.success{color:var(--green)}

/* ===== WELCOME ANIMATION ===== */
.welcome-overlay{position:fixed;inset:0;z-index:10000;background:#050508;display:flex;align-items:center;justify-content:center;flex-direction:column;opacity:1;transition:opacity 1s}
.welcome-overlay.fade-out{opacity:0;pointer-events:none}
.welcome-canvas{position:absolute;inset:0;z-index:0}
.welcome-content{position:relative;z-index:1;text-align:center;opacity:0;transform:translateY(30px);animation:welcomeFadeIn 1.5s ease 0.8s forwards}
@keyframes welcomeFadeIn{to{opacity:1;transform:translateY(0)}}
.welcome-photo{width:280px;height:auto;max-height:400px;border-radius:20px;object-fit:contain;border:none;filter:drop-shadow(0 0 40px rgba(212,168,83,.4)) drop-shadow(0 0 80px rgba(212,168,83,.15));margin-bottom:24px;animation:welcomePhotoGlow 3s ease-in-out infinite}
@keyframes welcomePhotoGlow{0%,100%{filter:drop-shadow(0 0 30px rgba(212,168,83,.3)) drop-shadow(0 0 60px rgba(212,168,83,.1))}50%{filter:drop-shadow(0 0 50px rgba(212,168,83,.5)) drop-shadow(0 0 100px rgba(212,168,83,.25))}}
.welcome-text{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:rgba(212,168,83,.9);line-height:1.8;max-width:500px;margin:0 auto;opacity:0;animation:welcomeFadeIn 1.5s ease 1.8s forwards}
.welcome-text em{font-style:italic;color:rgba(240,214,138,.95)}
.welcome-enter{margin-top:32px;padding:14px 48px;border-radius:14px;border:none;background:linear-gradient(135deg,rgba(184,146,46,.8),rgba(212,168,83,.9));color:#0a0a0f;font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:700;cursor:pointer;letter-spacing:1px;opacity:0;animation:welcomeFadeIn 1s ease 3s forwards;transition:.3s;box-shadow:0 4px 30px rgba(212,168,83,.2)}
.welcome-enter:hover{transform:translateY(-3px);box-shadow:0 8px 40px rgba(212,168,83,.4)}

/* ===== REPLAYS CHANNEL ===== */
.ch-item.replay-channel{margin-top:6px;padding-top:10px;border-top:1px solid rgba(167,139,250,.1)}
.ch-item.replay-channel .name{color:var(--accent);font-weight:500}
.ch-item.replay-channel .icon{filter:drop-shadow(0 0 3px rgba(167,139,250,.2))}
.replay-card{background:linear-gradient(135deg,var(--surface),rgba(167,139,250,.04));border:1px solid rgba(167,139,250,.1);border-radius:12px;padding:12px 16px;margin:4px 0;transition:.2s}
.replay-card:hover{border-color:rgba(167,139,250,.2);box-shadow:0 4px 16px rgba(167,139,250,.08)}
.replay-card a{color:var(--accent);text-decoration:none;font-weight:500;display:flex;align-items:center;gap:6px}
.replay-card a:hover{text-decoration:underline}

/* ===== AVATAR CROP ===== */
.crop-overlay{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;flex-direction:column;opacity:0;transition:opacity .3s;pointer-events:none}
.crop-overlay.visible{opacity:1;pointer-events:all}
.crop-box{background:var(--bg2);border:1px solid var(--border-hover);border-radius:16px;padding:24px;max-width:360px;width:92%;text-align:center}
.crop-box h3{font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--g);margin-bottom:16px}
.crop-canvas-wrap{position:relative;width:240px;height:240px;margin:0 auto 16px;border-radius:50%;overflow:hidden;border:2px solid var(--border-hover);cursor:grab;touch-action:none;background:var(--bg4)}
.crop-canvas-wrap:active{cursor:grabbing}
.crop-canvas-wrap canvas{display:block}
.crop-guide{position:absolute;inset:0;border-radius:50%;border:2px dashed rgba(212,168,83,.3);pointer-events:none;box-shadow:inset 0 0 30px rgba(0,0,0,.2)}
.crop-slider-wrap{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:0 12px}
.crop-slider-wrap .label{font-size:.75rem;color:var(--tm)}
.crop-slider-wrap input[type="range"]{flex:1;accent-color:var(--g);height:4px}
.crop-actions{display:flex;gap:10px}
.crop-actions button{flex:1;padding:10px;border-radius:10px;font-size:.88rem;font-weight:600;cursor:pointer;transition:.2s;font-family:'Inter',sans-serif}
.crop-actions .cancel{border:1px solid var(--border);background:transparent;color:var(--tm)}
.crop-actions .cancel:hover{border-color:var(--g);color:var(--t)}
.crop-actions .confirm{border:none;background:var(--gg);color:#0a0a0f}
.crop-actions .confirm:hover{transform:translateY(-1px);box-shadow:0 4px 16px var(--glow-strong)}
.msg-read-receipt{font-size:.65rem;color:var(--tm);opacity:.5;margin-top:2px;cursor:pointer;display:flex;align-items:center;gap:4px;position:relative}
.msg-read-receipt:hover{opacity:.9}
.msg-read-receipt .read-avatars{display:flex;margin-left:4px}
.msg-read-receipt .read-avatars img{width:14px;height:14px;border-radius:50%;border:1px solid var(--bg1);margin-left:-4px}
.msg-read-receipt .read-avatars span{width:14px;height:14px;border-radius:50%;background:var(--bg3);border:1px solid var(--bg1);margin-left:-4px;font-size:.5rem;display:flex;align-items:center;justify-content:center;color:var(--tm)}
.msg-read-receipt .readers-tooltip{display:none;position:absolute;bottom:calc(100% + 6px);right:0;background:var(--bg2);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:6px 10px;white-space:nowrap;font-size:.7rem;color:var(--tm);pointer-events:none;z-index:99;box-shadow:0 4px 16px rgba(0,0,0,.4);max-width:220px;white-space:normal;text-align:right}
.msg-read-receipt:hover .readers-tooltip{display:block}
.readers-tooltip .tt-label{font-size:.6rem;opacity:.6;margin-bottom:3px}
.readers-tooltip .tt-names{font-weight:500;color:var(--text);line-height:1.5}

/* ===== GAMIFICATION ===== */
.gamif-badge{display:inline-block;font-size:.6rem;padding:1px 5px;border-radius:8px;margin-left:4px;font-weight:600;letter-spacing:.3px;vertical-align:middle;line-height:1.2}
.gamif-badge{background:rgba(255,255,255,.06)}
.gamif-xp-section{padding:12px 16px;border-top:1px solid rgba(212,168,83,.08)}
.gamif-xp-bar-wrap{background:rgba(255,255,255,.04);border-radius:10px;height:8px;overflow:hidden;margin-top:6px;position:relative}
.gamif-xp-bar{height:100%;border-radius:10px;transition:width .6s ease;background:linear-gradient(90deg,var(--accent),#f0d68a)}
.gamif-xp-label{display:flex;justify-content:space-between;font-size:.65rem;color:var(--tm);margin-top:3px}
.gamif-level-name{font-size:.7rem;font-weight:600;margin-bottom:2px}
.gamif-streak{display:flex;align-items:center;gap:4px;font-size:.7rem;color:var(--tm);margin-top:6px}
.gamif-streak .streak-fire{font-size:.85rem}
.gamif-badges-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.gamif-badges-row .badge-pill{font-size:.75rem;padding:2px 6px;border-radius:8px;background:rgba(255,255,255,.04);cursor:default;transition:.2s}
.gamif-badges-row .badge-pill:hover{background:rgba(212,168,83,.1);transform:scale(1.1)}
.gamif-lb-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;font-size:.75rem;color:var(--t);cursor:pointer;transition:.15s;border:none;background:none;width:100%;text-align:left;font-family:inherit}
.gamif-lb-btn:hover{background:rgba(212,168,83,.06)}
.giri-charter-gate, .giri-charter-view{position:fixed;inset:0;background:rgba(10,5,0,.92);z-index:99999;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .4s ease;backdrop-filter:blur(8px);padding:20px;overflow-y:auto}
.giri-charter-gate.visible, .giri-charter-view.visible{opacity:1}
.giri-charter-gate.out{opacity:0}
.giri-charter-inner{max-width:640px;width:100%;max-height:92vh;overflow-y:auto;background:linear-gradient(180deg,#fdfaf2 0%,#f4ecd8 100%);color:#3a2f1a;border:2px solid #d4af37;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5);font-family:'Inter',system-ui,sans-serif}
.giri-charter-card{padding:32px 30px}
.giri-charter-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid rgba(122,90,22,.25)}
.giri-charter-icon{font-size:2.2rem;filter:drop-shadow(0 0 8px rgba(212,175,55,.5))}
.giri-charter-head h2{flex:1;margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.7rem;font-weight:600;color:#7a5a16;letter-spacing:.02em}
.giri-charter-ver{font-size:.7rem;color:#a0875a;font-family:monospace}
.giri-charter-preamble{font-style:italic;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.1rem;color:#5a4a2a;margin:0 0 22px;line-height:1.5}
.giri-charter-list{list-style:none;padding:0;margin:0 0 22px}
.giri-charter-list li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid rgba(122,90,22,.12)}
.giri-charter-list li:last-child{border-bottom:none}
.giri-charter-pic{font-size:1.6rem;flex-shrink:0;line-height:1}
.giri-charter-list li > div{display:flex;flex-direction:column;gap:3px}
.giri-charter-list strong{color:#7a5a16;font-size:.95rem;font-weight:600}
.giri-charter-list span{font-size:.86rem;color:#4a3f25;line-height:1.45}
.giri-charter-foot{padding:14px 18px;background:rgba(212,175,55,.08);border-radius:8px;font-size:.8rem;color:#5a4a2a;font-style:italic;line-height:1.5}
.giri-charter-actions{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.giri-charter-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:.88rem;color:#3a2f1a;line-height:1.4}
.giri-charter-check input{margin-top:3px;accent-color:#7a5a16;cursor:pointer}
.giri-charter-accept{padding:13px 28px;background:#7a5a16;color:#fdfaf2;border:none;border-radius:8px;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.05rem;letter-spacing:.04em;cursor:pointer;transition:all .25s ease}
.giri-charter-accept:disabled{background:#c0b08a;cursor:not-allowed;opacity:.6}
.giri-charter-accept:not(:disabled):hover{background:#9a7222;transform:translateY(-1px);box-shadow:0 4px 14px rgba(122,90,22,.3)}

.giri-matric-overlay{position:fixed;inset:0;background:radial-gradient(ellipse at center, rgba(20,15,5,.92) 0%, rgba(10,5,0,.98) 70%);z-index:99999;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .6s ease;backdrop-filter:blur(6px)}
.giri-matric-overlay.visible{opacity:1}
.giri-matric-card{max-width:480px;width:92vw;padding:40px 32px;text-align:center;background:linear-gradient(180deg,#fdfaf2 0%,#f4ecd8 100%);color:#3a2f1a;border:2px solid #d4af37;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 30px rgba(212,175,55,.1);font-family:'Cormorant Garamond',Georgia,serif;animation:matricFloat .8s cubic-bezier(.34,1.56,.64,1) both}
@keyframes matricFloat{0%{transform:translateY(40px) scale(.9);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
.giri-matric-seal{font-size:4rem;margin-bottom:8px;filter:drop-shadow(0 0 20px rgba(212,175,55,.7));animation:matricSeal 2s ease-in-out infinite}
@keyframes matricSeal{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.giri-matric-title{font-size:1.8rem;font-weight:600;margin:8px 0 16px;letter-spacing:.04em;color:#7a5a16}
.giri-matric-lead{font-size:1.15rem;font-style:italic;margin:0 0 16px;color:#5a4a2a}
.giri-matric-msg{font-family:'Inter',system-ui,sans-serif;font-size:.9rem;line-height:1.55;margin:0 0 22px;color:#4a3f25;opacity:.95}
.giri-matric-msg strong{color:#7a5a16}
.giri-matric-xp{display:inline-block;padding:6px 18px;margin-bottom:24px;background:linear-gradient(90deg,#d4af37,#f4d03f);color:#3a2f1a;border-radius:20px;font-weight:600;font-size:.85rem;letter-spacing:.05em;font-family:'Inter',system-ui,sans-serif}
.giri-matric-cta{padding:12px 32px;border:1px solid #7a5a16;background:transparent;color:#7a5a16;border-radius:8px;font-size:1rem;font-family:'Cormorant Garamond',Georgia,serif;letter-spacing:.04em;cursor:pointer;transition:all .25s ease}
.giri-matric-cta:hover{background:#7a5a16;color:#fdfaf2}

.giri-quests-panel{position:fixed;top:50%;right:-440px;transform:translateY(-50%);width:420px;max-width:92vw;max-height:80vh;background:var(--bg-secondary,#fff);border:1px solid var(--border,#e2e8f0);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.25);z-index:9998;display:flex;flex-direction:column;transition:right .3s cubic-bezier(.4,0,.2,1);overflow:hidden}
.giri-quests-panel.open{right:20px}
.giri-quests-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border,#e2e8f0)}
.giri-quests-header h3{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.25rem;font-weight:600;color:var(--text,#1a202c);letter-spacing:.02em}
.giri-quests-close{background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--tm,#718096);line-height:1;padding:0 6px}
.giri-quests-close:hover{color:var(--text,#1a202c)}
.giri-quests-summary{padding:12px 18px;border-bottom:1px solid var(--border,#e2e8f0);background:rgba(0,0,0,.02)}
.giri-quests-progress-track{height:6px;background:rgba(0,0,0,.08);border-radius:3px;overflow:hidden}
.giri-quests-progress-fill{height:100%;background:linear-gradient(90deg,#d4af37,#f4d03f);border-radius:3px;transition:width .5s ease}
.giri-quests-meta{margin-top:6px;font-size:.78rem;color:var(--tm,#718096)}
.giri-quests-list{overflow-y:auto;flex:1;padding:10px 14px}
.giri-quest-card{padding:12px 14px;margin-bottom:10px;background:var(--bg-primary,#f7fafc);border:1px solid var(--border,#e2e8f0);border-radius:10px}
.giri-quest-card.completed{border-color:#d4af37;background:rgba(212,175,55,.06)}
.giri-quest-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
.giri-quest-title{font-weight:600;font-size:.92rem;color:var(--text,#1a202c)}
.giri-quest-xp{font-size:.75rem;font-weight:600;color:#d4af37;white-space:nowrap}
.giri-quest-desc{font-size:.82rem;color:var(--tm,#718096);line-height:1.4;margin-bottom:8px}
.giri-quest-bar{height:4px;background:rgba(0,0,0,.08);border-radius:2px;overflow:hidden;margin-bottom:4px}
.giri-quest-bar-fill{height:100%;background:linear-gradient(90deg,#88b04b,#d4af37);transition:width .5s ease}
.giri-quest-status{font-size:.72rem;color:var(--tm,#718096);text-align:right}
.giri-quests-foot{padding:10px 18px;font-size:.72rem;color:var(--tm,#718096);text-align:center;border-top:1px solid var(--border,#e2e8f0);font-style:italic}

.gamif-lb-panel{position:fixed;top:0;right:-380px;width:360px;height:100%;background:var(--bg2);border-left:1px solid rgba(212,168,83,.1);z-index:9998;transition:right .3s ease;overflow-y:auto;box-shadow:-4px 0 24px rgba(0,0,0,.2)}
.gamif-lb-panel.open{right:0}
@media(max-width:680px){.gamif-lb-panel{width:100%;right:-110%}}
.gamif-lb-header{padding:16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(212,168,83,.08)}
.gamif-lb-header h3{margin:0;font-size:1rem;color:var(--t)}
.gamif-lb-close{background:none;border:none;color:var(--tm);font-size:1.2rem;cursor:pointer;padding:4px 8px}
.gamif-lb-tabs{display:flex;padding:8px 16px;gap:8px}
.gamif-lb-tab{flex:1;padding:6px;text-align:center;font-size:.75rem;border-radius:8px;cursor:pointer;background:rgba(255,255,255,.04);color:var(--tm);border:none;font-family:inherit;transition:.15s}
.gamif-lb-tab.active{background:linear-gradient(135deg,rgba(212,168,83,.15),rgba(212,168,83,.08));color:var(--accent);font-weight:600}
.gamif-lb-list{padding:8px 16px}
.gamif-lb-row{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:10px;transition:.15s}
.gamif-lb-row:hover{background:rgba(212,168,83,.04)}
.gamif-lb-rank{font-size:.85rem;font-weight:700;width:28px;text-align:center;color:var(--tm)}
.gamif-lb-rank.top1{color:#f0d68a;font-size:1.1rem}
.gamif-lb-rank.top2{color:#c0c0c0}
.gamif-lb-rank.top3{color:#cd7f32}
.gamif-lb-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--bg3)}
.gamif-lb-info{flex:1;min-width:0}
.gamif-lb-name{font-size:.8rem;font-weight:600;color:var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gamif-lb-lvl{font-size:.65rem;color:var(--tm)}
.gamif-lb-xp{font-size:.75rem;font-weight:600;color:var(--accent)}
.gamif-levelup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);animation:gamifFadeIn .4s ease}
.gamif-levelup-card{text-align:center;padding:40px;border-radius:20px;background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid rgba(212,168,83,.2);box-shadow:0 0 60px rgba(212,168,83,.15);animation:gamifPop .5s ease}
.gamif-levelup-card .lu-emoji{font-size:3rem;margin-bottom:12px}
.gamif-levelup-card .lu-title{font-size:1.2rem;font-weight:700;color:var(--accent);margin-bottom:4px}
.gamif-levelup-card .lu-subtitle{font-size:.85rem;color:var(--tm);margin-bottom:16px}
.gamif-levelup-card .lu-level{font-size:1.5rem;font-weight:800;background:linear-gradient(135deg,#d4a853,#f0d68a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gamif-levelup-card .lu-close{margin-top:20px;padding:8px 24px;border-radius:12px;border:1px solid rgba(212,168,83,.2);background:rgba(212,168,83,.08);color:var(--accent);cursor:pointer;font-size:.8rem;font-family:inherit;transition:.15s}
.gamif-levelup-card .lu-close:hover{background:rgba(212,168,83,.15)}
@keyframes gamifFadeIn{from{opacity:0}to{opacity:1}}
@keyframes gamifPop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.member-item .gamif-member-level{font-size:.6rem;color:var(--tm);margin-left:4px}

/* ===== BADGE COLLECTION CARDS ===== */
.gamif-badges-row .badge-pill{font-size:.75rem;padding:2px 6px;border-radius:8px;background:rgba(255,255,255,.04);cursor:pointer;transition:.2s}
.gamif-badges-row .badge-pill:hover{background:rgba(212,168,83,.1);transform:scale(1.15)}
.badge-collection-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99998;background:rgba(0,0,0,.8);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;animation:gamifFadeIn .3s ease}
.badge-collection-panel{width:92%;max-width:560px;max-height:88vh;background:linear-gradient(160deg,#1a1520,#0f0d14,#15121c);border:1px solid rgba(212,168,83,.2);border-radius:24px;overflow:hidden;box-shadow:0 16px 64px rgba(0,0,0,.5),0 0 0 1px rgba(212,168,83,.08),inset 0 1px 0 rgba(255,255,255,.03)}
.badge-collection-header{padding:24px 24px 14px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(212,168,83,.1);background:linear-gradient(180deg,rgba(212,168,83,.04),transparent)}
.badge-collection-header h3{margin:0;font-size:1.15rem;color:#f0d68a;font-weight:700}
.badge-collection-header .bc-count{font-size:.8rem;color:rgba(212,168,83,.6);font-weight:500;margin-left:8px}
.badge-collection-close{background:none;border:none;color:rgba(255,255,255,.4);font-size:1.5rem;cursor:pointer;padding:4px 8px;border-radius:8px;transition:.15s}
.badge-collection-close:hover{background:rgba(255,255,255,.08);color:#fff}
.badge-collection-categories{padding:10px 16px;display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid rgba(212,168,83,.06)}
.badge-cat-tab{padding:5px 12px;font-size:.65rem;border-radius:20px;cursor:pointer;background:rgba(255,255,255,.04);color:rgba(255,255,255,.45);border:1px solid transparent;font-family:inherit;transition:.2s;text-transform:uppercase;letter-spacing:.5px;font-weight:500}
.badge-cat-tab:hover{background:rgba(212,168,83,.06);color:rgba(255,255,255,.7)}
.badge-cat-tab.active{background:linear-gradient(135deg,rgba(212,168,83,.2),rgba(212,168,83,.1));color:#f0d68a;font-weight:600;border-color:rgba(212,168,83,.2)}
.badge-collection-grid{padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;overflow-y:auto;max-height:58vh;scrollbar-width:thin;scrollbar-color:rgba(212,168,83,.2) transparent}
.badge-card{display:flex;flex-direction:column;align-items:center;padding:16px 8px 12px;border-radius:16px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);cursor:default;transition:.25s;position:relative;overflow:hidden}
.badge-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(212,168,83,.04) 0%,transparent 70%);opacity:0;transition:.3s}
.badge-card:hover::before{opacity:1}
.badge-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.badge-card .bc-emoji{font-size:2.2rem;margin-bottom:8px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3));transition:.3s}
.badge-card:hover .bc-emoji{transform:scale(1.15)}
.badge-card .bc-name{font-size:.7rem;font-weight:700;color:rgba(255,255,255,.9);text-align:center;line-height:1.3;margin-bottom:3px}
.badge-card .bc-desc{font-size:.58rem;color:rgba(255,255,255,.35);text-align:center;line-height:1.3}
.badge-card.locked{opacity:.25}
.badge-card.locked .bc-emoji{font-size:1.8rem;filter:grayscale(1) brightness(.5)}
.badge-card.locked .bc-name{color:rgba(255,255,255,.25)}
.badge-card.locked .bc-desc{color:rgba(255,255,255,.15)}
.badge-card.unlocked{background:linear-gradient(160deg,rgba(212,168,83,.06),rgba(255,255,255,.03));border-color:rgba(212,168,83,.15)}
.badge-card.unlocked .bc-emoji{filter:drop-shadow(0 2px 8px rgba(212,168,83,.3))}
.badge-card.unlocked .bc-name{color:#f0d68a}
.badge-card.legendary{background:linear-gradient(160deg,rgba(212,168,83,.1),rgba(255,215,0,.04));border-color:rgba(212,168,83,.25);box-shadow:0 0 20px rgba(212,168,83,.06)}
.badge-card.legendary .bc-emoji{animation:legendaryGlow 3s ease-in-out infinite}
.badge-card.legendary .bc-name{background:linear-gradient(90deg,#d4a853,#f0d68a,#d4a853);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.badge-card.secret{background:linear-gradient(160deg,rgba(120,50,220,.08),rgba(180,100,255,.03));border-color:rgba(150,80,255,.15)}
.badge-card.secret .bc-name{color:rgba(180,140,255,.6)}
.badge-card .bc-date{font-size:.5rem;color:rgba(212,168,83,.5);margin-top:4px}
.badge-card .bc-check{position:absolute;top:6px;right:6px;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#2ecc71,#27ae60);display:flex;align-items:center;justify-content:center;font-size:.55rem;color:#fff;box-shadow:0 2px 6px rgba(46,204,113,.3)}
.badge-loading{text-align:center;padding:40px;color:rgba(255,255,255,.3);font-size:.85rem}
@keyframes legendaryGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(212,168,83,.3))}50%{filter:drop-shadow(0 0 16px rgba(212,168,83,.6))}}
@keyframes badgeCardIn{from{opacity:0;transform:scale(.8) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ===== BADGE UNLOCK TOAST ===== */
.badge-toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-120px);z-index:99999;display:flex;align-items:center;gap:12px;padding:12px 20px;background:linear-gradient(135deg,rgba(30,25,15,.95),rgba(40,35,20,.95));border:1px solid rgba(212,168,83,.3);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.3),0 0 20px rgba(212,168,83,.1);backdrop-filter:blur(16px);transition:transform .5s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.badge-toast.show{transform:translateX(-50%) translateY(0)}
.badge-toast .bt-emoji{font-size:1.8rem;animation:badgePop .5s ease}
.badge-toast .bt-info{display:flex;flex-direction:column}
.badge-toast .bt-label{font-size:.6rem;text-transform:uppercase;letter-spacing:1px;color:var(--accent);font-weight:600}
.badge-toast .bt-name{font-size:.9rem;font-weight:700;color:#f0d68a}
.badge-toast .bt-desc{font-size:.7rem;color:var(--tm)}
.badge-toast .bt-particles{position:absolute;top:50%;left:20px;pointer-events:none}
.badge-toast .bt-particle{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--accent);animation:btParticle .8s ease-out forwards;opacity:0}
@keyframes badgePop{0%{transform:scale(0) rotate(-20deg)}60%{transform:scale(1.3) rotate(5deg)}100%{transform:scale(1) rotate(0)}}
@keyframes btParticle{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0)}}

/* ===== GAMIF MEMBER PROFILE POPUP ===== */
.gpb-cat{width:100%;margin:8px 0 4px;padding:2px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.gpb-cat-name{font-size:.65rem;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.25);font-weight:600}
.gpb-card{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);transition:all .2s}
.gpb-card:hover{background:rgba(255,255,255,.1);transform:scale(1.05)}
.gpb-emoji{font-size:1.1rem}
.gpb-name{font-size:.72rem;color:rgba(255,255,255,.7);white-space:nowrap}
.gp-see-all{width:100%;padding:10px;margin:8px 0;background:linear-gradient(135deg,rgba(138,43,226,.15),rgba(255,215,0,.1));border:1px solid rgba(138,43,226,.25);border-radius:10px;color:rgba(255,255,255,.8);font-size:.85rem;cursor:pointer;transition:all .2s}
.gp-see-all:hover{background:linear-gradient(135deg,rgba(138,43,226,.25),rgba(255,215,0,.15));transform:scale(1.02)}
.gp-link-row{padding:4px 16px 12px}
.gamif-profile-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99997;background:rgba(0,0,0,.75);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;animation:gamifFadeIn .3s ease}
.gamif-profile-card{width:90%;max-width:400px;background:linear-gradient(160deg,#1a1520,#0f0d14);border:1px solid rgba(212,168,83,.2);border-radius:24px;overflow:hidden;box-shadow:0 16px 64px rgba(0,0,0,.5)}
.gamif-profile-top{padding:28px 24px 20px;text-align:center;background:linear-gradient(180deg,rgba(212,168,83,.06),transparent);position:relative}
.gamif-profile-top .gp-avatar{width:72px;height:72px;border-radius:50%;margin:0 auto 10px;border:2px solid rgba(212,168,83,.25);object-fit:cover;background:var(--bg3)}
.gamif-profile-top .gp-avatar-letter{width:72px;height:72px;border-radius:50%;margin:0 auto 10px;border:2px solid rgba(212,168,83,.25);display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:700;color:var(--accent);background:rgba(212,168,83,.08)}
.gamif-profile-top .gp-name{font-size:1.1rem;font-weight:700;color:#f0d68a;margin-bottom:2px}
.gamif-profile-top .gp-level{font-size:.85rem;font-weight:600;margin-bottom:12px}
.gamif-profile-top .gp-xp-bar-outer{width:80%;margin:0 auto;height:10px;border-radius:10px;background:rgba(255,255,255,.06);overflow:hidden;position:relative}
.gamif-profile-top .gp-xp-bar-inner{height:100%;border-radius:10px;transition:width .8s ease}
.gamif-profile-top .gp-xp-text{font-size:.65rem;color:rgba(255,255,255,.35);margin-top:4px}
.gamif-profile-top .gp-streak{font-size:.75rem;color:rgba(255,255,255,.4);margin-top:8px}
.gamif-profile-badges{padding:16px 20px;border-top:1px solid rgba(212,168,83,.08)}
.gamif-profile-badges h4{font-size:.7rem;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:1px;margin:0 0 10px}
.gamif-profile-badges-grid{display:flex;flex-wrap:wrap;gap:6px}
.gamif-profile-badges-grid .gpb{font-size:1.3rem;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(212,168,83,.06);border:1px solid rgba(212,168,83,.1);transition:.2s;cursor:default}
.gamif-profile-badges-grid .gpb:hover{transform:scale(1.2);background:rgba(212,168,83,.12)}
.gamif-profile-close{position:absolute;top:12px;right:12px;background:none;border:none;color:rgba(255,255,255,.3);font-size:1.3rem;cursor:pointer;padding:4px 8px;border-radius:8px}
.gamif-profile-close:hover{background:rgba(255,255,255,.06);color:#fff}

/* ===== XP FLOAT ANIMATION ===== */
.xp-float{position:fixed;z-index:99999;pointer-events:none;font-size:.85rem;font-weight:700;color:#f0d68a;text-shadow:0 0 10px rgba(212,168,83,.4),0 2px 4px rgba(0,0,0,.5);animation:xpFloatUp 1.5s ease-out forwards}
@keyframes xpFloatUp{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:1;transform:translateY(-30px) scale(1.1)}100%{opacity:0;transform:translateY(-60px) scale(.8)}}

/* ===== MINI BADGES IN MESSAGES ===== */
.msg-mini-badges{display:inline;margin-left:3px;font-size:.7rem;vertical-align:middle;cursor:pointer}
.msg-mini-badges span{margin:0 1px;transition:.15s;display:inline-block}
.msg-mini-badges span:hover{transform:scale(1.3)}

/* ===== GAMIF SETTINGS ===== */
.gamif-setting{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid rgba(212,168,83,.06)}
.gamif-setting label{font-size:.75rem;color:var(--t)}
.gamif-toggle{position:relative;width:40px;height:22px;border-radius:12px;background:rgba(255,255,255,.1);cursor:pointer;transition:.2s;border:none;padding:0}
.gamif-toggle.on{background:rgba(46,204,113,.4)}
.gamif-toggle::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.gamif-toggle.on::after{left:20px}

/* ============================================================
   PASS 1 — SUBLIMATIONS 12/10 (2026-05-22)
   ============================================================ */

/* 1) Smooth scroll global */
html { scroll-behavior: smooth; }

/* 2) Scrollbar custom (WebKit) — discret, doré-aligné */
.messages-wrap::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.right-panel::-webkit-scrollbar,
.member-list::-webkit-scrollbar,
.giri-search-list::-webkit-scrollbar,
.giri-lib-list::-webkit-scrollbar,
.giri-hall-list::-webkit-scrollbar,
.giri-carnet-entries::-webkit-scrollbar,
.dm-conversations::-webkit-scrollbar,
.dm-msgs-wrap::-webkit-scrollbar { width: 7px; height: 7px; }
.messages-wrap::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.right-panel::-webkit-scrollbar-track,
.member-list::-webkit-scrollbar-track { background: transparent; }
.messages-wrap::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.right-panel::-webkit-scrollbar-thumb,
.member-list::-webkit-scrollbar-thumb,
.giri-search-list::-webkit-scrollbar-thumb,
.giri-lib-list::-webkit-scrollbar-thumb,
.giri-hall-list::-webkit-scrollbar-thumb,
.giri-carnet-entries::-webkit-scrollbar-thumb,
.dm-conversations::-webkit-scrollbar-thumb,
.dm-msgs-wrap::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(212,168,83,.18), rgba(212,168,83,.08));
  border-radius: 8px;
  transition: background .2s;
}
.messages-wrap::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover,
.member-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(212,168,83,.35), rgba(212,168,83,.15));
}
* { scrollbar-width: thin; scrollbar-color: rgba(212,168,83,.18) transparent; }

/* 3) Date separator — ornement académique ✦ */
.date-sep span {
  position: relative;
  padding: 4px 22px !important;
}
.date-sep span::before,
.date-sep span::after {
  content: '✦';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: .55rem;
  color: rgba(212,168,83,.45);
  opacity: .9;
}
.date-sep span::before { left: 4px; }
.date-sep span::after { right: 4px; }

/* 4) ch-item — micro-interaction polish */
.ch-item { transition: background .25s cubic-bezier(.4,0,.2,1), transform .15s, border-color .25s; }
.ch-item:hover { transform: translateX(2px); }
.ch-item.active { box-shadow: inset 3px 0 0 var(--g, #d4a853); }

/* 5) member-item — hover lift subtle */
.member-item { transition: background .2s, transform .15s; }
.member-item:hover { transform: translateX(-2px); background: rgba(212,168,83,.04); }

/* 6) Msg-item — pinned subtle pulse */
.msg-item.pinned {
  position: relative;
  background: linear-gradient(90deg, rgba(212,168,83,.04), transparent 30%);
  border-left: 2px solid rgba(212,168,83,.25);
}

/* 7) Sentinel "Tu es à jour" — chercheur visuel à la fin du fil */
.messages-wrap::after {
  content: '';
  display: block;
  height: 12px;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(212,168,83,.06), transparent);
  pointer-events: none;
}

/* 8) Composer focus glow plus chaleureux */
.msg-input-box textarea:focus {
  border-color: rgba(212,168,83,.55) !important;
  box-shadow: 0 0 0 3px rgba(212,168,83,.12), 0 0 28px rgba(212,168,83,.08), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* 9) Send button — gradient plus net + lift hover */
#sendBtn { background: linear-gradient(135deg,#e8c570,#d4a853 60%,#b8862e) !important; }
#sendBtn:not(:disabled):hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 24px rgba(212,168,83,.35) !important; }
#sendBtn:not(:disabled):active { transform: translateY(0) scale(.97); }

/* 10) Voice btn — uniformiser à la palette dorée */
.voice-btn {
  background: linear-gradient(135deg, rgba(212,168,83,.25), rgba(212,168,83,.15)) !important;
  color: var(--g, #d4a853) !important;
  border: 1px solid rgba(212,168,83,.2) !important;
}
.voice-btn:hover { background: linear-gradient(135deg, rgba(212,168,83,.35), rgba(212,168,83,.2)) !important; box-shadow: 0 6px 22px rgba(212,168,83,.25) !important; }
.voice-btn.recording { background: linear-gradient(135deg,#ef4444,#dc2626) !important; color:#fff !important; border-color:#ef4444 !important; }

/* 11) Sidebar header logo — léger glow doré pour le hover */
.sidebar-header { transition: filter .3s; }
.sidebar-header:hover { filter: brightness(1.08) drop-shadow(0 0 12px rgba(212,168,83,.15)); }

/* 12) Reactions hover polish */
.reaction { transition: transform .15s cubic-bezier(.34,1.56,.64,1), background .2s, border-color .2s; }
.reaction:hover { transform: scale(1.08); }
.reaction.mine { box-shadow: inset 0 0 0 1px rgba(212,168,83,.4); }

/* 13) Toast — fade-in plus doux */
.toast { backdrop-filter: blur(10px); }

/* 14) Modal close button — accessible focus */
.profile-close, .gamif-profile-close, .giri-hall-close, .giri-carnet-close, .giri-lib-close {
  border-radius: 8px;
  transition: background .2s, color .2s, transform .15s;
}
.profile-close:hover, .gamif-profile-close:hover, .giri-hall-close:hover, .giri-carnet-close:hover, .giri-lib-close:hover {
  transform: rotate(90deg);
}

/* 15) Members panel — sticky header pour les sections */
.member-section-header {
  position: sticky;
  top: 0;
  background: var(--bg-soft, rgba(8,4,12,.92));
  backdrop-filter: blur(6px);
  z-index: 2;
}

/* 16) Improvements mobile — touch targets ≥ 44px */
@media (max-width: 768px) {
  .ch-item { min-height: 44px; }
  .member-item { min-height: 44px; }
  .reaction { min-height: 32px; padding: 4px 8px; }
}

/* 17) Print mode (mild anti-capture déjà en place) */
@media print {
  .msg-content { color: #000 !important; }
  body::before { content: '© Giri Académie — usage personnel uniquement'; display: block; font-size: 9px; color: #888; }
}

/* 18) Loader skeleton plus élégant */
.loading-dots span { background: linear-gradient(135deg, var(--g, #d4a853), rgba(212,168,83,.4)); }

/* 19) Toast success accent doré */
.toast.success { border-left: 3px solid rgba(46,204,113,.6); }
.toast.error { border-left: 3px solid rgba(239,68,68,.6); }
.toast.info { border-left: 3px solid rgba(212,168,83,.6); }

/* 20) Empty state center cards (carnet, library, hall) */
.giri-hall-empty, .giri-carnet-empty, .giri-lib-empty, .giri-search-empty {
  text-align: center;
  padding: 40px 24px;
  color: var(--td, rgba(255,255,255,.5));
}
.giri-hall-empty::before, .giri-carnet-empty::before, .giri-lib-empty::before, .giri-search-empty::before {
  content: '✦';
  display: block;
  font-size: 2rem;
  color: rgba(212,168,83,.3);
  margin-bottom: 12px;
}

/* PASS 1 END ============================================== */


/* ============================================================
   PASS 2 — SUBLIMATIONS 12/10 (2026-05-22) — RAFFINEMENTS
   ============================================================ */

/* 21) Typography hierarchy — channel header */
.ch-header .ch-name {
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  background: linear-gradient(180deg, var(--t, #eef0ff) 65%, var(--g, #d4a853));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ch-header .ch-desc {
  font-size: .78rem !important;
  font-weight: 400;
  opacity: .85;
  letter-spacing: .1px;
}

/* 22) Channel switch — fade in subtle */
.messages-wrap .msg-item, .messages-wrap .msg {
  animation: msgFadeIn .35s cubic-bezier(.25,.46,.45,.94) backwards;
}
@keyframes msgFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 23) Space-nav hover glow */
.sn-tab { transition: filter .3s, transform .15s; position: relative; }
.sn-tab::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  opacity: 0;
  background: radial-gradient(circle at center, rgba(212,168,83,.18), transparent 70%);
  pointer-events: none;
  transition: opacity .3s;
}
.sn-tab:hover::after { opacity: 1; }
.sn-tab.active { filter: drop-shadow(0 0 8px rgba(212,168,83,.25)); }

/* 24) Gate (login screen) — entrance animation */
.gate {
  animation: gateRise .8s cubic-bezier(.16,1,.3,1);
}
@keyframes gateRise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.gate-logo { animation: logoPulse 3.5s ease-in-out infinite; }
@keyframes logoPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(212,168,83,.25)); }
  50% { filter: drop-shadow(0 0 20px rgba(212,168,83,.4)); }
}

/* 25) Welcome message — subtle ornament */
.welcome-msg h2 em {
  background: linear-gradient(90deg, #f0d68a, #d4a853, #b8862e, #d4a853, #f0d68a);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { from { background-position: 0% 0%; } to { background-position: 200% 0%; } }

/* 26) Member badges — micro-bounce on appear */
.member-item .badge,
.member-item [class*="badge"] {
  animation: badgePop .35s cubic-bezier(.34,1.56,.64,1) backwards;
}
@keyframes badgePop {
  from { opacity: 0; transform: scale(.5); }
  to { opacity: 1; transform: scale(1); }
}

/* 27) Buttons — base accessible focus + hover lift uniformisé */
button:not(:disabled), [role="button"]:not(:disabled) { transition: transform .15s, box-shadow .2s, background .2s, border-color .2s, color .2s; }

/* 28) Pinned message banner — enhance */
.pin-badge {
  background: linear-gradient(135deg, rgba(212,168,83,.18), rgba(212,168,83,.08));
  color: var(--g, #d4a853);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(212,168,83,.18);
}

/* 29) Epingles button — sticky modal trigger polish */
.epingles, [class*="epingles"], button[onclick*="epingles"], button[onclick*="Epingl"] {
  transition: background .2s, transform .15s, box-shadow .2s;
}
.epingles:hover, [class*="epingles"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(212,168,83,.15);
}

/* 30) Avatar circles — ring on hover for clickability */
.msg-avatar, .m-avatar, .profile-avatar-circle, .sb-user img, .sb-user .uavatar {
  transition: box-shadow .25s, transform .2s, filter .25s;
  cursor: pointer;
}
.msg-avatar:hover, .m-avatar:hover, .sb-user:hover .uavatar {
  box-shadow: 0 0 0 2px rgba(212,168,83,.4), 0 0 18px rgba(212,168,83,.15);
  transform: scale(1.05);
}

/* 31) Mentions — pulse subtle */
.msg-mention, .mention {
  background: linear-gradient(135deg, rgba(212,168,83,.18), rgba(212,168,83,.08));
  color: var(--g, #d4a853);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  border: 1px solid rgba(212,168,83,.2);
  transition: background .2s;
}
.msg-mention:hover, .mention:hover { background: linear-gradient(135deg, rgba(212,168,83,.3), rgba(212,168,83,.15)); }

/* 32) Search overlay — premium glassmorphism */
.giri-search-overlay { backdrop-filter: blur(12px) saturate(150%) !important; }
.giri-search-box {
  background: linear-gradient(180deg, rgba(20,16,28,.85), rgba(8,4,12,.92)) !important;
  border: 1px solid rgba(212,168,83,.2) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(212,168,83,.1) inset !important;
}
.giri-search-input {
  background: rgba(0,0,0,.25) !important;
  border-color: rgba(212,168,83,.18) !important;
}
.giri-search-input:focus {
  border-color: rgba(212,168,83,.5) !important;
  box-shadow: 0 0 0 3px rgba(212,168,83,.12) !important;
}
.giri-search-item-author { color: var(--g, #d4a853) !important; }
.giri-search-kbd {
  background: rgba(212,168,83,.1) !important;
  border: 1px solid rgba(212,168,83,.2) !important;
  color: var(--g, #d4a853) !important;
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: .65rem;
  padding: 2px 6px;
  border-radius: 5px;
}

/* 33) Reply ref — citation enhance */
.reply-ref {
  background: linear-gradient(90deg, rgba(212,168,83,.06), transparent 80%);
  border-left: 2px solid rgba(212,168,83,.35);
  padding: 4px 8px;
  margin-bottom: 4px;
  border-radius: 0 6px 6px 0;
  font-size: .8rem;
  color: var(--tm, rgba(255,255,255,.65));
}

/* 34) Online indicator — glow */
.online-dot, .m-online, [class*="online"] {
  position: relative;
}
.online-dot::after, .m-online::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: rgba(46,204,113,.4);
  filter: blur(4px);
  z-index: -1;
}

/* 35) Reduce motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 36) High-contrast media query polish */
@media (prefers-contrast: more) {
  .msg-time, .ch-desc, .sb-section, .sb-sub, .gp-streak {
    color: var(--t, #fff) !important;
    opacity: .9;
  }
}

/* 37) Selection — accent doré */
::selection { background: rgba(212,168,83,.35); color: #fff; }
::-moz-selection { background: rgba(212,168,83,.35); color: #fff; }

/* 38) Mobile — bottom sticky composer shadow */
@media (max-width: 768px) {
  .msg-input-wrap {
    box-shadow: 0 -8px 24px rgba(0,0,0,.35);
    border-top: 1px solid rgba(212,168,83,.08);
  }
}

/* 39) Loading shimmer pour skeleton — micro-feedback */
@keyframes skel { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton, [class*="skeleton"] {
  background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(212,168,83,.12) 50%, rgba(255,255,255,.04) 100%);
  background-size: 200% 100%;
  animation: skel 1.5s linear infinite;
  border-radius: 6px;
}

/* 40) Banner "Nouveaux messages" — polished */
#newMsgBanner {
  border: 1px solid rgba(212,168,83,.35) !important;
  font-weight: 600 !important;
  transition: transform .2s, box-shadow .2s !important;
}
#newMsgBanner:hover { transform: translateX(-50%) translateY(-2px) !important; box-shadow: 0 8px 32px rgba(212,168,83,.4) !important; }

/* PASS 2 END ============================================== */


/* ============================================================
   PASS 3 — SUBLIMATIONS 12/10 (2026-05-22) — POLISH FINAL
   ============================================================ */

/* 41) Space-nav — typographie + glow active */
.sn-tab {
  font-weight: 600;
  letter-spacing: .2px;
  font-size: .82rem;
  padding: 6px 14px !important;
  border-radius: 999px;
}
.sn-tab.active {
  background: linear-gradient(135deg, rgba(212,168,83,.18), rgba(212,168,83,.08)) !important;
  border: 1px solid rgba(212,168,83,.3);
}
.sn-tab .sn-icon { display: inline-block; transform: translateY(-1px); margin-right: 4px; }
.sn-sep { opacity: .35; font-size: .7rem; }

/* 42) Sidebar — sections plus aérées */
.sb-section { padding: 14px 16px 6px !important; font-weight: 600; font-size: .68rem !important; letter-spacing: 1.5px !important; }
.ch-item { padding: 8px 14px !important; border-radius: 8px !important; margin: 1px 8px !important; }
.ch-item.active { background: linear-gradient(90deg, rgba(212,168,83,.14), rgba(212,168,83,.06)) !important; }

/* 43) Member list — séparation visuelle des sections */
.rp-section, [class*="rp-section"] {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--tm, rgba(255,255,255,.55));
  padding: 12px 16px 6px !important;
  font-weight: 600;
}

/* 44) Channel header — backdrop blur premium */
.ch-header {
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
  background: linear-gradient(180deg, rgba(8,4,12,.85), rgba(8,4,12,.65)) !important;
  border-bottom: 1px solid rgba(212,168,83,.12) !important;
}

/* 45) Channel-icon — wrapper élégant */
.ch-icon {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(212,168,83,.15), rgba(212,168,83,.05));
  border: 1px solid rgba(212,168,83,.15);
  font-size: 1.1rem;
}

/* 46) Composer wrapper — élégance */
.msg-input-wrap {
  background: linear-gradient(180deg, rgba(8,4,12,.4), rgba(8,4,12,.85) 30%) !important;
  border-top: 1px solid rgba(212,168,83,.08) !important;
}

/* 47) Right-panel — séparation et padding */
.right-panel {
  border-left: 1px solid rgba(212,168,83,.08) !important;
}

/* 48) Welcome msg amélioré */
.welcome-msg { animation: gateRise .6s cubic-bezier(.16,1,.3,1); }
.welcome-msg h2 { font-size: 1.8rem !important; }
.welcome-msg p { font-size: .92rem !important; margin-top: 14px !important; }

/* 49) Tooltips natifs sont moches — affichage discret titlte sur hover */
[title] { position: relative; }

/* 50) Skin overlay 2050 — préserver netteté UI */
[data-theme] .msg-content,
[data-theme] .ch-name,
[data-theme] .author { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* 51) Typewriter pour Bienvenue (gate logo) */
.gate-form input::placeholder { transition: opacity .3s; }
.gate-form input:focus::placeholder { opacity: .4; }

/* 52) Header buttons (mobile-toggle, mobile-members) */
.mobile-toggle, .mobile-members-btn {
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(212,168,83,.12);
  background: rgba(212,168,83,.04);
  color: var(--t, #fff);
  transition: background .2s, transform .15s, border-color .2s;
}
.mobile-toggle:hover, .mobile-members-btn:hover {
  background: rgba(212,168,83,.12);
  border-color: rgba(212,168,83,.3);
  transform: translateY(-1px);
}

/* 53) DM button (#desktopDmBtn) — élégance */
#desktopDmBtn {
  background: linear-gradient(135deg, rgba(212,168,83,.22), rgba(212,168,83,.1)) !important;
  color: var(--g, #d4a853) !important;
  border: 1px solid rgba(212,168,83,.22) !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
  text-transform: uppercase;
  font-size: .68rem !important;
  padding: 6px 12px !important;
  transition: transform .15s, box-shadow .2s, background .2s !important;
}
#desktopDmBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(212,168,83,.25);
  background: linear-gradient(135deg, rgba(212,168,83,.35), rgba(212,168,83,.18)) !important;
}

/* 54) Roles badges (ÉLÈVE, MAÎTRE) — uniformiser */
[class*="badge"], .role-title, .m-role-title {
  font-size: .58rem !important;
  font-weight: 700 !important;
  letter-spacing: .8px !important;
  text-transform: uppercase;
}

/* 55) Founder/Master badges — special glow */
.member-item.founder, .member-item.master {
  background: linear-gradient(90deg, rgba(212,168,83,.04), transparent 50%) !important;
}
.member-item.founder .m-avatar, .member-item.master .m-avatar {
  box-shadow: 0 0 0 2px rgba(212,168,83,.3);
}

/* 56) Online dot — clean position */
.m-online-dot, .online-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #2ecc71;
  border: 2px solid var(--bg, #0a0a0f);
  display: inline-block;
}

/* 57) DM badge unread — pulse */
.dm-unread-badge, [class*="unread-badge"] {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
  animation: unreadPulse 2s ease-in-out infinite;
}
@keyframes unreadPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.5); }
  50% { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}

/* 58) Lock icon — sécurise visuellement */
.lock-icon, [class*="ch-private"] .lock {
  color: var(--tm, rgba(255,255,255,.4));
  margin-left: 4px;
  font-size: .75rem;
}

/* 59) Final touch — body font-feature settings */
body {
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1;
  text-rendering: optimizeLegibility;
}

/* 60) Visually-hidden helper pour SEO/a11y */
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* PASS 3 END ============================================== */


/* ============================================================
   THEME — DATE SEPARATOR REFONTE (2026-05-22)
   Pill rose-blanc trop visible → version dark + filigrane or
   ============================================================ */

/* Override Pass 1 : reset pill + ligne ténue or filigrane */
.date-sep {
  text-align: center;
  padding: 18px 0 14px !important;
  position: relative;
  margin: 8px 0;
}
.date-sep::before {
  content: '';
  position: absolute;
  left: 14%; right: 14%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212,168,83,.18) 25%,
    rgba(212,168,83,.32) 50%,
    rgba(212,168,83,.18) 75%,
    transparent 100%);
  pointer-events: none;
}
.date-sep span {
  position: relative;
  background: transparent !important;
  border: none !important;
  padding: 0 18px !important;
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-size: .78rem !important;
  font-weight: 500;
  letter-spacing: 2.2px !important;
  text-transform: uppercase;
  color: rgba(212,168,83,.62) !important;
  text-shadow: 0 0 14px rgba(212,168,83,.18);
  display: inline-block;
}
.date-sep span::before,
.date-sep span::after {
  content: '✦';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: .55rem !important;
  color: rgba(212,168,83,.55) !important;
  opacity: 1 !important;
}
.date-sep span::before { left: 2px; }
.date-sep span::after { right: 2px; }

/* Mobile — encore plus discret */
@media (max-width: 480px) {
  .date-sep { padding: 14px 0 10px !important; }
  .date-sep::before { left: 8%; right: 8%; }
  .date-sep span {
    background: transparent !important;
    border: none !important;
    padding: 0 14px !important;
    font-size: .68rem !important;
    letter-spacing: 1.8px !important;
  }
}

/* Pour les thèmes clairs (lotus/aube/sable/glacier) — adapter la couleur */
[data-theme="lotus"] .date-sep::before,
[data-theme="aube"] .date-sep::before,
[data-theme="sable"] .date-sep::before,
[data-theme="glacier"] .date-sep::before {
  background: linear-gradient(90deg, transparent 0%, rgba(184,134,46,.25) 50%, transparent 100%);
}
[data-theme="lotus"] .date-sep span,
[data-theme="aube"] .date-sep span,
[data-theme="sable"] .date-sep span,
[data-theme="glacier"] .date-sep span {
  color: rgba(184,134,46,.75) !important;
  text-shadow: none !important;
}
[data-theme="lotus"] .date-sep span::before,
[data-theme="lotus"] .date-sep span::after,
[data-theme="aube"] .date-sep span::before,
[data-theme="aube"] .date-sep span::after,
[data-theme="sable"] .date-sep span::before,
[data-theme="sable"] .date-sep span::after,
[data-theme="glacier"] .date-sep span::before,
[data-theme="glacier"] .date-sep span::after {
  color: rgba(184,134,46,.65) !important;
}

/* DATE-SEP REFONTE END ===================================== */


/* ============================================================
   PASS MOBILE — POLISH DÉDIÉ (2026-05-22)
   ============================================================ */

/* M1) Space-nav — scroll horizontal sans coupure sur petit écran */
@media (max-width: 768px) {
  .space-nav {
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
    padding: 8px 12px !important;
  }
  .space-nav::-webkit-scrollbar { display: none; }
  .sn-tab {
    scroll-snap-align: start;
    flex-shrink: 0;
    font-size: .78rem !important;
    padding: 6px 14px !important;
  }
  .sn-sep { flex-shrink: 0; }
}

/* M2) Channel header — compact mobile, masquer description sur très petit */
@media (max-width: 480px) {
  .ch-header { padding: 8px 12px !important; gap: 8px !important; }
  .ch-header .ch-desc { display: none !important; }
  .ch-header .ch-name { font-size: .95rem !important; line-height: 1.2 !important; }
  .ch-icon { width: 32px !important; height: 32px !important; font-size: .95rem !important; }
}

/* M3) Header actions inline — DM + Membres collés à droite */
@media (max-width: 768px) {
  .ch-header { display: flex; align-items: center; }
  .ch-header .ch-info { flex: 1; min-width: 0; overflow: hidden; }
  .ch-header .ch-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ch-header .mobile-toggle,
  .ch-header .mobile-members-btn,
  .ch-header #dmListBtn {
    width: 36px !important; height: 36px !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
    flex-shrink: 0;
  }
}

/* M4) Composer mobile — border doré subtile + safe-area iOS */
@media (max-width: 768px) {
  .msg-input-wrap {
    padding-bottom: env(safe-area-inset-bottom, 8px) !important;
    border-top: 1px solid rgba(212,168,83,.15) !important;
    background: linear-gradient(180deg, rgba(8,4,12,.5), rgba(8,4,12,.92) 40%) !important;
  }
  .msg-input-box { padding: 6px 10px 8px !important; }
  .msg-input-box textarea { font-size: 16px !important; padding: 10px 14px !important; border-radius: 14px !important; }
  .msg-input-box button { width: 42px !important; height: 42px !important; border-radius: 12px !important; }
}

/* M5) Date sep mobile — pill plus discret */
@media (max-width: 480px) {
  .date-sep { padding: 8px 0 !important; }
  .date-sep span {
    background: rgba(212,168,83,.08) !important;
    padding: 3px 18px !important;
    border-radius: 999px;
    font-size: .65rem !important;
    border: 1px solid rgba(212,168,83,.12);
  }
  .date-sep::before { display: none; }
}

/* M6) Messages mobile — densité optimale */
@media (max-width: 480px) {
  .msg, .msg-item { padding: 10px 12px !important; margin-bottom: 4px !important; }
  .msg .msg-avatar, .msg-item .msg-avatar { width: 32px !important; height: 32px !important; }
  .msg .author, .msg-item .author, .msg-author { font-size: .85rem !important; }
  .msg-time { font-size: .68rem !important; }
  .msg-content { font-size: .92rem !important; line-height: 1.45 !important; }
  .role-title, [class*="badge"] { font-size: .54rem !important; padding: 1px 6px !important; }
}

/* M7) Members panel mobile — slide-in plus fluide */
@media (max-width: 768px) {
  #mobileMembersOverlay, .mobile-members-overlay {
    transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .25s !important;
  }
  .mobile-members-search input { font-size: 16px !important; height: 44px !important; }
}

/* M8) Bouton retour vers haut — flottant mobile */
@media (max-width: 768px) {
  #newMsgBanner {
    bottom: 80px !important;
    font-size: .78rem !important;
    padding: 8px 18px !important;
  }
}

/* M9) Modals plein écran mobile — UX native */
@media (max-width: 480px) {
  .giri-search-overlay, .giri-hall-overlay, .giri-lib-overlay, .giri-carnet-overlay,
  .profile-modal, .gamif-profile, .dm-overlay {
    padding: 0 !important;
    padding-top: env(safe-area-inset-top, 0) !important;
  }
  .giri-search-box, .giri-hall-box, .giri-lib-modal, .giri-carnet-modal,
  .profile-box, .gamif-profile-inner, .dm-panel {
    border-radius: 16px 16px 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    margin: 0 !important;
    margin-top: auto !important;
  }
}

/* M10) Drag handle pour bottom-sheet modals */
@media (max-width: 480px) {
  .giri-search-box::before, .giri-hall-box::before, .giri-lib-modal::before,
  .giri-carnet-modal::before, .profile-box::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: rgba(212,168,83,.3);
    border-radius: 2px;
    margin: 8px auto 4px;
  }
}

/* M11) Sidebar mobile — slide-out smooth + backdrop */
@media (max-width: 768px) {
  .sidebar { transition: transform .3s cubic-bezier(.16,1,.3,1) !important; }
  .sidebar.open { box-shadow: 4px 0 32px rgba(0,0,0,.5); }
}

/* M12) Reactions mobile — touch-friendly */
@media (max-width: 480px) {
  .reaction { padding: 4px 10px !important; font-size: .82rem !important; min-height: 30px; min-width: 38px; }
  .msg-reactions { gap: 4px !important; margin-top: 4px !important; }
}

/* M13) Voice button mobile — ne pas afficher si pas en focus textarea */
@media (max-width: 480px) {
  .voice-btn { width: 42px !important; height: 42px !important; }
}

/* M14) Gate mobile — formulaire en colonne */
@media (max-width: 480px) {
  .gate-form { flex-direction: column !important; gap: 10px !important; width: 100% !important; }
  .gate-form input { width: 100% !important; }
  .gate-form button { width: 100% !important; padding: 14px !important; font-size: 1rem !important; }
  .gate h1 { font-size: 1.4rem !important; }
  .gate p { font-size: .85rem !important; line-height: 1.5; padding: 0 16px; }
}

/* M15) Sidebar header (logo) mobile — réduit */
@media (max-width: 768px) {
  .sb-header { padding: 14px 16px !important; }
  .sb-header .title { font-size: 1.1rem !important; }
  .sb-header .sub { font-size: .7rem !important; }
}

/* M16) ch-name truncate uniform */
@media (max-width: 768px) {
  .ch-name { max-width: 60vw; }
}

/* M17) Members overlay header polish */
@media (max-width: 768px) {
  .mobile-members-overlay .members-header,
  .mobile-members-overlay > h2,
  .mobile-members-overlay > h3 {
    padding: 16px 18px !important;
    font-size: 1rem !important;
    border-bottom: 1px solid rgba(212,168,83,.12) !important;
  }
}

/* M18) Empty state vide — "Tu es à jour" en bas du fil mobile */
@media (max-width: 768px) {
  .messages-wrap:has(.msg:last-child)::after {
    content: '✨ Tu es à jour';
    display: block;
    text-align: center;
    padding: 24px 16px 32px !important;
    font-size: .75rem;
    color: rgba(212,168,83,.4);
    letter-spacing: .5px;
    background: none !important;
    height: auto !important;
  }
}

/* M19) Tap highlight color custom (au lieu du gris natif) */
* { -webkit-tap-highlight-color: rgba(212,168,83,.18); }

/* M20) Disable zoom sur double-tap composer (UX chat native) */
.msg-input-box textarea, .msg-input-box button {
  touch-action: manipulation;
}

/* PASS MOBILE END ========================================== */


/* ============================================================
   A11Y PASS — TAP TARGETS WCAG 2.5.8 (2026-05-22)
   ============================================================ */
.create-ch-btn { width: 26px !important; height: 26px !important; }
@media (max-width: 768px) { .create-ch-btn { width: 32px !important; height: 32px !important; } }
.ch-header button { min-height: 32px; }
@media (max-width: 768px) { .ch-header button, .ch-header .btn { min-height: 40px !important; } }
/* A11Y PASS END ============================================ */


/* ============================================================
   FINAL POLISH 10/10 — A11Y + Focus visible (2026-05-22)
   ============================================================ */
/* Header pills hauteur min 32px (épingles, DM, members) */
.ch-header > * button, .ch-header button.btn-pill, .ch-header > button {
  min-height: 32px !important;
  padding: 6px 12px !important;
}
#desktopDmBtn { min-height: 32px !important; padding: 7px 14px !important; }

/* Focus visible accessible — anneau or */
:focus-visible {
  outline: 2px solid rgba(212,168,83,.7) !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}
button:focus-visible, a:focus-visible, [role=button]:focus-visible {
  box-shadow: 0 0 0 3px rgba(212,168,83,.25);
}

/* aria-pressed et aria-current — feedback visuel */
[aria-pressed=true], [aria-current=page] {
  background: linear-gradient(135deg, rgba(212,168,83,.18), rgba(212,168,83,.08)) !important;
}

/* Empêche le double-clic accidentel sur les boutons critiques */
button[disabled], [aria-disabled=true] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Print stylesheet minimal — éviter les fonds noirs lors de l'impression */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .sidebar, .right-panel, .msg-input-wrap, .space-nav { display: none !important; }
  .main-area, .messages-wrap { width: 100% !important; max-width: 100% !important; }
  .msg, .msg-item { page-break-inside: avoid; border: 1px solid #ccc; margin: 8px 0; }
}
/* FINAL POLISH END ========================================= */

/* MOBILE OVERRIDE — forcer header buttons 40px haut */
@media (max-width: 768px) {
  .ch-header button, .ch-header > * button { min-height: 40px !important; padding: 8px 12px !important; }
  #desktopDmBtn, #dmListBtn { min-height: 40px !important; }
}