@font-face {
  font-family: 'Monaspace Argon';
  src:
    url('./fonts/MonaspaceArgon.woff2') format('woff2'),
    url('./fonts/MonaspaceArgon.woff') format('woff'),
    url('./fonts/MonaspaceArgon.ttf') format('truetype');
  font-weight: 200 800;
  font-stretch: 100% 125%;
  font-style: oblique -11deg 0deg;
  font-display: swap;
}

@font-face {
  font-family: 'Monaspace Krypton';
  src:
    url('./fonts/MonaspaceKrypton.woff2') format('woff2'),
    url('./fonts/MonaspaceKrypton.woff') format('woff'),
    url('./fonts/MonaspaceKrypton.ttf') format('truetype');
  font-weight: 200 800;
  font-stretch: 100% 125%;
  font-style: oblique -11deg 0deg;
  font-display: swap;
}

@font-face {
  font-family: 'Monaspace Neon';
  src:
    url('./fonts/MonaspaceNeon.woff2') format('woff2'),
    url('./fonts/MonaspaceNeon.woff') format('woff'),
    url('./fonts/MonaspaceNeon.ttf') format('truetype');
  font-weight: 200 800;
  font-stretch: 100% 125%;
  font-style: oblique -11deg 0deg;
  font-display: swap;
}

@font-face {
  font-family: 'Monaspace Radon';
  src:
    url('./fonts/MonaspaceRadon.woff2') format('woff2'),
    url('./fonts/MonaspaceRadon.woff') format('woff'),
    url('./fonts/MonaspaceRadon.ttf') format('truetype');
  font-weight: 200 800;
  font-stretch: 100% 125%;
  font-style: oblique -11deg 0deg;
  font-display: swap;
}

@font-face {
  font-family: 'Monaspace Xenon';
  src:
    url('./fonts/MonaspaceXenon.woff2') format('woff2'),
    url('./fonts/MonaspaceXenon.woff') format('woff'),
    url('./fonts/MonaspaceXenon.ttf') format('truetype');
  font-weight: 200 800;
  font-stretch: 100% 125%;
  font-style: oblique -11deg 0deg;
  font-display: swap;
}

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

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

.hidden {
  display: none !important;
}

/* Inline SVG icons (replaces the old icon font). Sized in em so they
   track the surrounding text; stroke uses currentColor so they inherit
   the text color of their context. */
.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.125em;
}

:root {
  --bg: #0a0a0a;
  --fg: #33ff99;
  --fg-dim: #1a9956;
  --accent: #5b9fc9;
  --card-bg: #111;
  --border: #222;
  /* Message bubble tints derive from the active theme so they re-tint
     automatically: self picks up --fg, other picks up --accent. */
  --self-bg: color-mix(in srgb, var(--fg) 8%, var(--bg));
  --other-bg: color-mix(in srgb, var(--accent) 8%, var(--bg));
  --font-primary: 'Monaspace Radon', ui-monospace, monospace;
  --font-weight-xlight: 200;
  --font-weight-light: 300;
  --font-weight-book: 350;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-xbold: 750;
  --font-weight-heavy: 800;
}

[data-theme='amber'] {
  --fg: #ffb000;
  --fg-dim: #996600;
  --accent: #5bbfc9;
}

[data-theme='cyan'] {
  --fg: #33ccff;
  --fg-dim: #1a6699;
  --accent: #c95b9f;
}

[data-theme='pink'] {
  --fg: #ff66cc;
  --fg-dim: #99336b;
  --accent: #5bc9bf;
}

[data-theme='red'] {
  --fg: #ff4444;
  --fg-dim: #992626;
  --accent: #c9a05b;
}

[data-theme='paper'] {
  --fg: #e8e8e8;
  --fg-dim: #888888;
  --accent: #5b9fc9;
}

[data-theme='purple'] {
  --fg: #cc99ff;
  --fg-dim: #663d99;
  --accent: #5bc97f;
}

[data-font='argon'] {
  --font-primary: 'Monaspace Argon', ui-monospace, monospace;
}

[data-font='krypton'] {
  --font-primary: 'Monaspace Krypton', ui-monospace, monospace;
}

[data-font='neon'] {
  --font-primary: 'Monaspace Neon', ui-monospace, monospace;
}

[data-font='xenon'] {
  --font-primary: 'Monaspace Xenon', ui-monospace, monospace;
}

body {
  font-family: var(--font-primary);
  font-weight: 350;
  background: var(--bg);
  color: var(--fg);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}

/* --- Auth Screen (terminal window) --- */

#auth-screen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  overflow-y: auto;
  padding: 24px 0 calc(68px + env(safe-area-inset-bottom));
  /* warm halo behind the window, tinted by the active accent (tracks all themes) */
  background: radial-gradient(
    130% 100% at 50% -10%,
    color-mix(in srgb, var(--fg) 7%, var(--bg)) 0%,
    var(--bg) 62%
  );
}

#auth-box {
  width: 340px;
  max-width: calc(100vw - 32px);
  text-align: left;
}

/* title bar */
#auth-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0e0e0e;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 9px 9px 0 0;
  padding: 9px 13px;
}

.auth-dots {
  display: flex;
  gap: 6px;
}

.auth-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--fg-dim);
}

.auth-dot:nth-child(1) {
  opacity: 0.55;
}
.auth-dot:nth-child(2) {
  opacity: 0.8;
}
.auth-dot:nth-child(3) {
  background: var(--fg);
}

#auth-titletext {
  font-size: 0.76rem;
  color: #5a5a5a;
  letter-spacing: 0.5px;
}

#auth-path {
  color: var(--fg-dim);
}

/* body */
#auth-body {
  background: #080808;
  border: 1px solid var(--border);
  border-radius: 0 0 9px 9px;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

/* boot / greeting line */
#auth-boot {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--fg-dim);
}

#auth-boot .boot-cmd,
#auth-boot .boot-status {
  color: var(--fg);
}

#auth-boot .boot-greeting {
  color: #555;
}

/* command switcher (restyled #auth-tabs) */
#auth-tabs {
  display: flex;
  gap: 8px;
}

#auth-tabs .tab {
  background: none;
  border: none;
  color: #555;
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 2px 0;
  transition: color 0.15s;
}

/* bracket the labels: [ logga in ] */
#auth-tabs .tab::before {
  content: "[ ";
  color: #333;
}
#auth-tabs .tab::after {
  content: " ]";
  color: #333;
}

#auth-tabs .tab.active {
  color: var(--fg);
}
#auth-tabs .tab.active::before,
#auth-tabs .tab.active::after {
  color: var(--fg-dim);
}

#auth-tabs .tab:hover:not(.active) {
  color: var(--fg-dim);
}

#auth-tabs .tab:focus-visible {
  outline: 1px solid var(--fg-dim);
  outline-offset: 2px;
}

/* forms */
#login-form,
#signup-form,
#forgot-form,
#reset-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* field row: > prefix + input */
.field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #101010;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 12px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.field-row .field-prefix {
  color: var(--fg-dim);
  font-size: 0.85rem;
}

.field-row input {
  flex: 1;
  background: none;
  border: none;
  color: var(--fg);
  padding: 11px 0;
  font-family: inherit;
  font-size: 0.85rem;
  outline: none;
}

.field-row input::placeholder {
  color: #383838;
}

/* Browsers (WebKit/Blink) force a light background + dark text on autofilled
   fields, which looks white against the dark form. background-color can't be
   overridden directly, so paint over it with an inset box-shadow and keep our
   own text color. The long transition delay stops the native colour from
   flashing in before ours applies. */
.field-row input:-webkit-autofill,
.field-row input:-webkit-autofill:hover,
.field-row input:-webkit-autofill:focus,
.field-row input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--fg);
  caret-color: var(--fg);
  -webkit-box-shadow: 0 0 0 1000px #101010 inset;
  box-shadow: 0 0 0 1000px #101010 inset;
  transition: background-color 100000s ease-in-out 0s;
}

/* focus moves to the wrapper via :focus-within */
.field-row:focus-within {
  border-color: var(--fg-dim);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 10%, transparent);
}

/* submit buttons */
#login-form button[type="submit"],
#signup-form button[type="submit"],
#forgot-form button[type="submit"],
#reset-form button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--fg-dim);
  color: var(--bg);
  border: none;
  padding: 11px 18px;
  font-family: inherit;
  font-weight: 550;
  font-size: 0.78rem;
  letter-spacing: 1px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

#login-form button[type="submit"]:hover,
#signup-form button[type="submit"]:hover,
#forgot-form button[type="submit"]:hover,
#reset-form button[type="submit"]:hover {
  background: var(--fg);
}

#login-form button[type="submit"]:focus-visible,
#signup-form button[type="submit"]:focus-visible,
#forgot-form button[type="submit"]:focus-visible,
#reset-form button[type="submit"]:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 2px;
}

/* sub-links */
#forgot-link,
#forgot-back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--fg-dim);
  font-size: 0.78rem;
  text-decoration: none;
  transition: color 0.15s;
  margin-top: 2px;
}

#forgot-link:hover,
#forgot-back-link:hover {
  color: var(--fg);
}

#forgot-link:focus-visible,
#forgot-back-link:focus-visible {
  outline: 1px solid var(--fg-dim);
  outline-offset: 2px;
  border-radius: 2px;
}

/* error / success */
#auth-error {
  color: #ff5555;
  font-size: 0.78rem;
  line-height: 1.4;
}

#auth-error.success {
  color: var(--fg);
}

/* footer (pinned bottom) */
#auth-footer {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #2a2a2a;
}

#auth-footer a {
  color: #444;
  text-decoration: none;
  transition: color 0.15s;
}

#auth-footer a:hover {
  color: var(--fg-dim);
}

/* blinking cursor on the focused field's prefix */
.field-row:focus-within .field-prefix {
  animation: auth-blink 1.1s steps(1, end) infinite;
}

@keyframes auth-blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .field-row:focus-within .field-prefix {
    animation: none;
  }
}

#font-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

#font-picker .font-btn {
  width: 40px;
  height: 35px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: none;
  color: var(--fg-dim);
  font-size: 1.05rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s,
    transform 0.15s;
}

#font-picker .font-btn:hover {
  color: var(--fg);
  transform: scale(1.05);
}

#font-picker .font-btn.active {
  color: var(--fg);
  border-color: var(--fg-dim);
  box-shadow: 0 0 0 1px var(--fg-dim);
}

#theme-picker {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

#theme-picker .swatch {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--swatch);
  cursor: pointer;
  opacity: 0.55;
  transition:
    opacity 0.15s,
    transform 0.15s,
    border-color 0.15s;
}

#theme-picker .swatch:hover {
  opacity: 1;
  transform: scale(1.1);
}

#theme-picker .swatch.active {
  opacity: 1;
  border-color: var(--swatch);
  box-shadow: 0 0 0 1px var(--swatch);
}

#sidebar-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #2a2a2a;
  background: none;
}

#sidebar-footer a {
  color: #444;
  text-decoration: none;
  transition: color 0.15s;
}

#sidebar-footer a:hover {
  color: var(--fg-dim);
}

/* --- App Container (sidebar + chat) --- */

#app {
  display: flex;
  flex-direction: row;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* --- Sidebar --- */

#sidebar {
  width: 280px;
  min-width: 280px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0d0d0d;
}

#user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px;
  height: 60px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

#current-username {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: 1px solid var(--border);
  color: var(--fg-dim);
  font-family: inherit;
  font-size: 0.85rem;
  padding: 11px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

#logout-btn:hover {
  border-color: var(--fg-dim);
  color: var(--fg);
}

/* Logout sits in its own group; on hover its border/text track the active
   theme (not a fixed red), consistent with the rest of the panel. */
.settings-section--danger #logout-btn:hover {
  border-color: var(--fg);
  color: var(--fg);
}

/* Add contact */

#add-contact {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

#add-contact-form {
  display: flex;
  gap: 6px;
}

#add-contact-form input {
  flex: 1;
  background: #151515;
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.8rem;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.2s;
}

#add-contact-form input:focus {
  border-color: var(--fg-dim);
}

#add-contact-form input::placeholder {
  color: #383838;
}

#add-contact-form button {
  background: var(--fg-dim);
  color: var(--bg);
  border: none;
  padding: 8px 12px;
  font-family: inherit;
  font-weight: 550;
  font-size: 0.85rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}

#add-contact-form button:hover {
  background: var(--fg);
}

#contact-search-result {
  font-size: 0.75rem;
  margin-top: 8px;
  color: var(--fg-dim);
}

/* Contacts & pending sections */

#contacts-section,
#pending-requests {
  padding: 12px 16px;
}

#contacts-section h3,
#pending-requests h3 {
  font-size: 0.7rem;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

#contacts-section {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.contact-item {
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.85rem;
  transition: background 0.15s;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.contact-item:hover {
  background: #1a1a1a;
}

.contact-item.active {
  background: var(--self-bg);
  border-left-color: var(--fg);
}

.contact-item.outgoing {
  color: #555;
  font-style: italic;
  cursor: default;
}

.unread-badge {
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--fg);
  color: var(--bg);
  font-size: 0.7rem;
  font-weight: var(--font-weight-bold);
  text-align: center;
  flex: none;
}

.pending-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 0.8rem;
}

.pending-item span {
  flex: 1;
}

.accept-btn {
  background: var(--fg-dim);
  color: var(--bg);
  border: none;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 0.85rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s;
  line-height: 1;
}

.accept-btn:hover {
  background: var(--fg);
}

.reject-btn {
  background: none;
  border: 1px solid #555;
  color: #555;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 0.85rem;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}

.reject-btn:hover {
  border-color: #ff5555;
  color: #ff5555;
}

/* --- Chat Area --- */

#chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

#chat-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 0.9rem;
}

#chat-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#chat-header {
  display: flex;
  align-items: center;
  flex: none;
  padding: 0 20px;
  height: 60px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}

#chat-header h2 {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.15;
}

#mobile-contacts-toggle {
  display: none;
}

#chat-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
  position: relative;
  /* Two-track grid: a capped message column on the left, the rest of the
     width on the right for the drop zone. Grid (not flex) so the message
     column width is guaranteed and a tall conversation can never overlap the
     drop-zone column. */
  display: grid;
  grid-template-columns: minmax(0, 600px) 1fr;
  align-content: start;
  column-gap: 24px;
}

/* --- Board (messages) --- */

#board {
  grid-column: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.item {
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  max-width: 760px;
  padding: 10px 14px;
  padding-right: 36px;
  border: 1px solid var(--border);
  border-radius: 4px;
  animation: slideIn 0.25s ease-out;
  position: relative;
  overflow-wrap: anywhere;
}

.item.self {
  background: var(--self-bg);
  border-left: 3px solid var(--fg);
  margin-left: 48px;
}

.item.other {
  background: var(--other-bg);
  border-left: 3px solid var(--accent);
  margin-right: 48px;
}

.dismiss-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: none;
  border: none;
  color: #555;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s;
}

.dismiss-btn:hover {
  color: var(--fg);
}

.item .meta {
  font-size: 0.65rem;
  color: #555;
  margin-bottom: 4px;
}

.item .content {
  font-size: 0.85rem;
  word-break: break-word;
}

.item .content a {
  color: var(--accent);
  text-decoration: underline;
}

/* Inline emoji art inside message bubbles. Sized in em so it scales with the
   surrounding text; vertical-align tuned to sit on the text line. */
.item .content .emoji-inline {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  vertical-align: -0.32em;
  margin: 0 1px;
}

/* File items */

.item.file-item .file-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
}

.item.file-item .file-icon {
  display: inline-flex;
  align-items: center;
}

.item.file-item .file-type-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
}

.item.file-item .file-size {
  color: #555;
  font-size: 0.7rem;
}

.item.file-item .download-btn {
  color: var(--fg);
  background: none;
  border: 1px solid var(--fg-dim);
  padding: 3px 10px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.75rem;
  margin-left: auto;
  cursor: pointer;
  transition: background 0.15s;
}

.item.file-item .download-btn:hover {
  background: var(--fg-dim);
  color: var(--bg);
}

/* --- Drop Zone (compact) --- */

#drop-zone {
  box-sizing: border-box;
  /* Invisible sticky rail in the right grid track. It spans the visible chat
     height and centers the dashed box inside it, so the box stays centered in
     the viewport regardless of scroll position or composer height — no magic
     vh offsets. It can't overlap the messages (separate grid column). */
  grid-column: 2;
  align-self: start;
  position: sticky;
  /* The rail sits inside the scrolling chat area (which already starts below
     the header), spans roughly the scrollport height, and flex-centers the
     dashed box. top is small so the rail's vertical midpoint lands in the
     middle of what the user sees; height is tuned so it doesn't run under the
     composer. */
  top: 8px;
  height: calc(100svh - 242px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* The dashed box itself. */
#drop-zone-inner {
  box-sizing: border-box;
  width: min(320px, 100%);
  height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border: 2px dashed var(--border);
  text-align: center;
  font-size: 0.8rem;
  color: #444;
  transition:
    border-color 0.2s,
    color 0.2s,
    background 0.2s;
}

/* Empty chat (no messages yet): let the message column collapse and the drop
   zone span both tracks, the box centered as the welcome target. */
#board:empty {
  display: none;
}

#board:empty + #drop-zone {
  grid-column: 1 / -1;
}

#board:empty + #drop-zone #drop-zone-inner {
  width: min(680px, 100%);
}

#drop-zone .drop-icon {
  font-size: 1.2rem;
  color: #333;
  transition: color 0.2s;
}

#drop-zone.drag-over .drop-icon,
#chat-view.drag-over .drop-icon {
  color: var(--fg);
}

/* During a drag the rail becomes a full-area overlay covering the whole chat,
   and the dashed box stretches to fill it and lights up. Anchored to the
   sticky scrollport via fixed-ish positioning so it covers the visible area
   even when there are only a few messages. */
#chat-view.drag-over #drop-zone {
  position: sticky;
  top: 16px;
  z-index: 10;
  grid-column: 1 / -1;
  width: auto;
  height: calc(100svh - 92px);
  margin: 0;
  pointer-events: none;
  background: color-mix(in srgb, var(--fg) 5%, rgba(0, 0, 0, 0.86));
}

#chat-view.drag-over #drop-zone-inner {
  width: 100%;
  height: 100%;
  border-color: var(--fg);
  color: var(--fg);
  background: rgba(51, 255, 153, 0.03);
}

.file-label {
  color: var(--fg);
  cursor: pointer;
  text-decoration: underline;
}

/* --- Footer / Input Bar --- */

footer {
  flex: none;
  border-top: 1px solid var(--border);
  padding: 14px 20px;
  background: #0e0e0e;
  position: relative; /* positioning context for #command-hints */
}

#text-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#text-input {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  background: #151515;
  border: 2px solid var(--border);
  color: var(--fg);
  padding: 12px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  border-radius: 6px;
  outline: none;
  resize: none;              /* height is controlled by JS auto-grow */
  max-height: 9.5em;         /* ~6 lines, then the textarea scrolls */
  overflow-y: auto;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

#text-input:focus {
  border-color: var(--fg-dim);
  box-shadow: 0 0 0 3px rgba(51, 255, 153, 0.1);
}

#text-input::placeholder {
  color: #383838;
}

/* --- Composer toolbar (row 2) --- */

#composer-toolbar {
  display: flex;
  align-items: center;
}

.composer-actions {
  display: flex;
  gap: 6px;
  position: relative; /* anchors #camera-menu, #video-menu */
}

.composer-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  background: var(--bg, #0a0a0a);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 50;
}
.composer-menu.hidden { display: none; }

.composer-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 7px;
  color: var(--fg, #ddd);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.composer-menu-item:hover { background: #1a1a1a; }
.composer-menu-item.hidden { display: none; }
.composer-menu-item .icon { width: 18px; height: 18px; color: #888; }

/* --- Emoji picker popover --- */
.emoji-picker {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: min(340px, calc(100vw - 28px));
  background: var(--bg, #0a0a0a);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 50;
}

.emoji-search {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #141414;
  color: var(--fg, #ddd);
  font: inherit;
  font-size: 0.85rem;
  outline: none;
}
.emoji-search::placeholder { color: #777; }

.emoji-cat-row {
  display: flex;
  gap: 2px;
  margin: 8px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.emoji-cat-btn {
  flex: 1;
  height: 38px;
  padding: 4px;
  border: none;
  border-radius: 7px;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.emoji-cat-btn img { width: 24px; height: 24px; display: block; }
.emoji-cat-btn:hover { background: #161616; }
.emoji-cat-btn.sel { background: #1a1a1a; }

.emoji-cat-label {
  font-size: 0.7rem;
  color: #aaa;
  margin: 0 2px 6px;
  min-height: 14px;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  max-height: 252px;
  overflow-y: auto;
  padding-right: 2px;
}
.emoji-grid-cell {
  aspect-ratio: 1;
  padding: 5px;
  border: none;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.emoji-grid-cell img { width: 100%; height: 100%; display: block; }
.emoji-grid-cell:hover { background: #1a1a1a; }

.emoji-status {
  font-size: 0.78rem;
  color: #888;
  padding: 16px 8px;
  text-align: center;
}

.composer-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 6px;
  color: #888;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.composer-icon-btn .icon {
  width: 20px;
  height: 20px;
}

.composer-icon-btn:hover {
  color: var(--fg);
  background: #1a1a1a;
}

.composer-icon-btn.is-placeholder {
  opacity: 0.4;
  cursor: not-allowed;
}

.composer-icon-btn.is-placeholder:hover {
  color: #888;
  background: none;
}

.composer-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;          /* pushes legend + send button to the right */
}

.composer-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6a6a6a;
  font-size: 0.82rem;
  white-space: nowrap;
}

.composer-hint .kbd-icon {
  width: 18px;
  height: 18px;
  color: #cfcfcf;
}

.composer-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 0;
  background: var(--fg-dim);
  color: var(--bg);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.composer-send .icon {
  width: 22px;
  height: 22px;
}

.composer-send:hover {
  background: var(--fg);
}

/* --- Animations --- */

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pingFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(51, 255, 153, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(51, 255, 153, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(51, 255, 153, 0);
  }
}

.item.ping {
  animation:
    slideIn 0.25s ease-out,
    pingFlash 0.6s ease-out;
}

.item.fade-out {
  animation: fadeOut 0.5s ease-out forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* --- Scrollbar --- */

#chat-main::-webkit-scrollbar,
#contacts-section::-webkit-scrollbar {
  width: 6px;
}

#chat-main::-webkit-scrollbar-track,
#contacts-section::-webkit-scrollbar-track {
  background: var(--bg);
}

#chat-main::-webkit-scrollbar-thumb,
#contacts-section::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

/* --- Compact desktop / tablet --- */

@media (min-width: 601px) and (max-width: 900px) {
  #chat-main {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  #board {
    grid-column: 1;
  }

  #drop-zone {
    grid-column: 1;
    position: static;
    height: auto;
    margin: 18px 0 0;
  }

  #drop-zone-inner {
    width: 100%;
    height: 160px;
  }

  #board:not(:empty) + #drop-zone {
    display: none;
  }

  #board:empty + #drop-zone {
    grid-column: 1;
  }

  #board:empty + #drop-zone #drop-zone-inner {
    width: 100%;
  }

  footer {
    padding: 10px 20px;
  }

  .composer-hint {
    display: none;
  }

  .item {
    width: auto;
    max-width: none;
  }

  .item.self {
    margin-left: 32px;
  }

  .item.other {
    margin-right: 32px;
  }
}

/* --- Mobile --- */

@media (max-width: 600px) {
  #app {
    flex-direction: column;
  }

  #sidebar {
    width: 100%;
    min-width: unset;
    max-height: 40vh;
    flex: none;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow-y: auto;
  }

  #app.chat-active.contacts-collapsed #sidebar {
    max-height: 60px;
    overflow: hidden;
  }

  #app.chat-active.contacts-collapsed #add-contact,
  #app.chat-active.contacts-collapsed #pending-requests,
  #app.chat-active.contacts-collapsed #contacts-section,
  #app.chat-active.contacts-collapsed #sidebar-footer {
    display: none;
  }

  #app.chat-active #chat-area {
    flex: 1;
    min-height: 0;
  }

  #chat-header {
    padding: 10px 14px;
    gap: 10px;
  }

  #mobile-contacts-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid var(--border);
    color: var(--fg-dim);
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
  }

  #mobile-contacts-toggle[aria-expanded="true"],
  #mobile-contacts-toggle:hover {
    border-color: var(--fg-dim);
    color: var(--fg);
  }

  /* Too narrow for a side rail: collapse to a single grid column so messages
     are full-width and the drop zone stacks below them (hidden once a
     conversation exists — the composer handles uploads). */
  #chat-main {
    padding: 12px 14px;
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  #board {
    grid-column: 1;
  }

  #drop-zone {
    grid-column: 1;
    position: static;
    top: auto;
    height: auto;
    margin: 18px 0 0;
  }

  #drop-zone-inner {
    width: 100%;
    height: 120px;
    padding: 0 14px;
  }

  #board:not(:empty) + #drop-zone {
    display: none;
  }

  #board:empty + #drop-zone {
    grid-column: 1;
  }

  #board:empty + #drop-zone #drop-zone-inner {
    width: 100%;
  }

  #chat-view.drag-over #drop-zone {
    inset: 12px 14px;
  }

  .item {
    width: auto;
    max-width: none;
    padding: 10px 12px;
  }

  .item.self {
    margin-left: 24px;
  }

  .item.other {
    margin-right: 24px;
  }

  .item.file-item .file-info {
    flex-wrap: wrap;
  }

  .item.file-item .download-btn {
    padding: 6px 14px;
    margin-left: 0;
  }

  footer {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }

  #text-input {
    font-size: 16px; /* prevents iOS zoom-on-focus */
    padding: 10px 12px;
  }

  .composer-hint {
    display: none; /* legend doesn't fit on narrow screens; icons + send remain */
  }

  #auth-box {
    width: 100%;
    max-width: 400px;
    padding: 0 16px;
  }

  .field-row input {
    font-size: 16px; /* prevents iOS zoom-on-focus */
  }

  .composer-icon-btn,
  .composer-send {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 360px) {
  #chat-header {
    padding: 8px 10px;
    gap: 8px;
  }

  #chat-main {
    padding: 10px;
  }

  .item.self {
    margin-left: 16px;
  }

  .item.other {
    margin-right: 16px;
  }

  footer {
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }

  .composer-actions {
    gap: 4px;
  }

  .composer-icon-btn,
  .composer-send {
    width: 40px;
    height: 40px;
  }

  .settings-field-row,
  #invite-link-row {
    flex-direction: column;
  }

  .settings-field-row button,
  #invite-copy-btn {
    width: 100%;
  }

  #invite-qr img {
    width: 180px;
    height: 180px;
  }
}

/* --- Image preview thumbnails + lightbox --- */
.item.file-item .image-thumb {
  display: block;
  max-width: 200px;
  max-height: 140px;
  border: 1px solid var(--border);
  border-radius: 4px;
  object-fit: cover;
  cursor: pointer;
  background: #000;
}

.item.file-item .image-thumb.loading {
  width: 200px;
  height: 140px;
  animation: thumb-pulse 1.2s ease-in-out infinite;
}

@keyframes thumb-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

/* --- Inline video player --- */
.item.file-item .video-inline {
  display: block;
  max-width: 260px;
  max-height: 200px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #000;
}

.item.file-item .video-inline.loading {
  width: 260px;
  height: 146px;
  animation: thumb-pulse 1.2s ease-in-out infinite;
}

.item.file-item .video-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 0.85rem;
}

.item.file-item .video-download-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: #888;
  font-size: 0.72rem;
  cursor: pointer;
  text-decoration: none;
}
.item.file-item .video-download-link:hover {
  color: var(--fg);
}
.item.file-item .video-download-link .icon {
  width: 14px;
  height: 14px;
}

#lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  padding: 24px;
}

#lightbox.hidden { display: none; }

#lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border: 1px solid var(--fg);
  border-radius: 4px;
}

#lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: 1px solid var(--fg-dim);
  color: var(--fg);
  font-size: 1.1rem;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
}

#lightbox-close:hover {
  background: var(--fg-dim);
  color: var(--bg);
}

.contact-item .contact-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

/* Two-line contact name: primary line truncates, secondary is @username.
   flex-column replaces the old single-line truncation rule. */
.contact-item .contact-name {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
  overflow: hidden;
}

.presence-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #444;
  flex: none;
}

.presence-dot.online {
  background: var(--fg);
  box-shadow: 0 0 4px var(--fg);
}

/* --- Settings modal --- */
#settings-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  overscroll-behavior: contain;
}
#settings-modal.hidden { display: none; }

#settings-panel {
  background: var(--bg, #0a0a0a);
  border: 1px solid var(--fg-dim, #1a9956);
  border-radius: 8px;
  width: min(92vw, 460px);
  max-height: 85vh;
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent),
    0 24px 60px rgba(0, 0, 0, 0.6),
    0 0 40px color-mix(in srgb, var(--fg) 6%, transparent);
}

/* Terminal-style titlebar: traffic-light dots, a ~/path title, close button. */
#settings-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--fg) 4%, var(--bg));
  flex: none;
}

/* Match the auth form's titlebar dots: theme-colored with graduated opacity,
   the last one full strength (not macOS red/yellow/green). */
.tb-dots {
  display: inline-flex;
  gap: 6px;
  flex: none;
}
.tb-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--fg-dim);
}
.tb-dots i:nth-child(1) { opacity: 0.55; }
.tb-dots i:nth-child(2) { opacity: 0.8; }
.tb-dots i:nth-child(3) { background: var(--fg); }

#settings-title {
  margin: 0;
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--fg-dim);
}

/* File gallery modal: mirrors #settings-modal / #settings-panel. */
#gallery-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
#gallery-modal.hidden { display: none; }

#gallery-panel {
  background: var(--bg, #0a0a0a);
  border: 1px solid var(--fg-dim, #1a9956);
  border-radius: 8px;
  width: min(92vw, 640px);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent),
    0 24px 60px rgba(0, 0, 0, 0.6),
    0 0 40px color-mix(in srgb, var(--fg) 6%, transparent);
}

#gallery-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--fg) 4%, var(--bg));
  flex: none;
}

#gallery-title {
  margin: 0;
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--fg-dim);
}

/* Trigger button in the chat header and the titlebar close button: borderless
   icon buttons, mirroring #settings-close. */
#gallery-btn,
#gallery-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--fg-dim);
  padding: 4px;
  cursor: pointer;
  border-radius: 4px;
  flex: none;
  transition: color 0.15s, background 0.15s;
}

#gallery-btn:hover,
#gallery-close:hover {
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 10%, transparent);
}

/* Match the composer icon buttons' icon size. */
#gallery-btn .icon {
  width: 20px;
  height: 20px;
}

#gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  padding: 16px;
  overflow-y: auto;
}

/* Empty state spans the whole grid. */
#gallery-grid .gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--fg-dim);
  padding: 32px 0;
  font-size: 0.85rem;
}

.gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--fg) 3%, var(--bg));
  cursor: pointer;
  text-align: center;
  color: inherit;
}

.gallery-item:hover,
.gallery-item:focus-visible {
  border-color: var(--fg-dim);
  outline: none;
}

.gallery-thumb {
  width: 100%;
  height: 84px;
  object-fit: cover;
  border-radius: 4px;
  background: color-mix(in srgb, var(--fg) 6%, var(--bg));
}

.gallery-thumb.loading {
  opacity: 0.4;
}

.gallery-icon {
  width: 100%;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--fg) 6%, var(--bg));
  border-radius: 4px;
}

.gallery-icon img {
  width: 36px;
  height: 36px;
}

.gallery-name {
  font-size: 0.72rem;
  line-height: 1.2;
  word-break: break-word;
  max-height: 2.4em;
  overflow: hidden;
}

.gallery-meta {
  font-size: 0.65rem;
  color: var(--fg-dim);
}

/* Video recording modal: mirrors #settings-modal / #settings-panel. */
#record-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
#record-modal.hidden { display: none; }

#record-panel {
  background: var(--bg, #0a0a0a);
  border: 1px solid var(--fg-dim, #1a9956);
  border-radius: 8px;
  width: min(92vw, 520px);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent),
    0 24px 60px rgba(0, 0, 0, 0.6),
    0 0 40px color-mix(in srgb, var(--fg) 6%, transparent);
}

#record-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--fg) 4%, var(--bg));
  flex: none;
}
#record-title {
  margin: 0;
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
}
#record-close {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  display: flex;
}
#record-close:hover { color: var(--fg); }
#record-close .icon { width: 18px; height: 18px; }

#record-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
}
#record-video {
  width: 100%;
  max-height: 50vh;
  background: #000;
  border-radius: 8px;
}
.record-status { margin: 0; color: #888; font-size: 0.85rem; text-align: center; }
.record-error { margin: 0; color: #e5534b; font-size: 0.85rem; text-align: center; }
.record-error.hidden { display: none; }

.record-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.record-controls button {
  padding: 8px 16px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: #181818;
  color: var(--fg, #ddd);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.record-controls button:hover { background: #232323; }
.record-controls button.hidden { display: none; }
#record-send { border-color: var(--fg-dim); }

/* Photo capture modal: mirrors #record-modal / #record-panel. */
#capture-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
#capture-modal.hidden { display: none; }

#capture-panel {
  background: var(--bg, #0a0a0a);
  border: 1px solid var(--fg-dim, #1a9956);
  border-radius: 8px;
  width: min(92vw, 520px);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent),
    0 24px 60px rgba(0, 0, 0, 0.6),
    0 0 40px color-mix(in srgb, var(--fg) 6%, transparent);
}

#capture-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--fg) 4%, var(--bg));
  flex: none;
}
#capture-title {
  margin: 0;
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
}
#capture-close {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  display: flex;
}
#capture-close:hover { color: var(--fg); }
#capture-close .icon { width: 18px; height: 18px; }

#capture-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
}
#capture-video,
#capture-still {
  width: 100%;
  max-height: 50vh;
  background: #000;
  border-radius: 8px;
  object-fit: contain;
}
#capture-video.hidden,
#capture-still.hidden { display: none; }

.capture-status { margin: 0; color: #888; font-size: 0.85rem; text-align: center; }
.capture-error { margin: 0; color: #e5534b; font-size: 0.85rem; text-align: center; }
.capture-error.hidden { display: none; }

.capture-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.capture-controls button {
  padding: 8px 16px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: #181818;
  color: var(--fg, #ddd);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.capture-controls button:hover { background: #232323; }
.capture-controls button.hidden { display: none; }
#capture-send { border-color: var(--fg-dim); }

/* Icon-only, borderless close button (was an unstyled white default box).
   The X is an inline .icon SVG, so size it in em and let it inherit color. */
#settings-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--fg-dim);
  font-size: 1rem;
  padding: 4px;
  cursor: pointer;
  border-radius: 4px;
  flex: none;
  transition: color 0.15s, background 0.15s;
}

#settings-close:hover {
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 10%, transparent);
}

#settings-body {
  padding: 0.5rem 1.25rem 1.25rem;
  overflow-y: auto;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.settings-section:last-child { border-bottom: none; }

/* Monospace "// section" headers anchor each group. */
.settings-heading {
  margin: 0 0 0.15rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.settings-heading::before {
  content: "// ";
  opacity: 0.6;
}
.settings-section > label {
  font-size: 0.85rem;
  color: var(--fg);
}

/* Input + button on one aligned row; the input flexes, the button sizes to
   its label so the two never look lopsided. Named distinctly from the auth
   form's .field-row (a bordered wrapper with a borderless input) to avoid
   inheriting its transparent-input styling. */
.settings-field-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.settings-field-row input { flex: 1; min-width: 0; }
.settings-field-row button { flex: none; }

/* Text/password fields and the save buttons inside the settings modal were
   rendering as raw browser defaults (white boxes, serif text), breaking the
   terminal aesthetic. Mirror the auth-form styling so they match the rest of
   the app. Scoped to the specific controls so the checkbox, font-picker
   (.font-btn), theme swatches (.swatch) and #logout-btn keep their own looks. */
.settings-section input[type="text"],
.settings-section input[type="password"] {
  /* Near-black field on the black panel with a thin theme-dim border reads as
     a terminal input. (The old #151515 fill + thick grey border looked like a
     washed-out default form box.) */
  background: color-mix(in srgb, var(--fg) 3%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--fg-dim) 45%, transparent);
  color: var(--fg);
  padding: 11px 14px;
  font-family: inherit;
  font-size: 0.9rem;
  border-radius: 6px;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.settings-section input[type="text"]:focus,
.settings-section input[type="password"]:focus {
  border-color: var(--fg-dim);
  /* Theme-aware focus glow: tracks the active theme's --fg (the modal is
     where the theme is chosen, so a fixed green glow would look wrong). */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 12%, transparent);
}

.settings-section input[type="text"]::placeholder,
.settings-section input[type="password"]::placeholder {
  color: var(--fg-dim);
  opacity: 0.5;
}

#display-name-save,
#password-save {
  background: var(--fg-dim);
  color: var(--bg);
  border: none;
  padding: 12px 22px;
  font-family: inherit;
  font-weight: 550;
  font-size: 0.85rem;
  letter-spacing: 1px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

#display-name-save:hover,
#password-save:hover {
  background: var(--fg);
}

/* A save button that sits on its own line below the stacked password inputs —
   match their full width rather than floating content-width. */
.settings-action-btn {
  width: 100%;
}

.settings-subtle { opacity: 0.6; font-size: 0.85rem; }

/* Inline rows for the font/theme pickers: a fixed-width label on the left,
   the picker buttons left-aligned beside it (no more centered orphan rows). */
.picker-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.picker-label {
  flex: none;
  width: 4.5rem;
  font-size: 0.85rem;
  color: var(--fg-dim);
}

.settings-toggle {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--fg);
  cursor: pointer;
}

/* Custom checkbox: a bordered terminal-style square (the native one rendered
   as a bright-white box when unchecked, which broke the dark aesthetic). Empty
   = dim theme border; checked = filled with the active theme color + a ✓. */
.settings-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  flex: none;
  background: color-mix(in srgb, var(--fg) 3%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--fg-dim) 55%, transparent);
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* The oblique Monaspace glyphs sit below their line-box center, so plain
     flex-centering leaves the box visibly high. Nudge it down to sit on the
     text's optical center (measured ~3px against the default Radon font). */
  transform: translateY(3px);
  transition: background 0.15s, border-color 0.15s;
}
.settings-toggle input[type="checkbox"]:hover {
  border-color: var(--fg-dim);
}
.settings-toggle input[type="checkbox"]:checked {
  background: var(--fg);
  border-color: var(--fg);
}
.settings-toggle input[type="checkbox"]:checked::after {
  content: "";
  width: 0.3rem;
  height: 0.55rem;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}
.settings-toggle input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 25%, transparent);
}

.settings-msg { font-size: 0.85rem; }
.settings-msg.ok { color: var(--fg, #33ff99); }
.settings-msg.err { color: #ff4444; }
.settings-msg.hidden { display: none; }

#settings-btn {
  flex: none;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1rem;
}

/* --- Two-line contact name sub-elements --- */
.name-primary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.name-secondary {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: 0.75rem;
  opacity: 0.55;
}

/* ── Link previews ─────────────────────────────────────────── */
.link-preview {
  display: block;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: var(--fg);
  background: var(--card-bg);
  max-width: 360px;
  font-family: var(--font-primary);
  transition: border-color 0.15s ease;
}

.link-preview:hover {
  border-color: var(--accent);
}

.link-preview.loading {
  min-height: 38px;
  opacity: 0.6;
}

.link-preview__image {
  display: block;
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-bottom: 1px solid var(--border);
}

.link-preview__body {
  padding: 8px 10px;
}

.link-preview__domain {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  color: var(--fg-dim);
  margin-bottom: 3px;
  text-transform: lowercase;
}

.link-preview__favicon {
  display: inline-block;
  width: 14px;
  height: 14px;
  object-fit: contain;
  vertical-align: middle;
}

.link-preview__title {
  font-size: 0.8rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--accent);
}

.link-preview__desc {
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--fg-dim);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Invite modal --- */

/* Full-screen backdrop: mirrors #settings-modal exactly. */
#invite-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  overscroll-behavior: contain;
}
#invite-modal.hidden { display: none; }

/* Panel: same construction as #settings-panel, slightly narrower for the
   invite-specific content (QR + short link row). */
#invite-panel {
  background: var(--bg, #0a0a0a);
  border: 1px solid var(--fg-dim, #1a9956);
  border-radius: 8px;
  width: min(92vw, 420px);
  max-height: 90vh;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: inherit;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent),
    0 24px 60px rgba(0, 0, 0, 0.6),
    0 0 40px color-mix(in srgb, var(--fg) 6%, transparent);
}

/* Titlebar: identical idiom to #settings-titlebar — dots, centred title,
   close button. */
#invite-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--fg) 4%, var(--bg));
  flex: none;
}

#invite-title {
  margin: 0;
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--fg-dim, #1a9956);
}

/* Close button: borderless X, mirrors #settings-close. */
#invite-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--fg-dim, #1a9956);
  font-size: 1rem;
  padding: 4px;
  cursor: pointer;
  border-radius: 4px;
  flex: none;
  transition: color 0.15s, background 0.15s;
}
#invite-close:hover {
  color: var(--fg, #33ff99);
  background: color-mix(in srgb, var(--fg) 10%, transparent);
}

/* Body: scrollable column inside the panel. */
#invite-body {
  padding: 1rem 1.25rem 1.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Intro line: secondary/dim text, small size. */
.invite-intro {
  margin: 0;
  font-size: 0.82rem;
  color: var(--fg-dim, #1a9956);
}

/* QR container: white background so scanners work regardless of the active
   theme, with padding so the quiet-zone is preserved. */
#invite-qr {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 10px;
  border-radius: 6px;
  line-height: 0;
  align-self: center;
}
#invite-qr img {
  display: block;
  width: 200px;
  height: 200px;
  image-rendering: pixelated;
}

/* Link row: input + copy button side by side. */
#invite-link-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

/* Link input: matches .settings-section input styling — card-bg fill, dim
   border, theme-fg text, monospaced and readable. */
#invite-link-input {
  flex: 1;
  min-width: 0;
  background: var(--card-bg, #111);
  border: 1px solid var(--border, #222);
  color: var(--fg, #33ff99);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.82rem;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#invite-link-input:focus {
  border-color: var(--fg-dim, #1a9956);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 12%, transparent);
}

/* Primary action buttons: bg=--fg, text=--bg so label is always readable on
   the bright accent. Mirrors the hover idiom of #display-name-save where hover
   shifts to the full --fg. Here the default already IS --fg, so hover darkens
   slightly with a color-mix overlay for feedback. */
#invite-copy-btn,
#invite-regen-btn {
  background: var(--fg, #33ff99);
  color: var(--bg, #0a0a0a);
  border: none;
  padding: 10px 16px;
  font-family: inherit;
  font-weight: 550;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
#invite-copy-btn:hover,
#invite-regen-btn:hover {
  background: color-mix(in srgb, var(--fg) 80%, var(--bg));
}

/* "Copied!" muted state: drop back to --fg-dim so there's a clear visual
   signal the copy already happened (plan called this "--muted"). */
#invite-copy-btn.copied {
  background: var(--fg-dim, #1a9956);
}

/* Regen button: full width so it fills the body column at its own row. */
#invite-regen-btn {
  width: 100%;
}

/* Countdown: small dim centred text; turns danger-red when the link expires. */
.invite-countdown {
  margin: 0;
  font-size: 0.8rem;
  color: var(--fg-dim, #1a9956);
  text-align: center;
}
.invite-countdown.expired {
  color: #ff5555;
}

/* Error paragraph: danger-red, small, matches #auth-error convention. */
.invite-error {
  margin: 0;
  font-size: 0.82rem;
  color: #ff5555;
}

/* --- Invite open button (sidebar) --- */

/* Dashed "ghost" button that lives below the contact-search area. Inherits
   the sidebar's font/color; only border and layout are set here. */
.invite-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  background: none;
  border: 1px dashed var(--border, #222);
  color: inherit;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.82rem;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  margin-top: 0.5rem;
}
.invite-open-btn:hover {
  border-color: var(--fg, #33ff99);
  color: var(--fg, #33ff99);
}
.invite-open-btn .icon {
  width: 1em;
  height: 1em;
  flex: none;
}

/* --- Auth-screen invite banner --- */

/* Shown on the login/register screen when the user arrives via an invite
   link. A --fg-bordered box draws attention without an image or extra colour. */
.auth-invite-banner {
  margin-bottom: 1rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--fg, #33ff99);
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--fg, #33ff99);
  background: color-mix(in srgb, var(--fg) 6%, var(--bg));
}
/* .hidden is defined globally (line 67) — rely on that; no override needed. */

/* --- Terminal command layer --- */

/* Local-only system lines: terminal-styled, no bubble, dim, monospace. */
.item.system {
  align-self: flex-start;
  max-width: 100%;
  padding: 0.15rem 0;
  background: none;
  border: none;
  color: var(--accent);
  opacity: 0.75;
  font-family: inherit;
  font-size: 0.85em;
  white-space: pre-wrap; /* preserve \n in /help and multi-line lines */
  word-break: break-word;
}
.item.system::before {
  content: "> ";
  opacity: 0.6;
}

/* Hint menu floating above the input. */
#command-hints {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 0.4rem;
  background: var(--bg, #0a0a0a);
  border: 1px solid var(--accent);
  border-radius: 4px;
  overflow: hidden;
  z-index: 20;
  max-height: 40vh;
  overflow-y: auto;
}
#command-hints.hidden {
  display: none;
}
.hint-row {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  width: 100%;
  padding: 0.4rem 0.6rem;
  background: none;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.hint-row.active,
.hint-row:hover {
  background: var(--accent);
  color: var(--bg, #0a0a0a);
}
.hint-name {
  flex: 0 0 auto;
  font-weight: bold;
}
.hint-summary {
  flex: 1 1 auto;
  opacity: 0.7;
}

/* --- Cmd/Ctrl+K contact palette --- */
#kbd-palette {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  /* Above the app's own modals (#lightbox/#settings/#invite are z-index 1000). */
  z-index: 1010;
}
#kbd-palette.hidden { display: none; }
#kbd-palette-panel {
  width: 440px;
  max-width: 90vw;
  background: var(--bg, #0a0a0a);
  border: 1px solid var(--accent);
  border-radius: 6px;
  box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 20%, transparent);
  overflow: hidden;
}
#kbd-palette-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
}
.kbd-prompt { opacity: 0.7; }
#kbd-palette-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--fg);
  font-family: inherit;
  font-size: 0.95rem;
}
.kbd-esc-tag {
  font-size: 0.7rem;
  opacity: 0.5;
  border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent);
  border-radius: 3px;
  padding: 1px 5px;
}
#kbd-palette-list {
  max-height: 40vh;
  overflow-y: auto;
}
.kbd-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.kbd-row.active {
  background: var(--accent);
  color: var(--bg, #0a0a0a);
}
.kbd-row .presence-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fg) 30%, transparent);
  flex: 0 0 auto;
}
.kbd-row .presence-dot.online {
  background: var(--accent);
  box-shadow: 0 0 5px var(--accent);
}
.kbd-row.active .presence-dot.online { background: var(--bg, #0a0a0a); box-shadow: none; }
.kbd-row .kbd-name { font-weight: bold; }
.kbd-row .kbd-handle { opacity: 0.55; font-size: 0.8rem; }
.kbd-row.active .kbd-handle { opacity: 0.85; }
.kbd-row .kbd-unread {
  margin-left: auto;
  font-size: 0.72rem;
  border: 1px solid currentColor;
  border-radius: 8px;
  padding: 0 6px;
}
.kbd-empty {
  padding: 0.7rem 0.9rem;
  opacity: 0.5;
  font-size: 0.85rem;
}
#kbd-palette-foot {
  display: flex;
  gap: 1.2rem;
  padding: 0.5rem 0.9rem;
  border-top: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  font-size: 0.72rem;
  opacity: 0.55;
}
#kbd-palette-foot kbd {
  border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent);
  border-radius: 3px;
  padding: 0 5px;
  font-family: inherit;
}

/* --- Keyboard cheatsheet (?) --- */
#kbd-cheatsheet {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Above the palette (1010) and the app's modals (1000). */
  z-index: 1015;
}
#kbd-cheatsheet.hidden { display: none; }
#kbd-cheatsheet-panel {
  width: 460px;
  max-width: 92vw;
  background: var(--bg, #0a0a0a);
  border: 1px solid var(--accent);
  border-radius: 6px;
  box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 20%, transparent);
  overflow: hidden;
}
/* Titlebar chrome mirrors #settings-titlebar / #settings-close exactly. */
#kbd-cheatsheet-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--fg) 4%, var(--bg));
}
#kbd-cheatsheet-title {
  margin: 0;
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--fg-dim);
}
#kbd-cheatsheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  background: none;
  border: none;
  color: var(--fg-dim);
  font-size: 1rem;
  padding: 4px;
  cursor: pointer;
  border-radius: 4px;
  flex: none;
  transition: color 0.15s, background 0.15s;
}
#kbd-cheatsheet-close:hover {
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 10%, transparent);
}
#kbd-cheatsheet-body { padding: 0.6rem 0.4rem 0.9rem; }
.kbd-cheatsheet-heading {
  padding: 0.5rem 0.8rem 0.2rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.5;
  margin: 0;
  font-weight: normal;
}
.kbd-cheatsheet-row {
  display: flex;
  align-items: center;
  padding: 0.35rem 0.8rem;
  font-size: 0.88rem;
}
.kbd-cheatsheet-row > span:first-child { flex: 1; }
.kbd-keys { display: flex; gap: 4px; align-items: center; }
/* Groups two key caps as one chord (e.g. ⌥↑); chords sit apart via .kbd-keys gap. */
.kbd-combo { display: inline-flex; gap: 4px; align-items: center; }
.kbd-keys kbd {
  border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent);
  border-radius: 3px;
  padding: 1px 6px;
  font-family: inherit;
  font-size: 0.8rem;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}

.day-separator {
  flex: 0 0 auto;
  text-align: center;
  margin: 0.75rem auto 0.25rem;
  font-size: 0.75em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-dim, #6b7280);
  opacity: 0.7;
  user-select: none;
}

.load-older {
  flex: 0 0 auto;
  display: block;
  margin: 0.5rem auto;
  padding: 0.25rem 0.75rem;
  background: none;
  border: none;
  color: var(--fg-dim, #6b7280);
  font: inherit;
  font-size: 0.85em;
  cursor: pointer;
  opacity: 0.8;
}
.load-older:hover { opacity: 1; text-decoration: underline; }

.ping-status {
  margin-left: 0.4em;
  font-size: 0.85em;
  opacity: 0.6;
  letter-spacing: -0.05em;
}
.ping-status.read {
  color: var(--accent, #4f9eed);
  opacity: 1;
}

.disappearing-wrap {
  position: relative;
  flex: none;
  display: inline-flex;
}

#disappearing-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--fg-dim);
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 4px;
  font: inherit;
  font-size: 0.8rem;
  transition: color 0.15s, background 0.15s;
}
#disappearing-btn:hover {
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 10%, transparent);
}
#disappearing-btn .icon {
  width: 18px;
  height: 18px;
}
.disappearing-label {
  letter-spacing: 0.5px;
}
/* Active (timer on) — tint the control so it's visibly engaged. */
#disappearing-btn.active {
  color: var(--accent);
}

#disappearing-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 96px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
#disappearing-menu.hidden {
  display: none;
}
#disappearing-menu button {
  background: none;
  border: none;
  color: var(--fg);
  text-align: left;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
}
#disappearing-menu button:hover {
  background: color-mix(in srgb, var(--fg) 12%, transparent);
}