/* ================= Design tokens ================= */

:root {
  /* Brief light palette */
  --bg: #eeece6;
  --surface: #f5f4f0;
  --surface-2: #ffffff;
  --surface-hover: #eae8e0;
  --text: #1a1a18;
  --text-2: #5f5e5a;
  --text-muted: #888780;
  --border: rgba(0, 0, 0, 0.12);
  --border-strong: rgba(0, 0, 0, 0.22);

  --accent: #1D9E75;
  --accent-hi: #159167;
  --accent-bg: #E1F5EE;
  --accent-text: #0F6E56;
  --accent-text-strong: #085041;

  --blue: #378ADD;
  --ok: #1D9E75;
  --warn: #854F0B;
  --warn-bg: #FAEEDA;
  --err: #A32D2D;
  --err-bg: #FCEBEB;

  /* Message bubbles */
  --bubble-out-bg: #1D9E75;
  --bubble-out-text: #E1F5EE;
  --bubble-in-bg: #ffffff;
  --bubble-in-text: #1a1a18;

  /* Log panel is always dark regardless of theme, per the brief */
  --log-bg: #1a1a1a;
  --log-text: #c6cbd6;
  --log-ok: #5DCAA5;
  --log-err: #F09595;
  --log-info: #85B7EB;
  --log-hex: #9FE1CB;
  --log-warn: #FAC775;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Emoji fonts at the end so per-glyph fallback picks them up for emoji
     codepoints while still using system-ui / Menlo for text. Without
     them, Consolas in particular renders emoji as tofu on Windows. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  --font-mono: "Menlo", "Consolas", "SFMono-Regular", "Cascadia Mono", ui-monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", monospace;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 32px rgba(0, 0, 0, 0.10);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0f1115;
  --surface: #171a21;
  --surface-2: #1e2230;
  --surface-hover: #242938;
  --text: #e6e8ee;
  --text-2: #9aa1b2;
  --text-muted: #6d7689;
  --border: #2a2f3c;
  --border-strong: #3a4254;

  --accent: #5eb0ff;
  --accent-hi: #7dc0ff;
  --accent-bg: #1a3a5c;
  --accent-text: #a8d0ff;
  --accent-text-strong: #c5dcff;

  --blue: #5eb0ff;
  --ok: #4ade80;
  --warn: #fbbf24;
  --warn-bg: #3a2f13;
  --err: #f87171;
  --err-bg: #3a1515;

  --bubble-out-bg: #1a3a5c;
  --bubble-out-text: #e6e8ee;
  --bubble-in-bg: #1e2230;
  --bubble-in-text: #e6e8ee;

  color-scheme: dark;
}

/* ================= Reset ================= */

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

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

a { color: var(--accent); }

/* ================= App shell ================= */

.app-shell {
  display: flex;
  height: 100vh;
  height: 100dvh;   /* dynamic viewport height — excludes the mobile browser URL bar */
  width: 100%;
  overflow: hidden;
}

/* Sidebar (desktop) */

.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 16px 14px 14px;
  border-bottom: 0.5px solid var(--border);
}

/* Quick-connect buttons in the sidebar header — shown only when
   disconnected, hidden via the same .hidden class the settings
   connect buttons use. First-launch users can see and hit them
   immediately without going to Settings. */
.quick-connect {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.quick-connect-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface-2);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  text-align: left;
}
.quick-connect-btn:hover {
  background: var(--accent);
  color: var(--accent-bg);
  border-color: var(--accent);
}
.quick-connect-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--accent);
  transition: color 0.1s;
}
.quick-connect-btn:hover svg { color: var(--accent-bg); }
.quick-connect-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.quick-connect-btn:disabled:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}
.quick-connect-btn:disabled:hover svg { color: var(--accent); }

/* Mobile hero banner inside the Messages view, shown when disconnected.
   Mirrors the sidebar's quick-connect purpose for devices where the
   sidebar is hidden. */
.mobile-connect-hero {
  display: none;
  padding: 16px 14px;
  background: var(--accent-bg);
  border-bottom: 0.5px solid var(--border);
}
.mobile-connect-hero .btn-primary,
.mobile-connect-hero .btn-secondary {
  margin-top: 8px;
}
.mobile-connect-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-text-strong);
  margin-bottom: 4px;
}
[data-theme="dark"] .mobile-connect-label { color: var(--accent-text); }
.mobile-connect-hint {
  font-size: 11px;
  color: var(--accent-text);
  margin-top: 10px;
  line-height: 1.5;
}
.mobile-connect-hint code {
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, 0.5);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}
[data-theme="dark"] .mobile-connect-hint code { background: rgba(0, 0, 0, 0.3); }

.logo {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  row-gap: 2px;
}

.logo-version {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.2px;
}
.logo-version .version-sha {
  margin-left: 2px;
}

.logo-mark {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-bg);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}
.logo-mark::before { content: "·"; }

.logo-name {
  font-weight: 500;
  font-size: 15px;
  color: var(--text);
}

.conn-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  background: var(--accent-bg);
  color: var(--accent-text);
  border-radius: 20px;
  padding: 3px 9px;
  font-weight: 500;
  white-space: nowrap;
}
.conn-pill:has(.status-dot:not(.on)) {
  background: var(--surface-hover);
  color: var(--text-muted);
}
[data-theme="dark"] .conn-pill { color: var(--accent-text); }

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
  flex-shrink: 0;
}
.status-dot.on { background: var(--accent); box-shadow: 0 0 6px var(--accent); }

/* Sidebar nav */

.sidebar-nav { padding: 10px 8px; flex: 1; overflow-y: auto; }

.nav-section { margin-bottom: 8px; }

.nav-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 8px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-2);
  width: 100%;
  text-align: left;
  transition: background 0.1s;
}
.nav-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.nav-item:hover { background: var(--surface-hover); color: var(--text); }
.nav-item.active {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .nav-item.active { background: var(--surface-2); }

.nav-badge {
  margin-left: auto;
  background: var(--accent);
  color: var(--accent-bg);
  font-size: 10px;
  font-weight: 500;
  border-radius: 20px;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}

.sidebar-footer {
  padding: 10px 10px;
  border-top: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.identity-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
  padding: 4px;
  border-radius: var(--radius-md);
}

.identity-row-text { min-width: 0; flex: 1; }

.identity-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.identity-hash-short {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-toggle {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--text-2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle:hover { background: var(--surface-hover); color: var(--text); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-moon { display: block; }

/* Avatars */

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent-text-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
  text-transform: uppercase;
}
.avatar.avatar-lg { width: 44px; height: 44px; font-size: 15px; }
.avatar.avatar-sm { width: 24px; height: 24px; font-size: 9px; }

/* ================= Main / views ================= */

.main {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  overflow: hidden;
  display: flex;
}

.view {
  flex: 1;
  display: none;
  min-width: 0;
  min-height: 0;    /* flex column items default to min-height:auto which breaks scroll */
  overflow: hidden;
}
.view.active { display: flex; }

.view-header {
  padding: 18px 64px 14px 24px;  /* extra right pad clears the fixed destruct button */
  border-bottom: 0.5px solid var(--border);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.view-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
}

.view-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.5;
}

/* ================= Messages view ================= */

.view-messages {
  flex-direction: row;
  min-height: 0;
  background: var(--surface-2);
}
[data-theme="dark"] .view-messages { background: var(--bg); }

.list-panel {
  width: 260px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-header {
  padding: 16px 18px 12px;
  border-bottom: 0.5px solid var(--border);
}

.panel-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.contact-filter {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 0.5px solid var(--border);
  flex-shrink: 0;
}
.contact-search {
  flex: 1;
  background: var(--bg);
  border: 0.5px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
  min-width: 0;
}
.contact-search:focus {
  outline: none;
  border-color: var(--accent);
}
.filter-toggle {
  background: transparent;
  border: 0.5px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
  line-height: 1;
}
.filter-toggle:hover {
  color: var(--text);
}
.filter-toggle[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-bg);
}

.contact-list {
  list-style: none;
  overflow-y: auto;
  flex: 1;
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.contact-list li:hover { background: var(--surface-hover); }
.contact-list li.active { background: var(--accent-bg); }

.contact-list li > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.contact-empty {
  color: var(--text-muted);
  font-size: 13px;
  cursor: default !important;
  justify-content: center;
  padding: 20px 14px !important;
}
.contact-empty:hover { background: transparent !important; }

.contact-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
  text-transform: uppercase;
}

.contact-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-list li.active .contact-name { color: var(--accent-text-strong); }
[data-theme="dark"] .contact-list li.active .contact-name { color: var(--accent-text); }

.contact-hash {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-delete {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--border);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}
.contact-delete:hover {
  background: var(--err-bg);
  color: var(--err);
  border-color: var(--err);
}

.contact-pin-btn {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  border: 0.5px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.1s, color 0.1s;
}
.contact-pin-btn:hover {
  opacity: 1;
  color: var(--text);
}
.contact-pin-btn.active {
  opacity: 1;
  color: var(--accent);
}

.contact-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--surface-hover, rgba(0,0,0,0.08));
  color: var(--text-muted);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

.contact-unread {
  display: inline-block;
  min-width: 18px;
  padding: 1px 7px;
  background: var(--accent);
  color: var(--accent-bg);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  margin-left: 6px;
}

/* Chat area */

.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;    /* prevent content from growing this container past its flex allocation */
  overflow: hidden;  /* establish a formatting context so children scroll, not this */
  background: var(--surface-2);
}
[data-theme="dark"] .chat-area { background: var(--surface); }

.chat-header {
  padding: 14px 20px;
  border-bottom: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}

.back-btn {
  display: none;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  color: var(--text-2);
  align-items: center;
  justify-content: center;
}
.back-btn:hover { background: var(--surface-hover); color: var(--text); }
.back-btn svg { width: 16px; height: 16px; }

.chat-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-list {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.message {
  position: relative;
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  word-wrap: break-word;
}
/* Preserve sender-authored line breaks; still wrap long words. */
.message-text {
  white-space: pre-wrap;
  word-break: break-word;
}
.message.incoming {
  background: var(--bubble-in-bg);
  color: var(--bubble-in-text);
  border: 0.5px solid var(--border);
  border-bottom-left-radius: 4px;
  margin-right: auto;
}
.message.outgoing {
  background: var(--bubble-out-bg);
  color: var(--bubble-out-text);
  border-bottom-right-radius: 4px;
  margin-left: auto;
}
.message .meta {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.message.outgoing .meta {
  color: rgba(255, 255, 255, 0.7);
  justify-content: flex-end;
}

.message-state { font-family: var(--font-mono); font-size: 11px; }
.message-state.pending   { color: var(--text-muted); }
.message-state.sending   { color: var(--accent); }
.message-state.sent      { color: var(--text-muted); }
.message-state.delivered { color: var(--accent); }
.message-state.failed    { color: var(--err); cursor: help; }
.message.outgoing .message-state.pending,
.message.outgoing .message-state.sent    { color: rgba(255, 255, 255, 0.6); }
.message.outgoing .message-state.sending,
.message.outgoing .message-state.delivered { color: rgba(255, 255, 255, 0.95); }

.rx-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 4px;
}
.message.incoming .rx-meta { color: var(--text-muted); }

/* Tap-back reactions (SPEC §5.9.8) — small chips under the bubble. */
.reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 11px;
  background: var(--bg);
  border: 0.5px solid var(--border);
  color: var(--text);
}
.message.outgoing .reaction-chip {
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.95);
}

/* Tap-back "react" and "reply" affordances — sit just outside the bubble's
   edge. Hover-revealed on pointer devices; always faintly visible on touch. */
.react-btn,
.reply-btn {
  position: absolute;
  top: 50%;
  right: -30px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  border: 0.5px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease;
}
.message:hover .react-btn,
.message:hover .reply-btn { opacity: 1; }
.react-btn:hover,
.reply-btn:hover { background: var(--surface-hover); color: var(--text); }
@media (hover: none) {
  .react-btn, .reply-btn { opacity: 0.55; }
}
/* Incoming bubbles show both buttons off the right edge (react then reply);
   outgoing bubbles are right-aligned, so reply hangs off the LEFT edge. */
.message.incoming .reply-btn { right: -58px; }
.message.outgoing .reply-btn { right: auto; left: -30px; }

/* Reply-quote preview at the top of a reply bubble (SPEC §5.9.9). */
.reply-quote {
  display: block;
  padding: 3px 8px;
  margin-bottom: 5px;
  border-left: 2px solid var(--accent);
  border-radius: 4px;
  background: rgba(127, 127, 127, 0.12);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
  overflow: hidden;
}
.reply-quote-name {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
}
.message.outgoing .reply-quote {
  border-left-color: rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.8);
}
.message.outgoing .reply-quote-name { color: rgba(255, 255, 255, 0.95); }

/* "Replying to …" banner between the message list and the composer. */
.reply-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-top: 0.5px solid var(--border);
  background: var(--surface-2);
  font-size: 12px;
  color: var(--text-muted);
}
.reply-banner-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reply-cancel {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
}
.reply-cancel:hover { color: var(--text); }

/* Floating emoji picker: a quick row (recently used first) on top of an
   extended grid — the web stand-in for the mobile app's "＋" overflow
   into the full system picker. */
.reaction-picker {
  position: fixed;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  padding: 4px 6px;
  background: var(--surface-2);
  border: 0.5px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.reaction-quick-row {
  display: flex;
  gap: 2px;
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 0.5px solid var(--border);
}
.reaction-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  max-height: 176px;
  overflow-y: auto;
}
.reaction-pick {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 4px;
  border-radius: 50%;
  transition: transform 0.1s ease, background 0.1s ease;
}
.reaction-pick:hover {
  background: var(--surface-hover);
  transform: scale(1.2);
}

/* Compose */

.compose {
  padding: 14px 18px;
  border-top: 0.5px solid var(--border);
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: var(--surface-2);
}
[data-theme="dark"] .compose { background: var(--surface); }

.compose textarea {
  flex: 1;
  min-height: 38px;
  max-height: 120px;
  padding: 9px 14px;
  border: 0.5px solid var(--border-strong);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  resize: none;
  outline: none;
  line-height: 1.4;
}
[data-theme="dark"] .compose textarea { background: var(--surface-2); }
.compose textarea:focus { border-color: var(--accent); }

.send-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.send-btn:hover { background: var(--accent-hi); }
.send-btn svg { width: 14px; height: 14px; }

/* Right panel */

.right-panel {
  width: 240px;
  flex-shrink: 0;
  background: var(--surface);
  border-left: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.rp-section {
  padding: 16px 18px;
  border-bottom: 0.5px solid var(--border);
}

.rp-title {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
}

.rp-identity {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}
.rp-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.rp-hash {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  margin-top: 2px;
  word-break: break-all;
}

.rp-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 12px;
  color: var(--text-2);
}

.rp-val-muted { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; }

.conn-pill-rp { padding: 2px 8px; }

/* ================= Nodes view ================= */

.view-nodes {
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}

.nodes-layout {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.nodes-map-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  padding: 16px 24px 16px 16px;
}

.nodes-map {
  flex: 1;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-hover);
  position: relative;
  overflow: hidden;
  min-height: 300px;
}
[data-theme="dark"] .nodes-map { background: var(--surface); }

.nodes-map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 12px;
  padding: 20px;
  text-align: center;
  pointer-events: none;
}
/* Hide the placeholder once Leaflet has taken over the container. */
.nodes-map.leaflet-container .nodes-map-placeholder { display: none; }

.nodes-sidebar {
  width: 320px;
  flex-shrink: 0;
  border-right: 0.5px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.nodes-sidebar-header {
  padding: 14px 18px 10px;
  border-bottom: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nodes-list {
  padding: 14px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  flex: 1;
}

.nodes-empty {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 40px 20px;
  line-height: 1.6;
}

/* Footer note when the Nodes list is capped (see NODE_RENDER_CAP). */
.nodes-more {
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  padding: 12px 20px;
}

/* Leaflet popup theming — match the app's card look in both modes. */
.leaflet-popup-content-wrapper {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}
[data-theme="dark"] .leaflet-popup-content-wrapper { background: var(--surface) !important; }
.leaflet-popup-tip {
  background: var(--surface-2) !important;
}
[data-theme="dark"] .leaflet-popup-tip { background: var(--surface) !important; }
.leaflet-popup-content {
  font-family: var(--font-sans);
  font-size: 12px;
  margin: 10px 14px !important;
  line-height: 1.5;
}
.leaflet-popup-content strong { color: var(--text); }
.leaflet-popup-content code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  background: var(--surface-hover);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}
.leaflet-popup-content .popup-kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
  font-size: 11px;
  color: var(--text-2);
  font-family: var(--font-mono);
}
.leaflet-popup-content .popup-kv-key { color: var(--text-muted); }
.leaflet-popup-content .popup-title {
  font-weight: 500;
  color: var(--text);
  font-size: 13px;
  margin-bottom: 4px;
}
.leaflet-popup-content .popup-sub {
  color: var(--text-muted);
  font-size: 11px;
  font-family: var(--font-mono);
  margin-bottom: 8px;
  word-break: break-all;
}
.leaflet-popup-close-button { color: var(--text-muted) !important; }

/* Node rows highlight when the matching marker is active. */
.node-row.highlighted {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.node-row {
  cursor: pointer;
}

.node-geo-dot {
  color: var(--accent);
  font-size: 10px;
  margin-left: 6px;
  vertical-align: middle;
}

.message-empty {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 40px 0;
}

.node-row {
  background: var(--surface-2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .node-row { background: var(--surface); }

.node-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.node-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  word-break: break-word;
  flex: 1;
  min-width: 0;
}

.node-meta {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.node-meta code {
  font-family: var(--font-mono);
  color: var(--text-2);
}

.node-delete {
  background: transparent;
  border: 0.5px solid var(--border);
  color: var(--text-muted);
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.node-delete:hover {
  background: var(--err-bg);
  color: var(--err);
  border-color: var(--err);
}

/* ================= Settings view ================= */

.view-settings {
  flex-direction: column;
  overflow-y: auto;
  background: var(--bg);
}

.view-settings .view-header { border-bottom: none; padding-bottom: 6px; }

.view-settings > .notice,
.view-settings > .settings-card {
  margin: 10px 24px;
}
.view-settings > .settings-card:first-of-type { margin-top: 6px; }
.view-settings > .settings-card:last-child { margin-bottom: 32px; }

.settings-card {
  background: var(--surface-2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .settings-card { background: var(--surface); }

.settings-card-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

details.settings-card {
  padding: 0;
}
details.settings-card > summary {
  padding: 18px 20px;
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
details.settings-card > summary::-webkit-details-marker { display: none; }
details.settings-card > summary::after {
  content: "▸";
  float: right;
  color: var(--text-muted);
  transition: transform 0.15s;
  display: inline-block;
}
details.settings-card[open] > summary::after { transform: rotate(90deg); }
details.settings-card[open] > summary { border-bottom: 0.5px solid var(--border); }
details.settings-card > *:not(summary) { padding: 16px 20px 20px; }
details.settings-card > .help-content { padding-top: 6px; }

.settings-card-hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 14px;
}
.settings-card-hint code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--surface-hover);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
}

.status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-2);
  padding: 8px 0;
  margin-bottom: 10px;
  border-bottom: 0.5px solid var(--border);
}
.status-line-sep {
  width: 1px;
  height: 10px;
  background: var(--border-strong);
  margin: 0 4px;
}
.status-muted { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; }

/* Form layout */

.row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 12px;
}
.row:first-of-type { margin-top: 0; }

.field { flex: 1 1 140px; min-width: 120px; }
.field.narrow { flex: 0 0 110px; }
.field.wide { flex: 2 1 280px; }

/* rnsd target input + "pick another public hub" shuffle button. */
.hub-row { display: flex; gap: 6px; align-items: stretch; }
.hub-row input { flex: 1 1 auto; min-width: 0; }
.hub-shuffle {
  flex: 0 0 auto;
  width: 38px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.hub-shuffle:hover { background: var(--surface-hover); }

label {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 5px;
}

input[type="text"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 9px 11px;
  background: var(--surface);
  color: var(--text);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 13px;
  outline: none;
  transition: border-color 0.1s;
}
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--surface-2);
}
input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
}

.identity-hash-box {
  width: 100%;
  padding: 10px 12px;
  background: var(--accent-bg);
  color: var(--accent-text-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 12px;
  word-break: break-all;
  user-select: all;
}
[data-theme="dark"] .identity-hash-box {
  color: var(--accent-text);
}

/* Buttons */

.btn-primary {
  background: var(--accent);
  color: var(--accent-bg);
  border-radius: var(--radius-md);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.1s;
}
.btn-primary:hover { background: var(--accent-hi); }
.btn-primary:disabled { background: var(--border-strong); color: var(--text-muted); cursor: not-allowed; }

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.1s;
}
.btn-secondary:hover { background: var(--surface-hover); }
.btn-secondary:disabled { color: var(--text-muted); cursor: not-allowed; }
[data-theme="dark"] .btn-secondary { background: var(--surface-2); }
[data-theme="dark"] .btn-secondary:hover { background: var(--surface-hover); }

.btn-danger { color: var(--err); border-color: var(--err); }
.btn-danger:hover { background: var(--err-bg); }

.btn-block { width: 100%; }

/* Segmented control (theme selector) */

.theme-row { align-items: center; }
.theme-row-label {
  font-size: 13px;
  color: var(--text-2);
  flex: 0 0 80px;
}

.seg-control {
  display: inline-flex;
  background: var(--surface);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}
[data-theme="dark"] .seg-control { background: var(--surface-2); }

.seg-btn {
  padding: 7px 14px;
  font-size: 12px;
  color: var(--text-2);
  border-right: 0.5px solid var(--border);
}
.seg-btn:last-child { border-right: none; }
.seg-btn:hover { background: var(--surface-hover); }
.seg-btn.active {
  background: var(--accent);
  color: var(--accent-bg);
}

/* Log panel (always dark) */

.log-card { }
#log {
  background: var(--log-bg);
  color: var(--log-text);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.5;
  margin-top: 8px;
}
#log .ok   { color: var(--log-ok); }
#log .err  { color: var(--log-err); }
#log .info { color: var(--log-info); }
#log .rx   { color: var(--log-hex); }
#log .hex  { color: var(--log-hex); }

.log-controls { padding-bottom: 0 !important; }

/* About card */

.about-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 12px;
  color: var(--text-2);
}
.about-label { color: var(--text-muted); }
.version {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  padding: 3px 8px;
  background: var(--surface-hover);
  border-radius: var(--radius-sm);
}
.version-sha { color: var(--accent); text-decoration: none; margin-left: 4px; }
.version-sha::before { content: "\00B7\0020"; }
.version-sha:hover { text-decoration: underline; }

/* ================= Help content ================= */

.help-content {
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
}
.help-content h4 {
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 16px 0 6px 0;
}
.help-content h4:first-of-type { margin-top: 0; }
.help-content p { margin: 6px 0 10px 0; }
.help-content ul { margin: 6px 0 10px 0; padding-left: 22px; }
.help-content ul li { margin: 4px 0; }
.help-content code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface-hover);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  color: var(--text);
}
.help-content .state-legend { list-style: none; padding-left: 0; }
.help-content .state-legend li { padding: 4px 0; }
.help-content .state-legend .message-state {
  display: inline-block;
  width: 26px;
  text-align: center;
}

/* ================= Notice ================= */

.notice {
  background: var(--warn-bg);
  border-left: 3px solid var(--warn);
  padding: 11px 15px;
  font-size: 13px;
  color: var(--text);
  border-radius: var(--radius-md);
}
.notice.err {
  background: var(--err-bg);
  border-left-color: var(--err);
}
.notice code {
  font-family: var(--font-mono);
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}

/* ================= Scroll hint (mobile) ================= */

/* Shown at the top of the viewport on narrow screens to prompt the
   user to scroll — on phones, the browser's URL bar takes up
   viewport height until the user scrolls for the first time, and
   that can push the compose box below the fold. Hidden on desktop
   and removed by JS once the user scrolls or after a short timeout. */

.scroll-hint {
  display: none;
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  background: var(--accent);
  color: var(--accent-bg);
  font-size: 11px;
  font-weight: 500;
  padding: 7px 12px 7px 10px;
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  align-items: center;
  gap: 6px;
  pointer-events: none;
  animation: scroll-hint-bob 1.6s ease-in-out infinite;
}
.scroll-hint svg { width: 13px; height: 13px; flex-shrink: 0; }
.scroll-hint.dismissed {
  opacity: 0;
  transition: opacity 0.3s ease;
}

@keyframes scroll-hint-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 3px); }
}

/* ================= Bottom nav (mobile) ================= */

.bottomnav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--surface);
  border-top: 0.5px solid var(--border);
  height: 56px;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  color: var(--text-muted);
  padding: 6px 4px;
}
.bn-item svg { width: 20px; height: 20px; }
.bn-item.active { color: var(--accent); }

/* ================= Helpers ================= */

.hidden { display: none !important; }

/* ================= Responsive ================= */

/* Tablet: shrink right panel, narrower sidebar */
@media (max-width: 1100px) {
  .right-panel { width: 200px; }
  .list-panel  { width: 240px; }
}

/* Mobile */
@media (max-width: 800px) {
  .sidebar { display: none; }
  .bottomnav { display: flex; }
  .scroll-hint { display: inline-flex; }
  .main { padding-bottom: 56px; }

  .view-messages { flex-direction: column; }

  .list-panel { width: 100%; border-right: none; border-bottom: 0.5px solid var(--border); }
  .right-panel { display: none; }

  .back-btn { display: flex; }

  /* Mobile connect hero: only appears on mobile, and only when the
     quick-connect buttons are still visible (i.e., nothing has hidden
     them — we're disconnected). Uses :has() to read the same state
     the sidebar quick-connect uses. */
  .mobile-connect-hero:has(.js-connect-btn:not(.hidden)) { display: block; }
  .mobile-connect-hero:has(.js-connect-btn.hidden) { display: none; }

  /* Use :has() to swap between list and chat on mobile.
     When a contact is selected (compose-area unhidden), show the chat
     and hide the list. Falls back gracefully if :has() is unsupported:
     user sees both stacked. */
  .view-messages:has(#compose-area:not(.hidden)) .list-panel { display: none; }
  .view-messages:has(#compose-area.hidden) .chat-area { display: none; }

  .view-header { padding: 16px 58px 10px 18px; }
  .view-settings > .settings-card,
  .view-settings > .notice { margin: 8px 16px; }

  .nodes-layout { flex-direction: column; }
  .nodes-map-wrap { padding: 12px 16px 16px; }
  .nodes-map { min-height: 260px; }
  .nodes-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 0.5px solid var(--border);
    max-height: 45vh;
  }
  .nodes-list { padding: 12px 16px 24px; }

  .message { max-width: 80%; }
}

/* Very small: tighten some paddings */
@media (max-width: 400px) {
  .chat-header { padding: 12px 14px; }
  .compose { padding: 10px 12px; }
  .message-list { padding: 14px; }
}

/* ---- NomadNet browser ---------------------------------------------- */

.view-nomadnet { flex-direction: column; }

.nn-toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 10px 58px 10px 12px;  /* extra right pad clears the fixed destruct button */
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.nn-toolbar .btn-icon {
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
}
.nn-toolbar .btn-icon:disabled { opacity: 0.4; cursor: default; }
.nn-toolbar .btn-icon:not(:disabled):hover { background: var(--surface-hover); }
.nn-address {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

.nn-body { flex: 1 1 auto; display: flex; min-height: 0; }
.nn-sidebar {
  flex: 0 0 auto;
  width: 340px;
  min-width: 120px;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--surface);
  padding: 8px;
  min-height: 0;
  /* Drag the right edge to widen/narrow the node list. resize needs a
     non-visible overflow to render the grip; the inner list keeps its
     own vertical scroll. */
  resize: horizontal;
  overflow: hidden;
}
.nn-nodes-list { overflow-y: auto; flex: 1 1 auto; min-height: 0; }

/* Shared filter input for the Nodes and NomadNet sidebars. */
.list-search {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  margin-bottom: 8px;
}
.list-search::placeholder { color: var(--text-muted); }
.nn-side-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 10px 4px 4px;
}
.nn-side-empty { color: var(--text-muted); font-size: 12px; padding: 2px 4px; }
.nn-side-row {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 8px; border-radius: 6px; cursor: pointer;
}
.nn-side-row:hover { background: var(--surface-hover); }
.nn-side-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nn-side-hash { color: var(--text-muted); font-family: ui-monospace, monospace; font-size: 11px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.nn-side-del { border: none; background: none; color: var(--text-muted); cursor: pointer; }

.nn-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.nn-status {
  padding: 6px 14px; font-size: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
}
.nn-status-err { color: var(--err); background: var(--err-bg); }
.nn-status-ok { color: var(--accent-text); }

.nn-page {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 20px;
  background: var(--surface-2);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  line-height: 1.5;
}

/* micron rendering */
.mu-line { white-space: pre-wrap; word-break: break-word; }
.mu-center { text-align: center; }
.mu-right { text-align: right; }
.mu-h { font-weight: 700; margin: 0.5em 0 0.2em; }
.mu-h1 { font-size: 1.5em; }
.mu-h2 { font-size: 1.3em; }
.mu-h3 { font-size: 1.12em; }
.mu-b { font-weight: 700; }
.mu-i { font-style: italic; }
.mu-u { text-decoration: underline; }
.mu-hr { border: none; border-top: 1px solid var(--border-strong); margin: 0.6em 0; }
.mu-literal { white-space: pre-wrap; color: var(--text-2); }
.mu-partial { color: var(--text-muted); font-style: italic; }
.mu-link { color: var(--accent-text); text-decoration: underline; cursor: pointer; }
.mu-link:hover { color: var(--accent-hi); }

/* NomadNet micron input-field widgets. */
.mu-field-text {
  display: inline-block;
  padding: 2px 6px;
  margin: 1px 2px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  vertical-align: baseline;
}
.mu-field-text:focus { outline: none; border-color: var(--accent); }
.mu-checkbox, .mu-radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 1px 6px 1px 2px;
  cursor: pointer;
}
.mu-checkbox input, .mu-radio input { cursor: pointer; margin: 0; accent-color: var(--accent); }

/* NomadNet micron tables. */
.mu-table {
  border-collapse: collapse;
  margin: 6px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}
.mu-table-center { margin-left: auto; margin-right: auto; }
.mu-table-right { margin-left: auto; }
.mu-table th, .mu-table td {
  border: 1px solid var(--border-strong);
  padding: 3px 8px;
  text-align: left;
  vertical-align: top;
}
.mu-table th { background: var(--surface-2); font-weight: 600; }
.mu-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }

@media (max-width: 720px) {
  .nn-sidebar { display: none; }
}

/* ---- Modal (bridge-not-running helper) ----------------------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
}
.modal-overlay.hidden { display: none; }
.modal {
  width: 100%;
  max-width: 460px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.modal-title { margin: 0 0 8px; font-size: 18px; }
.modal-text { margin: 0 0 14px; color: var(--text-2); line-height: 1.5; }
.modal-text code, .modal-steps code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--surface-hover);
  padding: 1px 5px;
  border-radius: 4px;
}
.modal-steps {
  margin: 0 0 16px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.45;
}
.modal-steps a.btn-primary { display: inline-block; text-decoration: none; }
.modal-hint { display: block; color: var(--text-muted); font-size: 12px; margin-top: 3px; }
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.modal-link { color: var(--accent-text); font-size: 12px; }
.modal-buttons { display: flex; gap: 8px; }

/* ---- Messages/Nodes redesign (reticulum-mobile-app parity) ---------- */

/* Hash-seeded avatars get light text regardless of the inline bg color. */
.contact-avatar, .node-avatar, .dest-avatar { color: #fff; }

.contact-main { cursor: pointer; }
.contact-star { color: var(--accent); font-size: 11px; }
.contact-info-btn {
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px; line-height: 1; padding: 0;
  flex-shrink: 0; cursor: pointer;
}
.contact-info-btn:hover { color: var(--text); background: var(--surface-hover); }

/* Nodes filter chips */
.node-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 4px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px; cursor: pointer;
}
.chip:hover { background: var(--surface-hover); }
.chip.active { background: var(--accent-bg); color: var(--accent-text); border-color: var(--accent); }

/* Unified node rows */
.node-row-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.node-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; flex-shrink: 0; text-transform: uppercase;
}
.node-chevron { color: var(--text-muted); font-size: 18px; flex-shrink: 0; }

/* Destination detail sheet */
.dest-sheet { max-width: 440px; }
.dest-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dest-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; flex-shrink: 0; text-transform: uppercase;
}
.dest-headtext { min-width: 0; }
.dest-name { font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.dest-sub { font-size: 12px; color: var(--text-muted); }
.dest-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.dest-actions button { flex: 1 1 auto; }
.dest-hashrow {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; padding: 10px 0; border-top: 1px solid var(--border);
}
.dest-hashrow code { font-size: 11px; word-break: break-all; color: var(--text); font-family: var(--font-mono); }
.dest-fact-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; }
.dest-copy {
  flex-shrink: 0; width: 30px; height: 30px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-2); color: var(--text-2);
  cursor: pointer; font-size: 14px;
}
.dest-copy:hover { background: var(--surface-hover); color: var(--text); }
.dest-facts { padding: 6px 0; border-top: 1px solid var(--border); }
.dest-fact { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 3px 0; }
.dest-fact span:first-child { color: var(--text-muted); }
.dest-fact span:last-child { color: var(--text); text-align: right; word-break: break-word; }

/* ---- Add / share contact modal ------------------------------------- */
.view-header-actions { display: flex; gap: 8px; align-items: center; }
.add-input {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-mono); font-size: 12px;
  padding: 9px 11px; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--surface-2); color: var(--text);
  resize: vertical; margin-bottom: 8px;
}
.add-video {
  width: 100%; max-height: 240px; border-radius: 8px;
  background: #000; margin-bottom: 8px; object-fit: cover;
}
.add-mycard {
  display: block; width: 100%; box-sizing: border-box;
  font-family: var(--font-mono); font-size: 11px; word-break: break-all;
  background: var(--surface-hover); color: var(--text);
  padding: 8px 10px; border-radius: 6px; margin: 4px 0 8px;
  max-height: 90px; overflow-y: auto;
}
.modal-hint.ok { color: var(--accent-text); }
.modal-hint.err { color: var(--err); }

/* ---- Message attachments ------------------------------------------- */
.attach-btn {
  flex: 0 0 auto;
  background: none; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 6px;
  color: var(--text-2); align-self: flex-end;
}
.attach-btn:hover { color: var(--text); }
.att-image-link { display: block; }
.att-image {
  max-width: 220px; max-height: 220px;
  border-radius: 10px; display: block; margin-bottom: 4px;
  object-fit: cover; cursor: pointer;
}
.att-audio { display: block; width: 220px; margin-bottom: 4px; }
.att-file {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; margin-bottom: 4px;
  background: var(--surface-hover); border-radius: 10px;
  color: var(--text); text-decoration: none; font-size: 13px;
}
.att-file:hover { background: var(--surface-2); }
.att-size { color: var(--text-muted); font-size: 11px; }
.message.outgoing .att-file { background: rgba(255,255,255,0.18); color: var(--bubble-out-text); }

/* ---- Staged attachment (pending in the composer) ------------------- */
.compose { flex-wrap: wrap; }
.staged-attachment {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin-bottom: 6px;
  background: var(--surface-hover);
  border-radius: 8px;
  font-size: 12px;
}
.staged-thumb { width: 32px; height: 32px; border-radius: 5px; object-fit: cover; flex: 0 0 auto; }
.staged-icon { font-size: 18px; }
.staged-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staged-size { color: var(--text-muted); flex: 0 0 auto; }
.staged-remove {
  flex: 0 0 auto; border: none; background: none; cursor: pointer;
  color: var(--text-muted); font-size: 16px; line-height: 1; padding: 0 4px;
}
.staged-remove:hover { color: var(--err); }

/* ---- Destruct (panic wipe) ----------------------------------------- */

/* Fixed top-right "fire" button, visible on every view. */
.destruct-btn {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 900;
  width: 40px;
  height: 40px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.destruct-btn:hover {
  transform: scale(1.08);
  background: var(--surface-2);
  box-shadow: 0 4px 14px rgba(255, 90, 0, 0.35);
}
.destruct-btn:active { transform: scale(0.96); }
.destruct-flame {
  width: 100%;
  height: 100%;
  overflow: visible;
  /* Static glow only — painted once and cached. Do NOT animate anything
     underneath this filter: a transform animating inside a filtered SVG
     forces a full filter re-rasterization on the main thread every frame,
     which runs forever and inflates input latency app-wide (sluggish
     typing). The flame comes alive on hover instead (DuckDuckGo-style). */
  filter: drop-shadow(0 0 2px rgba(255, 120, 0, 0.7));
}
.destruct-flame .flame-path { transform-origin: 50% 95%; }
/* Animate only while hovered — the cost is paid only during interaction,
   never while the user is typing elsewhere. */
.destruct-btn:hover .flame-path {
  animation: destruct-flicker 0.55s ease-in-out infinite;
}
@keyframes destruct-flicker {
  0%, 100% { transform: scaleY(1) scaleX(1) rotate(0deg); opacity: 1; }
  25%      { transform: scaleY(1.1) scaleX(0.94) rotate(-1.5deg); opacity: 0.92; }
  55%      { transform: scaleY(0.95) scaleX(1.05) rotate(1.5deg); opacity: 1; }
  80%      { transform: scaleY(1.07) scaleX(0.97) rotate(-0.5deg); opacity: 0.96; }
}

/* Danger button (used in the confirm dialog). */
.btn-danger {
  padding: 9px 16px;
  border: none;
  border-radius: 8px;
  background: #c0392b;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease;
}
.btn-danger:hover { background: #a93226; }

/* Confirm dialog. */
.destruct-modal { text-align: center; }
.destruct-modal-icon { font-size: 40px; line-height: 1; margin-bottom: 6px; }
.destruct-modal .modal-text { text-align: left; }

/* Full-screen flame sweep played during the wipe. Pointer-events off so it
   never blocks the reload; it lives above everything (modals included). */
.destruct-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  overflow: hidden;
  animation: destruct-scorch 1.3s ease-in forwards;
}
@keyframes destruct-scorch {
  0%   { background: rgba(20, 0, 0, 0); }
  70%  { background: rgba(20, 0, 0, 0.35); }
  100% { background: rgba(10, 0, 0, 0.97); }
}
.destruct-flames {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  top: 100%;
  background:
    radial-gradient(55% 80% at 18% 100%, #ffe070 0%, #ff8a00 32%, #ff2d00 58%, transparent 76%),
    radial-gradient(60% 95% at 50% 100%, #fff3a0 0%, #ffb300 28%, #ff4d00 54%, transparent 74%),
    radial-gradient(55% 80% at 82% 100%, #ffe070 0%, #ff8a00 32%, #ff2d00 58%, transparent 76%);
  filter: blur(6px) saturate(1.35);
  animation:
    destruct-rise 1.2s cubic-bezier(0.4, 0.75, 0.4, 1) forwards,
    destruct-lick 0.13s steps(2, end) infinite;
}
@keyframes destruct-rise {
  0%   { top: 100%; }
  62%  { top: -12%; }
  100% { top: -45%; opacity: 1; }
}
@keyframes destruct-lick {
  0%   { transform: scaleX(1)    translateY(0); }
  100% { transform: scaleX(1.05) translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .destruct-btn:hover .flame-path { animation: none; }
  .destruct-flames { animation: destruct-rise 0.6s ease-out forwards; }
}