/* ================================================================
   💎 LEVINET CHAT ROOM — Levi Studios' own IRC-style client.
   Made from scratch by Levi Studios, 2026. No borrowed chat
   widgets, no borrowed code. Gem: this file is theirs.
   Pairs with levinet.css (design tokens) + levidial.js (SFX).
   ================================================================
   RULES HONORED:
     - Square edges, hard shadows, chunky beveled buttons.
     - Monospace everywhere. CRT scanlines on terminal moments only.
     - Phone-first: log stacks, nicks become chips, 48px tap targets.
     - Branding: "LeviNet", "Connected at 56K". Never AOL, never
       "America Online", never "You've Got Mail" — anywhere, ever.
   ============================================================= */

/* ---------- room shell ---------- */
.lnc-panel{position:relative}
.lnc-statusbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 12px;border:2px solid var(--line);background:#000;
  margin-bottom:12px;font-size:.85rem;
}
.lnc-dot{width:12px;height:12px;background:var(--red);flex:0 0 auto}
.lnc-statusbar[data-state="connecting"] .lnc-dot{background:var(--gold)}
.lnc-statusbar[data-state="online"] .lnc-dot{background:var(--phosphor)}
.lnc-status{color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.lnc-statusbar[data-state="online"] .lnc-status{color:var(--phosphor)}
.lnc-topic{color:var(--dim);font-size:.8rem;flex:1 1 100%}
.lnc-count{color:var(--gold);font-size:.8rem;margin-left:auto}

/* ---------- offline notice ---------- */
.lnc-offline{
  border:2px dashed var(--gold);background:#000;
  padding:22px 16px;text-align:center;margin-bottom:12px;
}
.lnc-offline p{margin:8px 0;color:var(--dim)}
.lnc-offline .lnc-big{color:var(--gold);font-weight:800;font-size:1.1rem;
  text-transform:uppercase;letter-spacing:.08em}

/* ---------- room grid: log + nick list ---------- */
.lnc-grid{display:grid;gap:12px}
@media(min-width:720px){
  .lnc-grid{grid-template-columns:1fr 190px}
}

/* message log — the terminal */
.lnc-log{
  list-style:none;margin:0;padding:12px;background:#000;
  border:2px solid var(--line);
  height:340px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  font-size:.92rem;line-height:1.65;
}
.lnc-log li{margin:0 0 2px;overflow-wrap:anywhere}
.lnc-t{color:#5a5a6a;margin-right:8px}
.lnc-n{font-weight:700;margin-right:8px}
.lnc-n.c0{color:var(--gold)} .lnc-n.c1{color:var(--phosphor)}
.lnc-n.c2{color:var(--blue)} .lnc-n.c3{color:#ff9de2}
.lnc-n.c4{color:#ffb14d} .lnc-n.c5{color:#8affda}
.lnc-x{color:var(--ink)}
.lnc-sys{color:var(--gold)}
.lnc-sys::before{content:"* ";color:var(--gold)}
.lnc-err{color:var(--red)}

/* nick list */
.lnc-nicks{
  list-style:none;margin:0;padding:12px;background:var(--panel2);
  border:2px solid var(--line);font-size:.85rem;
  display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;
}
@media(min-width:720px){
  .lnc-nicks{display:block;max-height:340px;overflow-y:auto}
  .lnc-nicks li{margin-bottom:6px}
}
.lnc-nicks .lnc-nickchip{
  border:1px solid var(--line);padding:6px 10px;min-height:var(--tap);
  display:inline-flex;align-items:center;color:var(--ink);
}
@media(min-width:720px){
  .lnc-nicks .lnc-nickchip{border:0;padding:0;min-height:0;display:block}
}
.lnc-nicks .lnc-nickchip::before{content:"@";color:var(--blue);margin-right:4px}
.lnc-nickhead{
  color:var(--gold);font-weight:800;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:8px;flex:1 1 100%;
}
@media(min-width:720px){.lnc-nickhead{margin-bottom:10px}}

/* ---------- join + input rows ---------- */
.lnc-joinrow,.lnc-form{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.lnc-joinrow input,.lnc-form input{
  flex:1 1 200px;background:#000;color:var(--ink);
  border:2px solid var(--line);border-radius:0;
  font-family:inherit;font-size:16px;padding:14px;min-height:var(--tap);
}
.lnc-joinrow input:focus,.lnc-form input:focus{
  outline:none;border-color:var(--gold);
}
.lnc-hint{color:var(--dim);font-size:.78rem;margin-top:8px}
.lnc-hint b{color:var(--gold)}

/* screen-reader + reduced motion */
.lnc-sr{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){
  .lnc-log{scroll-behavior:auto}
}