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

:root {
  --primary: #00D9A3;
  --primary-dark: #00BF8F;
  --secondary: #4FC3F7;
  --accent: #00D9A3;
  --danger: #FF5252;
  --success: #00FF88;
  --bg-dark: #000000;
  --bg-medium: #0F171D;
  --bg-light: #1A2229;
  --text-primary: #FFFFFF;
  --text-secondary: #A8B4BD;
  --border: #1F2830;
  --message-out: #00563F;
  --message-in: #1A2229;
  --glass-bg: rgba(15, 23, 29, 0.85);
  --glass-border: rgba(0, 217, 163, 0.25);
  --hover-bg: rgba(255, 255, 255, 0.08);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.6);
}

/* Light Theme */
body[data-theme="light"] {
  --primary: #00BF8F;
  --primary-dark: #00A37D;
  --secondary: #0288D1;
  --accent: #00BF8F;
  --danger: #E53935;
  --success: #00A37D;
  --bg-dark: #FFFFFF;
  --bg-medium: #F5F7FA;
  --bg-light: #E8EDF1;
  --text-primary: #000000;
  --text-secondary: #54656F;
  --border: #D1D7DB;
  --message-out: #D9FDD3;
  --message-in: #FFFFFF;
  --glass-bg: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(0, 191, 143, 0.2);
  --hover-bg: rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Dark Theme - Explicit definition for better specificity */
body[data-theme="dark"] {
  --primary: #00D9A3;
  --primary-dark: #00BF8F;
  --secondary: #4FC3F7;
  --accent: #00D9A3;
  --danger: #FF5252;
  --success: #00FF88;
  --bg-dark: #000000;
  --bg-medium: #0F171D;
  --bg-light: #1A2229;
  --text-primary: #FFFFFF;
  --text-secondary: #A8B4BD;
  --border: #1F2830;
  --message-out: #00563F;
  --message-in: #1A2229;
  --glass-bg: rgba(15, 23, 29, 0.85);
  --glass-border: rgba(0, 217, 163, 0.25);
  --hover-bg: rgba(255, 255, 255, 0.08);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.6);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background: var(--bg-dark);
  color: var(--text-primary);
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  font-weight: 400;
  font-size: 14.2px;
  line-height: 1.4;
  /* Smooth theme transition */
  transition: background-color 0.3s ease, color 0.3s ease;
  /* Safe area for notch/rounded corners */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Ensure HTML also has full background for iOS Safari */
html {
  background: var(--bg-dark);
  transition: background-color 0.3s ease;
  height: 100%;
  overflow: hidden;
}

html[data-theme="light"] {
  background: #FFFFFF;
}

html[data-theme="dark"] {
  background: #000000;
}

#app {
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height */
  width: 100vw;
  position: relative;
  background: var(--bg-dark);
  color: var(--text-primary);
  /* Smooth theme transition */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Screens */
.screen {
  display: none;
  width: 100%;
  height: 100%;
}

.screen.active {
  display: flex;
}

/* Login Screen */
#login-screen {
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-medium) 100%);
}

.login-container {
  text-align: center;
  padding: 3rem;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              0 0 50px rgba(10, 197, 222, 0.1);
  max-width: 400px;
  width: 90%;
}

.logo {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.login-container h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.tagline {
  color: var(--text-secondary);
  margin-bottom: 2rem;
  font-size: 0.9rem;
}

.disclaimer {
  margin-top: 1.5rem;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

/* Chat Screen */
#chat-screen {
  flex-direction: row;
}

.sidebar {
  width: 320px;
  flex-shrink: 0; /* sized by inline width during a drag — see .sidebar-resizer */
  background: var(--glass-bg);
  backdrop-filter: blur(15px) saturate(160%);
  -webkit-backdrop-filter: blur(15px) saturate(160%);
  border-right: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
}

/* ── Drag handle: contacts list width ─────────────────────────────────────
   Previously a fixed 320px or fully hidden — no in-between. Same interaction
   as Koot Documents' file-list resizer (documents.css's .docs-sidebar-
   resizer) applied to the contacts list. Desktop only: mobile's .sidebar is
   an overlay (see the ≤768px rules below), not a flex sibling with a real
   width to drag. */
.sidebar-resizer {
  width: 5px;
  flex-shrink: 0;
  cursor: col-resize;
  background: var(--glass-border);
  position: relative;
}
.sidebar-resizer::before {
  content: "";
  position: absolute;
  inset: 0 -5px;
}
.sidebar-resizer:hover,
body.sidebar-resizing .sidebar-resizer { background: var(--primary); }
body.chat-sidebar-hidden .sidebar-resizer { display: none; }

body.sidebar-resizing { cursor: col-resize; user-select: none; }
body.sidebar-resizing .chat-area iframe { pointer-events: none; }

.sidebar-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.sidebar-header h2 {
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Pairing Code Display */
.pairing-info {
  position: relative;
  margin-top: 1rem;
  padding: 1rem;
  background: var(--bg-dark);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.pairing-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent !important;
  border: none;
  color: var(--text-secondary);
  font-size: 22px;
  cursor: pointer;
  padding: 4px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
  line-height: 1;
}

.pairing-close:hover {
  background: var(--bg-medium) !important;
  color: var(--text-primary);
}

.pairing-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.pairing-code-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

#pairing-code-display {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 0.3em;
  color: var(--primary);
  font-family: 'Courier New', monospace;
  flex: 1;
}

.pairing-expiry {
  font-size: 0.75rem;
  color: var(--danger);
}

.add-by-code-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.add-by-code-section h4 {
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.add-by-code-section input {
  width: 100%;
  margin-bottom: 0.75rem;
}

#pairing-code-input {
  text-align: center;
  font-size: 1.2rem;
  letter-spacing: 0.3em;
  font-family: 'Courier New', monospace;
}

.contacts-section {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.section-header h3 {
  font-size: 0.9rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 1px;
}

.section-actions {
  display: flex;
  gap: 4px;
}

/* Search Bar */
.search-bar {
  display: none;
  margin-bottom: 12px;
  padding: 0 1rem;
  animation: slideDown 0.2s ease-out;
}

.search-bar.active {
  display: flex;
  gap: 8px;
  align-items: center;
}

.chat-search-bar {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-medium);
  border-bottom: 1px solid var(--border);
  animation: slideDown 0.15s ease-out;
}
.chat-search-bar svg { color: var(--text-secondary); flex-shrink: 0; }
.chat-search-bar input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 0.9rem;
}
.chat-search-bar input::placeholder { color: var(--text-secondary); }
.chat-search-count {
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
  min-width: 34px;
  text-align: center;
}
.chat-search-nav-btn {
  background: var(--hover-bg);
  border: none;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.chat-search-nav-btn:hover { background: var(--border); }
.chat-search-nav-btn:disabled { opacity: 0.4; cursor: default; }

/* Match highlighting inside rendered message content */
.chat-search-match {
  background: rgba(255, 213, 0, 0.55);
  border-radius: 2px;
}
.chat-search-match.chat-search-match-active {
  background: var(--primary);
  color: #000;
}

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

#search-contacts-input {
  flex: 1;
  background: var(--bg-light);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14.2px;
  transition: all 0.2s;
}

#search-contacts-input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--bg-medium);
}

.close-search {
  flex-shrink: 0;
  font-size: 20px;
  padding: 8px;
}

.contacts-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.contact-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary);
  transform: scaleY(0);
  transition: transform 0.2s ease;
}

.contact-item:hover {
  background: var(--hover-bg, var(--bg-medium));
}

.contact-item:hover::before {
  transform: scaleY(1);
}

.contact-item.active {
  background: var(--bg-medium);
  border-left: 3px solid var(--primary);
}

.contact-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(10, 197, 222, 0.12);
}

.contact-info {
  flex: 1;
  min-width: 0;
}

/* Name row: name on left, time on right */
.contact-name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 2px;
}

.contact-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.contact-time {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Preview row: status on left, unread badge on right */
.contact-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.contact-unread {
  background: var(--primary, #128C7E);
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.contact-status {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 400;
}

.contact-status.online {
  color: var(--success);
  font-weight: 500;
}

.contact-status.online::before {
  content: '\25cf';
  margin-right: 4px;
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { 
    opacity: 1;
  }
  50% { 
    opacity: 0.6;
  }
}

.contact-actions {
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s;
}

.contact-item:hover .contact-actions {
  opacity: 1;
}

.contact-item.active .status {
  color: rgba(255, 255, 255, 0.8);
}

.contact-item .status.connected {
  color: var(--secondary);
}

/* BETA badge — visible in both dark and light themes */
.beta-badge {
  display: inline-block;
  background: rgba(16, 185, 129, 0.2);
  color: #059669; /* darker green — readable on light bg */
  border: 1px solid rgba(16, 185, 129, 0.5);
  border-radius: 100px;
  padding: 1px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-left: 6px;
  vertical-align: middle;
}

body[data-theme="dark"] .beta-badge {
  color: #10b981; /* brighter green on dark bg */
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.45);
}

/* ── GROUPS ──────────────────────────────────────────────── */

/* Sidebar tab toggle (Contacts | Groups) */
.sidebar-tabs {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--glass-bg);
}

.sidebar-tab {
  flex: 1;
  padding: 10px 8px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
  transition: color 0.15s, border-color 0.15s;
}

.sidebar-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.sidebar-tab:hover:not(.active) {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.groups-section {
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* Was one shared purple gradient with a 👥 emoji: every group was the same
   circle, and the emoji read as a dark smudge at 48px. Then filled per-group
   colour, which fixed telling groups apart but was too loud — beside the
   header's outlined icon buttons a solid blue square read as a competing UI
   control rather than an identity mark.

   Now OUTLINED: transparent ground, a ring in the group's colour, initials in
   the normal text colour.

   Why the RING carries the colour and the text does not: no single palette
   clears 4.5:1 contrast against both a near-black and a near-white ground, so
   coloured initials would be legible in one theme and murky in the other. A
   ring is a non-text graphic — it only needs 3:1 — so putting the colour there
   keeps the initials perfectly legible in both themes while the group still
   gets a distinct mark.

   The SQUIRCLE is what keeps a group from being mistaken for a person: circle
   = person, rounded square = group. It survives greyscale and colour-blind
   vision, which a hue difference alone would not — and it matters more now
   that the fill is gone. */
.group-avatar {
  background: none !important;   /* overrides .contact-avatar's gradient */
  border: 2px solid var(--border);
  color: var(--text-primary);
  border-radius: 14px;
  font-size: 0.95em;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: none;
}

/* Pinned / muted marks in the group row. Small and low-contrast on purpose:
   they're status, not actions — the controls live in the group-info panel. */
.row-mark {
  display: inline-flex;
  align-items: center;
  opacity: 0.55;
  margin-left: 5px;
  flex-shrink: 0;
  color: var(--text-secondary);
}
.row-mark svg { width: 12px; height: 12px; }

/* One line, ellipsised at whatever width the row actually has. Contact rows
   are single-line, and a group row that grows to two lines breaks the rhythm
   of the list and pushes the member count onto its own line. */
.group-item .contact-status {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Member count, always shown. Sits to the LEFT of the unread badge so the
   unread badge keeps the fixed right-hand position it has for contacts —
   scanning down the list, unread counts stay on one vertical line. */
.group-member-count {
  margin-left: auto;
  font-size: 0.7em;
  font-weight: 600;
  color: var(--text-secondary);
  opacity: 0.75;
  flex-shrink: 0;
  padding: 0 2px;
}
.group-member-count::after {
  content: " members";
  font-weight: 400;
}

/* A muted group is still fully legible — it recedes, it doesn't hide. Only
   the unread badge loses its colour, because a coloured badge is the thing
   that reads as "deal with me now" and that's exactly what mute revokes. */
.contact-item.is-muted .contact-unread {
  background: var(--text-secondary);
  opacity: 0.6;
}

.group-prefs {
  display: flex;
  gap: 8px;
  margin: 12px 0 4px;
}
.group-pref-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-secondary);
  font-size: 0.82em;
  font-family: inherit;
  cursor: pointer;
}
.group-pref-btn:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}
.group-pref-btn.is-on {
  border-color: var(--primary);
  color: var(--primary);
}
.group-pref-icon { font-size: 1.05em; line-height: 1; }

/* The same mark, small, beside the group name in the chat header and in the
   group-info panel — so the colour you picked the group by in the list is
   still the colour you see once you're inside it. */
/* Only groups get an avatar in the header; 1-1 chats keep the plain stacked
   name+status block, so this layout is opt-in via the class. */
.chat-info.has-group-avatar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.chat-info.has-group-avatar .chat-info-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.chat-info.has-group-avatar .contact-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-header-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  margin-right: 7px;
  flex-shrink: 0;
  background: none;
  border: 1.5px solid var(--border);
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

/* Sender name label above group chat bubbles (sibling of .message in .message-wrap) */
.group-sender-name {
  display: block;
  font-size: 0.73em;
  font-weight: 700;
  margin-bottom: 3px;
  padding-left: 4px;  /* slight indent aligns name with bubble's text start */
  opacity: 0.9;
}

/* Group info slide-in panel */
.group-info-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  height: 100%;
  background: rgba(15, 23, 29, 0.92);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-left: 1px solid var(--border);
  z-index: 110;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
  animation: slideInRight 0.2s ease-out;
}
body[data-theme="light"] .group-info-panel {
  background: rgba(245, 247, 250, 0.93);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.group-info-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 1em;
}

.group-info-header h3 {
  margin: 0;
  font-size: 1em;
  font-weight: 600;
}

.group-info-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

.group-info-meta {
  font-size: 0.78em;
  opacity: 0.6;
  margin: 0 0 12px;
}

.group-members-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.group-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.group-member-name {
  font-size: 0.9em;
  flex: 1;
}

.btn-remove-member:hover {
  opacity: 1 !important;
  background: rgba(239, 68, 68, 0.1) !important;
}

/* Group list right-click context menu */
.group-list-ctx-menu {
  background: rgba(22, 28, 32, 0.97);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  padding: 4px 0;
  min-width: 160px;
  animation: menuSlideIn 0.15s cubic-bezier(0.2, 0, 0, 1.2);
}
body[data-theme="light"] .group-list-ctx-menu {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(0, 0, 0, 0.09);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
.group-list-ctx-menu .ctx-item {
  padding: 9px 14px;
  cursor: pointer;
  font-size: 13px;
  color: #e05555;
  user-select: none;
  transition: background 0.1s;
}
.group-list-ctx-menu .ctx-item:hover {
  background: rgba(239, 68, 68, 0.1);
}
body[data-theme="light"] .group-list-ctx-menu .ctx-item {
  color: #d93025;
}

/* Modal overlay (reused for add-member) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-box {
  background: rgba(15, 23, 29, 0.92);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: 14px;
  width: 360px;
  max-width: 92vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  overflow: hidden;
}
body[data-theme="light"] .modal-box {
  background: rgba(245, 247, 250, 0.93);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

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

.modal-header h3 {
  margin: 0;
  font-size: 1em;
  font-weight: 600;
}

.modal-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}

.modal-input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-dark);
  color: var(--text-primary);
  font-size: 0.95em;
  box-sizing: border-box;
  outline: none;
}

.modal-input:focus {
  border-color: var(--accent);
}

.modal-section-label {
  font-size: 0.8em;
  font-weight: 600;
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 14px 0 8px;
}

.create-group-member-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
}

.create-group-member-row,
.add-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

/* ── Add-member modal ─────────────────────────────────────────────────────
   Was a flat radio list of every contact: no search, and ONE person per
   trip, so adding five people meant opening the modal five times. Now a
   searchable multi-select. */
.add-member-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  margin: 12px 0 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-dark);
}
.add-member-search:focus-within { border-color: var(--primary); }
.add-member-search svg { width: 15px; height: 15px; opacity: 0.5; flex-shrink: 0; }
/* input[type="text"] MUST be in this selector. The global rule at
   `input[type="text"]` carries identical specificity (one attribute + one
   type vs one class + one type) but is declared later in this file, so a
   plain `.add-member-search input` LOSES to it and the field gets the
   global's 2px border and 0.75rem padding back — a second box drawn inside
   this one. Matching the attribute here raises specificity enough to win. */
.add-member-search input[type="text"] {
  flex: 1;
  width: auto;
  min-width: 0;
  padding: 9px 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.9rem;
  outline: none;
}
.add-member-search input[type="text"]:focus { border: none; }

/* The LIST takes the leftover height and scrolls, rather than .modal-body
   scrolling: when the body scrolled, the confirm button sat below the fold
   and the modal opened with its primary action invisible. */
#add-group-member-modal .modal-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.add-member-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}

.add-member-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A dot, not the word "online" — it sits at a fixed position in every row so
   presence scans down the column instead of being read row by row. */
.add-member-online {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
  margin-left: auto;
}

.add-member-empty {
  font-size: 0.85em;
  opacity: 0.6;
  padding: 10px 4px;
  margin: 0;
}

.add-member-history {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  cursor: pointer;
  font-size: 0.9em;
}
.add-member-history input { accent-color: var(--accent); }

.add-member-note {
  font-size: 0.78em;
  opacity: 0.6;
  margin-top: 12px;
  line-height: 1.5;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

#confirm-add-member-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.create-group-member-row:hover,
.add-member-row:hover {
  background: var(--hover-bg);
}

.create-group-member-row input,
.add-member-row input {
  accent-color: var(--accent);
}

/* Chat area must be position:relative so the group info panel can overlay */
.chat-area {
  position: relative;
  flex: 1;
  /* A flex item defaults to min-width:auto, which means it will NOT shrink
     below its content's intrinsic width. One wide thing in a message — a
     table, a long unbreakable token, anything with white-space:pre — then
     pushes this whole column wider than its share, shoving the layout right
     and down and clipping the far edge. `flex: 1` alone does not prevent
     that; min-width:0 is what actually lets it shrink. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-dark);
}

.chat-header {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--glass-bg);
  backdrop-filter: blur(15px) saturate(160%);
  -webkit-backdrop-filter: blur(15px) saturate(160%);
  border-bottom: 1px solid var(--glass-border);
  min-height: 60px;
}

.header-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.header-call-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  line-height: 40px;
  text-align: center;
  pointer-events: auto;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.header-call-btn:hover {
  background: var(--bg-light);
  color: var(--primary);
  transform: scale(1.05);
}

.header-call-btn:active {
  transform: scale(0.95);
}

.chat-info .contact-name {
  font-size: 1.05rem;
  font-weight: 400;
}

.connection-status {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.connection-status.connected {
  color: #00d9a3;
  font-weight: 500;
}

.connection-status.online {
  color: #4caf50;
  font-weight: 500;
}

/* A contact who is online but could not be reached after repeated tries —
   see ConnectionSupervisor. Amber, not red: it keeps retrying on its own. */
.connection-status.unreachable,
.contact-status.unreachable {
  color: #f59e0b;
  font-weight: 500;
}

.conn-retry-btn {
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 11px;
  line-height: 1.5;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 10px;
  cursor: pointer;
}
.conn-retry-btn:hover { background: rgba(245, 158, 11, 0.15); }

/* Chat Tabs */
.chat-tabs {
  display: flex;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  gap: 0;
  padding: 0 0.5rem;
}

.chat-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--bg-medium);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  margin-top: 0.5rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  position: relative;
  max-width: 200px;
}

.chat-tab:hover {
  background: var(--bg-light);
}

.chat-tab.active {
  background: var(--bg-medium);
  border-bottom: 2px solid var(--primary);
  margin-top: 0;
  padding-bottom: calc(0.75rem + 1px);
}

.chat-tab-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9rem;
}

.chat-tab-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-secondary);
  flex-shrink: 0;
}

.chat-tab-indicator.unread {
  background: white;
  box-shadow: 0 0 4px white;
  animation: pulse 2s infinite;
}

.chat-tab-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex-shrink: 0;
}

.chat-tab-close:hover {
  background: var(--danger);
  color: white;
}

/* Tab Call Buttons */
.tab-call-buttons {
  display: flex;
  gap: 4px;
  margin-left: 8px;
  flex-shrink: 0;
}

.tab-call-btn {
  background: var(--bg-light);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s;
  width: 28px;
  height: 28px;
}

.tab-call-btn:hover {
  background: var(--primary);
  transform: scale(1.1);
  border-color: var(--primary);
}

.tab-call-btn:active {
  transform: scale(0.95);
}

.messages-container {
  flex: 1;
  /* Same reasoning as .chat-area — this is the second link in the chain, and
     both have to give for a wide message to stay contained. */
  min-width: 0;
  overflow-y: auto;
  padding: 16px 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Every message bubble is bounded by its column, never the other way round.
   .message already sets max-width:100%, but its wrapper did not, so a wide
   child could still widen the wrapper and push the column open. */
.message-wrap { max-width: 100%; min-width: 0; }

.welcome-message {
  text-align: center;
  margin: auto;
  max-width: 500px;
}

.logo-large {
  font-size: 5rem;
  margin-bottom: 1rem;
}

.welcome-message h2 {
  margin-bottom: 0.5rem;
}

.welcome-message p {
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.features {
  list-style: none;
  text-align: left;
  display: inline-block;
  color: var(--text-secondary);
}

.features li {
  padding: 0.5rem 0;
}

/* === MESSAGE WRAPPER (alignment + reactions container) === */
.message-wrap {
  display: flex;
  flex-direction: column;
  max-width: 75%;
  position: relative;
}

.message-wrap.sent {
  align-self: flex-end;
  align-items: flex-end;
}

.message-wrap.received {
  align-self: flex-start;
  align-items: flex-start;
}

/* Tighten gap between consecutive same-sender bubbles */
.message-wrap.sent + .message-wrap.sent,
.message-wrap.received + .message-wrap.received {
  margin-top: -1px;
}

/* Mobile: allow wider bubbles */
@media (max-width: 600px) {
  .message-wrap {
    max-width: 88%;
  }
}

/* === MESSAGE BUBBLE === */
.message {
  padding: 7px 10px 22px 10px; /* bottom 22px reserves space for absolute meta */
  border-radius: 8px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 14.5px;
  line-height: 1.45;
  position: relative;
  box-shadow: none;
  border: none;
  max-width: 100%;
  /* Minimum width so the absolute-positioned timestamp+tick never overflows the bubble.
     Meta is ~65px wide at right:9px → bubble needs ≥ 80px to contain it. */
  min-width: 80px;
}

.message-content {
  white-space: pre-wrap;
  word-break: break-word;
  display: block;
  /* Allow users to copy text from messages on desktop */
  user-select: text;
  -webkit-user-select: text;
}

/* Inline spacer after text — reserves horizontal room on the LAST line of text
   so the absolute meta never visually overlaps the message copy.
   Applied to ALL .message-content elements (no :has() needed — harmless on media). */
.message-content::after {
  content: '';
  display: inline-block;
  width: 68px;   /* approx timestamp + tick width */
  height: 0;     /* zero height — only reserves horizontal space, adds no extra line */
  vertical-align: bottom;
}

/* For block-level HTML content (file transfers, audio, attachments):
   suppress the ::after spacer — in a block formatting context it creates a
   phantom ~21px anonymous line-box (the parent's line-height) adding empty space. */
.message.has-block-content .message-content::after {
  display: none;
}

/* Collapse pre-wrap whitespace for block content — prevents leading/trailing newlines
   in the HTML string from rendering as blank lines above/below images and file bubbles. */
.message.has-block-content .message-content {
  white-space: normal;
}

/* Timestamp + tick absolutely pinned to bottom-right — WhatsApp style */
.message-meta {
  position: absolute;
  bottom: 5px;
  right: 9px;
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 14px;
  pointer-events: none;
}

.message.sent {
  background: #128C7E;
  color: #FFFFFF;
  border-radius: 8px 8px 2px 8px;
}

/* Flatten tail corner for consecutive same-sender */
.message-wrap.sent + .message-wrap.sent .message.sent {
  border-radius: 3px 8px 2px 8px;
}

.message-wrap.received + .message-wrap.received .message.received {
  border-radius: 8px 8px 8px 3px;
}

/* Light mode message colors */
body[data-theme="light"] .message.sent {
  color: #FFFFFF;
  background: #128C7E;
}

body[data-theme="light"] .message.received {
  color: #050505;
  background: #F0F2F5;
  border: none;
}

body[data-theme="light"] .message .timestamp {
  color: rgba(5, 5, 5, 0.45);
}

.message.received {
  background: #262D31;
  color: #E9EDEF;
  border-radius: 8px 8px 8px 2px;
}

.message .timestamp {
  font-size: 11px;
  color: rgba(233, 237, 239, 0.6);
  letter-spacing: 0.1px;
  white-space: nowrap;
  flex-shrink: 0;
}

.message .delivery-status {
  font-size: 11px;
  color: rgba(233, 237, 239, 0.6);
  flex-shrink: 0;
}

.message .delivery-status.read {
  color: #53bdeb;
}

body[data-theme="light"] .message .delivery-status {
  color: rgba(17, 27, 33, 0.5);
}

body[data-theme="light"] .message .delivery-status.read {
  color: #0088cc;
}

.message.file {
  cursor: pointer;
}

/* === MEDIA MESSAGES (images & video thumbnails) === */

/* Media bubble: zero padding, flush to bubble edges */
.message:has(.media-container) {
  padding: 0;
  background: transparent !important;
  border-radius: inherit;
}

/* Timestamp overlays the bottom-right of media (WhatsApp style dark pill) */
.message:has(.media-container) .message-meta {
  bottom: 6px;
  right: 8px;
  background: rgba(0,0,0,0.42);
  border-radius: 8px;
  padding: 2px 6px;
  pointer-events: none;
}

.media-container {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  max-width: 220px;
  width: fit-content;
  cursor: pointer;
  background: #111;
  vertical-align: top;
}

@media (max-width: 600px) {
  .media-container {
    max-width: 180px;
  }
}

.media-container img {
  display: block;
  max-width: 100%;     /* responsive to container width */
  max-height: 320px;   /* allow portrait images to show taller (was 200px) */
  width: auto;
  height: auto;
  border-radius: 10px;
  pointer-events: none;
  /* Prevent iOS native image popup from blocking our long-press context menu */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.media-container video {
  display: block;
  width: 220px;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  pointer-events: none;
  /* Prevent iOS native video popup from blocking our long-press context menu */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Play button overlay */
.media-container .play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  pointer-events: none;
}

/* Media caption/filename bar at bottom */
.media-container .media-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  color: #fff;
  font-size: 11px;
  padding: 18px 8px 5px 8px;
  pointer-events: none;
}

/* Media unavailable placeholder (blob expired on reload) */
.media-unavailable {
  padding: 12px 14px;
  color: var(--text-secondary, rgba(255,255,255,0.7));
  font-size: 13px;
  line-height: 1.5;
}
.media-unavailable strong { color: var(--text-primary, inherit); font-weight: 600; }
.media-unavailable small {
  font-size: 11px;
  opacity: 0.7;
  display: block;
  margin-top: 2px;
}

/* Media error fallback (blob expired after reload) */
.media-container.media-error-state {
  min-height: 80px;
  background: #1a1a1a;
}
.media-container.media-error-state::after {
  content: "Media unavailable";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255,255,255,0.4);
  font-size: 12px;
  white-space: nowrap;
}

/* === FILE TRANSFER PROGRESS BAR === */
.file-transfer-progress {
  min-width: 160px;
  max-width: 260px;
  padding: 2px 0;
}

.file-transfer-progress .progress-bar-track {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
  margin-top: 4px;
  overflow: hidden;
}

.file-transfer-progress .progress-bar-fill {
  height: 100%;
  background: rgba(255,255,255,0.85);
  border-radius: 4px;
  transition: width 0.3s ease;
  width: 0%;
}

.file-transfer-progress .progress-label {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  margin-top: 3px;
}

/* Light theme: progress bar and label colors are invisible on light bg — override */
body[data-theme="light"] .file-transfer-progress .progress-bar-track {
  background: rgba(0,0,0,0.12);
}
body[data-theme="light"] .file-transfer-progress .progress-bar-fill {
  background: rgba(0,0,0,0.45);
}
body[data-theme="light"] .file-transfer-progress .progress-label {
  color: rgba(0,0,0,0.55);
}

/* Thumbnail inside progress */
.file-transfer-progress .transfer-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 6px;
  display: block;
}

.file-transfer-progress .transfer-thumb-video {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 6px;
  display: block;
  background: #000;
}

/* Meeting Invite Card */
.meeting-invite-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 16px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 320px;
  margin: 4px 0;
}

.meeting-invite-card .invite-icon {
  font-size: 32px;
  text-align: center;
  margin-bottom: 8px;
}

.meeting-invite-card .invite-content {
  text-align: center;
}

.meeting-invite-card .invite-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #fff;
}

.meeting-invite-card .invite-room-name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #fff;
}

.meeting-invite-card .invite-time {
  font-size: 12px;
  opacity: 0.85;
  color: rgba(255, 255, 255, 0.85);
}

.meeting-invite-card .invite-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.meeting-invite-card .invite-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.meeting-invite-card .join-btn {
  background: #fff;
  color: #667eea;
}

.meeting-invite-card .join-btn:hover {
  background: #f0f0f0;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.meeting-invite-card .decline-btn {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.meeting-invite-card .decline-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.meeting-invite-card .invite-declined {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  text-align: center;
  font-style: italic;
}

/* Light theme adjustments */
body[data-theme="light"] .meeting-invite-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

.message.file:hover {
  opacity: 0.8;
}

.message img {
  max-width: 280px;
  max-height: 280px;
  border-radius: 12px;
  margin-top: 4px;
  display: block;
  object-fit: cover;
  border: none;
}

.system-message {
  text-align: center;
  color: var(--text-secondary);
  font-size: 12.5px;
  padding: 8px 12px;
  margin: 8px auto;
  max-width: 80%;
  background: rgba(11, 20, 26, 0.6);
  border-radius: 7.5px;
  font-weight: 400;
}

/* Light mode system message */
body[data-theme="light"] .system-message {
  background: rgba(17, 27, 33, 0.08);
  color: #667781;
}

/* Date separators — groups messages by day, WhatsApp/Telegram-style */
.date-divider {
  display: flex;
  justify-content: center;
  margin: 14px 0 10px;
}

.date-divider span {
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 12px;
  border-radius: 12px;
  background: rgba(11, 20, 26, 0.6);
}

body[data-theme="light"] .date-divider span {
  background: rgba(17, 27, 33, 0.08);
  color: #667781;
}

/* ========================================
   MESSAGE INTERACTIONS
   ======================================== */

/* Context menu - compact, native-feel */
.message-context-menu {
  background: rgba(22, 28, 32, 0.97);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3);
  padding: 4px 0;
  min-width: 148px;
  z-index: 10000;
  animation: menuSlideIn 0.15s cubic-bezier(0.2, 0, 0, 1.2);
}

body[data-theme="light"] .message-context-menu {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(0, 0, 0, 0.09);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
}

@keyframes menuSlideIn {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.context-menu-item {
  padding: 8px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(233, 237, 239, 0.9);
  font-size: 13px;
  font-weight: 400;
  transition: background 0.1s;
  user-select: none;
}

body[data-theme="light"] .context-menu-item {
  color: #1a1a1a;
}

.context-menu-item svg {
  flex-shrink: 0;
  opacity: 0.65;
}

.context-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
  padding-left: 14px;
}

body[data-theme="light"] .context-menu-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

.context-menu-delete {
  color: #e05555;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin-top: 2px;
  padding-top: 8px;
}

body[data-theme="light"] .context-menu-delete {
  color: #d93025;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* ── MULTI-SELECT MODE ──────────────────────────────────────────────── */

/* Selected bubble highlight */
.message-wrap.selected {
  background: rgba(18, 140, 126, 0.18);
  border-radius: 6px;
}
.message-wrap.selected .message {
  outline: 2px solid rgba(18, 140, 126, 0.55);
  outline-offset: 1px;
}

/* Action bar that appears at the bottom during selection */
.selection-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: var(--bg-medium, #1E2428);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.35);
  animation: slideUp 0.18s ease;
}
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.sel-cancel-btn {
  background: none;
  border: none;
  color: var(--text-secondary, rgba(255,255,255,0.6));
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.sel-count {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary, #E9EDEF);
  font-weight: 500;
}
.sel-actions {
  display: flex;
  gap: 8px;
}
.sel-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  border: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.sel-delete-btn {
  background: rgba(224, 85, 85, 0.18);
  color: #e05555;
}
.sel-delete-btn:hover { background: rgba(224, 85, 85, 0.3); }
.sel-forward-btn {
  background: rgba(18, 140, 126, 0.18);
  color: #25d366;
}
.sel-forward-btn:hover:not(:disabled) { background: rgba(18, 140, 126, 0.3); }
.sel-forward-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Forward contact picker modal */
.forward-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 3000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.forward-modal {
  background: var(--bg-medium, #1E2428);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.2s ease;
}
.forward-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #E9EDEF);
}
.forward-modal-close {
  background: none;
  border: none;
  color: var(--text-secondary, rgba(255,255,255,0.5));
  font-size: 18px;
  cursor: pointer;
}
.forward-modal-list {
  overflow-y: auto;
  padding: 8px 0;
}
.forward-contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.12s;
}
.forward-contact-item:hover { background: rgba(255,255,255,0.06); }
.forward-contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #128C7E;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}
.forward-contact-item span {
  font-size: 14px;
  color: var(--text-primary, #E9EDEF);
}

.context-menu-delete svg {
  opacity: 0.8;
}

.context-menu-delete:hover {
  background: rgba(220, 53, 53, 0.12);
}

/* Reaction picker */
.reaction-picker {
  background: #1e1e2e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  padding: 5px 8px;
  display: flex;
  gap: 2px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0,0,0,0.3);
  z-index: 10000;
  white-space: nowrap;
  animation: reactionPop 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes reactionPop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.reaction-emoji {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 50%;
  transition: transform 0.12s ease, background 0.12s ease;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reaction-emoji:hover, .reaction-emoji:active {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.35);
}

/* Reaction badges — outside bubble (WhatsApp style), sibling of .message in .message-wrap */
.message-reactions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  max-width: 100%;
  margin-top: -6px; /* overlap bottom edge of bubble slightly */
  margin-left: 8px;
  position: relative;
  z-index: 1;
}

/* Sent messages: right-align reactions */
.message-wrap.sent .message-reactions {
  justify-content: flex-end;
  margin-left: 0;
  margin-right: 8px;
}

/* Fallback if .message-reactions is still inside bubble (legacy) */
.message .message-reactions {
  margin-top: 4px;
  margin-left: 0;
  margin-right: 0;
}

.message.sent .message-reactions {
  justify-content: flex-end;
}

.reaction-badge {
  background: #1E1E2E;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.1s ease;
}

.reaction-badge:hover {
  transform: scale(1.1);
}

body[data-theme="light"] .reaction-badge {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Reaction badge pop animation */
@keyframes reactionBadgePop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.25); opacity: 1; }
  80%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}
.reaction-badge-animate {
  animation: reactionBadgePop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.reaction-count {
  font-size: 11px;
  font-weight: 600;
  margin-left: 2px;
  opacity: 0.85;
}

/* Reaction picker "more" button */
.reaction-more {
  font-size: 15px !important;
  font-weight: 700;
  opacity: 0.6;
  letter-spacing: -1px;
}
.reaction-more:hover { opacity: 1; }

/* ── Emoji Panel ──────────────────────────────────────────────── */
.emoji-panel {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  left: auto;
  min-width: 300px;
  max-width: 340px;
  width: max-content;
  background: #1a1a2e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 12px;
  z-index: 9998;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0,0,0,0.3);
  animation: slideUpPanel 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  /* Ensure panel never bleeds past the viewport edge */
  max-height: min(380px, 60vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

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

.emoji-search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 7px 12px;
  color: #fff;
  font-size: 13px;
  margin-bottom: 10px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.emoji-search-input:focus {
  border-color: var(--primary, #7c6af7);
}
.emoji-search-input::placeholder { color: rgba(255,255,255,0.3); }

.emoji-cat-bar {
  display: flex;
  gap: 2px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}

.emoji-cat-btn {
  background: transparent;
  border: none;
  font-size: 17px;
  cursor: pointer;
  padding: 4px 7px;
  border-radius: 8px;
  opacity: 0.45;
  transition: opacity 0.15s, background 0.15s;
  line-height: 1;
}
.emoji-cat-btn.active,
.emoji-cat-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

.emoji-cat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 6px;
  padding-left: 2px;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1px;
  max-height: 200px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.emoji-item {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 5px 3px;
  border-radius: 7px;
  line-height: 1;
  text-align: center;
  transition: background 0.1s, transform 0.1s;
}
.emoji-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.22);
}
.emoji-item:active { transform: scale(0.95); }

.emoji-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: rgba(255,255,255,0.3);
  font-size: 13px;
  padding: 20px 0;
}

/* Emoji toggle button */
.emoji-btn-toggle {
  flex-shrink: 0;
}

/* ── Big emoji messages ────────────────────────────────────────── */
.message.big-emoji {
  background: transparent !important;
  box-shadow: none !important;
  padding: 2px 6px !important;
}
.message.big-emoji .message-content {
  font-size: 2.6rem;
  line-height: 1.15;
}
.message.big-emoji .message-meta {
  opacity: 0.55;
  font-size: 11px;
}

/* Light theme emoji panel */
body[data-theme="light"] .emoji-panel {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.15);
}
body[data-theme="light"] .emoji-search-input {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.12);
  color: #111;
}
body[data-theme="light"] .emoji-search-input::placeholder { color: rgba(0,0,0,0.35); }
body[data-theme="light"] .emoji-cat-btn { opacity: 0.5; }
body[data-theme="light"] .emoji-cat-btn.active,
body[data-theme="light"] .emoji-cat-btn:hover {
  opacity: 1;
  background: rgba(0,0,0,0.07);
}
body[data-theme="light"] .emoji-cat-label { color: rgba(0,0,0,0.4); }
body[data-theme="light"] .emoji-item:hover { background: rgba(0,0,0,0.07); }

/* Reply preview in message */
.message-reply-preview {
  background: rgba(0, 0, 0, 0.15);
  border-left: 2px solid var(--primary);
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 8px;
  font-size: 13px;
  display: flex;
  gap: 8px;
  cursor: pointer;
}

.message-reply-preview:hover {
  background: rgba(0, 217, 163, 0.12);
}

@keyframes msgHighlight {
  0%, 35% { box-shadow: 0 0 0 3px rgba(0, 217, 163, 0.75), 0 0 14px rgba(0, 217, 163, 0.4); }
  100%    { box-shadow: 0 0 0 3px rgba(0, 217, 163, 0),    0 0 14px rgba(0, 217, 163, 0); }
}

.message-highlight {
  animation: msgHighlight 2.9s ease-out forwards;
  border-radius: 8px;
}

.reply-line {
  display: none;
}

.reply-content {
  flex: 1;
}

.reply-author {
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 3px;
  font-size: 12px;
}

.reply-text {
  color: var(--text-secondary);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.8;
}

/* .message.sent has a solid teal-green background (#128C7E) with white text —
   reply-author/.reply-text were using the app-wide muted gray/teal meant for
   the dark page background, which is low-contrast (teal-on-teal, dim gray-on-
   teal) on a sent bubble specifically. Received bubbles are dark/neutral, so
   the default colors above already read fine there — only sent needs this. */
/* Timestamp + delivery ticks on a SENT bubble (solid teal-green, white text).
   Two separate reasons this kept coming back dark:
   1. The 1-1 chat renderer emits <span class="timestamp">, while the GROUP
      renderer emits <span class="message-time-text">. An earlier fix covered
      only the latter — which is exactly why groups looked right and 1-1 did
      not. Both are covered here.
   2. `body[data-theme="light"] .message .timestamp` (and the matching
      .delivery-status rule) sets near-black for readability on the LIGHT
      theme's pale received bubbles — but it applies to sent bubbles too,
      where near-black on teal-green is the "time not visible" report. That
      selector carries an attribute + two classes, so it outranks a plain
      `.message.sent .timestamp`; the light-theme variants below are spelled
      out explicitly to win rather than relying on source order alone. */
.message.sent .message-meta,
.message.sent .timestamp,
.message.sent .message-time-text,
.message.sent .delivery-status,
body[data-theme="light"] .message.sent .timestamp,
body[data-theme="light"] .message.sent .message-time-text,
body[data-theme="light"] .message.sent .delivery-status {
  color: rgba(255, 255, 255, 0.92);
}

/* Read receipts stay visually distinct from plain sent/delivered, but the
   stock #53bdeb blue is muddy against this green — a light cyan reads
   cleanly on it in both themes. */
.message.sent .delivery-status.read,
body[data-theme="light"] .message.sent .delivery-status.read {
  color: #9fe8ff;
}

.message.sent .reply-author {
  color: #FFFFFF;
}
.message.sent .reply-text {
  color: rgba(255, 255, 255, 0.85);
  opacity: 1;
}

/* Reply Bar - WhatsApp Style (Above Input) */
.reply-preview-bar {
  background: var(--bg-medium);
  border-top: 1px solid var(--border-color);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: slideUp 0.2s ease-out;
  position: relative;
}

.reply-bar-line {
  width: 4px;
  background: var(--primary);
  border-radius: 2px;
  align-self: stretch;
  flex-shrink: 0;
}

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

.reply-bar-header {
  color: var(--primary);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 2px;
}

.reply-bar-text {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.reply-bar-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 20px;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reply-bar-close:hover {
  background: var(--hover-color);
  color: var(--text-primary);
}

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

@media (max-width: 768px) {
  .reply-preview-bar {
    padding: 10px 12px;
  }
  
  .reply-bar-text {
    font-size: 13px;
    -webkit-line-clamp: 1;
  }
  
  .reply-bar-close {
    width: 28px;
    height: 28px;
    font-size: 18px;
    padding: 4px;
  }
}

/* Reply preview in input area */
.reply-preview-input {
  background: var(--bg-medium);
  border-bottom: 1px solid var(--border-color);
  padding: 8px 12px;
  animation: slideDown 0.2s ease-out;
  position: relative;
  z-index: 1;
}

/* Mobile optimization: ULTRA COMPACT reply preview */
@media (max-width: 768px) {
  .reply-preview-input {
    padding: 6px 10px;
    border-left: 3px solid var(--primary);
    background: rgba(16, 185, 129, 0.08);
  }
  
  .reply-preview-content {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  
  .reply-preview-header {
    margin-bottom: 0;
    flex-shrink: 0;
  }
  
  .reply-icon {
    font-size: 14px;
  }
  
  .reply-label {
    display: none; /* Hide "Replying to" text on mobile */
  }
  
  .reply-preview-text {
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
  }
  
  .reply-cancel {
    padding: 2px 6px;
    font-size: 18px;
  }
}

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

.reply-preview-content {
  display: flex;
  gap: 8px;
  align-items: center;
  max-height: 32px;
}

.reply-preview-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
}

.reply-icon {
  font-size: 16px;
}

.reply-label {
  color: var(--primary);
  font-weight: 600;
  font-size: 13px;
}

.reply-preview-text {
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.3;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reply-cancel {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 20px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.reply-cancel:hover {
  background: var(--hover-color);
  color: var(--text-primary);
}

/* Image lightbox */
.image-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
}

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

.lightbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
}

.lightbox-content {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: -50px;
  right: 0;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  font-size: 28px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.lightbox-actions {
  display: flex;
  gap: 12px;
}

.lightbox-download {
  background: var(--primary);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lightbox-download:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 217, 163, 0.3);
}

/* ======================================== */

.chat-input-area {
  padding: 10px 16px;
  background: var(--bg-medium);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: flex-end;
  position: relative; /* anchor for emoji panel */
}

/* Form Elements */
input[type="text"] {
  background: var(--bg-light);
  border: 2px solid var(--border);
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 1rem;
  transition: all 0.2s;
  width: 100%;
}

input[type="text"]:focus {
  outline: none;
  border-color: var(--primary);
}

#message-input {
  flex: 1;
  font-family: inherit;
  transition: height 0.2s ease;
  border-radius: 22px !important;
  padding: 10px 16px !important;
  font-size: 14.5px !important;
  line-height: 1.4;
  resize: none;
  max-height: 120px;
  background: var(--bg-light);
  border: 1.5px solid var(--border);
  color: var(--text-primary);
}

/* Ensure chat area has space for footer */
.chat-container {
  padding-bottom: 40px;
}

#username-input {
  margin-bottom: 1rem;
}

/* Buttons */
.btn-primary {
  background: var(--primary);
  color: white;
  border: none;
  padding: 0.875rem 1.75rem;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  min-height: 44px;
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
  background: var(--bg-light);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 0.875rem 1.75rem;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
}

.btn-secondary:hover {
  background: var(--bg-medium);
  border-color: var(--primary);
}

#login-btn {
  width: 100%;
}

.btn-icon {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.625rem 0.875rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  position: relative;
  z-index: 10;
}

.btn-icon:hover {
  background: var(--hover-bg, var(--bg-light));
  transform: scale(1.05);
}

.btn-icon:active {
  transform: scale(0.95);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.5rem;
  cursor: pointer;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.2s;
}

.menu-toggle:active {
  background: var(--bg-light);
}

/* A bookmark tab riding the sidebar's trailing edge rather than a button in
   the header. Two reasons it moved out of the header: that left slot already
   holds #menu-toggle and #back-btn (mobile swaps between them), so a third
   control there competes with navigation; and a tab ON the boundary says what
   it does — it points at the panel it hides — where a tray icon in a toolbar
   did not.

   It tracks the 320px sidebar and slides to the window edge when collapsed,
   so the control stays attached to the thing it controls. */
.sidebar-edge-toggle {
  position: fixed;
  top: 50%;
  left: 320px;                 /* == .sidebar width */
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 7px 7px 0;
  background: var(--bg-light);
  color: var(--text-secondary);
  cursor: pointer;
  opacity: 0.55;
  transition: left 0.18s ease, opacity 0.15s, color 0.15s, background 0.15s;
}
.sidebar-edge-toggle svg { width: 13px; height: 13px; }
.sidebar-edge-toggle:hover {
  opacity: 1;
  color: var(--primary);
  background: var(--bg-medium);
}
.sidebar-edge-toggle:focus-visible {
  opacity: 1;
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Collapsed: ride the window edge and flip the chevron to point back out. */
body.chat-sidebar-hidden .sidebar-edge-toggle { left: 0; }
body.chat-sidebar-hidden .sidebar-edge-toggle svg { transform: scaleX(-1); }

/* A phone in LANDSCAPE is 844px wide and sails past the 768px mobile
   breakpoint, so it was getting the desktop collapse control while the back
   button switched off — the desktop layout on a 390px-tall screen. Short
   viewport + coarse pointer is the honest test for "handheld", independent of
   which way it's turned. An 18px-wide target pinned to the screen edge also
   sits exactly in Android's back-gesture zone, which is its own reason to
   keep it off touch devices. */
@media (pointer: coarse) and (max-height: 500px) {
  .sidebar-edge-toggle { display: none !important; }
}

/* display:none, not width:0 — a zero-width flex child keeps its border and
   leaves a sliver on screen. */
body.chat-sidebar-hidden .sidebar { display: none; }

.back-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.5rem;
  cursor: pointer;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.2s;
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.back-btn:active {
  background: var(--bg-light);
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Light mode modal backdrop */
body[data-theme="light"] .modal {
  background: rgba(0, 0, 0, 0.5);
}

.modal.active {
  display: flex;
}

.modal-content {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              0 0 40px rgba(10, 197, 222, 0.08);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
}

.close-modal {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  transition: background 0.2s;
  position: relative;
  z-index: 10;
  /* Larger touch target for mobile */
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
}

.close-modal:hover {
  background: var(--bg-light);
}

.close-modal:active {
  background: var(--bg-lighter);
  transform: scale(0.95);
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.connection-request-text {
  font-size: 1.1rem;
  text-align: center;
  margin: 1rem 0;
}

.modal-description {
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.available-users-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.user-item {
  padding: 1rem;
  background: var(--bg-light);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-item:hover {
  background: var(--bg-dark);
  border-color: var(--primary);
}

.empty-state {
  text-align: center;
  color: var(--text-secondary);
  padding: 2rem;
}

/* Connecting Overlay */
.connecting-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 26, 46, 0.95);
  z-index: 2000;
  justify-content: center;
  align-items: center;
}

/* Light mode connecting overlay */
body[data-theme="light"] .connecting-overlay {
  background: rgba(240, 242, 245, 0.97);
}

.connecting-overlay.active {
  display: flex;
}

.connecting-content {
  text-align: center;
}

.spinner {
  width: 60px;
  height: 60px;
  border: 4px solid var(--border);
  border-top: 4px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1.5rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.connecting-message {
  color: var(--text-primary);
  font-size: 1.1rem;
  margin-top: 1rem;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Responsive */
@media (max-width: 768px) {
  /* Show tabs on mobile with better spacing */
  .chat-tabs {
    display: flex !important;
    overflow-x: auto;
    padding: 8px;
    gap: 8px;
  }
  
  .chat-tab {
    min-width: 120px;
    max-width: 200px;
  }
  
  .tab-call-buttons {
    display: flex !important;
    gap: 4px;
  }
  
  .tab-call-btn {
    display: flex !important;
    font-size: 1rem;
  }
  
  .sidebar {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.3s;
  }

  .sidebar.show {
    transform: translateX(0);
  }

  /* The desktop collapse is inert on phones. The sidebar here IS the contacts
     screen — navigated to by #menu-toggle and #back-btn — so display:none on
     it would leave a phone with no contacts list and no control that brings
     it back. A state remembered on a laptop must not follow the account onto
     a phone, so both the rule and its button are switched off below 768px
     rather than relying on the JS to guess the device. */
  body.chat-sidebar-hidden .sidebar { display: flex; }
  .sidebar-edge-toggle { display: none !important; }
  /* .sidebar is a fixed-position overlay here, not a flex sibling with a
     draggable width — dragging makes no sense once it's not really "next
     to" the chat area at all. */
  .sidebar-resizer { display: none !important; }

  .chat-area {
    width: 100%;
  }

  /* Was display:block + absolute-positioned children with a FIXED 60px
     padding reserved for .header-actions on the right — that math only
     worked when exactly one button was visible. With search/audio-call/
     video-call/delete all shown at once (up to 4 buttons @ 44px + gaps,
     ~180px), the absolutely-positioned actions overflowed straight over
     the centered contact name — reported live as "search button comes on
     top of name". Flex-based 3-zone layout instead: the name gets
     flex:1 + min-width:0 + ellipsis, so it always fills exactly the space
     actually left over by however many action buttons are showing, rather
     than a padding guess that has to match a variable button count. */
  .chat-header {
    display: flex !important; /* Show header on mobile */
    align-items: center;
    position: relative;
  }

  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44px, not 40: these two are the primary navigation on a phone, and
       .btn-icon beside them in the same header is already 44×44 — they were
       the smallest targets in the row while being the most used. */
    width: 44px;
    height: 44px;
    background: var(--bg-light);
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    flex-shrink: 0;
  }

  .back-btn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

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

  .chat-info {
    text-align: center;
    flex: 1;
    min-width: 0; /* required for a flex child to actually shrink below its content width */
    padding: 0 0.5rem;
    overflow: hidden;
  }

  .chat-info .contact-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-actions {
    flex-shrink: 0;
    margin-left: 0;
    gap: 2px;
  }

  /* Larger touch targets on mobile for call/delete buttons */
  .header-call-btn,
  #delete-chat-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  /* Hide chat input while a call is active on mobile */
  body.call-active .chat-input-area {
    display: none !important;
  }

  .message {
    max-width: 85%;
  }

  .chat-input-area {
    padding: 6px 8px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--bg-medium);
    border-top: 1px solid var(--border);
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
  }

  .messages-container {
    height: calc(100vh - 112px);
    height: calc(100dvh - 112px); /* Dynamic viewport for Android */
    padding-bottom: 62px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .login-container {
    padding: 2rem;
    width: 95%;
  }

  .modal-content {
    width: 95%;
    max-height: 90vh;
  }

  /* Overlay for sidebar */
  .sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
  }

  .sidebar-overlay.active {
    display: block;
  }
}

/* File Menu */
.file-menu {
  position: fixed;
  /* Position is set dynamically by JS */
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  min-width: 200px;
  max-width: 250px;
}

.file-menu-item {
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.file-menu-item:hover {
  background: var(--bg-medium);
}

.file-menu-item:active {
  background: var(--primary-dark);
}

@media (max-width: 768px) {
  .file-menu {
    /* Position is set dynamically by JS */
    min-width: auto;
    max-width: calc(100vw - 2rem);
  }
}

/* File Preview Popup */
.file-preview-popup {
  position: absolute;
  bottom: 60px;
  left: 16px;
  right: 16px;
  margin: 0 auto;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1001;
  max-width: 450px;
  display: none;
}

.file-preview-popup.show {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.file-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.file-preview-header h4 {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Shown only mid-batch (multi-file select) — empty and invisible otherwise,
   set via showFilePreview()'s queue-indicator update. */
.file-preview-queue-indicator {
  margin-left: 6px;
  font-weight: 600;
  color: var(--primary);
}

.file-preview-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.file-preview-close:hover {
  background: var(--danger);
  color: white;
}

.file-preview-content {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.file-preview-caption {
  width: 100%;
  resize: none;
  min-height: 36px;
  max-height: 100px;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-dark);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.85rem;
}

.file-preview-caption:focus {
  outline: none;
  border-color: var(--primary);
}

.file-preview-thumbnail {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
}

.file-preview-info {
  flex: 1;
  min-width: 0;
}

.file-preview-name {
  font-weight: 500;
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-preview-size {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.file-preview-actions {
  display: flex;
  gap: 0.5rem;
}

/* WhatsApp-style opt-out for image compression on send — see
   sendPendingFile()/compressImageFile() in app.js. Only shown when the
   pending file is an image; hidden (display:none) otherwise. */
/* WhatsApp-style Fast/HD/Document segmented control — see
   compressImageFile()/sendPendingFile() in app.js. Only shown for
   compressible image types; hidden (display:none) otherwise. */
.file-preview-quality-toggle {
  display: flex;
  gap: 0.25rem;
  margin: 0.5rem 0 0.25rem;
  padding: 0.2rem;
  background: var(--bg-dark);
  border-radius: 8px;
}

.file-preview-quality-btn {
  flex: 1;
  padding: 0.4rem 0.5rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.file-preview-quality-btn:hover {
  color: var(--text-primary);
}

.file-preview-quality-btn.active {
  background: var(--primary);
  color: #000;
}

.file-preview-quality-hint {
  font-size: 0.72rem;
  color: var(--text-secondary);
  opacity: 0.8;
  margin: 0 0 0.4rem 0.2rem;
  min-height: 1em;
}

/* "AI" wordmark on the Koot AI button (replaces an unreadable sparkle glyph) */
.ai-wordmark {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
  padding: 3px 5px;
  border: 1.5px solid currentColor;
  border-radius: 5px;
  display: block;
}

/* Backup & Restore (Settings → 🔐 Backup & Restore, see koot-backup.js) */
.backup-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.backup-input {
  flex: 1 1 180px;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-dark);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.85rem;
}

.backup-input:focus {
  outline: none;
  border-color: var(--primary);
}

.backup-btn {
  flex: 0 0 auto;
  padding: 9px 16px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.backup-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0 10px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.backup-check input[type="checkbox"] {
  accent-color: var(--primary);
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}

.backup-check small {
  display: block;
  opacity: 0.75;
  font-size: 0.75rem;
}

.backup-status {
  font-size: 0.8rem;
  line-height: 1.45;
  min-height: 1em;
  color: var(--text-secondary);
}

.backup-status-ok { color: var(--primary); }
.backup-status-error { color: #ff6b6b; }
.backup-status-info { color: var(--text-secondary); }

@media (max-width: 768px) {
  .backup-row { flex-direction: column; }
  .backup-input, .backup-btn { width: 100%; flex: 1 1 auto; }
}

/* Voice Recording Overlay */
.voice-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-recording {
  text-align: center;
  color: var(--text-primary);
  padding: 1.5rem;
  background: var(--bg-medium);
  border-radius: 20px;
  min-width: 300px;
  max-width: 90vw;
  width: auto;
}

.voice-animation {
  font-size: 5rem;
  animation: pulse 1s infinite;
}

/* Voice waveform canvas */
.voice-waveform {
  display: block;
  margin: 1rem auto;
  background: var(--bg-dark);
  border-radius: 8px;
  border: 1px solid var(--border);
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

#voice-timer {
  font-size: 2rem;
  margin: 1rem 0;
  font-family: monospace;
  color: var(--primary);
}

.voice-hint {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.voice-controls {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.voice-controls button {
  min-width: 100px;
  padding: 10px 16px;
  font-size: 0.9rem;
  flex: 1 1 auto;
  max-width: 140px;
}

@media (max-width: 480px) {
  .voice-recording {
    padding: 1rem;
    min-width: 280px;
  }
  
  .voice-animation {
    font-size: 3.5rem;
  }
  
  #voice-timer {
    font-size: 1.5rem;
  }
  
  .voice-controls {
    gap: 0.5rem;
  }
  
  .voice-controls button {
    min-width: 80px;
    padding: 8px 12px;
    font-size: 0.85rem;
  }
}

#voice-cancel {
  padding: 12px 32px;
  font-size: 1rem;
}

/* File upload progress */
.file-progress {
  margin: 8px 0;
  padding: 12px;
  background: var(--bg-light);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.file-progress-bar {
  height: 6px;
  background: var(--bg-medium);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
}

.file-progress-fill {
  height: 100%;
  background: var(--primary);
  transition: width 0.3s;
}

/* Enhanced send button */
#send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
}

/* File attachment styles */
.file-attachment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.2s;
  max-width: 300px;
}

.file-attachment:hover {
  background: var(--bg-medium);
  transform: translateY(-2px);
}

/* Inside a message bubble — remove redundant inner background to avoid box-in-box */
.message .file-attachment {
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.1);
  color: inherit;
  padding: 7px 10px;
}

.message .file-attachment:hover {
  background: rgba(0,0,0,0.28);
  transform: none;
}

body[data-theme="light"] .message .file-attachment {
  background: rgba(0,0,0,0.07);
  border: 1px solid rgba(0,0,0,0.1);
}

.file-attachment span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-attachment small {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* Compact file bubble (replaces file-attachment inside messages) */
.file-bubble {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  min-width: 180px;
  max-width: 240px;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
  background: rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.08);
}
.file-bubble:active { opacity: 0.75; }
body[data-theme="light"] .file-bubble {
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.1);
}
.file-bubble-icon {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
}
.file-bubble-info {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.file-bubble-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* What the document actually CONTAINS — section headings, row counts, slide
   titles. The card previously showed only a name and "Open in Koot
   Documents", so after several AI edits there was no way to tell what had
   changed, or whether anything had, without leaving the chat. Two lines are
   allowed because one is too few for a list of section names, and a third
   starts competing with the message around it. */
.file-bubble-preview {
  font-size: 11.5px;
  line-height: 1.4;
  opacity: 0.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.file-bubble-meta {
  font-size: 11px;
  opacity: 0.55;
}

/* ============================================================
   AI REPLY FORMATTING
   ------------------------------------------------------------
   Rendered markdown inside a message bubble. Sized DOWN from
   normal document proportions on purpose: a chat bubble is not a
   page, and an <h3> at document scale inside one reads as
   shouting. The job here is scannable structure at message
   scale — headings that separate, lists that align, code that is
   obviously code — not a miniature document.
   ============================================================ */

.message-content .ai-md-h {
  font-size: 1em;
  font-weight: 700;
  margin: 10px 0 4px;
  line-height: 1.3;
}
.message-content .ai-md-h:first-child { margin-top: 0; }

/* Paragraph spacing has to be tight. Default margins leave a bubble looking
   like it has holes in it, because the bubble itself already supplies the
   padding a page would rely on margins for. */
.message-content p { margin: 0 0 6px; }
.message-content p:last-child { margin-bottom: 0; }

.message-content .ai-md-list {
  margin: 4px 0 8px;
  padding-left: 20px;
}
.message-content .ai-md-list li { margin-bottom: 3px; }
.message-content .ai-md-list li:last-child { margin-bottom: 0; }

.message-content .ai-md-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(127, 127, 127, 0.18);
}

.message-content .ai-md-pre {
  margin: 6px 0;
  padding: 9px 11px;
  border-radius: 7px;
  background: rgba(127, 127, 127, 0.16);
  /* Long lines scroll inside the block rather than stretching the bubble —
     without this a single wide code line widens the whole conversation. */
  overflow-x: auto;
  max-width: 100%;
}
.message-content .ai-md-pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  white-space: pre;
  background: none;
  padding: 0;
}

/* A table in an AI reply had NO styling at all, so it sized to its content
   and became the widest thing in the conversation — the classic way a chat
   column gets forced open. Scrolls inside its own bubble instead, the same
   treatment .ai-md-pre already had. */
.message-content table {
  /* Deliberately NOT display:block + overflow-x. That does make a wide table
     scroll, but it also stops it being a table: thead/tbody become plain
     blocks and every row sizes its own columns independently, so nothing
     lines up. Staying display:table with max-width keeps the column model,
     and auto layout compresses and wraps cells to fit instead. */
  max-width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 0.9em;
}
.message-content th,
.message-content td {
  border: 1px solid rgba(127, 127, 127, 0.35);
  padding: 4px 8px;
  text-align: left;
  /* Lets a long cell wrap rather than forcing the table wider than the
     bubble — the wrapping is what makes max-width above achievable. */
  overflow-wrap: anywhere;
}
.message-content th { background: rgba(127, 127, 127, 0.16); font-weight: 600; }

/* Long URLs and identifiers are the other thing that refuses to wrap. */
.message-content a { overflow-wrap: anywhere; }

.message-content .ai-md-quote {
  margin: 6px 0;
  padding: 2px 0 2px 10px;
  border-left: 3px solid rgba(127, 127, 127, 0.4);
  opacity: 0.9;
}

.message-content .ai-md-hr {
  border: none;
  border-top: 1px solid rgba(127, 127, 127, 0.3);
  margin: 10px 0;
}

/* rgba greys throughout rather than theme tokens: these bubbles render on a
   green sent background, a grey received one, and both themes — a
   translucent grey is legible on all of them, a fixed colour is not. */
.message-content strong { font-weight: 700; }
.message-content a { text-decoration: underline; }
.file-bubble-dl {
  font-size: 16px;
  flex-shrink: 0;
  opacity: 0.6;
  padding: 4px;
  line-height: 1;
}
.file-bubble:hover .file-bubble-dl { opacity: 1; }
.file-bubble-dl.downloading, .file-bubble-dl-btn.downloading {
  opacity: 1;
  animation: fileDlSpin 0.8s linear infinite;
}
@keyframes fileDlSpin {
  to { transform: rotate(360deg); }
}

/* Combined open+download card — one message instead of two separate ones for
   the same file. .file-bubble-combo carries the card chrome (background/
   border/radius), .file-bubble-main is the open-in-Documents click target,
   .file-bubble-dl-btn is a separate small download control on the same card
   (can't nest an <a> inside another <a>, hence two link elements side by
   side rather than one wrapping both). */
.file-bubble-combo {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  min-width: 180px;
  max-width: 240px;
  border-radius: 10px;
  background: rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.08);
}
body[data-theme="light"] .file-bubble-combo {
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.1);
}
.file-bubble-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.file-bubble-main:active { opacity: 0.75; }
.file-bubble-dl-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 13px;
  text-decoration: none;
  color: inherit;
  opacity: 0.65;
  background: rgba(255,255,255,0.06);
  transition: background 0.15s, opacity 0.15s;
}
body[data-theme="light"] .file-bubble-dl-btn {
  background: rgba(0,0,0,0.05);
}
.file-bubble-dl-btn:hover {
  opacity: 1;
  background: rgba(255,255,255,0.12);
}
body[data-theme="light"] .file-bubble-dl-btn:hover {
  background: rgba(0,0,0,0.1);
}

.audio-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--bg-light);
  border-radius: 8px;
}

/* Inside a message bubble — remove redundant inner background/padding */
.message .audio-message {
  background: transparent;
  padding: 2px 0;
  border-radius: 0;
  gap: 6px;
}

.audio-message audio {
  height: 36px;
  min-width: 150px;
  flex-shrink: 0;
}

/* Image message styles */
.message img {
  max-width: 300px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.message img:hover {
  transform: scale(1.02);
}

/* ============ VOICE & VIDEO CALLS ============ */

/* Call buttons in header */
.call-buttons {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 0.5rem;
}

.call-btn {
  background: var(--bg-light);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.call-btn:hover {
  background: var(--primary);
  transform: scale(1.1);
}

.call-btn:active {
  transform: scale(0.95);
}

/* Call Overlay — floating panel (draggable, expandable) */
.call-overlay {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 420px;   /* wide enough for the other person AND your own picture */
  /* Theme-aware, not hardcoded dark — --glass-bg/--glass-border are already
     pre-baked per theme (dark: near-black glass, light: white glass) the
     same way the rest of Koot's floating surfaces work. The video area
     itself (.video-container below) intentionally stays black regardless
     of theme — that part needs to letterbox arbitrary video content, not
     match the app chrome. */
  /* Opaque, not frosted glass: a blurred backdrop BEHIND a live <video> makes some graphics drivers (many Windows GPUs)
     draw the video black while the call is perfectly connected. */
  background: var(--bg-medium);
  border-radius: 20px;
  z-index: 500; /* Below modals/notifications but above chat */
  display: flex;
  align-items: stretch;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--glass-border);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  /* No drag-to-stretch handle. It let the floating window grow taller than its own content (a blank band
     under the buttons) and past the top / left edge of the screen — and because the window is anchored to
     the bottom-right corner it grew the wrong way. The Expand button is the way to make it bigger. */
  resize: none;
  /* Never larger than the screen, whatever happens to its size. */
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
}

/* Fullscreen mode — toggled by expand button or on mobile */
.call-overlay.call-fullscreen {
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0;
  bottom: auto;
  right: auto;
  left: 0;
  top: 0;
  resize: none;
  max-width: none;
  max-height: none;
}

.call-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Fullscreen container fills viewport */
.call-overlay.call-fullscreen .call-container {
  height: 100vh;
  height: 100dvh;
}

.call-header {
  padding: 0.7rem 0.9rem;
  background: var(--bg-medium);
  border-bottom: 1px solid var(--border);
  z-index: 10000;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  cursor: grab; /* draggable affordance */
  gap: 0.5rem;
}

.call-header:active {
  cursor: grabbing;
}

.call-header-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.call-header-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.call-expand-btn {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: var(--hover-bg);
  color: var(--text-primary);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
  flex-shrink: 0;
}

.call-expand-btn:active {
  transform: scale(0.92);
}

.call-expand-btn:hover {
  background: var(--border);
}

.call-header h3 {
  margin: 0 0 0.15rem 0;
  font-size: 0.95rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* Fullscreen header — bigger text, centered */
.call-overlay.call-fullscreen .call-header {
  padding: 1rem;
}

.call-overlay.call-fullscreen .call-header h3 {
  font-size: 1.5rem;
  max-width: none;
}

#call-status {
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 400;
  text-align: left;
}

.call-overlay.call-fullscreen #call-status {
  text-align: center;
}

.video-container {
  flex: none; /* floating: don't grow */
  aspect-ratio: 16 / 9; /* size from width — no black bars at bottom */
  height: auto;
  position: relative;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fullscreen: video fills remaining space */
.call-overlay.call-fullscreen .video-container {
  flex: 1;
  height: auto;
  min-height: 0;
}

.remote-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover; /* fill the container — no black bars in floating PiP mode */
  background: #000;
  display: none;
  z-index: 1;
}

/* In fullscreen, prefer contain (shows full screen share without clipping) */
.call-overlay.call-fullscreen .remote-video {
  object-fit: contain;
}

/* Show remote video during video calls or screen sharing */
.remote-video.screen-share-active {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* letterbox — never clips screen content */
  background: #000;
  z-index: 10;
}

/* Local self-view corner, while viewing a peer's shared screen (1-on-1 call).
   Previously built entirely from inline style.cssText writes in app.js, reset
   by clearing cssText back to '' on stop — any inline property the stop path
   forgot to touch would just linger. A plain class on the shared ancestor
   (same pattern as .call-overlay.call-fullscreen below) means "stop" is a
   single classList.remove(), with nothing left to forget. */
.call-overlay.screen-sharing .local-video-wrapper {
  position: absolute;
  width: 120px;
  height: 80px;
  bottom: 80px;
  right: 16px;
  top: auto;
  left: auto;
  z-index: 200;
}

@media (max-width: 768px) {
  .call-overlay.screen-sharing .local-video-wrapper {
    width: 80px;
    height: 106px;
    bottom: 80px;
    right: 10px;
  }
}

/* Fullscreen mode for screen sharing */
.video-container.fullscreen-share {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background: #000;
}

.video-container.fullscreen-share .remote-video {
  width: 100%;
  height: 100%;
}

.local-video {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 150px;
  max-width: 25vw; /* Responsive on small screens */
  height: 200px;
  max-height: 25vh;
  max-height: 25dvh; /* Use dynamic viewport for mobile */
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid var(--primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  background: #000;
  z-index: 10;
}

.local-video-wrapper {
  position: absolute;
  top: auto;
  bottom: 0.6rem;
  right: 0.6rem;
  /* A corner picture in proportion to the window (about a quarter of its width), never so big it hides the other person.
     The window is 420px wide, so this is ~118px: the other person's face stays clear and you can still see yourself. */
  width: clamp(96px, 28%, 190px);
  aspect-ratio: 4 / 3;
  z-index: 100;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.14);
  cursor: grab;
  transition: box-shadow 0.2s, transform 0.2s;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

.local-video-wrapper:active {
  cursor: grabbing;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
  transform: scale(1.02);
}

.local-video-wrapper .local-video {
  position: static;
  width: 100%;
  height: 100%;
  top: auto;
  right: auto;
  max-width: none;
  max-height: none;
  border: none;
  box-shadow: none;
  border-radius: 12px;
  overflow: hidden;
}

/* Resize handle for local video */
.video-resize-handle {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  cursor: nwse-resize;
  z-index: 110;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

.video-resize-handle:hover {
  background: rgba(0, 0, 0, 0.8);
}

.flip-camera-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.2s, background 0.2s;
  z-index: 20;
}

.flip-camera-btn:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.7);
}

.flip-camera-btn:active {
  transform: scale(0.95);
}

/* Connection-quality indicator — signal bars SVG rendered by JS (app.js
   _renderCallQualityIcon), tier set via class: quality-good/fair/poor/bad */
.call-quality-indicator {
  display: none;
  position: absolute;
  top: 8px;
  left: 8px;
  align-items: flex-end;
  gap: 2px;
  width: 26px;
  height: 22px;
  padding: 4px 5px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.62);
  z-index: 20;
  cursor: default;
}

.call-quality-indicator svg {
  display: block;
}

.call-quality-indicator.quality-good { color: var(--success); }
.call-quality-indicator.quality-fair { color: #FFB020; }
.call-quality-indicator.quality-poor,
.call-quality-indicator.quality-bad { color: var(--danger); }

.call-overlay.call-fullscreen .call-quality-indicator {
  top: 1.25rem;
  left: 1.25rem;
  width: 34px;
  height: 28px;
  padding: 5px 6px;
}

.call-timer {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, rgba(0,217,163,0.16), rgba(0,0,0,0.55));
  border: 1px solid rgba(0,217,163,0.25);
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  z-index: 3001;
  white-space: nowrap;
}

.call-timer-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
  flex-shrink: 0;
  animation: call-timer-pulse 1.6s ease-in-out infinite;
}

@keyframes call-timer-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

/* Fullscreen timer — bigger */
.call-overlay.call-fullscreen .call-timer {
  top: 1.5rem;
  font-size: 1.2rem;
  padding: 0.55rem 1.1rem;
}

.call-controls {
  padding: 0.85rem;
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  background: var(--bg-medium);
  border-top: 1px solid var(--border);
  z-index: 10000; /* Above everything including video */
  position: relative;
  flex-shrink: 0; /* Prevent controls from being compressed */
}

/* Fullscreen controls — more padding */
.call-overlay.call-fullscreen .call-controls {
  padding: 2rem;
  gap: 1.5rem;
}

.control-btn {
  width: 50px; /* Compact for floating panel, still a real touch target */
  height: 50px;
  border-radius: 50%;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
  /* Was a fixed rgba(255,255,255,0.08) — on the dark theme that's a
     near-invisible tint against the control bar (the reported "buttons are
     black/hard to see" issue), and it never adapted for light theme at
     all. var(--bg-light) is a real, distinctly-shaded solid-ish surface
     tone in both themes (lighter than the control bar's own
     --bg-medium in dark mode, a visible grey in light mode) — genuine
     contrast either way, not a barely-there overlay. */
  background: var(--bg-light);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
  min-width: 50px;
  min-height: 50px;
}

/* Fullscreen buttons — bigger */
.call-overlay.call-fullscreen .control-btn {
  width: 64px;
  height: 64px;
  font-size: 1.5rem;
  min-width: 64px;
  min-height: 64px;
}

.control-btn:hover {
  transform: translateY(-2px);
  background: var(--primary);
  box-shadow: 0 4px 14px rgba(0, 217, 163, 0.35);
}

.control-btn:active {
  transform: scale(0.94) translateY(0);
}

.control-btn.muted {
  background: var(--danger);
}

.control-btn.speaker-off {
  background: var(--border);
}

.control-btn.video-off {
  background: var(--border);
}

/* Camera-off overlay on local video PiP (shown when user mutes camera) */
.local-camera-off-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  z-index: 5;
  pointer-events: none;
}

.end-call-btn {
  background: var(--danger);
}

/* ─── Group Voice Call ──────────────────────────────────────────────── */

/* Voice-call trigger button in group header */
.group-call-start-btn {
  color: #4caf8d;
  margin-right: 4px;
}
.group-call-start-btn:hover {
  background: rgba(76, 175, 80, 0.12);
  color: #43a047;
}

/* Active call bar — sits above the messages */
.group-call-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px 8px;
  background: linear-gradient(135deg, #1a2533 0%, #1c2d3b 100%);
  border-bottom: 1px solid rgba(76, 175, 141, 0.25);
  z-index: 10;
  flex-shrink: 0;
}
.call-bar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.call-bar-label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: calc(100% - 64px);
  padding: 2px 8px 2px 4px;
  margin: 0 0 0 -4px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #7ecfb0;
  cursor: pointer;
  text-align: left;
}
.call-bar-label:hover { background: rgba(255,255,255,.08); }
.call-bar-label:focus-visible { outline: 2px solid #7ecfb0; outline-offset: 1px; }
.call-bar-live {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00d9a3;
  box-shadow: 0 0 0 3px rgba(0, 217, 163, .22);
}
.call-bar-group {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e6f6ef;
  font-size: 13px;
}
.call-bar-count {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  color: rgba(126, 207, 176, .85);
  white-space: nowrap;
}
.call-bar-duration {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.55);
  background: rgba(0,0,0,.18);
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: .03em;
}
.call-participants-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 48px;
  align-items: center;
}
.call-participant {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
  min-width: 46px;
}
.call-participant-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--avatar-hue, 150) 42% 34%), hsl(calc(var(--avatar-hue, 150) + 35) 46% 28%));
  color: #f1f8f5;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(126, 207, 176, 0.3);
}
.call-participant-muted .call-participant-avatar {
  border-color: rgba(255, 82, 82, 0.5);
  opacity: .75;
}
/* Active speaker glow */
@keyframes speakPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 217, 163, 0.7); }
  50%       { box-shadow: 0 0 0 5px rgba(0, 217, 163, 0); }
}
.call-participant-avatar.speaking {
  border-color: #00d9a3;
  animation: speakPulse 0.9s ease-in-out infinite;
}
/* Bigger calls: smaller avatars, then no name labels (hover/long-press shows the name),
   and the strip scrolls rather than pushing the chat off screen. */
.call-participants-row.size-compact { gap: 6px; max-height: 128px; overflow-y: auto; }
.call-participants-row.size-compact .call-participant { min-width: 40px; }
.call-participants-row.size-compact .call-participant-avatar { width: 30px; height: 30px; font-size: 11px; }
.call-participants-row.size-compact .call-participant-name { max-width: 44px; font-size: 9px; }
.call-participants-row.size-dense { gap: 5px; max-height: 112px; overflow-y: auto; }
.call-participants-row.size-dense .call-participant { min-width: 0; }
.call-participants-row.size-dense .call-participant-avatar { width: 26px; height: 26px; font-size: 10px; border-width: 1.5px; }
.call-participants-row.size-dense .call-participant-name { display: none; }
.call-participants-row.size-compact .call-mute-badge, .call-participants-row.size-compact .call-reconnect-badge { bottom: 12px; }
.call-participants-row.size-dense .call-mute-badge, .call-participants-row.size-dense .call-reconnect-badge { bottom: 0; right: -4px; }
.call-participant-name {
  font-size: 10px;
  color: rgba(255,255,255,.65);
  max-width: 52px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.call-mute-badge {
  position: absolute;
  bottom: 18px;
  right: -3px;
  font-size: 10px;
  line-height: 1;
}
/* Reconnecting — a network hiccup on that participant's side, not a real departure */
@keyframes reconnectSpin {
  to { transform: rotate(360deg); }
}
.call-participant-reconnecting .call-participant-avatar {
  border-color: rgba(245, 166, 35, 0.6);
  border-style: dashed;
  opacity: .8;
}
.call-reconnect-badge {
  position: absolute;
  bottom: 18px;
  right: -3px;
  font-size: 10px;
  line-height: 1;
  animation: reconnectSpin 1.2s linear infinite;
  display: inline-block;
}
/* Per-participant network quality badge — a live signal, distinct from the
   reconnecting state (that's ICE actually failing; this is "connected but degraded"). */
.call-quality-badge {
  position: absolute;
  top: -2px;
  right: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(10, 14, 12, 0.9);
  display: none;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  padding: 3px 2px 2px;
  box-sizing: border-box;
}
.call-quality-badge svg { display: block; }
.call-participant.quality-fair .call-quality-badge { display: flex; color: #FFB020; }
.call-participant.quality-poor .call-quality-badge,
.call-participant.quality-bad .call-quality-badge { display: flex; color: var(--danger); }
.call-bar-actions {
  display: flex;
  gap: 8px;
}
.call-action-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: none;
  border-radius: 20px;
  background: rgba(255,255,255,.1);
  color: #d8f0e8;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
}
.call-action-btn:hover {
  background: rgba(255,255,255,.18);
}
.call-btn-muted {
  background: rgba(255, 82, 82, .18);
  color: #ff7070;
}
.call-btn-muted:hover {
  background: rgba(255, 82, 82, .28);
}
.call-btn-end {
  background: rgba(220, 53, 69, .8);
  color: #fff;
}
.call-btn-end:hover {
  background: #dc3545;
}

/* Incoming-call invite banner */
.group-call-invite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #1a2d20 0%, #1a2e33 100%);
  border-bottom: 1px solid rgba(76, 175, 141, 0.3);
  z-index: 11;
  flex-shrink: 0;
  animation: slideDown .2s ease;
}
@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.call-invite-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.call-invite-icon {
  font-size: 22px;
  animation: pulse 1.2s infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.15); }
}
.call-invite-title {
  font-size: 13px;
  color: #d8f0e8;
}
.call-invite-sub {
  font-size: 11px;
  color: rgba(255,255,255,.5);
  margin-top: 1px;
}
.call-invite-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.call-invite-join {
  padding: 6px 14px;
  background: #4caf8d;
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.call-invite-join:hover {
  background: #43a07d;
}
.call-invite-dismiss {
  padding: 6px 10px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.6);
  border: none;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
}
.call-invite-dismiss:hover {
  background: rgba(255,255,255,.14);
}

/* Screen share overlay — floats over the messages area */
.screen-share-overlay {
  position: absolute;
  inset: 0;
  background: #0d1117;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
}
.screen-share-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #7ecfb0;
  background: rgba(0,0,0,.4);
  flex-shrink: 0;
}
.screen-share-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss-hbtn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border: none;
  border-radius: 8px;
  background: rgba(255,255,255,.12);
  color: #e6f6ef;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.ss-hbtn:hover { background: rgba(255,255,255,.22); }
.ss-hbtn:focus-visible { outline: 2px solid #7ecfb0; outline-offset: 1px; }
.ss-hbtn-active { background: rgba(255,82,82,.28); color: #ffd0d0; }
.ss-hbtn-leave { background: #b83a46; color: #fff; }
.ss-hbtn-leave:hover { background: #cf4654; }

/* Shown in the call bar while I am the one sharing */
.call-share-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 500;
  color: #ffb4b4;
}
.call-share-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.25);
}
/* Phones: the shared camera, seen by the person sharing it (so they can aim it) */
.call-cam-preview {
  width: 100%;
  max-height: 150px;
  object-fit: cover;
  border-radius: 10px;
  background: #000;
}
/* Closed the viewer but a share is still going */
.call-watch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: #cfeee2;
}
.screen-share-video {
  flex: 1;
  min-height: 0;   /* a tall capture must shrink to the stage, not spill over the message box */
  width: 100%;
  object-fit: contain;
  background: #000;
}
.screen-share-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: rgba(255,255,255,.12);
  border: none;
  color: rgba(255,255,255,.75);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.screen-share-close:hover {
  background: rgba(255,255,255,.22);
}

/* Fullscreen button on screen share overlay */
.screen-share-fullscreen {
  position: absolute;
  top: 6px;
  right: 40px;
  background: rgba(255,255,255,.12);
  border: none;
  color: rgba(255,255,255,.75);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.screen-share-fullscreen:hover {
  background: rgba(255,255,255,.22);
}

/* Minimize button — collapses screen share to PiP corner */
.screen-share-minimize {
  position: absolute;
  top: 6px;
  right: 74px;
  background: rgba(255,255,255,.12);
  border: none;
  color: rgba(255,255,255,.75);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.screen-share-minimize:hover {
  background: rgba(255,255,255,.22);
}

/* Floating Picture-in-Picture corner viewer */
.screen-share-pip {
  position: fixed;
  /* top/left set dynamically by JS — CSS bottom/right are kept as fallback */
  bottom: 80px;
  right: 16px;
  width: 240px;
  height: 140px;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  z-index: 9998;
  box-shadow: 0 4px 20px rgba(0,0,0,.6);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.screen-share-pip video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
/* Label strip at bottom of PiP */
.screen-share-pip-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 8px;
  font-size: 10px;
  color: rgba(255,255,255,.85);
  background: linear-gradient(transparent, rgba(0,0,0,.65));
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
/* Expand button — top-right */
.screen-share-pip-expand {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,.65);
  border: none;
  color: #fff;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.screen-share-pip-expand:hover {
  background: rgba(0,0,0,.85);
}
/* Close/stop button — top-left */
.screen-share-pip-close {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(0,0,0,.65);
  border: none;
  color: #fff;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.screen-share-pip-close:hover {
  background: rgba(200,40,40,.85);
}

/* Global floating invite banner — fixed, top-right */
.group-call-invite-global {
  position: fixed !important;
  top: 70px;
  right: 16px;
  width: 320px;
  max-width: calc(100vw - 32px);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
  border-bottom: none !important;
  z-index: 9999;
}

/* Rejoin call pill — fixed, bottom-center */
.group-call-rejoin {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent, #4caf8d);
  color: #fff;
  padding: 8px 16px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.group-call-rejoin button {
  background: rgba(255,255,255,.2);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 4px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.group-call-rejoin button:hover {
  background: rgba(255,255,255,.35);
}
#gcall-rejoin-dismiss {
  background: transparent !important;
  color: rgba(255,255,255,.65) !important;
  padding: 4px 6px !important;
}

/* "Stop Sharing" active state for share button */
.call-btn-sharing {
  background: rgba(33, 150, 243, .2);
  color: #64b5f6;
}
.call-btn-sharing:hover {
  background: rgba(33, 150, 243, .3);
}

/* Make .chat-area position:relative so overlay stacks correctly */
.chat-area {
  position: relative;
}

.end-call-btn:hover {
  background: #c82333;
}

/* Mobile adjustments for calls */
@media (max-width: 768px) {
  /* Mobile: always fullscreen */
  .call-overlay {
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
    bottom: auto;
    right: auto;
    left: 0;
    top: 0;
    resize: none;
  }

  .call-overlay .video-container {
    flex: 1;
    height: auto;
    min-height: 0;
  }

  .call-container {
    height: 100dvh;
    /* Account for mobile notches and safe areas */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .call-header h3 {
    font-size: 1.2rem;
    max-width: 200px;
  }
  
  #call-status {
    font-size: 0.7rem;
  }
  
  .local-video-wrapper {
    width: 120px;
    max-width: 35vw;
    aspect-ratio: 16/9;
    top: 1rem;
    right: 1rem;
    bottom: auto; /* Prevent pushdown */
    max-height: 25vh;
    max-height: 25dvh;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 200; /* Ensure it stays on top */
  }

  .local-video {
    width: 100%;
    height: 100%;
    border-width: 0;
  }

  .video-resize-handle {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }

  .remote-video {
    max-width: 100vw;
    object-fit: cover;
  }

  .flip-camera-btn {
    width: 30px;
    height: 30px;
    top: 6px;
    right: 6px;
  }

  .flip-camera-btn svg {
    width: 16px;
    height: 16px;
  }
  
  /* Ensure remote video fills available space on mobile */
  .video-container {
    width: 100vw;
    height: auto;
    min-height: 50vh;
    min-height: 50dvh;
  }
  
  .remote-video {
    object-fit: contain; /* Prevent cropping on mobile */
  }
  
  /* PiP mobile adjustments */
  .pip-container {
    width: 200px;
    max-width: 50vw;
    max-height: 25vh;
    max-height: 25dvh;
    bottom: 5rem; /* Above call controls to prevent overlap */
    right: 0.5rem;
  }
  
  .pip-swap-btn {
    width: 28px;
    height: 28px;
    font-size: 1rem;
    top: 4px;
    right: 4px;
  }
  
  .call-controls {
    padding: 1rem;
    gap: 0.8rem;
  }
  
  .control-btn {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    font-size: 1.2rem;
  }
  
  .call-timer {
    font-size: 1rem;
    padding: 0.4rem 0.8rem;
    top: 1rem;
  }
  
  .call-buttons {
    right: 0.5rem;
  }
  
  .call-btn {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }
}

/* Settings Modal Styles */
.settings-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.settings-section:last-child {
  border-bottom: none;
}

.settings-section h4 {
  margin: 0 0 1rem 0;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 500;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  gap: 1rem;
}

.setting-item.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.setting-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.setting-label {
  font-size: 0.95rem;
  color: var(--text-primary);
  font-weight: 500;
}

.setting-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Settings → "What's Changed" list (see app.js populateChangelog()) */
.changelog-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
}
.changelog-item {
  display: flex;
  gap: 10px;
  font-size: 0.82rem;
  line-height: 1.4;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-color);
}
.changelog-item:last-child { border-bottom: none; }
.changelog-date {
  flex-shrink: 0;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.changelog-text { color: var(--text-primary); }
.changelog-body { min-width: 0; color: var(--text-primary); }
.changelog-title { font-weight: 600; margin-bottom: 2px; }
.changelog-points { margin: 0; padding-left: 16px; }
.changelog-points li { margin: 1px 0; }
.changelog-new {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--accent, #00d9a3);
  color: #04130e;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  vertical-align: 1px;
}
/* A dot on the gear while there are unread updates in Settings > What's Changed */
.btn-icon.has-news { position: relative; }
.btn-icon.has-news::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #00d9a3);
  box-shadow: 0 0 0 2px var(--bg-medium);
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-secondary);
  transition: 0.3s;
  border-radius: 26px;
  border: 2px solid var(--border-color);
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: var(--text-secondary);
  transition: 0.3s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--primary);
  border-color: var(--primary);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(24px);
  background-color: white;
}

.toggle-switch input:disabled + .toggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ============================================================
   TASKS PANEL — Teams-style slide-in
   Accent colour: indigo #6366f1 — was warm orange (#ea580c) until
   2026-09-20. The orange read as a caution/warning colour ("looks
   like it doesn't want to be touched") and didn't match either
   Koot's own teal brand or the standalone /tasks page, which
   already used this same indigo family (tasks-koot.css's
   --primary-gradient/--primary-dark). This pass unifies both
   surfaces on one accent instead of Tasks having two identities
   depending on where you open it. Neutrals moved from a warm
   cream/tan set (chosen to complement the old orange) to a cool
   slate set, since a warm ground reads as mismatched next to a
   cool indigo accent.
   All rules scoped under #tasks-panel / .tasks-* to avoid
   conflicts with the main messenger styles.
   ============================================================ */

body {
  /* (on body, not :root: the light theme's colours are set on body, so these must resolve there)
     The Tasks panel follows Koot's own theme (dark / light, Koot green) instead of a fixed light indigo
     palette — the panel used to stay light in the dark theme and look like a different app. These map the
     panel's tokens onto the variables defined at the top of this file. */
  --tp-accent: var(--accent);
  --tp-accent-dark: var(--primary-dark);
  --tp-accent-light: rgba(0, 217, 163, 0.14);
  /* Same colour as --tp-accent, spelled out for the rgba() rules below that need their own alpha. */
  --tp-accent-rgb: 0, 217, 163;
  --tp-on-accent: #04130e;            /* text on an accent-coloured button / header */
  --tp-bg: var(--bg-medium);          /* the panel's page */
  --tp-sidebar: var(--bg-light);      /* the left column */
  --tp-white: var(--message-in);      /* cards and inputs: a surface above the page */
  --tp-border: var(--border);
  --tp-text: var(--text-primary);
  --tp-text-muted: var(--text-secondary);
}
body[data-theme="light"] {
  /* a deeper green than the app's mint: white text on #00bf8f was hard to read */
  --tp-accent: #0a8a67;
  --tp-accent-dark: #07715a;
  --tp-accent-light: rgba(10, 138, 103, 0.13);
  --tp-accent-rgb: 10, 138, 103;
  --tp-on-accent: #ffffff;
}

/* ── Panel overlay ─────────────────────────────────────────── */
.tasks-panel {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  display: flex;
  justify-content: flex-end;
}
.tasks-panel.open { pointer-events: all; }

.tasks-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.42);
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
.tasks-panel.open .tasks-panel-backdrop { opacity: 1; }

/* ── Panel container ────────────────────────────────────────── */
.tasks-panel-inner {
  position: relative;
  width: 80%;
  max-width: 1140px;
  height: 100%;
  background: var(--tp-bg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1), width 0.32s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -4px 0 32px rgba(0,0,0,0.25);
  overflow: hidden;
}
.tasks-panel.open .tasks-panel-inner { transform: translateX(0); }
/* Full-page mode (toggleTasksMaximize() in app.js). Transitions the same
   0.32s as the open/close slide so it reads as one continuous motion
   rather than a layout jump. */
.tasks-panel-inner.maximized { width: 100%; max-width: none; }

/* ── Header ─────────────────────────────────────────────────── */
.tasks-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 54px;
  background: var(--tp-sidebar);
  color: var(--tp-text);
  border-bottom: 1px solid var(--tp-border);
  flex-shrink: 0;
}
.tasks-panel-brand svg { color: var(--tp-accent); }
.tasks-panel-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
}
.tasks-panel-hdr-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tasks-new-task-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: var(--tp-accent);
  color: var(--tp-on-accent);
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.tasks-new-task-btn:hover { background: var(--tp-accent-dark); }
.tasks-new-task-btn:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; }
/* Shared by the maximize toggle (and any future header icon button) —
   same footprint/hover feel as the close button, just without its
   dedicated class name. */
.tasks-panel-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--tp-text-muted);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.tasks-panel-icon-btn:hover { background: var(--hover-bg); color: var(--tp-text); }
/* Icon swap: show "maximize" (expand-arrows) when not maximized, "restore"
   (contract-arrows) when maximized — one button, two icons, CSS picks
   which shows rather than JS rewriting the SVG. */
.tasks-panel-icon-btn .icon-restore { display: none; }
.tasks-panel-icon-btn[aria-pressed="true"] .icon-maximize { display: none; }
.tasks-panel-icon-btn[aria-pressed="true"] .icon-restore { display: block; }
.tasks-panel-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--tp-text-muted);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.tasks-panel-close-btn:hover { background: var(--hover-bg); color: var(--tp-text); }

/* ── Body layout ────────────────────────────────────────────── */
.tasks-panel-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────────  */
.tasks-sidebar {
  width: 196px;
  min-width: 160px;
  background: var(--tp-sidebar);
  border-right: 1px solid var(--tp-border);
  overflow-y: auto;
  padding: 10px 0;
  flex-shrink: 0;
}
.tasks-sidebar-section { margin-bottom: 6px; }
.tasks-sidebar-header-small {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--tp-accent);
}
.tasks-sidebar-add-btn {
  background: none;
  border: none;
  color: var(--tp-accent);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  border-radius: 3px;
}
.tasks-sidebar-add-btn:hover { background: var(--tp-accent-light); }

/* sidebar-item — matches class name used by TaskUI.js */
#tasks-panel .sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--tp-text);
  transition: background 0.12s;
  border-right: 3px solid transparent;
  user-select: none;
}
#tasks-panel .sidebar-item:hover { background: rgba(var(--tp-accent-rgb), 0.08); }
#tasks-panel .sidebar-item.active {
  background: var(--tp-accent-light);
  font-weight: 600;
  color: var(--tp-accent);
  border-right-color: var(--tp-accent);
}
#tasks-panel .sidebar-icon { font-size: 14px; flex-shrink: 0; }
#tasks-panel .sidebar-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tasks-panel .badge {
  background: var(--tp-accent);
  color: var(--tp-on-accent);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.projects-list .empty-state-small { padding: 6px 14px; font-size: 12px; color: var(--tp-text-muted); }

/* Project items in sidebar */
#tasks-panel .sidebar-item.project-item { font-size: 12px; padding: 6px 14px; }
/* Empty categories recede rather than disappear — still present and
   clickable, just not competing with the categories that actually hold
   work. Set by TaskUI.updateSidebarCounts(); matching rule lives in
   tasks-koot.css for the standalone /tasks page. */
#tasks-panel .sidebar-item[data-category].is-empty { opacity: 0.45; }
#tasks-panel .sidebar-item[data-category].is-empty:hover { opacity: 1; }

/* ── Main content ────────────────────────────────────────────── */
.tasks-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Content header */
.tasks-content-header {
  padding: 12px 20px 10px;
  border-bottom: 1px solid var(--tp-border);
  background: var(--tp-white);
  flex-shrink: 0;
}
.tasks-content-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.tasks-content-title h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--tp-text);
  margin: 0;
}
.tasks-task-count { font-size: 12px; color: var(--tp-text-muted); }
.tasks-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* View switcher */
#tasks-panel .view-switcher {
  display: flex;
  border: 1px solid var(--tp-border);
  border-radius: 4px;
  overflow: hidden;
}
#tasks-panel .view-btn {
  padding: 5px 12px;
  background: var(--tp-white);
  border: none;
  border-right: 1px solid var(--tp-border);
  font-size: 12px;
  cursor: pointer;
  color: #555;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
#tasks-panel .view-btn:last-child { border-right: none; }
#tasks-panel .view-btn.active,
#tasks-panel .view-btn:hover { background: var(--tp-accent); color: #fff; }

/* Filter pills */
.tasks-filter-group { display: flex; gap: 4px; }
#tasks-panel .filter-btn {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--tp-border);
  border-radius: 14px;
  font-size: 12px;
  cursor: pointer;
  color: #555;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
#tasks-panel .filter-btn.active,
#tasks-panel .filter-btn:hover { background: var(--tp-accent); color: #fff; border-color: var(--tp-accent); }

/* Search */
.tasks-search-box input {
  padding: 5px 12px;
  border: 1px solid var(--tp-border);
  border-radius: 14px;
  font-size: 12px;
  outline: none;
  background: var(--tp-white);
  color: var(--tp-text);
  width: 170px;
  transition: border-color 0.15s;
}
.tasks-search-box input:focus { border-color: var(--tp-accent); }

/* ── Tasks container (scroll area) ──────────────────────────── */
.tasks-container { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px 20px; }

/* View visibility now lives in the shared tasks-ui.css — deliberately NOT
   duplicated here. This is the exact rule set whose two independent copies
   caused the kanban board to render permanently underneath whichever view
   was actually selected (fixed once in tasks-koot.css, which silently
   didn't reach this panel, so it kept reproducing). One copy, one place. */

/* ── List view ───────────────────────────────────────────────── */
.tasks-group { margin-bottom: 20px; }
#tasks-panel .group-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--tp-accent);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--tp-border);
}
#tasks-panel .tasks-list { display: flex; flex-direction: column; gap: 4px; }

/* Task cards — matches TaskUI.js renderTaskCard() output */
#tasks-panel .task-card {
  background: var(--tp-white);
  border: 1px solid var(--tp-border);
  border-left: 4px solid #cbd0dc;
  border-radius: 4px;
  padding: 10px 14px;
  cursor: pointer;
  transition: box-shadow 0.14s, border-left-color 0.14s;
}
#tasks-panel .task-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.09); }

/* Priority border colours */
#tasks-panel .task-card[class*="high"],
#tasks-panel .task-card .priority-badge[data-priority="high"] ~ * { border-left-color: #dc2626; }
#tasks-panel .task-card:has(.priority-badge[data-priority="high"])  { border-left-color: #dc2626; }
#tasks-panel .task-card:has(.priority-badge[data-priority="medium"]){ border-left-color: #d97706; }
#tasks-panel .task-card:has(.priority-badge[data-priority="low"])   { border-left-color: #16a34a; }

/* Simpler fallback for older browsers using status classes TaskUI adds */
#tasks-panel .task-card.overdue { border-left-color: #dc2626; }

.task-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.task-card-header h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--tp-text);
  margin: 0;
  line-height: 1.3;
  flex: 1;
}
#tasks-panel .task-card.done .task-card-header h4 { text-decoration: line-through; color: var(--tp-text-muted); }
.task-meta { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
/* .priority-badge migrated to shared styles/tasks-ui.css — it now carries
   real per-priority semantic colour (low/medium/high/urgent) instead of one
   flat grey pill, in both hosts at once. */
.category-badge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
#tasks-panel .task-description {
  font-size: 12px;
  color: var(--tp-text-muted);
  margin: 0 0 6px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.task-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}
.task-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-info .due-date,
.task-info .assigned-to,
.task-info .project-badge { font-size: 11px; color: var(--tp-text-muted); }
.task-info .due-date.overdue { color: #dc2626; font-weight: 600; }
.task-actions { display: flex; align-items: center; gap: 4px; }
.action-btn {
  padding: 3px 7px;
  background: transparent;
  border: 1px solid var(--tp-border);
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  color: #666;
  transition: background 0.12s, color 0.12s;
}
.action-btn:hover { background: var(--tp-accent); color: #fff; border-color: var(--tp-accent); }
.task-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.tag {
  font-size: 10px;
  padding: 2px 7px;
  background: var(--tp-accent-light);
  color: var(--tp-accent);
  border-radius: 10px;
  border: 1px solid rgba(var(--tp-accent-rgb), 0.25);
}

/* Empty state */
#tasks-panel .empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--tp-text-muted);
}
#tasks-panel .empty-state h3 { font-size: 16px; margin: 8px 0 4px; color: var(--tp-text); }
#tasks-panel .empty-state .btn-primary {
  margin-top: 14px;
  padding: 8px 20px;
  background: var(--tp-accent);
  color: var(--tp-on-accent);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

/* ── Kanban view ─────────────────────────────────────────────────
   Migrated to the shared styles/tasks-ui.css — board, columns, cards,
   tags and the empty-state placeholder now have exactly one definition
   serving both this panel and the standalone /tasks page, themed through
   the --tk-* contract mapped in index.html's <head>. Do not re-add
   kanban rules here; that duplication is what caused the board to render
   underneath the active view for weeks. */

/* ── Calendar view ───────────────────────────────────────────── */
#tasks-panel #calendar-view .calendar-container { padding: 4px; }
#tasks-panel .calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--tp-white);
  border-radius: 6px;
  margin-bottom: 12px;
}
#tasks-panel .calendar-header h2 { font-size: 16px; font-weight: 700; margin: 0; }
#tasks-panel .calendar-nav-btn {
  background: transparent;
  border: 1px solid var(--tp-border);
  border-radius: 4px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#tasks-panel .calendar-nav-btn:hover { background: var(--tp-accent); color: #fff; border-color: var(--tp-accent); }
#tasks-panel .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
#tasks-panel .calendar-day-header {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--tp-text-muted);
  padding: 4px;
}
#tasks-panel .calendar-day {
  background: var(--tp-white);
  border: 1px solid var(--tp-border);
  border-radius: 4px;
  min-height: 72px;
  padding: 4px;
  cursor: pointer;
  transition: background 0.12s;
}
#tasks-panel .calendar-day:hover { background: rgba(var(--tp-accent-rgb), 0.06); }
#tasks-panel .calendar-day.today { border-color: var(--tp-accent); background: rgba(var(--tp-accent-rgb), 0.1); }
#tasks-panel .calendar-day.empty { background: var(--tp-sidebar); cursor: default; }
#tasks-panel .day-number { font-size: 12px; font-weight: 600; color: #444; margin-bottom: 2px; }
#tasks-panel .calendar-day.today .day-number { color: var(--tp-accent); }
#tasks-panel .calendar-task {
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--tp-accent-light);
  color: var(--tp-accent-dark);
  margin-bottom: 2px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
}
#tasks-panel .calendar-task .task-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
#tasks-panel .calendar-task.done { opacity: 0.5; text-decoration: line-through; }
#tasks-panel .more-tasks { font-size: 10px; color: var(--tp-text-muted); }

/* ── Dashboard view ──────────────────────────────────────────── */
/* Matches TaskUI.js renderDashboardView() output. Mirrors the same
   .dashboard-* classes in tasks-koot.css (the standalone tasks.html page)
   — kept as a separate block here, scoped to #tasks-panel, since this
   embedded panel doesn't load that stylesheet at all. */
#tasks-panel #dashboard-container {
  padding: 16px 4px;
  max-width: 900px;
  margin: 0 auto;
}
#tasks-panel .dashboard-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
#tasks-panel .dashboard-tile {
  background: var(--tp-white);
  border: 1px solid var(--tp-border);
  border-radius: 8px;
  padding: 16px 12px;
  text-align: center;
}
/* Clickable drill-down tiles (Overdue / Completed / In progress) — same
   affordance the breakdown rows below them already have. Matching rule
   lives in tasks-koot.css for the standalone /tasks page; the class is set
   by shared TaskUI.js, so both stylesheets need it. */
#tasks-panel .dashboard-tile-clickable {
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
#tasks-panel .dashboard-tile-clickable:hover {
  background: var(--tp-bg-hover, #f3f4f6);
  border-color: var(--tp-accent);
}
#tasks-panel .dashboard-tile-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--tp-accent);
  font-variant-numeric: tabular-nums;
}
#tasks-panel .dashboard-tile-label {
  margin-top: 5px;
  font-size: 12px;
  color: var(--tp-text-muted);
}
/* #tasks-panel .dashboard-section / .dashboard-rows / .dashboard-row(+chevron)
   / .dashboard-empty / .dashboard-drill-hint — migrated to the shared
   styles/tasks-ui.css, themed through the --tk-* contract mapped in this
   page's <head>. Do not re-add those rules here; see the kanban note
   above for why that duplication is dangerous. */
#tasks-panel .dashboard-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
#tasks-panel .dashboard-filter-select {
  background: var(--tp-white);
  border: 1px solid var(--tp-border);
  border-radius: 5px;
  color: var(--tp-text);
  font-size: 12px;
  padding: 5px 8px;
}
#tasks-panel .dashboard-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
#tasks-panel .dashboard-chart-box {
  background: var(--tp-white);
  border: 1px solid var(--tp-border);
  border-radius: 8px;
  padding: 12px;
  /* Chart.js needs a bounded, non-zero-height ancestor to size its
     responsive canvas into — without this it can render at 0 height. */
  position: relative;
  height: 220px;
}

/* ── Task modal ──────────────────────────────────────────────── */
/* Show/hide via classList.add/remove('active') — used by TaskUI.js. Colours come from the --tp-* tokens (mapped onto
   Koot's theme variables above), so the form follows dark / light and the accent the person picked. */
.tasks-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20000;
  align-items: center;
  justify-content: center;
}
.tasks-modal-overlay.active { display: flex; }

.tasks-modal-overlay .modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0,0,0,0.55);
}
.tasks-modal-content {
  position: relative;
  z-index: 1;
  background: var(--tp-bg);
  color: var(--tp-text);
  border: 1px solid var(--tp-border);
  border-radius: 14px;
  width: 100%;
  max-width: 660px;
  max-height: 92vh;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  margin: 12px;
}
.tasks-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--tp-border);
  flex-shrink: 0;
}
.tasks-modal-header h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--tp-text); }
.tasks-modal-header .modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--tp-text-muted);
  width: 32px; height: 32px;
  border-radius: 8px;
  line-height: 1;
}
.tasks-modal-header .modal-close:hover { background: var(--hover-bg); color: var(--tp-text); }
.tasks-modal-body { padding: 16px 20px 8px; flex: 1; overflow-y: auto; }
.tasks-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--tp-border);
  background: var(--tp-sidebar);
  flex-shrink: 0;
}
.tasks-modal-footer .tk-foot-left { margin-right: auto; }

/* Form elements */
.tasks-modal-content .form-group { margin-bottom: 12px; }
.tasks-modal-content .form-group label,
.tasks-modal-content .tk-sec-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--tp-text-muted);
  margin-bottom: 5px;
}
.tasks-modal-content .tk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tasks-modal-content .form-input,
.tasks-modal-content .form-textarea,
.tasks-modal-content .form-select {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--tp-border);
  border-radius: 9px;
  font-size: 14px;
  color: var(--tp-text);
  background: var(--tp-white);
  box-sizing: border-box;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tasks-modal-content .form-textarea { resize: vertical; min-height: 56px; }
.tasks-modal-content .form-input:focus,
.tasks-modal-content .form-textarea:focus,
.tasks-modal-content .form-select:focus {
  border-color: var(--tp-accent);
  box-shadow: 0 0 0 3px rgba(var(--tp-accent-rgb), 0.18);
}
.tasks-modal-content .form-hint { display: block; font-size: 11.5px; color: var(--tp-text-muted); margin-top: 4px; }
.tasks-form-row { display: flex; gap: 12px; }
.tasks-form-row .form-group { flex: 1; }
.tasks-modal-content .subtasks-list { margin-bottom: 8px; }

/* Title: the one thing you type first, so it reads as a heading, not a boxed field */
.tasks-modal-content .tk-title-input {
  width: 100%; box-sizing: border-box; padding: 6px 2px 8px; font: inherit; font-size: 20px; font-weight: 600; line-height: 1.3;
  color: var(--tp-text); background: transparent; border: 0; border-bottom: 2px solid var(--tp-border); border-radius: 0; outline: none; transition: border-color .15s;
}
.tasks-modal-content .tk-title-input::placeholder { color: var(--tp-text-muted); font-weight: 500; }
.tasks-modal-content .tk-title-input:focus { box-shadow: none; border-bottom-color: var(--tp-accent); }
.tk-title-group { margin-bottom: 10px; }

/* Templates */
.tk-templates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.tk-templates .tk-sec-label { margin: 0 4px 0 0; }
.tk-tpl {
  padding: 5px 11px; border: 1px solid var(--tp-border); border-radius: 99px; background: var(--tp-white); color: var(--tp-text);
  font-size: 12.5px; cursor: pointer; transition: border-color .12s, background .12s;
}
.tk-tpl:hover { border-color: var(--tp-accent); }
.tk-tpl.on { background: var(--tp-accent-light); border-color: var(--tp-accent); color: var(--tp-text); font-weight: 600; }
.tk-tpl:focus-visible, .tk-seg button:focus-visible, .tk-quick button:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 1px; }

/* Grouped sections */
.tk-fsec { border: 0; border-top: 1px solid var(--tp-border); margin: 14px 0 0; padding: 10px 0 0; min-width: 0; }
.tk-fsec legend { padding: 0 8px 0 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tp-text-muted); }
.tk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 560px) { .tk-grid { grid-template-columns: 1fr; } }

/* Priority: four plain buttons beat a dropdown for something picked on every task */
.tk-seg { display: flex; border: 1px solid var(--tp-border); border-radius: 10px; overflow: hidden; background: var(--tp-white); }
.tk-seg button { flex: 1; padding: 8px 4px; border: 0; border-right: 1px solid var(--tp-border); background: transparent; color: var(--tp-text); font-size: 13px; cursor: pointer; }
.tk-seg button:last-child { border-right: 0; }
.tk-seg button:hover { background: var(--hover-bg); }
.tk-seg button.on { font-weight: 700; color: #fff; }
.tk-seg button[data-priority="low"].on { background: #16a34a; }
.tk-seg button[data-priority="medium"].on { background: #d97706; }
.tk-seg button[data-priority="high"].on { background: #ea580c; }
.tk-seg button[data-priority="urgent"].on { background: #dc2626; }

.tk-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.tk-quick button { padding: 3px 10px; border: 1px solid var(--tp-border); border-radius: 99px; background: transparent; color: var(--tp-text-muted); font-size: 12px; cursor: pointer; }
.tk-quick button:hover { border-color: var(--tp-accent); color: var(--tp-text); }

/* People chips (form and detail view) */
.tk-chip-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.tk-chip-list:empty { display: none; }
.tk-person-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 99px; background: var(--tp-accent-light); color: var(--tp-text); font-size: 12.5px; }
.tk-person-chip button { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--tp-text-muted); font-size: 11px; line-height: 1; cursor: pointer; }
.tk-person-chip button:hover { background: rgba(127,127,127,.25); color: var(--tp-text); }
.tk-person-chip:not(:has(button)) { padding-right: 10px; }

/* More options */
.tk-more { margin: 14px 0 6px; border-top: 1px solid var(--tp-border); padding-top: 10px; }
.tk-more summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--tp-text-muted); padding: 2px 0 10px; list-style: none; }
.tk-more summary::-webkit-details-marker { display: none; }
.tk-more summary::before { content: '▸'; display: inline-block; width: 14px; transition: transform .15s; }
.tk-more[open] summary::before { transform: rotate(90deg); }

/* Modal buttons */
.tasks-btn-primary {
  padding: 8px 20px;
  background: var(--tp-accent);
  color: var(--tp-on-accent);
  border: none;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.tasks-btn-primary:hover { background: var(--tp-accent-dark); }
.tasks-btn-secondary {
  padding: 8px 18px;
  background: transparent;
  color: var(--tp-text);
  border: 1px solid var(--tp-border);
  border-radius: 9px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.tasks-btn-secondary:hover { background: var(--hover-bg); }
.tasks-btn-danger {
  padding: 8px 16px;
  background: transparent;
  color: var(--danger, #dc2626);
  border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 45%, transparent);
  border-radius: 9px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.tasks-btn-danger:hover { background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent); }
.tasks-btn-secondary-sm {
  padding: 5px 12px;
  background: transparent;
  color: var(--tp-accent);
  border: 1px dashed var(--tp-accent);
  border-radius: 8px;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.12s;
}
.tasks-btn-secondary-sm:hover { background: var(--tp-accent-light); }
.tasks-btn-primary:focus-visible, .tasks-btn-secondary:focus-visible, .tasks-btn-danger:focus-visible, .tasks-btn-secondary-sm:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; }

/* Attachment list */
.tasks-modal-content .attachments-list {
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.attachment-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  background: var(--tp-white);
  border: 1px solid var(--tp-border);
  border-radius: 8px;
  font-size: 12px;
}
.attachment-icon { flex-shrink: 0; font-size: 14px; }
.attachment-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tp-text); }
.attachment-size { color: var(--tp-text-muted); flex-shrink: 0; }
.attachment-item .btn-remove {
  background: none;
  border: none;
  color: var(--tp-text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}
.attachment-item .btn-remove:hover { color: var(--danger, #dc2626); }

/* Checklist steps (the embedded panel had no styling for these at all) */
.tasks-modal-content .subtasks-list { display: flex; flex-direction: column; gap: 6px; }
.tasks-modal-content .subtask-item { display: flex; flex-direction: column; padding: 4px 8px; background: var(--tp-white); border: 1px solid var(--tp-border); border-radius: 9px; }
.tasks-modal-content .subtask-main-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.tasks-modal-content .subtask-checkbox { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--tp-accent); cursor: pointer; }
.tasks-modal-content .subtask-input { flex: 1; min-width: 0; padding: 6px 4px; border: 0; background: transparent; color: var(--tp-text); font: inherit; font-size: 14px; outline: none; }
.tasks-modal-content .subtask-input::placeholder { color: var(--tp-text-muted); }
.tasks-modal-content .subtask-assignee-tag { font-size: 11.5px; color: var(--tp-text-muted); background: var(--tp-accent-light); border-radius: 99px; padding: 2px 8px; white-space: nowrap; }
.tasks-modal-content .btn-subtask-expand,
.tasks-modal-content .subtask-item .btn-remove { background: none; border: 0; color: var(--tp-text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.tasks-modal-content .btn-subtask-expand:hover,
.tasks-modal-content .subtask-item .btn-remove:hover { background: var(--hover-bg); color: var(--tp-text); }
.tasks-modal-content .subtask-details { display: none; flex-direction: column; gap: 8px; margin: 4px 0 8px; padding-top: 8px; border-top: 1px solid var(--tp-border); }
.tasks-modal-content .subtask-desc,
.tasks-modal-content .subtask-due,
.tasks-modal-content .subtask-priority,
.tasks-modal-content .subtask-assignee { width: 100%; box-sizing: border-box; padding: 6px 9px; border: 1px solid var(--tp-border); border-radius: 8px; background: var(--tp-bg); color: var(--tp-text); font: inherit; font-size: 13px; }
.tasks-modal-content .subtask-input:focus-visible,
.tasks-modal-content .subtask-desc:focus-visible,
.tasks-modal-content .subtask-due:focus-visible,
.tasks-modal-content .subtask-priority:focus-visible,
.tasks-modal-content .subtask-assignee:focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 1px; }

/* Project modal — shown/hidden via style.display in TaskUI.js */
#project-modal { display: none; position: fixed; inset: 0; z-index: 20000; align-items: center; justify-content: center; }
#project-modal.active,
#project-modal[style*="flex"] { display: flex; }

/* ── Notifications container ─────────────────────────────────── */
#notifications-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
#notifications-container > * { pointer-events: all; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 800px) {
  .tasks-panel-inner { width: 100%; }
  .tasks-panel-body { flex-direction: column; }

  /* The sidebar used to just vanish here (display:none) with no
     replacement — on a phone there was literally no way to switch
     between My Tasks / Assigned to Me / I Assigned, since that nav
     lived nowhere else. It's now a horizontal scrollable tab strip
     across the top instead of a hidden left column, reusing the exact
     same elements TaskUI.js already binds clicks to and updates counts
     on — no JS changes, no duplicated IDs, just a different layout for
     the same nodes. */
  .tasks-sidebar {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-width: 0;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-right: none;
    border-bottom: 1px solid var(--tp-border);
    padding: 6px 8px;
    gap: 4px;
  }
  /* Only the primary views become tabs. 18 categories plus a projects
     list wouldn't fit as a tab strip, and every task card already shows
     its own category badge, so browsing/creating/updating tasks stays
     fully available on a phone — filtering BY category becomes a
     wider-screen feature rather than a lost one. */
  .tasks-sidebar-section:not(:first-child) { display: none; }
  .tasks-sidebar-section:first-child { display: flex; flex-direction: row; gap: 4px; margin-bottom: 0; }
  #tasks-panel .tasks-sidebar-section:first-child .sidebar-item {
    flex-direction: column;
    gap: 2px;
    padding: 6px 14px;
    border-right: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
  }
  #tasks-panel .tasks-sidebar-section:first-child .sidebar-item.active {
    border-right-color: transparent;
    border-bottom-color: var(--tp-accent);
  }
  #tasks-panel .tasks-sidebar-section:first-child .sidebar-label { font-size: 11px; }

  .tasks-filter-group { display: none; }
  .tasks-search-box input { width: 120px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE UI UPLIFT — chat input, emoji panel, file bubbles
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1. Chat input bar — tighter, less dead space ── */
  .chat-input-area {
    padding: 6px 8px !important;
    gap: 5px !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
  }

  #message-input {
    padding: 8px 13px !important;
    font-size: 14px !important;
    max-height: 96px;
    line-height: 1.4;
  }

  /* Icon buttons inside the input bar. Was 38px — below the 44px minimum
     touch target this app uses everywhere else on mobile (see
     .header-call-btn's own mobile override) and reported live as
     "too small" for attach/voice specifically.

     DIRECT CHILDREN ONLY (`>`). The file-preview popup is itself a child of
     .chat-input-area, so a plain descendant selector here also hit every
     button INSIDE that popup — forcing Fast/HD/Document, "Send File" and
     "Cancel" all into fixed 44x44 squares with !important, which beat their
     own flex/padding rules and pushed their text labels straight outside the
     button box. That is the "buttons going out of bounds" report. Scoping to
     direct children leaves the popup's own buttons alone. */
  .chat-input-area > button,
  .chat-input-area > .emoji-btn-toggle,
  #send-btn,
  #attach-btn,
  #voice-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    font-size: 19px !important;
  }

  /* The GLYPHS inside those buttons are hardcoded to width/height="20" in
     index.html — a desktop-scale icon. Growing the tap target to 44px above
     without touching the icon left the buttons reading as "desktop sized" on
     a phone. Scale the mark itself up for touch; the 44px target is
     unchanged. Same direct-child scoping as above. */
  .chat-input-area > button svg,
  #attach-btn svg,
  #voice-btn svg,
  #send-btn svg {
    width: 23px !important;
    height: 23px !important;
  }

  .chat-input-area > .emoji-btn-toggle span {
    font-size: 22px !important;
  }

  /* Messages container — match the slimmer input bar */
  .messages-container {
    padding-bottom: 62px !important;
    height: calc(100dvh - 112px) !important;
  }

  /* Fast/HD/Document control — reported live as too cramped to render
     properly on a narrow phone: three buttons at the desktop padding/font
     size leave "Document" (the longest label) almost no room once the
     popup's own side padding and the control's container padding/gaps are
     subtracted, especially on smaller screens (~320-375px wide). Tighter
     padding/gap/font here, plus a little back from the popup's own side
     padding, buys enough width for all three to render cleanly. */
  .file-preview-popup {
    padding: 0.75rem !important;
    left: 8px !important;
    right: 8px !important;
    max-width: none !important;   /* the 450px desktop cap plus margin:0 auto
                                     left it centred and narrower than the
                                     phone it was on; fill the width instead */
    box-sizing: border-box;
  }

  .file-preview-quality-toggle {
    gap: 0.15rem !important;
    width: 100%;
    box-sizing: border-box;
  }

  /* Explicitly re-assert the real shape of these buttons: they are flexible,
     text-labelled segments, NOT the fixed square icon buttons of the input
     bar above. Belt-and-braces against any future descendant selector on
     .chat-input-area reaching in here again. */
  .file-preview-quality-btn {
    padding: 0.45rem 0.2rem !important;
    font-size: 0.72rem !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    flex: 1 1 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Send File / Cancel — same protection. "Send File" is meant to stretch
     (flex:1 inline in index.html); both were being squashed to 44px squares. */
  .file-preview-actions button {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0.55rem 0.9rem !important;
    font-size: 0.85rem !important;
  }

  .file-preview-close {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
  }

  /* ── 2. Emoji panel — constrained within viewport ── */
  .emoji-panel {
    /* Span full width with side margins so it never clips on any phone size */
    left: 6px !important;
    right: 6px !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    /* Cap height so it fits when keyboard is open (typically ~40% viewport) */
    max-height: min(300px, 42vh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 10px;
  }

  .emoji-cat-bar {
    flex-shrink: 0;
  }

  .emoji-search-input {
    flex-shrink: 0;
  }

  .emoji-cat-label {
    flex-shrink: 0;
  }

  /* Emoji grid — fewer columns, shorter scroll area on phone */
  .emoji-grid {
    grid-template-columns: repeat(8, 1fr);
    max-height: 140px;
    flex: 1;
    min-height: 0;
  }

  .emoji-item {
    font-size: 18px;
    padding: 4px 2px;
  }

  /* ── 3. File transfer bubbles — never overflow message bubble ── */
  .file-transfer-progress {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
  }

  /* The inner flex row that holds icon + name + size */
  .file-transfer-progress > div:first-child {
    min-width: 0;
    max-width: 100%;
  }

  /* Completed file bubble (download link) */
  .file-bubble {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
  }

  .file-bubble-info {
    min-width: 0;
    overflow: hidden;
  }

  .file-bubble-name {
    max-width: 100%;
  }

  /* Message bubbles: hard cap so block content can't push past viewport */
  .message {
    max-width: 100%;
    overflow: hidden;
  }

  /* ── 4. Message wrap — slightly wider on small phones ── */
  .message-wrap {
    max-width: 86%;
  }
}


/* ===== ABOUT PANEL OVERLAY ===== */
.about-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 3000;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.about-panel-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.about-panel-drawer {
  background: var(--bg-medium);
  border-left: 1px solid var(--border);
  width: 380px;
  max-width: 100vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.about-panel-overlay.active .about-panel-drawer {
  transform: translateX(0);
}

.about-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.about-panel-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.about-panel-close {
  color: var(--text-secondary);
}

.about-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about-hero-section {
  text-align: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.about-hero-section h4 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--primary);
}

.about-hero-section p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.about-features-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.about-feature-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.about-feature-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.about-feature-item strong {
  display: block;
  font-size: 0.92rem;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.about-feature-item p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.about-footer-links {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.about-footer-links a {
  color: var(--primary);
  text-decoration: none;
}

.about-footer-links a:hover {
  text-decoration: underline;
}

.about-version {
  font-size: 0.75rem;
  color: var(--text-secondary);
  opacity: 0.6;
  text-align: center;
  margin-top: -8px;
}

/* ── About panel tabs ────────────────────────────────────────────────── */
.about-tab-nav {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  padding: 0 20px;
  gap: 4px;
}

.about-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 10px 14px;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.about-tab-btn:hover {
  color: var(--text-primary);
}

.about-tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.about-tab-pane {
  display: none;
  flex: 1;
  overflow-y: auto;
}

.about-tab-pane.active {
  display: flex;
  flex-direction: column;
}

/* ── AI setup guide styles ───────────────────────────────────────────── */
.ai-setup-body {
  padding: 20px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ai-setup-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.ai-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(139,92,246,0.15);
  border: 1px solid rgba(139,92,246,0.4);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.ai-step-content strong {
  display: block;
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}

/* ...but only the step HEADING is a block. A <strong> used for emphasis inside
   a paragraph must stay inline, or it splits the sentence across three lines
   ("Every document is stored" / "in your own browser" / ". There is no copy…").
   Same for emphasis inside the feature-list and note blocks. */
.ai-step-content p strong,
.ai-setup-note p strong,
.about-feature-item p strong {
  display: inline;
  font-size: inherit;
  margin-bottom: 0;
}

.ai-step-content p {
  margin: 0 0 6px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.ai-setup-code {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-family: monospace;
  font-size: 0.82rem;
  color: #a8d8a8;
  margin-top: 4px;
  word-break: break-all;
}

.ai-setup-note {
  background: rgba(139,92,246,0.07);
  border-left: 3px solid rgba(139,92,246,0.5);
  padding: 10px 12px;
  border-radius: 0 6px 6px 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.ai-setup-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2px 0;
}

.ai-how-it-works {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.ai-flow-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-flow-box {
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.8rem;
  color: var(--text-primary);
  white-space: nowrap;
}

.ai-flow-arrow {
  color: var(--primary);
  font-size: 1rem;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .about-panel-drawer {
    width: 100vw;
  }
}

/* ── Live group calls in the group list (see GroupCallManager.renderRowCallParts) ── */
.gcall-live-text { color: #4caf50; font-weight: 600; }
.gcall-row-join {
  flex-shrink: 0;
  margin-left: 6px;
  padding: 2px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  background: #2e9e5b;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}
.gcall-row-join:hover { background: #38b36a; }
.gcall-full { flex-shrink: 0; margin-left: 6px; font-size: 0.75rem; color: var(--text-secondary); }

.gcall-picker {
  position: fixed;
  z-index: 10050;
  min-width: 260px;
  max-width: 340px;
  padding: 6px;
  background: var(--bg-light);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.gcall-picker-title { padding: 6px 8px 8px; font-size: 0.78rem; color: var(--text-secondary); }
.gcall-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
}
.gcall-picker-item:hover { background: var(--bg-medium); }
.gcall-picker-who { font-size: 0.85rem; font-weight: 600; }
.gcall-picker-names { margin-top: 2px; font-size: 0.75rem; color: var(--text-secondary); }

.tab-call-dot { margin-left: 6px; font-size: 0.7rem; font-weight: 700; color: #4caf50; }

/* ── Deleted / edited messages, and the delete dialog ────────────────────────────── */
.message.message-deleted {
  background: transparent !important;
  border: 1px dashed var(--border);
  box-shadow: none;
}
.message-deleted .msg-deleted-text {
  font-style: italic;
  font-size: 13px;
  color: var(--text-secondary);
}
.message-deleted .message-meta .delivery-status { display: none; }
.msg-edited {
  pointer-events: auto;   /* the footer itself ignores clicks; this tag must not */
  margin-right: 6px;
  font-size: 10.5px;
  font-style: italic;
  opacity: .65;
  cursor: pointer;
  text-decoration: underline dotted;
}
.msg-edited:hover { opacity: 1; }
.edit-preview-bar .reply-bar-header { color: var(--accent); }
.mc-delete-body { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 16px; }
.mc-delete-note { margin: 0 0 4px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.mc-btn {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--hover-bg);
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  text-align: center;
}
.mc-btn:hover { background: var(--hover-bg); }
.mc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mc-btn-danger { background: #b83a46; border-color: #b83a46; color: #fff; }
.mc-btn-danger:hover { background: #cf4654; }
.mc-btn-quiet { background: transparent; border-color: transparent; color: var(--text-secondary); }
.mc-version { padding: 8px 4px; border-bottom: 1px solid var(--border); }
.mc-version:last-child { border-bottom: none; }
.mc-version-time { font-size: 11px; opacity: .6; margin-bottom: 2px; }
.mc-version-text { font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }

/* ── Status (Available / Away / Off shift) and last seen ─────────────────────────── */
.my-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  margin: 6px 0 0;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
}
.my-status-btn:hover { background: var(--hover-bg); }
.my-status-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.my-status-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.my-status-caret { font-size: 10px; opacity: .6; }
.my-status-dot { width: 9px; height: 9px; border-radius: 50%; background: #2ecc71; flex-shrink: 0; }
.my-status-btn[data-status="away"] .my-status-dot { background: #f5a623; }
.my-status-btn[data-status="offshift"] .my-status-dot { background: #8a94a6; }
.my-status-menu {
  margin: 8px 0 4px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-medium);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.my-status-opt { display: flex; gap: 8px; align-items: flex-start; padding: 6px 4px; border-radius: 8px; cursor: pointer; }
.my-status-opt:hover { background: var(--hover-bg); }
.my-status-opt input { margin-top: 3px; accent-color: var(--accent); }
.my-status-opt-body { display: flex; flex-direction: column; }
.my-status-opt-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.my-status-opt-desc { font-size: 11.5px; color: var(--text-secondary); }
.my-status-extra { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 2px; }
.my-status-extra input, .my-status-extra select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-dark);
  color: var(--text-primary);
  font-size: 13px;
}
.my-status-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.my-status-actions .mc-btn { padding: 7px 14px; font-size: 13px; }
.mc-btn-primary { background: var(--accent); border-color: var(--accent); color: #04130e; font-weight: 600; }
.mc-btn-primary:hover { filter: brightness(1.08); }
.contact-status.away, .connection-status.away { color: #f5a623; }
.contact-status.offshift, .connection-status.offshift { color: var(--text-secondary); }

/* Expanded call window: the self-view can be a little bigger, still in the corner */
.call-overlay.call-fullscreen .local-video-wrapper { width: clamp(140px, 20%, 300px); bottom: 1rem; right: 1rem; }

/* "Tap to show the video" — only when the browser would not start playback by itself */
.call-video-retry {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 50;
  padding: 10px 18px; border: 0; border-radius: 99px; background: var(--primary); color: #04130e; font-size: 0.95rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
}