:root {
  --bg:        #0d1117;
  --surface:   #161b22;
  --surface2:  #1c2128;
  --border:    #30363d;
  --accent:    #4f8ef7;
  --accent-dk: #3a6fd4;
  --danger:    #e05252;
  --success:   #3ecf8e;
  --warning:   #f0a500;
  --text:      #e6edf3;
  --muted:     #7d8590;
  --radius:    8px;
  --sidebar-w: 240px;
  --header-h:  52px;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'IBM Plex Sans', sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.6;min-height:100vh;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ── App shell ───────────────────────────────────────────── */
.app-shell{display:flex;flex-direction:column;height:100vh;overflow:hidden;}

/* ── Top bar ─────────────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;gap:1rem;
  height:var(--header-h);padding:0 1rem;
  background:var(--surface);border-bottom:1px solid var(--border);
  flex-shrink:0;z-index:100;
}
.topbar .brand{font-family:var(--mono);font-weight:700;font-size:1rem;color:var(--accent);white-space:nowrap;}
.topbar .room-title{font-weight:600;font-size:.95rem;color:var(--text);}
.topbar .room-type{font-size:.75rem;color:var(--muted);margin-left:.3rem;}
.topbar nav{margin-left:auto;display:flex;align-items:center;gap:1rem;}
.topbar nav a{color:var(--muted);font-size:.85rem;}
.topbar nav a:hover{color:var(--text);text-decoration:none;}
.topbar .nav-user{color:var(--muted);font-size:.82rem;font-family:var(--mono);}
.btn-nav{background:var(--accent);color:#fff!important;padding:.25rem .75rem;border-radius:var(--radius);font-weight:600;font-size:.82rem;}

/* ── Body row ────────────────────────────────────────────── */
.body-row{display:flex;flex:1;overflow:hidden;}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
}
.sidebar-section{padding:.75rem .5rem .25rem;}
.sidebar-label{
  font-size:.68rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
  padding:.15rem .5rem;display:flex;align-items:center;justify-content:space-between;
}
.sidebar-label button{
  background:none;border:none;color:var(--muted);cursor:pointer;font-size:1rem;
  line-height:1;padding:0 .2rem;border-radius:4px;
}
.sidebar-label button:hover{color:var(--text);background:var(--surface2);}
.sidebar-rooms{list-style:none;overflow-y:auto;flex:1;}
.sidebar-rooms li a{
  display:flex;align-items:center;gap:.4rem;
  padding:.3rem .75rem;border-radius:6px;margin:1px .25rem;
  color:var(--muted);font-size:.88rem;transition:background .1s,color .1s;
}
.sidebar-rooms li a:hover{background:var(--surface2);color:var(--text);text-decoration:none;}
.sidebar-rooms li a.active{background:var(--surface2);color:var(--text);font-weight:600;}
.sidebar-rooms li a .room-icon{font-size:.8rem;opacity:.7;flex-shrink:0;}
.sidebar-rooms li a .room-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sidebar-divider{border:none;border-top:1px solid var(--border);margin:.5rem .75rem;}

/* ── Main chat area ──────────────────────────────────────── */
.chat-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.chat-messages{
  flex:1;overflow-y:auto;padding:.75rem 1.25rem;
  display:flex;flex-direction:column;gap:.3rem;
}
.date-sep{
  text-align:center;font-size:.72rem;color:var(--muted);
  margin:.75rem 0 .4rem;position:relative;
}
.date-sep::before,.date-sep::after{
  content:'';position:absolute;top:50%;width:40%;height:1px;background:var(--border);
}
.date-sep::before{left:0;}.date-sep::after{right:0;}

.msg{display:flex;gap:.65rem;align-items:flex-start;padding:.15rem 0;animation:fadeUp .15s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.msg-av{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.72rem;font-weight:700;
  text-transform:uppercase;user-select:none;color:#fff;
  background:var(--accent);
}
.msg-av.role-admin{background:var(--warning);color:#000;}
.msg-av.role-moderator{background:#7c3aed;}
.msg-inner{flex:1;min-width:0;}
.msg-meta{font-size:.74rem;color:var(--muted);display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;}
.msg-name{color:var(--text);font-weight:700;}
.msg-name.role-admin{color:var(--warning);}
.msg-name.role-moderator{color:#a78bfa;}
.msg-time{font-size:.68rem;}
.msg-body{font-size:.93rem;word-break:break-word;white-space:pre-wrap;line-height:1.5;}
.msg-body a{color:var(--accent);}
.msg-del-btn{
  font-size:.68rem;background:transparent;border:1px solid var(--danger);
  color:var(--danger);border-radius:3px;padding:0 .35rem;cursor:pointer;
  opacity:0;transition:opacity .15s;line-height:1.5;
}
.msg:hover .msg-del-btn{opacity:1;}
.msg-deleted{color:var(--muted);font-style:italic;font-size:.82rem;}

/* ── Input bar ───────────────────────────────────────────── */
.chat-inputbar{
  border-top:1px solid var(--border);padding:.75rem 1.25rem;
  display:flex;flex-direction:row;gap:.75rem;align-items:flex-end;
  background:var(--bg);flex-shrink:0;
}
.input-wrap{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.input-wrap textarea{
  width:100%;box-sizing:border-box;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text);font-family:var(--sans);
  font-size:.95rem;padding:.7rem 1rem;resize:none;line-height:1.5;
  min-height:44px;max-height:180px;overflow-y:auto;transition:border-color .15s;display:block;
}
.input-wrap textarea:focus{outline:none;border-color:var(--accent);}
.char-hint{font-size:.69rem;color:var(--muted);text-align:right;margin-top:.25rem;}
.char-hint.near{color:var(--warning);}
.send-wrap{flex:0 0 auto;}
.send-wrap button{
  background:var(--accent);border:none;border-radius:var(--radius);color:#fff;
  font-weight:700;font-family:var(--sans);font-size:.9rem;
  padding:.7rem 1.4rem;cursor:pointer;white-space:nowrap;transition:background .15s;display:block;
}
.send-wrap button:hover{background:var(--accent-dk);}
.send-wrap button:disabled{opacity:.4;cursor:not-allowed;}

/* ── Auth pages ──────────────────────────────────────────── */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;}
.auth-card{
  width:100%;max-width:400px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);padding:2rem;
}
.auth-card h1{font-family:var(--mono);font-size:1.3rem;margin-bottom:1.5rem;}
.auth-card .brand-line{text-align:center;margin-bottom:1.5rem;font-family:var(--mono);font-size:1.1rem;color:var(--accent);}
.form-group{margin-bottom:1rem;}
.form-group label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:.3rem;}
.form-group input[type=text],.form-group input[type=email],.form-group input[type=password]{
  width:100%;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text);padding:.6rem .85rem;
  font-family:var(--sans);font-size:.93rem;transition:border-color .15s;
}
.form-group input:focus{outline:none;border-color:var(--accent);}
.form-group select{
  width:100%;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text);padding:.6rem .85rem;
  font-family:var(--sans);font-size:.93rem;
}
.btn{display:inline-block;padding:.6rem 1.2rem;border-radius:var(--radius);border:none;cursor:pointer;font-family:var(--sans);font-size:.93rem;font-weight:600;transition:background .15s;}
.btn-primary{background:var(--accent);color:#fff;width:100%;}
.btn-primary:hover{background:var(--accent-dk);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-danger:hover{opacity:.85;}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border);}
.btn-ghost:hover{color:var(--text);border-color:var(--text);}
.btn-sm{padding:.25rem .65rem;font-size:.78rem;width:auto;}
.form-links{margin-top:1rem;font-size:.82rem;color:var(--muted);text-align:center;}
.form-links a{color:var(--accent);}

/* ── Flash ───────────────────────────────────────────────── */
.flash{padding:.6rem 1rem;font-size:.88rem;border-radius:6px;margin-bottom:1rem;}
.flash-success{background:#0d2b1f;color:var(--success);border:1px solid var(--success);}
.flash-error  {background:#2b0d0d;color:var(--danger); border:1px solid var(--danger);}
.flash-info   {background:#0d1a2b;color:var(--accent); border:1px solid var(--accent);}

/* ── Admin / Profile panels ──────────────────────────────── */
.panel{flex:1;overflow-y:auto;padding:1.5rem;}
.panel-title{font-family:var(--mono);font-size:1.2rem;color:var(--accent);margin-bottom:1.25rem;}
.panel-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;margin-bottom:1.25rem;}
.panel-card h2{font-size:.95rem;font-weight:600;margin-bottom:1rem;color:var(--text);}
table{width:100%;border-collapse:collapse;font-size:.85rem;}
table th{color:var(--muted);font-weight:600;text-align:left;padding:.45rem .6rem;border-bottom:1px solid var(--border);white-space:nowrap;}
table td{padding:.45rem .6rem;border-bottom:1px solid var(--border);vertical-align:middle;}
table tr:last-child td{border-bottom:none;}
.badge{display:inline-block;padding:.1rem .45rem;border-radius:4px;font-size:.72rem;font-family:var(--mono);white-space:nowrap;}
.badge-success{background:#0d2b1f;color:var(--success);}
.badge-danger {background:#2b0d0d;color:var(--danger);}
.badge-muted  {background:var(--border);color:var(--muted);}
.badge-warning{background:#2b1f00;color:var(--warning);}
.badge-purple {background:#1e1040;color:#a78bfa;}
.action-group{display:flex;gap:.3rem;flex-wrap:wrap;}
.stat-row{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem 1.1rem;min-width:110px;}
.stat-card .sv{font-family:var(--mono);font-size:1.6rem;font-weight:700;color:var(--accent);}
.stat-card .sl{font-size:.72rem;color:var(--muted);margin-top:.1rem;}
.tab-row{display:flex;border-bottom:1px solid var(--border);margin-bottom:1.25rem;}
.tab-row a{padding:.5rem 1.1rem;color:var(--muted);font-size:.88rem;border-bottom:2px solid transparent;margin-bottom:-1px;}
.tab-row a.active,.tab-row a:hover{color:var(--accent);border-bottom-color:var(--accent);text-decoration:none;}

/* ── Modal ───────────────────────────────────────────────── */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;display:flex;align-items:center;justify-content:center;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;width:100%;max-width:400px;}
.modal h2{font-size:1rem;font-weight:700;margin-bottom:1rem;}
.modal-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.25rem;}

/* ── User list (sidebar DM) ──────────────────────────────── */
.user-search-wrap{padding:.5rem;}
.user-search-wrap input{
  width:100%;background:var(--bg);border:1px solid var(--border);
  border-radius:6px;color:var(--text);padding:.4rem .7rem;font-size:.83rem;
}
.user-search-wrap input:focus{outline:none;border-color:var(--accent);}

/* ── DM close button ─────────────────────────────────────── */
.dm-item { position:relative; display:flex; align-items:center; }
.dm-item a { flex:1; }
.dm-close-btn {
  display:none;
  position:absolute; right:.35rem;
  background:transparent; border:none;
  color:var(--muted); cursor:pointer;
  font-size:.7rem; line-height:1;
  padding:.2rem .3rem; border-radius:3px;
  transition:color .15s, background .15s;
  z-index:1;
}
.dm-item:hover .dm-close-btn { display:block; }
.dm-close-btn:hover { color:var(--danger); background:rgba(224,82,82,.15); }

/* ── Chat images ─────────────────────────────────────────── */
.chat-img-link { display:inline-block; margin-top:.35rem; }
.chat-img {
  width:200px;
  height:150px;
  object-fit:cover;
  border-radius:var(--radius);
  border:1px solid var(--border);
  display:block;
  cursor:zoom-in;
  transition:opacity .15s, transform .15s;
}
.chat-img:hover { opacity:.88; transform:scale(1.02); }

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:640px){
  .sidebar{width:200px;}
  .panel{padding:1rem .5rem;}
}