/* SoftAuto Comms — shell styles (Phase 1 fidelity pass).
   Tokens transcribed from design_handoff_softauto_comms/README.md.
   Fonts: IBM Plex Sans/Mono when available (self-host under /fonts for the
   private deploy — see docs/DEPLOYMENT.md), graceful system fallback otherwise. */

:root {
  /* backgrounds (cool navy, darkest -> lightest) */
  --bg-base: #0A0E15;
  --bg-chrome: #0C111A;
  --bg-list: #0D121C;
  --bg-panel: #0E141F;
  --bg-raised: #121927;
  --bg-bot: #0D1420;
  /* borders */
  --bd: #1C2536;
  --bd-soft: #161E2C;
  --bd-hair: #10161F;
  --bd-bubble: #1B2433;
  --bd-dash: #2A3550;
  /* text */
  --tx-head: #E8EDF6;
  --tx-msg: #DCE3EE;
  --tx-body: #C3CCDA;
  --tx-2: #A9B4C6;
  --tx-muted: #8B95A7;
  --tx-dim: #7E8AA0;
  --tx-faint: #55617A;
  --tx-faintest: #3D4759;
  --tx-ph: #4A5568;
  /* accent (themeable) */
  --ac: #4C8DFF;
  --acg: rgba(76, 141, 255, 0.13);
  --acb: rgba(76, 141, 255, 0.40);
  /* semantic */
  --ok: #3FD68F;
  --warn: #FFB454;
  --danger: #FF5D5D;
  --off: #3D4759;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--bg-base);
  color: var(--tx-body);
  font-family: var(--sans);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden; /* shell never scrolls; views scroll internally */
}
.mono { font-family: var(--mono); }
::selection { background: rgba(76, 141, 255, 0.3); }

/* full-viewport grid texture overlay */
.grid-tex {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(120,150,200,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,150,200,0.03) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* ---- wordmark ---- */
.wordmark { display: flex; align-items: center; gap: 8px; }
.bars { display: flex; align-items: flex-end; gap: 2px; }
.bars i { width: 3px; background: var(--ac); border-radius: 1px; display: block; }
.wordmark .txt { font-weight: 700; font-size: 13px; letter-spacing: .12em; color: var(--tx-head); }
.wordmark .txt b { color: var(--ac); font-weight: 700; }
/* topbar bars 4/8/12 */
.bars.sm i:nth-child(1){height:4px} .bars.sm i:nth-child(2){height:8px} .bars.sm i:nth-child(3){height:12px}
/* login bars 5/9/14 */
.bars.lg i:nth-child(1){height:5px} .bars.lg i:nth-child(2){height:9px} .bars.lg i:nth-child(3){height:14px}

/* ---- dots + animations ---- */
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); }
.dot.off { background: var(--off); } .dot.ac { background: var(--ac); }
.pulse { animation: saPulse 2.4s ease-in-out infinite; }
@keyframes saPulse { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes saRing {
  0% { box-shadow: 0 0 0 0 rgba(63,214,143,.45); }
  100% { box-shadow: 0 0 0 14px rgba(63,214,143,0); }
}

/* =========================================================
   LOGIN
   ========================================================= */
.login-wrap { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: center; }
.login-card {
  width: 400px; background: var(--bg-panel); border: 1px solid var(--bd);
  border-radius: 8px; padding: 30px 28px; box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.login-head { text-align: center; margin-bottom: 24px; }
.login-head .wordmark { justify-content: center; }
.login-head .wordmark .txt { font-size: 15px; letter-spacing: .12em; }
.login-head .sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--tx-faint); margin-top: 12px; }
.login-head .nominal { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--ok); margin-top: 10px; display: flex; gap: 6px; align-items: center; justify-content: center; }
.field { margin-bottom: 14px; }
.field label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--tx-dim); margin-bottom: 6px; }
.field input {
  width: 100%; background: var(--bg-base); border: 1px solid var(--bd); border-radius: 5px;
  padding: 10px 12px; color: var(--tx-head); font-family: var(--mono); font-size: 13px;
}
.field input::placeholder { color: var(--tx-ph); }
.field input:focus { outline: none; border-color: var(--ac); }
.btn-auth {
  width: 100%; background: var(--ac); color: #0A0E15; border: none; border-radius: 5px;
  padding: 11px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; cursor: pointer;
}
.btn-auth:hover { filter: brightness(1.12); }
.err { color: var(--danger); font-family: var(--mono); font-size: 11px; text-align: center; min-height: 15px; margin-top: 12px; letter-spacing: .04em; }
.login-foot { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; color: var(--tx-faint); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bd-soft); }
.login-note { position: fixed; bottom: 18px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--tx-faintest); z-index: 1; }

/* =========================================================
   SHELL
   ========================================================= */
.app { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }

/* topbar */
.topbar { height: 52px; flex: 0 0 52px; background: var(--bg-chrome); border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; gap: 16px; padding: 0 18px; }
.crumb { font-family: var(--mono); font-size: 11px; color: var(--tx-faint); }
.spacer { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-panel); border: 1px solid var(--bd);
  border-radius: 4px; padding: 5px 10px; font-family: var(--mono); font-size: 11px; color: var(--tx-dim); }
.chip.clock { font-size: 11.5px; color: var(--tx-2); }
.userchip { display: flex; align-items: center; gap: 8px; }
.avatar { width: 24px; height: 24px; border-radius: 4px; background: var(--acg); border: 1px solid var(--acb);
  color: var(--ac); font-family: var(--mono); font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.userchip .who { line-height: 1.25; }
.userchip .who .n { font-size: 11px; font-weight: 600; color: var(--tx-head); }
.userchip .who .m { font-family: var(--mono); font-size: 9px; color: var(--tx-faint); letter-spacing: .06em; }

/* broadcast banner */
.banner { display: none; align-items: center; gap: 12px; padding: 8px 18px; font-size: 12.5px; color: var(--tx-head);
  border-bottom: 1px solid var(--bd-soft); }
.banner.show { display: flex; }
.banner .tag { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; }
.banner .x { margin-left: auto; cursor: pointer; color: var(--tx-dim); }

/* body row */
.row { flex: 1; display: flex; min-height: 0; }

/* sidebar */
.sidebar { width: 216px; flex: 0 0 216px; background: var(--bg-chrome); border-right: 1px solid var(--bd);
  display: flex; flex-direction: column; padding: 10px 0; }
.side-lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--tx-faintest); padding: 4px 22px 8px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; margin: 1px 8px; border-radius: 4px;
  cursor: pointer; }
.nav-item .num { font-family: var(--mono); font-size: 10px; color: var(--tx-faintest); }
.nav-item .lbl { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--tx-muted); flex: 1; }
.nav-item .badge { background: var(--ac); color: #0A0E15; font-family: var(--mono); font-size: 9px; font-weight: 600;
  border-radius: 8px; padding: 1px 6px; }
.nav-item:hover { background: var(--bg-raised); }
.nav-item.active { background: var(--acg); }
.nav-item.active .lbl { color: var(--tx-head); }
.nav-item.active .num { color: var(--ac); }
.side-foot { margin-top: auto; border-top: 1px solid var(--bd); padding: 10px 16px; font-family: var(--mono); font-size: 9px; color: var(--tx-faint); }
.side-foot .up { color: var(--ok); }

/* main view */
.main { flex: 1; min-width: 0; overflow: auto; padding: 20px; }
.view { display: none; }
.view.active { display: block; }

/* health cards */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.card { background: var(--bg-panel); border: 1px solid var(--bd); border-radius: 6px; padding: 14px; }
.card .k { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--tx-faintest); text-transform: uppercase; }
.card .v { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--tx-head); margin: 9px 0 5px; }
.card .s { font-family: var(--mono); font-size: 10px; color: var(--tx-dim); }

/* dashboard two-column */
.dash { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }

.panel { background: var(--bg-panel); border: 1px solid var(--bd); border-radius: 6px; }
.panel .ph { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px;
  border-bottom: 1px solid var(--bd-soft); font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  color: var(--tx-dim); text-transform: uppercase; }
.panel .pb { padding: 14px 16px; }

/* activity log */
.log-row { display: flex; align-items: baseline; gap: 12px; padding: 5px 0; }
.log-row .t { font-family: var(--mono); font-size: 10.5px; color: var(--tx-faint); width: 62px; flex: 0 0 62px; }
.log-row .tag { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .06em; width: 52px; flex: 0 0 52px;
  text-align: center; padding: 2px 0; border-radius: 3px; background: var(--bg-raised); color: var(--tx-dim); }
.log-row .tag.call { color: var(--ac); background: var(--acg); }
.log-row .tag.sec, .log-row .tag.alert { color: var(--warn); background: rgba(255,180,84,.12); }
.log-row .tag.miss { color: var(--danger); background: rgba(255,93,93,.12); }
.log-row .msg { font-family: var(--mono); font-size: 11.5px; color: var(--tx-2); }

/* on-net + quick actions */
.onnet-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.onnet-row .name { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--tx-head); flex: 1; }
.onnet-row .ext { font-family: var(--mono); font-size: 9px; color: var(--tx-faint); }
.qa { display: flex; flex-direction: column; gap: 8px; }
.qa button { text-align: left; background: var(--bg-raised); border: 1px solid var(--bd); border-radius: 5px;
  padding: 10px 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--tx-body); cursor: pointer; }
.qa button:hover { border-color: var(--ac); color: var(--tx-head); }

/* presence rail */
.rail { width: 242px; flex: 0 0 242px; background: var(--bg-chrome); border-left: 1px solid var(--bd); overflow: auto; }
.rail-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--tx-dim); text-transform: uppercase; }
.rail-head .cnt { color: var(--tx-faintest); }
.rail-grp { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--tx-faintest); padding: 10px 16px 4px; }
.rail-row { display: flex; align-items: center; gap: 8px; padding: 7px 16px; }
.rail-row .info { flex: 1; line-height: 1.3; }
.rail-row .cs { font-family: var(--mono); font-size: 11.5px; font-weight: 600; }
.rail-row .subx { font-family: var(--mono); font-size: 9px; color: var(--tx-faint); }
.rail-row .ext { font-family: var(--mono); font-size: 9px; color: var(--tx-faint); }
.rail-row.online .cs { color: var(--tx-head); }
.rail-row.away .cs { color: var(--tx-2); }
.rail-row.offline .cs, .rail-row.service .cs { color: var(--tx-faint); }

/* placeholder views (Phase 2+) */
.placeholder { border: 1px dashed var(--bd-dash); border-radius: 6px; padding: 40px; text-align: center;
  background: rgba(76,141,255,0.02); }
.placeholder .big { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; color: var(--tx-dim); }
.placeholder .small { font-family: var(--mono); font-size: 11px; color: var(--tx-faint); margin-top: 8px; }
.badge-phase { display: inline-block; background: var(--acg); color: var(--ac); border: 1px solid var(--acb);
  border-radius: 4px; padding: 2px 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; }

/* buttons */
.btn-ghost { background: transparent; border: 1px solid var(--bd); border-radius: 4px; color: var(--tx-dim);
  padding: 6px 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; cursor: pointer; }
.btn-ghost:hover { border-color: var(--ac); color: var(--tx-head); }
.btn-ghost.danger:hover { border-color: var(--danger); color: var(--danger); }

/* WS status chip states */
.chip.ws-connected .dot { background: var(--ok); }
.chip.ws-connecting { color: var(--warn); }
.chip.ws-connecting .dot { background: var(--warn); }
.chip.ws-disconnected { color: var(--danger); }
.chip.ws-disconnected .dot { background: var(--danger); }

/* =========================================================
   ROOMS / CHAT (Phase 2)
   ========================================================= */
.chat { display: flex; height: 100%; border: 1px solid var(--bd); border-radius: 6px; overflow: hidden; }
/* room list column */
.roomlist { width: 236px; flex: 0 0 236px; background: var(--bg-list); border-right: 1px solid var(--bd); overflow: auto; }
.roomlist .hd { padding: 12px 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--tx-dim);
  border-bottom: 1px solid var(--bd-soft); text-transform: uppercase; }
.room-row { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--bd-hair); }
.room-row:hover { background: var(--bg-raised); }
.room-row.active { background: var(--acg); }
.room-row .nm { flex: 1; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--tx-2); }
.room-row.active .nm { color: var(--tx-head); }
.room-row .mc { font-family: var(--mono); font-size: 9px; color: var(--tx-faint); }
.room-row .unread { background: var(--ac); color: #0A0E15; font-family: var(--mono); font-size: 9px; font-weight: 600;
  border-radius: 8px; padding: 1px 6px; }
/* thread column */
.thread { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg-list); }
.thread-hd { padding: 12px 16px; border-bottom: 1px solid var(--bd-soft); }
.thread-hd .nm { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--tx-head); }
.thread-hd .desc { font-size: 11px; color: var(--tx-faint); margin-top: 2px; }
.msgs { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 560px; }
.msg .meta { display: flex; gap: 8px; align-items: baseline; margin-bottom: 3px; }
.msg .who { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--tx-2); }
.msg .at { font-family: var(--mono); font-size: 9.5px; color: var(--tx-faint); }
.msg .bubble { background: var(--bg-raised); border: 1px solid var(--bd-bubble); border-radius: 6px;
  padding: 9px 13px; font-size: 13px; line-height: 1.5; color: var(--tx-msg); white-space: pre-wrap; word-wrap: break-word; }
.msg.own { align-self: flex-end; }
.msg.own .meta { justify-content: flex-end; }
.msg.own .who { color: var(--ac); }
.msg.own .bubble { background: var(--acg); border-color: var(--acb); }
.msg.sys { align-self: center; max-width: 90%; }
.msg.sys .bubble { background: var(--bg-bot); border-color: var(--bd); color: var(--tx-dim);
  font-family: var(--mono); font-size: 11.5px; }
.composer { border-top: 1px solid var(--bd-soft); padding: 12px 16px; display: flex; gap: 10px; }
.composer input { flex: 1; background: var(--bg-base); border: 1px solid var(--bd); border-radius: 5px;
  padding: 10px 12px; color: var(--tx-head); font-family: var(--sans); font-size: 13px; }
.composer input:focus { outline: none; border-color: var(--ac); }
.composer button { background: var(--ac); color: #0A0E15; border: none; border-radius: 5px; padding: 0 16px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; cursor: pointer; }
.composer button:hover { filter: brightness(1.12); }
.empty-hint { color: var(--tx-faint); font-family: var(--mono); font-size: 11px; text-align: center; margin: auto; }

/* Broadcast composer (admin) */
.bc-wrap { max-width: 820px; }
.seg { display: inline-flex; gap: 0; border: 1px solid var(--bd); border-radius: 5px; overflow: hidden; margin-bottom: 12px; }
.seg button { background: var(--bg-panel); border: none; border-right: 1px solid var(--bd); color: var(--tx-dim);
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; padding: 7px 14px; cursor: pointer; }
.seg button:last-child { border-right: none; }
.seg button.on[data-pri=info] { color: var(--ac); background: var(--acg); }
.seg button.on[data-pri=warn] { color: var(--warn); background: rgba(255,180,84,.12); }
.seg button.on[data-pri=crit] { color: var(--danger); background: rgba(255,93,93,.12); }
.bc-wrap textarea { width: 100%; min-height: 76px; background: var(--bg-base); border: 1px solid var(--bd);
  border-radius: 5px; padding: 10px 12px; color: var(--tx-head); font-family: var(--sans); font-size: 13px; resize: vertical; }
.bc-wrap textarea:focus { outline: none; border-color: var(--ac); }
.bc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.bc-foot .tgt { font-family: var(--mono); font-size: 10px; color: var(--tx-faint); }
.bc-send { background: var(--ac); color: #0A0E15; border: none; border-radius: 5px; padding: 9px 16px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; cursor: pointer; }
.bc-send:hover { filter: brightness(1.12); }
.banner .tag.info { color: var(--ac); } .banner.info { background: var(--acg); }
.banner .tag.warn { color: var(--warn); } .banner.warn { background: rgba(255,180,84,.12); }
.banner .tag.crit { color: var(--danger); } .banner.crit { background: rgba(255,93,93,.13); }

/* =========================================================
   ADMIN USERS panel (Phase 2.1)
   ========================================================= */
.users-wrap { max-width: 940px; }
.create-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.create-row input, .create-row select {
  background: var(--bg-base); border: 1px solid var(--bd); border-radius: 5px; padding: 8px 10px;
  color: var(--tx-head); font-family: var(--mono); font-size: 12px;
}
.create-row input:focus, .create-row select:focus { outline: none; border-color: var(--ac); }
.create-row .u { width: 150px; } .create-row .p { width: 160px; } .create-row .x { width: 70px; }
.create-row label { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--tx-dim); display: flex; align-items: center; gap: 5px; }
.create-row button { background: var(--ac); color: #0A0E15; border: none; border-radius: 5px; padding: 8px 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; cursor: pointer; }
.create-row button:hover { filter: brightness(1.12); }
table.utbl { width: 100%; border-collapse: collapse; margin-top: 14px; }
table.utbl th { text-align: left; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--tx-faintest);
  text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--bd); }
table.utbl td { padding: 9px 10px; border-bottom: 1px solid var(--bd-hair); font-size: 12px; vertical-align: middle; }
table.utbl td.mono, table.utbl .mono { font-family: var(--mono); }
.pill { display: inline-block; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 8px; }
.pill.admin { color: var(--ac); background: var(--acg); }
.pill.user { color: var(--tx-dim); background: var(--bg-raised); }
.pill.on { color: var(--ok); background: rgba(63,214,143,.12); }
.pill.off { color: var(--danger); background: rgba(255,93,93,.12); }
.pill.dis { color: var(--tx-faint); background: var(--bg-raised); }
.uact { display: flex; gap: 6px; flex-wrap: wrap; }
.uact button, .uact select { background: transparent; border: 1px solid var(--bd); border-radius: 4px; color: var(--tx-dim);
  padding: 4px 9px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; cursor: pointer; }
.uact button:hover { border-color: var(--ac); color: var(--tx-head); }
.uact button.danger:hover { border-color: var(--danger); color: var(--danger); }
.uact select { color: var(--tx-dim); }