/* ---------- Monochrome theme: white + dark grey, inverted in dark mode ---------- */
:root {
  --bg: #ffffff;
  --bg-alt: #f4f4f5;
  --sidebar-bg: #f7f7f8;
  --border: rgba(0, 0, 0, 0.10);
  --text: #1f1f21;
  --text-dim: #8a8a8e;
  --accent: #2c2c2e;        /* dark grey */
  --accent-text: #ffffff;
  --bubble-sent: #2c2c2e;
  --bubble-sent-text: #ffffff;
  --bubble-recv: #ececee;
  --bubble-recv-text: #1f1f21;
  --hover: rgba(0, 0, 0, 0.045);
  --input-bg: rgba(120, 120, 128, 0.10);
  --error: #d0342c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1c1e;
    --bg-alt: #161618;
    --sidebar-bg: #202022;
    --border: rgba(255, 255, 255, 0.12);
    --text: #f2f2f2;
    --text-dim: #98989f;
    --accent: #f2f2f2;      /* inverted: white */
    --accent-text: #1f1f21;
    --bubble-sent: #f2f2f2;
    --bubble-sent-text: #1f1f21;
    --bubble-recv: #2c2c2e;
    --bubble-recv-text: #f2f2f2;
    --hover: rgba(255, 255, 255, 0.06);
    --input-bg: rgba(120, 120, 128, 0.22);
    --error: #ff6b62;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; }

/* ---------- Auth pages ---------- */
.auth-screen {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-alt);
  padding: 20px;
}
.auth-card {
  width: 100%;
  max-width: 340px;
  background: var(--bg);
  border-radius: 20px;
  padding: 36px 28px 28px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
  text-align: center;
}
.auth-logo {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  border-radius: 16px;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.auth-logo svg { fill: var(--accent-text); }
.auth-card h1 { margin: 0 0 4px; font-size: 24px; letter-spacing: -0.3px; }
.auth-sub { margin: 0 0 22px; color: var(--text-dim); font-size: 14px; }
.auth-card form { display: flex; flex-direction: column; gap: 10px; }
.auth-card input {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  outline: none;
  font-size: 16px;
}
.auth-card input:focus { border-color: var(--text-dim); }
#auth-submit {
  margin-top: 6px;
  padding: 12px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  font-size: 16px;
}
#auth-submit:disabled { opacity: 0.6; }
.auth-error { color: var(--error); font-size: 13px; margin: 0; }
.auth-alt {
  display: inline-block;
  margin-top: 18px;
  color: var(--text-dim);
  font-size: 14px;
  text-decoration: none;
}
.auth-alt:hover { color: var(--text); }

/* ---------- App layout (mobile-first: single column) ---------- */
.app {
  height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  /* .chat slides in via translateX(100%) when no conversation is open
     (see .chat below) — without clipping here, that off-screen pane
     widens the document and becomes horizontally scrollable/pannable. */
  overflow: hidden;
}
.sidebar, .chat {
  grid-area: 1 / 1;
  width: 100%;
  height: 100dvh;
  min-width: 0;
}

/* ---------- Sidebar ---------- */
.sidebar {
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
}
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
}
.sidebar-header h2 { margin: 0; font-size: 22px; letter-spacing: -0.4px; }
.header-icons { display: flex; align-items: center; gap: 2px; }
.icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  color: var(--accent);
}
.icon-btn:hover { background: var(--hover); }
.search-wrap {
  display: flex; align-items: center; gap: 6px;
  margin: 4px 12px 10px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text-dim);
}
.search-wrap input {
  flex: 1; border: 0; background: none; outline: none; font-size: 15px;
  min-width: 0;
}
.search-wrap input::placeholder { color: var(--text-dim); }

.conv-list { flex: 1; overflow-y: auto; padding: 0 8px; }

/* ---------- Swipeable conversation row ---------- */
.conv-row {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 1px;
}
.conv-actions {
  position: absolute;
  top: 0; bottom: 0;
  display: flex;
  width: 144px;
  visibility: hidden; /* revealed only on the side being swiped */
}
.conv-actions-left { left: 0; }
.conv-actions-right { right: 0; }
.conv-row.show-left-actions .conv-actions-left { visibility: visible; }
.conv-row.show-right-actions .conv-actions-right { visibility: visible; }
.action-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.unread-action { background: var(--accent); color: var(--accent-text); }
.pin-action { background: #d9a441; }
.mute-action { background: #6b6b70; }
.delete-action { background: #e0473e; }

.conv-item.conv-slide {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  text-align: left;
  position: relative;
  background: var(--sidebar-bg);
  touch-action: pan-y;
}
/* Hover must never make the row translucent — iOS applies :hover on touch,
   which made dragged rows see-through. Layer the tint over the solid bg,
   and only on real pointer-hover devices. */
@media (hover: hover) {
  .conv-item.conv-slide:hover { background-image: linear-gradient(var(--hover), var(--hover)); }
}
.conv-item.conv-slide { -webkit-tap-highlight-color: transparent; }
.conv-item.conv-slide.active { background: var(--accent); color: var(--accent-text); }
.conv-item.conv-slide.active .conv-preview,
.conv-item.conv-slide.active .conv-time { color: var(--accent-text); opacity: 0.75; }
.pin-icon { display: inline-flex; margin-right: 4px; vertical-align: -1px; color: var(--text-dim); }
.mute-icon { color: var(--text-dim); display: inline-flex; }

/* ---------- Desktop right-click menu ---------- */
.context-menu {
  position: fixed;
  z-index: 70;
  min-width: 180px;
  background: var(--bg);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  padding: 6px;
  border: 1px solid var(--border);
}
.context-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
}
.context-menu-item:hover { background: var(--hover); }
.context-menu-item.danger { color: var(--error); }
.avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bubble-recv);
  color: var(--text); font-weight: 600; font-size: 17px;
  flex-shrink: 0;
  user-select: none;
  overflow: hidden;
}
.avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.avatar.avatar-unknown { color: var(--text-dim); border: 1px dashed var(--text-dim); background: transparent; }
.conv-main { min-width: 0; }
.conv-name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-preview {
  color: var(--text-dim); font-size: 13px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.conv-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; align-self: start; padding-top: 2px; }
.conv-time { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }

.sidebar-footer {
  border-top: 1px solid var(--border);
}
.me-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  color: inherit;
  text-decoration: none;
}
.me-link:hover { background: var(--hover); }
.me-link svg { color: var(--text-dim); }
.me-avatar {
  width: 30px; height: 30px;
  font-size: 13px;
}
.me-name { flex: 1; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }

.list-empty { text-align: center; color: var(--text-dim); font-size: 14px; padding: 40px 16px; }
.list-empty p { margin: 0 0 10px; }
.empty-cta {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: none;
}

/* ---------- Profile / Connect pages ---------- */
.page {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom));
  min-height: 100dvh;
  background: var(--bg);
}
.page-header {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 0 10px;
}
.page-header h1 { margin: 0; font-size: 22px; letter-spacing: -0.4px; }
.back-link {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  color: var(--accent);
}
.back-link:hover { background: var(--hover); }
.profile-card {
  background: var(--sidebar-bg);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 14px;
  text-align: center;
}
.profile-card h2 { margin: 10px 0 0; font-size: 20px; }
.profile-card h3 { margin: 0 0 6px; font-size: 15px; }
.profile-card form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.profile-hint { color: var(--text-dim); font-size: 13px; margin: 6px 0 0; }
.profile-hint a { color: inherit; }
.profile-error { color: var(--error); font-size: 13px; margin: 6px 0 0; }
.avatar-big {
  width: 96px; height: 96px;
  font-size: 34px;
  margin: 0 auto;
  border: 0;
  cursor: pointer;
}
.friend-code {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 2px;
  margin: 6px 0 10px;
  font-variant-numeric: tabular-nums;
}
.qr-wrap {
  width: 200px; height: 200px;
  margin: 0 auto;
  padding: 10px;
  background: #ffffff;
  border-radius: 12px;
}
.qr-wrap img { width: 100%; height: 100%; display: block; }
.code-input {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  outline: none;
  font-size: 22px;
  text-align: center;
  letter-spacing: 3px;
  font-variant-numeric: tabular-nums;
}
.code-input:focus { border-color: var(--text-dim); }
.code-input.small { font-size: 16px; letter-spacing: 2px; padding: 10px 12px; }

.text-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  outline: none;
  font-size: 15px;
  margin-top: 10px;
}
.text-input:focus { border-color: var(--text-dim); }

.contact-list {
  max-height: 220px;
  overflow-y: auto;
  text-align: left;
  border-radius: 12px;
  background: var(--input-bg);
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.contact-row:hover { background: var(--hover); }
.contact-row input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.contact-row .avatar { width: 32px; height: 32px; font-size: 13px; }
.contact-row .contact-name { font-size: 14px; font-weight: 500; }
.contact-list-empty { padding: 14px; color: var(--text-dim); font-size: 13px; text-align: center; }

.inline-code-row { display: flex; gap: 8px; margin-top: 10px; }
.inline-code-row .code-input { flex: 1; }
.inline-code-row button {
  padding: 0 16px;
  border-radius: 12px;
  background: var(--sidebar-bg);
  font-weight: 600;
  font-size: 14px;
}
.inline-code-row button:hover { background: var(--hover); }

.code-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.code-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.code-chip button {
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(128,128,128,0.3);
  color: inherit;
  font-size: 12px;
  line-height: 1;
}
#code-submit, .primary-btn {
  padding: 12px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  font-size: 16px;
}
#code-submit:disabled, .primary-btn:disabled { opacity: 0.6; }
.primary-btn { margin-top: 10px; }
.danger-btn {
  width: 100%;
  padding: 12px;
  border-radius: 16px;
  background: var(--sidebar-bg);
  color: var(--error);
  font-weight: 600;
  font-size: 16px;
}
.danger-btn:hover { background: var(--hover); }
.mod-link {
  display: block;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  margin-bottom: 10px;
}

/* ---------- Reminders ---------- */
.segmented {
  display: flex;
  border-radius: 12px;
  background: var(--input-bg);
  padding: 3px;
  margin-top: 10px;
  gap: 3px;
}
.segmented-btn {
  flex: 1;
  padding: 8px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
}
.segmented-btn.active { background: var(--accent); color: var(--accent-text); }

.day-chip-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 12px;
}
.day-chip {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--input-bg);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
.day-chip.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

.reminder-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.reminder-row:last-child { border-bottom: none; }
.reminder-info { flex: 1; min-width: 0; }
.reminder-text { font-size: 14px; font-weight: 500; }
.reminder-schedule { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.reminder-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.reminder-delete { font-size: 13px; color: var(--error); }
.reminder-inactive .reminder-text,
.reminder-inactive .reminder-schedule { opacity: 0.45; }

.device-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.device-row:last-child { border-bottom: none; }
.device-info { flex: 1; min-width: 0; }
.device-label { font-size: 14px; font-weight: 500; }
.device-active { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.device-revoke { font-size: 13px; color: var(--error); flex-shrink: 0; }

.switch { position: relative; display: inline-block; width: 40px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute; inset: 0;
  background: var(--border);
  border-radius: 999px;
  transition: background 0.15s;
}
.switch-slider::before {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s;
}
.switch input:checked + .switch-slider { background: var(--accent); }
.switch input:checked + .switch-slider::before { transform: translateX(16px); }

/* ---------- Moderation dashboard ---------- */
.mod-page { max-width: 640px; }
.mod-subtitle {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 16px;
}
.mod-stats { display: flex; gap: 10px; margin-bottom: 18px; }
.mod-stat-card {
  flex: 1;
  background: var(--sidebar-bg);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
}
.mod-stat-num { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mod-stat-label { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.mod-empty { text-align: center; color: var(--text-dim); padding: 40px 0; }
.mod-list { display: flex; flex-direction: column; gap: 12px; }
.mod-card {
  background: var(--sidebar-bg);
  border-radius: 14px;
  padding: 14px;
}
.mod-category {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--error);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}
.mod-category-severe { background: #8b0000; }
.mod-meta { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.mod-reason { font-size: 13px; font-style: italic; color: var(--text-dim); margin: 0 0 8px; }
.mod-body-text {
  font-size: 14px;
  background: var(--bg);
  border-radius: 10px;
  padding: 10px;
  margin: 0 0 8px;
  white-space: pre-wrap;
  word-break: break-word;
}
.mod-image {
  max-width: 100%;
  max-height: 320px;
  border-radius: 10px;
  display: block;
  margin-bottom: 8px;
}
.mod-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mod-actions .primary-btn { width: auto; padding: 8px 18px; font-size: 14px; margin-top: 0; }
.mod-context-btn {
  background: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 4px;
}
.mod-context-btn:hover { text-decoration: underline; }
.mod-context {
  background: var(--bg);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mod-context-line { margin: 0; font-size: 13px; line-height: 1.4; word-break: break-word; }
.mod-context-who { font-weight: 600; color: var(--text-dim); }
.mod-context-line-self .mod-context-who { color: var(--text); }
.mod-context-flagged {
  background: color-mix(in srgb, var(--error) 12%, transparent);
  border-radius: 8px;
  padding: 6px 8px;
  margin: 2px -8px;
}
.mod-context-deleted { font-style: italic; color: var(--text-dim); }
.mod-context-empty { margin: 0; font-size: 13px; color: var(--text-dim); text-align: center; }

/* ---------- Chat pane (mobile: slides in over the list) ---------- */
.chat {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.35, 1);
  z-index: 2;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
}
.app.show-chat .chat { transform: translateX(0); }

.chat-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  min-height: 52px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px);
}
.back-btn { display: flex; color: var(--accent); padding: 4px; }
.chat-peer { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 4px 8px; margin: -4px 0; }
.chat-peer:hover { background: var(--hover); }
.chat-peer .avatar-unknown { border-color: rgba(255,255,255,0.5); }

.unknown-banner {
  padding: 8px 14px;
  background: color-mix(in srgb, var(--error) 12%, var(--bg-alt));
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.unknown-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; }
.unknown-row strong { color: var(--text); }
.unknown-add-btn {
  padding: 5px 12px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.unknown-add-btn:disabled { opacity: 0.6; }
.peer-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bubble-recv);
  color: var(--text); font-weight: 600; font-size: 14px;
}
.peer-name { font-weight: 600; font-size: 15px; }

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-empty {
  margin: auto;
  text-align: center;
  color: var(--text-dim);
}
.chat-empty-icon { opacity: 0.35; margin-bottom: 8px; }
.chat-empty p { margin: 0; font-size: 15px; }

.day-sep {
  text-align: center;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 500;
  margin: 10px 0 6px;
}
.bubble {
  max-width: min(78%, 520px);
  padding: 8px 13px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.35;
  word-wrap: break-word;
  white-space: pre-wrap;
  animation: pop 0.18s ease-out;
  /* Long-press opens the tapback menu; suppress iOS text-selection callout
     (the menu's Copy action replaces it). */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.bubble.sent {
  align-self: flex-end;
  background: var(--bubble-sent);
  color: var(--bubble-sent-text);
  border-bottom-right-radius: 5px;
}
.bubble.recv {
  align-self: flex-start;
  background: var(--bubble-recv);
  color: var(--bubble-recv-text);
  border-bottom-left-radius: 5px;
}
.link-preview-card {
  display: block;
  max-width: min(78%, 340px);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bubble-recv);
  text-decoration: none;
  color: inherit;
  margin-top: 2px;
}
.link-preview-card.sent { align-self: flex-end; }
.link-preview-card.recv { align-self: flex-start; }
.link-preview-card:hover { opacity: 0.92; }
.link-preview-image {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  display: block;
  background: var(--bg-alt);
}
.link-preview-text { padding: 9px 12px; }
.link-preview-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.link-preview-desc {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.link-preview-host {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 4px;
}

.sender-label {
  align-self: flex-start;
  color: var(--text-dim);
  font-size: 11px;
  margin: 8px 12px 1px;
}

.bubble.bubble-image {
  padding: 4px;
  background: var(--bubble-recv);
}
.bubble.bubble-image img {
  display: block;
  max-width: 100%;
  max-height: 340px;
  border-radius: 15px;
}
.bubble.bubble-image .bubble-caption {
  padding: 6px 9px 4px;
  color: var(--bubble-recv-text);
}
.bubble + .bubble.sent, .bubble + .bubble.recv { margin-top: 1px; }
.bubble.recv + .bubble.sent, .bubble.sent + .bubble.recv { margin-top: 8px; }
.edited-tag {
  font: inherit;
  font-size: 11px;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  opacity: 0.6;
  margin-left: 5px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.edited-tag:hover { opacity: 0.85; }
.bubble.bubble-unsent { font-style: italic; opacity: 0.65; }
@keyframes pop {
  from { transform: scale(0.92) translateY(4px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.delivered, .read-receipt {
  align-self: flex-end;
  color: var(--text-dim);
  font-size: 11px;
  margin: 2px 4px 8px;
}

.typing-indicator {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bubble-recv);
  color: var(--bubble-recv-text);
  padding: 9px 13px;
  border-radius: 18px;
  border-bottom-left-radius: 5px;
  margin-top: 8px;
  font-size: 12px;
}
.typing-label { color: var(--text-dim); }
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.typing-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* ---------- Compose ---------- */
.compose {
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
}
.compose form {
  display: flex; align-items: center; gap: 8px;
}
#compose-input {
  flex: 1;
  padding: 9px 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--bg);
  outline: none;
  font-size: 16px;
  min-width: 0;
}
#send-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s, transform 0.15s;
}
#send-btn:disabled { opacity: 0; transform: scale(0.6); pointer-events: none; }

/* ---------- Modals ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 16px;
  animation: fade 0.2s ease-out;
}
.modal-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg);
  border-radius: 22px;
  padding: 26px 22px calc(20px + env(safe-area-inset-bottom));
  text-align: center;
  animation: rise 0.25s cubic-bezier(0.32, 0.72, 0.35, 1);
}
.modal-logo {
  width: 56px; height: 56px;
  margin: 0 auto 12px;
  border-radius: 14px;
  background: var(--accent);
  color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
}
.modal-logo svg { fill: var(--accent-text); }
.modal-logo svg[stroke] { fill: none; stroke: var(--accent-text); }
.modal-card h2 { margin: 0 0 8px; font-size: 20px; letter-spacing: -0.3px; }
.modal-lead { margin: 0 0 14px; color: var(--text-dim); font-size: 14px; line-height: 1.45; }
.modal-lead strong { color: var(--text); }
.modal-steps {
  text-align: left;
  margin: 0 0 6px;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.5;
}
.modal-steps li { margin-bottom: 8px; }
.inline-icon { vertical-align: -3px; }
.modal-card .primary-btn { width: 100%; }
.modal-card .primary-btn + .primary-btn { margin-top: 8px; }
.edit-history-list {
  text-align: left;
  max-height: 340px;
  overflow-y: auto;
  margin-bottom: 14px;
}
.edit-history-entry {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.edit-history-entry:last-child { border-bottom: none; }
.edit-history-at {
  display: block;
  color: var(--text-dim);
  font-size: 11px;
  margin-bottom: 3px;
}
.primary-btn.danger-fill { background: #e0473e; color: #fff; }
.primary-btn.danger-outline {
  background: none;
  border: 1.5px solid #e0473e;
  color: #e0473e;
}
.modal-dismiss {
  display: block;
  width: 100%;
  margin-top: 12px;
  color: var(--text-dim);
  font-size: 13px;
}
.modal-dismiss:hover { color: var(--text); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { transform: translateY(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@media (min-width: 600px) {
  .modal-overlay { align-items: center; }
}

/* ---------- Message search ---------- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 58;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.search-panel { display: flex; flex-direction: column; height: 100%; }
.search-panel-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
}
.search-panel-bar input {
  flex: 1;
  border: 0;
  background: var(--input-bg);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 16px;
  color: var(--text);
  outline: none;
}
.msg-search-cancel { color: var(--accent); font-size: 15px; font-weight: 500; flex-shrink: 0; }
.search-scope-toggle {
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  padding: 8px;
  border-bottom: 1px solid var(--border);
}
.search-results { flex: 1; overflow-y: auto; padding: 6px; }
.search-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
}
.search-result:hover { background: var(--hover); }
.search-result-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.search-result-snippet { font-size: 14px; color: var(--text-dim); line-height: 1.4; }
.search-result-snippet mark { background: none; color: var(--text); font-weight: 700; }
.search-result-time { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.search-empty { text-align: center; color: var(--text-dim); padding: 40px 16px; }

@keyframes bubble-flash {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 0 3px var(--accent); }
}
.bubble-flash { animation: bubble-flash 1.6s ease-out; }

/* ---------- Long-press bubble menu ---------- */
.bubble-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  animation: fade 0.15s ease-out;
}
.bubble-menu-anchor {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(300px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.bubble-menu-anchor .reaction-bar { width: 100%; }
.reaction-bar {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  animation: rise 0.2s cubic-bezier(0.32, 0.72, 0.35, 1);
}
.reaction-option {
  font-size: 22px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: transform 0.12s;
}
.reaction-option:hover { transform: scale(1.25); }
.reaction-option.selected { background: var(--accent); }
.bubble-menu-sheet {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  animation: rise 0.22s cubic-bezier(0.32, 0.72, 0.35, 1);
  max-width: 220px;
}
.bubble-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  font-size: 15px;
}
.bubble-menu-item + .bubble-menu-item { border-top: 1px solid var(--border); }
.bubble-menu-item:hover { background: var(--hover); }

/* ---------- Reaction chips on bubbles ---------- */
.bubble { position: relative; }
.bubble.has-reactions { margin-top: 16px; }
.reaction-chips {
  position: absolute;
  top: -14px;
  display: flex;
  gap: 3px;
  pointer-events: none;
}
.bubble.sent .reaction-chips { right: 6px; }
.bubble.recv .reaction-chips { left: 6px; }
.reaction-chip {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.reaction-chip.mine { background: var(--accent); color: var(--accent-text); }

/* ---------- Quoted replies ---------- */
.reply-quote {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-left: 3px solid var(--text-dim);
  padding: 3px 8px;
  margin-bottom: 6px;
  border-radius: 4px;
  font-size: 12.5px;
  opacity: 0.85;
}
.reply-quote-who { font-weight: 700; font-size: 11px; }

.reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.reply-bar-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 3px solid var(--accent);
  padding-left: 8px;
}
.reply-bar-label { font-size: 12px; font-weight: 600; }
.reply-bar-snippet {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Chat info sheet ---------- */
.chat-info-card { text-align: center; }
.chat-info-scroll {
  max-height: min(620px, 84vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.chat-info-tabs {
  display: flex;
  gap: 4px;
  background: var(--input-bg);
  border-radius: 12px;
  padding: 4px;
  margin: 18px 0 16px;
  position: sticky;
  top: 0;
  z-index: 1;
}
.chat-info-tab {
  flex: 1;
  padding: 8px 4px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
.chat-info-tab:hover { color: var(--text); }
.chat-info-tab.active {
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.chat-info-panel .chat-info-section:first-child { margin-top: 0; }
.chat-info-card .avatar-big {
  border: 0;
  cursor: pointer;
  margin: 0 auto;
}
.chat-info-card h2 { margin: 10px 0 0; font-size: 19px; }
.chat-info-section {
  margin: 20px 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: left;
}
.nickname-row { display: flex; gap: 8px; align-items: center; }
.nickname-row .text-input { flex: 1; margin-top: 0; }
.nickname-row .primary-btn { width: auto; margin-top: 0; padding: 10px 16px; font-size: 14px; }
.bg-swatch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.bg-swatch {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 2px solid transparent;
  position: relative;
}
.bg-swatch.selected {
  border-color: var(--accent);
}
.bg-swatch.selected::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.bg-swatch-default { background: var(--bg-alt); border-color: var(--border); }
.bg-swatch-ocean { background: linear-gradient(160deg, #4fa9e0, #1c5f8c); }
.bg-swatch-sunset { background: linear-gradient(160deg, #f2a65a, #d9534f); }
.bg-swatch-forest { background: linear-gradient(160deg, #6fbf73, #2e6b3e); }
.bg-swatch-lavender { background: linear-gradient(160deg, #b39ddb, #6a4ea3); }
.bg-swatch-graphite { background: linear-gradient(160deg, #6b6b70, #2a2a2d); }
.bg-swatch-rose { background: linear-gradient(160deg, #f2a6c1, #c2477a); }
.bg-swatch-mono { background: linear-gradient(160deg, var(--text-dim), var(--text)); }
.bg-swatch-upload {
  background: var(--input-bg);
  border: 2px dashed var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
}
.bg-swatch-upload:hover { color: var(--text); border-color: var(--text-dim); }
.bg-swatch-custom { background-size: cover; background-position: center; }

/* ---------- Per-conversation chat backgrounds ---------- */
.messages.bg-ocean { background: linear-gradient(180deg, rgba(79,169,224,0.16), rgba(28,95,140,0.10)); }
.messages.bg-sunset { background: linear-gradient(180deg, rgba(242,166,90,0.16), rgba(217,83,79,0.10)); }
.messages.bg-forest { background: linear-gradient(180deg, rgba(111,191,115,0.16), rgba(46,107,62,0.10)); }
.messages.bg-lavender { background: linear-gradient(180deg, rgba(179,157,219,0.18), rgba(106,78,163,0.10)); }
.messages.bg-graphite { background: linear-gradient(180deg, rgba(107,107,112,0.18), rgba(42,42,45,0.12)); }
.messages.bg-rose { background: linear-gradient(180deg, rgba(242,166,193,0.18), rgba(194,71,122,0.10)); }
.messages.bg-mono { background: linear-gradient(180deg, var(--hover), transparent); }
.messages.bg-custom { background-size: cover; background-position: center; }

/* ---------- Chat info: member list ---------- */
.member-list {
  max-height: 260px;
  overflow-y: auto;
  text-align: left;
  border-radius: 12px;
  background: var(--input-bg);
  margin-bottom: 4px;
}
.member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
.member-row-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  padding: 2px 4px;
  margin: -2px -4px;
}
.member-row-info:hover { background: var(--hover); }
.member-row .avatar { width: 32px; height: 32px; font-size: 13px; flex-shrink: 0; }
.member-row-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-row-remove {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  color: var(--text-dim);
  flex-shrink: 0;
}
.member-row-remove:hover { background: var(--hover); color: var(--error); }

/* ---------- Calls ---------- */
#chat-search-btn { margin-left: auto; }
.call-buttons { display: flex; gap: 2px; }
.call-overlay {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: #0e0e10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.call-tiles {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 2px;
  padding: 2px;
}
/* 1 tile: fill; 2: side by side; 3-4: 2x2; 5+: 3 columns */
.call-tiles[data-count="1"] { grid-template-columns: 1fr; }
.call-tiles[data-count="2"] { grid-template-columns: 1fr 1fr; }
.call-tiles[data-count="3"], .call-tiles[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.call-tiles[data-count="5"], .call-tiles[data-count="6"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.call-tiles[data-count="7"], .call-tiles[data-count="8"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
.call-tile {
  position: relative;
  background: #1a1a1c;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.call-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #1a1a1c;
}
.call-tile-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #f2f2f2;
}
.call-tile-face .avatar-big { width: 72px; height: 72px; font-size: 28px; }
.call-tile-name {
  position: absolute;
  left: 10px; bottom: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 8px;
  border-radius: 8px;
}
.call-tile-face .call-tile-name { position: static; background: none; padding: 0; font-size: 16px; }
.call-ringing-row {
  position: absolute;
  top: calc(46px + env(safe-area-inset-top));
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 16px;
}
.call-ringing-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 12px;
  padding: 4px 10px 4px 4px;
  border-radius: 16px;
  backdrop-filter: blur(8px);
}
.call-ringing-chip .avatar { width: 22px; height: 22px; font-size: 10px; }
.call-status {
  position: absolute;
  top: calc(18px + env(safe-area-inset-top));
  left: 0; right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  z-index: 1;
}
#local-video {
  position: absolute;
  top: calc(52px + env(safe-area-inset-top));
  right: 14px;
  width: 104px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  transform: scaleX(-1); /* mirror the self-view, like every camera app */
  z-index: 1;
}
#local-video:not([srcObject]) { background: transparent; }
.call-controls {
  position: absolute;
  bottom: calc(30px + env(safe-area-inset-bottom));
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 22px;
  z-index: 1;
}
.call-btn {
  width: 58px; height: 58px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  backdrop-filter: blur(8px);
}
.call-btn.off { background: #fff; color: #1f1f21; }
.call-btn.hangup { background: #e0473e; }
.accept-btn { background: #2fae53; color: #fff; }

/* ---------- Pre-send sensitive-content check ---------- */
.checking-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-dim);
}
.checking-spinner {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--text-dim);
  border-top-color: transparent;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.sensitive-card { text-align: center; }
.sensitive-preview-wrap {
  position: relative;
  width: 100%;
  max-height: 220px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
}
.sensitive-preview-wrap img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  display: block;
  filter: blur(28px) saturate(0.7);
  transform: scale(1.1);
}
.sensitive-preview-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.25);
}
.sensitive-card h2 { font-size: 18px; }
.sensitive-help { color: var(--text-dim); font-size: 12.5px; }
.primary-btn.danger-fill#sensitive-send-btn { background: var(--accent); color: var(--accent-text); }

/* Blurred bubble on both sender and recipient until tapped to reveal */
.bubble.bubble-sensitive { position: relative; }
.bubble.bubble-sensitive img { filter: blur(24px) saturate(0.7); }
.bubble.bubble-sensitive.revealed img { filter: none; }
.bubble.bubble-sensitive.revealed .sensitive-overlay { display: none; }
.sensitive-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  text-align: center;
  padding: 12px;
  cursor: pointer;
}
.sensitive-overlay-label { font-size: 12px; font-weight: 600; max-width: 160px; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }

/* ---------- Voice messages ---------- */
.recording-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--bg);
}
.recording-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #e0473e;
  animation: recording-pulse 1.2s infinite;
  flex-shrink: 0;
}
@keyframes recording-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.recording-time { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; }
.recording-hint { flex: 1; color: var(--text-dim); font-size: 13px; }
.recording-cancel { color: var(--text-dim); }
.recording-send { color: #fff; background: var(--accent); border-radius: 50%; }

.bubble.bubble-voice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  min-width: 180px;
}
.voice-play-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(128, 128, 128, 0.25);
  color: inherit;
  flex-shrink: 0;
}
.bubble.sent .voice-play-btn { background: rgba(255, 255, 255, 0.28); }
.voice-progress {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(128, 128, 128, 0.3);
  overflow: hidden;
}
.voice-progress-fill { height: 100%; background: currentColor; width: 0%; }
.voice-time { font-size: 11px; font-variant-numeric: tabular-nums; opacity: 0.75; flex-shrink: 0; }

.bubble.bubble-file { padding: 8px 12px; min-width: 180px; }
.file-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.file-chip-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(128, 128, 128, 0.25);
  flex-shrink: 0;
}
.bubble.sent .file-chip-icon { background: rgba(255, 255, 255, 0.28); }
.file-chip-meta { display: flex; flex-direction: column; min-width: 0; }
.file-chip-name {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.file-chip-size { font-size: 11px; opacity: 0.7; }

.mention {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
  border-radius: 4px;
  padding: 0 2px;
  font-weight: 600;
}
.bubble.sent .mention { background: rgba(255, 255, 255, 0.28); color: inherit; }

.message-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  word-break: break-all;
}

/* ---------- Image lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  animation: fade 0.15s ease-out;
  cursor: zoom-out;
}
.lightbox img {
  max-width: 96vw;
  max-height: 92dvh;
  border-radius: 8px;
  object-fit: contain;
}
.lightbox-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: 14px;
  color: #fff;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

/* ---------- Desktop split view ----------
   Only for genuinely desktop-class viewports: wide AND mouse-driven,
   or very wide (tablet landscape). Phones — portrait or landscape —
   always keep the single-column layout above. */
@media (min-width: 900px) and (hover: hover), (min-width: 1100px) {
  .app { grid-template-columns: 320px 1fr; }
  .sidebar, .chat {
    grid-area: auto;
    width: auto;
  }
  .sidebar { border-right: 1px solid var(--border); }
  .chat {
    transform: none;
    transition: none;
    box-shadow: none;
    z-index: auto;
  }
  .back-btn { display: none; }
  .sidebar-footer { padding-bottom: 10px; }
}