/* ═══════════════════════════════════════════════════
   NOID CHAT — BRUTALIST PREMIUM
   4-Section Layout: Chats | Friends | Social | Settings
   ═══════════════════════════════════════════════════ */

/* Brand font — Ugocranis Black for the NOID wordmark only.
   To revert: delete this @font-face block. The .nav-logo span will fall back
   to Space Grotesk (existing var(--font-display)). */
@font-face {
  font-family: 'Ugocranis';
  src: url('fonts/ugocranis.woff2') format('woff2'),
       url('fonts/ugocranis.woff') format('woff'),
       url('fonts/ugocranis.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Wei's 4-color palette · 2026-05-05
     Black #171717 · Orange #F25623 · Light grey/white #DEDEDE · Dark grey #4D4D4D
     Existing variable names preserved so all current CSS keeps working. */
  --black: #171717;
  --white: #DEDEDE;
  --accent: #F25623;
  --accent-dim: #c9421a;
  --accent-bg: rgba(242, 86, 35, 0.10);
  --danger: #d32f2f;

  --gray-100: #DEDEDE;
  --gray-200: #DEDEDE;
  --gray-300: #b8b8b8;
  --gray-400: #888888;
  --gray-500: #6a6a6a;
  --gray-600: #4D4D4D;
  --gray-700: #2c2c2c;
  --gray-800: #1f1f1f;
  --gray-900: #171717;

  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', monospace;
  --font-display: 'Space Grotesk', 'Bebas Neue', 'Impact', sans-serif;
  --font-body: 'Space Grotesk', 'Inter', system-ui, sans-serif;

  --shadow-hard: 4px 4px 0px var(--black);
  --shadow-accent: 4px 4px 0px var(--accent);
  --shadow-modal: 10px 10px 0 var(--black);

  --transition-fast: 120ms ease;
  --transition-medium: 250ms ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { height: 100%; overflow: hidden; touch-action: pan-x pan-y; -ms-touch-action: pan-x pan-y; }

body {
  font-family: var(--font-body);
  background: var(--black);
  color: var(--white);
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}

/* ── Scrollbar ─────────────────────────────────── */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--gray-900); }
::-webkit-scrollbar-thumb { background: var(--white); border-left: 2px solid var(--gray-900); border-right: 2px solid var(--gray-900); }
::-webkit-scrollbar-thumb:hover { background: var(--white); }

/* ── Auth Screen ───────────────────────────────── */
.auth-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: var(--black);
}
.auth-card {
  width: 440px;
  background: var(--gray-900);
  border: 3px solid var(--white);
  box-shadow: var(--shadow-modal);
  animation: modal-enter 300ms ease;
}
.auth-brand {
  background: var(--white);
  color: var(--black);
  padding: 20px 24px;
  font-family: 'Ugocranis', var(--font-display);
  font-size: 1.8rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.auth-brand span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  margin-left: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.auth-tabs { display: flex; border-bottom: 2px solid var(--gray-600); }
.auth-tab {
  flex: 1; padding: 14px;
  background: var(--gray-800); border: none;
  color: var(--gray-400);
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.15em;
  cursor: pointer; transition: all var(--transition-fast);
  border-bottom: 2px solid transparent;
}
.auth-tab:hover { background: var(--gray-700); color: var(--white); }
.auth-tab.active { background: var(--white); color: var(--black); border-bottom-color: var(--accent); }
.auth-form { display: none; flex-direction: column; gap: 14px; padding: 32px 24px; }
.auth-form.active { display: flex; }
.auth-form input {
  padding: 14px 16px;
  background: var(--gray-800); border: 2px solid var(--gray-600);
  color: var(--white); font-family: var(--font-body); font-size: 0.9rem;
  outline: none; transition: all var(--transition-fast);
}
.auth-form input::placeholder { color: var(--gray-500); }
.auth-form input:focus { border-color: var(--accent); background: var(--gray-700); }
.auth-form button[type="submit"] {
  padding: 16px 24px;
  background: var(--accent); border: none;
  color: var(--white); font-family: var(--font-mono);
  font-size: 0.85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  cursor: pointer; transition: all var(--transition-fast); margin-top: 4px;
}
.auth-form button[type="submit"]:hover { background: var(--accent-dim); }
.auth-error {
  color: var(--accent); font-family: var(--font-mono);
  font-size: 0.75rem; min-height: 1em; letter-spacing: 0.05em;
}

/* ── Session Duration Row ─────────────────────── */
.session-row {
  display: flex; align-items: center; gap: 12px;
  justify-content: space-between;
}
.session-toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  user-select: none;
}
.session-toggle input { display: none; }
.session-toggle-track {
  width: 36px; height: 20px; border-radius: 10px;
  background: var(--gray-600); position: relative;
  transition: background var(--transition-fast);
}
.session-toggle input:checked + .session-toggle-track {
  background: var(--accent);
}
.session-toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--white); transition: transform var(--transition-fast);
}
.session-toggle input:checked + .session-toggle-track .session-toggle-thumb {
  transform: translateX(16px);
}
.session-toggle-label {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.08em;
  white-space: nowrap;
}
.session-select {
  padding: 6px 10px; background: var(--gray-800); border: 2px solid var(--gray-600);
  color: var(--white); font-family: var(--font-mono); font-size: 0.7rem;
  font-weight: 600; cursor: pointer; outline: none;
  transition: border-color var(--transition-fast);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.session-select:focus { border-color: var(--accent); }
.session-select:disabled { opacity: 0.3; cursor: not-allowed; }
.session-row.disabled .session-toggle-label { color: var(--gray-600); }

/* ── Biometric Lock Screen ────────────────────── */
#bio-lock, #hp-lock {
  position: fixed; inset: 0; z-index: 999998;
  background: #171717;  /* match the boot splash exactly so splash→lock reads as one screen */
  display: flex; align-items: center; justify-content: center;
}
.bio-lock-inner {
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}
/* Splash → lock is one continuous motion: the (identical) logo glides UP into
   place while the verify controls fade in below it — no hard screen swap. */
@keyframes lock-logo-rise {
  from { opacity: 0; transform: skewX(-5deg) translateY(34px); }
  to   { opacity: 1; transform: skewX(-5deg) translateY(0); }
}
@keyframes lock-verify-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bio-lock-icon { opacity: 0.9; }
/* Logo mirrors the boot splash (.splash-logo): NOID stacked over Chat, skewed,
   same fonts/sizes/colors — so the system splash, in-page splash, and lock all
   read as one continuous screen (NOID on top, Chat below). */
.bio-lock-title {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transform: skewX(-5deg);
  font-family: 'Ugocranis', var(--font-display);
  font-size: clamp(3rem, 10vw, 5rem); font-weight: 900;
  text-transform: uppercase; letter-spacing: -0.02em;
  color: #DEDEDE; line-height: 1;
  animation: lock-logo-rise 620ms cubic-bezier(.22,1,.36,1) both;
}
.bio-lock-title span {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(0.8rem, 2.5vw, 1.2rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.15em; text-indent: 0.15em;
  color: #ff3d00; margin-top: 6px;
}
.bio-lock-text, .bio-lock-btn, #hp-pin-section, #hp-bio-btn, .bio-lock-error {
  animation: lock-verify-in 520ms ease 260ms both;
}
.bio-lock-text {
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--gray-400);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.bio-lock-btn {
  padding: 14px 40px; background: var(--accent); border: none;
  color: var(--white); font-family: var(--font-mono); font-size: 0.85rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  cursor: pointer; transition: background var(--transition-fast);
}
.bio-lock-btn:hover { background: var(--accent-dim); }
.bio-lock-error {
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent);
  min-height: 1em; letter-spacing: 0.05em;
}

/* HP PIN — dot-cell display so digits NEVER flash visible (kills the
   "type=password show-last-char" behavior on Android/iOS). The real input is
   absolutely positioned off-screen but still receives keystrokes; cells fill
   based on its length only. */
.hp-pin-cells {
  display: flex; gap: 10px; cursor: text; user-select: none;
}
.hp-pin-cell {
  width: 36px; height: 46px;
  border: 2px solid var(--gray-600);
  background: var(--gray-800);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 120ms, background 120ms;
}
.hp-pin-cell.filled {
  border-color: var(--accent);
  background: var(--gray-900);
}
.hp-pin-cell.filled::after {
  content: '';
  width: 12px; height: 12px;
  background: var(--accent);
  border-radius: 50%;
}
/* The real input — invisible but focusable + keystroke-capturing */
.hp-pin-hidden {
  position: absolute;
  left: -9999px; top: 0;
  width: 1px; height: 1px;
  opacity: 0;
  border: none; outline: none;
  pointer-events: none;
}

/* ── Bio Settings ─────────────────────────────── */
.setting-hint {
  padding: 8px 20px; font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--gray-500); font-style: italic;
}
.bio-devices-list {
  display: flex; flex-direction: column; gap: 2px;
}
.bio-device-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; background: var(--gray-800); border-bottom: 1px solid var(--gray-700);
}
.bio-device-info {
  display: flex; flex-direction: column; gap: 2px;
}
.bio-device-name {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
  color: var(--white); text-transform: uppercase; letter-spacing: 0.05em;
}
.bio-device-date {
  font-family: var(--font-mono); font-size: 0.65rem; color: var(--gray-500);
}
.bio-device-remove {
  background: none; border: 1px solid var(--gray-600); color: var(--gray-400);
  font-family: var(--font-mono); font-size: 0.65rem; padding: 4px 10px;
  cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em;
  transition: all var(--transition-fast);
}
.bio-device-remove:hover { border-color: var(--accent); color: var(--accent); }

/* ── Bio Transfer Modal ───────────────────────── */
.bio-transfer-hint {
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--gray-400);
  line-height: 1.6;
}
.bio-transfer-expire {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent);
  font-weight: 600;
}
.bio-transfer-tabs {
  display: flex; gap: 8px; justify-content: center; margin-top: 16px;
}

@keyframes modal-enter {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Connection Bar ────────────────────────────── */
.connection-bar {
  display: none; position: fixed; top: 64px; left: 0; right: 0;
  padding: 6px 16px; text-align: center; z-index: 199;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.connection-bar.disconnected {
  display: block; background: var(--danger); color: var(--white);
}
.connection-bar.reconnecting {
  display: block; background: #ff9800; color: var(--black);
}


/* ── Selection / long-press control (ux-selection-menu · Stalin 2026-06-12) ──
   Kill the native long-press callout (the "Search Google / Translate / Select
   all" system bar) across the app UI so OUR own long-press sheets/menus are the
   only thing that appears. Text the user genuinely reads or edits stays
   selectable (so copy + typing still work). */
* { -webkit-touch-callout: none; }
html, body, #app {
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;   /* kill native blue/grey tap flash → brand :active */
}
/* brand selection highlight — replaces the default browser BLUE band */
::selection      { background: rgba(242, 86, 35, 0.30); color: #DEDEDE; }
::-moz-selection { background: rgba(242, 86, 35, 0.30); color: #DEDEDE; }
/* images/media: no native Save/Lens/Google sheet, no drag-ghost */
img, video, canvas, svg { -webkit-user-drag: none; -moz-user-drag: none; user-drag: none; }
/* re-enable real selection ONLY where reading/typing/paste is the point.
   message copy is via the custom long-press Copy button, so .msg-text is NOT here;
   notes (.nv-body) + bible (.bb-reading-body .block-text) STAY selectable (no custom copy menu). */
input, textarea, [contenteditable], [contenteditable="true"], [contenteditable=""],
.nv-body, .bb-reading-body .block-text {
  -webkit-user-select: text; -moz-user-select: text; user-select: text;
  -webkit-touch-callout: default;
}
/* surfaces with our OWN long-press / tap actions → never the native menu */
.bb-verse-row, .bb-verse-text, .bb-verse-num, .ma-rcard, .ma-app, .ma-hero,
.chn-row, .chn-post, .nb-row, .pinned-card, .gd-action, .gd-member,
.app-shell-nav, .app-shell-top, .nav-btn, button,
.msg-wrap, .msg-text, .conv-item {
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.context-menu, .context-menu button { -webkit-user-select: none; user-select: none; }