/* ChatBase — Staff panel (staffpanel.js). Cards/buttons/inputs reuse admin.css's .ad-* classes. */

#stRoot { display: flex; flex-direction: column; gap: 16px; }
.st-card { scroll-margin-top: 70px; }
.st-jump { display: flex; flex-wrap: wrap; gap: 6px; position: sticky; top: 0; z-index: 5; padding: 8px 0;
    background: var(--neo-surface, rgba(10,10,20,.85)); backdrop-filter: blur(10px); }

.st-lvl { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.08); white-space: nowrap; }
.st-lvl.st-admin { background: rgba(138,180,255,.18); color: #a9c6ff; }
.st-lvl.st-helper { background: rgba(52,232,176,.16); color: #5ef0c0; }
.st-lvl.st-super, .st-lvl.st-owner { background: rgba(255,196,107,.18); color: #ffc46b; }

.st-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.st-kpis > div { background: rgba(255,255,255,.05); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.st-kpis b { font-size: 22px; }
.st-kpis span { font-size: 12px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.st-note { margin-top: 12px; }

.st-chip { display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.08); margin: 2px 0; }
.st-chip.yes { background: rgba(52,232,176,.16); color: #5ef0c0; }
.st-chip.ask { background: rgba(255,180,67,.16); color: #ffc46b; }
.st-chip.no { background: rgba(255,90,122,.16); color: #ff8aa0; }

.st-list { display: flex; flex-direction: column; gap: 8px; }
.st-item { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
.st-item-top { margin-bottom: 4px; }
.st-quote { margin: 4px 0; padding: 6px 10px; border-left: 3px solid rgba(255,255,255,.18); color: var(--neo-dim, rgba(235,235,245,.75)); }
.st-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.st-acts .ad-btn, .st-msg-acts .ad-btn { padding: 5px 10px; font-size: 12.5px; }

.st-msg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.st-msg .st-text { flex: 1 1 180px; min-width: 0; }
.st-room { font-size: 11px; padding: 2px 7px; border-radius: 6px; background: rgba(138,180,255,.14); color: #a9c6ff; }
.st-msg-acts { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.st-msg-acts select.ad-input { padding: 4px 6px; font-size: 12px; width: auto; }
.st-gif { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }

.st-res { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.st-person { margin-top: 10px; }
.st-person-top h3 { margin: 0 0 2px; font-size: 18px; }

.st-rooms { display: flex; flex-direction: column; gap: 6px; }
.st-room-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); }
.st-room-row > b { min-width: 90px; }
.st-room-row select.ad-input { width: auto; padding: 4px 6px; font-size: 12px; }
.st-room-row .ad-btn { padding: 5px 10px; font-size: 12.5px; }
.st-pin { font-size: 12px; color: var(--neo-dim, rgba(235,235,245,.7)); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.st-ask { display: flex; flex-direction: column; gap: 8px; }
.st-ask textarea { resize: vertical; font: inherit; }

/* 🛡️ quick delete on chat messages (staff only) */
.st-del { margin-left: 8px; font-size: 11px; padding: 2px 6px; border-radius: 6px; border: 1px solid rgba(255,90,122,.35);
    background: rgba(255,90,122,.1); color: #ff8aa0; cursor: pointer; opacity: .55; }
.message:hover .st-del, .st-del:focus { opacity: 1; }

@media (max-width: 600px) {
    .st-kpis { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
    .st-kpis b { font-size: 18px; }
    .st-room-row > b { min-width: 0; width: 100%; }
}