/* Basic styling for chatbox */
:root{ --bg:#0f172a; --card:#111827; --text:#e5e7eb; --accent:#22c55e; }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;background:var(--bg) center/cover fixed no-repeat;color:var(--text);}
.card{background:rgba(17,24,39,.88);border:1px solid #1f2937;border-radius:16px;max-width:1100px;margin:16px auto;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.container{padding:12px}
.header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;gap:10px}
.brand{font-weight:700}
.btn{border:1px solid #334155;background:#0b1220;color:#e5e7eb;padding:8px 12px;border-radius:12px;cursor:pointer}
.btn.primary{background:var(--accent);color:#06240f}
.input,select{width:100%;padding:10px 12px;border:1px solid #334155;background:#0b1220;color:#e5e7eb;border-radius:10px}
.row{display:flex;gap:12px}.col{flex:1}
.small{font-size:.9em;color:#94a3b8}.link{color:#60a5fa;cursor:pointer}
.grid{display:grid;grid-template-columns:280px 1fr;gap:12px}
.sep{border-color:#1f2937;margin:12px 0}
.bg-preview{position:fixed;inset:0;z-index:-1;background-size:cover;background-position:center;opacity:.18;filter:blur(1px)}

.sidebar{padding:10px 12px}
.online{display:flex;flex-direction:column;gap:8px;max-height:70vh;overflow:auto}
.badge{display:inline-flex;gap:6px;align-items:center}
.badge .dot{width:8px;height:8px;border-radius:50%;background:#22c55e}

.chat{display:flex;flex-direction:column}
.toolbar{padding:12px;border-bottom:1px solid #1f2937;display:flex;gap:8px;align-items:center;position:sticky;top:0;background:rgba(17,24,39,.95);backdrop-filter: blur(10px);z-index:5}
.msgform{display:flex;gap:8px;align-items:center;width:100%}
.mtop{margin-top:8px}.mtop14{margin-top:14px}

.messages{display:flex;flex-direction:column-reverse;gap:10px;padding:12px;max-height:70vh;overflow:auto}
.msg{display:flex;gap:10px;align-items:flex-start}
.msg.self{flex-direction:row-reverse}
.msg .bubble{max-width:62%;padding:10px 12px;border-radius:16px;border:1px solid #22314a;background:#0a1322}
.msg.self .bubble{background:#0c2b1b;border-color:#1a3c2a}
.msg .meta{font-size:.82em;margin-bottom:6px}
.username{font-weight:700}
.username.glitter{background: linear-gradient(90deg,#fff, #ffd700, #ff69b4, #7dd3fc, #fff); background-size:400% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:glitter 3s linear infinite}
@keyframes glitter{0%{background-position:0 0}100%{background-position:400% 0}}
.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;position:relative;cursor:pointer}
.frame{position:absolute;top:-2px;left:-2px;width:46px;height:46px;border-radius:50%;pointer-events:none}
.reply{font-size:.85em;border-left:3px solid #334155;padding-left:8px;margin-bottom:6px;color:#94a3b8}
.msg img.upload{max-width:220px;max-height:220px;border-radius:12px;border:1px solid #22314a;display:block}
.msg img.emote{max-width:220px;max-height:220px;border-radius:12px;border:1px solid #22314a;display:block}

.admin-panel{display:none;margin-top:12px;padding:12px;border-top:1px dashed #334155}
.admin-panel.active{display:block}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:16px;z-index:99}
.modal.active{display:flex}
.modal .box{background:#0b1220;border:1px solid #22314a;border-radius:16px;max-width:460px;width:100%;padding:16px}