/* ============================================================
   PANALO theme — unified soft-violet. Change the palette here.
   ============================================================ */
:root {
  --page-bg: radial-gradient(circle at top, #1b1730 0%, #0e0b18 100%);
  --app-bg: #191526;
  --sidebar-bg: #141020;
  --panel-bg: #1c1730;      /* headers, composer */
  --surface: #201b33;       /* cards, modals, auth box */
  --surface-2: #2a2440;     /* inputs, chips, secondary btns */
  --surface-3: #332c4d;     /* hover */

  --primary: #8b7cf6;
  --primary-strong: #6c5ce7;
  --grad: linear-gradient(135deg, #8b7cf6, #6c5ce7);
  --on-primary: #ffffff;

  --text: #ece9f7;
  --text-muted: #a49fbe;
  --text-faint: #7c7699;
  --border: rgba(255, 255, 255, 0.06);

  --bubble-in: #2a2440;
  --bubble-out: linear-gradient(135deg, #8b7cf6, #6c5ce7);

  --danger: #ff6b6b;
  --radius: 16px;

  /* Font mix: Sora for display/headings, Inter for UI; chats can override
     --chat-font per conversation (see FONT_PRESETS). */
  --font-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --chat-font: var(--font-ui);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
}

h1, h2, h3,
.auth-box h1,
.conv-title,
.chat-header h2 {
  font-family: var(--font-display);
}

/* The chat surface follows the per-chat font choice */
.message-text,
.message-author,
#message-input,
.quick-btn {
  font-family: var(--chat-font);
}

body {
  background: var(--page-bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hidden {
  display: none !important;
}

/* Animated aurora background (ambient glow behind everything) */
#aurora {
  position: fixed;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(35% 35% at 20% 25%, rgba(139, 124, 246, 0.40), transparent 70%),
    radial-gradient(30% 30% at 82% 18%, rgba(255, 110, 174, 0.30), transparent 70%),
    radial-gradient(40% 40% at 72% 82%, rgba(55, 194, 224, 0.28), transparent 70%),
    radial-gradient(35% 35% at 28% 78%, rgba(255, 138, 91, 0.24), transparent 70%);
  filter: blur(40px);
  animation: auroraDrift 26s ease-in-out infinite alternate;
}

.no-aurora #aurora {
  display: none;
}

@keyframes auroraDrift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.05) rotate(0deg); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.15) rotate(4deg); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.08) rotate(-3deg); }
}

/* Cursor glow (desktop; a small light that trails the pointer) */
#cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(circle, rgba(139, 124, 246, 0.16), rgba(139, 124, 246, 0.05) 42%, transparent 66%);
  mix-blend-mode: screen;
  display: none;
}

/* Custom themed cursor — a ring that tracks the pointer and recolors with the theme */
#cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.14s ease, background 0.14s ease, border-color 0.2s;
  display: none;
}

#cursor-dot.big {
  transform: scale(1.7);
  background: color-mix(in srgb, var(--primary) 22%, transparent);
}

/* Hide the native cursor everywhere when the custom cursor is on */
body.custom-cursor,
body.custom-cursor * {
  cursor: none !important;
}

/* Auth Screens */
.screen {
  width: 100%;
  max-width: 400px;
  padding: 20px;
}

.auth-box {
  background: var(--surface);
  padding: 40px 32px;
  border-radius: 26px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border);
  animation: fadeSlideUp 0.5s ease;
}

.auth-box h1 {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 22px;
  font-size: 30px;
  font-weight: 800;
}

.auth-box h2 {
  margin-bottom: 18px;
  font-weight: 500;
  color: var(--text);
}

/* Switch between Log In / Sign Up */
.auth-switch {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-muted);
}

.auth-switch a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
  margin-left: 6px;
  padding: 2px 4px;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}

.auth-switch a:hover {
  color: #a99bff;
  background: rgba(139, 124, 246, 0.12);
}

/* OTP entry step */
.otp-hint {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.45;
  margin-bottom: 16px;
}

.otp-input {
  text-align: center;
  letter-spacing: 8px;
  font-size: 22px;
  font-weight: 700;
}

.otp-input::placeholder {
  letter-spacing: 6px;
  font-weight: 500;
  color: var(--text-faint);
}

input {
  width: 100%;
  padding: 13px 15px;
  margin-bottom: 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 15px;
  transition: border 0.2s, background 0.2s;
}

input::placeholder {
  color: var(--text-faint);
}

input:focus {
  outline: none;
  border: 1px solid var(--primary);
  background: rgba(139, 124, 246, 0.08);
}

/* "Keep me logged in" row */
.remember-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13.5px;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
}

.remember-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

button {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 14px;
  background: var(--grad);
  color: var(--on-primary);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
}

button:active {
  transform: translateY(0);
}

.danger-btn {
  background: linear-gradient(135deg, #ff7a7a, #e64c4c);
  color: #fff;
}

.secondary-btn {
  background: var(--surface-2);
  color: var(--text);
}

/* App Main Layout */
.app-container {
  display: flex;
  width: 95vw;
  max-width: 1150px;
  height: 88vh;
  background: var(--app-bg);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border);
  animation: fadeSlideUp 0.4s ease;
}

/* Sidebar */
.sidebar {
  width: 320px;
  background: rgba(18, 14, 30, 0.68); /* translucent so the wallpaper shows through */
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 18px 16px;
  background: var(--panel-bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
}

.sidebar-header h2 {
  font-size: 16px;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.sidebar-header button {
  width: auto;
  padding: 7px 14px;
  font-size: 12px;
}

.sidebar-search {
  padding: 14px 14px 8px;
}

.sidebar-search input {
  margin-bottom: 0;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
}

.chat-filters {
  display: flex;
  gap: 6px;
  padding: 0 14px 10px;
}

.filter-tab {
  width: auto;
  padding: 6px 14px;
  border-radius: 18px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
}

.filter-tab.active {
  background: var(--grad);
  color: #fff;
}

.filter-tab:hover {
  transform: none;
  box-shadow: none;
}

.conversations-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}

.conv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 3px;
}

.conv-item:hover {
  background: var(--surface-2);
}

.conv-item.active {
  background: rgba(139, 124, 246, 0.16);
  border: 1px solid rgba(139, 124, 246, 0.35);
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  flex-shrink: 0;
}

.conv-info {
  overflow: hidden;
}

.conv-title {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Main Chat Area */
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: transparent; /* the wallpaper lives on .app-container now */
}

/* Whole-app wallpaper presets (data-wallpaper on the app container) */
.app-container[data-wallpaper="doodle"] {
  background-image: url("doodle.svg");
  background-size: 300px 300px;
  background-repeat: repeat;
}
.app-container[data-wallpaper="dots"] {
  background-image: radial-gradient(rgba(139, 124, 246, 0.13) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}
.app-container[data-wallpaper="aurora"] {
  background-image:
    radial-gradient(45% 40% at 12% 12%, rgba(139, 124, 246, 0.32), transparent 60%),
    radial-gradient(42% 42% at 88% 20%, rgba(255, 110, 174, 0.26), transparent 60%),
    radial-gradient(50% 50% at 72% 96%, rgba(55, 194, 224, 0.24), transparent 60%);
}
.app-container[data-wallpaper="mesh"] {
  background-image:
    radial-gradient(38% 38% at 4% 8%, rgba(55, 194, 224, 0.30), transparent 56%),
    radial-gradient(38% 38% at 96% 12%, rgba(255, 138, 91, 0.26), transparent 56%),
    radial-gradient(44% 44% at 50% 104%, rgba(139, 124, 246, 0.30), transparent 56%),
    radial-gradient(32% 32% at 100% 90%, rgba(255, 110, 174, 0.22), transparent 56%);
}
.app-container[data-wallpaper="plain"] {
  background-image: none;
}
.app-container[data-wallpaper="custom"] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.empty-chat-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  gap: 12px;
}

/* Masked vector so the empty-state mark takes the accent color too */
.empty-chat-state::before {
  content: "";
  width: 62px;
  height: 62px;
  background: var(--primary);
  opacity: 0.45;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-8.5 8.5 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7A8.4 8.4 0 0 1 4 11.5 8.5 8.5 0 0 1 12.5 3 8.5 8.5 0 0 1 21 11.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-8.5 8.5 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7A8.4 8.4 0 0 1 4 11.5 8.5 8.5 0 0 1 12.5 3 8.5 8.5 0 0 1 21 11.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.empty-chat-state h3 {
  font-weight: 500;
  font-size: 15px;
}

.chat-window {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative; /* anchors the sticker panel to the chat area, not the app */
}

.chat-header {
  padding: 12px 18px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

/* Chat options dropdown */
.chat-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 14px;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
  padding: 6px;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-menu-item {
  width: 100%;
  text-align: left;
  background: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: 10px;
}

.chat-menu-item:hover {
  background: var(--surface-2);
  transform: none;
  box-shadow: none;
}

.members-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  max-height: 320px;
  overflow-y: auto;
}

.member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--text);
}

/* Back button — hidden on desktop, shown on mobile to return to the chat list */
.back-btn {
  display: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.chat-header-avatar {
  width: 40px;
  height: 40px;
  font-size: 15px;
}

.chat-header-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header h2 {
  font-size: 16px;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
}

.chat-subtitle.online {
  color: #4ecb71;
}

.chat-subtitle.typing {
  color: var(--primary);
}

.header-icon-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  font-size: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* An 18px glyph in a 40px circle only fills ~45% and reads as a speck adrift
   in the button. These sit at ~55%, which is where a circular icon button
   looks deliberate. */
.header-icon-btn .icon {
  width: 21px;
  height: 21px;
  stroke-width: 2;
}

/* The header's identity block already takes the slack (flex: 1), so the action
   buttons group tightly on the right. Giving each of them margin-left:auto
   splits the free space *between* them and spreads them unevenly instead. */
.chat-header .header-icon-btn {
  margin-left: 0;
}

/* Keep the trailing action icons closer to each other than to the title. */
.chat-header #focus-btn {
  margin-left: 4px;
}

.chat-header #theme-btn,
.chat-header #chat-menu-btn {
  margin-left: -4px;
}

.header-icon-btn:hover {
  background: var(--surface-3);
  transform: none;
  box-shadow: none;
}

/* Theme picker swatches */
.theme-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

.theme-swatch {
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform 0.12s;
}

.theme-swatch:hover {
  transform: scale(1.08);
  box-shadow: none;
}

.theme-swatch.selected {
  border-color: var(--text);
}

/* Settings panel — a wide, landscape sheet rather than a narrow column, so the
   many option groups read as one calm panel instead of a long scroll. */
.settings-content {
  max-width: 460px;
}

/* One column, a little roomier than before. Both class names so this outranks
   the generic .modal-content width declared later in the file. */
.modal-content.settings-content {
  width: min(94vw, 520px);
  max-width: 520px;
  /* The body scrolls; the header and footer don't. */
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  overflow: hidden;
  padding-bottom: 0;
}

/* Everything scrollable lives here, so Done and Log Out never scroll away. */
.settings-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Bleed to the sheet's edge so the scrollbar sits at the edge, not inset. */
  margin: 0 -28px;
  padding: 2px 28px 8px;
}

.settings-footer {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 0 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.settings-footer .danger-btn {
  width: auto;
  padding: 12px 18px;
  flex-shrink: 0;
}

.settings-footer #close-settings-modal {
  flex: 1;
}

.settings-section {
  margin-bottom: 22px;
}

.settings-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-weight: 700;
}

.wallpaper-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wallpaper-chip {
  width: auto;
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  border: 2px solid transparent;
}

.wallpaper-chip:hover {
  background: var(--surface-3);
  transform: none;
  box-shadow: none;
}

.wallpaper-chip.selected {
  border-color: var(--primary);
}

.settings-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 14.5px;
  color: var(--text);
  cursor: pointer;
}

.switch {
  appearance: none;
  -webkit-appearance: none;
  width: 46px;
  height: 26px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 30px;
  background: var(--surface-3);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}

.switch:checked {
  background: var(--primary);
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}

.switch:checked::after {
  transform: translateX(20px);
}

#messages-container {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

#messages-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.message {
  max-width: 68%;
  padding: 9px 14px;
  border-radius: 22px;
  background: var(--bubble-in);
  align-self: flex-start;
  word-wrap: break-word;
  animation: fadeSlideUp 0.25s ease;
  border-bottom-left-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.message.my-message {
  align-self: flex-end;
  background: var(--bubble-out);
  color: #fff;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 5px;
}

.message-author {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 3px;
}

/* On your own (right-aligned) bubbles the "You" label is redundant. */
.message.my-message .message-author {
  display: none;
}

.message-text {
  font-size: 14.5px;
  line-height: 1.45;
}

.chat-image {
  max-width: 100%;
  max-height: 260px;
  border-radius: 14px;
  margin-top: 6px;
  display: block;
}

.message-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  gap: 10px;
}

.message-time {
  font-size: 10px;
  color: var(--text-faint);
}

.message.my-message .message-time {
  color: rgba(255, 255, 255, 0.7);
}

/* Day separator between messages of different dates */
.day-separator {
  align-self: center;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 14px;
  margin: 6px 0;
}

.delete-btn {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  width: auto;
  opacity: 0.65;
}

.message.my-message .delete-btn {
  color: rgba(255, 255, 255, 0.85);
}

.delete-btn:hover {
  opacity: 1;
  background: none;
  transform: none;
  box-shadow: none;
}

/* Optimistic send states */
.message.pending {
  opacity: 0.6;
}

.message.failed .message-time {
  color: #ffd0d0;
}

.retry-btn {
  background: none;
  border: none;
  color: #fff;
  text-decoration: underline;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  width: auto;
}

.retry-btn:hover {
  background: none;
  transform: none;
  box-shadow: none;
}

#message-form {
  display: flex;
  padding: 14px;
  background: var(--panel-bg);
  gap: 10px;
  border-top: 1px solid var(--border);
}

#message-form input[type="text"] {
  margin-bottom: 0;
  flex: 1;
  border-radius: 28px;
  padding: 12px 18px;
}

#message-form button {
  width: auto;
  padding: 0 22px;
  border-radius: 28px;
}

#file-btn {
  background: var(--surface-2);
  color: var(--text);
  padding: 0 16px;
  font-size: 18px;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.file-preview-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel-bg);
  border-top: 1px solid var(--border);
  padding: 8px 14px;
}

.file-preview-thumb {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.file-preview-name {
  flex: 1;
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-preview-remove {
  width: auto;
  padding: 5px 10px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
}

.file-preview-remove:hover {
  background: var(--surface-3);
  transform: none;
  box-shadow: none;
}

.chat-image {
  cursor: zoom-in;
}

/* Full-screen image viewer */
.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(6, 4, 12, 0.92);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 24px;
}

.viewer-bar {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 10px;
  z-index: 51;
}

.viewer-bar button {
  width: auto;
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.viewer-bar button:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: none;
  box-shadow: none;
}

.viewer-img {
  max-width: 92vw;
  max-height: 84vh;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  cursor: zoom-in;
  transition: transform 0.2s ease;
}

.viewer-img.zoomed {
  transform: scale(2.2);
  cursor: zoom-out;
}

/* Modals */
.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(10, 6, 20, 0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.modal-content {
  background: var(--surface);
  padding: 28px;
  border-radius: 22px;
  width: 90%;
  max-width: 400px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border);
  animation: fadeSlideUp 0.25s ease;
}

.modal-content h3 {
  margin-bottom: 18px;
  color: var(--primary);
  font-weight: 700;
}

.modal-buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* Visually hidden, but available to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard focus ring */
.conv-item:focus-visible,
button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Quick-message bar */
.quick-bar {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  background: var(--panel-bg);
  border-top: 1px solid var(--border);
  scrollbar-width: none;
}

.quick-bar::-webkit-scrollbar {
  display: none;
}

.quick-btn {
  flex-shrink: 0;
  width: auto;
  margin: 0;
  padding: 6px 13px;
  border: none;
  border-radius: 18px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s;
}

.quick-btn:hover {
  background: var(--surface-3);
  transform: none;
  box-shadow: none;
}

/* Toasts */
#toast-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 100;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  background: var(--surface-2);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  font-size: 14px;
  max-width: 90vw;
  border-left: 3px solid var(--surface-3);
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast-error { border-left-color: var(--danger); }
.toast-success { border-left-color: var(--primary); }

.toast-hide {
  opacity: 0;
  transform: translateY(8px);
}

/* Animations */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Phase 5 — nav rail, chat info drawer, message actions, files
   ============================================================ */

/* Ambient effects canvas (liquid / bubbles / tech render here) */
#fx-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: none;
}

.app-container {
  position: relative; /* anchors the chat-info drawer */
}

/* ---- Left icon rail (WhatsApp Mac style) ---- */
.nav-rail {
  width: 64px;
  flex-shrink: 0;
  background: rgba(14, 11, 24, 0.85);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 0;
  z-index: 5;
}

.rail-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--text-muted);
  font-size: 19px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rail-btn:hover {
  background: var(--surface-2);
  transform: none;
  box-shadow: none;
}

.rail-btn.active {
  background: rgba(139, 124, 246, 0.18);
}

.rail-btn.active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 4px;
  background: var(--grad);
}

.rail-spacer {
  flex: 1;
}

.rail-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
}

.rail-avatar img,
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Clickable header area opens chat info */
.chat-header-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  border-radius: 14px;
  padding: 2px 6px;
  margin: -2px 0;
  transition: background 0.15s;
}

.chat-header-main:hover {
  background: var(--surface-2);
}

/* ---- Pinned messages bar ---- */
.pinned-bar {
  width: 100%;
  text-align: left;
  background: rgba(139, 124, 246, 0.10);
  color: var(--text-muted);
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 7px 18px;
  font-size: 12.5px;
  font-weight: 600;
}

.pinned-bar:hover {
  background: rgba(139, 124, 246, 0.18);
  transform: none;
  box-shadow: none;
}

/* ---- Chat info drawer ---- */
.chat-info {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  max-width: 100%;
  background: var(--surface);
  border-left: 1px solid var(--border);
  transform: translateX(105%);
  transition: transform 0.28s ease;
  display: flex;
  flex-direction: column;
  z-index: 8;
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.35);
}

.chat-info.open {
  transform: translateX(0);
}

.chat-info-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-bg);
}

.chat-info-header h3 {
  font-size: 16px;
  color: var(--text);
}

.chat-info-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px;
}

.info-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  text-align: center;
}

.info-avatar {
  width: 88px;
  height: 88px;
  font-size: 34px;
}

.info-hero h2 {
  font-size: 19px;
  color: var(--text);
}

.info-section {
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.info-row-inline {
  display: flex;
  gap: 8px;
}

.info-row-inline input {
  margin-bottom: 0;
  flex: 1;
  padding: 10px 13px;
  font-size: 14px;
}

.mini-btn {
  width: auto;
  padding: 9px 16px;
  font-size: 13px;
  border-radius: 14px;
  flex-shrink: 0;
}

/* The base button styles only match <button>, so links styled as buttons
   (e.g. "Open in maps") need the same treatment explicitly. */
a.mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--grad);
  color: var(--on-primary);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

a.mini-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
  color: var(--on-primary);
  background: var(--grad);
}

.info-bio-view {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.info-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.info-chip {
  width: auto;
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  border: 2px solid transparent;
}

.info-chip:hover {
  background: var(--surface-3);
  transform: none;
  box-shadow: none;
}

.info-chip.on,
.info-chip.selected {
  border-color: var(--primary);
  background: rgba(139, 124, 246, 0.14);
}

.info-encryption {
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
  margin: 6px 0 14px;
}

.member-row {
  justify-content: space-between;
}

.member-row .member-id {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.member-remove {
  width: auto;
  padding: 4px 10px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--danger);
  font-size: 12px;
  flex-shrink: 0;
}

.member-remove:hover {
  background: rgba(255, 107, 107, 0.15);
  transform: none;
  box-shadow: none;
}

/* ---- Profile modal ---- */
.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.profile-avatar {
  width: 64px;
  height: 64px;
  font-size: 24px;
}

/* ---- Message hover actions ---- */
.message {
  position: relative;
}

.msg-menu-btn {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s;
}

.message:hover .msg-menu-btn,
.msg-menu-btn:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .msg-menu-btn {
    opacity: 0.5;
  }
}

.msg-actions {
  position: fixed;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
  padding: 6px;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.msg-flags {
  font-size: 10px;
  margin-right: 4px;
}

.edited-tag {
  font-size: 10px;
  color: var(--text-faint);
  font-style: italic;
}

.message.my-message .edited-tag {
  color: rgba(255, 255, 255, 0.65);
}

/* ---- File bubbles (non-image attachments) ---- */
.file-bubble {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 14px;
  padding: 10px 12px;
  margin-top: 6px;
  max-width: 280px;
}

.file-bubble-icon {
  font-size: 26px;
  flex-shrink: 0;
}

.file-bubble-meta {
  min-width: 0;
  flex: 1;
}

.file-bubble-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-bubble-size {
  font-size: 11px;
  color: var(--text-faint);
}

.message.my-message .file-bubble-size {
  color: rgba(255, 255, 255, 0.7);
}

.file-download-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  font-size: 15px;
  flex-shrink: 0;
}

/* ---- Starred messages view (in the sidebar list) ---- */
.star-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 3px;
}

.star-item:hover {
  background: var(--surface-2);
}

.star-item-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.star-item-text {
  font-size: 13.5px;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.list-empty {
  color: var(--text-faint);
  font-size: 13.5px;
  text-align: center;
  padding: 26px 14px;
  line-height: 1.5;
}

/* ---- Chat list rows: preview, time, unread badge ---- */
.conv-info {
  flex: 1;
  min-width: 0;
}

.conv-row-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.conv-row-top .conv-title {
  flex: 1;
  min-width: 0;
}

.conv-time {
  font-size: 11px;
  color: var(--text-faint);
  flex-shrink: 0;
}

.conv-row-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.conv-preview {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conv-pin {
  font-size: 11px;
  opacity: 0.8;
  flex-shrink: 0;
}

.conv-badge {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 12px;
  background: var(--grad);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Unread chats read stronger than read ones */
.conv-item.has-unread .conv-title {
  font-weight: 700;
}

.conv-item.has-unread .conv-preview {
  color: var(--text);
  font-weight: 600;
}

.conv-item.has-unread .conv-time {
  color: var(--primary);
  font-weight: 700;
}

/* Unread count on the rail icons */
.rail-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--sidebar-bg);
}

.unread-divider {
  background: rgba(139, 124, 246, 0.18);
  color: var(--primary);
  align-self: stretch;
  text-align: center;
}

/* ---- In-app alert banners (work without any browser permission) ---- */
#alert-host {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(340px, calc(100vw - 32px));
}

.alert-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  animation: alertIn 0.28s ease;
  transition: opacity 0.3s, transform 0.3s;
}

.alert-card:hover {
  background: var(--surface-2);
}

.alert-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.alert-body {
  min-width: 0;
  flex: 1;
}

.alert-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alert-text {
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alert-close {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 11px;
  flex-shrink: 0;
}

.alert-close:hover {
  transform: none;
  box-shadow: none;
}

.alert-hide {
  opacity: 0;
  transform: translateX(12px);
}

@keyframes alertIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Notification status line in Settings */
.notify-status {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-faint);
  margin: 6px 0 12px;
}

.notify-status.ok { color: #4ecb71; }
.notify-status.warn { color: #ffb86f; }

/* ============================================================
   Vector icons, new-chat chooser, focus mode, per-chat wallpaper
   ============================================================ */

/* Icons are stroked with currentColor on a transparent background, so they
   inherit their button's color — and recolor with the theme automatically. */
.icon {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Every button that carries an icon centres it. Declared once, in one place,
   rather than remembering to add three lines to each new button — which is how
   the download button ended up with its glyph sitting off-centre. */
/* :where() keeps this at zero specificity, so a rule that deliberately hides a
   button (.back-btn on desktop, .focus-only outside focus mode) still wins.
   Without that, this centring rule quietly un-hid them. */
:where(
  button:has(.icon),
  a:has(.icon),
  .header-icon-btn,
  .rail-btn,
  .call-btn,
  .focus-ctl,
  .back-btn,
  .msg-menu-btn,
  .file-download-btn,
  .reply-cancel,
  .alert-close,
  .member-remove,
  .viewer-bar button,
  #file-btn,
  #sticker-btn,
  #location-btn
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  line-height: 1;
}

/* Icon buttons hold only a glyph, so they need no gap eating into the circle */
.header-icon-btn,
.rail-btn,
.call-btn,
.back-btn,
.msg-menu-btn,
.file-download-btn,
.reply-cancel,
.alert-close,
#file-btn,
#sticker-btn,
#location-btn {
  gap: 0;
}

/* The icon slots are plain spans; make them lay out as the glyph itself */
[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Buttons that mix an icon with a label */
.chat-menu-item,
.info-chip,
.mini-btn,
.wallpaper-chip,
.viewer-bar button,
.danger-btn,
#send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.chat-menu-item {
  justify-content: flex-start;
}

/* Same proportion as the header buttons (~53%), so the whole chrome reads as
   one set rather than small glyphs adrift in large circles. */
.rail-btn .icon {
  width: 23px;
  height: 23px;
  stroke-width: 2;
}

/* Active rail view glows in the accent color */
.rail-btn.active {
  color: var(--primary);
}

/* The "+" that starts a new chat sits above the views */
.rail-new {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 6px 18px rgba(108, 92, 231, 0.35);
}

.rail-new:hover {
  background: var(--grad);
  filter: brightness(1.12);
}

.rail-divider {
  width: 26px;
  height: 1px;
  background: var(--border);
  margin: 4px 0 6px;
  flex-shrink: 0;
}

/* Search field with a leading icon */
.sidebar-search {
  position: relative;
}

.sidebar-search .search-icon {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
}

.sidebar-search input {
  padding-left: 38px;
}

.msg-menu-btn .icon {
  width: 13px;
  height: 13px;
}

.msg-flags {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--primary);
}

.message.my-message .msg-flags {
  color: rgba(255, 255, 255, 0.9);
}

.conv-pin {
  display: inline-flex;
  color: var(--text-faint);
}

.file-bubble-icon {
  display: flex;
  color: var(--primary);
}

.message.my-message .file-bubble-icon {
  color: #fff;
}

/* Send button keeps its label on desktop, icon-only when tight */
#send-btn .icon {
  width: 17px;
  height: 17px;
}

/* ---- New chat chooser ---- */
.choice-row {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.choice-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 12px;
  border-radius: 18px;
  background: var(--surface-2);
  color: var(--text);
  border: 2px solid transparent;
}

.choice-card:hover {
  background: var(--surface-3);
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

.choice-icon {
  display: flex;
  color: var(--primary);
}

.choice-name {
  font-weight: 700;
  font-size: 14.5px;
}

.choice-sub {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ---- Focus mode ----
   The controls live inside the chat header rather than floating over it, so
   they're laid out by the header's own flex row and can never overlap the
   title, the avatar, or the chat list. */
.focus-only {
  display: none;
}

body.focus-mode .focus-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.focus-mode .app-container {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

body.focus-mode .nav-rail,
body.focus-mode .sidebar {
  display: none;
}

/* Popping the panel out restores the rail AND the list, in normal flow — so
   the view switcher (all / direct / groups / starred) comes back with it. */
body.focus-mode.panel-out .nav-rail {
  display: flex;
}

body.focus-mode.panel-out .sidebar {
  display: flex;
}

/* Focus mode means focus: no ambient motion at all */
body.focus-mode #aurora,
body.focus-mode #fx-canvas {
  display: none !important;
}

/* ---- "Ambient" wallpaper: let the ambient effect show through the app ---- */
.app-container[data-wallpaper="ambient"] {
  background-color: rgba(25, 21, 38, 0.42);
  background-image: none;
  backdrop-filter: blur(3px);
}

.app-container[data-wallpaper="ambient"] .sidebar,
.app-container[data-wallpaper="ambient"] .nav-rail {
  background: rgba(18, 14, 30, 0.45);
}

.app-container[data-wallpaper="ambient"] .sidebar-header,
.app-container[data-wallpaper="ambient"] .chat-header,
.app-container[data-wallpaper="ambient"] #message-form,
.app-container[data-wallpaper="ambient"] .quick-bar {
  background: rgba(28, 23, 48, 0.55);
}

/* ---- Per-chat wallpaper (personal; overrides the app wallpaper) ---- */
.chat-main[data-wp="doodle"] {
  background-image: url("doodle.svg");
  background-size: 300px 300px;
  background-repeat: repeat;
}
.chat-main[data-wp="dots"] {
  background-color: var(--app-bg);
  background-image: radial-gradient(rgba(139, 124, 246, 0.13) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}
.chat-main[data-wp="aurora"] {
  background-color: var(--app-bg);
  background-image:
    radial-gradient(45% 40% at 12% 12%, rgba(139, 124, 246, 0.32), transparent 60%),
    radial-gradient(42% 42% at 88% 20%, rgba(255, 110, 174, 0.26), transparent 60%),
    radial-gradient(50% 50% at 72% 96%, rgba(55, 194, 224, 0.24), transparent 60%);
}
.chat-main[data-wp="mesh"] {
  background-color: var(--app-bg);
  background-image:
    radial-gradient(38% 38% at 4% 8%, rgba(55, 194, 224, 0.30), transparent 56%),
    radial-gradient(38% 38% at 96% 12%, rgba(255, 138, 91, 0.26), transparent 56%),
    radial-gradient(44% 44% at 50% 104%, rgba(139, 124, 246, 0.30), transparent 56%);
}
.chat-main[data-wp="plain"] {
  background-color: var(--app-bg);
  background-image: none;
}
.chat-main[data-wp="ambient"] {
  background-color: rgba(25, 21, 38, 0.35);
  background-image: none;
}

/* ============================================================
   Reactions, read receipts, replies
   ============================================================ */

/* ---- Reaction pills under a bubble ---- */
.reaction-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.reaction-bar.empty {
  display: none;
}

.reaction-pill {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid transparent;
  color: var(--text);
  font-size: 12px;
  line-height: 1.6;
}

.reaction-pill:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--primary);
}

.reaction-pill.mine {
  background: rgba(139, 124, 246, 0.28);
  border-color: var(--primary);
}

.message.my-message .reaction-pill {
  background: rgba(0, 0, 0, 0.22);
}

.message.my-message .reaction-pill.mine {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.7);
}

.reaction-emoji {
  font-size: 13px;
}

.reaction-count {
  font-weight: 700;
  font-size: 11px;
}

/* ---- Emoji picker ---- */
.reaction-picker {
  position: fixed;
  z-index: 70;
  display: flex;
  gap: 2px;
  padding: 6px;
  border-radius: 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  animation: fadeSlideUp 0.16s ease;
}

.reaction-choice {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: none;
  font-size: 19px;
  line-height: 1;
  transition: transform 0.12s, background 0.12s;
}

.reaction-choice:hover {
  background: var(--surface-2);
  transform: scale(1.22);
  box-shadow: none;
}

/* ---- Delivery state, expressed by the bubble's own brightness ----
   sending → faded and pulsing · failed → faded, red edge ·
   sent → slightly held back · seen → full brightness with a soft glow  */
.message.my-message[data-state] {
  transition: opacity 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
}

.message.my-message[data-state="sending"] {
  opacity: 0.45;
  animation: sendingPulse 1.4s ease-in-out infinite;
}

.message.my-message[data-state="failed"] {
  opacity: 0.6;
  box-shadow: inset 0 0 0 1.5px var(--danger);
}

.message.my-message[data-state="sent"] {
  opacity: 0.74;
  filter: saturate(0.85);
}

.message.my-message[data-state="seen"] {
  opacity: 1;
  filter: saturate(1.06) brightness(1.05);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 55%, transparent),
              0 6px 22px color-mix(in srgb, var(--primary) 32%, transparent);
}

@keyframes sendingPulse {
  0%, 100% { opacity: 0.42; }
  50% { opacity: 0.62; }
}

/* Word label under the newest of your messages, so the brightness scale is
   never something the reader has to guess at. */
/* A quiet footnote, not a label. Uppercase bold at 10px shouted louder than the
   message it belonged to. */
.msg-status {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.55);
}

.message.my-message[data-state="seen"] .msg-status {
  color: rgba(255, 255, 255, 0.9);
}

/* Timestamps sit beside the status, so they should read at the same weight */
.message-time {
  font-variant-numeric: tabular-nums;
}

.message.my-message[data-state="failed"] .msg-status {
  color: #ffd0d0;
}

@media (prefers-reduced-motion: reduce) {
  .message.my-message[data-state="sending"] {
    animation: none;
  }
}

/* ---- Replies ---- */
.reply-quote {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
  padding: 6px 10px;
  margin-bottom: 6px;
  border-radius: 10px;
  border-left: 3px solid var(--primary);
  background: rgba(0, 0, 0, 0.24);
  color: var(--text);
}

.reply-quote:hover {
  background: rgba(0, 0, 0, 0.34);
  transform: none;
  box-shadow: none;
}

.message.my-message .reply-quote {
  border-left-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.16);
}

.reply-quote-author {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary);
}

.message.my-message .reply-quote-author {
  color: #fff;
}

.reply-quote-text {
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.message.my-message .reply-quote-text {
  color: rgba(255, 255, 255, 0.85);
}

.reply-quote.missing {
  opacity: 0.6;
  font-style: italic;
}

/* Composer reply bar */
.reply-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--panel-bg);
  border-top: 1px solid var(--border);
  border-left: 3px solid var(--primary);
}

.reply-bar-icon {
  display: flex;
  color: var(--primary);
  flex-shrink: 0;
}

.reply-bar-body {
  flex: 1;
  min-width: 0;
}

.reply-bar-author {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
}

.reply-bar-text {
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reply-cancel {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reply-cancel:hover {
  transform: none;
  box-shadow: none;
}

/* Flash a message when you jump to it from a quote */
.message.flash {
  animation: flashHighlight 1.2s ease;
}

@keyframes flashHighlight {
  0%, 100% { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
  30% { box-shadow: 0 0 0 3px var(--primary); }
}

/* ---- Message search results ---- */
.search-section {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.search-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 4px 12px 6px;
}

/* ---- Custom sidebar folders ---- */
.rail-divider {
  width: 26px;
  height: 1px;
  background: var(--border);
  margin: 2px 0 4px;
  flex-shrink: 0;
}

.rail-folder .folder-img {
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

.folder-icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.folder-icon-choice {
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.folder-icon-choice:hover {
  background: var(--surface-3);
  transform: none;
  box-shadow: none;
}

.folder-icon-choice.selected {
  border-color: var(--primary);
  background: rgba(139, 124, 246, 0.16);
}

.folder-chip-icon {
  display: flex;
  align-items: center;
  color: var(--primary);
}

/* ---- Per-chat wallpapers (override the app-wide one for one chat) ---- */
.chat-main[data-wp="doodle"] {
  background-image: url("doodle.svg");
  background-size: 300px 300px;
  background-repeat: repeat;
}
.chat-main[data-wp="dots"] {
  background-image: radial-gradient(rgba(139, 124, 246, 0.13) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}
.chat-main[data-wp="aurora"] {
  background-image:
    radial-gradient(45% 40% at 12% 12%, rgba(139, 124, 246, 0.32), transparent 60%),
    radial-gradient(42% 42% at 88% 20%, rgba(255, 110, 174, 0.26), transparent 60%),
    radial-gradient(50% 50% at 72% 96%, rgba(55, 194, 224, 0.24), transparent 60%);
}
.chat-main[data-wp="mesh"] {
  background-image:
    radial-gradient(38% 38% at 4% 8%, rgba(55, 194, 224, 0.30), transparent 56%),
    radial-gradient(38% 38% at 96% 12%, rgba(255, 138, 91, 0.26), transparent 56%),
    radial-gradient(44% 44% at 50% 104%, rgba(139, 124, 246, 0.30), transparent 56%);
}
.chat-main[data-wp="plain"] {
  background-image: none;
  background-color: var(--app-bg);
}
.chat-main[data-wp="ambient"] {
  background-image: none;
  background-color: transparent;
}

/* ============================================================
   Stickers & greeting cards
   ============================================================ */
.sticker-panel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 84px;
  z-index: 15;
  max-height: 340px;
  overflow-y: auto;
  padding: 12px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  animation: fadeSlideUp 0.18s ease;
}

.sticker-panel .chat-filters {
  padding: 0 0 10px;
  position: sticky;
  top: 0;
  background: var(--surface);
}

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}

.sticker-cell {
  width: 100%;
  padding: 4px;
  border-radius: 16px;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s, background 0.12s;
}

.sticker-cell:hover {
  background: var(--surface-2);
  transform: scale(1.06);
  box-shadow: none;
}

.sticker-svg,
.sticker-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 18px;
}

/* Your own sticker images keep their transparency — no card behind them */
.sticker-img {
  object-fit: contain;
  background: none;
}

/* A sticker is the message — no bubble around it */
.message.sticker-message {
  background: none;
  box-shadow: none;
  padding: 0;
  max-width: 160px;
}

.message.sticker-message .message-author {
  padding-left: 2px;
}

.message.sticker-message .message-footer {
  padding: 0 2px;
}

.message.sticker-message .message-time,
.message.sticker-message .msg-status {
  color: var(--text-faint);
}

#sticker-btn {
  background: var(--surface-2);
  color: var(--text);
  padding: 0;
  font-size: 18px;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sticker-btn:hover {
  background: var(--surface-3);
  transform: none;
  box-shadow: none;
}

/* ---- Progressive image loading ---- */
.image-frame {
  margin-top: 6px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}

.image-frame.loading {
  min-height: 140px;
  min-width: 180px;
  background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.3s linear infinite;
}

/* While loading, the image fills the placeholder box. Without this it has no
   intrinsic size yet, collapses to 0×0, and the browser skips lazy-loading a
   zero-size image — so it would never load and the shimmer would never clear. */
.image-frame.loading .chat-image {
  opacity: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.image-frame .chat-image {
  margin-top: 0;
  opacity: 1;
  transition: opacity 0.35s ease;
}

@keyframes shimmer {
  from { background-position: 140% 0; }
  to { background-position: -40% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .image-frame.loading {
    animation: none;
  }
}

/* ============================================================
   Voice & video calls
   ============================================================ */
.call-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: radial-gradient(circle at 50% 30%, #241d3d 0%, #0c0916 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  animation: fadeSlideUp 0.25s ease;
}

/* Remote video fills the screen once it arrives; hidden for voice calls. */
.call-remote {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0c0916;
  display: none;
}

.call-overlay.video-call .call-remote {
  display: block;
}

.call-local {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 168px;
  max-width: 34vw;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 18px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
  background: #15112a;
  z-index: 2;
}

.call-identity {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 18px 24px;
  border-radius: 26px;
}

/* Over live video the name needs a scrim to stay readable */
.call-overlay.video-call .call-identity {
  background: rgba(10, 7, 20, 0.5);
  backdrop-filter: blur(8px);
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 22px;
}

.call-avatar {
  width: 108px;
  height: 108px;
  font-size: 42px;
  box-shadow: 0 0 0 6px rgba(139, 124, 246, 0.18);
  animation: callPulse 2s ease-in-out infinite;
}

.call-overlay.video-call .call-avatar {
  display: none;
}

@keyframes callPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(139, 124, 246, 0.16); }
  50% { box-shadow: 0 0 0 16px rgba(139, 124, 246, 0.05); }
}

.call-identity h2 {
  font-size: 24px;
  color: #fff;
}

.call-status {
  font-size: 14px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.call-controls,
.call-answer-row {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 18px;
  align-items: center;
}

.call-overlay.video-call .call-controls,
.call-overlay.video-call .call-answer-row {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
}

.call-btn {
  width: 62px;
  height: 62px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  transition: transform 0.14s, background 0.14s;
}

.call-btn:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: scale(1.06);
  box-shadow: none;
}

.call-btn.off {
  background: rgba(255, 255, 255, 0.85);
  color: #1a1430;
}

.call-btn.danger {
  background: linear-gradient(135deg, #ff7a7a, #e64c4c);
}

.call-btn.accept {
  background: linear-gradient(135deg, #4ecb71, #2fa060);
}

.call-btn .icon {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

@media (prefers-reduced-motion: reduce) {
  .call-avatar {
    animation: none;
  }
}

/* ============================================================
   Location sharing
   ============================================================ */
.location-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  min-width: 200px;
  transition: background 0.15s;
}

.location-card:hover {
  background: rgba(0, 0, 0, 0.3);
}

.location-pin {
  display: flex;
  color: var(--primary);
  flex-shrink: 0;
}

.message.my-message .location-pin {
  color: #fff;
}

.location-title {
  font-size: 13.5px;
  font-weight: 600;
}

.location-coords {
  font-size: 11.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.message.my-message .location-coords {
  color: rgba(255, 255, 255, 0.75);
}

.map-content {
  max-width: 560px;
}

.map-canvas {
  width: 100%;
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--surface-2);
}

/* Leaflet paints its own controls; keep them legible on the dark surface */
.map-canvas .leaflet-control-attribution {
  background: rgba(0, 0, 0, 0.6);
  color: var(--text-muted);
}

.map-canvas .leaflet-control-attribution a {
  color: var(--primary);
}

#location-btn {
  background: var(--surface-2);
  color: var(--text);
  padding: 0;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#location-btn:hover {
  background: var(--surface-3);
  transform: none;
  box-shadow: none;
}

/* ---- Welcome tour ---- */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 5, 16, 0.78);
  backdrop-filter: blur(10px);
  animation: fadeIn 0.25s ease;
}

.tour-overlay.tour-out {
  opacity: 0;
  transition: opacity 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.tour-card {
  width: min(94vw, 420px);
  padding: 34px 30px 24px;
  border-radius: 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.6);
  text-align: center;
  position: relative;
}

.tour-pop {
  animation: tourPop 0.32s cubic-bezier(0.22, 1.2, 0.36, 1);
}

@keyframes tourPop {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.tour-icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 16px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 30px rgba(108, 92, 231, 0.45);
}

.tour-title {
  font-family: var(--font-display);
  font-size: 23px;
  margin-bottom: 10px;
  color: var(--text);
}

.tour-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.tour-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px;
}

.tour-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--surface-3);
  transition: width 0.2s, background 0.2s;
}

.tour-dot.on {
  width: 20px;
  border-radius: 4px;
  background: var(--primary);
}

.tour-buttons {
  display: flex;
  gap: 10px;
}

.tour-buttons .tour-back {
  flex: 0 0 92px;
}

.tour-next {
  flex: 1;
}

.tour-skip {
  width: auto;
  margin: 12px auto 0;
  padding: 4px 10px;
  background: none;
  color: var(--text-faint);
  font-size: 12.5px;
  font-weight: 500;
}

.tour-skip:hover {
  background: none;
  color: var(--text-muted);
  transform: none;
  box-shadow: none;
}

/* ---- About & shortcuts ---- */
.about-content {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  max-height: 86vh;
  overflow: hidden;
  padding-bottom: 0;
}

.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

kbd {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 11.5px;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
}

.about-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.65;
}

.about-list li {
  margin-bottom: 7px;
}

.about-list strong {
  color: var(--text);
}

/* ---- PIN / lock ---- */
.pin-content {
  max-width: 340px;
  text-align: center;
}

#pin-input {
  letter-spacing: 10px;
  text-align: center;
  font-size: 24px;
}

.shake {
  animation: shakeX 0.36s ease;
}

@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}

/* While the app is locked nothing behind the prompt is legible */
body.app-locked .app-container,
body.app-locked #auth-screen {
  filter: blur(18px);
  pointer-events: none;
}

.conv-lock {
  font-size: 11px;
  opacity: 0.75;
  flex-shrink: 0;
  display: inline-flex;
}

/* ---- Call history entries in a conversation ---- */
.call-log {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
}

.call-log-icon {
  display: flex;
  color: var(--primary);
}

.message.my-message .call-log-icon {
  color: #fff;
}

.call-log.missed .call-log-icon {
  color: var(--danger);
}

/* ---- Responsive: phones & portrait tablets (single-pane, full-screen) ---- */
@media (max-width: 768px) {
  .app-container {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    border: none;
    flex-direction: column;
  }

  /* The rail becomes a WhatsApp-style bottom bar on phones. It scrolls
     sideways so custom folders never squash the built-in views. */
  .nav-rail {
    order: 2;
    width: 100%;
    height: 62px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 4px;
    padding: 0 10px;
    border-right: none;
    border-top: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    flex-shrink: 0;
  }

  .nav-rail::-webkit-scrollbar {
    display: none;
  }

  /* Slightly smaller so the built-in views, folders, profile and settings all
     fit across a 375px phone without needing to scroll. */
  .nav-rail .rail-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .nav-rail .rail-avatar {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .rail-divider {
    width: 1px;
    height: 26px;
    margin: 0 2px;
    align-self: center;
  }

  /* Keep "new chat" and the profile/settings pinned to the ends */
  .rail-new {
    order: -1;
  }

  .rail-btn.active::before {
    left: 10px;
    right: 10px;
    top: auto;
    bottom: -2px;
    width: auto;
    height: 3px;
  }

  .rail-spacer {
    display: none;
  }

  .sidebar {
    width: 100%;
    flex: 1;
    min-height: 0;
    order: 1;
  }

  .chat-main {
    display: none;
  }
  .app-container.chat-open .sidebar,
  .app-container.chat-open .nav-rail {
    display: none;
  }
  .app-container.chat-open .chat-main {
    display: flex;
    flex: 1;
    min-height: 0;
  }

  .chat-info {
    width: 100%;
  }

  /* Focus mode on a phone: the panel takes the whole screen when popped out */
  body.focus-mode.panel-out .sidebar {
    order: 1;
  }
  body.focus-mode.panel-out .chat-main {
    display: none;
  }
  body.focus-mode.panel-out .nav-rail {
    order: 2;
  }

  /* Popups must never be wider than the phone */
  .msg-actions,
  .reaction-picker {
    max-width: calc(100vw - 16px);
  }

  .reaction-picker {
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 22px;
  }

  .modal-content {
    max-height: 84vh;
  }

  /* Calls: bigger touch targets, PiP out of the way of the status bar */
  .call-btn {
    width: 66px;
    height: 66px;
  }

  .call-local {
    width: 120px;
    right: 12px;
    top: 12px;
  }

  .call-avatar {
    width: 96px;
    height: 96px;
    font-size: 36px;
  }

  .folder-icon-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .message {
    max-width: 82%;
  }

  .sidebar-header h2 {
    max-width: 55vw;
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  .toast {
    animation: none !important;
    transition: none !important;
  }
}