/* NOA HUD theme - dark sci-fi, cyan glow. No external fonts/CDNs (works offline). */
:root{
  --bg:#02070d; --bg2:#06121d; --cyan:#18c8ff; --cyan2:#7fe7ff; --blue:#0a5bff;
  --text:#d8f6ff; --dim:#6c93a6; --danger:#ff4d6d; --ok:#2dffa8; --warn:#ffc04d;
  --glass:rgba(8,28,44,.55); --line:rgba(24,200,255,.28);
  --font: "Segoe UI", "Bahnschrift", system-ui, -apple-system, Roboto, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:radial-gradient(ellipse at 50% 30%,#06243a 0%,var(--bg) 60%);color:var(--text);font-family:var(--font);overflow:hidden}
#bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.hidden{display:none!important}
.glass{background:var(--glass);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 0 24px rgba(24,200,255,.08),inset 0 0 18px rgba(24,200,255,.05)}
button{font-family:var(--font);background:linear-gradient(180deg,rgba(24,200,255,.25),rgba(10,91,255,.18));color:var(--text);border:1px solid var(--cyan);border-radius:10px;padding:.55rem 1rem;letter-spacing:.12em;font-size:.78rem;cursor:pointer;text-shadow:0 0 6px var(--cyan)}
button:hover{box-shadow:0 0 14px rgba(24,200,255,.55)}
button.ghost{background:transparent}
button.danger{border-color:var(--danger);background:rgba(255,77,109,.18);text-shadow:0 0 6px var(--danger)}
button.small{padding:.25rem .6rem;font-size:.65rem}
button.icon{padding:.45rem .6rem;font-size:1rem;letter-spacing:0}
input,textarea,select{font-family:var(--font);background:rgba(2,12,20,.7);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;font-size:.95rem;outline:none}
input:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 10px rgba(24,200,255,.35)}
code{font-family:var(--mono);color:var(--cyan2)}
.row{display:flex;gap:.5rem;align-items:center}.row.wrap{flex-wrap:wrap}.row input{flex:1}
.pad{padding:1rem 1.2rem;overflow:auto}
.hint{color:var(--dim);font-size:.85rem}.err{color:var(--danger);min-height:1.2em;font-size:.9rem}
h1,h2,h3{font-weight:300;letter-spacing:.25em;color:var(--cyan2);text-shadow:0 0 12px rgba(24,200,255,.6)}
h2{font-size:1rem;margin:.2rem 0 .8rem}

/* ---------- auth ---------- */
#auth{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:center;padding:1rem}
.auth-card{width:min(380px,100%);padding:1.6rem 1.8rem;text-align:center}
.auth-card h1{margin:.2rem 0 0;font-size:2rem;letter-spacing:.5em;padding-left:.5em}
.auth-card .sub{margin:.2rem 0 1rem;color:var(--dim);letter-spacing:.3em;font-size:.7rem;text-transform:uppercase}
#authForm{display:flex;flex-direction:column;gap:.6rem}
#authOrb{width:160px;height:160px}

/* ---------- app layout ---------- */
#app{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;padding:.6rem;gap:.6rem}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:.45rem .9rem;gap:.8rem}
.brand{font-weight:600;letter-spacing:.4em;color:var(--cyan2);white-space:nowrap;text-shadow:0 0 10px var(--cyan)}
.brand small{font-weight:300;letter-spacing:.2em;color:var(--dim);font-size:.6rem;margin-left:.4rem}
.logo-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);margin-right:.6rem;animation:pulse 2s infinite}
.status{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}
.pill{display:flex;align-items:center;gap:.35rem;border:1px solid var(--line);border-radius:999px;padding:.15rem .6rem;font-size:.66rem;letter-spacing:.14em;color:var(--dim)}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--dim)}
.pill.ok i{background:var(--ok);box-shadow:0 0 8px var(--ok)} .pill.bad i{background:var(--danger);box-shadow:0 0 8px var(--danger)} .pill.warn i{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.pill b{color:var(--text);font-weight:600}
.pill select{background:transparent;border:none;color:var(--text);font-size:.68rem;padding:0;max-width:210px}
.pill select option{background:var(--bg2)}
.right{display:flex;align-items:center;gap:.6rem}
.clock{text-align:right;font-family:var(--mono)}
#clockTime{font-size:1.15rem;color:var(--cyan2);text-shadow:0 0 10px var(--cyan)}#clockDate{font-size:.62rem;color:var(--dim);letter-spacing:.12em}
#menu{position:absolute;right:.8rem;top:4.2rem;z-index:20;display:flex;flex-direction:column;gap:.4rem;padding:.8rem;min-width:200px}
#whoami{font-size:.78rem;color:var(--dim);margin-bottom:.3rem}
.toggle{display:flex;gap:.5rem;align-items:center;font-size:.8rem;color:var(--dim);padding:.3rem .2rem}

.layout{flex:1;display:grid;grid-template-columns:250px 1fr 250px;gap:.6rem;min-height:0}
.side{padding:.7rem;overflow:auto;font-size:.82rem}
.panel{margin-bottom:1rem}
.panel h4{margin:.1rem 0 .4rem;font-weight:400;font-size:.7rem;letter-spacing:.2em;color:var(--cyan);text-transform:uppercase}
.panel ul{margin:0;padding-left:1rem}.panel li{margin:.2rem 0;color:var(--text)}
.center{display:flex;flex-direction:column;min-height:0;min-width:0;gap:.6rem;position:relative}
.orb-wrap{position:relative;height:clamp(150px,34vh,330px);flex-shrink:0;display:flex;justify-content:center}
#orb{height:100%;aspect-ratio:1/1}
.orb-label{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);font-size:.62rem;letter-spacing:.5em;color:var(--cyan);text-shadow:0 0 8px var(--cyan);padding-left:.5em}
.view{flex:1;min-height:0;display:flex;flex-direction:column;gap:.6rem}
.messages{flex:1;overflow-y:auto;overflow-x:hidden;padding:1rem;display:flex;flex-direction:column;gap:.7rem;scroll-behavior:smooth}
.msg{max-width:85%;padding:.6rem .9rem;border-radius:12px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word;font-size:.95rem}
.msg.user{align-self:flex-end;background:rgba(10,91,255,.22);border:1px solid rgba(10,91,255,.5)}
.msg.noa{align-self:flex-start;background:rgba(24,200,255,.08);border:1px solid var(--line)}
.msg.noa::before{content:"NOA";display:block;font-size:.6rem;letter-spacing:.3em;color:var(--cyan);margin-bottom:.2rem}
.msg.sys{align-self:center;font-family:var(--mono);font-size:.78rem;color:var(--dim);background:rgba(0,0,0,.25);border:1px dashed var(--line);max-width:100%}
.msg .act{display:block;font-family:var(--mono);font-size:.72rem;color:var(--dim);margin:.15rem 0}
.msg .act.bad{color:var(--danger)}
.cursor::after{content:"\258B";animation:blink 1s infinite;color:var(--cyan)}
.composer{display:flex;gap:.5rem;padding:.5rem;align-items:flex-end}
.composer textarea::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.composer textarea{flex:1;min-width:0;resize:none;max-height:150px;border:none;background:transparent}
.mic.rec{background:rgba(255,77,109,.35);border-color:var(--danger);box-shadow:0 0 16px var(--danger)}
.post{border-bottom:1px solid var(--line);padding:.6rem 0}.post b{color:var(--cyan2)}.post small{color:var(--dim);margin-left:.4rem}
.plug{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:.5rem 0;gap:.6rem}
.plug .meta{font-size:.75rem;color:var(--dim)} .plug .e{color:var(--danger);font-size:.75rem}
table{width:100%;border-collapse:collapse;font-size:.8rem} td,th{border-bottom:1px solid var(--line);padding:.35rem;text-align:left}
.logs{font-family:var(--mono);font-size:.72rem;max-height:40vh;overflow:auto}
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:1rem}
.modal-card{max-width:520px;width:100%;padding:1.2rem 1.4rem;border-color:var(--warn)}
.modal-card h3{color:var(--warn);text-shadow:0 0 10px var(--warn);letter-spacing:.15em}
.modal-card p{font-family:var(--mono);font-size:.9rem;white-space:pre-wrap;word-break:break-word}
.modal-card .row{justify-content:flex-end}
#toasts{position:fixed;right:1rem;bottom:1rem;z-index:60;display:flex;flex-direction:column;gap:.5rem}
.toast{background:var(--glass);border:1px solid var(--cyan);border-radius:12px;padding:.7rem 1rem;max-width:340px;box-shadow:0 0 20px rgba(24,200,255,.35);animation:slide .3s}
.toast b{display:block;color:var(--cyan2);letter-spacing:.1em;margin-bottom:.2rem}
@keyframes pulse{50%{opacity:.4}} @keyframes blink{50%{opacity:0}} @keyframes slide{from{transform:translateX(30px);opacity:0}}

/* ---------- voice menu ---------- */
.voice-row{display:flex;gap:.35rem;align-items:center}
.voice-row select{flex:1;min-width:0;max-width:240px;font-size:.75rem;padding:.35rem .4rem}
.voice-info{font-size:.68rem;max-width:260px}
/* ---------- NOA's self (admin) ---------- */
.self-sec,.rule,.rev{border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;margin:.4rem 0;background:rgba(2,12,20,.35)}
.self-head,.rev-head{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;font-size:.85rem}
.self-sec textarea,.rule textarea{width:100%;margin:.35rem 0;resize:vertical;font-size:.88rem;box-sizing:border-box}
.rule{display:flex;gap:.5rem;align-items:flex-start;flex-wrap:wrap}
.rule textarea{flex:1;min-width:200px;margin:0}
.rev-head button{margin-left:auto}
.diff{font-family:var(--mono);font-size:.76rem;white-space:pre-wrap;word-break:break-word;margin-top:.35rem;color:var(--text)}
.diff del{color:#ff8fa3;background:rgba(255,77,109,.14);text-decoration:line-through}
.diff ins{color:#8dffc4;background:rgba(40,220,140,.14);text-decoration:none}
.history{max-height:55vh;overflow:auto}
#view-self>*{flex-shrink:0}

/* ---------- phones / small windows ---------- */
@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
  .side{display:none}
  .brand small,.pill#stQueue{display:none}
  .orb-wrap{height:clamp(110px,22vh,200px)}
}
@media (max-width: 560px){
  #app{padding:.35rem;gap:.35rem}
  .topbar{flex-wrap:wrap;padding:.4rem .6rem}
  .status{order:3;width:100%;justify-content:flex-start}
  .msg{max-width:94%;font-size:.92rem}
  .messages{padding:.6rem}
  .composer{gap:.35rem;padding:.4rem}
  .composer .btn,.composer button{padding:.45rem .6rem;font-size:.75rem}
  .composer textarea{font-size:16px}   /* stops iPhone zooming in */
  #clockDate{display:none}
}

/* ---------- group rooms ---------- */
.rooms-btn{position:relative}
.badge{display:inline-block;min-width:1.2em;padding:0 .35em;border-radius:999px;background:var(--danger);color:#fff;font-size:.62rem;font-weight:700;line-height:1.35em;text-align:center;text-shadow:none;letter-spacing:0}
.rooms-btn .badge{position:absolute;top:-6px;right:-6px}
body.in-rooms .orb-wrap{height:clamp(70px,12vh,120px)}
.rooms-layout{flex:1;min-height:0;display:grid;grid-template-columns:210px 1fr;gap:.6rem}
.room-list{padding:.5rem;overflow:auto;display:flex;flex-direction:column;gap:.3rem}
.rl-head{display:flex;justify-content:space-between;align-items:center;font-size:.66rem;letter-spacing:.3em;color:var(--cyan);padding:.2rem .3rem}
.rl-sub{font-size:.6rem;letter-spacing:.2em;color:var(--dim);margin:.6rem .3rem .1rem;text-transform:uppercase}
.room-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;text-align:left;letter-spacing:.02em;text-shadow:none;background:transparent;border-color:transparent;padding:.45rem .55rem;font-size:.88rem}
.room-item small{width:100%;color:var(--dim);font-size:.66rem}
.room-item.active{background:rgba(24,200,255,.16);border-color:var(--cyan)}
.room-item.outside,.room-item.archived{opacity:.6}
.room-main{display:flex;flex-direction:column;min-height:0;min-width:0;gap:.45rem}
.room-head{padding:.45rem .8rem}
.rh-top{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.rh-top b{color:var(--cyan2);letter-spacing:.08em}.rh-top small{color:var(--dim)}
.rh-btns{margin-left:auto;display:flex;gap:.35rem}
.rh-people{display:flex;flex-wrap:wrap;gap:.25rem .7rem;align-items:center;margin-top:.25rem;font-size:.78rem}
.who i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:.3rem;background:var(--dim);vertical-align:middle}
.who.online i{background:var(--cyan);box-shadow:0 0 6px var(--cyan)}
.who.here i{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.who.off{color:var(--dim)}
.rh-wake{margin-left:auto;font-size:.7rem}
#roomMessages{gap:.45rem}
.msg.room{position:relative;padding-bottom:.95rem}
.msg.room .ts{position:absolute;right:.6rem;bottom:.2rem;font-size:.58rem;color:var(--dim)}
.msg.room .nm{display:block;font-size:.68rem;font-weight:600;letter-spacing:.06em;margin-bottom:.15rem}
.msg.other{align-self:flex-start;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
.msg.addressed{border-left:3px solid var(--cyan)}
.msg.dice{align-self:center;font-family:var(--mono);font-size:.82rem;background:rgba(255,192,77,.1);border:1px solid rgba(255,192,77,.45);color:#ffe3a8;max-width:100%}
.msg.notice{align-self:center;font-size:.78rem;color:var(--dim);border:1px dashed var(--line)}
.load-more{align-self:center}
.room-status{min-height:1.1rem;font-size:.75rem;color:var(--cyan);letter-spacing:.06em;padding:0 .4rem;opacity:0;transition:opacity .2s}
.room-status.on{opacity:1}
.modal-card.wide{max-width:680px;max-height:92vh;overflow:auto;border-color:var(--cyan)}
.modal-card.wide h3{color:var(--cyan2);text-shadow:0 0 10px var(--cyan)}
.rm-form{display:grid;grid-template-columns:1fr 1fr;gap:.55rem .8rem;font-size:.82rem}
.rm-form label{display:flex;flex-direction:column;gap:.25rem;color:var(--dim)}
.rm-form .full{grid-column:1/-1}
.rm-form label.chk{flex-direction:row;align-items:center;gap:.45rem}
.rm-form textarea{resize:vertical;font-size:.85rem}
.rm-members{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin-top:.3rem}
.rm-members label{flex-direction:row;align-items:center;gap:.35rem;color:var(--text)}
/* ---------- DM world panel ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:.3rem;margin:.8rem 0}
.tbl-wrap{overflow:auto;max-height:58vh;border:1px solid var(--line);border-radius:10px}
table.edit td,table.edit th{padding:.2rem .25rem;vertical-align:top;white-space:nowrap}
table.edit th{position:sticky;top:0;background:var(--bg2,#041320);font-weight:400;font-size:.68rem;letter-spacing:.08em;color:var(--cyan);text-transform:uppercase}
table.edit input,table.edit select,table.edit textarea{font-size:.78rem;padding:.25rem .35rem;border-radius:6px;min-width:90px;width:100%}
table.edit input.num{min-width:55px;max-width:80px}
table.edit textarea{min-width:160px;resize:vertical}
table.kv{max-width:620px;margin:.6rem 0}
table.kv th{position:static;text-align:right;width:160px}
.act-cell{white-space:nowrap}
.time-row{margin:.6rem 0}.time-row input{max-width:80px;flex:0 0 auto}
table.matrix th{font-size:.66rem;font-weight:400;min-width:110px;vertical-align:bottom}
table.matrix tbody th{text-align:left;min-width:120px;position:sticky;left:0;background:var(--bg2,#041320)}
table.matrix td.k{text-align:center;cursor:pointer;font-size:1rem}
table.matrix td.yes{color:var(--ok);background:rgba(45,255,168,.07)}
table.matrix td.rumor{color:var(--warn);background:rgba(255,192,77,.07)}
table.matrix td.no{color:var(--danger);background:rgba(255,77,109,.08)}
table.matrix td.none{color:var(--dim)}
.sheet{padding:.7rem 1rem;margin:.5rem 0;max-width:640px}
.sheet h3{margin:.1rem 0 .5rem;letter-spacing:.1em}.sheet h3 small{color:var(--dim);font-size:.75rem;letter-spacing:.05em}
.abs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.5rem}
.ab{border:1px solid var(--line);border-radius:8px;padding:.25rem .5rem;text-align:center;min-width:52px}
.ab small{display:block;font-size:.58rem;color:var(--dim);letter-spacing:.15em}.ab b{display:block;font-size:1.05rem}.ab i{font-style:normal;color:var(--cyan2);font-size:.75rem}
.sheet p{margin:.25rem 0;font-size:.85rem}
@media (max-width: 980px){
  .rooms-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .room-list{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:.35rem;gap:.3rem}
  .room-list .rl-head{padding:0 .2rem}.room-list .rl-head span{display:none}.room-list .rl-sub{display:none}
  .room-item{flex:0 0 auto;flex-wrap:nowrap;gap:.35rem;border-color:var(--line);border-radius:999px;padding:.3rem .7rem}
  .room-item small{display:none}
  .room-list .hint{margin:.2rem}
  .rh-wake{display:none}
}
@media (max-width: 560px){
  body.in-rooms .orb-wrap{display:none}
  .rm-form{grid-template-columns:1fr}
}

/* ---------------------------------------------- installable app (PWA) + Fresh Start */
@supports (padding: env(safe-area-inset-top)) {
  @media (display-mode: standalone) {
    body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
           padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  }
}
.install-hint{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(.8rem + env(safe-area-inset-bottom, 0px));
  z-index:40;display:flex;align-items:center;gap:.5rem;padding:.45rem .5rem .45rem .9rem;font-size:.9rem;
  max-width:calc(100vw - 1.5rem);border-color:var(--cyan);box-shadow:0 0 18px rgba(24,200,255,.25)}
.install-hint span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.install-hint .icon{min-width:2rem;font-size:1.1rem;line-height:1}
button.link{background:none;border:none;box-shadow:none;color:var(--cyan2);text-decoration:underline;margin-top:.6rem;cursor:pointer;font-size:.9rem}
#installModal .modal-card{border-color:var(--cyan)}
#installModal h3{color:var(--cyan2);text-shadow:0 0 10px var(--cyan)}
#installModal p{white-space:normal;font-family:var(--font)}
ol.steps{margin:.4rem 0 .8rem 1.2rem;padding:0;line-height:1.55}
ol.steps li{margin:.35rem 0}
.kbd{display:inline-block;border:1px solid var(--line);border-radius:6px;padding:0 .35rem;font-family:var(--mono);color:var(--cyan2)}
.warn{color:var(--warn)} .ok{color:var(--ok)}
.danger-zone{margin-top:1.6rem;padding:.8rem 1rem;border:1px solid rgba(255,77,109,.55);border-radius:12px;background:rgba(255,77,109,.06)}
.danger-zone h2{color:var(--danger);text-shadow:0 0 10px rgba(255,77,109,.6)}
#freshModal .modal-card{border-color:var(--danger)}
#freshModal h3{color:var(--danger);text-shadow:0 0 10px var(--danger)}
#freshModal p{white-space:normal;font-family:var(--font)}
.fresh-counts ul{columns:2;margin:.3rem 0 .6rem 1.1rem;padding:0;font-size:.9rem}
@media (max-width: 560px){ .fresh-counts ul{columns:1} }
button.danger-btn{border-color:rgba(255,77,109,.6);color:var(--danger)}
button.danger-btn:hover{background:rgba(255,77,109,.15);box-shadow:0 0 10px rgba(255,77,109,.4)}
.danger-card{border-color:var(--danger)} .danger-card h3{color:var(--danger);text-shadow:0 0 10px var(--danger)}
.danger-card p{white-space:normal;font-family:var(--font)}

/* Active Users (admin) */
.online-count{display:inline-block;min-width:1.4em;margin-left:.35em;padding:0 .4em;border-radius:999px;background:var(--ok,#2ee59d);color:#02130c;font-size:.62rem;line-height:1.45em;text-align:center}
.online-count.zero{background:rgba(255,255,255,.15);color:var(--dim)}
.dot{display:inline-block;width:.62rem;height:.62rem;border-radius:50%;background:#56606b;flex:none}
.dot.on{background:#2ee59d;box-shadow:0 0 8px #2ee59d}
.au-list{display:flex;flex-direction:column;gap:.6rem;margin:.4rem 0 1rem}
.au-user{border:1px solid rgba(46,229,157,.35);border-radius:10px;padding:.55rem .7rem;background:rgba(46,229,157,.04)}
.au-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.au-head .au-seen{margin-left:auto;color:#2ee59d;font-size:.75rem}
.au-sess{margin:.45rem 0 0 1.1rem;padding-left:.6rem;border-left:2px solid rgba(255,255,255,.12)}
.au-sess-head{display:flex;align-items:center;gap:.6rem;justify-content:space-between}
.au-tab{display:flex;gap:.7rem;flex-wrap:wrap;align-items:baseline;padding:.2rem 0;font-size:.82rem}
.au-area{color:var(--cyan2);min-width:9em;font-weight:600}
.au-dev{color:var(--text)}
.au-sub{margin-top:1rem}
.au-table{width:100%;border-collapse:collapse;font-size:.82rem}
.au-table td,.au-table th{padding:.35rem .4rem;border-bottom:1px solid rgba(255,255,255,.07);text-align:left;vertical-align:top}
.au-table tr.dim{opacity:.55}
.au-off-sess{display:flex;gap:.5rem;align-items:center;margin-bottom:.2rem}
.pill.role-admin{color:#ffd36e;border-color:rgba(255,211,110,.5)}