:root{
  --bg1:#030816;   /* deep navy */
  --bg2:#071b3a;   /* rich dark blue */
  --card: rgba(255,255,255,.08);
  --card2: rgba(255,255,255,.05);
  --stroke: rgba(255,255,255,.14);
  --stroke2: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --shadow: 0 24px 90px rgba(0,0,0,.50);
  --radius: 22px;
  --radius2: 18px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background:
    radial-gradient(900px 620px at 18% 10%, #173b78 0%, transparent 60%),
    radial-gradient(900px 560px at 86% 18%, #0b5a7a 0%, transparent 58%),
    radial-gradient(700px 520px at 50% 110%, #2a2d92 0%, transparent 60%),
    linear-gradient(160deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
}

.bg{position:fixed; inset:0; z-index:-1; pointer-events:none;}
.bg .grid{
  position:absolute; inset:0;
  opacity:.18;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 25%, rgba(0,0,0,1), rgba(0,0,0,.2) 60%, transparent 82%);
}

/* ✅ reduced empty space: less margin/padding and slightly smaller min-height offset */
.shell{
  max-width: 1040px;
  min-height: calc(100vh - 20px);
  margin: 18px auto;
  padding: 0 16px 16px;  /* was 40px */
  display: grid;
  gap: 16px;            /* was 18px */
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
}

.brand{display:flex; align-items:center; gap: 12px}
.logo{
  width:46px;height:46px;border-radius:16px;
  display:grid;place-items:center;
  font-weight:900;letter-spacing:.6px;
  background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.06));
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
  user-select:none;
}
h1{font-size:18px;margin-bottom:2px}
.brand p{font-size:13px;color:var(--muted)}

.topActions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}

/* ✅ clickable-friendly pill for the toggle button (works as <button class="pill">) */
.pill{
  display:flex; align-items:center; gap:10px;
  padding: 9px 12px;
  border-radius: 999px;
  border:1px solid var(--stroke2);
  background: rgba(0,0,0,.18);
  font-size: 13px;
  color: rgba(255,255,255,.80);
  user-select:none;
  cursor: pointer;
  transition: background .18s ease, transform .08s ease;
}
.pill:hover{background: rgba(0,0,0,.24)}
.pill:active{transform: translateY(1px)}

.pulseDot{
  width:9px; height:9px; border-radius:999px;
  background: rgba(255,255,255,.55);
  box-shadow: 0 0 0 0 rgba(255,255,255,.28);
  animation: pulse 1.5s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.25); }
  70%{ box-shadow:0 0 0 10px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}

.card{
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), var(--card2));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  padding: 16px;
}

.twoCol{display:grid; grid-template-columns: 1fr 1fr; gap: 14px;}

.panel{
  border-radius: var(--radius2);
  background: rgba(0,0,0,.15);
  border: 1px solid var(--stroke2);
  padding: 14px;
}

h2{font-size:15px;margin-bottom:6px}
.muted{color:var(--muted)}
.small{font-size:13px}
.tiny{font-size:12px}
.note{margin-top:10px}

.row{display:flex; gap:10px; align-items:center; margin-top:10px}
.label{font-size:12px;color:rgba(255,255,255,.62); margin-top:10px}

.input{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.28);
  color: var(--text);
  outline:none;
  min-height:44px; /* touch friendly */
}
.input::placeholder{color:rgba(255,255,255,.45)}
.input:focus{border-color: rgba(120,180,255,.70)}
.mono{font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace; letter-spacing:.6px}

.btn{
  border-radius: 14px;
  padding: 11px 12px;
  font-weight: 850;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  transition: transform .08s ease, filter .18s ease, background .18s ease, opacity .18s ease;
  user-select:none;
  min-height:44px;
  touch-action: manipulation;
  white-space:nowrap;
}
.btn:hover{background: rgba(255,255,255,.10)}
.btn:active{transform: translateY(1px)}
.btn:disabled{opacity:.55; cursor:not-allowed}

.primary{border:none;color:#07111a;background: linear-gradient(135deg, rgba(82,180,255,.96), rgba(124,92,255,.88))}
.danger{border:1px solid rgba(255,120,120,.28);background: rgba(255,80,80,.10)}
.ghost{background: rgba(255,255,255,.06)}

.status{margin-top:10px;font-size:13px;color:rgba(255,255,255,.80)}
.hidden{display:none}

/* Chat (bigger) */
.chatCard{padding: 16px;}
.chatTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.roomTitle{font-weight:900;font-size:16px; display:flex; align-items:center; gap:10px;}
.badge{
  font-size:12px;
  padding: 4px 8px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
}

.chatBody{
  height: calc(100vh - 340px); /* dynamic height */
  min-height: 520px;
  max-height: 800px;
  overflow-y: auto;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  padding: 16px;
  scroll-behavior: smooth;
}

.bubble{
  max-width: 78%;
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  animation: pop .12s ease;
}
@keyframes pop{from{transform: translateY(4px); opacity:0}to{transform: translateY(0); opacity:1}}

.me{
  margin-left:auto;
  background: rgba(82,180,255,.20);
  border-color: rgba(82,180,255,.30);
}
.meta{font-size:12px;color:rgba(255,255,255,.66);margin-bottom:4px}
.meta b{color:rgba(255,255,255,.82)}
.text{white-space:pre-wrap; word-break:break-word; line-height:1.35}

/* Typing */
.typingRow{min-height:28px;margin-top:8px}
.typing{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  width: fit-content;
}
.dots{display:inline-flex; gap:4px}
.dots i{
  width:6px; height:6px; border-radius:999px;
  background: rgba(255,255,255,.55);
  display:inline-block;
  animation: bounce 1s infinite;
}
.dots i:nth-child(2){animation-delay:.12s}
.dots i:nth-child(3){animation-delay:.24s}
@keyframes bounce{0%,100%{transform: translateY(0); opacity:.5}50%{transform: translateY(-4px); opacity:1}}

.composer{display:grid;grid-template-columns:240px 1fr;gap:10px;margin-top:12px}
.msgRow{display:grid;grid-template-columns:1fr 110px;gap:10px}

/* ✅ footer tightened to reduce “empty” feel (text change happens in HTML) */
.footer{
  text-align: center;
  margin-top: 10px;
  padding-top: 10px;
  font-size: 13.5px;
  opacity: .88;
  letter-spacing: .2px;
}

/* ✅ Mr.Kapil: attractive dark-blue theme badge */
.footer strong{
  display: inline-block;
  margin-left: 6px;
  padding: 6px 10px;
  border-radius: 999px;

  font-size: 14px;
  font-weight: 900;
  letter-spacing: .4px;

  color: rgba(255,255,255,.96);
  background: linear-gradient(135deg, rgba(11,90,122,.65), rgba(23,59,120,.55));
  border: 1px solid rgba(82,180,255,.28);
  box-shadow:
    0 10px 26px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.10);
  text-shadow: 0 0 10px rgba(82,180,255,.22);
}

/* Toast */
.toastWrap{
  position: fixed;
  right: 16px;
  bottom: 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index: 50;
}
.toast{
  width: min(360px, calc(100vw - 32px));
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  padding: 12px 12px;
  animation: slideIn .16s ease;
}
@keyframes slideIn{from{transform: translateY(8px); opacity:0}to{transform: translateY(0); opacity:1}}
.toastTitle{font-weight:900;margin:0 0 3px}
.toastMsg{margin:0;color: rgba(255,255,255,.78);font-size:13px}

/* ✅ cleaned: single mobile block (removed duplicates) */
@media (max-width:900px){
  .twoCol{grid-template-columns:1fr}
  .composer{grid-template-columns:1fr}
  .msgRow{grid-template-columns:1fr 110px}

  .chatBody{
    height: 60vh;
    min-height: 420px;
  }
}
/* ===============================
   MANUAL ONLINE/OFFLINE TOGGLE UI
   (CSS only - functional behavior is in JS)
   =============================== */

.pill{
  transition:
    background .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .08s ease;
}

/* OFFLINE STATE */
.pill.offline{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.65);
}
.pill.offline .pulseDot{
  background: rgba(255,255,255,.45);
  animation: none;
}

/* ONLINE STATE */
.pill.online{
  background: rgba(82,180,255,.18);
  border-color: rgba(82,180,255,.55);
  color: rgba(255,255,255,.95);
  box-shadow: 0 0 0 3px rgba(82,180,255,.18);
}
.pill.online .pulseDot{
  background: rgba(82,180,255,1);
  animation: pulse 1.5s infinite;
}
/* ===== KT Chat UI upgrades (ADD-ONLY) ===== */

/* Dark mode support: respects your existing dark look, but also supports light if needed */
:root {
  --kt-bg: #061126;
  --kt-panel: rgba(255,255,255,0.06);
  --kt-border: rgba(255,255,255,0.12);
  --kt-text: rgba(255,255,255,0.92);
  --kt-muted: rgba(255,255,255,0.65);

  --kt-in: rgba(255,255,255,0.10);
  --kt-out: #2b6cff;
  --kt-outText: #fff;

  --kt-radius: 18px;
}

@media (prefers-color-scheme: light) {
  :root {
    --kt-bg: #f6f7fb;
    --kt-panel: rgba(0,0,0,0.04);
    --kt-border: rgba(0,0,0,0.10);
    --kt-text: rgba(0,0,0,0.88);
    --kt-muted: rgba(0,0,0,0.55);

    --kt-in: rgba(0,0,0,0.06);
    --kt-out: #2b6cff;
    --kt-outText: #fff;
  }
}

/* Optional override: if you later set <body data-theme="dark"> / "light" */
body[data-theme="dark"] {
  --kt-bg: #061126;
  --kt-panel: rgba(255,255,255,0.06);
  --kt-border: rgba(255,255,255,0.12);
  --kt-text: rgba(255,255,255,0.92);
  --kt-muted: rgba(255,255,255,0.65);
  --kt-in: rgba(255,255,255,0.10);
  --kt-out: #2b6cff;
  --kt-outText: #fff;
}
body[data-theme="light"] {
  --kt-bg: #f6f7fb;
  --kt-panel: rgba(0,0,0,0.04);
  --kt-border: rgba(0,0,0,0.10);
  --kt-text: rgba(0,0,0,0.88);
  --kt-muted: rgba(0,0,0,0.55);
  --kt-in: rgba(0,0,0,0.06);
  --kt-out: #2b6cff;
  --kt-outText: #fff;
}

/* Mobile-first: make the chat card behave like an app layout */
.chatCard {
  display: flex;
  flex-direction: column;
  min-height: 70svh;
}

/* Make header + composer sticky-ish within the card layout */
.chatTop { flex: 0 0 auto; }
.typingRow { flex: 0 0 auto; }
.composer { flex: 0 0 auto; }

/* The message area should take remaining height and be scrollable */
#chatBody {
  flex: 1 1 auto;
  min-height: 220px;
  overflow: auto;
  padding: 12px;
  scroll-behavior: smooth;
}

/* If you added the optional .chatScroll wrapper */
#chatBody .chatScroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* If you did NOT add the wrapper, this still works for direct children */
#chatBody > * {
  /* don't break your existing message nodes; safe defaults */
}

/* ===== Bubble styling =====
Assumption: app.js renders message elements into #chatBody.
To avoid touching JS, we provide multiple selector fallbacks.
If your message nodes already have classes, add these classes in JS later for perfect alignment:
  - .msg (base)
  - .in (incoming)
  - .out (outgoing)
  - .meta (time)
*/

/* Base bubble style when you add .msg */
#chatBody .msg {
  max-width: min(75%, 560px);
  padding: 10px 12px;
  border-radius: var(--kt-radius);
  border: 1px solid var(--kt-border);
  background: var(--kt-in);
  color: var(--kt-text);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  line-height: 1.35;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Align incoming/outgoing */
#chatBody .rowMsg,
#chatBody .msgRowLine {
  display: flex;
  gap: 10px;
}

#chatBody .msg.in { align-self: flex-start; border-top-left-radius: 10px; }
#chatBody .msg.out { align-self: flex-end; background: var(--kt-out); color: var(--kt-outText); border-top-right-radius: 10px; border-color: rgba(255,255,255,0.15); }

/* Timestamp / meta */
#chatBody .msg .meta,
#chatBody .msg .time,
#chatBody .msg small {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  opacity: 0.75;
  text-align: right;
}

/* ===== Safe fallback styling (no JS changes) =====
If your messages are plain divs, this gives them a bubble look without requiring new classes.
This is intentionally conservative to avoid breaking existing layout.
*/
#chatBody > div {
  border: 1px solid var(--kt-border);
  background: var(--kt-panel);
  border-radius: var(--kt-radius);
  padding: 10px 12px;
}

/* Responsive: tighten spacing on small screens */
@media (max-width: 520px) {
  #chatBody { padding: 10px; }
  #chatBody .msg { max-width: 88%; }
  .composer .msgRow { gap: 8px; }
}

/* Composer: mobile-friendly stick to bottom spacing */
.composer {
  position: sticky;
  bottom: 0;
  background: color-mix(in srgb, var(--kt-bg) 70%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--kt-border);
  padding-top: 10px;
}

/* Make the two inputs in composer feel nicer on mobile */
.composer .input {
  background: color-mix(in srgb, var(--kt-panel) 85%, transparent);
  border: 1px solid var(--kt-border);
  color: var(--kt-text);
}
/* ===== KT Chat: FINAL bubble alignment + visibility (ADD-ONLY) ===== */

/* Make chatBody a flex column so align-self works (important!) */
#chatBody{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Your message node is: .bubble.msg.in/out */
#chatBody .bubble.msg{
  max-width: min(78%, 560px);
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  line-height: 1.35;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Incoming (left) */
#chatBody .bubble.msg.in{
  align-self: flex-start;
  border-top-left-radius: 10px;
}

/* Outgoing (right) */
#chatBody .bubble.msg.out{
  align-self: flex-end;
  background: #2b6cff;
  color: #fff;
  border-color: rgba(255,255,255,0.15);
  border-top-right-radius: 10px;
}

/* Meta + text inside your bubble */
#chatBody .bubble.msg .meta{
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 6px;
}
#chatBody .bubble.msg .meta b{
  font-weight: 700;
}
#chatBody .bubble.msg .text{
  font-size: 14px;
}

/* IMPORTANT: disable the generic fallback that styles ALL divs inside #chatBody,
   because it can override your bubble look */
#chatBody > div{
  border: unset;
  background: unset;
  border-radius: unset;
  padding: unset;
}
/* ===============================
   ROOM EXPIRY SELECT (ADD-ONLY)
   =============================== */

#ttlSelect{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100%;
  padding: 12px 44px 12px 14px;
  border-radius: 14px;

  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;

  color: rgba(255,255,255,.92);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    rgba(0,0,0,.35);

  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 30px rgba(0,0,0,.25);

  cursor: pointer;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .08s ease,
    background .18s ease;
}

/* dropdown arrow */
#ttlSelect{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.75) 50%),
    linear-gradient(135deg, rgba(255,255,255,.75) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 55%,
    calc(100% - 12px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

#ttlSelect:hover{
  border-color: rgba(120,180,255,.65);
}

#ttlSelect:focus{
  outline: none;
  border-color: rgba(120,180,255,.95);
  box-shadow:
    0 0 0 3px rgba(120,180,255,.25),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* Options dropdown */
#ttlSelect option{
  background: #0a1a33;
  color: #ffffff;
  font-weight: 600;
}

/* Mobile polish */
@media (max-width: 520px){
  #ttlSelect{
    font-size: 15px;
    padding: 13px 46px 13px 14px;
  }
}
/* ===============================
   ROOM EXPIRY SELECT (ADD-ONLY)
   =============================== */
#ttlSelect{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100%;
  padding: 12px 44px 12px 14px;
  border-radius: 14px;

  font-size: 14px;
  font-weight: 700;

  color: rgba(255,255,255,.92);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    rgba(0,0,0,.35);

  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 30px rgba(0,0,0,.18);

  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}

#ttlSelect{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.75) 50%),
    linear-gradient(135deg, rgba(255,255,255,.75) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 55%,
    calc(100% - 12px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

#ttlSelect:hover{ border-color: rgba(120,180,255,.65); }
#ttlSelect:focus{
  outline: none;
  border-color: rgba(120,180,255,.95);
  box-shadow: 0 0 0 3px rgba(120,180,255,.25);
}
#ttlSelect option{
  background: #0a1a33;
  color: #fff;
  font-weight: 700;
}

/* ===============================
   COUNTDOWN UI (ADD-ONLY)
   =============================== */
.countdownRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-top: 6px;
}

.countdownWrap{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.countRing{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  --p: 100;
  background: conic-gradient(rgba(82,180,255,1) calc(var(--p) * 1%), rgba(255,255,255,.12) 0);
  position: relative;
  animation: ringGlow 1.6s ease-in-out infinite;
}
.countRing::after{
  content:"";
  position:absolute;
  inset: 4px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
}

@keyframes ringGlow{
  0%,100%{ filter: drop-shadow(0 0 0 rgba(82,180,255,.0)); }
  50%{ filter: drop-shadow(0 0 10px rgba(82,180,255,.35)); }
}

.countRing.danger{
  animation: ringDanger 1s ease-in-out infinite;
  background: conic-gradient(rgba(255,120,120,1) calc(var(--p) * 1%), rgba(255,255,255,.12) 0);
}
@keyframes ringDanger{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.06); }
}

.countText{
  display:flex;
  flex-direction:column;
  line-height: 1.05;
}
.countLabel{
  font-size: 11px;
  opacity: .75;
}
.countTime{
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .6px;
}
.countTime.tick{
  animation: tickPop .16s ease;
}
@keyframes tickPop{
  from{ transform: translateY(2px); opacity:.8; }
  to{ transform: translateY(0); opacity:1; }
}

.countNever{
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.14);
  opacity: .9;
}

@media (max-width: 520px){
  .countdownRow{ align-items:flex-start; flex-direction:column; }
  .countdownWrap{ width: fit-content; }
}