/* The Underground Network: minimal theme.
   One solid navy background, NASA blue for focus and links, a true red for
   actions and your own messages. Hairlines instead of boxes. */

:root {
  --space: #050B1C;        /* the one background colour */
  --hull: #0A1328;         /* inputs and the occasional raised surface */
  --nasa-blue: #0B3D91;
  --signal: #6F9BFF;       /* NASA blue lifted for use on dark */
  --nasa-red: #E0102F;
  --red-deep: #B50C25;
  --white: #EEF2FC;
  --muted: #8A96B8;
  --faint: #56627F;
  --line: rgba(138, 150, 184, 0.12);
  --line-strong: rgba(138, 150, 184, 0.24);
  --ok: #7FE0C2;
  --warn: #FFC857;

  --ui: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: var(--ui);
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r-sm: 6px;
  --r-md: 10px;
  --rail-w: 240px;

  --c0: #6F9BFF; --c1: #FF5C72; --c2: #9FD3FF; --c3: #FFC857;
  --c4: #B79CFF; --c5: #7FE0C2; --c6: #FF9EC2; --c7: #DDE5FF;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--space);
  color: var(--white);
  font: 400 15px/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--signal); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.boot { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; color: var(--faint); font-size: 14px; }

/* ---------- buttons ---------- */
.btn {
  border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 8px 14px; cursor: pointer;
  font: 500 14px/1 var(--ui);
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-red { background: var(--nasa-red); color: #fff; }
.btn-red:hover:not(:disabled) { background: var(--red-deep); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--muted); }
.btn-ghost:hover:not(:disabled) { color: var(--white); border-color: var(--muted); }
.btn-blue { background: var(--nasa-blue); color: #fff; }
.btn-blue:hover:not(:disabled) { background: #0F4BB0; }

.form-error { min-height: 1.4em; margin: 0; color: var(--c1); font-size: 14px; }

/* ---------- invite gate ---------- */
.gate { min-height: 100%; height: 100%; display: grid; place-items: center; padding: 24px 16px; overflow: auto; }
.gate-card { width: min(360px, 100%); }
.gate-title { margin: 0; font: 600 26px/1.15 var(--ui); letter-spacing: -.01em; }
.gate-lede { margin: 6px 0 28px; color: var(--muted); }
.gate-form { display: grid; gap: 10px; }
.gate-form label { font-size: 13px; color: var(--muted); }
.gate-form input {
  background: var(--hull); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 12px 12px; font: 400 16px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
}
.gate-form input::placeholder { color: var(--faint); }
.gate-form input:focus { border-color: var(--signal); outline: none; }
.gate-form .btn { padding: 12px; font-size: 15px; }
.gate-fine { margin: 20px 0 0; font-size: 13px; color: var(--faint); }

/* ---------- app shell ---------- */
.app {
  height: 100%;
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "bar bar" "rail deck";
}

.bar {
  grid-area: bar;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.brand { color: var(--white); text-decoration: none; font: 600 15px/1 var(--ui); letter-spacing: .01em; }
.bar-right { display: flex; align-items: center; gap: 18px; }
.link { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.link-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.link[data-state="live"] .link-dot { background: var(--ok); }
.link[data-state="down"] .link-dot { background: var(--nasa-red); }

/* ---------- channel rail ---------- */
.rail {
  grid-area: rail;
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  padding: 16px 12px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
}
.rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.room-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--muted); text-align: left; cursor: pointer;
}
.room-btn:hover { color: var(--white); background: rgba(138,150,184,.06); }
.room-btn[aria-current="true"] { color: var(--white); background: rgba(11,61,145,.4); }
.room-btn-name { font: 500 15px/1.3 var(--ui); }
.room-btn-name::before { content: "# "; color: var(--faint); }
.room-btn[aria-current="true"] .room-btn-name::before { color: var(--nasa-red); }
.room-btn-online { font: 400 12px/1 var(--mono); color: var(--faint); }
.room-btn-online.has { color: var(--ok); }

.ident { padding: 12px 10px 4px; border-top: 1px solid var(--line); }
.ident-label { margin: 0 0 2px; font-size: 12px; color: var(--faint); }
.callsign { margin: 0 0 10px; font: 500 14px/1.35 var(--mono); word-break: break-all; }
.ident .btn { width: 100%; }
.ident-admin { display: block; margin-top: 10px; font-size: 13px; }

/* ---------- deck ---------- */
.deck { grid-area: deck; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.deck-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px;
  padding: 18px 28px 14px;
  border-bottom: 1px solid var(--line);
}
.room-name { order: 1; margin: 0; font: 600 20px/1.2 var(--ui); }
.freq { order: 2; margin: 0; font: 400 12px/1 var(--mono); color: var(--faint); }
.room-topic { order: 3; flex-basis: 100%; margin: 0; font-size: 14px; color: var(--muted); }

.log {
  flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0;
  padding: 14px 28px 8px;
}

.msg {
  position: relative;
  padding: 6px 0 6px 12px; margin-left: -12px;
  border-left: 2px solid transparent;
}
.msg.mine { border-left-color: var(--nasa-red); }
.msg-meta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 1px; }
.msg-who { font: 500 13px/1.3 var(--mono); }
.msg-time { font: 400 11px/1 var(--mono); color: var(--faint); }
.msg-text {
  margin: 0; font: 400 14px/1.6 var(--mono); color: #D9E0F2;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.msg.cont { padding-top: 0; }
.msg.cont .msg-meta { display: none; }

.msg.announce { margin: 10px 0 10px -12px; padding: 10px 12px; border-left-color: var(--signal); background: rgba(11,61,145,.25); }
.msg.announce .msg-who { color: var(--signal); }

.msg.note .msg-text { font-size: 12px; color: var(--faint); }
.msg.note.bad .msg-text { color: var(--c1); }

.msg:hover { background: rgba(138,150,184,.04); }

/* actions that appear when you hover a message */
.acts { display: none; position: absolute; right: 0; top: 4px; gap: 4px; }
.msg:hover .acts, .msg:focus-within .acts { display: flex; }
.acts button {
  border: 1px solid var(--line-strong); background: var(--space); border-radius: var(--r-sm);
  padding: 2px 8px; font-size: 12px; color: var(--muted); cursor: pointer;
}
.acts button:hover { color: var(--white); border-color: var(--muted); }
.acts button.danger:hover { color: var(--nasa-red); border-color: var(--nasa-red); }

/* the quoted message above a reply */
.msg-reply {
  display: flex; align-items: baseline; gap: 8px; max-width: 100%;
  margin: 0 0 3px; padding: 0 0 0 10px; border: 0; border-left: 2px solid var(--line-strong);
  background: none; cursor: pointer; text-align: left;
  font: 400 12px/1.5 var(--mono); color: var(--faint);
}
.msg-reply:hover { border-left-color: var(--signal); color: var(--muted); }
.msg-reply-who { flex-shrink: 0; font-weight: 500; }
.msg-reply-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }

/* images in messages */
.msg-img {
  display: block; margin: 6px 0 2px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--hull); cursor: zoom-in; overflow: hidden; max-width: min(360px, 100%);
}
.msg-img img { display: block; max-width: 100%; height: auto; max-height: 320px; width: auto; object-fit: contain; }
.msg-img:hover { border-color: var(--line-strong); }
.msg-gone { margin: 4px 0 0; font-size: 12px; color: var(--faint); font-style: italic; }

/* jump-to-message highlight */
@keyframes flash { from { background: rgba(111,155,255,.22); } to { background: transparent; } }
.msg.flash { animation: flash 1.6s ease-out; }
@media (prefers-reduced-motion: reduce) { .msg.flash { animation: none; background: rgba(111,155,255,.15); } }

.empty { padding: 32px 0; color: var(--faint); font-size: 14px; }

.c0 { color: var(--c0); } .c1 { color: var(--c1); } .c2 { color: var(--c2); } .c3 { color: var(--c3); }
.c4 { color: var(--c4); } .c5 { color: var(--c5); } .c6 { color: var(--c6); } .c7 { color: var(--c7); }

/* ---------- composer ---------- */
.dock { padding: 0 28px 18px; }
.typing { min-height: 20px; margin: 0; font-size: 12px; line-height: 20px; color: var(--faint); }
.composer {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 6px 6px 6px 12px;
  background: var(--hull); border: 1px solid var(--line-strong); border-radius: var(--r-md);
}
.composer:focus-within { border-color: var(--signal); }
.composer textarea {
  flex: 1; min-height: 24px; max-height: 180px; resize: none;
  border: 0; outline: 0; background: transparent; padding: 6px 0;
  font: 400 14px/1.5 var(--mono);
}
.composer textarea::placeholder { color: var(--faint); }
.icon-btn {
  flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; margin-left: -6px;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); cursor: pointer;
}
.icon-btn:hover { color: var(--white); background: rgba(138,150,184,.08); }
.x-btn {
  flex-shrink: 0; width: 26px; height: 26px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--faint); font-size: 13px; cursor: pointer;
}
.x-btn:hover { color: var(--white); background: rgba(138,150,184,.1); }

.reply-bar, .attach-preview {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 6px; padding: 6px 6px 6px 12px;
  border-left: 2px solid var(--signal); background: rgba(11,61,145,.18); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.reply-bar-text { flex: 1; min-width: 0; margin: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-bar-text span:first-child { font: 500 13px var(--mono); }
.reply-bar-excerpt { margin-left: 8px; font: 400 12px var(--mono); color: var(--faint); }
.attach-preview img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); background: var(--hull); }
.attach-status { flex: 1; margin: 0; font-size: 13px; color: var(--muted); }
.attach-status.bad { color: var(--c1); }

.deck.dropping .log { outline: 2px dashed var(--signal); outline-offset: -8px; }

/* full-size image viewer */
.viewer {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 24px;
  background: rgba(3, 7, 18, .92); cursor: zoom-out;
}
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-sm); cursor: default; }
.viewer-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; font-size: 16px; color: var(--muted); }
.composer-side { display: flex; align-items: center; gap: 10px; }
.count { font: 400 12px/1 var(--mono); color: var(--faint); }
.count.over { color: var(--nasa-red); }
.dock-hint { margin: 6px 0 0; font-size: 12px; color: var(--faint); }

/* ---------- touch screens ----------
   iPhones zoom in on any text box with text smaller than 16px, so on touch
   devices every input uses 16px. (Disabling zoom instead would hurt people
   who need to zoom to read.) */
@media (pointer: coarse) {
  .composer textarea, .gate-form input, input, textarea, select { font-size: 16px; }
}

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "bar" "rail" "deck"; }
  .bar { padding: 12px 16px; }
  .rail {
    flex-direction: row; align-items: center; gap: 8px;
    padding: 6px 12px; border-right: 0; border-bottom: 1px solid var(--line);
    overflow-x: auto; overflow-y: hidden;
  }
  .rooms { display: flex; gap: 2px; }
  .room-btn { white-space: nowrap; padding: 6px 10px; }
  .ident { display: flex; align-items: center; gap: 8px; padding: 0 0 0 10px; border-top: 0; border-left: 1px solid var(--line); flex-shrink: 0; }
  .ident-label, .ident-admin { display: none; }
  .callsign { margin: 0; font-size: 12px; white-space: nowrap; word-break: normal; }
  .ident .btn { width: auto; padding: 5px 9px; font-size: 12px; }
  .deck-head { padding: 14px 16px 10px; }
  .log { padding: 10px 16px 6px; }
  .msg { padding-left: 10px; margin-left: -10px; }
  .dock { padding: 0 12px calc(12px + env(safe-area-inset-bottom)); }
  .dock-hint { display: none; }
  .acts { display: flex; position: static; margin-top: 2px; gap: 14px; }
  .acts button { border: 0; background: none; padding: 2px 0; font-size: 12px; color: var(--faint); }
  .msg:hover { background: none; }
  .msg-img { max-width: 100%; }
}