/* =========================================
   1. VARIABLES & RESET
   ========================================= */
:root {
  /* Premium Color Palette */
  --primary-color: #3b82f6; 
  --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --sent-bubble-gradient: linear-gradient(135deg, #4f8fe8 0%, #2f6fd3 100%);
  --secondary-bg: #f1f5f9;
  --white: #ffffff;
  --text-dark: #0f172a;
  --text-grey: #64748b;
  --border-color: #e2e8f0;
  
  /* Status Colors */
  --success: #10b981;
  --danger: #ef4444;
  --warning-bg: #fef3c7;
  --warning-text: #b45309;
  
  /* Shadows & Glass */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
  --glass-bg: rgba(255, 255, 255, 0.85);
}

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

body, html {
  height: 100%;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--secondary-bg);
  color: var(--text-dark);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Global Material Icon Alignment fix */
.material-icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/* =========================================
   LOADING SPINNER & ERROR STATES
   ========================================= */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  color: var(--text-grey);
  text-align: center;
  gap: 12px;
  animation: fadeIn 0.2s ease;
}

.loading-state p {
  font-size: 13px;
  font-weight: 500;
}

.connexa-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: connexaSpin 0.8s linear infinite;
}

@keyframes connexaSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Error State Overrides */
.error-state .material-icons {
  font-size: 38px;
  color: var(--danger);
  margin-bottom: 4px;
  opacity: 0.9;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }


/* =========================================
   2. CORE LAYOUT
   ========================================= */
.app-wrapper {
  display: flex;
  height: 100vh;   /* fallback for browsers without dvh support */
  height: 100dvh;  /* tracks the *actual* visible viewport on mobile, so the
                       layout never extends underneath the browser chrome or
                       the phone's home-indicator / nav buttons */
  width: 100vw;
  position: relative;
  overflow: hidden;
}

/* Left Sidebar */
#overflow-menu-Bar {
  width: 340px;
  height: 100%;
  background: var(--white);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  z-index: 20;
  flex-shrink: 0;
}

/* Right Chat Area */
.container {
  flex: 1;
  height: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Subtle Graph paper background for chat */
.container::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
  background-size: 24px 24px;
  z-index: 0;
  pointer-events: none;
}

/* Soft decorative color wash + floating blobs behind the chat surface.
   Sits above the dot-grid (::before) but behind message content (z-index:1). */
.container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(480px 380px at 8% -6%, rgba(59, 130, 246, 0.10), transparent 60%),
    radial-gradient(420px 340px at 104% 18%, rgba(139, 92, 246, 0.08), transparent 60%),
    radial-gradient(520px 420px at 50% 112%, rgba(16, 185, 129, 0.06), transparent 60%);
}

body.dark-mode .container::after {
  background:
    radial-gradient(480px 380px at 8% -6%, rgba(59, 130, 246, 0.16), transparent 60%),
    radial-gradient(420px 340px at 104% 18%, rgba(139, 92, 246, 0.14), transparent 60%),
    radial-gradient(520px 420px at 50% 112%, rgba(16, 185, 129, 0.08), transparent 60%);
}


/* =========================================
   3. SIDEBAR & HEADER ELEMENTS
   ========================================= */
.menu-top-bar {
  padding: 16px;
  background: var(--white);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.menu-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.5px;
}

/* Row holding the logo (left) and the Secret Chats button (pinned far right) */
.menu-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.menu-header-row .action-btn {
  flex: 0 0 auto;
  padding: 8px;
  width: 38px;
  height: 38px;
}
.menu-header-row .action-btn .material-icons { font-size: 20px; }

/* secret-chat.css (loaded after this stylesheet) styles .secret-entry-btn with a
   fixed color of its own; this override keeps it in sync with the active theme
   regardless of load order. Kept background-free for a native, chrome-less look. */
#nav-secret-chats-btn.secret-entry-btn {
  background: transparent !important;
  color: var(--text-grey) !important;
}
#nav-secret-chats-btn.secret-entry-btn:hover {
  background: transparent !important;
  color: var(--primary-color) !important;
}
#nav-secret-chats-btn.secret-entry-btn:active {
  transform: scale(0.9);
}
#nav-secret-chats-btn.secret-entry-btn .material-icons {
  color: inherit !important;
}

/* Top bar quick action buttons */
.menu-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 2px;
}

/* Pure native icon buttons: no fill, no border — just the icon, with a
   subtle color shift and press-down feedback for touch/click affordance. */
.action-btn {
  background: transparent;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-grey);
  transition: color 0.15s ease, transform 0.1s ease;
  flex: 1;
}

.action-btn:hover {
  background: transparent;
  color: var(--primary-color);
}

.action-btn:active {
  transform: scale(0.9);
}

.action-btn-blue {
  background: transparent;
  color: var(--text-grey) !important;
  font-weight: 600;
}
.action-btn-blue:hover {
  background: transparent;
  color: var(--primary-color) !important;
}

/* Search Box */
.search-container { position: relative; width: 100%; }
.search-container input {
  width: 100%;
  padding: 10px 36px 10px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--secondary-bg);
  font-size: 13px;
  transition: all 0.2s;
}
.search-container input:focus {
  background: var(--white);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  outline: none;
}
.search-icon {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%); color: var(--text-grey); font-size: 18px;
}


/* =========================================
   4. CONTACTS LIST
   ========================================= */
#overflow-menu {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
  border-bottom: none !important; /* no list dividers, even if another stylesheet adds one */
}

.menu-item:hover { background: var(--secondary-bg); }
.menu-item.active { background: #eff6ff; }

.profile-pic-small {
  width: 44px; height: 44px;
  border-radius: 50%; object-fit: cover;
  margin-right: 12px; flex-shrink: 0;
  border: 1px solid var(--border-color);
}

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

/* Name (left) + compact status/last-seen (right), on one line */
.chat-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.memberUserName {
  font-weight: 600; font-size: 14px;
  color: var(--text-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Compact corner label: fixed to the right edge, shortened text, never wraps */
.chat-corner-status {
  flex-shrink: 0;
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.25;
}

/* Preview text (left) + unread badge (right), on the line below */
.chat-preview-row {
  min-width: 0;
  margin-top: 2px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.chat-preview-text {
  color: var(--text-grey);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

/* Unread state: bold name + preview text, plus a small dot badge */
.menu-item.unread .memberUserName { font-weight: 700; color: var(--text-dark); }
.menu-item.unread .chat-preview-text { font-weight: 600; color: var(--text-dark); }

.unread-badge {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary-color);
}

/* Status text injected by JS */
.status-online { color: var(--success) !important; font-weight: 600; }
.status-offline { color: #94a3b8 !important; }
.status-recent { color: var(--primary-color) !important; }


/* =========================================
   5. CHAT HEADER & STREAM
   ========================================= */
#user-info {
  height: 64px;
  padding: 0 20px;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  z-index: 10;
  flex-shrink: 0;
}

#profile-pic {
  width: 40px; height: 40px;
  border-radius: 50%; object-fit: cover;
  margin-right: 12px; border: 1px solid var(--border-color);
}

#selected-user { font-size: 15px; font-weight: 700; line-height: 1.2; }
#user-status { font-size: 12px; color: var(--text-grey); font-weight: 500; }

/* Call button — sits far right of the chat header, next to the active chat's profile */
.call-btn {
  margin-left: auto;
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 9px;
  border-radius: 50%;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.call-btn:hover { background: #eff6ff; }
.call-btn:active { transform: scale(0.92); }

#chat-box {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1;
}

/* E2E notice — sits at the very top of the chat history, scrolls away with
   the rest of the content (only visible once the user scrolls all the way up) */
.encryption-message {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--glass-bg);
  border: 1px solid var(--border-color);
  color: var(--text-grey);
  font-size: 11.5px;
  font-weight: 500;
  text-align: center;
  padding: 7px 16px;
  border-radius: 20px;
  max-width: 90%;
  margin: 4px 0 16px 0;
  box-shadow: var(--shadow-sm);
}
.encryption-message .material-icons {
  font-size: 13px;
  color: var(--text-grey);
  opacity: 0.8;
}

/* Date divider between groups of messages ("Today", "Yesterday", etc.) */
.date-divider {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0 14px 0;
  z-index: 1;
}
.date-divider span {
  background: var(--glass-bg);
  backdrop-filter: blur(6px);
  color: var(--text-grey);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  letter-spacing: 0.1px;
}

/* Empty state shown inside an open conversation that has no messages yet */
.no-messages-hint {
  margin: auto;
  text-align: center;
  color: var(--text-grey);
  z-index: 1;
  padding: 24px;
  animation: msgPop 0.25s cubic-bezier(0.1, 0.9, 0.2, 1);
}
.no-messages-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 14px auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(139,92,246,0.10));
  border: 1px solid var(--border-color);
}
.no-messages-icon .material-icons { font-size: 30px; color: var(--primary-color); opacity: 0.8; }
.no-messages-title { font-size: 15px; font-weight: 700; color: var(--text-dark); margin-bottom: 4px; }
.no-messages-sub { font-size: 12.5px; color: var(--text-grey); max-width: 220px; margin: 0 auto; line-height: 1.4; }


/* =========================================
   6. MESSAGE BUBBLES
   ========================================= */
.message-container { display: flex; width: 100%; margin-bottom: 10px; position: relative; align-items: flex-end; }
.message-container.grouped { margin-bottom: 2px; }
.no-select { user-select: none; -webkit-user-select: none; }

.profile-pic {
  width: 28px; height: 28px; border-radius: 50%;
  margin-right: 8px; align-self: flex-end; margin-bottom: 4px;
  object-fit: cover; flex-shrink: 0;
}
.profile-pic.spacer { visibility: hidden; }

.message-bubble-wrap {
  display: flex;
  flex-direction: column;
  max-width: 68%;
  position: relative;
}
.sent .message-bubble-wrap { align-items: flex-end; margin-left: auto; }
.received .message-bubble-wrap { align-items: flex-start; }

.message {
  padding: 9px 13px;
  border-radius: 18px;
  font-size: 14.5px;
  line-height: 1.45;
  max-width: 100%;
  position: relative;
  box-shadow: var(--shadow-sm);
  word-wrap: break-word;
  animation: msgPop 0.18s cubic-bezier(0.1, 0.9, 0.2, 1);
  transition: filter 0.15s ease;
}

@keyframes msgPop {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Sent */
.sent { justify-content: flex-end; }
.sent .message {
  background: var(--sent-bubble-gradient);
  color: var(--white);
  border-radius: 18px 18px 4px 18px; /* classic chat tail */
}
.sent .time-status { color: rgba(255, 255, 255, 0.75); font-size: 10.5px; margin-top: 3px; text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 3px; }

/* Received */
.received { justify-content: flex-start; }
.received .message {
  background: var(--white);
  color: var(--text-dark);
  border-radius: 18px 18px 18px 4px;
  border: 1px solid var(--border-color);
}
.received .time-status { color: var(--text-grey); font-size: 10.5px; margin-top: 3px; text-align: right; }

/* Typing indicator bubble — a fake "next message" pinned to the bottom of
   the thread, right where the real reply will land, so waiting for someone
   to finish typing feels like part of the conversation instead of a spinner. */
.typing-indicator-row { pointer-events: none; }

.received .typing-message {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 12px 16px;
  min-width: 46px;
  /* Every few seconds the whole bubble gives an impatient little wiggle,
     like it's shifting its weight while it waits for you to notice it. */
  animation: msgPop 0.18s cubic-bezier(0.1, 0.9, 0.2, 1), typingBubbleNudge 3.6s ease-in-out infinite;
  transform-origin: 12% 85%;
}

.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-grey, #9a9aa1);
  animation: typingDotBounce 1.3s ease-in-out infinite;
}
.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: 0.18s; }
.typing-dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes typingDotBounce {
  0%, 60%, 100% { transform: translateY(0) scale(1); opacity: 0.55; }
  30% { transform: translateY(-6px) scale(1.15); opacity: 1; }
}

/* A subtle rock-back-and-forth on the bubble itself, sold entirely in CSS
   (no JS interval needed) — it sits quiet most of the cycle, then gives a
   quick, cheeky shake near the end before settling again. */
@keyframes typingBubbleNudge {
  0%, 78% { transform: rotate(0deg) translateY(0); }
  82% { transform: rotate(-5deg) translateY(-1px); }
  86% { transform: rotate(4deg) translateY(0); }
  90% { transform: rotate(-3deg) translateY(0); }
  94% { transform: rotate(1deg) translateY(0); }
  97%, 100% { transform: rotate(0deg) translateY(0); }
}

/* The avatar peeks along with the bubble's nudge, slightly offset in time,
   like it's leaning in to see if you've replied yet. */
.typing-avatar-peek {
  animation: typingAvatarPeek 3.6s ease-in-out infinite;
  animation-delay: 0.15s;
  transform-origin: 70% 100%;
}
@keyframes typingAvatarPeek {
  0%, 76% { transform: rotate(0deg); }
  81% { transform: rotate(8deg); }
  86% { transform: rotate(-6deg); }
  91% { transform: rotate(3deg); }
  96%, 100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .typing-message, .typing-avatar-peek { animation: none; }
  .typing-dot { animation: typingDotBounceReduced 1.3s ease-in-out infinite; }
}
@keyframes typingDotBounceReduced {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Injected Media elements */
.message-image { max-width: 120px; max-height: 240px; border-radius: 10px; cursor: pointer; display: block;}
.message-caption { margin-top: 7px; }
.message-text { white-space: pre-wrap; }
.message-audio { height: 36px; max-width: 240px; margin-top: 6px; }

/* Read receipt ticks: sent = single check, delivered = double check (dim), read = double check (blue) */
.status-tick { font-size: 14px !important; }
.status-tick.delivered { opacity: 0.85; }
.status-tick.read { color: #60a5fa !important; opacity: 1; }

/* Quick hover actions (reply / forward) that appear beside a bubble */
.message-hover-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.message-container:hover .message-hover-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sent .message-hover-actions { order: -1; margin-right: 4px; }
.received .message-hover-actions { order: 1; margin-left: 4px; }
.hover-action-btn {
  background: var(--white);
  border: 1px solid var(--border-color);
  color: var(--text-grey);
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.hover-action-btn .material-icons { font-size: 15px; }
.hover-action-btn:hover { color: var(--primary-color); border-color: var(--primary-color); }

/* Forwarded tag */
.forwarded-tag {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; font-style: italic;
  opacity: 0.75; margin-bottom: 3px;
}
.forwarded-tag .material-icons { font-size: 13px; transform: scaleX(-1); }
.sent .forwarded-tag { color: rgba(255,255,255,0.85); }
.received .forwarded-tag { color: var(--text-grey); }

/* Reply quote block shown inside a bubble */
.reply-quote {
  display: block;
  border-left: 3px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 5px 9px;
  margin-bottom: 6px;
  font-size: 12.5px;
  line-height: 1.3;
  cursor: pointer;
  max-width: 100%;
}
.received .reply-quote {
  border-left-color: var(--primary-color);
  background: var(--secondary-bg);
}
.reply-quote .reply-quote-name {
  display: block;
  font-weight: 700;
  font-size: 11.5px;
  margin-bottom: 1px;
}
.sent .reply-quote .reply-quote-name { color: #dbeafe; }
.received .reply-quote .reply-quote-name { color: var(--primary-color); }
.reply-quote .reply-quote-snippet {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0.9;
}
.reply-quote .reply-quote-thumb {
  width: 32px; height: 32px; border-radius: 5px; object-fit: cover;
  float: right; margin-left: 6px;
}

/* ===== Emoji reactions ===== */
.reactions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -4px; /* Adjusted slightly so transparent emoji don't clash with bubble text */
  position: relative; /* REQUIRED for z-index to work */
  z-index: 5;         /* Guarantees it floats above the message bubble */
}
.sent .reactions-row { justify-content: flex-end; padding-right: 6px; }
.received .reactions-row { justify-content: flex-start; padding-left: 6px; }

.reaction-pill {
  display: inline-flex; 
  align-items: center; 
  gap: 4px;
  background: transparent; /* Removed white background */
  border: none;            /* Removed border */
  border-radius: 999px;
  padding: 2px 4px;        /* Tighter padding for clean look */
  font-size: 14px;         /* Slightly larger emoji since there is no box framing it */
  line-height: 1.5;
  cursor: pointer;
  box-shadow: none;        /* Removed shadow */
  user-select: none;
  transition: transform 0.15s cubic-bezier(0.1, 0.9, 0.2, 1);
}
.reaction-pill:hover { transform: scale(1.2); }

/* Clean indicator for your own reactions without adding a bulky background */
.reaction-pill.mine { 
  background: transparent; 
  border: none; 
}
.reaction-pill .reaction-count { font-size: 11px; font-weight: 700; color: var(--text-grey); }
.reaction-pill.mine .reaction-count { color: var(--primary-color); }


.quick-reaction-popover {
  position: fixed;
  z-index: 3000;
  display: flex;
  gap: 4px;
  background: var(--white);
  border-radius: 999px;
  padding: 6px 8px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  animation: ctxFadeIn 0.12s ease;
}
.quick-reaction-emoji {
  font-size: 20px;
  cursor: pointer;
  padding: 2px 3px;
  border-radius: 50%;
  transition: transform 0.1s ease;
  line-height: 1;
}
.quick-reaction-emoji:hover { transform: scale(1.3); }

/* ===== Auto-download-photos placeholder ===== */
.photo-download-placeholder {
  position: relative;
  width: 160px; height: 120px;
  border-radius: 10px;
  background: var(--secondary-bg);
  display: flex; align-items: center; justify-content: center;
}
.photo-download-bg-icon { font-size: 34px !important; color: var(--text-grey); opacity: 0.5; }
.photo-download-btn {
  position: absolute; inset: auto;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.photo-download-btn:hover { background: rgba(0,0,0,0.72); }
.photo-download-btn .material-icons { font-size: 20px; }

/* Flash highlight when jumping to a quoted/original message */
@keyframes quoteFlash {
  0% { filter: brightness(1); }
  30% { filter: brightness(1.35); }
  100% { filter: brightness(1); }
}
.message.flash-highlight { filter: brightness(1.35); animation: quoteFlash 0.9s ease; }

/* =========================================
   6B. COMPOSER PREVIEW BARS (Reply / Image attach)
   ========================================= */
.composer-preview-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--secondary-bg);
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
  z-index: 10;
  position: relative;
}
.composer-preview-icon { color: var(--primary-color); font-size: 20px; flex-shrink: 0; }
.composer-preview-text {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
}
.composer-preview-text strong { font-size: 12.5px; color: var(--primary-color); }
.composer-preview-text span {
  font-size: 12.5px; color: var(--text-grey);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.composer-preview-close { color: var(--text-grey); cursor: pointer; flex-shrink: 0; font-size: 20px; }
.composer-preview-close:hover { color: var(--danger); }
#image-preview-thumb {
  width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--border-color);
}

/* View-once toggle button, lives inside the image preview bar */
.view-once-toggle {
  background: transparent; border: 1px solid var(--border-color);
  color: var(--text-grey); border-radius: 50%;
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s;
}
.view-once-toggle .material-icons { font-size: 18px; }
.view-once-toggle:hover { border-color: var(--primary-color); color: var(--primary-color); }
.view-once-toggle.active {
  background: var(--primary-color); border-color: var(--primary-color); color: var(--white);
}

/* Timer preview bar reuses .composer-preview-bar; just tint the icon */
#timer-preview-bar .composer-preview-icon { color: var(--primary-color); }


/* =========================================
   7. INPUT FOOTER
   ========================================= */
.message-input-container {
  position: relative;
  padding: 12px 16px;
  /* Extra bottom padding equal to the device's safe area (home-indicator /
     gesture-nav strip on iOS, three-button nav on Android) so the composer
     always sits above it instead of disappearing underneath it. */
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--white);
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
  flex-shrink: 0;
}

.message-input-container input[type="text"] {
  flex: 1;
  min-width: 0; /* let the input shrink below its intrinsic width instead of
                   pushing the send/mic/timer buttons off-screen on small phones */
  padding: 11px 18px;
  border-radius: 24px;
  border: 1px solid transparent;
  background: var(--secondary-bg);
  font-size: 14px;
  transition: all 0.2s;
}
.message-input-container input[type="text"]:focus {
  background: var(--white);
  border-color: var(--primary-color);
  outline: none;
}

.message-input-container button {
  background: transparent; border: none;
  cursor: pointer; padding: 8px;
  color: var(--text-grey); border-radius: 50%;
  transition: all 0.2s; display: flex;
}
.message-input-container button:hover { color: var(--primary-color); background: #eff6ff; }

#timer-button.active-timer { color: var(--primary-color); background: #eff6ff; position: relative; }
#timer-button.active-timer::after {
  content: ''; position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary-color); border: 2px solid var(--white);
}

/* Disappearing-message timer picker popup */
.timer-popup {
  position: absolute; bottom: calc(62px + env(safe-area-inset-bottom, 0px)); right: 12px;
  background: var(--white); border-radius: 14px;
  box-shadow: var(--shadow-lg); border: 1px solid var(--border-color);
  width: 200px; padding: 6px; z-index: 40;
  animation: fadeIn 0.15s ease;
}
.timer-popup-title {
  font-size: 12px; font-weight: 700; color: var(--text-grey);
  text-transform: uppercase; letter-spacing: 0.03em;
  padding: 8px 10px 4px;
}
.timer-option {
  padding: 10px 10px; border-radius: 8px; font-size: 14px;
  cursor: pointer; color: var(--text-dark);
}
.timer-option:hover { background: var(--secondary-bg); color: var(--primary-color); }
.timer-option[data-ms="0"] { color: var(--danger); border-top: 1px solid var(--border-color); margin-top: 4px; border-radius: 0 0 8px 8px; }

/* Force Send Button to stand out */
#send-button {
  background: var(--primary-color);
  color: var(--white) !important;
  padding: 10px;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
}
#send-button:hover { background: #2563eb; transform: scale(1.05); }


/* =========================================
   8. DYNAMIC JS OVERLAYS (Toasts & Menus)
   ========================================= */

/* JS Toasts */
.success-message, .error-message {
  position: fixed; top: 24px; left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px; border-radius: 50px;
  font-size: 13px; font-weight: 600; color: #fff;
  z-index: 99999; box-shadow: var(--shadow-lg);
  animation: toastSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.success-message { background: var(--text-dark); }
.error-message { background: var(--danger); }

@keyframes toastSlide {
  from { top: -40px; opacity: 0; }
  to { top: 24px; opacity: 1; }
}

/* JS Bottom Sheet (Right click menu) */
.bottom-sheet {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(3px);
  z-index: 2000; display: flex;
  align-items: flex-end; justify-content: center;
  animation: fadeIn 0.15s ease;
}

.bottom-sheet .options {
  background: var(--white); width: 100%; max-width: 480px;
  border-radius: 20px 20px 0 0; 
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.bottom-sheet .option, .bottom-sheet .close {
  padding: 14px; text-align: left; font-weight: 600;
  font-size: 15px; cursor: pointer; border-radius: 12px;
  display: flex; align-items: center; gap: 12px;
}
.bottom-sheet .close { justify-content: center; }
.bottom-sheet .option-icon { font-size: 20px; color: var(--text-grey); }
.bottom-sheet .option:hover { background: var(--secondary-bg); color: var(--primary-color); }
.bottom-sheet .option:hover .option-icon { color: var(--primary-color); }
.bottom-sheet .option-danger { color: var(--danger); }
.bottom-sheet .option-danger .option-icon { color: var(--danger); }
.bottom-sheet .option-danger:hover { background: rgba(239, 68, 68, 0.08); color: var(--danger); }
.bottom-sheet .option-danger:hover .option-icon { color: var(--danger); }
.bottom-sheet .delete-choice-title {
  text-align: center; font-size: 12px; font-weight: 700; color: var(--text-grey);
  text-transform: uppercase; letter-spacing: 0.03em; padding: 6px 0 10px;
}
.bottom-sheet .close { margin-top: 8px; background: var(--secondary-bg); color: var(--text-grey); }

.bottom-sheet .sheet-reactions-row {
  display: flex;
  justify-content: space-around;
  padding: 4px 4px 14px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 6px;
}
.bottom-sheet .sheet-reaction-emoji {
  font-size: 26px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 50%;
  transition: transform 0.1s ease;
}
.bottom-sheet .sheet-reaction-emoji:hover { transform: scale(1.25); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ===== Desktop right-click context menu (cursor-anchored, replaces the OS menu) ===== */
.msg-context-menu {
  position: fixed;
  z-index: 3000;
  min-width: 210px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  border: 1px solid var(--border-color);
  animation: ctxFadeIn 0.12s ease;
}
@keyframes ctxFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.msg-context-menu .ctx-reactions-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 6px 8px;
}
.msg-context-menu .ctx-emoji {
  font-size: 19px;
  cursor: pointer;
  padding: 3px;
  border-radius: 50%;
  transition: transform 0.1s ease;
  line-height: 1;
}
.msg-context-menu .ctx-emoji:hover { background: var(--secondary-bg); transform: scale(1.2); }
.msg-context-menu .ctx-divider { height: 1px; background: var(--border-color); margin: 5px 4px; }
.msg-context-menu .ctx-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
  font-size: 14px; color: var(--text-dark);
}
.msg-context-menu .ctx-item .material-icons { font-size: 18px; color: var(--text-grey); }
.msg-context-menu .ctx-item:hover { background: var(--secondary-bg); }
.msg-context-menu .ctx-item.danger { color: var(--danger); }
.msg-context-menu .ctx-item.danger .material-icons { color: var(--danger); }
.msg-context-menu .ctx-item.danger:hover { background: rgba(239, 68, 68, 0.08); }

/* Recording & Edit Modals */
.dialog {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  z-index: 2000; display: flex; align-items: center; justify-content: center;
}
.dialog-content {
  background: var(--surface, var(--white)); padding: 24px; border-radius: 16px;
  width: 90%; max-width: 320px; text-align: center; box-shadow: var(--shadow-lg);
}

/* =========================================
   8B. SLIDING VOICE RECORDER
   ========================================= */
.voice-recorder-bar {
  position: absolute; inset: 0;
  background: var(--white);
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  z-index: 20;
  transition: transform 0.05s linear;
  touch-action: none;
}
.vr-info { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.vr-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--danger);
  animation: vrPulse 1.1s ease-in-out infinite;
}
@keyframes vrPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}
.vr-time { font-size: 14px; font-weight: 600; color: var(--text-dark); min-width: 38px; }

.vr-slide-hint {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 2px; color: var(--text-grey); font-size: 13.5px;
  transition: opacity 0.15s linear;
}
.vr-slide-hint .material-icons { font-size: 18px; }

.vr-delete-zone {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--danger); cursor: pointer; background: transparent;
  transition: background 0.15s;
}
.vr-delete-zone:hover { background: rgba(239, 68, 68, 0.1); }

.voice-recorder-bar.cancel-zone .vr-time { color: var(--danger); }
.voice-recorder-bar.cancel-zone .vr-dot { background: var(--danger); }

.vr-lock-track {
  position: absolute; right: 20px; top: -58px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--white); border: 1px solid var(--border-color);
  border-radius: 20px; padding: 8px 6px;
  box-shadow: var(--shadow-lg);
  animation: vrLockFloat 1.6s ease-in-out infinite;
}
.vr-lock-icon { color: var(--primary-color); font-size: 18px; }
.vr-lock-chevron { color: var(--text-grey); font-size: 16px; margin-bottom: -4px; }
@keyframes vrLockFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Locked (hands-free) recording controls */
.voice-recorder-locked-bar {
  position: absolute; inset: 0;
  background: var(--white);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 16px;
  z-index: 20;
  animation: fadeIn 0.15s ease;
}
.vr-locked-btn, .vr-locked-send {
  border: none; border-radius: 50%; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.vr-locked-btn { background: transparent; color: var(--danger); }
.vr-locked-btn:hover { background: rgba(239, 68, 68, 0.1); }
.vr-locked-send { background: var(--primary-color); color: var(--white); box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4); }
.vr-locked-send:hover { background: #2563eb; transform: scale(1.05); }

/* =========================================
   8C. VIEW-ONCE PHOTOS
   ========================================= */
.view-once-bubble {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(59, 130, 246, 0.08);
  color: var(--primary-color);
  font-size: 13.5px; font-weight: 600;
  cursor: pointer; user-select: none;
  min-width: 170px;
}
.view-once-bubble .material-icons { font-size: 20px; }
.view-once-bubble:hover { background: rgba(59, 130, 246, 0.16); }
.view-once-bubble.opened {
  background: var(--secondary-bg); color: var(--text-grey); cursor: default;
}
.view-once-bubble.opened:hover { background: var(--secondary-bg); }

.view-once-overlay {
  position: fixed; inset: 0; background: #000;
  z-index: 2000; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  animation: fadeIn 0.15s ease;
}
.view-once-topbar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 16px 16px; color: #fff;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
}
.view-once-topbar-icon { font-size: 18px; }
.view-once-topbar-text { flex: 1; font-size: 13px; opacity: 0.9; }
.view-once-close { cursor: pointer; font-size: 24px; }
.view-once-image { max-width: 100%; max-height: 100%; object-fit: contain; }

/* =========================================
   8D. DISAPPEARING-MESSAGE COUNTDOWN BADGE
   ========================================= */
.destruct-badge {
  display: inline-flex; align-items: center; gap: 2px;
  margin-right: 4px; opacity: 0.85; vertical-align: middle;
}
.destruct-badge-icon { font-size: 13px !important; }
.destruct-badge-time { font-size: 11px; }


/* =========================================
   9B. DARK MODE
   ========================================= */
body.dark-mode {
  --secondary-bg: #0f172a;
  --white: #121c30;
  --text-dark: #f1f5f9;
  --text-grey: #94a3b8;
  --border-color: #24314a;
  --glass-bg: rgba(18, 28, 48, 0.85);
}
body.dark-mode .container::before { opacity: 0.12; }
body.dark-mode .received .message { background: #1e293b; }
body.dark-mode input, body.dark-mode textarea, body.dark-mode select { color: var(--text-dark); }
body.dark-mode .search-container input::placeholder,
body.dark-mode .message-input-container input::placeholder { color: #64748b; }

/* =========================================
   10. SIDEBAR TABS (Chats / Contacts)
   ========================================= */
.sidebar-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  padding: 0 8px;
}
.sidebar-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.sidebar-tab .material-icons { font-size: 18px; }
.sidebar-tab:hover { color: var(--primary-color); }
.sidebar-tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }

.sidebar-panel { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 10px; }
.sidebar-panel.active { display: block; }

/* =========================================
   11. CONTACTS PANEL
   ========================================= */
.add-contact-btn {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px dashed var(--primary-color);
  background: #eff6ff;
  color: var(--primary-color);
  font-weight: 600;
  font-size: 13px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}
.add-contact-btn:hover { background: #dbeafe; }

.contact-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.contact-item:hover { background: var(--secondary-bg); }
.contact-item .contact-meta { flex: 1; min-width: 0; margin-left: 10px; }
.contact-item .contact-meta .cname { font-weight: 600; font-size: 14px; display: block; }
.contact-item .contact-meta .cstatus { font-size: 12px; color: var(--text-grey); }
.contact-item img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.contact-item .material-icons.chat-icon { color: var(--primary-color); opacity: 0.7; }

.empty-state {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-grey);
}
.empty-state .material-icons { font-size: 42px; opacity: 0.4; margin-bottom: 8px; }

.add-contact-results { max-height: 300px; overflow-y: auto; margin-top: 12px; }

/* ---- Calls panel (recent calls list) ---- */
#calls-list-inner { max-height: calc(100vh - 220px); overflow-y: auto; }
.call-log-item { cursor: default; }
.call-log-item .contact-meta { cursor: pointer; }
.call-log-meta {
  display: flex;
  align-items: center;
  gap: 4px;
}
.call-log-direction-icon { font-size: 15px !important; color: var(--text-grey); }
.call-log-meta.missed { color: var(--danger); }
.call-log-meta.missed .call-log-direction-icon { color: var(--danger); }
.call-again-btn {
  background: var(--secondary-bg);
  border: none;
  color: var(--primary-color);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.call-again-btn:hover { background: #dbeafe; }
.call-again-btn .material-icons { font-size: 18px; }
.add-contact-row {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
}
.add-contact-row:hover { background: var(--secondary-bg); }
.add-contact-row img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; margin-right: 10px; }
.add-contact-row .cn { flex: 1; font-size: 14px; font-weight: 600; }
.add-contact-row .cu { font-size: 12px; color: var(--text-grey); font-weight: 400; }
.add-contact-row button {
  border: none; background: var(--primary-color); color: #fff;
  padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.add-contact-row button:disabled { background: #94a3b8; cursor: default; }

/* =========================================
   12. MAIN VIEW ROUTER (Chat / Profile / Settings)
   ========================================= */
.container { padding: 0; }
.main-view { display: none; flex-direction: column; height: 100%; overflow: hidden; }
.main-view.active { display: flex; }

.user-info-text { display: flex; flex-direction: column; }

.view-header {
  height: 64px;
  padding: 0 20px;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.view-header h2 { font-size: 17px; font-weight: 700; }
.back-icon { cursor: pointer; color: var(--primary-color); display: none; }

.empty-chat-hint {
  margin: auto;
  text-align: center;
  color: var(--text-grey);
}
.empty-chat-hint .material-icons { font-size: 48px; opacity: 0.35; margin-bottom: 10px; }

/* =========================================
   13. PROFILE VIEW
   ========================================= */
.profile-scroll { flex: 1; overflow-y: auto; padding: 20px; z-index: 1; }
.profile-card {
  max-width: 700px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.cover-photo { height: 120px; background: var(--primary-gradient); }
.profile-header-content { padding: 0 24px 24px; position: relative; }
.avatar-wrapper {
  position: relative;
  width: 100px; height: 100px;
  margin-top: -50px;
  border-radius: 50%;
  border: 4px solid var(--white);
  cursor: pointer;
  box-shadow: var(--shadow-md);
}
.profile-pic-lg { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.online-indicator {
  width: 16px; height: 16px; background: var(--success);
  border: 3px solid var(--white); border-radius: 50%;
  position: absolute; bottom: 2px; right: 2px; display: none;
}
.profile-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 0; flex-wrap: wrap; }
.btn {
  padding: 9px 16px; border-radius: 20px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; display: inline-flex;
  align-items: center; gap: 6px; transition: all 0.2s;
}
.btn-primary { background: var(--primary-color); color: #fff; }
.btn-primary:hover { background: #2563eb; }
.btn-outline { background: var(--secondary-bg); border-color: var(--border-color); color: var(--text-dark); }
.btn-outline:hover { background: #e2e8f0; }
.btn-full { flex: 1; justify-content: center; }

.user-name { font-size: 22px; font-weight: 800; }
.user-username { font-size: 13px; color: var(--primary-color); font-weight: 600; margin-bottom: 8px; }
.status-badge {
  display: inline-flex; align-items: center; padding: 5px 12px;
  border-radius: 12px; font-size: 11px; font-weight: 700; margin-bottom: 12px;
  background: rgba(16,185,129,0.1); color: var(--success); border: 1px solid rgba(16,185,129,0.25);
}
.user-bio { color: var(--text-grey); font-size: 14px; line-height: 1.5; margin-bottom: 16px; }

.details-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px; padding-top: 16px; border-top: 1px solid var(--border-color);
}
.detail-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.detail-icon { color: var(--primary-color); font-size: 20px; }
.detail-content strong { display: block; color: var(--text-grey); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.detail-content span { font-weight: 600; }

/* =========================================
   14. SETTINGS VIEW
   ========================================= */
.settings-scroll { flex: 1; overflow-y: auto; padding: 20px; z-index: 1; }
.settings-section {
  max-width: 640px; margin: 0 auto 20px auto;
  background: var(--surface, var(--white)); border: 1px solid var(--border-color);
  border-radius: 14px; padding: 6px 18px; box-shadow: var(--shadow-sm);
}
.settings-section h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-grey); padding: 14px 0 6px 0;
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 0;
}
.settings-row-text { display: flex; flex-direction: column; gap: 2px; }
.settings-row-text strong { font-size: 14px; }
.settings-row-text span { font-size: 12px; color: var(--text-grey); }

.settings-action-btn {
  width: 100%; text-align: left; padding: 14px 0; border: none; background: none;
  font-size: 14px; font-weight: 600;
  color: var(--text-dark); display: flex; align-items: center; gap: 10px; cursor: pointer;
}
.settings-action-btn.danger { color: var(--danger); }
.settings-action-btn:hover { color: var(--primary-color); }
.settings-action-btn.danger:hover { color: var(--danger); opacity: 0.8; }
.settings-action-value { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--text-grey); }
.settings-action-chevron { font-size: 18px; color: var(--text-grey); margin-left: 2px; }
.settings-hint { font-size: 12px; color: var(--text-grey); line-height: 1.5; padding: 0 0 14px 0; margin: 0; }

/* Choice modal (privacy option pickers) */
.choice-options { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.choice-option {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px; border-radius: 12px; border: 1px solid var(--border-color);
  background: var(--white); cursor: pointer; text-align: left;
}
.choice-option:hover { background: var(--secondary-bg); }
.choice-option.selected { border-color: var(--primary-color); background: #eff6ff; }
body.dark-mode .choice-option.selected { background: rgba(59,130,246,0.12); }
.choice-option-icon { color: var(--primary-color); font-size: 22px; flex-shrink: 0; }
.choice-option-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.choice-option-text strong { font-size: 14px; }
.choice-option-text span { font-size: 12px; color: var(--text-grey); }
.choice-option-check { color: var(--primary-color); font-size: 20px; opacity: 0; flex-shrink: 0; }
.choice-option.selected .choice-option-check { opacity: 1; }

/* Info modal body (Help Center / Terms & Privacy / App info) */
.info-modal-body { font-size: 13.5px; line-height: 1.6; color: var(--text-dark); }
.info-modal-body h4 { font-size: 14px; margin: 16px 0 6px 0; }
.info-modal-body h4:first-child { margin-top: 0; }
.info-modal-body p { margin: 0 0 8px 0; color: var(--text-grey); }
.info-modal-body ul { margin: 0 0 8px 18px; padding: 0; color: var(--text-grey); }
.info-modal-body li { margin-bottom: 4px; }

/* Private profile notice */
.profile-private-notice {
  display: flex; align-items: center; gap: 8px;
  background: var(--secondary-bg); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 16px;
  font-size: 12.5px; color: var(--text-grey);
}
.profile-private-notice .material-icons { color: var(--primary-color); font-size: 18px; }

/* Story-reply tag inside a chat bubble */
.story-reply-quote .reply-quote-name { display: flex; align-items: center; gap: 4px; }
.story-reply-quote-icon { font-size: 13px !important; }
.reply-quote-thumb.text-thumb {
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; color: #fff; text-align: center;
  padding: 2px; overflow: hidden; line-height: 1.1;
}

/* Viewer row (story viewers modal) */
.viewer-row { cursor: default; }
.viewer-like-icon { color: #ef4444; font-size: 18px; margin-left: auto; }

/* Toggle Switch */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; cursor: pointer; inset: 0;
  background-color: #cbd5e1; transition: 0.2s; border-radius: 24px;
}
.slider::before {
  position: absolute; content: ""; height: 18px; width: 18px;
  left: 3px; bottom: 3px; background-color: white; transition: 0.2s; border-radius: 50%;
}
.switch input:checked + .slider { background-color: var(--primary-color); }
.switch input:checked + .slider::before { transform: translateX(18px); }

/* =========================================
   15. GENERIC DIALOG / FORM ADDITIONS
   ========================================= */
.dialog-content.wide { max-width: 460px; width: 92%; max-height: 85vh; overflow-y: auto; text-align: left; }
.dialog-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.dialog-header h3 { font-size: 17px; }
.close-icon { cursor: pointer; color: var(--text-grey); }
.close-icon:hover { color: var(--text-dark); }

.form-group { margin-bottom: 14px; text-align: left; }
.form-group label {
  display: block; font-size: 11px; font-weight: 700; margin-bottom: 6px;
  color: var(--text-grey); text-transform: uppercase; letter-spacing: 0.4px;
}
.form-control {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border-color); background: var(--secondary-bg);
  font-family: inherit; font-size: 14px; color: var(--text-dark); outline: none;
}
.form-control:focus { border-color: var(--primary-color); background: var(--white); }
.status-text { font-size: 11px; margin-top: 4px; display: block; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal-actions button {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: none;
  font-weight: 700;
  cursor: pointer;
}
.btn-secondary {
  background: var(--secondary-bg);
  color: var(--text-dark);
  border: 1px solid var(--border-color) !important;
}


/* =========================================
   9. DEFINITIVE MOBILE RESPONSIVE 
   ========================================= */
@media screen and (max-width: 768px) {
  
  #overflow-menu-Bar {
    width: 100%;
    position: absolute;
    inset: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .container {
    width: 100%;
    position: absolute;
    inset: 0;
    z-index: 30;
    transform: translateX(100%); /* hidden off-screen right */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* JS triggers this class on contact click */
  .container.show-chat { transform: translateX(0); }
  
  /* JS triggers this on sidebar */
  #overflow-menu-Bar.hide-sidebar { transform: translateX(-25%); }

  #back-button { display: inline-block !important; }
  .back-icon { display: inline-flex !important; }
  .message { max-width: 100%; }

  /* Contacts / Profile are already reachable from the bottom nav on mobile,
     so hide the duplicate row here. Settings and Calls have no bottom-nav
     equivalent (Settings never did; Calls now lives next to it), and Secret
     Chats has no equivalent either, so that whole top row stays put next to
     the logo. */
  #sidebar-menu-actions { display: none; }

}

/* Bottom Navigation Bar Styles — floating pill nav */
.bottom-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: calc(100% - 28px);
  max-width: 420px;
  height: 60px;
  padding: 6px 8px;
  background-color: #ffffff;
  border-top: none;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.14);
  z-index: 1000;
}

.bottom-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  padding: 0 12px;
  border-radius: 999px;
  color: #9aa1b2;
  text-decoration: none;
  flex: 0 0 auto;
  transition: background-color .25s ease, color .25s ease, flex-grow .25s ease, padding .25s ease;
}

.bottom-nav-item .material-icons {
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s ease;
}

.bottom-nav-item .bottom-nav-label {
  font-size: 13px;
  font-weight: 600;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width .25s ease, opacity .2s ease, margin-left .25s ease;
}

.bottom-nav-item:hover {
  color: var(--primary-color, #5b6cff);
}

.bottom-nav-item.active {
  flex: 1 1 auto;
  justify-content: flex-start;
  max-width: 150px;
  padding: 4px 16px 4px 4px;
  background-color: color-mix(in srgb, var(--primary-color, #5b6cff) 15%, white);
  color: var(--primary-color, #5b6cff);
}

.bottom-nav-item.active .material-icons {
  width: 34px;
  height: 34px;
  min-width: 34px;
  font-size: 18px;
  color: #ffffff;
  background-color: var(--primary-color, #5b6cff);
  border-radius: 50%;
}

.bottom-nav-item.active .bottom-nav-label {
  max-width: 90px;
  opacity: 1;
  margin-left: 2px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #64748b; /* A nice muted gray */
  flex: 1;
  transition: color 0.2s ease-in-out;
}

.nav-item .material-icons {
  font-size: 24px;
  margin-bottom: 4px;
}

.nav-item .nav-label {
  font-size: 12px;
  font-weight: 500;
}

/* Active state for the currently selected tab */
.nav-item.active, 
.nav-item:hover {
  color: var(--primary-color, #3b82f6); /* Falls back to a nice blue if CSS var isn't set */
}

/* =========================================
   16. STORIES BAR (chat list)
   ========================================= */
.stories-bar {
  display: flex;
  gap: 14px;
  padding: 14px 12px 10px 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 6px;
  scrollbar-width: none;
}
.stories-bar::-webkit-scrollbar { display: none; }

.story-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  flex-shrink: 0;
  width: 62px;
}
.story-ring {
  width: 58px; height: 58px;
  border-radius: 50%;
  padding: 2.5px;
  background: linear-gradient(135deg, #cbd5e1, #cbd5e1); /* seen / no-story default */
  display: flex; align-items: center; justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.story-ring.has-unseen {
  background: linear-gradient(135deg, #f59e0b, #ef4444 45%, #3b82f6 100%);
}
.story-ring img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid var(--white);
  display: block;
}
.story-ring .story-add-badge {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 19px; height: 19px;
  background: var(--primary-color);
  border: 2px solid var(--white);
  border-radius: 50%;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.story-ring .story-add-badge .material-icons { font-size: 12px; }
.story-slot-label {
  font-size: 11px;
  color: var(--text-grey);
  text-align: center;
  max-width: 62px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.story-slot.self .story-slot-label { color: var(--text-dark); font-weight: 600; }

.story-create-content {
  text-align: left;
  max-width: 380px;
}
.story-text-input {
  min-height: 120px;
  resize: vertical;
  line-height: 1.45;
}
.story-bg-options {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.story-bg-option {
  width: 34px;
  height: 34px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.story-bg-option.active {
  border-color: var(--text-dark);
  outline: 2px solid var(--white);
}

/* =========================================
   17. STORY VIEWER (full screen)
   ========================================= */
.story-viewer {
  position: fixed; inset: 0;
  background: #000;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.15s ease;
}
.story-progress-row {
  display: flex;
  gap: 4px;
  padding: 10px 10px 0 10px;
  flex-shrink: 0;
}
.story-progress-seg {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
  overflow: hidden;
}
.story-progress-seg .fill {
  height: 100%;
  width: 0%;
  background: #fff;
}
.story-progress-seg.done .fill { width: 100%; }
.story-progress-seg.active .fill { animation: storyFill linear forwards; }
@keyframes storyFill { from { width: 0%; } to { width: 100%; } }

.story-viewer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  flex-shrink: 0;
}
.story-viewer-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,0.3); }
.story-viewer-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.story-viewer-meta strong { color: #fff; font-size: 14px; }
.story-viewer-meta span { color: rgba(255,255,255,0.7); font-size: 11.5px; }
.story-viewer-close { color: #fff; cursor: pointer; }

.story-viewer-stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.story-viewer-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}
.story-viewer-text {
  width: min(560px, 88vw);
  min-height: min(680px, 72vh);
  max-height: 78vh;
  padding: 36px;
  border-radius: 8px;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.story-nav-zone {
  position: absolute;
  top: 0; bottom: 0;
  width: 35%;
  cursor: pointer;
  z-index: 5;
}
.story-nav-prev { left: 0; }
.story-nav-next { right: 0; }

/* Story viewer footer: reply bar (others' stories) / viewers button (own story) */
.story-viewer-footer {
  flex-shrink: 0;
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)) 14px;
  z-index: 6;
}
.story-reply-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.story-reply-bar input {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  border-radius: 22px;
  padding: 10px 16px;
  font-size: 14px;
  outline: none;
}
.story-reply-bar input::placeholder { color: rgba(255,255,255,0.65); }
.story-like-btn, .story-reply-send-btn {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  border: none; background: rgba(255,255,255,0.12); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.story-like-btn:active { transform: scale(0.88); }
.story-like-btn.liked { color: #ef4444; }
.story-like-btn.liked .material-icons { animation: storyLikePop 0.3s ease; }
@keyframes storyLikePop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.story-reply-send-btn { background: var(--primary-color); }
.story-reply-send-btn:disabled { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.4); cursor: default; }

.story-viewers-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  border-radius: 18px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  width: fit-content;
}
.story-viewers-btn .material-icons { font-size: 18px; }
.story-viewers-btn:hover { background: rgba(255,255,255,0.22); }
.story-viewers-stat { display: flex; align-items: center; gap: 5px; }
.story-viewers-stat-likes .material-icons { color: #ef4444; font-size: 16px; }
.story-viewers-divider { width: 1px; height: 14px; background: rgba(255,255,255,0.25); }

/* Views/likes summary line at the top of the "Viewers" modal */
.story-viewers-summary {
  display: flex; gap: 16px; padding: 2px 4px 12px;
  border-bottom: 1px solid var(--border-color); margin-bottom: 8px;
}
.story-viewers-summary-stat {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--text-grey);
}
.story-viewers-summary-stat .material-icons { font-size: 17px; }
.story-viewers-summary-stat.liked { color: #ef4444; }
.story-viewers-summary-stat.liked .material-icons { color: #ef4444; }

/* Rows for people who liked the story get a soft highlight so they stand
   out from plain viewers at a glance, in addition to floating to the top. */
.viewer-row.liked { background: rgba(239, 68, 68, 0.07); border-radius: 10px; }
body.dark-mode .viewer-row.liked { background: rgba(239, 68, 68, 0.13); }

/* =========================================
   18. FORWARD MODAL
   ========================================= */
.forward-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--secondary-bg);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--text-grey);
}
.forward-preview img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; }
.forward-contact-row {
  display: flex;
  align-items: center;
  padding: 9px 6px;
  border-radius: 10px;
  cursor: pointer;
  gap: 10px;
}
.forward-contact-row:hover { background: var(--secondary-bg); }
.forward-contact-row img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.forward-contact-row .fcn { flex: 1; font-size: 14px; font-weight: 600; }
.forward-contact-row .fc-check {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border-color);
  display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: 14px; flex-shrink: 0;
}
.forward-contact-row.selected .fc-check {
  background: var(--primary-color); border-color: var(--primary-color); color: #fff;
}

@media screen and (max-width: 768px) {
  .message-bubble-wrap { max-width: 84%; }
  body.chat-conversation-open .bottom-nav { display: none; }
  .story-viewer-text {
    width: 90vw;
    min-height: 62vh;
    padding: 26px;
    font-size: 22px;
  }

  /* Keep scrollable views clear of the fixed bottom nav (incl. safe area) */
  #overflow-menu,
  #contacts-panel,
  #calls-panel,
  .sidebar-panel,
  .profile-scroll,
  .settings-scroll {
    padding-bottom: calc(20px + 70px + env(safe-area-inset-bottom, 0px)) !important;
  }

/* Explicitly hide bottom pill nav on desktop screens */
@media screen and (min-width: 769px) {
  .bottom-nav {
    display: none !important;
  }
}

/* Small-phone scaling for the message composer: shrink spacing/icons instead
   of letting the button row overflow or squeeze the text field to nothing. */
@media screen and (max-width: 400px) {
  .message-input-container {
    padding-left: 8px;
    padding-right: 8px;
    gap: 2px;
  }
  .message-input-container button {
    padding: 6px;
  }
  .message-input-container button .material-icons {
    font-size: 20px;
  }
  .message-input-container input[type="text"] {
    padding: 9px 12px;
    font-size: 13.5px;
  }
  #user-info {
    padding: 0 12px;
  }
  .call-btn .material-icons {
    font-size: 21px;
  }
}

body.dark-mode .story-ring { background: linear-gradient(135deg, #334155, #334155); }
body.dark-mode .story-ring.has-unseen { background: linear-gradient(135deg, #f59e0b, #ef4444 45%, #3b82f6 100%); }
body.dark-mode .story-ring img { border-color: var(--white); }