:root{
  --bg:#0b0c10;
  --panel:#10131a;
  --panel2:#0f1218;
  --card:#0f1218;
  --stroke:rgba(255,255,255,.08);
  --stroke2:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.62);
  --muted2:rgba(255,255,255,.44);
  --primary:#6ea8ff;
  --primary2:#5b7cfa;
  --danger:#ff6b6b;
  --shadow:0 20px 55px rgba(0,0,0,.55);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 20% 0%, rgba(110,168,255,.12), transparent 55%),
              radial-gradient(900px 650px at 95% 20%, rgba(91,124,250,.10), transparent 50%),
              var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Global scrollbars */
*{scrollbar-color: rgba(255,255,255,.16) rgba(0,0,0,.18); scrollbar-width: thin}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px;border:2px solid rgba(0,0,0,.35)}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.20)}
*::-webkit-scrollbar-track{background:rgba(0,0,0,.25)}

.bg-glow{
  position:fixed; inset:-200px;
  background: radial-gradient(500px 500px at 30% 20%, rgba(110,168,255,.12), transparent 55%),
              radial-gradient(550px 450px at 70% 40%, rgba(255,255,255,.06), transparent 60%);
  filter: blur(30px);
  pointer-events:none;
  opacity:.85;
}

.app{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:28px 16px 60px;
  position:relative;
}

.topbar{
  width:min(1100px, 100%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 6px 20px;
}

.brand{display:flex; align-items:center; gap:12px}
.logo-dot{
  width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #ffffff, var(--primary));
  box-shadow: 0 0 22px rgba(110,168,255,.35);
}
.brand-title{font-weight:760; letter-spacing:.3px}
.brand-subtitle{font-size:12px; color:var(--muted2); margin-top:2px}

.card{
  width:min(1100px, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}

.view{
  padding:28px 24px 26px;
  display:none;
}
.view[data-active="true"]{display:block}

/* Fullscreen when logged in (chat mode) */
body[data-mode="chat"] .app{
  padding:0;
  align-items:stretch;
  min-height:100vh;
  min-height:100dvh;
}
body[data-mode="chat"] .topbar{display:none}
body[data-mode="chat"] .card{
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  border-radius:0;
  border:none;
  box-shadow:none;
  background:transparent;
}
body[data-mode="chat"] .view{padding:0}
body[data-mode="chat"] #view-chat{
  height:100vh;
  height:100dvh;
}

.h1{margin:0 0 8px; font-size:28px; letter-spacing:.2px}
.h2{font-size:18px; font-weight:740; letter-spacing:.2px}
.muted{color:var(--muted); margin:0}
.small{font-size:12px}

.btn-row{
  display:flex;
  gap:12px;
  margin-top:18px;
  flex-wrap:wrap;
}

.btn{
  appearance:none;
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.03);
  color:var(--text);
  padding:12px 14px;
  border-radius: 14px;
  font-weight:650;
  letter-spacing:.2px;
  cursor:pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
  user-select:none;
}
.btn:hover{background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18)}
.btn:active{transform: translateY(1px)}
.btn.primary{
  border-color: rgba(110,168,255,.45);
  background: linear-gradient(180deg, rgba(110,168,255,.22), rgba(91,124,250,.14));
}
.btn.primary:hover{border-color: rgba(110,168,255,.7)}
.btn.tiny{padding:8px 10px; border-radius: 12px; font-size:12px; font-weight:700}

.icon-btn{
  appearance:none;
  background: rgba(255,255,255,.03);
  border:1px solid var(--stroke2);
  color:var(--text);
  border-radius: 14px;
  padding:10px 10px;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
  display:flex;
  align-items:center;
  justify-content:center;
}
.icon-btn:hover{background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18)}
.icon-btn:active{transform: translateY(1px)}
.icon-btn.eye{min-width:44px}

.footnote{
  margin-top:18px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.pill{
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  border-radius:999px;
  padding:6px 10px;
}

.view-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:18px;
}

.form{margin-top:6px}
.label{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin:12px 0 7px;
}

.input, .input:focus{
  width:100%;
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.03);
  color:var(--text);
  border-radius: 14px;
  padding:12px 12px;
  outline:none;
}
.input::placeholder{color: rgba(255,255,255,.35)}
.input:focus{border-color: rgba(110,168,255,.6); box-shadow: 0 0 0 3px rgba(110,168,255,.12)}

.input-wrap{display:flex; align-items:stretch; gap:10px}
.input-wrap .input{flex:1}

/* Settings: account code */
.mono-input{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing:.7px;
}
.settings-code-editor{
  margin-top:10px;
}

/* Settings: animated toggle */
.settings-toggle{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
}

.toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  width:56px;
  height:32px;
  cursor:pointer;
  user-select:none;
}

.toggle input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}

.toggle-track{
  position:relative;
  width:56px;
  height:32px;
  border-radius:999px;
  background: rgba(255,255,255,08);
  border:1px solid rgba(255,255,255,14);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.toggle-track::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(110,168,255,45), rgba(110,168,255,0) 62%);
  opacity:0;
  filter: blur(8px);
  transition: opacity .18s ease;
  pointer-events:none;
}

.toggle-track::after{
  content:"";
  position:absolute;
  top:50%;
  left:4px;
  width:24px;
  height:24px;
  border-radius:999px;
  transform: translate(0,-50%);
  background: rgba(255,255,255,86);
  box-shadow: 0 10px 26px rgba(0,0,0,35);
  transition: transform .20s cubic-bezier(.2,.85,.2,1), background .18s ease;
}

.toggle input:focus-visible + .toggle-track{
  box-shadow: 0 0 0 3px rgba(110,168,255,16);
}

.toggle input:checked + .toggle-track{
  background: rgba(110,168,255,22);
  border-color: rgba(110,168,255,52);
}

.toggle input:checked + .toggle-track::before{
  opacity:0; /* remove glow */
  animation:none;
}

.toggle input:checked + .toggle-track::after{
  transform: translate(24px,-50%);
  background: rgba(255,255,255,95);
}

.toggle:active .toggle-track{
  transform: scale(0.98);
}

.error{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid rgba(255,107,107,.35);
  background: rgba(255,107,107,.08);
  color: rgba(255,220,220,.95);
  border-radius: 14px;
  font-size:13px;
}

/* Upload */
.upload{
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  overflow:hidden;
  position:relative;
}
.upload > input{position:absolute; inset:0; opacity:0; cursor:pointer}
.upload-ui{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px;
}
.upload-left{display:flex; align-items:center; gap:14px; min-width:0}
.upload-text{min-width:0}
.strong{font-weight:740}
.row{display:flex; align-items:center; gap:10px; margin-top:10px}
.split{align-items:flex-start}

.avatar-wrap{display:flex; align-items:center; justify-content:center}
.avatar-ring{
  width:84px; height:84px;
  border-radius:50%;
  padding:3px;
  background: linear-gradient(180deg, rgba(110,168,255,.55), rgba(255,255,255,.06));
}
.avatar-clip{
  width:100%; height:100%;
  border-radius:50%;
  overflow:hidden;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  position:relative;
  touch-action:none;
}
.avatar-clip img{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform: translate(-50%,-50%) scale(1);
  transform-origin:center;
  user-select:none;
  -webkit-user-drag:none;
}

.crop-controls{
  margin-top:10px;
  padding:12px 12px 10px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
}
#zoom{width:100%}

/* Toast w/ animated timer */
.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform: translateX(-50%);
  z-index:50;
}
.toast-inner{
  position:relative;
  min-width:min(720px, calc(100vw - 26px));
  border:1px solid rgba(110,168,255,.30);
  background: rgba(16,19,26,.92);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  padding:14px 14px 16px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.toast-left{min-width:0}
.toast-title{font-weight:900; letter-spacing:.2px}
.toast-body{margin-top:4px; color:var(--muted); font-size:13px}
.toast-code{
  margin-top:10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: rgba(255,255,255,.90);
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  padding:8px 10px;
  border-radius: 14px;
  letter-spacing:.8px;
  width: fit-content;
}
.toast-right{display:flex; gap:10px; align-items:center}

.toast-actions{
  display:flex;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}

.toast-timer{
  position:absolute;
  left:14px;
  right:14px;
  bottom:8px;
  height:3px;
  border-radius:999px;
  overflow:hidden;
  background: rgba(255,255,255,.07);
}
.toast-timer-bar{
  height:100%;
  width:100%;
  transform-origin:left;
  background: linear-gradient(90deg, rgba(110,168,255,.9), rgba(91,124,250,.6));
  transform: scaleX(1);
}
@keyframes toastbar{
  from{transform:scaleX(1)}
  to{transform:scaleX(0)}
}

/* Chat UI */
#view-chat{padding:0}
.chat-shell{
  display:grid;
  grid-template-columns: 1fr 340px;
  min-height:100vh;
  min-height:100dvh;
  height:100%;
}

.chat-main{
  position:relative;
  --composer-h: 0px;
  --overlays-h: 0px;
  --overlays-shift: 0px;
  display:flex;
  flex-direction:column;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(255,255,255,.01));
  border-right:1px solid var(--stroke);
}

.chat-top{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap:12px;
  align-items:center;
  padding:16px 16px 14px;
  border-bottom:1px solid var(--stroke);
  background: rgba(12,14,18,.60);
  backdrop-filter: blur(10px);
}

.room-title{font-size:18px; font-weight:900; letter-spacing:.2px}
.room-sub{margin-top:3px; font-size:12px; color:var(--muted2)}

.room-info{min-width:0}

.top-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  min-width:0;
}

.online-pill{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding:8px 10px;
  border-radius: 999px;
  max-width: min(520px, 46vw);
  min-width: 120px;
  overflow: visible;
  position: relative;
}

.online-label{
  font-size:12px;
  font-weight:900;
  color: rgba(255,255,255,.80);
  flex:0 0 auto;
}

.online-list{
  display:flex;
  align-items:center;
  gap:8px;
  flex: 1 1 auto;
  min-width:0;
  flex-wrap: wrap;
  overflow: visible;
  padding:2px 2px 2px 0;
}

.online-ava{
  position:relative;
  flex:0 0 auto;
}

.online-ava-img{
  width:28px;
  height:28px;
}

.online-ava-img img{
  transition: opacity .12s ease;
}

/* Hover username bubble */
.online-tooltip{
  position:absolute;
  z-index:50;
  left:50%;
  top:100%;
  bottom:auto;
  transform: translate(-50%, 6px) scale(.98);
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(16,19,26,.96);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-size:12px;
  font-weight:900;
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
  transition: opacity .14s ease, transform .14s ease;
}

.online-tooltip::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:10px;
  height:10px;
  background: rgba(16,19,26,.96);
  border-left:1px solid rgba(255,255,255,.10);
  border-top:1px solid rgba(255,255,255,.10);
  transform: translate(-50%, -50%) rotate(45deg);
}

.online-ava:hover .online-tooltip{
  opacity:1;
  transform: translate(-50%, 12px) scale(1);
}

/* Typing dots overlay */
.online-typing{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  border-radius:50%;
  background: rgba(12,14,18,.70);
  backdrop-filter: blur(6px);
  transition: opacity .12s ease;
}

.online-ava.typing .online-typing{opacity:1}
.online-ava.typing .online-ava-img img{opacity:0}

.online-typing .dot{
  width:4px;
  height:4px;
  border-radius:50%;
  background: rgba(255,255,255,.88);
  margin:0 2px;
  animation: onlineDot 1s infinite ease-in-out;
}

.online-typing .dot:nth-child(2){animation-delay:.15s}
.online-typing .dot:nth-child(3){animation-delay:.3s}

@keyframes onlineDot{
  0%,80%,100%{transform: translateY(0); opacity:.55}
  40%{transform: translateY(-4px); opacity:1}
}

.me-pill{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding:10px 12px;
  border-radius: 999px;
}
.mini-avatar{
  width:32px; height:32px;
  border-radius:50%;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  position:relative;
}
.mini-avatar img{
  position:absolute; left:50%; top:50%;
  width:100%; height:100%;
  object-fit:cover;
  transform: translate(-50%,-50%) scale(1);
  transform-origin:center;
}
.me-meta{display:flex; flex-direction:column; line-height:1.05}
.me-name{font-weight:860; font-size:12px}
.me-code{ display:none; }

.home-hero{
  max-width:820px;
  padding:16px 16px 6px;
}

.home-wrap{
  max-width:820px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0 16px 16px;
}

.home-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  padding:12px;
}

.home-left{
  min-width:0;
}

.home-left .muted.small{
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.home-right{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}

/* Logged-in Home dashboard (inside chat message pane when no room is open) */
.home-dash{
  max-width: 980px;
  margin: 0 auto;
  padding:18px 16px 20px;
}

.home-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.home-h1{
  font-weight:950;
  letter-spacing:.2px;
  font-size:20px;
}

.home-code{
  display:inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight:800;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  border-radius:999px;
  padding:2px 8px;
}

.home-quick{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.home-stats{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}

.home-stat{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  padding:12px;
}

.home-stat-label{
  font-weight:860;
  font-size:12px;
  color: var(--muted);
  letter-spacing:.2px;
  text-transform:uppercase;
}

.home-stat-value{
  margin-top:6px;
  font-weight:950;
  font-size:22px;
}

.home-controls{
  margin-top:14px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.home-search{
  flex: 1 1 280px;
}

.home-filters{
  display:flex;
  gap:8px;
  flex: 0 0 auto;
}

.home-roomlist{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.home-room-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  padding:12px;
}

.home-room-row:hover{
  border-color: rgba(110,168,255,.30);
  background: rgba(255,255,255,.03);
}

.home-room-main{
  min-width:0;
  flex: 1 1 auto;
}

.home-room-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.home-room-code{
  font-weight:950;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.home-room-code-bundle{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}

.home-room-badges-inline{
  display:flex;
  gap:6px;
}

.home-room-badges{
  display:flex;
  gap:6px;
  flex: 0 0 auto;
}

.home-badge{
  font-size:11px;
  font-weight:860;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}

.home-badge.unread{
  border-color: rgba(110,168,255,.45);
  background: rgba(110,168,255,.12);
}

.home-badge.pin{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

.home-room-preview{
  margin-top:4px;
  font-size:13px;
  color: var(--muted);
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.home-room-side{
  flex: 0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  max-width: 340px;
}

.home-room-time{
  font-size:12px;
  color: var(--muted);
}

.home-room-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.btn.danger{
  border-color: rgba(255,100,100,.40);
  color: rgba(255,160,160,.95);
}
.btn.danger:hover{
  background: rgba(255,100,100,.08);
}

.home-empty-block{
  border:1px dashed rgba(255,255,255,.18);
  background: rgba(0,0,0,.14);
  border-radius: 16px;
  padding:18px;
}

.home-foot{
  margin-top:14px;
}

@media (max-width: 650px){
  .home-stats{ grid-template-columns: 1fr; }
  .home-room-side{ align-items:flex-start; max-width:none; }
  .home-room-actions{ justify-content:flex-start; }
}

.messages{
  position:relative;
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:18px 16px 10px;
}

.messages-inner{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
  min-height:100%;
}

/* Extra-visible custom scrollbar inside message pane */
.messages{scrollbar-color: rgba(110,168,255,.35) rgba(0,0,0,.25)}
.messages::-webkit-scrollbar{width:12px}
.messages::-webkit-scrollbar-track{background:rgba(0,0,0,.28)}
.messages::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(110,168,255,.45), rgba(255,255,255,.10));
  border-radius:999px;
  border:2px solid rgba(0,0,0,.40);
}
.messages::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(110,168,255,.60), rgba(255,255,255,.16));
}


/* Reusable chat-style scrollbar (same look as message pane) */
.scrollbar-chatlike{scrollbar-color: rgba(110,168,255,.35) rgba(0,0,0,.25)}
.scrollbar-chatlike::-webkit-scrollbar{width:12px;height:12px}
.scrollbar-chatlike::-webkit-scrollbar-track{background:rgba(0,0,0,.28)}
.scrollbar-chatlike::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(110,168,255,.45), rgba(255,255,255,.10));
  border-radius:999px;
  border:2px solid rgba(0,0,0,.40);
}
.scrollbar-chatlike::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(110,168,255,.60), rgba(255,255,255,.16));
}

.empty{
  border:1px dashed rgba(255,255,255,.14);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  padding:16px;
  max-width: 560px;
}
.empty-title{font-weight:900; letter-spacing:.2px}
.empty-sub{margin-top:6px; color:var(--muted); font-size:13px}

.msg-row{
  display:flex;
  gap:10px;
  margin:10px 0;
  align-items:flex-start;
  justify-content:flex-start;
}
/* Keep your own messages on the LEFT too */
.msg-row.own{justify-content:flex-start}

.msg-avatar{
  width:34px; height:34px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  position:relative;
  flex: 0 0 auto;
}
.msg-avatar img{
  position:absolute; left:50%; top:50%;
  width:100%; height:100%;
  object-fit:cover;
  transform: translate(-50%,-50%) scale(1);
  transform-origin:center;
}

.bubble{
  max-width: calc(100% - 56px);
  width: fit-content;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding:10px 12px 11px;
}

.msg-row.own .bubble{
  border-color: rgba(110,168,255,.20);
  background: linear-gradient(180deg, rgba(110,168,255,.09), rgba(255,255,255,.02));
}

.bubble-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
  flex-wrap:wrap;
}
.bubble-name{font-weight:900; font-size:12px}
.bubble-time{font-size:11px; color:var(--muted2)}
.bubble-actions{display:flex; gap:8px; margin-left:auto}
.enlarge-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.80);
  font-size:11px;
  font-weight:850;
  padding:5px 8px;
  border-radius:999px;
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.enlarge-btn:hover{background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18)}
.enlarge-btn:active{transform: translateY(1px)}

.bubble-text{white-space:pre-wrap; word-break:break-word; line-height:1.35}
.bubble-body{white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; line-height:1.35}

.bubble-img{
  display:block;
  margin-top:8px;
  max-width: 420px;
  width: 100%;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
}


/* -------------------- Message menu + replies -------------------- */
.msg-menu{
  position:fixed;
  z-index: 99999;
  min-width: 170px;
  padding: 6px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(18,18,18,.90);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform-origin: bottom center;
  opacity:0;
  transform: translateY(6px) scale(.98);
}
.msg-menu.open{ animation: msgMenuIn .14s ease-out forwards; }
.msg-menu.closing{ animation: msgMenuOut .12s ease-in forwards; }
@keyframes msgMenuIn{
  from{ opacity:0; transform: translateY(6px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes msgMenuOut{
  from{ opacity:1; transform: translateY(0) scale(1); }
  to{ opacity:0; transform: translateY(6px) scale(.98); }
}
.msg-menu-btn{
  width:100%;
  appearance:none;
  border:0;
  background: transparent;
  color: rgba(255,255,255,.92);
  text-align:left;
  padding: 10px 10px;
  border-radius: 10px;
  cursor:pointer;
  font-weight: 850;
  font-size: 13px;
  letter-spacing:.1px;
}
.msg-menu-btn:hover{ background: rgba(255,255,255,.06); }
.msg-menu-btn:active{ transform: translateY(1px); }

/* Overlays inside chat (reply + files) */
.chat-overlays{
  position:absolute;
  left:16px;
  right:16px;
  bottom: calc(var(--composer-h, 0px) + 4px);
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
  z-index:40; /* below modal (60) */
}
.chat-overlays > *{ pointer-events:auto; }

.reply-bar,
.files-bar{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
}

.reply-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  opacity:0;
  transform: translateY(6px);
  pointer-events:none;
}
.reply-bar.open{ animation: replyBarIn .16s ease forwards; pointer-events:auto; }
.reply-bar.closing{ animation: replyBarOut .16s ease forwards; pointer-events:none; }

@keyframes replyBarIn{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes replyBarOut{
  from{ opacity:1; transform: translateY(0); }
  to{ opacity:0; transform: translateY(6px); }
}

.reply-bar-text{
  font-size:13px;
  font-weight:900;
  color: rgba(255,255,255,.92);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.reply-bar-close{
  width:28px;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.92);
  cursor:pointer;
}
.reply-bar-close:hover{ background: rgba(255,255,255,.06); }
.reply-bar-close:active{ transform: translateY(1px); }

.file-remove{
  width:28px;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.92);
  cursor:pointer;
}
.file-remove:hover{ background: rgba(255,255,255,.06); }
.file-remove:active{ transform: translateY(1px); }

/* Files bar smoothly expands between input + reply */
.files-bar{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px 12px;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transform: translateY(6px);
  pointer-events:none;
}

.files-bar.open{ animation: filesBarIn .18s ease forwards; pointer-events:auto; }
.files-bar.closing{ animation: filesBarOut .18s ease forwards; pointer-events:none; }

@keyframes filesBarIn{
  from{ max-height:0; opacity:0; transform: translateY(6px); }
  to{ max-height:260px; opacity:1; transform: translateY(0); }
}

@keyframes filesBarOut{
  from{ max-height:260px; opacity:1; transform: translateY(0); }
  to{ max-height:0; opacity:0; transform: translateY(6px); }
}

.files-bar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.files-bar-text{
  font-size:13px;
  font-weight:900;
  color: rgba(255,255,255,.92);
}
.files-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:auto;
  padding-right:4px;
}
.file-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.file-thumb{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  flex:0 0 auto;
  display:grid;
  place-items:center;
}
.file-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.file-meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.file-name{
  font-size:13px;
  font-weight:900;
  color: rgba(255,255,255,.90);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.file-sub,
.files-hint{
  font-size:12px;
  color: rgba(255,255,255,.55);
}

.reply-indicator{
  appearance:none;
  border:0;
  background: transparent;
  padding:0;
  margin: 2px 0 6px;
  color: rgba(255,255,255,.55);
  font-size: 11px;
  font-weight: 850;
  cursor:pointer;
  text-align:left;
}
.reply-indicator:hover{ color: rgba(255,255,255,.75); text-decoration: underline; }
.reply-indicator:active{ transform: translateY(1px); }

.reply-flash{ animation: replyFlash .5s ease-out; }
@keyframes replyFlash{
  0%{ box-shadow: 0 0 0 0 rgba(110,168,255,0); filter: brightness(1); }
  45%{ box-shadow: 0 0 0 7px rgba(110,168,255,.18); filter: brightness(1.08); }
  100%{ box-shadow: 0 0 0 0 rgba(110,168,255,0); filter: brightness(1); }
}

.messages.scroll-locked{
  overscroll-behavior: none;
}

.download-link{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}

.html-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:8px;
}

.composer{
  display:flex;
  gap:10px;
  padding:12px 12px;
  border-top:1px solid var(--stroke);
  background: rgba(12,14,18,.60);
  backdrop-filter: blur(10px);
}
.composer-input{flex:1; padding:12px 12px}
.composer .btn{min-width:96px}

.sidebar{
  padding:16px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.10));
}
.side-top{display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; padding-bottom:8px; -webkit-overflow-scrolling: touch}
.side-top .btn{flex:0 0 auto; min-width:110px}

.rooms-block{
  margin-top:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 18px;
  overflow:hidden;
}
.rooms-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.rooms-title{font-weight:950; letter-spacing:.2px}
.rooms-mini{
  font-size:12px;
  color:var(--muted);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius:999px;
  padding:4px 9px;
}
.rooms-list{
  max-height: 420px;
  overflow:auto;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.room-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  padding:10px 10px;
}

.room-meta{
  margin-top:4px;
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.room-preview{
  font-size:12px;
  color:var(--muted);
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.room-time{
  font-size:11px;
  color:var(--muted2);
  margin-top:2px;
}
.room-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  padding:10px 10px;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.room-item:hover{background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.16)}
.room-item:active{transform: translateY(1px)}
.room-item.active{
  border-color: rgba(110,168,255,.35);
  background: linear-gradient(180deg, rgba(110,168,255,.10), rgba(255,255,255,.02));
}
.room-left{min-width:0}
.room-name{
  font-weight:900;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.room-code{
  margin-top:2px;
  font-size:11px;
  color:var(--muted2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}

.room-actions{display:flex; gap:8px; flex:0 0 auto}
.room-act{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.86);
  font-size:11px;
  font-weight:900;
  padding:6px 10px;
  border-radius: 999px;
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.room-act:hover{background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18)}
.room-act:active{transform: translateY(1px)}
.room-act.leave{
  border-color: rgba(255,107,107,.28);
  background: rgba(255,107,107,.06);
}
.room-act.leave:hover{
  border-color: rgba(255,107,107,.45);
  background: rgba(255,107,107,.10);
}

.side-actions{
  display:flex;
  gap:10px;
  padding:10px 10px 12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.side-actions .btn{flex:1}

/* Modal */
.modal{position:fixed; inset:0; z-index:60}
.modal-backdrop{position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(6px)}
.modal-card{
  position:relative;
  width:min(620px, calc(100vw - 26px));
  margin: 10vh auto 0;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(16,19,26,.92);
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(0,0,0,.65);
  overflow:hidden;

  /* allow modal content to scroll (Settings on small screens) */
  display:flex;
  flex-direction:column;
  max-height: 92vh;
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.modal-title{font-weight:950; letter-spacing:.2px}
.modal-body{
  padding:14px 14px 10px;
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;

  /* match chat pane scrollbar style */
  scrollbar-color: rgba(110,168,255,.35) rgba(0,0,0,.25);
}
.modal-body::-webkit-scrollbar{width:12px}
.modal-body::-webkit-scrollbar-track{background:rgba(0,0,0,.28)}
.modal-body::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(110,168,255,.45), rgba(255,255,255,.10));
  border-radius:999px;
  border:2px solid rgba(0,0,0,.40);
}
.modal-body::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(110,168,255,.60), rgba(255,255,255,.16));
}
.modal-actions{
  padding:12px 14px 14px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  border-top:1px solid rgba(255,255,255,.08);
}

/* Admin Panel (Vinny only) */
.panel-rooms{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.panel-room{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius:14px;
}
.panel-room-left{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.panel-room-name{
  font-weight:900;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.panel-room-sub{
  margin-top:4px;
  font-size:11px;
  color:var(--muted2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.panel-room-actions{
  display:flex;
  gap:8px;
  flex:0 0 auto;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Media modal content (enlarge) */
.media-viewer{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.media-img{
  width:100%;
  max-height: 70vh;
  max-height: 70dvh;
  object-fit: contain;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
}

.code-viewer{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.code-meta{
  font-size:12px;
  color: rgba(255,255,255,.70);
  font-weight:800;
  letter-spacing:.2px;
}

.code-pre{
  margin:0;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size:12px;
  line-height:1.35;
  white-space:pre;
  overflow:auto;
  max-height:70vh;
}

/* Responsive */
@media (max-width: 980px){
  .chat-shell{grid-template-columns: 1fr}
  .chat-main{border-right:none; border-bottom:1px solid var(--stroke)}
  .sidebar{border-top:1px solid var(--stroke)}
}

/* -------------------- Calls -------------------- */
.call-btn{
  min-width: 110px;
  margin-right: 0;
}

.call-menu{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.call-controls{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.call-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.call-user{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,0.25);
}

.call-user-head{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.call-user-ava{
  flex:0 0 auto;
}

.call-user-ava img{
  position:absolute;
  left:50%;
  top:50%;
  transform-origin:center;
  max-width:none;
  max-height:none;
  user-select:none;
  pointer-events:none;
}

.call-user-name{
  font-weight: 700;
  font-size: 13px;
  opacity: 0.95;
}

.call-user-badges{
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  opacity: 0.7;
}

.call-user-body{
  padding: 10px;
  display: grid;
  gap: 10px;
}

.call-user-body div.call-video{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}

.call-user-body video.call-video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.call-user.speaking{
  border-color: rgba(0,255,120,0.65);
  box-shadow: 0 0 0 2px rgba(0,255,120,0.20), 0 0 22px rgba(0,255,120,0.10);
  animation: callSpeakPulse 1.1s ease-in-out infinite;
}

@keyframes callSpeakPulse{
  0%{ box-shadow: 0 0 0 2px rgba(0,255,120,0.18), 0 0 18px rgba(0,255,120,0.10); }
  50%{ box-shadow: 0 0 0 3px rgba(0,255,120,0.25), 0 0 26px rgba(0,255,120,0.16); }
  100%{ box-shadow: 0 0 0 2px rgba(0,255,120,0.18), 0 0 18px rgba(0,255,120,0.10); }
}

/* Ensure the HTML [hidden] attribute always hides elements */
[hidden]{ display:none !important; }

/* -------------------- Schedules (School) -------------------- */
.sched-hero,
.sched-card{
  max-width: 820px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 18px;
  padding:16px;
}

.sched-tabs{
  display:flex;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}

.sched-names{
  max-width: 520px;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:0; /* left aligned */
}

.sched-name-btn{
  width:100%;
  justify-content:center;
  padding:14px 16px;
  border-radius: 16px;
}

.sched-view-head{
  max-width: 820px;
  display:flex;
  align-items:center;
  gap:10px;
}

.sched-person-title{
  font-weight:700;
  font-size: 14px;
  opacity: .92;
}

.sched-times{
  width:100%;
  max-width:560px;
  overflow-x:auto;
}

.sched-times-head,
.sched-times-row{
  display:grid;
  grid-template-columns: 180px 220px 90px;
  gap:12px;
  align-items:center;
}

.sched-times-head{
  font-size:12px;
  opacity:.65;
  margin-bottom:8px;
}

.sched-times-row{
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.08);
}

.sched-times-period{
  font-weight:600;
}

.sched-grid{
  width:100%;
  overflow-x:auto;
}

.sched-grid-head,
.sched-grid-row{
  display:grid;
  grid-template-columns: 170px 1fr 90px 1.2fr 1fr 120px;
  gap:12px;
  align-items:center;
}

.sched-grid-head{
  font-size:12px;
  opacity:.65;
  padding-bottom:8px;
}

.sched-grid-row{
  padding:12px 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.sched-grid-row.is-active .sched-cell-period{
  color:#ffd84d;
}

.sched-cell{
  min-width:0;
  word-break: break-word;
}

@media (max-width: 820px){
  .sched-grid-head,
  .sched-grid-row{
    grid-template-columns: 150px 1fr 70px 1fr 1fr 90px;
  }
}