/* ── Root ───────────────────────────────────────────────── */
:root{--sidebar-w:260px;--navbar-h:56px}
*{box-sizing:border-box}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;margin:0;background:#f1f5f9}

/* ── Auth ───────────────────────────────────────────────── */
.auth-bg{background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}
.auth-card{background:#fff;border-radius:18px;padding:2rem;width:100%;max-width:440px;box-shadow:0 24px 64px rgba(0,0,0,.45)}
.auth-logo{max-height:64px;max-width:200px;object-fit:contain}

/* ── Navbar ─────────────────────────────────────────────── */
.navbar{box-shadow:0 2px 16px rgba(0,0,0,.35)}

/* ── Role badges ────────────────────────────────────────── */
.badge-super_admin{background:#7c2d12;color:#fff}
.badge-admin{background:#dc2626;color:#fff}
.badge-group_admin{background:#d97706;color:#fff}
.badge-VIP{background:#7c3aed;color:#fff}
.badge-user{background:#4b5563;color:#fff}
.badge-my{background:#3b82f6;color:#fff}
.badge-vip{background:#7c3aed;color:#fff}
.badge-admin-map{background:#dc2626;color:#fff}

/* ── Dashboard cards ────────────────────────────────────── */
.dash-card{border:none;border-radius:16px;cursor:pointer;text-decoration:none;color:inherit;display:block;transition:transform .2s,box-shadow .2s}
.dash-card:hover{transform:translateY(-5px);box-shadow:0 20px 48px rgba(0,0,0,.22)!important}

/* ── Chat ───────────────────────────────────────────────── */
#chat-wrap{display:flex;height:calc(100vh - var(--navbar-h));overflow:hidden}
#sidebar{width:var(--sidebar-w);min-width:190px;background:#1e293b;color:#e2e8f0;display:flex;flex-direction:column;flex-shrink:0}
#side-header{padding:.75rem 1rem;border-bottom:1px solid #334155}
#side-search{background:#334155;border:none;color:#e2e8f0;border-radius:8px;padding:.4rem .75rem;width:100%;font-size:.83rem}
#side-search::placeholder{color:#64748b}
.side-section{padding:.5rem 1rem .25rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:#64748b;font-weight:700}
.room-item{padding:.5rem 1rem;cursor:pointer;border-radius:6px;margin:2px 6px;display:flex;align-items:center;gap:.5rem;font-size:.85rem;transition:background .15s}
.room-item:hover{background:#334155}
.room-item.active{background:#1a56db;color:#fff!important}
.room-item .badge{margin-left:auto;font-size:.6rem}
#chat-main{flex:1;display:flex;flex-direction:column;min-width:0}
#chat-header{padding:.6rem 1rem;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:.75rem;background:#f8fafc;flex-shrink:0}
#messages{flex:1;overflow-y:auto;padding:1rem;background:#f1f5f9}
.msg-row{display:flex;margin-bottom:.6rem}
.msg-row.mine{justify-content:flex-end}
.bubble{max-width:72%;padding:.55rem .8rem;border-radius:12px;font-size:.87rem;line-height:1.55;word-break:break-word}
.bubble-mine{background:#1a56db;color:#fff;border-radius:14px 14px 2px 14px}
.bubble-other{background:#fff;border:1px solid #e2e8f0;border-radius:14px 14px 14px 2px}
.msg-sender{font-size:.7rem;font-weight:700;color:#1a56db;margin-bottom:.15rem}
.msg-meta{font-size:.65rem;color:#94a3b8;margin-top:.2rem}
.typing-indicator{font-size:.75rem;color:#6b7280;padding:.1rem 1rem;min-height:1.2rem}
#chat-input{padding:.65rem 1rem;border-top:1px solid #e5e7eb;background:#f8fafc;display:flex;gap:.5rem;align-items:flex-end;flex-shrink:0}
#msg-text{flex:1;border:1px solid #d1d5db;border-radius:14px;padding:.55rem 1rem;resize:none;font-size:.88rem;max-height:120px;line-height:1.5;overflow-y:auto}
#msg-text:focus{outline:none;border-color:#1a56db}
.btn-icon{background:none;border:none;cursor:pointer;padding:.45rem;border-radius:8px;color:#64748b;font-size:1.1rem;transition:background .15s,color .15s}
.btn-icon:hover{background:#e2e8f0;color:#1e293b}
.chat-img{max-width:240px;max-height:240px;border-radius:10px;cursor:pointer;display:block;object-fit:cover}
.chat-audio{width:100%;max-width:300px}
#rec-bar{display:none;align-items:center;gap:.6rem;padding:.5rem .9rem;background:#fef2f2;border-top:1px solid #fecaca}
#rec-bar.active{display:flex}
#rec-dot{width:10px;height:10px;border-radius:50%;background:#ef4444;animation:recblink 1s infinite}
@keyframes recblink{0%,100%{opacity:1}50%{opacity:.25}}
#grp-modal{display:none;position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.55);align-items:center;justify-content:center}
#grp-modal.open{display:flex}
#grp-modal-inner{background:#fff;border-radius:14px;padding:1.4rem;width:92%;max-width:420px;max-height:85vh;overflow-y:auto}
.member-pick{display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;border-radius:8px;cursor:pointer}
.member-pick:hover{background:#f1f5f9}
.member-pick.sel{background:#eff6ff}

/* ── Map ────────────────────────────────────────────────── */
@keyframes blink{0%,100%{opacity:1}50%{opacity:.1}}
.blink{animation:blink 1.2s infinite}
@keyframes adminBlink{0%,100%{opacity:1;transform:scale(1.08)}50%{opacity:.2;transform:scale(.95)}}
.admin-blink{animation:adminBlink .7s infinite}
@keyframes slowBlink{0%,100%{opacity:1}50%{opacity:.4}}
.slow-blink{animation:slowBlink 2s infinite}

/* ── Gallery ─────────────────────────────────────────────── */
.gallery-card img{height:180px;object-fit:cover}
.snap-card{cursor:pointer;position:relative;overflow:hidden;border-radius:10px}
.snap-card img{height:190px;width:100%;object-fit:cover;transition:transform .25s}
.snap-card:hover img{transform:scale(1.06)}
.snap-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 45%);display:flex;align-items:flex-end;padding:.5rem;color:#fff;font-size:.74rem}
#fs-viewer{display:none;position:fixed;inset:0;z-index:99999;background:rgba(5,8,15,.95);align-items:center;justify-content:center;flex-direction:column}
#fs-viewer.open{display:flex}
#fs-img{max-width:92vw;max-height:80vh;transition:transform .15s;cursor:grab;user-select:none}
#fs-controls{display:flex;gap:.5rem;margin-top:1rem}
#fs-meta{color:#cbd5e1;text-align:center;margin-top:.75rem;font-size:.85rem;max-width:80vw}
#fs-close{position:absolute;top:18px;right:24px;color:#fff;font-size:1.8rem;cursor:pointer;z-index:2}
.zoom-btn{background:#1e293b;color:#fff;border:1px solid #334155;border-radius:8px;padding:.4rem .8rem;cursor:pointer}
.zoom-btn:hover{background:#334155}
.gal-tabs{display:flex;gap:6px;margin-bottom:1rem}
.gal-tab{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;padding:.4rem 1rem;font-size:.85rem;font-weight:600;color:#475569;cursor:pointer}
.gal-tab.active{background:#1a56db;color:#fff;border-color:#1a56db}
.gal-section{display:none}
.gal-section.active{display:block}

/* ── Voice ───────────────────────────────────────────────── */
#rec-ring{width:90px;height:90px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;margin:0 auto;transition:background .3s}
#rec-ring.active{background:#fca5a5;animation:pulse-r 1.5s infinite}
@keyframes pulse-r{0%{box-shadow:0 0 0 0 rgba(220,38,38,.45)}70%{box-shadow:0 0 0 18px rgba(220,38,38,0)}100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}}

/* ── Calls ───────────────────────────────────────────────── */
#incoming-call-card{display:none;position:fixed;top:1.2rem;right:1.2rem;z-index:9998;background:#fff;border-radius:16px;
  padding:1.25rem 1.5rem;box-shadow:0 20px 56px rgba(0,0,0,.35);min-width:260px}
#incoming-call-card.active{display:block;animation:fadeUp .25s ease}
#ic-avatar{width:56px;height:56px;border-radius:50%;background:#1a56db;color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:1.6rem}
.ic-avatar-letter{font-weight:700}
#call-modal{display:none;position:fixed;inset:0;background:rgba(15,23,42,.95);z-index:9999;flex-direction:column;
  align-items:center;justify-content:center;padding:1.2rem}
#call-modal.active{display:flex}
#call-modal-bar{display:flex;align-items:center;gap:1rem;color:#fff;font-size:.95rem;margin-bottom:.8rem}
#call-modal-duration{color:#94a3b8}
#jitsi-frame{width:100%;max-width:980px;height:min(70vh,640px);border:none;border-radius:14px;background:#000}
#call-modal-controls{display:flex;gap:1rem;justify-content:center;margin-top:1rem}

/* ── Toasts ──────────────────────────────────────────────── */
#toast-box{position:fixed;bottom:1.2rem;right:1.2rem;z-index:99999;display:flex;flex-direction:column;gap:.5rem}
.t-toast{padding:.65rem 1.1rem;border-radius:10px;color:#fff;font-size:.84rem;min-width:220px;max-width:360px;box-shadow:0 6px 20px rgba(0,0,0,.35);animation:fadeUp .3s ease;display:flex;align-items:center;gap:.5rem}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.t-info{background:#1a56db}.t-success{background:#057a55}.t-warning{background:#b45309}.t-danger{background:#c81e1e}
.t-toast button{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;font-size:1rem;margin-left:auto;padding:0}
.t-toast button:hover{color:#fff}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:#f1f5f9}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:640px){#sidebar{width:220px}.bubble{max-width:86%}#jitsi-frame{height:60vh}}
@media(max-width:480px){#sidebar{position:absolute;z-index:200;height:100%;transform:translateX(-100%);transition:transform .25s}#sidebar.open{transform:none}#chat-main{width:100%}}

/* ── Cesium widget overrides ─────────────────────────────────── */
/* Remove default Cesium toolbar chrome that conflicts with our UI  */
.cesium-viewer-toolbar            { display: none !important; }
.cesium-viewer-animationContainer { display: none !important; }
.cesium-viewer-timelineContainer  { display: none !important; }
.cesium-viewer-bottom             { bottom: 0 !important; }
/* Credit bar: keep visible (legal) but style to match dark theme */
.cesium-credit-lightbox-overlay   { z-index: 99990 !important; }
.cesium-credit-expand-link,
.cesium-credit-text               { color: #64748b !important; font-size: .62rem !important; }

/* ── 3D map badge type colours ───────────────────────────────── */
.badge-monitor { background: #0369a1; color: #fff; }

/* ── Cesium spinner (matches gallery loading overlay) ────────── */
@keyframes cesium-spin { to { transform: rotate(360deg); } }

/* ── Gallery card map_type badges ───────────────────────────── */
.badge-my      { background: #3b82f6; color: #fff; }
.badge-vip     { background: #7c3aed; color: #fff; }
.badge-admin   { background: #dc2626; color: #fff; }