/* samar-twin custom CSS */

:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Replace Tailwind's h-screen on body with dynamic viewport height so
   iOS Safari's collapsing URL bar doesn't push our layout past the
   bottom of the visible area. 100vh kept as fallback for older browsers. */
html, body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
}

.soft-shadow {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 24px rgba(26, 26, 26, 0.04);
}

/* ---------- App shell (two-column, full-height) ---------- */

.app-shell {
  display: flex;
  /* 100dvh accounts for mobile Safari's collapsing URL bar so the input
     row doesn't slip behind it. 100vh kept as a fallback for old browsers. */
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  position: relative;
}

.sidebar {
  width: 270px;
  flex-shrink: 0;
  background: #F4F2EC;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.sidebar-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.new-conv-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.6);
  transition: background 0.15s, color 0.15s;
}
.new-conv-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #C84B31;
}

.online-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(26, 26, 26, 0.55);
  margin-top: 1px;
}
.online-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #2EA86E;
  box-shadow: 0 0 0 2px rgba(46, 168, 110, 0.18);
}

.sidebar-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 10px 6px 16px;
}

.sidebar-section-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(26, 26, 26, 0.45);
}

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

.conv-empty {
  padding: 8px 12px;
  font-size: 12px;
  color: rgba(26, 26, 26, 0.4);
}

.conv-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: rgba(26, 26, 26, 0.8);
  cursor: pointer;
  transition: background 0.12s;
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
}
.conv-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
.conv-item.active {
  background: #FFFFFF;
  color: #1A1A1A;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.conv-item-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conv-item-delete {
  opacity: 0;
  color: rgba(26, 26, 26, 0.4);
  padding: 2px;
  border-radius: 4px;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.conv-item:hover .conv-item-delete {
  opacity: 1;
}
.conv-item-delete:hover {
  color: #C84B31;
  background: rgba(200, 75, 49, 0.08);
}

.sidebar-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  padding: 10px 12px;
}

.sidebar-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
  color: rgba(26, 26, 26, 0.6);
  transition: background 0.12s, color 0.12s;
}
.sidebar-link:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #C84B31;
}

/* ---------- Main chat ---------- */

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  background: #FAFAF7;
}

.chat-topbar {
  height: 56px;
  flex-shrink: 0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  background: #FAFAF7;
  /* Belt-and-suspenders: stays pinned even if the parent ever becomes a
     scroll container (e.g., from an iOS rendering quirk). */
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-link {
  color: rgba(26, 26, 26, 0.55);
  transition: color 0.15s;
}
.topbar-link:hover {
  color: #C84B31;
}

.self-workspace-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 7px 11px;
  border: 1px solid rgba(46, 125, 91, 0.18);
  border-radius: 9px;
  background: rgba(46, 125, 91, 0.07);
  color: #286B4F;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.self-workspace-btn:hover {
  border-color: rgba(46, 125, 91, 0.32);
  background: rgba(46, 125, 91, 0.11);
  color: #1F5B41;
}

.local-mode-toggle {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 2px;
  border: 1px solid rgba(26, 26, 26, 0.09);
  border-radius: 999px;
  background: rgba(26, 26, 26, 0.045);
  transition: opacity 0.15s;
}
.local-mode-toggle.switching {
  opacity: 0.55;
}
.local-mode-option {
  min-width: 54px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: rgba(26, 26, 26, 0.5);
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}
.local-mode-option:hover:not(:disabled) {
  color: #C84B31;
}
.local-mode-option.active {
  color: #1A1A1A;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.12);
}
.local-mode-option:disabled {
  cursor: wait;
}

.how-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.65);
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.how-btn:hover {
  color: #C84B31;
  border-color: rgba(200, 75, 49, 0.35);
  background: rgba(200, 75, 49, 0.04);
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 50;
  animation: modal-fade 0.15s ease-out;
}
.modal-backdrop.hidden { display: none; }

@keyframes modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-card {
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(26, 26, 26, 0.18);
  max-width: 440px;
  width: 100%;
  overflow: hidden;
  animation: modal-pop 0.18s ease-out;
}

@keyframes modal-pop {
  from { transform: scale(0.97); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 10px;
}

.modal-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.modal-close {
  color: rgba(26, 26, 26, 0.5);
  padding: 6px;
  border-radius: 8px;
  transition: background 0.12s, color 0.12s;
}
.modal-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1A1A1A;
}

.modal-body {
  padding: 4px 20px 22px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(26, 26, 26, 0.78);
}

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 28px 0 8px;
  scroll-behavior: smooth;
  /* iOS scroll behavior: explicit pan-y so Safari recognizes vertical
     touches as scroll gestures on this element rather than letting
     them propagate up to the (overflow-hidden) body and do nothing.
     overscroll-behavior: contain stops the bounce from rubber-banding
     the whole page. -webkit-overflow-scrolling is a legacy hint that
     still helps on some Safari versions. */
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.chat-log-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Empty state */
.empty-state {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.empty-state.hidden { display: none; }

.empty-avatar {
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: #EFE9E2;
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.empty-avatar span {
  font-size: 32px;
  font-weight: 500;
  color: #C84B31;
}
.empty-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #EFE9E2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.sidebar-avatar span {
  font-size: 11px;
  font-weight: 600;
  color: #C84B31;
}
.sidebar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.empty-name {
  margin-top: 20px;
  font-family: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #1A1A1A;
  white-space: nowrap;
}
.empty-name em {
  font-style: italic;
  font-weight: 500;
}

.empty-desc {
  margin-top: 12px;
  max-width: 480px;
  font-size: 18px;
  color: rgba(26, 26, 26, 0.65);
  line-height: 1.5;
}

/* Chat bubbles */
.bubble-user {
  background: #EFEDE8;
  color: #1A1A1A;
  align-self: flex-end;
  border-radius: 16px 16px 4px 16px;
  padding: 10px 14px;
  max-width: 78%;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.bubble-twin {
  background: #FFFFFF;
  color: #1A1A1A;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px 16px 16px 4px;
  padding: 10px 14px;
  max-width: 78%;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.bubble-row.user { justify-content: flex-end; }
.bubble-row.twin { justify-content: flex-start; }

/* Per-turn copy button — appears on hover beside each bubble. */
.copy-btn {
  opacity: 0;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 2px;
  padding: 4px;
  border-radius: 6px;
  color: rgba(26, 26, 26, 0.4);
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
/* Reveal only when hovering the bubble (the text) itself — not the full-width
   row — so the icon doesn't flash in as the cursor crosses empty space. */
.bubble-row:has(.bubble-user:hover) .copy-btn,
.bubble-row:has(.bubble-twin:hover) .copy-btn,
.copy-btn:focus-visible { opacity: 1; }
.copy-btn:hover {
  color: #C84B31;
  background: rgba(0, 0, 0, 0.04);
}

.twin-avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #EFE9E2;
  color: #C84B31;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.twin-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Keeps follow-up bubbles of a multi-bubble reply aligned with the first
   (which carries the real avatar). */
.twin-avatar-spacer {
  width: 26px;
  flex-shrink: 0;
}

/* Monochrome social links at the far edge of the public profile header. */
.sidebar-socials {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}
.sidebar-social {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(26, 26, 26, 0.4);
  transition: color 0.12s, opacity 0.12s;
  flex-shrink: 0;
}
.sidebar-social svg {
  width: 15px;
  height: 15px;
}
.sidebar-social[href]:hover { color: rgba(26, 26, 26, 0.82); }
.sidebar-social-disabled {
  color: rgba(26, 26, 26, 0.18);
  cursor: default;
}

/* Typing indicator */
.typing-dots { display: inline-flex; gap: 4px; }
.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(26, 26, 26, 0.4);
  animation: bounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}

/* Input bar */
.chat-input-bar {
  flex-shrink: 0;
  padding: 12px 0 20px;
  background: #FAFAF7;
}

/* Locked composer (exchange cap reached / conversation closed). */
.chat-locked-note {
  max-width: 760px;
  margin: 0 auto 10px;
  padding: 0 24px;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  color: rgba(26, 26, 26, 0.55);
}
.chat-input-bar.locked .chat-input,
.chat-input-bar.locked .chat-mic,
.chat-input-bar.locked .chat-send {
  opacity: 0.45;
  cursor: not-allowed;
}

.composer-footnote {
  max-width: 760px;
  margin: 8px auto 0;
  padding: 0 24px;
  text-align: center;
  font-size: 11px;
  color: rgba(26, 26, 26, 0.4);
}
.composer-footnote a {
  color: inherit;
  text-decoration: none;
}
.composer-footnote a:hover {
  color: #C84B31;
  text-decoration: underline;
}

/* Starter prompt chips — shown only on the empty state, above the composer. */
.starter-chips {
  max-width: 760px;
  margin: 0 auto 10px;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.starter-chips.hidden { display: none; }
.starter-chip {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #FFFFFF;
  font-size: 13px;
  color: rgba(26, 26, 26, 0.72);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.starter-chip:hover {
  border-color: rgba(200, 75, 49, 0.5);
  color: #C84B31;
  background: rgba(200, 75, 49, 0.04);
}

.self-empty-kicker {
  margin: 0 0 10px;
  color: rgba(46, 125, 91, 0.72);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.self-empty-title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(42px, 6vw, 64px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  color: #252522;
}
.self-empty-desc {
  max-width: 430px;
  margin: 16px auto 0;
  color: rgba(26, 26, 26, 0.48);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 19px;
  line-height: 1.45;
}

.chat-composer {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

.chat-input-form {
  display: flex;
  align-items: flex-end; /* keep send button pinned to the bottom as the box grows */
  gap: 8px;
}

.chat-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.chat-input {
  display: block;
  width: 100%;
  padding: 11px 48px 11px 18px;
  border-radius: 22px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.45;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  /* Multi-line: wrap text and grow with content (JS caps the height). */
  resize: none;
  overflow-y: auto;
  max-height: 168px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.chat-input:focus {
  border-color: rgba(200, 75, 49, 0.5);
  box-shadow: 0 0 0 3px rgba(200, 75, 49, 0.08);
}

.chat-mic,
.chat-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
}
.chat-mic {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(26, 26, 26, 0.68);
}
.chat-mic:hover {
  background: transparent;
  color: #1A1A1A;
}
.chat-mic.recording {
  background: transparent;
  color: #C84B31;
  animation: mic-pulse 1.4s ease-in-out infinite;
}
.chat-mic.transcribing {
  color: #C84B31;
  cursor: wait;
}
.chat-mic:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
@keyframes mic-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.48; transform: scale(0.9); }
}
.chat-send {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  flex-shrink: 0;
  background: #C84B31;
  color: white;
}
.chat-send:hover { background: #B23E27; }
.chat-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.voice-status {
  min-height: 16px;
  margin: 5px 52px 0 0;
  color: rgba(26, 26, 26, 0.52);
  font-size: 11px;
  line-height: 1.35;
  text-align: right;
}
.voice-status.error { color: #B23E27; }

/* ---------- Self workspace shared styles ---------- */

.tab-btn.active {
  border-bottom-color: #C84B31;
  color: #C84B31;
}
.tab-btn { color: rgba(26, 26, 26, 0.6); }
.tab-btn:hover { color: #1A1A1A; }

.correction-form {
  background: #FFF6F1;
  border: 1px solid rgba(200, 75, 49, 0.2);
  border-radius: 10px;
  padding: 10px;
  margin-top: 8px;
}

/* Menu button (hamburger): hidden on desktop, shown on mobile. */
.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: rgba(26, 26, 26, 0.65);
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.menu-btn:hover, .menu-btn:active {
  background: rgba(0, 0, 0, 0.05);
  color: #C84B31;
}

/* Mobile-only close button inside the sidebar header. */
.sidebar-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: rgba(26, 26, 26, 0.5);
  transition: background 0.12s, color 0.12s;
}
.sidebar-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1A1A1A;
}

/* Backdrop behind the slide-in sidebar on mobile. */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.32);
  z-index: 25;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.sidebar-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Mobile (≤768px): sidebar becomes a slide-in overlay,
     chat takes full width, fonts/padding tighten. --------- */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 84vw;
    max-width: 320px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 30;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    height: 100dvh;
  }
  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    display: block;
  }

  .chat-main {
    width: 100%;
    /* Sidebar is overlay, so chat is full width regardless of sidebar state. */
  }

  .menu-btn {
    display: inline-flex;
  }

  .sidebar-close {
    display: inline-flex;
  }

  /* Topbar tightens. The mode-chip column is allowed to shrink so the
     right-side buttons don't get pushed out. */
  .chat-topbar {
    padding: 0 12px;
    gap: 8px;
  }
  .chat-topbar > div:first-child {
    flex: 1;
    min-width: 0;
  }
  .chat-topbar > div:last-child {
    gap: 14px !important;
    flex-shrink: 0;
  }

  .how-btn {
    padding: 6px 9px;
    font-size: 11px;
  }
  .how-btn span {
    display: none; /* icon-only on mobile to save space */
  }

  /* The "Have a private key? Enter here →" link doesn't need to wrap. */
  #open-key-modal {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .local-mode-option {
    min-width: 46px;
    padding: 5px 8px;
  }

  .self-workspace-btn {
    width: 34px;
    height: 34px;
    justify-content: center;
    padding: 0;
  }
  .self-workspace-btn span { display: none; }

  /* Chat log + input bar get tighter horizontal padding. */
  .chat-log {
    padding: 16px 0 8px;
  }
  .chat-log-inner {
    padding: 0 14px;
    gap: 12px;
  }
  .chat-input-bar {
    padding: 10px 0 14px;
    /* Respect iOS safe area at bottom (home indicator zone). */
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  .chat-composer {
    padding: 0 12px;
  }
  .chat-input-form {
    gap: 6px;
  }
  .chat-input {
    padding: 10px 44px 10px 16px;
    font-size: 16px; /* 16px prevents iOS zoom-on-focus. */
  }
  .chat-mic {
    width: 30px;
    height: 30px;
  }
  .chat-send {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
  }
  .voice-status {
    margin-right: 48px;
  }

  /* Bubbles get a bit more room since the sidebar is gone, plus larger,
     more legible text and roomier line spacing for comfortable reading on
     small screens (Android in particular renders the old 14.5px tight). */
  .bubble-user, .bubble-twin {
    max-width: 88%;
    font-size: 16px;
    line-height: 1.62;
    padding: 11px 15px;
    overflow-wrap: anywhere;
  }

  /* No hover on touch: keep the copy button hidden, reveal it only when the
     bubble is tapped (JS toggles .tap-show on the row). */
  .copy-btn { opacity: 0; }
  .bubble-row.tap-show .copy-btn { opacity: 1; }

  /* Empty state: smaller avatar + headline so it fits above the fold. */
  .empty-avatar {
    width: 88px;
    height: 88px;
  }
  .empty-avatar span {
    font-size: 26px;
  }
  .empty-name {
    font-size: clamp(19px, 6vw, 34px);
  }
  .empty-desc {
    font-size: 16px;
    max-width: 340px;
  }

  /* Modals respect the safe area / small viewport. */
  .modal-backdrop {
    padding: 12px;
    align-items: flex-end;
  }
  .modal-card {
    border-radius: 16px 16px 12px 12px;
    max-height: 85dvh;
    overflow-y: auto;
  }
}

@media (max-width: 520px) {
  .chat-topbar > div:last-child {
    gap: 8px !important;
  }
}

/* Self avatar preview */
.avatar-preview {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: #EFE9E2;
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.avatar-preview span {
  font-size: 22px;
  font-weight: 500;
  color: #C84B31;
}
.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}