/**
 * Accent SMS Portal Custom Styles
 * Enhances Tailwind CSS with custom components
 * 
 * ============================================
 * RESPONSIVE BREAKPOINT SYSTEM
 * ============================================
 * 
 * This file contains legacy media queries. New responsive code should use
 * the unified system in these files (loaded via index.html):
 * 
 *   - breakpoints.css   - CSS variables and utility classes
 *   - layout-state.js   - Adds body classes: is-mobile, is-tablet, is-desktop, etc.
 *   - safe-areas.css    - Notch/Dynamic Island/home indicator handling
 *   - viewport-fixes.css - Dynamic viewport height (dvh) fixes
 *   - tablet.css        - Tablet-specific layouts
 * 
 * STANDARD BREAKPOINTS (use these for new code):
 *   - Mobile:  < 850px  (body.is-mobile, bp-xs, bp-sm, bp-md)
 *   - Tablet:  850px - 1199px (body.is-tablet, bp-lg, bp-xl)
 *   - Desktop: >= 1200px (body.is-desktop, bp-2xl)
 * 
 * LEGACY BREAKPOINTS IN THIS FILE (do not add more):
 *   - 400px, 480px, 520px, 540px - various mobile tweaks
 *   - 849px/850px - mobile/tablet boundary
 *   - 900px, 1000px - mid-range adjustments
 *   - 1199px/1200px - tablet/desktop boundary
 *   - 1280px, 1400px, 1500px - large screen adjustments
 * 
 * For new responsive styles, prefer body class selectors:
 *   body.is-mobile .my-element { ... }
 *   body.is-tablet .my-element { ... }
 *   body.is-desktop .my-element { ... }
 * ============================================
 */

/* CSS Variables */
:root {
  --header-height: 76px; /* Approximate header height */
  
  /* Safe area insets for iOS devices with notch/dynamic island */
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  
  /* Light mode - softer, easier on eyes */
  --bg-primary: #f8f9fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f3f5;
  --border-color: #e9ecef;
  --text-primary: #212529;
  --text-secondary: #6c757d;

  /* Electron Window Controls Overlay (WCO) — defaults are 0 outside Electron.
     See docs/plans/ELECTRON_WCO_TITLEBAR_PLAN.md. Resolved when html.is-electron-wco
     is set by app.js boot detection. titlebar-area-* env vars are populated by
     Chromium when titleBarOverlay is active in the BrowserWindow config. */
  --wco-titlebar-height: 0px;
  --wco-buttons-width: 0px;
}

/* === ELECTRON WCO ACTIVE (Windows desktop app only) ===
   Activated when (a) UA contains "Electron" AND (b) window-controls-overlay
   is exposed by Chromium (i.e. titleBarOverlay is configured in main.js).
   Browser, PWA, macOS Electron, Linux Electron, and pre-WCO Electron builds
   are all unaffected — env(titlebar-area-*) returns the fallback there. */
html.is-electron-wco {
  --wco-titlebar-height: env(titlebar-area-height, 32px);
  /* OS-drawn buttons sit to the right of the titlebar-area on Windows.
     Their width = viewport width − titlebar-area-width. */
  --wco-buttons-width: calc(100vw - env(titlebar-area-width, 100vw));
}

/* Header drag region: the entire <header> is grabbable so the user can move
   the window from any non-interactive surface (header bg, padding, around
   the search bar, etc.). Interactive descendants opt out via the no-drag
   rule below.

   Vertical layout: padding-top reserves the top --wco-titlebar-height (32px
   on Windows) for the OS-drawn caption-button cluster. The OS buttons paint
   in the top-right corner of that zone; the rest of the zone is just header
   background color (theme-matched via the IPC `setTitleBarOverlay` call in
   app.js, so the WCO `color` blends seamlessly with the header bg — no
   visible seam between the WCO strip and the portal content row). All
   portal header content (logo, search bar, right cluster) sits BELOW the
   WCO zone in its natural single-row layout: the right cluster (Teams Call,
   DND, dark-mode, avatar, etc.) ends at the window's right edge, vertically
   below the OS buttons rather than horizontally to the left of them.

   We deliberately do NOT also reserve horizontal space (padding-right) —
   that would push the right cluster left into a 2D-shifted position. With
   the cluster sitting underneath the buttons, no horizontal overlap occurs
   regardless of cluster width.

   --wco-titlebar-height resolves to env(titlebar-area-height, 32px) on
   Electron-WCO; in Electron the env var doesn't always populate but the
   32px CSS fallback is correct for stock Win10/11 caption buttons.

   --wco-buttons-width is still set by syncWcoButtonsWidth() in app.js
   and exposed for any future right-edge clearance needs (no current
   consumers — the previous toast-shift rule was removed in favor of
   matching the web `top-4 right-4` anchor exactly; see commit notes). */
html.is-electron-wco header {
  -webkit-app-region: drag;
  /* 20px is the minimum that clears the OS caption-button cluster:
       avatar_top = header.padding-top + inner_div.padding-top (py-3 = 12px)
                  = 20 + 12 = 32 = WCO zone bottom (--wco-titlebar-height).
     16px left a 4px overlap at the top of the avatar circle (visible as
     the title bar clipping the avatar's top sliver); 20px is the smallest
     value that fully prevents that without adding any extra header height
     beyond what's strictly required. !important defeats the inline
     `style="padding-top: max(safe-area-inset-top, android-inset-top)"` on
     <header>; those mobile values are 0 on Windows desktop, so we lose
     nothing by overriding. */
  padding-top: 20px !important;
}

/* Default-no-drag on every interactive descendant of the header. One-shot rule
   so future header additions inherit correct behavior without per-element edits. */
html.is-electron-wco header button,
html.is-electron-wco header input,
html.is-electron-wco header select,
html.is-electron-wco header textarea,
html.is-electron-wco header a,
html.is-electron-wco header [role="button"],
html.is-electron-wco header [contenteditable] {
  -webkit-app-region: no-drag;
}

/* User profile button: standalone circular avatar that doubles as a button.
   The button frame is invisible (transparent bg, rounded-full to match the
   avatar's circle shape); the avatar fills it entirely so the visual is
   just the avatar — no Tailwind `bg-gray-100 / dark:bg-gray-700` ring
   around it. Hover bg is also forced transparent to defeat the
   `hover:bg-gray-200 dark:hover:bg-gray-600` utility classes; click
   affordance comes from cursor:pointer (already on the button) plus the
   user's avatar image. The userName span is hidden — it would overflow
   the 38×38 box when it loads at lg:inline (≥1024px). Sized to match
   #presenceBtn's 38px height for a uniform header right-cluster. */
html.is-electron-wco #userProfileBtn {
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  justify-content: center !important;
  background-color: transparent !important;
  border-radius: 9999px !important;
}
html.is-electron-wco #userProfileBtn:hover {
  background-color: transparent !important;
}
html.is-electron-wco #userProfileBtn > #userName {
  display: none !important;
}
html.is-electron-wco #userProfileBtn > #userAvatar {
  width: 38px !important;
  height: 38px !important;
}

/* Toast container — Electron-WCO vertical alignment with header right-cluster.
   On web the toast keeps its inline `fixed top-4 right-4` anchor (top=16,
   right=16). In Electron-WCO we push the top down so the toast's top edge
   sits flush with the top of the header's right cluster (Teams Call →
   presence → DND → toggle → avatar). Math:
     right_cluster_top = header.padding-top (20px) + inner_div.padding-top
                         (py-3 = 12px)
                       = 32px
                       = --wco-titlebar-height (WCO zone height).
   Using `var(--wco-titlebar-height)` keeps the anchor semantically tied to
   the WCO zone — if the OS caption-button height ever changes (Win11 DPI
   scaling, future Windows revisions), the toast tracks automatically.
   `right` is left untouched so the toast still hugs the right edge,
   matching the web anchor horizontally. Mobile (< 850px) uses the centered
   layout in the `@media (max-width: 849px)` block below and is unaffected. */
@media (min-width: 850px) {
  html.is-electron-wco #toastContainer {
    top: var(--wco-titlebar-height);
  }
}

/* Header stacking: ensures command bar dropdown appears above nav rail and main content */
header {
  position: relative;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dark header {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Fix dark mode toggle icon visibility */
#moonIcon {
  display: inline-block !important;
}

.dark #moonIcon {
  display: none !important;
}

#sunIcon {
  display: none !important;
}

.dark #sunIcon {
  display: inline-block !important;
}

/* Tab Buttons */
.tab-button {
  color: #6b7280; /* gray-500 */
  background: transparent;
  border: none;
  position: relative;
  transition: all 0.2s ease;
}

@media (hover: hover) {
  .tab-button:hover {
    background: #f1f3f5; /* gray-100 */
    color: #374151; /* gray-700 */
  }
}

@media (hover: hover) {
  .dark .tab-button:hover {
    background: #374151; /* gray-700 */
    color: #d1d5db; /* gray-300 */
  }
}

.tab-button.active {
  color: #2563eb; /* blue-600 */
  background: #eff6ff; /* blue-50 */
  font-weight: 600;
}

.dark .tab-button.active {
  color: #60a5fa; /* blue-400 */
  background: rgba(37, 99, 235, 0.1); /* blue-900/10 */
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 0;
  right: 0;
  height: 2px;
  background: #2563eb; /* blue-600 */
  border-radius: 2px 2px 0 0;
}

.dark .tab-button.active::after {
  background: #60a5fa; /* blue-400 */
}

.tab-badge {
  font-weight: 500;
  min-width: 20px;
  text-align: center;
}

.tab-button.active .tab-badge {
  background: #dbeafe; /* blue-100 */
  color: #2563eb; /* blue-600 */
}

.dark .tab-button.active .tab-badge {
  background: rgba(37, 99, 235, 0.3);
  color: #60a5fa; /* blue-400 */
}

/* Action Icon Buttons (Mobile) */
.action-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  cursor: pointer;
  flex-shrink: 0;
}

@media (hover: hover) {
  .action-icon-btn:hover {
    transform: scale(1.05);
  }
}

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

.action-icon-btn:focus {
  outline: none;
}

/*
 * Targeted transitions for interactive and container elements.
 * Replaces the previous `* { transition }` universal selector which forced
 * the browser to evaluate transition state on every DOM node (3,000–5,000+).
 * This list covers elements that visibly change color during normal use.
 * .main-content-area and .message-area override with transition:none (higher specificity).
 */
button, a, input, select, textarea, label,
.conversation-item, .tab-button, .action-icon-btn,
.favorites-card, .presence-dot, .nav-rail-btn,
.header-menu-item, .presence-option, .presence-preset,
body, header, nav, main, aside, footer,
section, div, span, p, li, td, th,
h1, h2, h3, h4, h5, h6, i {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Full-page dark mode transition — applied briefly during theme toggle only */
body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* Ensure full viewport coverage */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

html {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  scroll-behavior: smooth;
}

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

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 4px;
}

@media (hover: hover) {
  ::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
  }
}

.dark ::-webkit-scrollbar-thumb {
  background: #4a5568;
}

@media (hover: hover) {
  .dark ::-webkit-scrollbar-thumb:hover {
    background: #718096;
  }
}

/* Message animations */
.message {
  animation: fadeIn 0.3s ease-in;
}

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

/* Conversation list - prevent horizontal overflow from hover effects */
#conversationList {
  overflow-x: hidden;
}

/* Conversation item hover effect */
.conversation-item {
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .conversation-item:hover {
    background: #f1f3f5;
  }
  .dark .conversation-item:hover {
    background: #374151;
  }
}

.conversation-item.active {
  background: #e7f5ff !important; /* Softer blue for light mode */
}

.dark .conversation-item.active {
  background: rgb(30 58 138 / 0.3) !important; /* blue-900/30 */
}

/* Keep hover appearance while chip popover is open */
.conversation-item.popover-hover-lock {
  background: #f1f3f5 !important;
}
.dark .conversation-item.popover-hover-lock {
  background: #374151 !important;
}
.favorites-card.popover-hover-lock {
  background: #f1f3f5 !important;
}
.dark .favorites-card.popover-hover-lock {
  background: #374151 !important;
}

/* ── Swipe actions (touch-primary devices only) ── */
/* Base: on non-touch (desktop) the SMS renderer still emits .swipe-outer-wrapper
 * + .swipe-action-buttons into the DOM unconditionally. Hide the action
 * buttons so they don't render as plain block text under each row, and keep
 * the wrapper transparent so the card lays out exactly as before. The touch
 * media query below re-enables the absolute positioning + flex display. */
.swipe-action-buttons {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .swipe-outer-wrapper {
    position: relative;
    overflow: hidden;
  }

  .swipe-action-buttons {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 140px;
    z-index: 0;
    /* Keep the buttons out of the paint/composite path entirely when no swipe
     * is in progress. Without this, fast momentum scrolls of the conversation
     * list on iOS WebKit briefly reveal the buttons BEHIND each row:
     *
     *   1. Every .conversation-item used to carry `will-change: transform`
     *      unconditionally (see rule below), which permanently promoted each
     *      row to its own GPU compositor layer.
     *   2. The action-buttons sit at z-index: 0, the row at z-index: 1.
     *      At rest the row's opaque background covers the buttons.
     *   3. During heavy momentum scroll, WebKit defers some layer rasters to
     *      preserve frame rate. The buttons (composited in the scroller's
     *      layer) are already painted; the row's own layer lags a frame,
     *      producing the visible "bleed-through" the user reported.
     *
     * Visibility-toggling the buttons eliminates the problem at the source:
     * when hidden, WebKit skips paint + composite for them entirely. Scrolling
     * the list can no longer expose anything because there's nothing to
     * expose. When the user actually starts a swipe, .is-grabbing (added on
     * touchstart) flips them visible; once snapped open, [data-swipe-open="1"]
     * keeps them visible until the row closes. */
    visibility: hidden;
  }
  .swipe-outer-wrapper.is-grabbing > .swipe-action-buttons,
  .swipe-outer-wrapper[data-swipe-open="1"] > .swipe-action-buttons {
    visibility: visible;
  }

  .swipe-btn {
    flex: 1;
    border: none;
    outline: none;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 4px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  .swipe-btn i { font-size: 16px; }

  .swipe-btn--read {
    background: #007AFF;
  }

  .swipe-btn--delete {
    background: #FF3B30;
  }

  .swipe-outer-wrapper .conversation-item {
    position: relative;
    z-index: 1;
    background: #ffffff;
    touch-action: pan-y;
    /* NOTE: `will-change: transform` is intentionally NOT on the baseline rule.
     * Applying it to every conversation-item (there can be 50+ in the list)
     * forces WebKit to keep a dedicated GPU compositor layer per row, which
     * (a) wastes VRAM on a long list and (b) is the root cause of the
     * momentum-scroll bleed-through bug where .swipe-action-buttons become
     * briefly visible behind each row during fast flicks. The snap animations
     * at touchend still get compositor promotion automatically because the
     * browser sees the `transform` transition ahead of time; we only need to
     * hint `will-change` while the row is being actively dragged by a finger. */
  }
  .swipe-outer-wrapper.is-grabbing > .conversation-item,
  .swipe-outer-wrapper[data-swipe-open="1"] > .conversation-item {
    will-change: transform;
  }
  .dark .swipe-outer-wrapper .conversation-item {
    background: #1f2937;

  }

  /* The swipe JS writes the transform inline with !important on the row, which
   * beats the mobile-wide `.conversation-item { transform: none !important }`
   * rule in the cascade (inline !important > stylesheet !important). No CSS
   * override is needed here for the transform itself — we only transition the
   * grab-affordance visuals below. */
  .swipe-outer-wrapper > .conversation-item {
    transition: background-color 120ms ease-out, box-shadow 120ms ease-out;
  }

  /* Grab affordance: the instant a finger lands on a swipe row, darken + lift it
   * slightly so the user feels "attached" before any translation occurs. JS adds
   * .is-grabbing on touchstart and removes it on touchend/touchcancel/vertical-scroll. */
  .swipe-outer-wrapper.is-grabbing > .conversation-item {
    background: #eef2f6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06);
  }
  .dark .swipe-outer-wrapper.is-grabbing > .conversation-item {
    background: #2b3544;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
  }

  /* Swipe-right back gesture (mobile thread pane → conversation list).
   * JS writes inline transforms on #messageArea and #conversationsSidebar while
   * the finger is down. Three things have to be true for the parallax to render:
   *   1. The baseline `transition: left 0.3s ease` on .conversations-sidebar
   *      must be suppressed or it fights our inline transform (transition:none).
   *   2. `.conversation-selected .conversations-sidebar { left: -100% }` pins
   *      the sidebar off-screen while a thread is open; that rule has the same
   *      specificity as `.show` but comes later in the cascade, so .show is
   *      ineffective. We force `left: 0` here so our inline transform positions
   *      the sidebar from the viewport's actual left edge.
   *   3. The sidebar must render UNDER the sliding thread, not on top of it, to
   *      get the iOS Messages "revealed from underneath" look. The baseline
   *      mobile z-index is 30; we drop it to 1 so #messageArea (z:1, later in
   *      DOM order) wins the stacking. Any overlap during sub-pixel drift now
   *      shows the thread — the layer the user is pushing off.
   * See initSwipeBack() in app.js and docs/plans/swipe-right-back-gesture.md. */
  .conversations-sidebar.is-swipe-dragging {
    /* Outer is `position: fixed` (mobile) and stays viewport-anchored. The
     * transform is applied to #conversationsSidebarInner, not here. Here we
     * only neutralise the baseline `transition: left 0.3s` and force the
     * outer to `left: 0` so the inner's transform starts from the viewport's
     * actual left edge, and we drop z-index below #messageArea so the sidebar
     * reveals FROM UNDERNEATH the sliding thread (iOS Messages behavior). */
    transition: none !important;
    left: 0 !important;
    z-index: 1 !important;
    /* CRITICAL: drop the outer's background during the gesture. The outer is
     * position: fixed at left: 0, width: 100%, covering the full viewport.
     * Its opaque background would occlude anything behind it. The background
     * is instead carried by the INNER wrapper (below), which moves with the
     * transform — so as the inner slides, whatever is behind it becomes
     * visible. Without this, the sidebar would never be seen during the
     * drag (the outer would cover it until it's fully removed from the DOM
     * after commit). */
    background: transparent !important;
    background-color: transparent !important;
  }
  /* The INNER wrapper is the layer that actually moves — and the only layer
   * that needs GPU promotion. Promoting only one layer per panel (vs. the
   * previous outer+children multi-layer setup) avoids inter-layer sub-pixel
   * alignment drift that manifested as "shaking" text on slow drags in
   * iOS WKWebView. The inner also carries the sidebar's visible background
   * so the background travels with the transform (see comment above). */
  .conversations-sidebar.is-swipe-dragging > #conversationsSidebarInner {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-color: #ffffff;
  }
  .dark .conversations-sidebar.is-swipe-dragging > #conversationsSidebarInner {
    background-color: rgb(31 41 55); /* gray-800, matches .dark .conversations-sidebar */
  }
  .message-area.is-grabbing {
    cursor: grabbing;
    /* `.message-area` is `position: fixed` on mobile while a thread is open.
     * We intentionally DO NOT apply transform/will-change/contain/preserve-3d
     * here — on WebKit (iOS Safari/WKWebView) `position: fixed` + `transform`
     * on the same element changes the element's containing block, forces the
     * compositor off its fixed-layer fast-path, and re-rasterizes the layer
     * every frame. That re-rasterization shows up as sub-pixel anti-alias
     * shimmer on text/edges during slow drags. The fix is to transform a
     * non-fixed inner wrapper (#messageAreaInner) instead. */
    /* Background transfer: same rationale as sidebar above. The outer stays
     * viewport-sized and fixed, so its opaque background would hide the
     * sidebar behind it. Strip it here, put it on the inner, and the
     * sidebar is revealed as the inner slides out. */
    background: transparent !important;
    background-color: transparent !important;
  }
  .message-area.is-grabbing > #messageAreaInner {
    /* Single promoted layer per panel. See comment above. Background is
     * carried by the inner so it travels with the transform. */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-color: #f8f9fa; /* matches bg-[#f8f9fa] on #messageArea */
  }
  .dark .message-area.is-grabbing > #messageAreaInner {
    background-color: rgb(17 24 39); /* gray-900, matches dark:bg-gray-900 */
  }
  /* The inner scrollable containers intentionally receive NO compositor
   * promotion during the gesture. Previously we translateZ(0)'d them to try
   * to stabilise them against the ancestor transform; in practice that
   * created a 3-layer sandwich (outer, inner wrapper, scroll container)
   * whose sub-pixel alignment drifted frame-to-frame on iOS — the exact
   * visible "shake." With the inner wrapper now the sole transformed layer,
   * the scroll containers composite naturally as part of the inner's layer
   * and stay pixel-stable relative to it. We still kill iOS momentum
   * scrolling during the drag so UIKit's scroll physics don't compete with
   * the JS transform. */
  .message-area.is-grabbing #messagesContainer,
  .message-area.is-grabbing #messageThread {
    -webkit-overflow-scrolling: auto !important;
  }

  /* Tap-to-enter-thread forward animation (mobile conversation list → thread).
   * The exact mirror of the swipe-right-to-back gesture, running in the
   * opposite direction: on tap of a conversation item, the thread's inner
   * wrapper slides in from translate3d(100vw) to 0 while the sidebar's inner
   * wrapper slides from 0 to translate3d(-100vw). Driven by
   * playMobileEnterThreadAnimation() in app.js.
   *
   * These rules provide the same three prerequisites the back gesture needs,
   * for the same reasons (see the .is-swipe-dragging comment above for the
   * full rationale):
   *
   *   1. Suppress the sidebar's baseline `transition: left 0.3s` so our
   *      inline transform isn't fought by a slower CSS transition.
   *   2. Force the sidebar's outer `left: 0`. This is critical for forward
   *      entry specifically: playMobileEnterThreadAnimation runs BEFORE
   *      updateLayoutState(), but by the time the animation actually plays
   *      (one rAF later), updateLayoutState has added .conversation-selected
   *      to #mainContentArea, which activates the rule
   *      `.conversation-selected .conversations-sidebar { left: -100% }`
   *      further down this media query. Without this override the sidebar
   *      would be yanked off-screen the instant the animation was about to
   *      begin, and our inner transform would be animating an element whose
   *      outer was already fully off-viewport.
   *   3. Drop the sidebar's outer z-index below #messageArea so the thread
   *      slides in ON TOP of the sidebar — the mirror of the back gesture's
   *      "thread slides off, sidebar revealed underneath" stacking. Same
   *      cascade, same visual outcome in reverse.
   *
   * Background-transfer (outer transparent, inner carries color) and
   * single-layer GPU promotion on the inner only — identical strategy to
   * the back gesture. Both needed to avoid the WebKit
   * position:fixed + transform shimmer on iOS WKWebView. */
  .conversations-sidebar.is-entering-thread {
    transition: none !important;
    left: 0 !important;
    z-index: 1 !important;
    background: transparent !important;
    background-color: transparent !important;
  }
  .conversations-sidebar.is-entering-thread > #conversationsSidebarInner {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-color: #ffffff;
  }
  .dark .conversations-sidebar.is-entering-thread > #conversationsSidebarInner {
    background-color: rgb(31 41 55); /* gray-800, matches .dark .conversations-sidebar */
  }
  .message-area.is-entering-thread {
    /* Same rationale as .is-grabbing: DO NOT promote the outer fixed element
     * with transform/will-change/contain here. The inner wrapper is the
     * transformed layer. Background transferred to inner below so the
     * sidebar is visible behind the thread as it slides in. */
    background: transparent !important;
    background-color: transparent !important;
  }
  .message-area.is-entering-thread > #messageAreaInner {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-color: #f8f9fa;
  }
  .dark .message-area.is-entering-thread > #messageAreaInner {
    background-color: rgb(17 24 39); /* gray-900, matches dark:bg-gray-900 */
  }
  /* Kill iOS momentum scrolling on the thread's scroll containers for the
   * duration of the entry animation. Without this, a half-rendered momentum
   * scroll from a previous thread can compete with the ancestor transform
   * and produce visible frame-tearing in the first 100ms of the slide. */
  .message-area.is-entering-thread #messagesContainer,
  .message-area.is-entering-thread #messageThread {
    -webkit-overflow-scrolling: auto !important;
  }
}

/* Base layout for the inner wrappers injected by ensureMobileSlideWrappers()
 * (see app.js). They sit between the outer (#messageArea /
 * #conversationsSidebar) and the original children, preserving the outer's
 * flex-column layout. Always in the DOM once injected; desktop just never
 * transforms them. */
.message-area-inner,
.conversations-sidebar-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1;
}

/* Unread indicator pulse */
.unread-dot {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Message bubble styles */
.message-bubble-sent,
.message-bubble-received {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Search-jump highlight: briefly pulse the matched message so the user can see
 * which message the command-bar result landed them on. Applied by
 * _scrollToMessageWhenReady() in app.js, removed ~2.5s later. We target any
 * element with data-message-id so the same rule covers both .internal-message
 * and SMS .message rows. Uses a soft amber glow that works in both light/dark. */
[data-message-id].message-search-highlight {
  animation: message-search-pulse 2.4s ease-out;
  border-radius: 10px;
}
@keyframes message-search-pulse {
  0% {
    background-color: rgba(255, 213, 74, 0.55);
    box-shadow: 0 0 0 4px rgba(255, 213, 74, 0.35);
  }
  60% {
    background-color: rgba(255, 213, 74, 0.25);
    box-shadow: 0 0 0 2px rgba(255, 213, 74, 0.15);
  }
  100% {
    background-color: transparent;
    box-shadow: 0 0 0 0 rgba(255, 213, 74, 0);
  }
}
.dark [data-message-id].message-search-highlight {
  animation: message-search-pulse-dark 2.4s ease-out;
}
@keyframes message-search-pulse-dark {
  0% {
    background-color: rgba(255, 196, 0, 0.35);
    box-shadow: 0 0 0 4px rgba(255, 196, 0, 0.25);
  }
  60% {
    background-color: rgba(255, 196, 0, 0.15);
    box-shadow: 0 0 0 2px rgba(255, 196, 0, 0.1);
  }
  100% {
    background-color: transparent;
    box-shadow: 0 0 0 0 rgba(255, 196, 0, 0);
  }
}

/* Allow reactions to overflow the bubble vertically, clip horizontal */
.message-with-reactions {
  overflow: visible;
}

/* Bubble containers need overflow visible for reactions */
.message-bubble-sent-container,
.message-bubble-received-container {
  overflow: visible;
  position: relative;
  min-width: 0;
  max-width: 100%;
}

.message-bubble-sent {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: white;
  border-radius: 1rem 1rem 0.25rem 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.message-bubble-received {
  background: var(--bg-primary, #ffffff);
  color: #212529;
  border-radius: 1rem 1rem 1rem 0.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.dark .message-bubble-sent {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.dark .message-bubble-received {
  background: #374151;
  color: #f9fafb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* SMS link styles */
.message-bubble-received .sms-link {
  color: #2563eb;
}
.dark .message-bubble-received .sms-link {
  color: #60a5fa;
}
.message-bubble-sent .sms-link {
  color: #bfdbfe;
}
@media (hover: hover) {
  .message-bubble-sent .sms-link:hover {
    color: #ffffff;
  }
}

/* URL preview cards inside sent (blue) bubbles */
.message-bubble-sent .url-preview-card {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
@media (hover: hover) {
  .message-bubble-sent .url-preview-card:hover {
    background: rgba(255, 255, 255, 0.2) !important;
  }
}
.message-bubble-sent .url-preview-title {
  color: #ffffff;
}
.message-bubble-sent .url-preview-description {
  color: rgba(255, 255, 255, 0.8);
}
.message-bubble-sent .url-preview-site span {
  color: rgba(255, 255, 255, 0.7);
}

/* Date separator badges */
.date-separator > div,
#messagesContainer > .flex.items-center.justify-center > div.rounded-full {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.dark .date-separator > div,
.dark #messagesContainer > .flex.items-center.justify-center > div.rounded-full {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Header control buttons - gradient background for light mode */
#presenceBtn,
#phoneContainer,
#mobileSearchBtn,
#userProfileBtn {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  border: 1px solid rgba(99, 102, 241, 0.15);
}

@media (hover: hover) {
  #presenceBtn:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
  }
}

html.dark #presenceBtn,
html.dark #phoneContainer,
html.dark #mobileSearchBtn,
html.dark #userProfileBtn {
  background: #374151;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (hover: hover) {
  html.dark #presenceBtn:hover {
    background: #4b5563;
  }
}

/* Operator Console - Apply same gradient background as presence button (light mode only) */
#operatorConsoleSearch,
#operatorConsoleModeSelect,
#openDashboardBtn,
.operator-filter-btn {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.15) !important;
}

#operatorConsoleSearch:focus {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%) !important;
}
@media (hover: hover) {
  #operatorConsoleSearch:hover,
  #operatorConsoleModeSelect:hover,
  #openDashboardBtn:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%) !important;
  }
}

@media (hover: hover) {
  .operator-filter-btn:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%) !important;
  }
}

/* Active state - revert to original amber background (light mode only) */
.operator-filter-btn.active {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
}

/* Dark mode - restore original backgrounds for operator console elements */
html.dark #operatorConsoleSearch,
html.dark #operatorConsoleModeSelect,
html.dark #openDashboardBtn {
  background: #1f2937 !important;
  border-color: #374151 !important;
}

html.dark #operatorConsoleSearch:focus {
  background: #374151 !important;
}
@media (hover: hover) {
  html.dark #operatorConsoleSearch:hover,
  html.dark #operatorConsoleModeSelect:hover,
  html.dark #openDashboardBtn:hover {
    background: #374151 !important;
  }
}

/* Conversation list - no dividers (spacing-only separation, Teams-style) */
.conversation-item {
  border-bottom: none;
}

/* Navigation buttons - grey scheme for inactive buttons (light mode only) */
#leftSidebarHeader .grid button:not(.active) {
  background: #f1f3f5 !important; /* gray-100 */
  border: 1px solid #e5e7eb !important; /* gray-200 */
  box-shadow: none !important;
  color: #6b7280 !important; /* gray-500 */
}

#leftSidebarHeader .grid button:not(.active) i {
  color: #6b7280 !important; /* gray-500 */
}

@media (hover: hover) {
  #leftSidebarHeader .grid button:not(.active):hover {
    background: #e5e7eb !important; /* gray-200 */
    border-color: #d1d5db !important; /* gray-300 */
  }
}

html.dark #leftSidebarHeader .grid button {
  background: #374151 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none;
  color: #d1d5db !important; /* gray-300 */
}

html.dark #leftSidebarHeader .grid button i {
  color: #d1d5db !important; /* gray-300 */
}

@media (hover: hover) {
  html.dark #leftSidebarHeader .grid button:hover {
    background: #4b5563 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
  }
}

/* Selected/active navigation button */
#leftSidebarHeader .grid button.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2) !important;
  color: #4338ca !important; /* indigo-700 */
}

#leftSidebarHeader .grid button.active i {
  color: #4f46e5 !important; /* indigo-600 */
}

html.dark #leftSidebarHeader .grid button.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.4) 0%, rgba(139, 92, 246, 0.4) 100%) !important;
  border: 1px solid rgba(139, 92, 246, 0.5) !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25) !important;
  color: #c4b5fd !important; /* violet-300 */
}

html.dark #leftSidebarHeader .grid button.active i {
  color: #a78bfa !important; /* violet-400 */
}

/* Call history date headers & parking lot headers - light mode only */
#callHistoryList > div.bg-gray-50,
#parkingLotsContainer div.bg-gray-50 {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.15);
}

/* Search toggle button - light mode only */
#searchToggleIconMobile {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.15) !important;
}

@media (hover: hover) {
  #searchToggleIconMobile:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%) !important;
  }
}

html.dark #searchToggleIconMobile {
  background: #374151 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

@media (hover: hover) {
  html.dark #searchToggleIconMobile:hover {
    background: #4b5563 !important;
  }
}

/* Conversation search input - light mode only */
#conversationSearch {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
}

#conversationSearch:focus {
  background: #ffffff !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
}

html.dark #conversationSearch {
  background: #374151 !important;
  border: 1px solid #4b5563 !important;
}

html.dark #conversationSearch:focus {
  background: #374151 !important;
  border-color: #6366f1 !important;
}

/* Contacts page filter button and search input - light mode only */
#sourceFilterBtn,
#contactsSearchInput {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
}

@media (hover: hover) {
  #sourceFilterBtn:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%) !important;
  }
}

#contactsSearchInput:focus {
  background: #ffffff !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
}

html.dark #sourceFilterBtn,
html.dark #contactsSearchInput {
  background: #374151 !important;
  border: 1px solid #4b5563 !important;
}

@media (hover: hover) {
  html.dark #sourceFilterBtn:hover {
    background: #4b5563 !important;
  }
}

html.dark #contactsSearchInput:focus {
  background: #374151 !important;
  border-color: #6366f1 !important;
}

/* Markdown content styling for internal messages */
.markdown-content {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  overflow-x: hidden;
}

/* Ensure long URLs break properly */
.markdown-content a {
  word-break: break-all;
}

/* Inline media (GIFs, images) in chat messages */
.inline-media-container {
  margin: 0.5em 0;
  max-width: 100%;
}

.inline-media {
  max-width: 300px;
  max-height: 300px;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: transform 0.2s ease;
  display: block;
}

@media (hover: hover) {
  .inline-media:hover {
    transform: scale(1.02);
  }
}

.inline-media.gif {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: auto;
}

/* GIF play indicator overlay */
.inline-media.animated-gif {
  cursor: pointer;
}

/* Media-only bubble — no coloured background, no padding, no radius.
   The image's own border-radius (0.5rem on .inline-media) provides shape. */
.message-bubble.media-only-bubble {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
}

/* First/only media in message - no top margin */
.markdown-content > .inline-media-container:first-child,
.markdown-content > p:first-child > .inline-media-container:first-child {
  margin-top: 0;
}

/* Last media in message - no bottom margin */
.markdown-content > .inline-media-container:last-child {
  margin-bottom: 0;
}

/* Multiple images in a row */
.markdown-content .inline-media-container + .inline-media-container {
  margin-top: 0.25em;
}

.markdown-content p {
  margin: 0.5em 0;
}

.markdown-content p:first-child {
  margin-top: 0;
}

.markdown-content p:last-child {
  margin-bottom: 0;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  margin: 0.75em 0 0.5em 0;
  font-weight: 600;
  line-height: 1.25;
}

.markdown-content h1:first-child,
.markdown-content h2:first-child,
.markdown-content h3:first-child,
.markdown-content h4:first-child,
.markdown-content h5:first-child,
.markdown-content h6:first-child {
  margin-top: 0;
}

.markdown-content h1 { font-size: 1.5em; }
.markdown-content h2 { font-size: 1.3em; }
.markdown-content h3 { font-size: 1.1em; }
.markdown-content h4 { font-size: 1em; }
.markdown-content h5 { font-size: 0.9em; }
.markdown-content h6 { font-size: 0.85em; }

.markdown-content strong {
  font-weight: 600;
}

.markdown-content em {
  font-style: italic;
}

.markdown-content u {
  text-decoration: underline;
}

.markdown-content s {
  text-decoration: line-through;
}

.markdown-content code {
  background: rgba(0, 0, 0, 0.1);
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

.dark .markdown-content code {
  background: rgba(255, 255, 255, 0.1);
}

.message-bubble-sent .markdown-content code {
  background: rgba(255, 255, 255, 0.2);
}

.markdown-content pre {
  background: rgba(0, 0, 0, 0.1);
  padding: 0.75em;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 0.5em 0;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  line-height: 1.4;
}

.dark .markdown-content pre {
  background: rgba(255, 255, 255, 0.1);
}

.message-bubble-sent .markdown-content pre {
  background: rgba(255, 255, 255, 0.2);
}

.markdown-content pre code {
  background: transparent;
  padding: 0;
}

/* Code block wrapper with copy button */
.code-block-wrapper {
  position: relative;
  margin: 0.5em 0;
}

.code-block-wrapper pre {
  margin: 0;
  padding-right: 3rem; /* Make room for copy button */
}

.code-block-wrapper .code-language {
  position: absolute;
  top: 0.25rem;
  left: 0.5rem;
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 500;
}

.dark .code-block-wrapper .code-language {
  color: rgba(255, 255, 255, 0.5);
}

.message-bubble-sent .code-block-wrapper .code-language {
  color: rgba(255, 255, 255, 0.6);
}

.code-copy-btn {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75rem;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s, color 0.2s;
}

@media (hover: hover) {
  .code-block-wrapper:hover .code-copy-btn {
    opacity: 1;
  }
}

@media (hover: hover) {
  .code-copy-btn:hover {
    background: rgba(0, 0, 0, 0.2);
  }
}

.code-copy-btn.copied {
  color: #22c55e;
}

.dark .code-copy-btn {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

@media (hover: hover) {
  .dark .code-copy-btn:hover {
    background: rgba(255, 255, 255, 0.2);
  }
}

.message-bubble-sent .code-copy-btn {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
}

@media (hover: hover) {
  .message-bubble-sent .code-copy-btn:hover {
    background: rgba(255, 255, 255, 0.25);
  }
}

/* ============================================
   MARKDOWN TABLES
   ============================================ */

.markdown-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875em;
  margin: 0.5em 0;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.markdown-content thead,
.markdown-content tbody,
.markdown-content tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.markdown-content th,
.markdown-content td {
  padding: 0.375em 0.625em;
  border: 1px solid rgba(0, 0, 0, 0.15);
  text-align: left;
  word-break: break-word;
}

.markdown-content th {
  background: rgba(0, 0, 0, 0.05);
  font-weight: 600;
}

.dark .markdown-content th,
.dark .markdown-content td {
  border-color: rgba(255, 255, 255, 0.15);
}

.dark .markdown-content th {
  background: rgba(255, 255, 255, 0.05);
}

.message-bubble-sent .markdown-content th,
.message-bubble-sent .markdown-content td {
  border-color: rgba(255, 255, 255, 0.2);
}

.message-bubble-sent .markdown-content th {
  background: rgba(255, 255, 255, 0.1);
}

/* ============================================
   MERMAID DIAGRAM CONTAINERS
   ============================================ */

.markdown-content .mermaid-container {
  margin: 0.5em 0;
  padding: 1em;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
}

.markdown-content .mermaid-container svg {
  max-width: 100%;
  height: auto;
}

.dark .markdown-content .mermaid-container {
  background: rgba(255, 255, 255, 0.05);
}

.message-bubble-sent .markdown-content .mermaid-container {
  background: rgba(255, 255, 255, 0.1);
}

.markdown-content .mermaid-placeholder,
.markdown-content .mermaid-error {
  margin: 0.5em 0;
}

.markdown-content .loading-placeholder {
  padding: 1.5em;
  text-align: center;
  opacity: 0.6;
  font-style: italic;
  font-size: 0.875em;
}

/* ============================================
   HIGHLIGHT.JS OVERRIDES
   ============================================ */

.code-block-wrapper pre code.hljs {
  background: transparent;
  padding: 0;
}

/* ============================================
   @MENTION STYLES
   Autocomplete dropdown, rendered chips, badge
   ============================================ */

/* Mention autocomplete dropdown — fixed-positioned portal to escape overflow clipping */
.mention-dropdown {
  position: fixed;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-primary, #ffffff);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
  z-index: 9999;
  padding: 4px;
}

.dark .mention-dropdown {
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
}

.mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s ease;
}

.mention-item.highlighted {
  background: #f3f4f6;
}
@media (hover: hover) {
  .mention-item:hover {
    background: #f3f4f6;
  }
}

.dark .mention-item.highlighted {
  background: #374151;
}
@media (hover: hover) {
  .dark .mention-item:hover {
    background: #374151;
  }
}

.mention-item-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  overflow: hidden;
}

.mention-item-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.mention-item-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .mention-item-name {
  color: #f9fafb;
}

.mention-item-detail {
  font-size: 0.6875rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .mention-item-detail {
  color: #9ca3af;
}

/* Rendered mention chip in message body */
.mention-chip {
  display: inline;
  background: #dbeafe;
  color: #1d4ed8;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.875em;
  cursor: default;
  white-space: nowrap;
}

.dark .mention-chip {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.message-bubble-sent .mention-chip {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Mute indicator — inline bell-slash icon next to conversation name */
.mute-indicator {
  font-size: 11px;
  color: #9ca3af;
  flex-shrink: 0;
  margin-left: 4px;
}
.dark .mute-indicator {
  color: #6b7280;
}

/* Mute button in thread header — active (muted) state */
#muteBtn.muted {
  color: #ef4444;
}
@media (hover: hover) {
  #muteBtn.muted:hover {
    color: #dc2626;
  }
}

/* Conversation mode toggle in thread header — pressed (ON) state.
   Shipped 2026-05-12 with v2.2 of the conversation-mode flag.
   Pattern: aria-pressed mirrors the muteBtn idiom; accent matches the
   #0078D4 Microsoft-blue used elsewhere (e.g. .call-tab m365 active). */
#conversationModeBtn[aria-pressed="true"] {
  color: #0078d4;
  background-color: rgba(0, 120, 212, 0.1);
}
@media (hover: hover) {
  #conversationModeBtn[aria-pressed="true"]:hover {
    background-color: rgba(0, 120, 212, 0.2);
  }
}
.dark #conversationModeBtn[aria-pressed="true"] {
  color: #4ea6e8;
  background-color: rgba(78, 166, 232, 0.15);
}
@media (hover: hover) {
  .dark #conversationModeBtn[aria-pressed="true"]:hover {
    background-color: rgba(78, 166, 232, 0.25);
  }
}

/* @mention badge in conversation list */
.mention-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: #ef4444;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  line-height: 1;
  margin-left: 4px;
}

/* Mention backdrop removed — compose now uses contenteditable with inline chips */

/* Mobile: ensure touch-friendly mention items */
@media (pointer: coarse) {
  .mention-item {
    padding: 10px 12px;
    min-height: 44px;
  }
}

/* Markdown Formatting Hints Tooltip */
#markdownHintTooltip {
  animation: fadeInUp 0.15s ease-out;
}

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

#markdownHintTooltip code {
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
}

/* Position the tooltip container relative to input area */
.message-compose-area {
  position: relative;
}

/* ============================================================================
   iMessage-style compose pill
   ============================================================================ */

/* Plus button — circular, neutral, fixed size */
.compose-plus-btn {
  /* 39×39 to match the compose pill's natural single-line height so the
     two left-of-pill and right-of-pill standalone buttons (plus + mic)
     visually align top-and-bottom with the pill. Bumped from 32×32 on
     2026-05-13 alongside .compose-dictate-btn.

     Light mode (2026-05-13): tinted #f1f3f5 background mirroring
     .mobile-search-btn — flat, no shadow, gray-200 on hover. Dark mode
     keeps its shadowed-card look below.  */
  width: 39px;
  height: 39px;
  min-width: 39px;
  min-height: 39px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: #f1f3f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  font-size: 0.9rem;
  flex-shrink: 0;
  flex-grow: 0;
  align-self: flex-end;
  cursor: pointer;
  transition: background 0.15s;
  box-sizing: border-box;
}
.compose-plus-btn:hover {
  background: #e5e7eb;
}
.dark .compose-plus-btn {
  background: #374151;
  color: #9ca3af;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
}
.dark .compose-plus-btn:hover {
  background: #4b5563;
}

/* Typing indicator bar inside compose area */
.typing-indicator-bar {
  margin: -12px -12px 6px -12px;
  padding: 4px 12px 0;
}

.typing-indicator-bar .flex.space-x-1 div {
  background: #1f2937 !important;
}

.dark .typing-indicator-bar .flex.space-x-1 div {
  background: #ffffff !important;
}

/* Reply preview bar inside compose area */
.reply-preview-bar {
  margin: -12px -12px 8px -12px;
  padding: 8px 12px 0;
}

/* Pill wrapper — contains textarea + send button */
.compose-pill {
  display: flex;
  align-items: flex-end;
  background: var(--bg-primary, #ffffff);
  border-radius: 20px;
  padding: 3px 4px 3px 14px;
  min-height: 32px;
  height: auto;
  gap: 2px;
  flex-shrink: 1;
  min-width: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: background 0.15s, box-shadow 0.15s;
}
.compose-pill:focus-within {
  background: var(--bg-primary, #ffffff);
  box-shadow: 0 0 0 2px #007aff;
}
.dark .compose-pill {
  background: #374151;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
}
.dark .compose-pill:focus-within {
  background: #1f2937;
  box-shadow: 0 0 0 2px #3b82f6;
}

/* Inner wrapper for mention backdrop + textarea */
.compose-pill-inner {
  flex: 1;
  min-width: 0;
}
/* Contenteditable input — same visual values as the old textarea */
.compose-pill-input {
  width: 100%;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #1a1a2e;
  padding: 6px 0;
  outline: none;
  border: none;
  background: transparent;
  min-height: 20px;
  max-height: none;
  overflow: hidden;
  font-family: inherit;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  -webkit-user-select: text;
  user-select: text;
}
.compose-pill-input:empty::before {
  content: attr(data-placeholder);
  color: #9ca3af;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.dark .compose-pill-input {
  color: #f3f4f6;
}
.dark .compose-pill-input:empty::before {
  color: #6b7280;
}
@media (pointer: coarse) {
  .compose-pill-input {
    font-size: 16px;
  }
}
.compose-pill-input .mention-chip {
  display: inline;
  user-select: all;
}

/* Send button — circular, inside the pill, fixed size */
.compose-send-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 50%;
  align-self: flex-end;
  margin-bottom: 2px;
  background: #007aff;
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease, width 0.2s ease, min-width 0.2s ease, background 0.15s;
}
.compose-send-btn:hover {
  background: #0066d6;
}
.dark .compose-send-btn {
  background: #3b82f6;
}
.dark .compose-send-btn:hover {
  background: #2563eb;
}

/* Hidden state — scales down and collapses */
.compose-send-hidden {
  opacity: 0;
  transform: scale(0.4);
  width: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}

/* --- Speech-to-Text Dictation button (v1) ---
 * Sits inside .compose-pill, between the input and the send button. Idle is
 * transparent w/ a muted icon; recording is a red pulsing fill; uploading is
 * a neutral spinner. Visibility is owned by updateUIForUserFeatures() via
 * the .hidden class. Plan: docs/plans/SPEECH_TO_TEXT_DICTATION_PLAN.md
 */
.compose-dictate-btn {
  /* 32×32 standalone circle on the RIGHT side of the compose row, mirror
     of #composeMenuBtn (.compose-plus-btn) on the left. Lives in its own
     wrapper div as a sibling of .compose-pill — NOT inside the pill.
     Relocated 2026-05-13 (was 28×28 inset inside the pill alongside
     #sendBtn). The wrapper supplies `align-self: flex-end` +
     `margin-bottom: 3px;` so this rule doesn't repeat them.

     Note: still in the :not() exclusion chain in BOTH breakpoints.css
     (`body.is-mobile button { min-height: 44px }`) AND tablet.css
     (`body.is-tablet button { min-height: var(--touch-target-min) }`)
     — same rationale as .compose-plus-btn next to it: it's a sized
     32×32 circle by design, and the row's gap-2 layout gives the touch
     surface room. Without those exclusions touch viewports oval it to
     32×44 / 32×48. */
  /* 39×39 matches the compose pill's natural single-line height so this
     button visually aligns top-and-bottom with the pill. Bumped from
     32×32 on 2026-05-13 alongside .compose-plus-btn. */
  width: 39px;
  height: 39px;
  min-width: 39px;
  min-height: 39px;
  padding: 0;
  border-radius: 50%;
  /* Filled idle state mirrors .compose-plus-btn (the other standalone
     button in this row). Light mode = flat tinted #f1f3f5 background
     (matches .mobile-search-btn); dark mode keeps the shadowed-card look
     in the .dark .compose-dictate-btn block below. Recording / uploading
     states below override the background with state-specific colors so
     the filled look only applies while the button is idle. */
  background: #f1f3f5;
  border: none;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.compose-dictate-btn:hover {
  background: #e5e7eb;
  color: #1a1a2e;
}
.compose-dictate-btn:focus-visible {
  outline: 2px solid #007aff;
  outline-offset: 2px;
}
.dark .compose-dictate-btn {
  background: #374151;
  color: #9ca3af;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
}
.dark .compose-dictate-btn:hover {
  background: #4b5563;
  color: #ffffff;
}
.dark .compose-dictate-btn:focus-visible {
  outline-color: #3b82f6;
}

/* ----------------------------------------------------------------------------
   Send-mode morph (2026-05-13).
   When the user has stt_transcribe_enabled (body.has-dictate-morph), the inner
   compose-send-btn is removed and #dictateBtn doubles as the send button. The
   .is-send-mode class is toggled by updateSendButton() in app.js whenever the
   compose has content (text, attachment, or GIF). Recording / uploading /
   soft-stop states still win because they appear later in this file and
   target the same selector with state-class chaining.
   ---------------------------------------------------------------------------- */
.compose-dictate-btn.is-send-mode {
  background: #007aff;
  color: #ffffff;
}
.compose-dictate-btn.is-send-mode:hover {
  background: #0066d6;
}
.dark .compose-dictate-btn.is-send-mode {
  background: #3b82f6;
}
.dark .compose-dictate-btn.is-send-mode:hover {
  background: #2563eb;
}

/* Hide the inner pill send button for users who get the dictate morph.
   Users WITHOUT stt_transcribe_enabled keep the legacy inner sendBtn —
   the dictate button itself is hidden for them too (see
   updateUIForUserFeatures() in app.js). */
body.has-dictate-morph .compose-send-btn {
  display: none !important;
}

/* Recording state — pulsing red fill with stop glyph */
.compose-dictate-btn.is-recording {
  background: #dc2626;
  color: #ffffff;
  animation: dictateRecPulse 1.2s ease-in-out infinite;
}
.compose-dictate-btn.is-recording:hover {
  background: #b91c1c;
}
.dark .compose-dictate-btn.is-recording {
  background: #ef4444;
}
@keyframes dictateRecPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* Uploading / requesting-permission state — neutral spinner, not clickable */
.compose-dictate-btn.is-uploading {
  color: #007aff;
  cursor: default;
}
.dark .compose-dictate-btn.is-uploading {
  color: #3b82f6;
}

/* ----------------------------------------------------------------------------
   Soft-stop "about to commit" cue (Phase A.1, 2026-05-12)
   Plan: docs/plans/2026-05-12-dictation-vad-autostop-plan.md
   ---------------------------------------------------------------------------- */

/* While recording, when Silero VAD reports 960 ms of confirmed silence the
   manager arms a 2 s soft-stop timer. During that window the dictateBtn
   keeps its red is-recording fill but gains an amber shrinking ring so the
   user can see "we think you're done — speak up to keep going". Layering
   the ring as a CSS animation (not removing is-recording) means the timing
   stays cheap and a quick voice resume just drops the class instantly. */
.compose-dictate-btn.is-recording.is-soft-stopping {
  /* Pause the red pulse for the duration of the amber ring so the two
     box-shadow animations don't fight. The pulse resumes the instant the
     class drops (voice resumes) or the recording ends. */
  animation: dictateSoftStopRing 2s linear forwards;
}
.dark .compose-dictate-btn.is-recording.is-soft-stopping {
  animation: dictateSoftStopRingDark 2s linear forwards;
}

@keyframes dictateSoftStopRing {
  /* Solid amber ring at arm time, shrinks + fades over the 2 s window so the
     user has a visual countdown. Color: amber-500 (#f59e0b). */
  0%   { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.55); }
  100% { box-shadow: 0 0 0 0px rgba(245, 158, 11, 0);    }
}

@keyframes dictateSoftStopRingDark {
  /* Slightly brighter amber for dark mode (amber-400 #fbbf24). */
  0%   { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.65); }
  100% { box-shadow: 0 0 0 0px rgba(251, 191, 36, 0);    }
}

/* ============================================================================
   Phase A.2 (2026-05-12) — VAD auto-send undo toast
   Plan: docs/plans/2026-05-12-dictation-vad-autosend-plan.md

   When a VAD soft-stop expires AND messages.autoSendDictation is on AND the
   active tab is internal, the manager hands off to app.js's
   _maybeFireAutoSendAfterDictation(). After the actual send, this toast
   appears with a 3 s shrinking progress bar; Undo clicks the bar away and
   issues DELETE /api/internal/messages/:id. The progress bar is purely
   cosmetic — the JS setTimeout is the source of truth for the deadline.
   ============================================================================ */

.auto-send-undo-toast {
  /* Compact enough to fit alongside other toasts in the existing container. */
  min-width: 280px;
  max-width: 480px;
}

.auto-send-undo-toast .auto-send-undo-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, 0.55);
  transform-origin: left center;
  animation-name: autoSendUndoCountdown;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  /* animation-duration is set inline by _showAutoSendUndoToast so we can tune
     the 3 s window without re-shipping CSS. */
}

@keyframes autoSendUndoCountdown {
  0%   { transform: scaleX(1); opacity: 0.9; }
  100% { transform: scaleX(0); opacity: 0.6; }
}

/* Undo button inside the toast — slight visual lift on hover/focus. */
.auto-send-undo-toast .auto-send-undo-btn {
  background: rgba(255, 255, 255, 0.12);
  transition: background-color 120ms ease-out;
}
.auto-send-undo-toast .auto-send-undo-btn:hover,
.auto-send-undo-toast .auto-send-undo-btn:focus {
  background: rgba(255, 255, 255, 0.22);
}

/* ============================================================================
   Live dictation streaming (v1.1)
   Plan: docs/plans/DICTATION_STREAMING_PLAN.md §13
   ============================================================================ */

/* Live preview text painted by the dictation-manager while recording. */
.dictation-preview {
  color: #6b7280;
  font-style: italic;
  background: rgba(0, 122, 255, 0.06);
  border-radius: 2px;
  padding: 0 1px;
  transition: color 0.15s ease, background 0.15s ease;
}
.dark .dictation-preview {
  color: #9ca3af;
  background: rgba(59, 130, 246, 0.08);
}

/* Compose pill while dictation is active — dim the input so the user
   knows they can't type, and surface a "Listening…" placeholder when
   the input is empty. App.js sets contenteditable=false on #messageInput
   and disables #sendBtn for the same state set. */
.compose-pill.is-dictating .compose-pill-input {
  cursor: default;
  opacity: 0.92;
}
/* Override the default data-placeholder text — higher specificity wins. */
.compose-pill.is-dictating .compose-pill-input:empty::before {
  content: 'Listening…';
  color: #6b7280;
  font-style: italic;
  pointer-events: none;
}
.dark .compose-pill.is-dictating .compose-pill-input:empty::before {
  color: #9ca3af;
}

#markdownHintBtn.active {
  background: #e5e7eb;
  color: #2563eb;
}

.dark #markdownHintBtn.active {
  background: #374151;
  color: #60a5fa;
}

/* Link styling - bright and visible in both light and dark modes */
.markdown-content a,
.markdown-content p a,
.markdown-content > a,
.message-bubble .markdown-content a,
.message-bubble p a {
  color: #3b82f6 !important; /* Bright blue-500 for light mode */
  text-decoration: underline !important;
  text-decoration-color: rgba(59, 130, 246, 0.4) !important;
  transition: color 0.15s ease, text-decoration-color 0.15s ease !important;
}

@media (hover: hover) {
  .markdown-content a:hover,
  .markdown-content p a:hover,
  .markdown-content > a:hover,
  .message-bubble .markdown-content a:hover,
  .message-bubble p a:hover {
    color: #2563eb !important; /* Darker blue-600 on hover */
    text-decoration-color: rgba(37, 99, 235, 0.6) !important;
  }
}

.dark .markdown-content a,
.dark .markdown-content p a,
.dark .markdown-content > a,
.dark .message-bubble .markdown-content a,
.dark .message-bubble p a {
  color: #60a5fa !important; /* Bright blue-400 for dark mode */
  text-decoration-color: rgba(96, 165, 250, 0.5) !important;
}

@media (hover: hover) {
  .dark .markdown-content a:hover,
  .dark .markdown-content p a:hover,
  .dark .markdown-content > a:hover,
  .dark .message-bubble .markdown-content a:hover,
  .dark .message-bubble p a:hover {
    color: #93c5fd !important; /* Lighter blue-300 on hover in dark mode */
    text-decoration-color: rgba(147, 197, 253, 0.7) !important;
  }
}

/* Sent message links - need to stand out on blue gradient background */
.message-bubble-sent .markdown-content a,
.message-bubble-sent .markdown-content p a,
.message-bubble-sent .markdown-content > a,
.message-bubble-sent-container .markdown-content a,
.message-bubble-sent-container .markdown-content p a {
  color: #fef08a !important; /* Bright yellow-200 for visibility on blue */
  text-decoration: underline !important;
  text-decoration-color: rgba(254, 240, 138, 0.6) !important;
  font-weight: 500 !important; /* Slightly bolder for better visibility */
}

@media (hover: hover) {
  .message-bubble-sent .markdown-content a:hover,
  .message-bubble-sent .markdown-content p a:hover,
  .message-bubble-sent .markdown-content > a:hover,
  .message-bubble-sent-container .markdown-content a:hover,
  .message-bubble-sent-container .markdown-content p a:hover {
    color: #fde047 !important; /* Brighter yellow-300 on hover */
    text-decoration-color: rgba(253, 224, 71, 0.8) !important;
  }
}

.markdown-content ul {
  margin: 0.5em 0;
  padding-left: 1.5em;
  list-style-type: disc;
}

.markdown-content ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
  list-style-type: decimal;
}

.markdown-content li {
  margin: 0.25em 0;
  display: list-item;
}

.markdown-content blockquote {
  border-left: 3px solid rgba(0, 0, 0, 0.2);
  padding-left: 1em;
  margin: 0.5em 0;
  font-style: italic;
}

.dark .markdown-content blockquote {
  border-left-color: rgba(255, 255, 255, 0.2);
}

.message-bubble-sent .markdown-content blockquote {
  border-left-color: rgba(255, 255, 255, 0.3);
}

.markdown-content hr {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  margin: 1em 0;
}

.dark .markdown-content hr {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.message-bubble-sent .markdown-content hr {
  border-top-color: rgba(255, 255, 255, 0.3);
}

/* Image message styling */
.message-image {
  border-radius: 0.5rem;
  overflow: hidden;
  max-width: 300px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

@media (hover: hover) {
  .message-image:hover {
    transform: scale(1.02);
  }
}

/* Typing indicator animation */
.typing-dot {
  animation: typing 1.4s infinite;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-10px);
  }
}

/* Toast notification slide-in */
.toast {
  animation: slideIn 0.3s ease-out;
  /* Universal viewport-fit cap. Without this, a long-form toast (e.g. an
     incoming bus-relay note from another agent) stretches to its content's
     intrinsic width and runs off the right edge of the viewport on
     anything narrower than the message — observed on phones AND on
     tablets / narrow desktop windows where the prior `right: 16px`
     anchor + no max-width let the toast push left across the entire
     screen. Cap at 420px on roomy layouts, otherwise to viewport minus
     32px (16px gutter on each side). */
  max-width: min(420px, calc(100vw - 32px));
  /* Allow long unbroken tokens (URLs, agent IDs, code) to wrap inside the
     toast rather than blow out the cap. `overflow-wrap: anywhere` is the
     modern hard-break property; `word-break: break-word` is the legacy
     fallback for older WebKits that ship in the iOS 15 wrapper. */
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* Make sure the inner text container can actually shrink inside the
   .toast flex row — without min-width: 0, the <span> defaults to
   min-content sizing and would still overflow even with the cap above. */
.toast > span,
.toast > .min-w-0 {
  min-width: 0;
  flex: 1 1 auto;
}

@media (max-width: 849px) {
  #toastContainer {
    left: 12px;
    right: 12px;
    top: calc(env(safe-area-inset-top, 0px) + 64px);
    bottom: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #toastContainer .toast {
    /* Mobile defers to the universal cap above (which is already viewport-
       relative). We re-declare here only to keep the layout-specific knobs
       (font-size, padding tweak, slide-down animation override) in one
       place. */
    width: auto;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 0.875rem;
    animation: toastSlideDown 0.3s ease-out;
  }
}

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

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

/* #messageInput is now a contenteditable div — auto-grows naturally */

/* File upload drag-and-drop zone */
.drag-over {
  border: 2px dashed #3b82f6 !important;
  background: rgb(59 130 246 / 0.1) !important;
}

/* Connection status pulse */
.status-pulse {
  animation: statusPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes statusPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

/* Loading spinner */
.spinner {
  animation: spin 1s linear infinite;
}

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

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: loading 1.5s ease-in-out infinite;
}

.dark .skeleton {
  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
  background-size: 200% 100%;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ======================================== */
/* Horizontal Breakpoint Rules (LEGACY)
/* ======================================== */
/* 
 * NOTE: New responsive code should use body state classes from layout-state.js:
 *   body.is-mobile { }    - width < 850px
 *   body.is-tablet { }    - width 850px - 1199px  
 *   body.is-desktop { }   - width >= 1200px
 * 
 * Or use the breakpoint classes:
 *   body.bp-xs, body.bp-sm, body.bp-md, body.bp-lg, body.bp-xl, body.bp-2xl
 */

/* Base layout transitions — only animate properties used for mobile slide-in,
   not computed widths that change during window resize */
.main-content-area {
  transition: none;
}

.conversations-sidebar {
  transition: left 0.3s ease, transform 0.3s ease;
  min-width: 450px;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
  clip-path: inset(0 -10px 0 0);
}

.dark .conversations-sidebar {
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.25);
}

.message-area {
  transition: none;
}

/* Large screens (≥1200px) - 3-column layout with flexible sidebar */
@media (min-width: 1200px) {
  /* Sidebar uses default min-width: 400px (no fixed width to avoid shift) */
  
  .message-area {
    flex: 1;
  }
  
  #contactPanel {
    width: 320px;
    flex-shrink: 0;
  }
}

/* Contact panel as modal below 1200px — tablet: centered modal */
@media (max-width: 1199px) and (min-width: 850px) {
  #contactPanel:not(.hidden) {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 90vw !important;
    max-height: 90vh !important;
    width: 400px !important;
    z-index: 50 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #contactPanel.hidden {
    display: none !important;
  }
}

/* Contact panel as bottom sheet on mobile (<850px) */
@media (max-width: 849px) {
  #contactPanel:not(.hidden) {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 85vh;
    max-height: 85dvh;
    z-index: 10000 !important;
    border-radius: 1rem 1rem 0 0 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateY(0) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .dark #contactPanel:not(.hidden) {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
  }

  #contactPanel.hidden {
    display: none !important;
  }
}

/* Contact panel drag handle — hidden by default, shown in mobile bottom sheet */
.cp-drag-handle {
  display: none;
}

@media (max-width: 849px) {
  .cp-drag-handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
    flex-shrink: 0;
  }
}

/* Contact panel backdrop — fade transition matching thread bottom sheet */
.contact-panel-backdrop {
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  pointer-events: none;
}

.contact-panel-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (max-width: 849px) {
  .contact-panel-backdrop {
    z-index: 9999 !important;
  }
}

/* Medium screens (768px - 1199px) - Adaptive 2-column layout */
/* 768-1199px breakpoint removed per user request - sidebar should not change width at this range */

/* Fixed viewport scrolling and header text hiding at 768px */
@media (max-width: 849px) {
  /* Hide header text but keep logo */
  .header-text {
    display: none !important;
  }
  
  /* Fixed viewport - prevent page scrolling */
  body {
    height: 100vh;
    overflow: hidden;
  }
  
  /* Main content area takes remaining space */
  .main-content-area {
    height: calc(100vh - var(--header-height, 76px));
    overflow: hidden;
  }
  
  /* Conversations sidebar - full height scrolling */
  .conversations-sidebar {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  
  .conversations-sidebar .flex-1 {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  
  /* Message area - grid layout for fixed compose */
  .message-area {
    height: 100%;
    display: grid;
    grid-template-rows: 1fr;
    overflow: hidden;
  }
  
  /* When message thread is visible */
  .message-area #messageThread {
    display: grid;
    grid-template-rows: auto 1fr auto; /* Header + Messages + Compose */
    grid-template-columns: minmax(0, 1fr); /* Prevent children from exceeding grid width */
    height: 100%;
    overflow: hidden;
  }
  
  /* Center content area — clip horizontal overflow only, let vertical flex work */
  #centerContentArea {
    overflow-x: hidden;
  }

  /* Messages container - scrollable vertically, clip horizontal overflow */
  .message-area #messagesContainer {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    min-height: 0; /* Important for grid/flex scrolling */
  }
  
  /* Message compose area - always visible */
  .message-area .message-compose-area {
    flex-shrink: 0;
  }
  
  /* Thread header - fixed height, constrain width */
  .message-area .thread-header {
    flex-shrink: 0;
    overflow: hidden;
    min-width: 0;
  }
  
  /* Thread header mobile optimizations */
  .thread-header {
    min-height: 70px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  /* Smaller avatar on mobile */
  .thread-header #contactAvatar,
  .contact-detail-header #contactDetailAvatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 1rem !important;
  }
  
  /* Tighter spacing between avatar and info */
  .thread-header .space-x-3 > * + * {
    margin-left: 0.5rem;
  }
  
  /* Truncate contact name on mobile */
  .thread-header #contactName,
  .contact-detail-header #contactDetailName {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Smaller phone number */
  .thread-header #contactPhone {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Tighter action button spacing */
  .thread-header .space-x-2 > * + * {
    margin-left: 0.25rem;
  }
  
  /* Smaller action buttons */
  .thread-header .space-x-2 button {
    padding: 0.375rem;
  }
  
  /* Empty state - full height */
  .message-area #emptyThread {
    height: 100%;
    overflow: hidden;
  }
  
  /* Handle mobile keyboard appearance */
  @supports (-webkit-touch-callout: none) {
    /* iOS Safari specific */
    body {
      height: 100vh;
      height: -webkit-fill-available;
    }
    
    .main-content-area {
      height: calc(100vh - var(--header-height, 76px));
      height: calc(-webkit-fill-available - var(--header-height, 76px));
    }
  }
  
  /* Ensure touch scrolling in containers */
  .conversations-sidebar .flex-1,
  .message-area #messagesContainer {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
  }
  
  /* Prevent bounce scrolling on iOS */
  .conversations-sidebar .flex-1,
  .message-area #messagesContainer {
    overscroll-behavior-y: contain;
  }
}

/* Desktop thread header — match contact detail panel header height (~74px) */
@media (min-width: 850px) {
  .thread-header {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  /* Shrink avatar to 40px so total height lands at ~74px (1+16+40+16) */
  .thread-header #contactAvatar,
  .contact-detail-header #contactDetailAvatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 0.875rem !important;
  }
  /* Scale name text down to match conversation list item name */
  .thread-header #contactName,
  .contact-detail-header #contactDetailName {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
  }

  /* Phone sits 1px below the name */
  .thread-header #contactPhone {
    font-size: 12px !important;
    margin-top: 1px !important;
    line-height: 1.4 !important;
  }
  /* Shrink group member chips in thread header so the stacked name+chips
     column stays ≤ 40px (avatar height) and group header matches 1:1 height */
  .thread-header #contactPhone .group-member-chip {
    width: 20px !important;
    height: 20px !important;
    font-size: 8px !important;
    border-width: 1px !important;
    margin-left: 0 !important;
  }
  .thread-header #contactPhone .group-member-avatars {
    gap: 5px !important;
    margin-top: 2px !important;
  }
}

/* Phone number dropdown at very narrow widths */
@media (max-width: 540px) {
  /* Phone container is already collapsed via 768px rule above */
  /* Make phone container clickable for dropdown on very narrow screens */
  .phone-container {
    cursor: pointer;
    position: relative;
  }
  
  /* Phone dropdown styles */
  .phone-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 50;
    margin-top: 0.25rem;
    padding: 0.75rem;
    min-width: 200px;
  }
  
  .dark .phone-dropdown {
    background: #374151;
    border-color: #4b5563;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
  }
  
  .phone-dropdown.hidden {
    display: none;
  }
  
  .phone-dropdown-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 0.25rem;
  }
  
  .dark .phone-dropdown-label {
    color: #9ca3af;
  }
  
  .phone-dropdown-number {
    font-size: 0.875rem;
    font-weight: 500;
    color: #111827;
  }
  
  .dark .phone-dropdown-number {
    color: #f9fafb;
  }
  
  /* Thread header adjustments at 540px */
  .thread-header #contactName {
    font-size: 0.9375rem;
  }
  
  /* Hide close button on narrow screens - can use back button or menu */
  .thread-header #closeThreadBtn {
    display: none;
  }
}

/* Very narrow screens - aggressive thread header optimization */
@media (max-width: 400px) {
  .thread-header {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  
  /* Even smaller avatar */
  .thread-header #contactAvatar,
  .contact-detail-header #contactDetailAvatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 0.875rem !important;
  }
  
  /* Smaller contact name on very narrow */
  .thread-header #contactName,
  .contact-detail-header #contactDetailName {
    font-size: 0.875rem;
  }
  
  /* Hide phone number on very narrow screens */
  .thread-header #contactPhone {
    display: none;
  }
  
  /* Minimal button padding */
  .thread-header .space-x-2 button {
    padding: 0.25rem;
  }
  
  /* Reduce back button size */
  .thread-header #backBtn {
    padding: 0.25rem;
  }
}

/* ===== HEADER MENU - Mobile Hamburger Menu (< 520px) ===== */

/* Header menu backdrop */
#headerMenuBackdrop.show {
  display: block !important;
}

/* Header menu drawer slide in */
#headerMenuDrawer.show {
  transform: translateX(0) !important;
}

/* ===== LEFT NAVIGATION DRAWER - Mobile (< 520px) ===== */

/* Left nav backdrop */
#leftNavBackdrop.show {
  display: block !important;
}

/* Left nav drawer slide in */
#leftNavDrawer.show {
  transform: translateX(0) !important;
}

/* Safe area insets for iOS devices (notch/dynamic island) */
#leftNavDrawer > div:first-child {
  padding-top: calc(1rem + env(safe-area-inset-top, 0px)) !important;
  min-height: calc(3.5rem + env(safe-area-inset-top, 0px));
}

/* Left nav item base styles */
#leftNavDrawer .left-nav-item {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9375rem;
  color: #374151; /* gray-700 */
}

/* Dark mode text color for left nav items */
.dark #leftNavDrawer .left-nav-item,
html.dark #leftNavDrawer .left-nav-item {
  color: #d1d5db !important; /* gray-300 */
}

/* Active state for left nav items */
#leftNavDrawer .left-nav-item.active {
  background-color: #eff6ff; /* blue-50 */
}

.dark #leftNavDrawer .left-nav-item.active,
html.dark #leftNavDrawer .left-nav-item.active {
  background-color: rgba(59, 130, 246, 0.1); /* blue-500 with opacity */
}

/* Left nav dark mode button specific styling */
.dark #leftNavDrawer #leftNavDarkModeBtn,
html.dark #leftNavDrawer #leftNavDarkModeBtn {
  color: #d1d5db !important; /* gray-300 - ensure button text is visible */
}

/* Left nav dark mode button - ensure moon icon is visible in dark mode */
.dark #leftNavDrawer #leftNavDarkModeBtn i.fa-moon,
html.dark #leftNavDrawer #leftNavDarkModeBtn i.fa-moon {
  display: block !important;
  color: #fbbf24 !important; /* yellow-400 */
  opacity: 1 !important;
}

/* Left nav dark mode button - hide sun icon in dark mode */
.dark #leftNavDrawer #leftNavDarkModeBtn i.fa-sun,
html.dark #leftNavDrawer #leftNavDarkModeBtn i.fa-sun {
  display: none !important;
}

/* Left nav dark mode button - style text spans */
.dark #leftNavDrawer #leftNavDarkModeBtn span,
html.dark #leftNavDrawer #leftNavDarkModeBtn span {
  color: #d1d5db !important; /* gray-300 */
}

/* Show "Dark Mode" text span in dark mode (has hidden class) */
.dark #leftNavDrawer #leftNavDarkModeBtn span.hidden,
html.dark #leftNavDrawer #leftNavDarkModeBtn span.hidden {
  display: block !important;
  color: #d1d5db !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Hide "Light Mode" text span in dark mode */
.dark #leftNavDrawer #leftNavDarkModeBtn span:not(.hidden),
html.dark #leftNavDrawer #leftNavDarkModeBtn span:not(.hidden) {
  display: none !important;
}

/* Left nav dark mode button hover state in dark mode */
@media (hover: hover) {
  .dark #leftNavDrawer #leftNavDarkModeBtn:hover,
  html.dark #leftNavDrawer #leftNavDarkModeBtn:hover {
    background-color: rgba(55, 65, 81, 0.5) !important;
    color: #f3f4f6 !important;
  }
}

@media (hover: hover) {
  .dark #leftNavDrawer #leftNavDarkModeBtn:hover span,
  html.dark #leftNavDrawer #leftNavDarkModeBtn:hover span {
    color: #f3f4f6 !important;
  }
}

@media (hover: hover) {
  .dark #leftNavDrawer #leftNavDarkModeBtn:hover i,
  html.dark #leftNavDrawer #leftNavDarkModeBtn:hover i {
    color: #fbbf24 !important;
  }
}

/* Hide left sidebar header nav buttons on mobile - use left nav drawer instead */
body.is-mobile #leftSidebarHeader {
  display: none !important;
}

/* Safe area insets for iOS devices (notch/dynamic island) */
/* Ensure drawer header accounts for safe area at top */
#headerMenuDrawer > div:first-child {
  padding-top: calc(1rem + env(safe-area-inset-top, 0px)) !important;
  min-height: calc(3.5rem + env(safe-area-inset-top, 0px));
}

/* Menu item base styles - ensure button resets */
#headerMenuDrawer .header-menu-item {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9375rem;
  color: #374151; /* gray-700 - default text color for light mode */
}

/* Dark mode text color for menu items */
.dark #headerMenuDrawer .header-menu-item,
html.dark #headerMenuDrawer .header-menu-item {
  color: #d1d5db !important; /* gray-300 - visible text in dark mode */
}

/* Dark mode button specific styling - ensure all text elements are visible */
.dark #headerMenuDrawer #menuDarkModeBtn,
html.dark #headerMenuDrawer #menuDarkModeBtn {
  color: #d1d5db !important; /* gray-300 - ensure button text is visible */
}

/* Dark mode button - ensure moon icon is visible and styled (override text-gray-400) */
.dark #headerMenuDrawer #menuDarkModeBtn i.fa-moon,
html.dark #headerMenuDrawer #menuDarkModeBtn i.fa-moon {
  display: block !important; /* Ensure visible in dark mode */
  color: #fbbf24 !important; /* yellow-400 - bright yellow for visibility */
  opacity: 1 !important; /* Ensure full opacity */
}

/* Dark mode button - ensure sun icon is hidden */
.dark #headerMenuDrawer #menuDarkModeBtn i.fa-sun,
html.dark #headerMenuDrawer #menuDarkModeBtn i.fa-sun {
  display: none !important;
}

/* Dark mode button - style all visible text elements */
.dark #headerMenuDrawer #menuDarkModeBtn span,
html.dark #headerMenuDrawer #menuDarkModeBtn span {
  color: #d1d5db !important; /* gray-300 - ensure text is visible */
}

/* Specifically target and show the "Dark Mode" text span (has hidden class but should show in dark mode) */
.dark #headerMenuDrawer #menuDarkModeBtn span.hidden,
html.dark #headerMenuDrawer #menuDarkModeBtn span.hidden {
  display: block !important; /* Override hidden - show in dark mode */
  color: #d1d5db !important; /* gray-300 - ensure text is visible */
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure dark mode button hover state works correctly */
@media (hover: hover) {
  .dark #headerMenuDrawer #menuDarkModeBtn:hover,
  html.dark #headerMenuDrawer #menuDarkModeBtn:hover {
    background-color: rgba(55, 65, 81, 0.5) !important; /* gray-700 with opacity for hover */
    color: #f3f4f6 !important; /* gray-100 - lighter text on hover */
  }
}

@media (hover: hover) {
  .dark #headerMenuDrawer #menuDarkModeBtn:hover span,
  html.dark #headerMenuDrawer #menuDarkModeBtn:hover span {
    color: #f3f4f6 !important; /* gray-100 - lighter text on hover */
  }
}

@media (hover: hover) {
  .dark #headerMenuDrawer #menuDarkModeBtn:hover i,
  html.dark #headerMenuDrawer #menuDarkModeBtn:hover i {
    color: #fbbf24 !important; /* yellow-400 - keep icon visible on hover */
  }
}

/* Show/hide based on breakpoint */
@media (min-width: 850px) {
  /* Desktop: show action icons, hide hamburger */
  .header-actions-desktop {
    display: flex !important;
  }
  
  .header-menu-btn {
    display: none !important;
  }
  
  /* Keep drawer off-screen on desktop */
  #headerMenuBackdrop {
    display: none !important;
  }
  
  #headerMenuDrawer {
    transform: translateX(100%) !important;
    pointer-events: none !important;
  }
  
  /* Keep left nav drawer off-screen on desktop */
  #leftNavBackdrop {
    display: none !important;
  }
  
  #leftNavDrawer {
    transform: translateX(-100%) !important;
    pointer-events: none !important;
  }
  
  /* Hide left nav hamburger on desktop */
  .left-nav-menu-btn {
    display: none !important;
  }

  /* Header logo: align horizontal center with the .nav-rail icon column
     directly below it.

     Tailwind's `space-x-3 > :not([hidden]) ~ :not([hidden])` rule glues
     12px of margin-left onto .header-logo because its DOM-order left
     sibling (.left-nav-menu-btn) is `display: none` on desktop rather than
     `[hidden]` — the selector matches on DOM order regardless of display.
     We override that 12px to 2px so the 40×40 logo sits centered within
     the 56px-wide #navRail column directly underneath it: parent's
     md:pl-[6px] (window x=6) + 2px margin-left = window x=8, logo center
     at x=28. The nav rail's button (44px, centered in 56px) and icon
     (20px, centered in 44px) both have center x=28 too, so logo, button,
     and icon visually share the same vertical axis. */
  #headerBranding > .header-logo {
    margin-left: 2px !important;
  }
}

@media (max-width: 849px) {
  /* Mobile: hide action icons, show hamburger */
  .header-actions-desktop {
    display: none !important;
  }
  
  .header-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  
  /* Left nav hamburger visible on mobile */
  .left-nav-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  
  /* Prevent horizontal bounce/rubber-banding on mobile */
  html,
  body,
  #mainContentArea,
  #conversationListWrapper,
  #conversationList,
  #messagesContainer,
  #conversationsContainer,
  .conversations-sidebar,
  .message-area {
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
    overscroll-behavior: none contain !important;
  }
  
  /* Lock touch to vertical-only on scrollable lists */
  #conversationListWrapper,
  #conversationList,
  #messagesContainer,
  .conversation-item {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Disable horizontal transform effects on mobile */
  .conversation-item,
  .conversation-item:active,
  .no-conversation-selected .conversation-item:active {
    transform: none !important;
  }
  @media (hover: hover) and (pointer: fine) {
    .conversation-item:hover,
    .no-conversation-selected .conversation-item:hover {
      transform: none !important;
    }
  }
  
  /* Reduce header padding on mobile */
  header .px-6 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  header > div.py-3 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }
  
  /* Reduce spacing between items */
  header .space-x-3 > * + * {
    margin-left: 0.5rem;
  }
  
  /* Make phone container smaller */
  .phone-container {
    padding: 0.375rem 0.5rem;
  }
  
  /* User profile button smaller */
  #userProfileBtn {
    padding: 0.375rem 0.5rem;
  }
}

/* Small screens (<768px) - Mobile single column */
@media (max-width: 849px) {
  /* Hide contact panel only when it has hidden class (modal will show when toggled) */
  #contactPanel.hidden {
    display: none !important;
  }
  
  /* Slide-over sidebar behavior */
  .conversations-sidebar {
    position: fixed;
    left: -100%;
    width: 100%;
    min-width: unset !important;
    max-width: 100% !important;
    height: 100%;
    z-index: 30;
    transition: left 0.3s ease;
    background: white;
  }
  
  .dark .conversations-sidebar {
    background: rgb(31 41 55);
  }
  
  .conversations-sidebar.show {
    left: 0;
  }
  
  /* Full width message area on mobile */
  .message-area {
    width: 100%;
    flex: 1;
    min-width: 0;
  }
  
  /* Ensure switchable containers work on mobile */
  #callPanelContainer,
  #conversationsContainer {
    width: 100%;
    max-width: 100%;
  }
  
  /* Show sidebar when no conversation is selected */
  .no-conversation-selected .conversations-sidebar {
    position: relative !important;
    left: 0 !important;
    width: 100% !important;
    min-width: unset !important;
    max-width: 100% !important;
    height: 100%;
    display: flex !important;
  }
  
  /* Hide message area and empty state when no conversation selected on mobile */
  /* BUT show it when settings is open */
  .no-conversation-selected .message-area {
    display: none !important;
  }
  
  /* Override: Show messageArea when settings is open, even with no-conversation-selected */
  body.settings-open.no-conversation-selected .message-area,
  body.settings-open.no-conversation-selected #messageArea {
    display: flex !important;
  }
  
  .no-conversation-selected #emptyThread {
    display: none !important;
  }
  
  /* Ensure conversation list container is visible */
  .no-conversation-selected #conversationsContainer {
    display: flex !important;
  }
  
  /* Hide sidebar when conversation is selected */
  .conversation-selected .conversations-sidebar {
    position: fixed;
    left: -100%;
    min-width: unset !important;
  }
  
  .conversation-selected .message-area {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    top: var(--header-height, 76px);
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(100vh - var(--header-height, 76px)) !important;
    z-index: 1;
  }
}

/* Smooth state transitions */
.layout-transition {
  transition: width 0.3s ease, transform 0.3s ease, opacity 0.2s ease;
}

/* Conversation list — consistent sizing regardless of selection state */
.conversation-item {
  margin-bottom: 0;
}

/* Conversation item typography — desktop only */
@media (min-width: 850px) {
  .conversation-item h3 {
    font-size: 13px !important;
  }

  .conversation-item > div > div.flex-1 > p.truncate {
    font-size: 12px !important;
  }
}

/* SMS conversation item typography — desktop only */
@media (min-width: 850px) {
  .individual-conversation p.font-semibold.truncate {
    font-size: 13px !important;
  }

  .individual-conversation p.text-gray-600.truncate,
  .individual-conversation p.text-gray-400.truncate {
    font-size: 12px !important;
  }
}


/* Badge animations */
.badge-bounce {
  animation: badgeBounce 0.5s ease;
}

@keyframes badgeBounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* ======================================== */
/* RCS Support Styles */
/* ======================================== */

/* RCS Badge */
.rcs-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #4285f4, #34a853);
  color: white;
  box-shadow: 0 2px 4px rgba(66, 133, 244, 0.3);
  transition: all 0.2s ease;
}

.rcs-badge i {
  font-size: 9px;
}

@media (hover: hover) {
  .rcs-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 6px rgba(66, 133, 244, 0.4);
  }
}

/* RCS Badge variants */
.rcs-badge-sent {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.rcs-badge-received {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

/* RCS Message styling */
.message-rcs {
  position: relative;
}

.message-rcs::before {
  content: '';
  position: absolute;
  top: 0;
  left: -4px;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #4285f4, #34a853);
  border-radius: 2px;
  opacity: 0.6;
}

/* Enhanced Read Receipt (Phase 2) */
.enhanced-read-receipt {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.enhanced-read-receipt .status-icons {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.enhanced-read-receipt .status-icons i {
  font-size: 10px;
}

.enhanced-read-receipt .status-text {
  font-size: 10px;
  margin-left: 2px;
}

/* Simple Read Receipt (SMS/MMS) */
.simple-read-receipt {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
}

.simple-read-receipt i {
  font-size: 11px;
}

/* Status: Sending */
.status-sending {
  color: #f59e0b;
}

.dark .status-sending {
  color: #fbbf24;
}

/* Status: Sent */
.status-sent {
  color: #6b7280;
}

.dark .status-sent {
  color: #9ca3af;
}

/* Status: Delivered */
.status-delivered {
  color: #6b7280;
}

.dark .status-delivered {
  color: #9ca3af;
}

/* Status: Delivered (RCS) */
.status-delivered-rcs {
  color: #3b82f6;
}

.dark .status-delivered-rcs {
  color: #60a5fa;
}

/* Status: Read (RCS) */
.status-read-rcs {
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

.dark .status-read-rcs {
  color: #34d399;
  background: rgba(52, 211, 153, 0.1);
}

@media (hover: hover) {
  .status-read-rcs:hover {
    background: rgba(16, 185, 129, 0.15);
  }
}

@media (hover: hover) {
  .dark .status-read-rcs:hover {
    background: rgba(52, 211, 153, 0.15);
  }
}

/* Status: Failed */
.status-failed {
  color: #ef4444;
}

.dark .status-failed {
  color: #f87171;
}

/* Status progression animation */
.enhanced-read-receipt {
  animation: statusFadeIn 0.3s ease-out;
}

@keyframes statusFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Status icon animations */
.status-icons i {
  animation: iconPop 0.3s ease-out;
}

@keyframes iconPop {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* Tooltip enhancement */
.enhanced-read-receipt[title],
.simple-read-receipt[title] {
  cursor: help;
}

/* ======================================== */
/* Group Messaging Styles */
/* ======================================== */

/* Group conversation indicators */
.group-conversation {
  position: relative;
}

.group-conversation::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #10b981, #059669);
  border-radius: 0 2px 2px 0;
  opacity: 0.7;
}

/* Group avatar overlapping styles */
.group-avatar-container {
  position: relative;
  width: 48px;
  height: 48px;
}

.group-avatar-overlap {
  position: absolute;
  border: 2px solid white;
  transition: transform 0.2s ease;
}

.dark .group-avatar-overlap {
  border-color: #1f2937;
}

@media (hover: hover) {
  .group-avatar-overlap:hover {
    transform: scale(1.05);
    z-index: 10;
  }
}

/* Group participant count styling */
.group-participant-count {
  font-size: 10px;
  font-weight: 500;
  color: #6b7280;
  margin-top: 2px;
}

.dark .group-participant-count {
  color: #9ca3af;
}

/* Group indicator icon */
.group-indicator-icon {
  color: #10b981;
  margin-right: 4px;
}

.dark .group-indicator-icon {
  color: #34d399;
}

/* Group conversation hover effects */
@media (hover: hover) {
  .group-conversation:hover .group-indicator-icon {
    color: #059669;
  }
}

@media (hover: hover) {
  .dark .group-conversation:hover .group-indicator-icon {
    color: #10b981;
  }
}

/* Group message styling in thread */
.group-message {
  position: relative;
}

.group-message .sender-name {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 2px;
}

.dark .group-message .sender-name {
  color: #9ca3af;
}

/* Different colors for different senders */
.group-message.sender-1 .sender-name { color: #3b82f6; }
.group-message.sender-2 .sender-name { color: #10b981; }
.group-message.sender-3 .sender-name { color: #f59e0b; }
.group-message.sender-4 .sender-name { color: #ef4444; }
.group-message.sender-5 .sender-name { color: #8b5cf6; }

.dark .group-message.sender-1 .sender-name { color: #60a5fa; }
.dark .group-message.sender-2 .sender-name { color: #34d399; }
.dark .group-message.sender-3 .sender-name { color: #fbbf24; }
.dark .group-message.sender-4 .sender-name { color: #f87171; }
.dark .group-message.sender-5 .sender-name { color: #a78bfa; }

/* Legacy RCS read receipt (deprecated, kept for compatibility) */
.rcs-read-receipt {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #10b981;
  font-size: 10px;
  font-weight: 500;
  margin-left: 0.25rem;
}

.dark .rcs-read-receipt {
  color: #34d399;
}

.rcs-read-receipt i {
  font-size: 10px;
}

/* Status icon RCS enhancement */
.status-icon-rcs {
  color: #4285f4;
}

.dark .status-icon-rcs {
  color: #60a5fa;
}

/* Message type indicators in conversation list */
.conversation-rcs-indicator {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: linear-gradient(135deg, #4285f4, #34a853);
  border-radius: 50%;
  margin-left: 0.25rem;
}

/* RCS capability indicators */
.rcs-capabilities {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.25rem;
  font-size: 10px;
  color: #6b7280;
}

.dark .rcs-capabilities {
  color: #9ca3af;
}

.rcs-capability-icon {
  opacity: 0.6;
  transition: opacity 0.2s;
}

.rcs-capability-icon.active {
  opacity: 1;
  color: #4285f4;
}

.dark .rcs-capability-icon.active {
  color: #60a5fa;
}

/* RCS message bubble enhancements */
.message-bubble-sent.rcs-enhanced {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.message-bubble-received.rcs-enhanced {
  border-left: 3px solid #4285f4;
  background: #f9fafb;
}

.dark .message-bubble-received.rcs-enhanced {
  background: #374151;
  border-left-color: #60a5fa;
}

/* ======================================== */
/* RCS (Rich Communication Services) Styles */
/* ======================================== */

/* Message Type Badges */
.message-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 8px;
  vertical-align: middle;
}

.rcs-badge {
  background: linear-gradient(135deg, #4285f4, #34a853);
  color: white;
  box-shadow: 0 2px 4px rgba(66, 133, 244, 0.3);
  animation: rcsPulse 2s ease-in-out infinite;
}

.mms-badge {
  background: linear-gradient(135deg, #9333ea, #ec4899);
  color: white;
  box-shadow: 0 2px 4px rgba(147, 51, 234, 0.3);
}

@keyframes rcsPulse {
  0%, 100% {
    box-shadow: 0 2px 4px rgba(66, 133, 244, 0.3);
  }
  50% {
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.5);
  }
}

/* RCS Status Indicator in Thread Header */
.rcs-status-indicator {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(66, 133, 244, 0.1);
  border-radius: 16px;
  font-size: 11px;
  color: #4285f4;
  font-weight: 600;
  margin-left: 8px;
}

.dark .rcs-status-indicator {
  background: rgba(66, 133, 244, 0.2);
  color: #60a5fa;
}

/* Enhanced Read Receipts */
.rcs-read-receipt {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  color: #3b82f6;
  margin-left: 4px;
}

.dark .rcs-read-receipt {
  color: #60a5fa;
}

.rcs-read-receipt .fa-eye {
  font-size: 10px;
}

/* RCS Conversation List Indicator */
.rcs-conversation-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #4285f4, #34a853);
  border-radius: 50%;
  margin-left: 4px;
}

.rcs-conversation-indicator::before {
  content: '';
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
}

/* Message Type Label in Header */
.message-type-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(156, 163, 175, 0.1);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
}

.dark .message-type-label {
  background: rgba(156, 163, 175, 0.2);
  color: #9ca3af;
}

.message-type-label.rcs-enabled {
  background: rgba(66, 133, 244, 0.1);
  color: #4285f4;
}

.dark .message-type-label.rcs-enabled {
  background: rgba(66, 133, 244, 0.2);
  color: #60a5fa;
}

/* RCS Feature Icons */
.rcs-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(66, 133, 244, 0.1);
  color: #4285f4;
  font-size: 10px;
  margin-left: 4px;
}

.dark .rcs-feature-icon {
  background: rgba(66, 133, 244, 0.2);
  color: #60a5fa;
}

/* Enhanced Status Icons for RCS */
.status-icon-rcs {
  color: #4285f4;
  font-size: 12px;
}

.dark .status-icon-rcs {
  color: #60a5fa;
}

/* RCS Message Container Enhancement */
.message-rcs {
  position: relative;
}

.message-rcs::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #4285f4, #34a853);
  border-radius: 2px;
  opacity: 0.5;
}

/* Tooltip for RCS Features */
.rcs-tooltip {
  position: relative;
  cursor: help;
}

@media (hover: hover) {
  .rcs-tooltip:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    font-size: 11px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 4px;
  }
}

@media (hover: hover) {
  .dark .rcs-tooltip:hover::after {
    background: rgba(255, 255, 255, 0.9);
    color: #111827;
  }
}

/* Focus visible for accessibility */
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Print styles */
@media print {
  header,
  aside,
  #messageInput,
  button {
    display: none !important;
  }

  main {
    width: 100% !important;
  }
}

/* ======================================== */
/* iOS Reaction Badges */
/* ======================================== */

/* Wrapper for message bubble with reactions (needs relative positioning) */
.message-with-reactions {
  position: relative;
}

/* When a bubble has both .markdown-content (overflow-x:hidden for long text)
   and .message-with-reactions, reactions are clipped because they sit at
   negative offsets. Override so reactions can overflow the bubble. */
.markdown-content.message-with-reactions {
  overflow: visible;
}

.message-reactions {
  position: absolute;
  top: -10px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  z-index: 10;
}

/* Sent messages (right-aligned): reactions on top-left */
.message-bubble-sent .message-reactions {
  left: -8px;
}

/* Received messages (left-aligned): reactions on top-right */
.message-bubble-received .message-reactions {
  right: -8px;
  flex-direction: row-reverse;
}

/* Solo reaction (single emoji, no count): a true circle. Multi-reactor groups
   render the same `.reaction-badge` with a `.reaction-count` child appended;
   `:has()` switches that case back to a pill so "👍 3" doesn't get clipped. */
.reaction-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  font-size: 0.875rem;
  cursor: default;
  transition: all 0.2s ease;
  animation: reactionPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  width: 28px;
  height: 28px;
  box-sizing: border-box;
}

.reaction-badge:has(.reaction-count) {
  width: auto;
  height: auto;
  min-width: 28px;
  min-height: 28px;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
}

.dark .reaction-badge {
  background: rgba(55, 65, 81, 0.95);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

@media (hover: hover) {
  .reaction-badge:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-color: rgba(59, 130, 246, 0.5);
  }
}

.reaction-emoji {
  font-size: 0.875rem;
  line-height: 1;
  /* Force color-emoji presentation for the reaction glyphs. The page's base
     html font-family is `'Inter', ui-sans-serif, system-ui, …, sans-serif`
     with NO emoji font in the chain, so on Electron/Windows the renderer
     falls back per-glyph for emoji code points. That fallback works for
     most reactions (👍 ❤️ 😂 👎 ❓ — all in dedicated emoji blocks) but
     breaks for `‼️` (U+203C DOUBLE EXCLAMATION MARK) which lives in
     General Punctuation, not an emoji block. Even with the U+FE0F
     variation selector, Chromium's Windows fallback path can pick a text-
     style glyph from a Punctuation font, rendering it as a tiny dark
     `‼` instead of the colorful red emoji. Promoting color-emoji fonts
     to the front of the cascade fixes the Emphasized reaction without
     touching the reaction options array; `font-variant-emoji: emoji`
     belt-and-suspenders for any glyph whose default presentation is
     ambiguous (Chromium 116+, present in Electron 33's bundled
     Chromium 130). */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
               "Noto Color Emoji", "Twemoji Mozilla", "EmojiOne Color",
               "Android Emoji", sans-serif;
  font-variant-emoji: emoji;
}

/* Count digit next to the emoji when multiple reactors used the same emoji.
 * Hidden entirely for single-reactor badges (not rendered in markup). Kept
 * visually subtle so the emoji itself stays the primary signal. */
.reaction-count {
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 600;
  margin-left: 0.2rem;
  color: #6b7280; /* gray-500 */
}

.dark .reaction-count {
  color: #d1d5db; /* gray-300 */
}

/* ── Reactor popover (who reacted?) ──
 * Tap a .reaction-badge → this popover anchors to it and lists every reactor
 * for that emoji group. Exists because `title` tooltips don't fire on touch
 * devices, leaving mobile users unable to see who reacted. Desktop still
 * keeps the native title tooltip; the popover is the touch-friendly twin.
 * Positioned via JS (fixed coords against the viewport), so the page scroll
 * doesn't drag it with the message. Scroll / resize / Escape all dismiss. */
.reaction-reactor-popover {
  position: fixed;
  z-index: 1200; /* above message bubbles, below modals */
  max-width: min(280px, calc(100vw - 16px));
  background: #ffffff;
  color: #111827;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 8px 12px;
  font-size: 0.8125rem;
  line-height: 1.35;
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 120ms ease, transform 120ms ease;
}

.reaction-reactor-popover.hidden {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

.dark .reaction-reactor-popover {
  background: #1f2937; /* gray-800 */
  color: #f3f4f6;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
}

.reaction-reactor-popover-arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: inherit;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  /* Default: arrow at the bottom (popover sits above the badge) */
  bottom: -6px;
  transform: rotate(45deg);
  border-top: none;
  border-left: none;
}

.dark .reaction-reactor-popover-arrow {
  border-color: rgba(255, 255, 255, 0.1);
}

/* flip-up = popover sits BELOW the badge (not enough room above). Arrow moves
 * to the top edge and flips its visible borders accordingly. */
.reaction-reactor-popover.flip-up .reaction-reactor-popover-arrow {
  bottom: auto;
  top: -6px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  border-right: none;
  border-bottom: none;
}

.dark .reaction-reactor-popover.flip-up .reaction-reactor-popover-arrow {
  border-top-color: rgba(255, 255, 255, 0.1);
  border-left-color: rgba(255, 255, 255, 0.1);
}

.reaction-reactor-line {
  padding: 2px 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.reaction-reactor-line + .reaction-reactor-line {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  margin-top: 2px;
  padding-top: 4px;
}

.dark .reaction-reactor-line + .reaction-reactor-line {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.reaction-reactor-name {
  font-weight: 600;
}

.reaction-reactor-verb {
  color: #6b7280;
  font-weight: 400;
}

.dark .reaction-reactor-verb {
  color: #9ca3af;
}

/* Reaction pop animation with bounce */
@keyframes reactionPop {
  0% {
    transform: scale(0) rotate(-15deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.2) rotate(5deg);
  }
  80% {
    transform: scale(0.95) rotate(-2deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Multiple reactions stack right-to-left via flex-direction: row-reverse */


/* ======================================== */
/* Scroll-to-Bottom Button                  */
/* ======================================== */

.scroll-to-bottom-btn {
  /* Anchored inside .message-compose-area (which has position: relative;
     z-index: 1). `bottom: 100%` pins the button's bottom edge to the
     compose's TOP edge; `margin-bottom: 8px` then lifts it 8px higher so
     it floats consistently above the compose, no matter how tall the
     compose grows (multi-line input, dictation expansion, iPhone
     safe-area inset, typing indicator, attachment previews, etc.).
     Replaces the prior fixed `bottom: 76px` that was hand-tuned for the
     desktop-only compose height and produced visible overlap on mobile
     when the compose was taller than 76px. */
  position: absolute;
  bottom: 100%;
  margin-bottom: 8px;
  right: 20px;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  border-radius: 9999px !important;
  padding: 0 !important;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #2563eb;
  font-size: 0.75rem;
  cursor: pointer;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.15s ease;
}

.scroll-to-bottom-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Touch-target sizing on mobile + tablet — Apple HIG / Material both
   recommend a 44px+ minimum tappable area. The base rule above clamps
   the button to 32px with !important on every box dimension, so we
   must override each one (and the icon font-size, for visual balance)
   at equal specificity + !important. Right offset stays 20px — the
   pill still tucks against the edge without crowding the compose. */
body.is-mobile .scroll-to-bottom-btn,
body.is-tablet .scroll-to-bottom-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  font-size: 1rem;
}

@media (hover: hover) {
  .scroll-to-bottom-btn:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  }
}

.dark .scroll-to-bottom-btn {
  background: #1f2937;
  border-color: rgba(255, 255, 255, 0.1);
  color: #60a5fa;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

@media (hover: hover) {
  .dark .scroll-to-bottom-btn:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
  }
}

/* ======================================== */
/* Reaction Picker */
/* ======================================== */

.reaction-picker {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.4rem;
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 9999px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.2);
  z-index: 9999;
  backdrop-filter: blur(12px);
  transition: opacity 0.15s ease;
}

.reaction-picker.hidden {
  display: none;
}

.reaction-picker-btn {
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  background: transparent;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

@media (hover: hover) {
  .reaction-picker-btn:hover {
    transform: scale(1.2);
    background-color: rgba(59, 130, 246, 0.15);
  }
}

.reaction-picker-btn:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.7);
  outline-offset: 2px;
}

.reaction-picker-divider {
  width: 1px;
  height: 1.1rem;
  background: rgba(148, 163, 184, 0.3);
  flex-shrink: 0;
}

.reaction-picker-action-btn {
  font-size: 0.8rem;
  color: rgba(148, 163, 184, 0.9);
}
@media (hover: hover) {
  .reaction-picker-action-btn:hover {
    color: #ffffff;
  }
}

.dark .reaction-picker {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(148, 163, 184, 0.35);
}

/* ======================================== */
/* Message Action Dropdown (from picker ⋯)  */
/* ======================================== */

.message-action-dropdown {
  position: fixed;
  z-index: 9999;
  min-width: 150px;
  padding: 4px;
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.dark .message-action-dropdown {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.message-action-dropdown.hidden {
  display: none;
}

.message-action-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: background 0.15s ease;
}

.message-action-dropdown-item i {
  width: 16px;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(148, 163, 184, 0.9);
}

@media (hover: hover) {
  .message-action-dropdown-item:hover {
    background: rgba(59, 130, 246, 0.15);
  }
}

.message-action-dropdown-item:active {
  background: rgba(59, 130, 246, 0.25);
}

.message-action-dropdown-danger {
  color: #f87171;
}

.message-action-dropdown-danger i {
  color: #f87171;
}

@media (hover: hover) {
  .message-action-dropdown-danger:hover {
    background: rgba(239, 68, 68, 0.15);
  }
}

.message-action-dropdown-danger:active {
  background: rgba(239, 68, 68, 0.25);
}

.message-action-dropdown-separator {
  height: 1px;
  background: rgba(148, 163, 184, 0.2);
  margin: 4px 8px;
}

/* =====================================================================
   Custom Context Menu (Phase 1)
   See: docs/plans/CUSTOM_CONTEXT_MENU_PLAN.md
   Reuses .message-action-dropdown skin. Additions below add: keyboard
   accelerator hints, focus ring, mobile bottom-sheet variant + scrim.
   ===================================================================== */

/* Keyboard accelerator hint right-aligned in items (e.g. "Ctrl+Z").
   Hidden on mobile — touch users have no keyboard. */
.message-action-dropdown-accel {
  margin-left: auto;
  padding-left: 16px;
  font-size: 0.6875rem;
  color: rgba(148, 163, 184, 0.7);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Submenu chevron — Phase 3 use, but ship the style in Phase 1 to keep
   the menu CSS surface stable. */
.message-action-dropdown-item[aria-haspopup="true"]::after {
  content: "\203A";  /* › */
  margin-left: auto;
  padding-left: 16px;
  color: rgba(148, 163, 184, 0.7);
}

/* Disabled state — items always render; greyed out when not actionable. */
.message-action-dropdown-item[aria-disabled="true"],
.message-action-dropdown-item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.message-action-dropdown-item[aria-disabled="true"]:hover,
.message-action-dropdown-item:disabled:hover {
  background: transparent !important;
}

/* Keyboard focus ring — visible on Tab/Arrow nav, suppressed on mouse. */
.message-action-dropdown-item:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.6);
  outline-offset: -2px;
}

/* Mobile bottom-sheet variant — anchors to viewport bottom, full width.
   Phase 1 ships the style; no Phase 1 provider activates it (baseline
   providers are Electron-only). Phase 2 wires it to migrating handlers. */
@media (max-width: 849px) {
  .message-action-dropdown.is-bottom-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    min-width: 0;            /* override desktop's 150px */
    max-width: none;
    border-radius: 16px 16px 0 0;
    padding: 4px 8px max(16px, env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.25s ease-out;
  }
  .message-action-dropdown.is-bottom-sheet:not(.hidden) {
    transform: translateY(0);
  }
  .message-action-dropdown.is-bottom-sheet::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    margin: 8px auto 12px;
    background: rgba(148, 163, 184, 0.4);
    border-radius: 2px;
  }
  .message-action-dropdown.is-bottom-sheet .message-action-dropdown-item {
    padding: 14px 18px;       /* ~48px row height — large touch target */
    font-size: 0.9375rem;
    border-radius: 10px;
    gap: 14px;
  }
  .message-action-dropdown.is-bottom-sheet .message-action-dropdown-item i {
    font-size: 1rem;
    width: 20px;
  }
  .message-action-dropdown.is-bottom-sheet .message-action-dropdown-separator {
    margin: 6px 12px;
  }
  /* Accelerator hints are useless without a keyboard. */
  .message-action-dropdown.is-bottom-sheet .message-action-dropdown-accel {
    display: none;
  }
}

/* Scrim behind the bottom sheet. Tap dismisses (controller wires the click).
   Theme-aware per Chris's locked decision: lighter wash in light mode. */
.context-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 9998;       /* one below the sheet's 9999 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
}
.dark .context-menu-backdrop {
  background: rgba(15, 23, 42, 0.4);
}
.context-menu-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

.message[data-is-reaction="false"][data-has-body="true"] .message-bubble-sent,
.message[data-is-reaction="false"][data-has-body="true"] .message-bubble-received,
.internal-message[data-has-body="true"] .message-bubble-sent,
.internal-message[data-has-body="true"] .message-bubble-received {
  cursor: default;
}

@media (hover: hover) {
  .message[data-is-reaction="false"][data-has-body="true"] .message-bubble-sent:hover,
  .message[data-is-reaction="false"][data-has-body="true"] .message-bubble-received:hover,
  .internal-message[data-has-body="true"] .message-bubble-sent:hover,
  .internal-message[data-has-body="true"] .message-bubble-received:hover {
    filter: brightness(1.05);
  }
}


/* ======================================== */
/* Emoji Picker */
/* ======================================== */

.emoji-picker {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(5, 2.25rem);
  gap: 0.4rem;
  padding: 0.6rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.6);
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.2);
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.emoji-picker.hidden {
  display: none;
}

.emoji-picker-btn {
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  background: transparent;
  border-radius: 0.75rem;
  font-size: 1.4rem;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

@media (hover: hover) {
  .emoji-picker-btn:hover {
    transform: scale(1.2);
    background-color: rgba(59, 130, 246, 0.12);
  }
}

.emoji-picker-btn:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.6);
  outline-offset: 2px;
}

.dark .emoji-picker {
  background: rgba(17, 24, 39, 0.95);
  border-color: rgba(148, 163, 184, 0.35);
}

@media (hover: hover) {
  .dark .emoji-picker-btn:hover {
    background-color: rgba(96, 165, 250, 0.18);
  }
}

/* Search control for conversations */
.search-control {
  position: relative;
}

/* Search toggle icon button - hidden by default */
.search-toggle-icon-btn {
  display: none;
}

.search-control .search-input-container {
  transition: all 0.3s ease;
}

/* Default state: hidden on all screen sizes until explicitly shown */
.search-control .search-input-container:not(.show) {
  display: none !important;
}

/* Desktop: Show toggle icon, hide search input by default (same as mobile) */
@media (min-width: 769px) {
  .search-toggle-icon-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  
  .search-control .search-input-container {
    display: none;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-top: 0.5rem;
    padding: 2px;
  }
  
  .search-control .search-input-container.show {
    display: block;
    opacity: 1;
    max-height: 100px;
    overflow: visible;
  }
}

/* Mobile/Tablet: Show toggle icon, hide search input by default */
@media (max-width: 849px) {
  .search-toggle-icon-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .search-control .search-input-container {
    display: none;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-top: 0.5rem;
    padding: 2px; /* Add padding to prevent focus ring clipping */
  }

  .search-control .search-input-container.show {
    display: block;
    opacity: 1;
    max-height: 100px;
    overflow: visible; /* Allow focus ring to be visible */
  }
}


/* Avatar styling - ensure background images display correctly */
#userAvatar[style*="background-image"] {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
}

#profileAvatar[style*="background-image"] {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
}

/* =====================================================
   Presence Indicators
   ===================================================== */

/* Base presence dot (header status selector) */
.presence-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  background-color: #9ca3af; /* gray-400 fallback */
}

.dark .presence-dot {
  border-color: #1f2937;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Header presence - responsive display */
/* On mobile: show only the dot */
/* On desktop (768px+): show dot + label + chevron */
#presenceLabel {
  display: none;
}

#presenceChevron {
  display: none;
}

@media (min-width: 850px) {
  #presenceLabel {
    display: inline;
  }
  
  #presenceChevron {
    display: inline;
  }
}

/* Header phone container - responsive display */
/* On mobile: show only the phone icon */
/* On desktop (768px+): show icon + number */
#phoneContainer {
  padding: 0.5rem;
}

#phoneContainer .phone-number-text {
  display: none;
}

#phoneContainer .space-x-2 > * + * {
  margin-left: 0;
}

@media (min-width: 850px) {
  #phoneContainer {
    padding: 0.5rem 1rem;
  }
  
  #phoneContainer .phone-number-text {
    display: inline;
  }
  
  #phoneContainer .space-x-2 > * + * {
    margin-left: 0.5rem;
  }
}

/* Status colors */
.presence-available {
  background-color: #22c55e; /* green-500 */
}

.presence-busy {
  background-color: #ef4444; /* red-500 */
}

.presence-dnd {
  background-color: #dc2626; /* red-600 - slightly darker for DND */
  position: relative;
}

/* DND minus sign */
.presence-dnd::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 2px;
  background-color: white;
  border-radius: 1px;
}

.presence-away {
  background-color: #eab308; /* yellow-500 - as per design spec */
}

.presence-on_phone, .presence-onphone, .presence-on_the_phone {
  background-color: #3b82f6; /* blue-500 - as per design spec */
}

.presence-teams_call {
  background-color: #6264A7; /* Teams brand purple */
}

/* Pulse animation for on-call status */
@keyframes presence-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

.presence-offline {
  background-color: #9ca3af; /* gray-400 */
}

/* Small presence dot for avatar overlays */
.presence-dot-sm {
  width: 10px;
  height: 10px;
  border-width: 1.5px;
}

/* Avatar with presence indicator wrapper */
.avatar-with-presence {
  position: relative;
  display: inline-block;
}

.avatar-with-presence .presence-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
}

/* Header presence selector */
#presenceDropdown {
  min-width: 220px;
}

@media (max-width: 639px) {
  #presenceDropdown {
    left: auto !important;
    right: 0;
  }
}

/* Presence dots in dropdown menu - consistent size for readability */
#presenceDropdown .presence-dot {
  width: 14px;
  height: 14px;
}

.presence-option, .presence-preset {
  cursor: pointer;
}

@media (hover: hover) {
  .presence-option:hover, .presence-preset:hover {
    background-color: #f3f4f6;
  }
}

@media (hover: hover) {
  .dark .presence-option:hover, .dark .presence-preset:hover {
    background-color: #374151;
  }
}

/* Presence label in header */
#presenceLabel {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status message display */
.presence-status-message {
  font-size: 0.75rem;
  color: #6b7280;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dark .presence-status-message {
  color: #9ca3af;
}

/* Contact card presence indicator (on avatars in lists) */
.contact-presence-indicator {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark .contact-presence-indicator {
  border-color: #1f2937;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Preset icon indicator (calendar, clock, etc.) on contact cards */
.contact-presence-indicator.presence-preset-icon {
  background-color: #374151;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 10px;
}

.dark .contact-presence-indicator.presence-preset-icon {
  background-color: #4b5563;
}

/* On Phone icon indicator - blue background with white phone icon */
.contact-presence-indicator.presence-on-phone-icon,
.presence-on-phone-icon {
  background-color: #3b82f6; /* blue-500 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 9px;
}

/* Teams Call icon indicator - Teams purple background with white video icon */
.contact-presence-indicator.presence-teams-call-icon,
.presence-teams-call-icon {
  background-color: #6264A7; /* Teams brand purple */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 9px;
}

/* Header presence status icon (for presets and system statuses) */
.presence-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #6b7280;
}

.dark .presence-status-icon {
  color: #9ca3af;
}

/* On Phone icon in header - blue icon (no background) */
.presence-status-icon.presence-on-phone-icon {
  background-color: transparent !important;
  color: #3b82f6;
}

/* Teams Call icon in header - Teams purple icon (no background) */
.presence-status-icon.presence-teams-call-icon {
  background-color: transparent !important; /* Override the purple background */
  color: #6264A7; /* Teams brand purple */
}

/* Ensure icons inside presence-status-icon are visible */
.presence-status-icon i {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  color: inherit;
}

/* Larger presence indicator for contact panel avatar */
#panelPresenceIndicator {
  width: 22px;
  height: 22px;
  border-width: 3px;
}

/* Contact panel status chip */
.presence-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.presence-status-chip.chip-available {
  background-color: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.presence-status-chip.chip-busy {
  background-color: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

.presence-status-chip.chip-away {
  background-color: rgba(234, 179, 8, 0.15);
  color: #ca8a04;
}

.presence-status-chip.chip-on_phone,
.presence-status-chip.chip-on_the_phone {
  background-color: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

.presence-status-chip.chip-teams_call {
  background-color: rgba(98, 100, 167, 0.15);
  color: #6264A7; /* Teams brand purple */
}

.presence-status-chip.chip-dnd {
  background-color: rgba(220, 38, 38, 0.15);
  color: #dc2626;
}

.presence-status-chip.chip-offline {
  background-color: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}

.dark .presence-status-chip.chip-available {
  background-color: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

.dark .presence-status-chip.chip-busy {
  background-color: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.dark .presence-status-chip.chip-away {
  background-color: rgba(234, 179, 8, 0.2);
  color: #facc15;
}

.dark .presence-status-chip.chip-on_phone,
.dark .presence-status-chip.chip-on_the_phone {
  background-color: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.dark .presence-status-chip.chip-teams_call {
  background-color: rgba(98, 100, 167, 0.25);
  color: #8b8dd0; /* Lighter Teams purple for dark mode */
}

.dark .presence-status-chip.chip-dnd {
  background-color: rgba(220, 38, 38, 0.2);
  color: #f87171;
}

.dark .presence-status-chip.chip-offline {
  background-color: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
}

/* Status chip dot */
.presence-status-chip .chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.presence-status-chip .chip-dot.dot-available { background-color: #22c55e; }
.presence-status-chip .chip-dot.dot-busy { background-color: #ef4444; }
.presence-status-chip .chip-dot.dot-away { background-color: #eab308; }
.presence-status-chip .chip-dot.dot-on_phone,
.presence-status-chip .chip-dot.dot-on_the_phone { background-color: #3b82f6; }
.presence-status-chip .chip-dot.dot-teams_call { background-color: #6264A7; } /* Teams purple */
.presence-status-chip .chip-dot.dot-dnd { background-color: #dc2626; }
.presence-status-chip .chip-dot.dot-offline { background-color: #6b7280; }

/* =====================================================
   Voice Calling - Call Panel Styles
   ===================================================== */

/* Active Call Info Section - Desktop (default centered layout) */
.active-call-info-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.active-call-avatar-wrapper {
  flex-shrink: 0;
  margin-bottom: 0;
}

.active-call-avatar-wrapper > div {
  padding-top: 5px;
  padding-bottom: 5px;
}

.active-call-details {
  margin-bottom: 0;
  text-align: left;
  flex-shrink: 0;
}

.active-call-timer-wrapper {
  margin-top: 0;
  text-align: center;
}

.active-call-timer-wrapper #callTimer {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Left Sidebar - Call Panel & Conversations */
/* Width is set by existing responsive rules in conversations-sidebar class */
#conversationsSidebar {
  position: relative;
}

/* Toggle Buttons in Left Sidebar Header */
#showCallPanelBtn,
#showConversationsBtn {
  position: relative;
  overflow: visible;
}

/* Hide redundant SMS/Internal tabs (functionality moved to top nav) */
#tabContainer {
  display: none !important;
}

/* Left Sidebar Header - Vertically Centered */
#leftSidebarHeader {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 101px;
}

/* Navigation Buttons - Layout (Force horizontal compact) */
#leftSidebarHeader .grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  width: 100%;
}

#showCallPanelBtn,
#showSMSBtn,
#showInternalBtn,
#showContactsPageBtn,
#navRailSettingsBtn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 56px !important;
  max-height: 56px !important;
  width: 100% !important;
  max-width: none !important;
  box-shadow: none !important;
}

/* Navigation Buttons - Inactive State - matches sms-nav-btn */
#showCallPanelBtn:not(.active),
#showSMSBtn:not(.active),
#showInternalBtn:not(.active),
#showContactsPageBtn:not(.active),
#navRailSettingsBtn:not(.active) {
  background: transparent !important;
  color: #6c757d !important;
  opacity: 1;
}

.dark #showCallPanelBtn:not(.active),
.dark #showSMSBtn:not(.active),
.dark #showInternalBtn:not(.active),
.dark #showContactsPageBtn:not(.active),
.dark #navRailSettingsBtn:not(.active) {
  background: transparent !important;
  color: #9ca3af !important;
  opacity: 1;
}

/* Navigation Buttons - Active (Full Color) State - matches sms-nav-btn */
#showCallPanelBtn.active,
#showSMSBtn.active,
#showInternalBtn.active,
#showContactsPageBtn.active,
#navRailSettingsBtn.active {
  background: #eff6ff !important;
  color: #2563eb !important;
  opacity: 1;
}

.dark #showCallPanelBtn.active,
.dark #showSMSBtn.active,
.dark #showInternalBtn.active,
.dark #showContactsPageBtn.active,
.dark #navRailSettingsBtn.active {
  background: #1e3a8a !important;
  color: #60a5fa !important;
  opacity: 1;
}

/* Green Dot Indicator (active call) */
#callActiveIndicator {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
  animation: pulse-green 2s ease-in-out infinite;
}

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

/* Switchable Content Containers */
#callPanelContainer,
#conversationsContainer {
  transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
}

#callPanelContainer.hidden {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

#conversationsContainer.hidden {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Utility: Hidden */
.hidden {
  display: none !important;
}

/* Autocomplete Hierarchical Styles */
.autocomplete-section {
  margin-bottom: 4px;
}

.autocomplete-section-header {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b7280;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.dark .autocomplete-section-header {
  color: #9ca3af;
  background: #1f2937;
  border-bottom-color: #374151;
}

.autocomplete-contact {
  border-bottom: 1px solid #f3f4f6;
}

.dark .autocomplete-contact {
  border-bottom-color: #374151;
}

.autocomplete-contact:last-child {
  border-bottom: none;
}

.autocomplete-contact-header {
  background: var(--bg-primary, #ffffff);
}

.dark .autocomplete-contact-header {
  background: #111827;
}

.autocomplete-numbers {
  background: #fafbfc;
}

.dark .autocomplete-numbers {
  background: #0f1419;
}

.autocomplete-number {
  position: relative;
}

.autocomplete-number-preferred {
  font-weight: 500;
}

.autocomplete-number.bg-gray-100 {
  background: #e5e7eb !important;
}
@media (hover: hover) {
  .autocomplete-number:hover {
    background: #e5e7eb !important;
  }
}

.dark .autocomplete-number.dark\:bg-gray-700 {
  background: #374151 !important;
}
@media (hover: hover) {
  .dark .autocomplete-number:hover {
    background: #374151 !important;
  }
}

/* Keyboard selection highlight */
.autocomplete-number.bg-gray-100 {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
}

.dark .autocomplete-number.dark\:bg-gray-700 {
  outline: 2px solid #60a5fa;
  outline-offset: -2px;
}

/* Dialpad Container - iPhone-style */
.dialpad-container {
  max-width: 320px;
  margin: 0 auto;
}

/* Dialpad Grid - Custom spacing */
.dialpad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 22px;
  row-gap: 22px;
}

/* Dialpad Buttons - Premium iPhone-inspired spacing */
.dialpad-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 50%;
  width: 72px;
  height: 72px;
  max-width: 72px;
  max-height: 72px;
  margin: 0 auto;
  font-size: 24px;
  font-weight: 500;
  color: #212529;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

@media (hover: hover) {
  .dialpad-btn:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    transform: scale(1.05);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  }
}

.dialpad-btn:active {
  transform: scale(0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark .dialpad-btn {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

@media (hover: hover) {
  .dark .dialpad-btn:hover {
    background: #4b5563;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  }
}

.dialpad-letters {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: #6c757d;
  margin-top: 2px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.dark .dialpad-letters {
  color: #9ca3af;
}

/* iOS-style Call Button - Premium sizing */
.ios-call-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #34c759;
  color: white;
  border: none;
  font-size: 28px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(52, 199, 89, 0.3);
  margin: 0 auto;
}

@media (hover: hover) {
  .ios-call-btn:hover {
    background: #30b350;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.4);
  }
}

.ios-call-btn:active {
  transform: scale(0.95);
  box-shadow: 0 2px 6px rgba(52, 199, 89, 0.3);
}

.dark .ios-call-btn {
  background: #30d158;
  box-shadow: 0 2px 8px rgba(48, 209, 88, 0.3);
}

@media (hover: hover) {
  .dark .ios-call-btn:hover {
    background: #32d65a;
    box-shadow: 0 4px 12px rgba(48, 209, 88, 0.4);
  }
}

/* iOS-style Backspace Button */
.ios-backspace-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #e9ecef;
  color: #495057;
  border: none;
  font-size: 22px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

@media (hover: hover) {
  .ios-backspace-btn:hover {
    background: #dee2e6;
    transform: scale(1.05);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  }
}

.ios-backspace-btn:active {
  transform: scale(0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.dark .ios-backspace-btn {
  background: #4b5563;
  color: #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

@media (hover: hover) {
  .dark .ios-backspace-btn:hover {
    background: #6b7280;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  }
}

/* iOS-style Answer Button (Green) - For incoming call dialpad */
.ios-answer-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #34c759; /* iOS green */
  color: white;
  border: none;
  font-size: 28px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(52, 199, 89, 0.3);
}

@media (hover: hover) {
  .ios-answer-btn:hover {
    background: #30b350;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.4);
  }
}

.ios-answer-btn:active {
  transform: scale(0.95);
  box-shadow: 0 2px 6px rgba(52, 199, 89, 0.3);
}

.dark .ios-answer-btn {
  background: #30d158;
  box-shadow: 0 2px 8px rgba(48, 209, 88, 0.3);
}

@media (hover: hover) {
  .dark .ios-answer-btn:hover {
    background: #32d65a;
    box-shadow: 0 4px 12px rgba(48, 209, 88, 0.4);
  }
}

/* iOS-style Decline Button (Red) - For incoming call dialpad */
.ios-decline-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #ff3b30; /* iOS red */
  color: white;
  border: none;
  font-size: 28px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
}

@media (hover: hover) {
  .ios-decline-btn:hover {
    background: #e6342a;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.4);
  }
}

.ios-decline-btn:active {
  transform: scale(0.95);
  box-shadow: 0 2px 6px rgba(255, 59, 48, 0.3);
}

.dark .ios-decline-btn {
  background: #ff453a;
  box-shadow: 0 2px 8px rgba(255, 69, 58, 0.3);
}

@media (hover: hover) {
  .dark .ios-decline-btn:hover {
    background: #ff5757;
    box-shadow: 0 4px 12px rgba(255, 69, 58, 0.4);
  }
}

/* Incoming call overlay - hidden by default */
#incomingCallDialpadView.hidden {
  display: none !important;
  visibility: hidden !important;
}

/* Ensure buttons are always visible and properly styled when overlay is shown */
#incomingCallDialpadView:not(.hidden) .ios-answer-btn,
#incomingCallDialpadView:not(.hidden) .ios-decline-btn {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Incoming call dialpad button container - ensure proper spacing */
#incomingCallDialpadView .flex.items-center.justify-center {
  gap: 5rem !important; /* 80px - more space between Answer and Decline buttons */
  max-width: 28rem !important; /* 448px - wider container to accommodate spacing */
}

/* Mobile: Larger touch targets for incoming call buttons */
@media (max-width: 849px) {
  .ios-answer-btn,
  .ios-decline-btn {
    width: 80px;
    height: 80px;
    font-size: 32px;
  }
  
  #incomingCallDialpadView .ios-answer-btn,
  #incomingCallDialpadView .ios-decline-btn {
    width: 80px !important;
    height: 80px !important;
    font-size: 32px !important;
  }
}

/* Call History Filters */
.call-history-filter {
  flex: 1;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6c757d;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

@media (hover: hover) {
  .call-history-filter:hover {
    color: #212529;
    background: #f1f3f5;
  }
}

.call-history-filter.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

.dark .call-history-filter {
  color: #9ca3af;
}

@media (hover: hover) {
  .dark .call-history-filter:hover {
    color: #f3f4f6;
    background: #374151;
  }
}

.dark .call-history-filter.active {
  color: #60a5fa;
  border-bottom-color: #60a5fa;
}

/* Call Navigation Buttons */
.call-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  padding: 0.375rem 0.75rem;
  height: 57px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6c757d;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.call-nav-btn i {
  font-size: 1rem;
}

@media (hover: hover) {
  .call-nav-btn:hover {
    color: #212529;
    background: #f1f3f5;
  }
}

.call-nav-btn.active {
  color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2), 0 0 0 0.5px rgba(37, 99, 235, 0.1);
}

.dark .call-nav-btn {
  color: #9ca3af;
}

@media (hover: hover) {
  .dark .call-nav-btn:hover {
    color: #f3f4f6;
    background: #374151;
  }
}

.dark .call-nav-btn.active {
  color: #60a5fa;
  background: #1e3a8a;
  box-shadow: 0 1px 3px rgba(96, 165, 250, 0.2), 0 0 0 0.5px rgba(96, 165, 250, 0.1);
}

/* SMS Navigation Buttons (Bottom Nav Bar) */
.sms-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  padding: 0.375rem 0.75rem;
  height: 57px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6c757d;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sms-nav-btn i {
  font-size: 1rem;
}

@media (hover: hover) {
  .sms-nav-btn:hover {
    color: #212529;
    background: #f1f3f5;
  }
}

.sms-nav-btn.active {
  color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2), 0 0 0 0.5px rgba(37, 99, 235, 0.1);
}

.dark .sms-nav-btn {
  color: #9ca3af;
}

@media (hover: hover) {
  .dark .sms-nav-btn:hover {
    color: #f3f4f6;
    background: #374151;
  }
}

.dark .sms-nav-btn.active {
  color: #60a5fa;
  background: #1e3a8a;
  box-shadow: 0 1px 3px rgba(96, 165, 250, 0.2), 0 0 0 0.5px rgba(96, 165, 250, 0.1);
}

/* ============================================
   iOS-Style Segmented Control (mobile filter nav)
   ============================================ */
.segmented-control {
  display: flex;
  position: relative;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 22px;
  padding: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  margin: 0 auto 2px;
  width: 85%;
  max-width: 360px;
}

@media (max-width: 849px) {
  .segmented-control {
    margin: 0 56px 2px 12px;
    width: auto;
    max-width: none;
  }
}

.segmented-control__indicator {
  display: none;
  transition: transform 0.28s cubic-bezier(0.25, 0.1, 0.25, 1);
  transform: translateX(calc(var(--active-index, 0) * (100% + 2.67px)));
  z-index: 0;
}

.segmented-control__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 6px 4px;
  height: 48px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #1f2937;
  background: transparent;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.segmented-control__item i {
  font-size: 1.05rem;
  line-height: 1;
}

.segmented-control__item span:last-child {
  line-height: 1;
}

.segmented-control__item.active {
  color: #2563eb;
}

.fav-nav-btn {
  height: 54px;
  gap: 0.125rem;
}

.fav-nav-btn.active {
  color: #2563eb;
  background: #eff6ff;
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2), 0 0 0 0.5px rgba(37, 99, 235, 0.1);
}

.dark .fav-nav-btn.active {
  color: #60a5fa;
  background: #1e3a8a;
  box-shadow: 0 1px 3px rgba(96, 165, 250, 0.2), 0 0 0 0.5px rgba(96, 165, 250, 0.1);
}

.segmented-control__item .sms-nav-badge {
  top: -4px;
  right: -6px;
}

/* Dark mode */
.dark .segmented-control {
  background: rgba(31, 41, 55, 0.85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
}

.dark .segmented-control__indicator {
  background: #2c2c2e;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.dark .segmented-control__item {
  color: #f3f4f6;
}

.dark .segmented-control__item.active {
  color: #60a5fa;
}

/* 5-segment variant (call panel) */
.segmented-control--5 .segmented-control__indicator {
  width: 20%;
  left: 0;
  transform: translateX(calc(var(--active-index, 0) * 100%));
}

/* Phase 0.5: 6-segment variant (call panel during live transcription) */
.segmented-control--6 .segmented-control__indicator {
  width: calc(100% / 6);
  left: 0;
  transform: translateX(calc(var(--active-index, 0) * 100%));
}

@media (max-width: 849px) {
  .segmented-control--5,
  .segmented-control--6 {
    margin: 0 12px 2px;
    width: auto;
    max-width: none;
  }
}

/* Overlay the segmented control nav on mobile */
@media (max-width: 849px) {
  #smsFilterNav,
  #chatFilterNav,
  #callPanelNav,
  #favFilterNav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.55) 40%, rgba(255,255,255,0.8) 100%);
  }
  .dark #smsFilterNav,
  .dark #chatFilterNav,
  .dark #callPanelNav,
  .dark #favFilterNav {
    background: linear-gradient(to bottom, transparent 0%, rgba(31,41,55,0.55) 40%, rgba(31,41,55,0.8) 100%);
  }
  #conversationList {
    padding-bottom: 72px;
  }
  #favoritesList {
    padding-bottom: 72px;
  }
  #callPanelFavoritesList,
  #callPanelContactsList,
  #callHistoryList,
  #parkingLotsContainer,
  #voicemailList,
  #dialpadView {
    padding-bottom: 72px;
  }
}

/* Mobile: Bottom navigation sizing */
@media (max-width: 849px) {
  .call-nav-btn,
  .sms-nav-btn {
    height: 54px;
    padding: 0.25rem 0.75rem;
    gap: 0.125rem;
  }
  
  .call-nav-btn i,
  .sms-nav-btn i {
    font-size: 1rem;
  }
  
  .call-nav-btn .text-xs,
  .sms-nav-btn .text-xs {
    font-size: 0.75rem;
  }
  
  /* Bottom nav sizing for mobile */
  /* NOTE: Safe area padding now handled by safe-areas.css */
  #smsFilterNav,
  #chatFilterNav {
    flex-shrink: 0 !important;
  }
  
  #smsFilterNav,
  #chatFilterNav {
    padding-top: 6px;
    padding-bottom: 0;
  }
  
  /* Ensure parent containers don't clip the taller nav on mobile */
  #leftSidebarContent {
    overflow: visible;
  }
  
  #conversationsContainer,
  #callPanelContainer {
    overflow: visible;
  }
  
  #callPanelContentInner {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }
}

/* ====================================
   Touch-Friendly Call History (Mobile)
   ==================================== */
@media (pointer: coarse) {
  /* Date/section headers - larger tap targets */
  #callHistoryList > div:not(.call-history-group),
  #parkingLotsContainer > div > div:first-child {
    min-height: 48px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  /* Larger text in headers */
  #callHistoryList > div:not(.call-history-group) span.text-xs,
  #parkingLotsContainer > div > div:first-child span.text-xs {
    font-size: 13px;
  }
  
  /* Call history items - larger tap targets */
  .call-history-item {
    min-height: 64px;
    padding: 14px 12px 14px 16px !important;
  }
  
  /* Larger contact name text */
  .call-history-item .font-medium {
    font-size: 16px;
  }
  
  /* Larger secondary text */
  .call-history-item .text-xs {
    font-size: 13px;
  }
  
  /* Larger time text */
  .call-history-item .text-right .text-xs {
    font-size: 13px;
  }
  
  /* Call action buttons - larger for touch */
  .call-history-item .call-action-btn,
  .call-history-item button {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
  }
  
  /* Conversation list items - larger tap targets */
  #conversationsList > div,
  #internalConversationsList > div {
    min-height: 64px;
  }
  
  /* Larger conversation item padding */
  .conversation-item {
    padding: 12px 16px !important;
  }
  
  /* Parked call items - larger tap targets */
  .parked-call-item {
    min-height: 56px;
    padding: 12px 16px !important;
  }
  
  /* Header action buttons - larger tap targets (refresh, popout, close, etc.) */
  #callParkView .p-1\.5,
  #callHistoryView .p-1\.5,
  #refreshParkBtn,
  #popoutParkBtn,
  #closeParkViewBtn,
  #refreshHistoryBtn,
  #popoutHistoryBtn,
  #closeHistoryBtn {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Larger icons in header buttons */
  #callParkView .p-1\.5 i,
  #callHistoryView .p-1\.5 i,
  #refreshParkBtn i,
  #popoutParkBtn i,
  #closeParkViewBtn i,
  #refreshHistoryBtn i,
  #popoutHistoryBtn i,
  #closeHistoryBtn i {
    font-size: 18px !important;
  }
  
  /* Panel headers - more padding on mobile */
  #callParkView > div:first-child,
  #callHistoryView > div:first-child {
    padding: 12px 16px !important;
  }
  
  /* Tab buttons in call panel - larger tap targets */
  #callHistoryBtn,
  #callParkBtn {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }
  
  /* Hide popout buttons on touch devices - desktop only feature */
  #popoutParkBtn,
  #popoutHistoryBtn {
    display: none !important;
  }
  
  /* Hide inline action buttons on mobile - use ellipsis menu instead */
  .call-history-item .call-history-actions-inline {
    display: none !important;
  }
  
  /* Show ellipsis button on mobile - right aligned */
  .call-history-item .call-history-ellipsis {
    display: flex !important;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
  }
  
  .call-history-item .call-history-ellipsis i {
    font-size: 1.25rem;
  }
}

/* Call History Bottom Sheet Menu */
.call-history-bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.call-history-bottom-sheet.active {
  transform: translateY(0);
}

.dark .call-history-bottom-sheet {
  background: #1f2937;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

.call-history-bottom-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

.call-history-bottom-sheet-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.call-history-bottom-sheet-header {
  padding: 1.25rem 1rem 1rem;
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
}

.dark .call-history-bottom-sheet-header {
  border-bottom-color: #374151;
}

.call-history-bottom-sheet-name {
  font-weight: 600;
  font-size: 1.125rem;
  color: #111827;
  margin-bottom: 0.25rem;
}

.dark .call-history-bottom-sheet-name {
  color: #f9fafb;
}

.call-history-bottom-sheet-phone {
  font-size: 0.875rem;
  color: #6b7280;
}

.dark .call-history-bottom-sheet-phone {
  color: #9ca3af;
}

.call-history-bottom-sheet-actions {
  padding: 0.5rem 0;
}

.call-history-bottom-sheet-action {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: #111827;
  transition: background 0.15s ease;
}

.call-history-bottom-sheet-action:active {
  background: #f3f4f6;
}
@media (hover: hover) {
  .call-history-bottom-sheet-action:hover {
    background: #f3f4f6;
  }
}

.dark .call-history-bottom-sheet-action {
  color: #f9fafb;
}

.dark .call-history-bottom-sheet-action:active {
  background: #374151;
}
@media (hover: hover) {
  .dark .call-history-bottom-sheet-action:hover {
    background: #374151;
  }
}

.call-history-bottom-sheet-action i {
  width: 24px;
  text-align: center;
  font-size: 1.125rem;
}

.call-history-bottom-sheet-action.call-action i {
  color: #22c55e;
}

.call-history-bottom-sheet-action.sms-action i {
  color: #3b82f6;
}

.call-history-bottom-sheet-action.chat-action i {
  color: #f59e0b;
}

.call-history-bottom-sheet-action.details-action i {
  color: #8b5cf6;
}

.call-history-bottom-sheet-cancel {
  padding: 1rem;
  border-top: 1px solid #e5e7eb;
}

.dark .call-history-bottom-sheet-cancel {
  border-top-color: #374151;
}

.call-history-bottom-sheet-cancel button {
  width: 100%;
  padding: 0.875rem;
  background: #f3f4f6;
  border: none;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: #111827;
  cursor: pointer;
  transition: background 0.15s ease;
}

.call-history-bottom-sheet-cancel button:active {
  background: #e5e7eb;
}
@media (hover: hover) {
  .call-history-bottom-sheet-cancel button:hover {
    background: #e5e7eb;
  }
}

.dark .call-history-bottom-sheet-cancel button {
  background: #374151;
  color: #f9fafb;
}

.dark .call-history-bottom-sheet-cancel button:active {
  background: #4b5563;
}
@media (hover: hover) {
  .dark .call-history-bottom-sheet-cancel button:hover {
    background: #4b5563;
  }
}

/* Hide ellipsis on desktop, show inline actions */
@media (min-width: 850px) {
  .call-history-item .call-history-ellipsis {
    display: none !important;
  }
  
  .call-history-item .call-history-actions-inline {
    display: flex !important;
  }
}

/* ===== THREAD HEADER MOBILE BOTTOM SHEET ===== */

/* Mobile (<850px): hide inline buttons, show ellipsis menu trigger */
@media (max-width: 849px) {
  .thread-header #callBtn,
  .thread-header #pinBtn,
  .thread-header #muteBtn,
  .thread-header #contactPanelToggle {
    display: none !important;
  }
}

/* Mobile (<850px): style threadMenuBtn as a larger circular button */
@media (max-width: 849px) {
  .thread-header #threadMenuBtn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #f1f3f5;
  }

  .dark .thread-header #threadMenuBtn {
    background: #374151;
  }

  .thread-header #threadMenuBtn i {
    font-size: 1.25rem;
  }
}

/* Desktop (850px+): hide ellipsis menu trigger, show inline buttons */
@media (min-width: 850px) {
  .thread-header #threadMenuBtn {
    display: none !important;
  }
}

/* Thread Bottom Sheet */
.thread-bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.thread-bottom-sheet.active {
  transform: translateY(0);
}

.dark .thread-bottom-sheet {
  background: #1f2937;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

.thread-bottom-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

.thread-bottom-sheet-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.thread-bottom-sheet-header {
  padding: 1.25rem 1rem 1rem;
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
}

.dark .thread-bottom-sheet-header {
  border-bottom-color: #374151;
}

.thread-bottom-sheet-name {
  font-weight: 600;
  font-size: 1.125rem;
  color: #111827;
}

.dark .thread-bottom-sheet-name {
  color: #f9fafb;
}

.thread-bottom-sheet-actions {
  padding: 0.5rem 0;
}

.thread-bottom-sheet-action {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: #111827;
  transition: background 0.15s ease;
}

.thread-bottom-sheet-action:active {
  background: #f3f4f6;
}
@media (hover: hover) {
  .thread-bottom-sheet-action:hover {
    background: #f3f4f6;
  }
}

.dark .thread-bottom-sheet-action {
  color: #f9fafb;
}

.dark .thread-bottom-sheet-action:active {
  background: #374151;
}
@media (hover: hover) {
  .dark .thread-bottom-sheet-action:hover {
    background: #374151;
  }
}

.thread-bottom-sheet-action i {
  width: 24px;
  text-align: center;
  font-size: 1.125rem;
}

.thread-bottom-sheet-action.call-action i {
  color: #22c55e;
}

.thread-bottom-sheet-action.favorite-action i {
  color: #eab308;
}

.thread-bottom-sheet-action.mute-action i {
  color: #3b82f6;
}

.thread-bottom-sheet-action.info-action i {
  color: #8b5cf6;
}

.thread-bottom-sheet-cancel {
  padding: 1rem;
  border-top: 1px solid #e5e7eb;
}

.dark .thread-bottom-sheet-cancel {
  border-top-color: #374151;
}

.thread-bottom-sheet-cancel button {
  width: 100%;
  padding: 0.875rem;
  background: #f3f4f6;
  border: none;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: #111827;
  cursor: pointer;
  transition: background 0.15s ease;
}

.thread-bottom-sheet-cancel button:active {
  background: #e5e7eb;
}
@media (hover: hover) {
  .thread-bottom-sheet-cancel button:hover {
    background: #e5e7eb;
  }
}

.dark .thread-bottom-sheet-cancel button {
  background: #374151;
  color: #f9fafb;
}

.dark .thread-bottom-sheet-cancel button:active {
  background: #4b5563;
}
@media (hover: hover) {
  .dark .thread-bottom-sheet-cancel button:hover {
    background: #4b5563;
  }
}

/* Compose Menu Bottom Sheet (Mobile) - same pattern as thread bottom sheet */
.compose-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}
.compose-sheet-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.compose-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  visibility: hidden;
  pointer-events: none;
}
.compose-sheet.active {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}
.dark .compose-sheet {
  background: #1f2937;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}
.compose-sheet-header {
  padding: 1.25rem 1rem 1rem;
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
}
.dark .compose-sheet-header {
  border-bottom-color: #374151;
}
.compose-sheet-title {
  font-weight: 600;
  font-size: 1.125rem;
  color: #111827;
}
.dark .compose-sheet-title {
  color: #f9fafb;
}
.compose-sheet-actions {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
  gap: 2px;
}
.compose-sheet-action {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  width: 100%;
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: #111827;
  transition: background 0.15s ease;
  text-align: left;
}
.compose-sheet-action:active {
  background: #f3f4f6;
}
@media (hover: hover) {
  .compose-sheet-action:hover {
    background: #f3f4f6;
  }
}
.dark .compose-sheet-action {
  color: #f9fafb;
}
.dark .compose-sheet-action:active {
  background: #374151;
}
@media (hover: hover) {
  .dark .compose-sheet-action:hover {
    background: #374151;
  }
}
.compose-sheet-action i {
  width: 24px;
  flex-shrink: 0;
  text-align: center;
}
.compose-sheet-action.attach-action i {
  color: #3b82f6;
}
.compose-sheet-action.emoji-action i {
  color: #eab308;
}
.compose-sheet-action.gif-action i {
  color: #8b5cf6;
}
.compose-sheet-cancel {
  padding: 1rem;
  border-top: 1px solid #e5e7eb;
}
.dark .compose-sheet-cancel {
  border-top-color: #374151;
}
.compose-sheet-cancel button {
  width: 100%;
  padding: 0.875rem;
  background: #f3f4f6;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.compose-sheet-cancel button:active {
  background: #e5e7eb;
}
@media (hover: hover) {
  .compose-sheet-cancel button:hover {
    background: #e5e7eb;
  }
}
.dark .compose-sheet-cancel button {
  background: #374151;
  color: #f9fafb;
}
.dark .compose-sheet-cancel button:active {
  background: #4b5563;
}
@media (hover: hover) {
  .dark .compose-sheet-cancel button:hover {
    background: #4b5563;
  }
}
/* Hide compose sheet on desktop - dropdown is used instead */
@media (min-width: 850px) {
  #composeSheetBackdrop,
  #composeSheet {
    display: none !important;
  }
}

/* ===== CONTACT DETAIL MOBILE BOTTOM SHEET ===== */

/* Desktop: inline actions visible, menu button hidden */
.contact-detail-actions {
  display: flex;
}

#contactDetailMenuBtn {
  display: none;
}

/* Mobile: hide inline actions, show ellipsis menu button */
@media (max-width: 849px) {
  .contact-detail-actions {
    display: none !important;
  }

  #contactDetailMenuBtn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: #f1f3f5;
    border-radius: 50%;
  }

  .dark #contactDetailMenuBtn {
    background: #374151;
  }

  #contactDetailMenuBtn i {
    font-size: 1.25rem;
  }
}

/* Bottom sheet container */
.cd-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.cd-sheet.active {
  transform: translateY(0);
}

.dark .cd-sheet {
  background: #1f2937;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

/* Backdrop overlay */
.cd-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

.cd-sheet-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* Header */
.cd-sheet-header {
  padding: 1.25rem 1rem 1rem;
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
}

.dark .cd-sheet-header {
  border-bottom-color: #374151;
}

.cd-sheet-name {
  font-weight: 600;
  font-size: 1.125rem;
  color: #111827;
}

.dark .cd-sheet-name {
  color: #f9fafb;
}

/* Action rows */
.cd-sheet-actions {
  padding: 0.5rem 0;
}

.cd-sheet-action {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: #111827;
  transition: background 0.15s ease;
}

.cd-sheet-action:active {
  background: #f3f4f6;
}
@media (hover: hover) {
  .cd-sheet-action:hover {
    background: #f3f4f6;
  }
}

.dark .cd-sheet-action {
  color: #f9fafb;
}

.dark .cd-sheet-action:active {
  background: #374151;
}
@media (hover: hover) {
  .dark .cd-sheet-action:hover {
    background: #374151;
  }
}

.cd-sheet-action i {
  width: 24px;
  text-align: center;
  font-size: 1.125rem;
}

.cd-sheet-action.call-action i { color: #22c55e; }
.cd-sheet-action.sms-action i { color: #3b82f6; }
.cd-sheet-action.chat-action i { color: #6366f1; }
.cd-sheet-action.profile-action i { color: #8b5cf6; }
.cd-sheet-action.favorite-action i { color: #eab308; }
.cd-sheet-action.edit-action i { color: #6b7280; }
.cd-sheet-action.delete-action i { color: #ef4444; }

/* Phone number sub-options (indented, smaller) */
.cd-sheet-suboption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem 0.75rem 3.5rem;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  color: #374151;
  transition: background 0.15s ease;
}

.cd-sheet-suboption:active {
  background: #f3f4f6;
}
@media (hover: hover) {
  .cd-sheet-suboption:hover {
    background: #f3f4f6;
  }
}

.dark .cd-sheet-suboption {
  color: #d1d5db;
}

.dark .cd-sheet-suboption:active {
  background: #374151;
}
@media (hover: hover) {
  .dark .cd-sheet-suboption:hover {
    background: #374151;
  }
}

.cd-sheet-suboption .cd-sub-number {
  font-weight: 500;
}

.cd-sheet-suboption .cd-sub-sources {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.5rem;
}

/* Cancel button */
.cd-sheet-cancel {
  padding: 1rem;
  border-top: 1px solid #e5e7eb;
}

.dark .cd-sheet-cancel {
  border-top-color: #374151;
}

.cd-sheet-cancel button {
  width: 100%;
  padding: 0.875rem;
  background: #f3f4f6;
  border: none;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: #111827;
  cursor: pointer;
  transition: background 0.15s ease;
}

.cd-sheet-cancel button:active {
  background: #e5e7eb;
}
@media (hover: hover) {
  .cd-sheet-cancel button:hover {
    background: #e5e7eb;
  }
}

.dark .cd-sheet-cancel button {
  background: #374151;
  color: #f9fafb;
}

.dark .cd-sheet-cancel button:active {
  background: #4b5563;
}
@media (hover: hover) {
  .dark .cd-sheet-cancel button:hover {
    background: #4b5563;
  }
}

/* ===== ADDRESS BOOK MOBILE BOTTOM SHEET ===== */

/* Drag handle — hidden on desktop */
.ab-drag-handle {
  display: none;
}

/* Mobile cancel button — hidden on desktop */
.ab-mobile-cancel {
  display: none;
}

@media (max-width: 849px) {
  /* Convert modal overlay to bottom-aligned */
  #addressBookModal {
    top: 0 !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }

  /* Sheet content: full-width bottom sheet */
  #addressBookModal > .ab-sheet-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 1rem 1rem 0 0 !important;
    max-height: 85vh;
    max-height: 85dvh;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
  }

  #addressBookModal.ab-sheet-open > .ab-sheet-content {
    transform: translateY(0);
  }

  .dark #addressBookModal > .ab-sheet-content {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
  }

  /* Drag handle */
  .ab-drag-handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
    flex-shrink: 0;
  }

  .ab-drag-bar {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #d1d5db;
  }

  .dark .ab-drag-bar {
    background: #4b5563;
  }

  /* Hide desktop footer (select+confirm) on mobile */
  .ab-footer {
    display: none !important;
  }

  /* Show mobile cancel button */
  .ab-mobile-cancel {
    display: block;
    padding: 1rem;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
  }

  .dark .ab-mobile-cancel {
    border-top-color: #374151;
  }

  .ab-mobile-cancel button {
    width: 100%;
    padding: 0.875rem;
    background: #f3f4f6;
    border: none;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 500;
    color: #111827;
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .ab-mobile-cancel button:active {
    background: #e5e7eb;
  }

  .dark .ab-mobile-cancel button {
    background: #374151;
    color: #f9fafb;
  }

  .dark .ab-mobile-cancel button:active {
    background: #4b5563;
  }

  /* Larger touch targets on contact cards */
  .address-book-user-card {
    min-height: 56px;
    padding: 0.875rem !important;
  }
}

/* ===== PRESENCE MOBILE BOTTOM SHEET ===== */

/* Panel always starts translated off-screen; transition to 0 when open */
.presence-sheet-panel {
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.presence-sheet-panel.presence-sheet-open {
  transform: translateY(0);
}

/* Only activate on mobile */
@media (min-width: 850px) {
  #presenceMobileSheet {
    display: none !important;
  }
}

/* ===== USER PROFILE MODAL MOBILE BOTTOM SHEET ===== */

.up-drag-handle { display: none; }

@media (max-width: 849px) {
  #userProfileModal {
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }
  #userProfileModal > .up-sheet-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 1rem 1rem 0 0 !important;
    max-height: 90vh;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
  }
  #userProfileModal.up-sheet-open > .up-sheet-content {
    transform: translateY(0);
  }
  .dark #userProfileModal > .up-sheet-content {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
  }
  .up-drag-handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
    flex-shrink: 0;
  }
  .up-drag-bar {
    width: 40px; height: 4px; border-radius: 2px; background: #d1d5db;
  }
  .dark .up-drag-bar { background: #4b5563; }
}

/* ===== CUSTOM STATUS MODAL MOBILE BOTTOM SHEET ===== */

.cs-drag-handle { display: none; }

@media (max-width: 849px) {
  #customStatusModal {
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }
  #customStatusModal > .cs-sheet-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 1rem 1rem 0 0 !important;
    max-height: 90vh;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
  }
  #customStatusModal.cs-sheet-open > .cs-sheet-content {
    transform: translateY(0);
  }
  .dark #customStatusModal > .cs-sheet-content {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
  }
  .cs-drag-handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
    flex-shrink: 0;
  }
  .cs-drag-bar {
    width: 40px; height: 4px; border-radius: 2px; background: #d1d5db;
  }
  .dark .cs-drag-bar { background: #4b5563; }
}

/* ===== TRANSFER CALL MODAL MOBILE BOTTOM SHEET ===== */

.tf-drag-handle { display: none; }

@media (max-width: 849px) {
  #transferCallModal {
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }
  #transferCallModal > .tf-sheet-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 1rem 1rem 0 0 !important;
    max-height: 90vh;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
  }
  #transferCallModal.tf-sheet-open > .tf-sheet-content {
    transform: translateY(0);
  }
  .dark #transferCallModal > .tf-sheet-content {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
  }
  .tf-drag-handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
    flex-shrink: 0;
  }
  .tf-drag-bar {
    width: 40px; height: 4px; border-radius: 2px; background: #d1d5db;
  }
  .dark .tf-drag-bar { background: #4b5563; }
}

/* ===== AUDIO SETTINGS MODAL / MOBILE BOTTOM SHEET ===== */

.as-drag-handle { display: none; }

.audio-device-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid #e9ecef;
}
.audio-device-item:last-child { border-bottom: none; }

@media (hover: hover) {
  .audio-device-item:hover {
    background: #f1f3f5;
  }
  .dark .audio-device-item:hover {
    background: #374151;
  }
}

.audio-device-item.active {
  background: #eff6ff;
}
.dark .audio-device-item.active {
  background: #1e3a5f;
}

.audio-device-item .audio-device-label {
  font-size: 0.875rem;
  color: #374151;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dark .audio-device-item .audio-device-label {
  color: #d1d5db;
}

.audio-device-item .audio-device-check {
  color: #2563eb;
  font-size: 0.875rem;
  margin-left: 8px;
  flex-shrink: 0;
  visibility: hidden;
}
.audio-device-item.active .audio-device-check {
  visibility: visible;
}

@media (max-width: 849px) {
  #audioSettingsModal {
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }
  #audioSettingsModal > .as-sheet-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 1rem 1rem 0 0 !important;
    max-height: 90vh;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
  }
  #audioSettingsModal.as-sheet-open > .as-sheet-content {
    transform: translateY(0);
  }
  .dark #audioSettingsModal > .as-sheet-content {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
  }
  .as-drag-handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
    flex-shrink: 0;
  }
  .as-drag-bar {
    width: 40px; height: 4px; border-radius: 2px; background: #d1d5db;
  }
  .dark .as-drag-bar { background: #4b5563; }
}

/* ===== DUPLICATE REVIEW MODAL MOBILE BOTTOM SHEET ===== */

.dr-drag-handle { display: none; }

@media (max-width: 849px) {
  #duplicateReviewModal {
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }
  #duplicateReviewModal > .dr-sheet-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 1rem 1rem 0 0 !important;
    max-height: 90vh;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
  }
  #duplicateReviewModal.dr-sheet-open > .dr-sheet-content {
    transform: translateY(0);
  }
  .dark #duplicateReviewModal > .dr-sheet-content {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
  }
  .dr-drag-handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
    flex-shrink: 0;
  }
  .dr-drag-bar {
    width: 40px; height: 4px; border-radius: 2px; background: #d1d5db;
  }
  .dark .dr-drag-bar { background: #4b5563; }
}

/* ===== CONTACT MODAL MOBILE BOTTOM SHEET ===== */

.cm-drag-handle { display: none; }

@media (max-width: 849px) {
  #contactModal {
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }
  #contactModal > .cm-sheet-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 1rem 1rem 0 0 !important;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
  }
  #contactModal.cm-sheet-open > .cm-sheet-content {
    transform: translateY(0);
  }
  .dark #contactModal > .cm-sheet-content {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
  }
  .cm-drag-handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
    flex-shrink: 0;
  }
  .cm-drag-bar {
    width: 40px; height: 4px; border-radius: 2px; background: #d1d5db;
  }
  .dark .cm-drag-bar { background: #4b5563; }
}

/* ===== IMPORT CONTACTS MODAL MOBILE BOTTOM SHEET ===== */

.im-drag-handle { display: none; }

@media (max-width: 849px) {
  #importContactsModal {
    align-items: flex-end !important;
    justify-content: flex-end !important;
    padding: 0 !important;
  }
  #importContactsModal > .im-sheet-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 1rem 1rem 0 0 !important;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
  }
  #importContactsModal.im-sheet-open > .im-sheet-content {
    transform: translateY(0);
  }
  .dark #importContactsModal > .im-sheet-content {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
  }
  .im-drag-handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
    flex-shrink: 0;
  }
  .im-drag-bar {
    width: 40px; height: 4px; border-radius: 2px; background: #d1d5db;
  }
  .dark .im-drag-bar { background: #4b5563; }
}

/* ===== NEW MESSAGE MOBILE BOTTOM SHEET ===== */

.nm-drag-handle {
  display: none;
}

@media (max-width: 849px) {
  #newMessageModal {
    top: 0 !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }

  #newMessageModal > .nm-sheet-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 1rem 1rem 0 0 !important;
    max-height: 85vh;
    max-height: 85dvh;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
  }

  #newMessageModal.nm-sheet-open > .nm-sheet-content {
    transform: translateY(0);
  }

  .dark #newMessageModal > .nm-sheet-content {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
  }

  .nm-drag-handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
    flex-shrink: 0;
  }

  .nm-drag-bar {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #d1d5db;
  }

  .dark .nm-drag-bar {
    background: #4b5563;
  }
}

/* ===== CREATE GROUP MOBILE BOTTOM SHEET ===== */

.cg-drag-handle {
  display: none;
}

@media (max-width: 849px) {
  #createGroupModal {
    top: 0 !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }

  #createGroupModal > .cg-sheet-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 1rem 1rem 0 0 !important;
    max-height: 85vh;
    max-height: 85dvh;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
  }

  #createGroupModal.cg-sheet-open > .cg-sheet-content {
    transform: translateY(0);
  }

  .dark #createGroupModal > .cg-sheet-content {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
  }

  .cg-drag-handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
    flex-shrink: 0;
  }

  .cg-drag-bar {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #d1d5db;
  }

  .dark .cg-drag-bar {
    background: #4b5563;
  }
}

/* SMS Nav Badge (Count Overlay) */
/* Use inline-flex centering so the digit is perfectly centered regardless of
   font metrics / box-sizing. The old `line-height: 16px` + `text-align: center`
   combo rendered "2" slightly off-center inside the 16×16 pill. */
.sms-nav-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: #fff;
  background: #ef4444;
  border-radius: 9999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.sms-nav-badge.hidden {
  display: none;
}

/* Active Call Controls */
.call-control-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: #f1f3f5;
  border: 1px solid #e9ecef;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
}

.call-control-btn i {
  font-size: 1.5rem;
}

.call-control-btn span {
  font-size: 0.75rem;
  font-weight: 500;
}

@media (hover: hover) {
  .call-control-btn:hover {
    background: #e9ecef;
    transform: translateY(-2px);
  }
}

.call-control-btn.active {
  background: #2563eb;
  color: white;
  border-color: #2563eb;
}

.call-control-btn.danger {
  background: #dc2626;
  color: white;
  border-color: #dc2626;
}

@media (hover: hover) {
  .call-control-btn.danger:hover {
    background: #b91c1c;
  }
}

.dark .call-control-btn {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

@media (hover: hover) {
  .dark .call-control-btn:hover {
    background: #4b5563;
  }
}

.dark .call-control-btn.active {
  background: #2563eb;
  border-color: #2563eb;
}

/* Call History Item */
.call-history-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .call-history-item:hover {
    background: #f1f3f5;
  }
  .call-panel-contact-card:hover {
    background: #f1f3f5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

@media (hover: hover) and (pointer: fine) {
  .dark .call-history-item:hover {
    background: #374151;
  }
  .dark .call-panel-contact-card:hover {
    background: #374151;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}

.call-history-item .call-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 1rem;
  flex-shrink: 0;
}

.call-history-item .call-icon.outbound {
  background: #dcfce7;
  color: #16a34a;
}

.call-history-item .call-icon.inbound {
  background: #dbeafe;
  color: #2563eb;
}

.call-history-item .call-icon.missed {
  background: #fee2e2;
  color: #dc2626;
}

.dark .call-history-item .call-icon.outbound {
  background: #14532d;
  color: #86efac;
}

.dark .call-history-item .call-icon.inbound {
  background: #1e3a8a;
  color: #93c5fd;
}

.dark .call-history-item .call-icon.missed {
  background: #7f1d1d;
  color: #fca5a5;
}

/* Call Panel Contact Cards */
.call-panel-contact-card {
  position: relative;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.call-panel-contact-card .contact-info-trigger {
  cursor: pointer;
  overflow: hidden;
  height: 55px;
}

@media (hover: hover) {
  .call-panel-contact-card .contact-info-trigger:hover .font-medium {
    color: #2563eb;
  }
}

@media (hover: hover) {
  .dark .call-panel-contact-card .contact-info-trigger:hover .font-medium {
    color: #60a5fa;
  }
}

.call-contact-btn,
.contact-chat-btn,
.contact-profile-btn,
.teams-profile-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-profile-btn,
.dark .contact-profile-btn {
  background-color: #f77f00 !important;
}

@media (hover: hover) {
  .contact-profile-btn:hover,
  .dark .contact-profile-btn:hover {
    background-color: #d96e00 !important;
  }
}

.call-contact-btn:active,
.contact-chat-btn:active,
.contact-profile-btn:active,
.teams-call-btn:active {
  transform: scale(0.95);
}

/* Teams native call button */
.teams-call-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Transfer buttons in directory cards */
.transfer-buttons-inline button,
.transfer-overflow-menu .transfer-menu-trigger {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.transfer-buttons-inline button:active,
.transfer-overflow-menu .transfer-menu-trigger:active {
  transform: scale(0.95);
}

/* Mobile: Larger touch targets for call panel buttons */
@media (max-width: 849px) {
  .call-panel-contact-card {
    padding: 1rem;
    min-height: 80px;
  }
  
  .call-panel-contact-card .w-10 {
    width: 48px !important;
    height: 48px !important;
  }
  
  /* Ensure presence indicator scales with avatar on mobile */
  
  .call-contact-btn,
  .contact-chat-btn,
  .contact-profile-btn,
  .teams-profile-btn,
  .teams-call-btn,
  .transfer-overflow-menu .transfer-menu-trigger,
  .transfer-buttons-inline button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  
  .call-contact-btn i,
  .contact-chat-btn i,
  .contact-profile-btn i,
  .teams-profile-btn i,
  .teams-call-btn i,
  .transfer-overflow-menu .transfer-menu-trigger i,
  .transfer-buttons-inline button i {
    font-size: 1rem !important;
  }
  
  /* Active Call Info Section - Mobile: Match desktop layout exactly */
  .active-call-info-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  
  .active-call-info-section > .flex {
    justify-content: center !important;
  }
  
  .active-call-avatar-wrapper {
    flex-shrink: 0;
    margin-bottom: 0 !important;
  }
  
  .active-call-avatar-wrapper > div {
    width: 96px !important; /* Increased from 56px - same as desktop w-24 */
    height: 96px !important; /* Increased from 56px - same as desktop h-24 */
    font-size: 2rem !important; /* Increased from 1.25rem - larger text in avatar */
  }
  
  .active-call-details {
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
    text-align: left !important;
  }
  
  .active-call-details #activeCallName {
    font-size: 1.5rem !important; /* Increased from 1rem - larger name on mobile */
    margin-bottom: 0.125rem !important;
  }
  
  .active-call-details #activeCallNumber {
    font-size: 1rem !important; /* Increased from 0.75rem - larger phone number */
    margin-bottom: 0.125rem !important;
  }
  
  .active-call-details .active-call-status-text {
    font-size: 1rem !important; /* Increased from 0.75rem - larger status text */
  }
  
  .active-call-timer-wrapper {
    margin-top: 0 !important;
    text-align: center !important;
  }
  
  .active-call-timer-wrapper #callTimer {
    font-size: 1.5rem !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  
  /* Reduce spacing in active call view on mobile */
  #activeCallView {
    padding: 0.75rem !important;
    gap: 0.75rem !important;
  }
  
  #activeCallView.space-y-6 > * + * {
    margin-top: 0.75rem !important;
  }
}

/* Ensure callPanelContentInner is a flex column so header + call view stack correctly */
#callPanelContentInner {
  position: relative !important;
}

/* Active call view fills remaining space below the header row */
#activeCallView:not(.hidden) {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important;
}

/* Hide dialpad when active call view is visible */
#callPanelContentInner:has(#activeCallView:not(.hidden)) #dialpadView {
  display: none !important;
}

/* Default: Show inline buttons, hide overflow menu */
.transfer-buttons-inline {
  display: flex;
}

.transfer-overflow-menu {
  display: none;
}

/* Small screens (540px and below): Hide inline buttons, show overflow menu */
@media (max-width: 540px) {
  .transfer-buttons-inline {
    display: none;
  }
  
  .transfer-overflow-menu {
    display: block;
  }
}

/* Transfer menu dropdown styling */
.transfer-menu-dropdown {
  animation: fadeIn 0.15s ease-out;
}

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

/* ============================================================================
   ACTIVE CALL VIEW - Phase 1: Foundation CSS
   Added: Dec 5, 2024
   Purpose: Styles for tabbed active call interface
   ============================================================================ */

/* Call Center View Container (center panel with tabs) */
/* Note: Different from sidebar's #activeCallView */
#callCenterView {
  /* Will be shown/hidden via .hidden class */
  display: flex;
  flex-direction: column;
}

/* Call Tabs */
#activeCallTabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}

#activeCallTabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.call-tab {
  flex: 1;
  min-width: 80px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

@media (hover: hover) {
  .call-tab:hover {
    background: #f1f3f5;
    color: #374151;
  }
}

@media (hover: hover) {
  .dark .call-tab:hover {
    background: #374151;
    color: #9ca3af;
  }
}

.call-tab.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
  font-weight: 600;
}

.dark .call-tab.active {
  color: #60a5fa;
  border-bottom-color: #60a5fa;
}

/* ============================================================================
   PHASE 5: Active Call Banner Styles
   ============================================================================ */

/* Banner minimized state */
.banner-minimized {
  padding: 8px 16px !important;
}

.banner-minimized > div > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.banner-minimized button span {
  display: none;
}

.banner-minimized #bannerCallContact,
.banner-minimized .mx-1 {
  display: none;
}

/* Pulsing animation for call indicator */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Tab Content */
#activeCallContent {
  position: relative;
}

.tab-pane {
  display: none;
  padding: 24px;
  height: 100%;
  overflow-y: auto;
}

.tab-pane.active {
  display: block;
}

/* ===== M365 Tab Styles ===== */
#m365TabPane {
  padding: 0;
}

#m365TabPane .p-4 {
  padding: 16px;
}

.m365-email-item,
.m365-meeting-item {
  transition: background-color 150ms ease;
}

@media (hover: hover) {
  .m365-email-item:hover,
  .m365-meeting-item:hover {
    background-color: rgba(59, 130, 246, 0.05);
  }
}

@media (hover: hover) {
  .dark .m365-email-item:hover,
  .dark .m365-meeting-item:hover {
    background-color: rgba(59, 130, 246, 0.1);
  }
}

/* Line clamp for email preview */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* M365 Tab icon in tab bar */
.call-tab[data-tab="m365"] i {
  color: #0078D4; /* Microsoft blue */
}

.call-tab[data-tab="m365"].active i {
  color: #0078D4;
}

/* Call Banner (shown when viewing conversations during call) */
.call-banner {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  padding: 12px 24px;
  border-bottom: 1px solid #047857;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.call-banner-info {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.call-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.call-banner button {
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

@media (hover: hover) {
  .call-banner button:hover {
    transform: translateY(-1px);
  }
}

/* Mobile: Sticky call banner */
@media (max-width: 849px) {
  .call-banner {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 8px 12px;
  }
  
  .call-banner-info {
    gap: 8px;
    font-size: 13px;
  }
  
  .call-banner button {
    padding: 4px 8px;
    font-size: 12px;
  }
}

/* ============================================================================
   ENHANCED CALL BANNER (Option 1)
   ============================================================================ */

.call-banner-enhanced {
  position: relative;
  background: linear-gradient(90deg, #10B981, #059669);
  border-radius: 12px;
  margin: 12px 12px 0 12px;
  padding: 12px 20px;
  box-shadow: 
    0 4px 12px rgba(16, 185, 129, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* First banner gets top margin, last gets bottom margin */
.call-banners-container > .call-banner-enhanced:first-child {
  margin-top: 12px;
}

.call-banners-container > .call-banner-enhanced:last-child {
  margin-bottom: 12px;
}

/* All middle banners have gap via container */
.call-banners-container > .call-banner-enhanced:not(:last-child) {
  margin-bottom: 4px;
}

@media (hover: hover) {
  .call-banner-enhanced:hover {
    box-shadow: 
      0 6px 20px rgba(16, 185, 129, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
  }
}

/* Top highlight line */
.banner-highlight {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  opacity: 0.6;
}

/* Main content container */
.banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* ===== LEFT ZONE: Call Info ===== */
.call-info-zone {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  padding-left: 12px;
  padding-right: 12px;
}

.call-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pulse-dot {
  width: 12px;
  height: 12px;
  background: var(--bg-primary, #ffffff);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
  }
}

.call-status-text {
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.contact-avatar {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  transition: all 200ms;
  flex-shrink: 0;
}

@media (hover: hover) {
  .call-banner-enhanced:hover .contact-avatar {
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.6);
  }
}

.call-contact-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.contact-name {
  color: #ffffff;
  font-size: clamp(13px, 2.5vw, 18px);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  flex-shrink: 1;
}

.contact-details {
  color: #D1FAE5;
  font-size: clamp(11px, 1.8vw, 14px);
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
}

.contact-extra {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 300ms ease-in-out;
}

@media (hover: hover) {
  .call-banner-enhanced:hover .contact-extra {
    opacity: 1;
    max-height: 20px;
  }
}

/* ===== Banner Enrichment Indicators (M365 context) ===== */
.banner-enrichment-indicators {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.enrichment-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  cursor: pointer;
  transition: all 200ms ease;
}

@media (hover: hover) {
  .enrichment-indicator:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
  }
}

.enrichment-indicator i {
  font-size: 11px;
  opacity: 0.9;
}

.enrichment-indicator.has-upcoming {
  background: rgba(139, 92, 246, 0.3);
  border: 1px solid rgba(139, 92, 246, 0.5);
}

.enrichment-indicator.has-upcoming i {
  color: #C4B5FD;
}

/* Hide enrichment on small screens */
@media (max-width: 1199px) {
  .banner-enrichment-indicators {
    display: none;
  }
}

/* ===== Timer (now in right zone) ===== */
.call-timer-zone {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  flex-shrink: 0;
}

.timer-icon {
  color: #ffffff;
  font-size: 14px;
}

.timer-display {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Courier New', Consolas, monospace;
  letter-spacing: 0.5px;
  min-width: 60px;
  text-align: center;
}

/* ===== RIGHT ZONE: Actions ===== */
.call-actions-zone {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.quick-actions {
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateX(20px);
  transition: all 300ms ease-in-out;
}

@media (hover: hover) {
  .call-banner-enhanced:hover .quick-actions {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Always show quick actions on screens < 1400px (no hover needed) */
@media (max-width: 1400px) {
  .quick-actions {
    opacity: 1;
    transform: translateX(0);
  }
}

.quick-action-btn {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (hover: hover) {
  .quick-action-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
}

.quick-action-btn:active {
  transform: translateY(0);
}

.quick-action-btn.btn-danger {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.3);
}

@media (hover: hover) {
  .quick-action-btn.btn-danger:hover {
    background: rgba(239, 68, 68, 0.35);
    border-color: rgba(239, 68, 68, 0.5);
  }
}

.back-to-call-btn {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 200ms;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

.back-to-call-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 400ms, height 400ms;
}

@media (hover: hover) {
  .back-to-call-btn:hover::before {
    width: 300px;
    height: 300px;
  }
}

@media (hover: hover) {
  .back-to-call-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
}

.back-to-call-btn:active {
  transform: scale(0.98);
}

.back-to-call-btn .btn-icon,
.back-to-call-btn .btn-text {
  position: relative;
  z-index: 1;
}


/* ============================================================================
   MULTI-CALL BANNERS - Container & States
   ============================================================================ */

.call-banners-container {
  /* In-flow flex positioning: banner pushes #messageArea down when present.
     Original BUG-842 / BUG-907 fix used `position: absolute; top: 0;` to
     overlay the top of #messageArea, eliminating Cumulative Layout Shift
     (CLS 0.108) when banners appeared/disappeared. That fix was reverted
     2026-05-06 because the overlay hides the top of the message thread
     when a call is active, which is worse UX than a single shift on
     mount/unmount — and CLS isn't a meaningful metric for an
     authenticated app where users are not bouncing on first paint.
     If CLS becomes a concern again, alternative is to reserve the banner
     slot permanently when in a call session rather than per-banner. */
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: none;
  overflow-y: visible;
  overflow-x: hidden;
  scrollbar-width: thin;
  padding: 0;
  margin: 0;
}

.call-banners-container::-webkit-scrollbar {
  width: 6px;
}

.call-banners-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

.call-banners-container::-webkit-scrollbar-thumb {
  background: rgba(16, 185, 129, 0.5);
  border-radius: 3px;
}

@media (hover: hover) {
  .call-banners-container::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.7);
  }
}

/* When the container is empty, hide it so it doesn't reserve a flex slot
   (the parent #centerContentArea is `display: flex flex-direction: column`,
   so an empty flex item with `flex-shrink-0` could otherwise contribute
   margin/gap above #messageArea even with no banner). The container's
   in-flow positioning means we don't need the previous pointer-events
   trick — clicks pass through naturally because the container has zero
   height when empty. */
.call-banners-container:empty {
  display: none;
}

/* Individual banner base styles inherit from .call-banner-enhanced */

/* ===== BANNER STATES ===== */

/* Active call - green gradient (default) */
.call-banner-enhanced.status-active {
  background: linear-gradient(90deg, #10B981, #059669);
  border-bottom: 1px solid rgba(5, 150, 105, 0.3);
}

/* On hold - amber/yellow gradient */
.call-banner-enhanced.status-hold {
  background: linear-gradient(90deg, #F59E0B, #D97706);
  opacity: 0.95;
  min-height: 48px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(217, 119, 6, 0.3);
}

/* Hide less critical elements on hold banners */
.call-banner-enhanced.status-hold .quick-actions,
.call-banner-enhanced.status-hold .call-indicator {
  display: none !important;
}

/* Hide "LIVE CALL" text on hold banner */
.call-banner-enhanced.status-hold .call-status-text {
  display: none;
}

/* Show "ON HOLD" badge instead */
.call-banner-enhanced.status-hold .contact-avatar::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid rgba(245, 158, 11, 0.5);
  border-radius: 50%;
}

/* Slightly smaller contact name on hold */
.call-banner-enhanced.status-hold .contact-name {
  font-size: clamp(13px, 2vw, 16px);
}

/* Keep extension visible on hold */
.call-banner-enhanced.status-hold .contact-details {
  display: flex;
}

/* Calling (outgoing) - blue gradient, subtle pulse */
.call-banner-enhanced.status-calling {
  background: linear-gradient(90deg, #3B82F6, #2563EB);
  border-bottom: 1px solid rgba(37, 99, 235, 0.3);
  animation: pulse-calling 2s ease-in-out infinite;
}

@keyframes pulse-calling {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.95;
  }
}

/* Incoming - blue gradient with stronger pulse */
.call-banner-enhanced.status-incoming {
  background: linear-gradient(90deg, #3B82F6, #2563EB);
  border-bottom: 1px solid rgba(37, 99, 235, 0.3);
  animation: pulse-incoming 2s ease-in-out infinite;
}

@keyframes pulse-incoming {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  }
  50% {
    opacity: 0.9;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
  }
}

/* Ending call - red gradient, fading out */
.call-banner-enhanced.status-ending {
  background: linear-gradient(90deg, #EF4444, #DC2626);
  opacity: 0.8;
  border-bottom: 1px solid rgba(220, 38, 38, 0.3);
}

/* Remote device call - teal gradient (desk phone, softphone, etc.) */
.call-banner-enhanced.status-remote-device {
  background: linear-gradient(90deg, #14B8A6, #0D9488);
  border-bottom: 1px solid rgba(13, 148, 136, 0.3);
}

@media (hover: hover) {
  .call-banner-enhanced.status-remote-device:hover {
    box-shadow: 
      0 6px 20px rgba(20, 184, 166, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.2);
  }
}

/* Remote device banner status text styling */
.call-banner-enhanced.status-remote-device .call-status {
  color: rgba(255, 255, 255, 0.9);
}

/* Remote device specific: show device icon */
.call-banner-enhanced.status-remote-device .device-icon {
  margin-right: 6px;
  opacity: 0.9;
  color: #fff;
}

/* Ensure icon color in dark mode too */
.dark .call-banner-enhanced.status-remote-device .device-icon {
  color: #fff;
}

/* Remote device banner: contact info should not stretch */
.call-banner-enhanced.status-remote-device .call-contact-info {
  flex: 0 1 auto;
}

.call-banner-enhanced.status-remote-device .contact-name,
.call-banner-enhanced.status-remote-device .contact-details {
  max-width: fit-content;
}

/* "Move Call" button styling */
.call-banner-enhanced.status-remote-device .btn-move-call {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
  transition: all 200ms;
  white-space: nowrap;
}

@media (hover: hover) {
  .call-banner-enhanced.status-remote-device .btn-move-call:hover {
    background-color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
  }
}

/* Mobile: Always show Move Call button for remote device banner */
@media (max-width: 849px) {
  .call-banner-enhanced.status-remote-device .quick-actions {
    display: flex !important;
  }
  
  /* Hide Details button on mobile, only show Move Call */
  .call-banner-enhanced.status-remote-device .btn-view-details {
    display: none;
  }
  
  /* Compact Move Call button for mobile */
  .call-banner-enhanced.status-remote-device .btn-move-call {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  /* Show button text on mobile for Move Call (override generic hide) */
  .call-banner-enhanced.status-remote-device .btn-move-call span {
    display: inline !important;
  }
  
  /* Hide device name on mobile - saves space, Move Call button is the priority */
  .call-banner-enhanced.status-remote-device .call-status-text {
    display: none !important;
  }
}

/* ===== CLICK/HOVER INTERACTIONS ===== */

/* Make inactive banners clickable */
.call-banner-enhanced.status-hold,
.call-banner-enhanced.status-ringing {
  cursor: pointer;
  transition: all 200ms ease;
}

@media (hover: hover) {
  .call-banner-enhanced.status-hold:hover,
  .call-banner-enhanced.status-ringing:hover {
    opacity: 1;
    transform: translateX(4px);
  }
}

/* Active banner not clickable (it's already active) */
.call-banner-enhanced.status-active {
  cursor: default;
}

/* ===== RESPONSIVE: DESKTOP (Stacked Banners) ===== */
@media (min-width: 1200px) {
  .call-banners-container {
    /* Allow up to 4 active calls to show, then scroll */
    max-height: calc((52px * 4) + (4px * 3) + 20px);
    overflow-y: auto;
  }
  
  /* Active call gets full height */
  .call-banner-enhanced.status-active,
  .call-banner-enhanced.status-calling {
    min-height: 52px;
  }
  
  /* Held/incoming calls are slightly compact */
  .call-banner-enhanced.status-hold {
    min-height: 48px;
  }
  
  .call-banner-enhanced.status-incoming {
    min-height: 52px;
  }
}

/* ===== RESPONSIVE: TABLET (Accordion) ===== */
@media (max-width: 1199px) and (min-width: 850px) {
  .call-banners-container {
    max-height: 400px;
  }
  
  /* All banners start collapsed */
  .call-banner-enhanced {
    min-height: 40px;
    padding: 8px 16px;
  }
  
  /* Expanded banner (active) */
  .call-banner-enhanced.status-active {
    min-height: 48px;
  }
  
  /* Add expand/collapse indicators */
  .call-banner-enhanced.status-hold::before,
  .call-banner-enhanced.status-ringing::before {
    content: '►';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
  }
  
  .call-banner-enhanced.status-active::before {
    content: '▼';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
  }
  
  /* Shift content right for expand indicator */
  .call-banner-enhanced .banner-content {
    padding-left: 20px;
  }
}

/* ===== RESPONSIVE: MOBILE (Banners in Call Panel) ===== */
@media (max-width: 849px) {
  /* Hide center area banner container on mobile */
  .call-banners-container {
    display: none;
  }
  
  /* Mobile banner styles are defined near #mobileCallBannersContainer */
  
  /* Show tab navigation for calls (to be implemented) */
  .call-tabs-mobile {
    display: flex;
    gap: 8px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.1);
    overflow-x: auto;
  }
  
  .call-tab-mobile {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  
  .call-tab-mobile.active {
    background: rgba(255, 255, 255, 0.4);
  }
  
  .call-tab-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
  
  .call-tab-status-dot.active {
    background: #10B981;
  }
  
  .call-tab-status-dot.hold {
    background: #F59E0B;
  }
  
  .call-tab-status-dot.calling {
    background: #3B82F6;
  }
  
  .call-tab-status-dot.incoming {
    background: #3B82F6;
    animation: pulse 1s infinite;
  }
}

/* ===== RESPONSIVE DESIGN - HYBRID APPROACH ===== */

/* Large Desktop (>1400px) - Full experience: default styles apply, no overrides needed. */

/* Medium Desktop (1200px - 1400px) - Icon-only buttons */
@media (max-width: 1400px) and (min-width: 1200px) {
  .call-banner-enhanced {
    margin: 10px;
    padding: 10px 18px;
  }
  
  /* Make buttons icon-only (hide text) */
  .quick-action-btn span,
  .back-to-call-btn .btn-text {
    display: none;
  }
  
  .quick-action-btn {
    padding: 8px;
    min-width: 36px;
    justify-content: center;
  }
  
  .back-to-call-btn {
    padding: 8px 12px;
  }
  
  /* Keep timer visible but smaller */
  .call-timer-zone {
    padding: 6px 10px;
    gap: 6px;
  }
  
  .timer-display {
    font-size: 15px;
    min-width: 55px;
  }
  
  /* Dynamic font sizing for name */
  .contact-name {
    font-size: clamp(13px, 2.2vw, 17px);
    max-width: 280px;
  }
  
  .contact-details {
    font-size: clamp(11px, 1.6vw, 13px);
  }
}

/* Small Desktop / Large Tablet (900px - 1199px) - Minimal buttons */
@media (max-width: 1199px) and (min-width: 900px) {
  .call-banner-enhanced {
    margin: 8px;
    padding: 10px 16px;
  }
  
  /* Hide most quick action buttons, keep only critical ones */
  #bannerViewDetailsBtn,
  #bannerMuteBtn,
  #bannerHoldBtn {
    display: none;
  }
  
  /* Keep End Call and Back to Call */
  #bannerEndCallBtn {
    display: flex;
  }
  
  /* Icon-only buttons */
  .quick-action-btn span,
  .back-to-call-btn .btn-text {
    display: none;
  }
  
  .quick-action-btn,
  .back-to-call-btn {
    padding: 8px;
    min-width: 36px;
    justify-content: center;
  }
  
  /* Keep timer visible */
  .call-timer-zone {
    padding: 5px 10px;
    gap: 5px;
  }
  
  .timer-icon {
    font-size: 12px;
  }
  
  .timer-display {
    font-size: 14px;
    min-width: 50px;
  }
  
  /* Hide extension, show only name */
  .contact-details {
    display: none;
  }
  
  /* Dynamic font sizing for name - more aggressive shrinking */
  .contact-name {
    font-size: clamp(12px, 2vw, 16px);
    max-width: 220px;
  }
  
  /* Smaller avatar */
  .contact-avatar {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}

/* Tablet (768px - 899px) - Compact layout */
@media (max-width: 899px) and (min-width: 850px) {
  .call-banner-enhanced {
    margin: 6px;
    padding: 8px 12px;
  }
  
  /* Hide all quick actions except End Call */
  .quick-actions {
    opacity: 1;
    transform: translateX(0);
  }
  
  #bannerViewDetailsBtn,
  #bannerMuteBtn,
  #bannerHoldBtn {
    display: none;
  }
  
  #bannerEndCallBtn {
    display: flex;
  }
  
  /* Icon-only */
  .quick-action-btn span,
  .back-to-call-btn .btn-text {
    display: none;
  }
  
  .quick-action-btn,
  .back-to-call-btn {
    padding: 7px;
    min-width: 32px;
  }
  
  /* Compact timer */
  .call-timer-zone {
    padding: 4px 8px;
    gap: 4px;
  }
  
  .timer-icon {
    font-size: 11px;
  }
  
  .timer-display {
    font-size: 13px;
    min-width: 45px;
  }
  
  /* Hide extra info */
  .contact-details,
  .call-indicator .call-status-text {
    display: none;
  }
  
  .call-indicator {
    min-width: auto;
  }
  
  .pulse-dot {
    width: 10px;
    height: 10px;
  }
  
  .contact-avatar {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  
  /* Dynamic font sizing for tablet */
  .contact-name {
    font-size: clamp(12px, 1.8vw, 15px);
    max-width: 180px;
  }
  
  .call-info-zone {
    gap: 10px;
  }
}

/* Mobile (< 768px) - Minimal layout */
@media (max-width: 849px) {
  .call-banner-enhanced {
    margin: 0;
    border-radius: 0;
    padding: 8px 10px;
  }
  
  .banner-content {
    gap: 10px;
  }
  
  .call-info-zone {
    gap: 8px;
    min-width: 0;
    flex: 1;
  }
  
  /* Minimal indicator */
  .call-indicator {
    display: flex;
    align-items: center;
  }
  
  .pulse-dot {
    width: 8px;
    height: 8px;
  }
  
  .call-status-text {
    display: none;
  }
  
  .contact-avatar {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  /* Dynamic font sizing for mobile - most aggressive */
  .contact-name {
    font-size: clamp(11px, 3vw, 14px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(40vw, 180px);
    flex-shrink: 1;
  }
  
  .contact-details {
    display: none;
  }
  
  /* Hide all quick actions */
  .quick-actions {
    display: none;
  }
  
  /* Hide timer on mobile */
  .call-timer-zone {
    display: none;
  }
  
  /* Only show End Call and Back buttons */
  .back-to-call-btn .btn-text,
  .quick-action-btn span {
    display: none;
  }
  
  .back-to-call-btn {
    padding: 6px 10px;
    min-width: 32px;
  }
  
  .call-actions-zone {
    gap: 8px;
    flex-shrink: 0;
  }
}

/* Utility: Hidden class (if not already defined) */
.hidden {
  display: none !important;
}

/* ===== CONTACTS PAGE - DESKTOP LAYOUT ===== */
/* On desktop, contactsView should fill the center area (same as messageArea) */
#contactsView:not(.hidden) {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* When contacts is active on desktop, hide messageArea content */
body.contacts-active-desktop #messageArea {
  display: none !important;
}

/* Exception: Always show messageArea when settings is open */
body.settings-open #messageArea,
body.settings-open.contacts-active-desktop #messageArea,
body.settings-open.contacts-active-mobile #messageArea {
  display: flex !important;
}

/* Call banners container is now outside messageArea, always visible and in flow */
#callBannersContainer {
  flex-shrink: 0;
}

/* Mobile call banners container - hidden on desktop, shown at <768px via media query */
#mobileCallBannersContainer {
  display: none;
}

@media (max-width: 849px) {
  #mobileCallBannersContainer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    padding-left: 12px; /* Extra padding for pulse dot animation */
    background: transparent;
    overflow: visible; /* Allow pulse animation to extend */
  }
  
  #mobileCallBannersContainer:empty {
    display: none;
    padding: 0;
  }
  
  #mobileCallBannersContainer .call-banner-enhanced {
    margin: 0;
    border-radius: 8px;
    min-height: 44px;
    padding: 8px 12px;
    padding-left: 16px; /* Extra padding for pulse dot */
    overflow: visible; /* Allow pulse animation to extend */
  }
  
  #mobileCallBannersContainer .call-indicator {
    overflow: visible;
  }
  
  #mobileCallBannersContainer .pulse-dot {
    margin-left: 4px; /* Offset from edge */
  }
}

/* ===== CONTACTS PAGE - MOBILE RESPONSIVE (<768px) ===== */
@media (max-width: 849px) {
  /* General mobile override for contacts list panel - removes inline min-width constraint */
  #contactsListPanel {
    width: 100% !important;
    min-width: unset !important;
    max-width: 100% !important;
  }
  
  /* When contacts is active on mobile, use body class for control */
  body.contacts-active-mobile #conversationsSidebar {
    position: fixed !important;
    top: var(--header-height, 76px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    z-index: 40 !important;
    background: white;
  }
  
  /* Dark mode - .dark is on HTML element, not body */
  .dark body.contacts-active-mobile #conversationsSidebar {
    background: rgb(31 41 55) !important;
  }
  
  /* Hide the header nav buttons on mobile - use left nav drawer instead */
  /* Previously showed header, now hidden since we have left nav drawer */
  body.contacts-active-mobile #leftSidebarHeader {
    display: none !important;
  }
  
  body.contacts-active-mobile #conversationsContainer,
  body.contacts-active-mobile #callPanelContainer,
  body.contacts-active-mobile #leftSidebarContent {
    display: none !important;
  }
  
  /* Contacts view positioned below header (nav buttons now hidden, using left drawer) */
  body.contacts-active-mobile #contactsView:not(.hidden) {
    position: fixed !important;
    top: var(--header-height, 76px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100vh - var(--header-height, 76px)) !important;
    z-index: 35 !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #f8f9fa;
  }
  
  /* Dark mode background for contacts view */
  .dark body.contacts-active-mobile #contactsView:not(.hidden) {
    background-color: rgb(17 24 39) !important;
  }
  
  /* Dark mode for contacts header */
  .dark body.contacts-active-mobile #contactsView > div:first-child {
    background-color: rgb(31 41 55) !important;
  }
  
  /* Fix contacts header buttons being cut off on mobile */
  /* Override inline height style and ensure proper padding */
  body.contacts-active-mobile #contactsView > div:first-child {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Ensure the inner flex container has proper alignment and doesn't clip content */
  /* Make it full width so buttons can reach the right edge */
  body.contacts-active-mobile #contactsView > div:first-child > div.flex.items-center.justify-between {
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure the title doesn't take up too much space, allowing buttons to be on the right */
  body.contacts-active-mobile #contactsView > div:first-child > div.flex.items-center.justify-between > h2 {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    margin-right: 0.5rem !important;
  }
  
  /* Ensure buttons container has proper spacing and alignment - right aligned on mobile */
  body.contacts-active-mobile #contactsHeaderButtons {
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    justify-content: flex-end !important;
  }
  
  /* Ensure the parent flex container allows right alignment */
  body.contacts-active-mobile #contactsView > div:first-child > div.flex.items-center.justify-between {
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  /* Ensure buttons are fully visible and not clipped */
  body.contacts-active-mobile #contactsHeaderButtons button {
    margin: 0 !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    overflow: visible !important;
    position: relative !important;
    flex-shrink: 0 !important;
  }
  
  /* Hide duplicate count badge on mobile */
  body.contacts-active-mobile #contactsHeaderButtons #duplicateCount {
    display: none !important;
  }
  
  /* Make review duplicates button same size as other buttons on mobile */
  /* Remove extra padding that was for the badge */
  body.contacts-active-mobile #contactsHeaderButtons #reviewDuplicatesBtn {
    padding: 0.5rem !important;
    min-width: auto !important;
    gap: 0.25rem !important;
  }
  
  /* Ensure all buttons have consistent sizing on mobile */
  body.contacts-active-mobile #contactsHeaderButtons button {
    padding: 0.5rem !important;
    min-width: auto !important;
    width: auto !important;
  }
  
  /* Dark mode for contacts list panel */
  .dark body.contacts-active-mobile #contactsListPanel {
    background-color: rgb(17 24 39) !important;
  }
  
  /* Dark mode for contact list items */
  .dark body.contacts-active-mobile .contact-list-item {
    background-color: rgb(17 24 39) !important;
    border-color: rgb(55 65 81) !important;
  }
  
  @media (hover: hover) {
    .dark body.contacts-active-mobile .contact-list-item:hover {
      background-color: rgb(55 65 81) !important;
    }
  }
  
  /* Dark mode for contact detail panel */
  .dark body.contacts-active-mobile #contactDetailPanel {
    background-color: rgb(31 41 55) !important;
  }
  
  .dark body.contacts-active-mobile #contactDetailEmptyState {
    background-color: rgb(17 24 39) !important;
  }
  
  /* Dark mode for pagination */
  .dark body.contacts-active-mobile #contactsListContainer {
    background-color: rgb(17 24 39) !important;
  }
  
  /* Contact detail panel - positioned below nav buttons on mobile */
  body.contacts-active-mobile #contactDetailPanel:not(.hidden) {
    position: fixed !important;
    top: var(--header-height, 76px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - var(--header-height, 76px)) !important;
    z-index: 36 !important;
    background-color: #f8f9fa !important;
  }
  
  .dark body.contacts-active-mobile #contactDetailPanel:not(.hidden) {
    background-color: rgb(31 41 55) !important;
  }
  
  /* Contact list panel - full width on mobile */
  body.contacts-active-mobile #contactsListPanel {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
  }
  
  /* Split view becomes single column on mobile */
  body.contacts-active-mobile #contactsView > .flex-1.flex {
    flex-direction: column;
  }
  
  /* Ensure call banners are always visible above contacts view */
  body.contacts-active-mobile #activeCallBanner:not(.hidden),
  body.contacts-active-mobile .call-banner-enhanced:not(.hidden) {
    position: fixed !important;
    top: var(--header-height, 76px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  
  /* When call banner is visible, push contacts view down */
  body.contacts-active-mobile.has-active-call #contactsView:not(.hidden) {
    top: calc(var(--header-height, 76px) + 60px) !important;
    height: calc(100vh - var(--header-height, 76px) - 60px) !important;
  }

  /* Hide empty state on mobile when detail is showing */
  #contactDetailPanel:not(.hidden) ~ #contactDetailEmptyState {
    display: none !important;
  }
  
  /* Empty state - hide on mobile (list is default view) */
  #contactDetailEmptyState {
    display: none !important;
  }
  
  /* Mobile back button - only visible on mobile */
  .contact-detail-back-btn {
    display: flex !important;
  }
  
  /* Contact detail header adjustments */
  #contactDetailPanel > .border-b {
    padding: 12px 16px;
  }
  
  #contactDetailAvatar {
    width: 48px !important;
    height: 48px !important;
    font-size: 1rem !important;
  }
  
  #contactDetailName {
    font-size: 1.125rem;
  }
  
  /* Tab content padding on mobile */
  #contactDetailOverviewTab {
    padding: 16px;
  }
  
  #contactDetailOverviewTab .grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Desktop: Hide mobile-only back button */
@media (min-width: 850px) {
  .contact-detail-back-btn {
    display: none !important;
  }
  
  /* Show back button when contact detail is in center wrapper (sidebar integration) */
  #contactDetailWrapper .contact-detail-back-btn {
    display: flex !important;
  }
}




/* Mobile: Larger touch targets for contacts pagination buttons */
@media (max-width: 849px) {
  #sidebarContactsPageNumbers button {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 0.9375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #sidebarContactsPagination {
    padding: 8px 12px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.55) 40%, rgba(255,255,255,0.8) 100%) !important;
    box-shadow: none !important;
  }

  .dark #sidebarContactsPagination {
    background: linear-gradient(to bottom, transparent 0%, rgba(31,41,55,0.55) 40%, rgba(31,41,55,0.8) 100%) !important;
    box-shadow: none !important;
  }

  #sidebarContactsList {
    padding-bottom: 64px;
  }

  #sidebarContactsPageNumbers {
    gap: 4px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 22px;
    padding: 4px 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  }

  #sidebarContactsPageNumbers button {
    border-radius: 16px;
  }

  .dark #sidebarContactsPageNumbers {
    background: rgba(31, 41, 55, 0.85);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  }
}

/* Mobile: Hide close button in Contacts header */
@media (max-width: 849px) {
  #closeContactsBtn {
    display: none !important;
  }
}

/* Mobile: Enable scrolling in contacts list */
@media (max-width: 849px) {
  body.contacts-active-mobile #contactsListPanel {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  
  body.contacts-active-mobile #contactsView {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  
  body.contacts-active-mobile #contactsView > .flex-1 {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
}

/* Empty state logo opacity for dark mode */
.dark #emptyThread img {
  opacity: 0.4 !important;
}

/* Background gradient for empty thread, messages container, and contact
   detail body. The shared gradient ties the chat thread, empty state,
   and contact detail panel together visually as a single "content"
   surface. .contact-detail-body is the scrollable tab-content region of
   #contactDetailPanel; its baseline Tailwind `bg-[#f8f9fa]` /
   `dark:bg-gray-900` are overridden here. */
#emptyThread,
#messagesContainer,
.contact-detail-body {
  background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 50%, #f8fafc 100%);
}

html.dark #emptyThread,
html.dark #messagesContainer,
html.dark .contact-detail-body {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}

/* Responsive contact header buttons at 1000px breakpoint */
@media (max-width: 1000px) {
  /* Hide button text labels */
  #contactsHeaderButtons .btn-text {
    display: none !important;
  }
  
  /* Adjust button padding for icon-only */
  #contactsHeaderButtons button {
    padding: 0.5rem !important;
    gap: 0.25rem !important;
  }
  
  /* Keep the duplicate count badge visible on desktop */
  #contactsHeaderButtons #duplicateCount {
    margin-left: 0 !important;
  }
  
  /* Make icons slightly larger when text is hidden */
  #contactsHeaderButtons button i {
    font-size: 0.875rem !important;
  }
}

/* 1280px breakpoint - Hide contact list when detail is open */
@media (max-width: 1280px) {
  /* When contact detail is visible, hide the list panel */
  #contactsView.contact-detail-active #contactsListPanel {
    display: none !important;
  }
  
  /* Make detail panel full width */
  #contactsView.contact-detail-active #contactDetailPanel {
    flex: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Show the back button */
  #contactsView.contact-detail-active #contactDetailBackBtn {
    display: flex !important;
  }
  
  /* Hide empty state when in this mode */
  #contactsView.contact-detail-active #contactDetailEmptyState {
    display: none !important;
  }
}

/* Also ensure back button is shown below 768px when detail is active */
@media (max-width: 849px) {
  #contactsView.contact-detail-active #contactDetailBackBtn {
    display: flex !important;
  }
}

/* Custom directory source color #f77f00 */
.text-directory {
  color: #f77f00 !important;
}

.bg-directory-light {
  background-color: rgba(247, 127, 0, 0.15) !important;
}

.dark .bg-directory-light {
  background-color: rgba(247, 127, 0, 0.2) !important;
}

.text-directory-dark {
  color: #f77f00 !important;
}

.dark .text-directory-dark {
  color: #f77f00 !important;
}

/* ======================================== */
/* Amber Color Utilities for Dark Mode     */
/* ======================================== */
/* Tailwind amber colors may not be in default build */

.text-amber-600 {
  color: #d97706 !important;
}

.dark .text-amber-600,
.dark\:text-amber-400 {
  color: #fbbf24 !important;
}

.bg-amber-100 {
  background-color: #d97706 !important; /* amber-600 */
}

.dark .bg-amber-100,
.dark\:bg-amber-900\/30 {
  background-color: rgba(120, 53, 15, 0.3) !important;
}

.text-amber-800 {
  color: #92400e !important;
}

.dark .text-amber-800,
.dark\:text-amber-300 {
  color: #fcd34d !important;
}

/* ======================================== */
/* Contact Detail Action Button Icons      */
/* ======================================== */
#contactDetailCallBtn i,
#contactDetailSMSBtn i,
#contactDetailChatBtn i {
  color: #6c757d !important;
}

.dark #contactDetailCallBtn i,
.dark #contactDetailSMSBtn i,
.dark #contactDetailChatBtn i {
  color: #9ca3af !important;
}

/* ======================================== */
/* SMS & Call Panel Navigation Height Fixes */
/* ======================================== */

/* Set consistent height for SMS and Chat filter navigation */
/* NOTE: max-height removed - was breaking safe area padding on notched devices */
#smsFilterNav,
#chatFilterNav {
  height: auto;
  /* max-height: 82px; -- REMOVED: breaks safe areas, see safe-areas.css */
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
}

/* Set consistent height for call panel navigation flex container */
#callPanelContainer > .p-2\.5 > .flex {
  height: 57px;
}

/* Call panel navigation wrapper vertical alignment */
#callPanelContainer > .p-2\.5 {
  vertical-align: bottom;
}

/* Call nav badges - positioned in #callPanelNav (relative container) */
.call-nav-badge {
  position: absolute;
  top: 2px;
  z-index: 50;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: #ef4444;
  color: #fff;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--badge-ring, #ffffff);
  pointer-events: none;
}
.dark .call-nav-badge {
  --badge-ring: #1f2937;
}
.call-nav-badge-history {
  left: 56%;
}
.call-nav-badge-park {
  left: 76%;
}
.call-nav-badge-voicemail {
  left: 94%;
}

/* ============================================================
   Voicemail View — vm-* component styles
   ============================================================ */

/* Unread voicemail row: bold caller name */
.vm-item--unread .font-medium {
  font-weight: 700 !important;
}

/* Expanded row + panel — highlighted as a unit with a left accent border */
.vm-item--expanded {
  background: #e7f5ff !important;
  border-left: 3px solid #2563eb !important;
  border-bottom: none !important;
  padding-left: calc(0.75rem - 3px) !important; /* compensate for border */
}
.dark .vm-item--expanded {
  background: rgb(30 58 138 / 0.2) !important;
  border-left-color: #60a5fa !important;
}

/* Expanded detail panel (injected as next sibling of the row) */
.vm-expanded {
  padding: 0.75rem 0.75rem 0.75rem calc(0.75rem - 3px);
  background: #e7f5ff;
  border-top: none !important;
  border-right: none !important;
  border-left: 3px solid #2563eb !important;
  border-bottom: 1px solid #bfdbfe !important;
}
.dark .vm-expanded {
  background: rgb(30 58 138 / 0.2);
  border-left-color: #60a5fa !important;
  border-bottom-color: rgba(96, 165, 250, 0.2) !important;
}

/* Audio player row */
.vm-player {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

.vm-play-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  border-radius: 50% !important;
  background: #2563eb;
  color: #ffffff;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  padding: 0 !important;
  box-sizing: border-box;
}
.vm-play-btn:hover { background: #1d4ed8; }
.vm-play-btn:disabled { background: #93c5fd; cursor: default; }
.dark .vm-play-btn { background: #3b82f6; }
.dark .vm-play-btn:hover { background: #2563eb; }

.vm-seek {
  flex: 1;
  height: 4px;
  accent-color: #2563eb;
  cursor: pointer;
  min-width: 0;
}

.vm-current-time,
.vm-total-time {
  font-size: 0.7rem;
  color: #6c757d;
  flex-shrink: 0;
  min-width: 28px;
}
.dark .vm-current-time,
.dark .vm-total-time { color: #9ca3af; }

/* Transcription text */
.vm-transcript {
  font-size: 0.75rem;
  line-height: 1.6;
  color: #4b5563;
  margin-bottom: 0.625rem;
}
.dark .vm-transcript { color: #d1d5db; }

/* Transcribing placeholder */
.vm-transcribing {
  font-size: 0.75rem;
  color: #9ca3af;
  font-style: italic;
  margin-bottom: 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* Action button row */
.vm-actions {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.vm-action-btn {
  font-size: 0.7rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  border: 1px solid #dee2e6;
  background: var(--bg-primary, #ffffff);
  color: #374151;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}
.vm-action-btn:hover { background: #f1f3f5; }
.dark .vm-action-btn {
  background: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}
.dark .vm-action-btn:hover { background: #4b5563; }

.vm-delete-btn { border-color: #fca5a5; color: #dc2626; }
.vm-delete-btn:hover { background: #fee2e2 !important; }
.dark .vm-delete-btn { border-color: #7f1d1d; color: #f87171; }
.dark .vm-delete-btn:hover { background: #450a0a !important; }

.vm-restore-btn { border-color: #86efac; color: #16a34a; }
.vm-restore-btn:hover { background: #f0fdf4 !important; }
.dark .vm-restore-btn { border-color: #14532d; color: #4ade80; }

/* Deleted items — slightly muted */
.vm-item--deleted {
  opacity: 0.65;
}

/* Loading / empty / error states inside voicemail list */
.vm-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  text-align: center;
  color: #9ca3af;
}
.vm-state i { font-size: 2rem; margin-bottom: 0.75rem; }
.vm-state p { font-size: 0.8125rem; }
.vm-state .vm-retry-btn {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  padding: 0.375rem 1rem;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
  background: white;
  color: #374151;
  cursor: pointer;
}
.dark .vm-state .vm-retry-btn {
  background: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}

/* Call navigation buttons vertical alignment */
#showDialpadBtn,
#showContactsBtn,
#showHistoryBtn,
#showParkBtn {
  vertical-align: middle;
}

/* Call navigation button text vertical alignment */
.call-nav-btn .text-xs {
  vertical-align: middle;
}

/* ======================================== */
/* Drag and Drop Upload Zone */
/* ======================================== */

/* Drop zone overlay */
#dropZoneOverlay {
  transition: opacity 0.2s ease;
  pointer-events: none;
}

#dropZoneOverlay.active {
  opacity: 1;
}

/* Message thread background — slightly off-white to separate from sidebar */
#messageThread {
  background: #f8f9fa;
}

html.dark #messageThread {
  background: #111827; /* gray-900 — one step darker than sidebar gray-800 */
}

/* Message thread drop zone active state */
#messageThread.drag-over {
  background-color: rgba(59, 130, 246, 0.05);
}

/* Thread header and compose area inherit the thread background. Contact-
   detail header gets the same treatment so the chat and contact-detail
   surfaces feel like one design family — same off-white / gray-900
   strip, same downward elevation shadow. */
#messageThread .thread-header,
#messageThread .message-compose-area,
#contactDetailPanel > .contact-detail-header {
  background: #f8f9fa !important;
}

html.dark #messageThread .thread-header,
html.dark #messageThread .message-compose-area,
html.dark #contactDetailPanel > .contact-detail-header {
  background: #111827 !important;
}

/* Thread header — downward shadow to separate from messages below.
   Same elevation treatment for the contact-detail header AND the contact-
   detail tabs strip so the gradient body underneath has the same "tucked
   under a hovering chrome strip" feel as the chat thread. We also drop
   the bottom borders (Tailwind `border-b`) on both contact-detail strips
   since the shadow now does that job visually — without the suppression,
   border + shadow stack and the strip looks heavier than the thread-
   header. */
#messageThread .thread-header,
#contactDetailPanel > .contact-detail-header,
#contactDetailPanel > .contact-detail-tabs {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 1;
}
#contactDetailPanel > .contact-detail-header,
#contactDetailPanel > .contact-detail-tabs {
  border-bottom: none !important;
}

html.dark #messageThread .thread-header,
html.dark #contactDetailPanel > .contact-detail-header,
html.dark #contactDetailPanel > .contact-detail-tabs {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Match the .notes-editor-toolbar 56px chrome-strip height so the
   contact-detail tabs row and the notes formatting toolbar feel
   visually identical when switching between the two centerContentArea
   sub-views. Without this, Tailwind's `py-3` on each tab button rendered
   the strip at ~74px — substantially heavier than the 56px notes
   toolbar at the same horizontal slot. We pin the container, stretch
   the inner flex row, and zero out the buttons' vertical padding so
   the active-tab `border-b-2` indicator stays flush with the strip's
   bottom edge (which is also where our `box-shadow` originates above). */
#contactDetailPanel > .contact-detail-tabs {
  height: 56px;
  min-height: 56px;
  display: flex;
  align-items: stretch;
}
#contactDetailPanel > .contact-detail-tabs > .flex {
  height: 100%;
  align-items: stretch;
}
#contactDetailPanel > .contact-detail-tabs .contact-detail-tab {
  display: flex;
  align-items: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  /* Shrink from Tailwind's default 1rem (16px) to a chrome-strip-appropriate
     13px so the tab labels match the visual weight of the .notes-editor-
     toolbar buttons (which run at 13px) and the .thread-header contact name
     (also 13px on this breakpoint). At 16px the labels read as section
     headings, which fights the docked-strip role this row plays. */
  font-size: 13px;
  line-height: 1;
}

/* Timeline type-filter pills (Calls / SMS / Email / Meetings / Future).
   The buttons live inside a `flex items-center gap-2 flex-wrap` row in the
   contact-detail Timeline tab. With only Tailwind utility classes pinning
   them they flex-shrink during window-resize transitions — at narrow
   widths the icon + label pair compresses, the pill loses its rounded
   shape, and the visible row appears to "jitter" between layouts. Lock
   the per-pill geometry so resizing only affects wrap behavior, not
   button shape. */
.tl-type-btn,
#timelineFutureToggle {
  flex-shrink: 0;
  flex-grow: 0;
  height: 26px;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}
.tl-type-btn > i,
#timelineFutureToggle > i {
  flex-shrink: 0;
}

/* AI Summary button (Timeline tab, contact detail).
   Same family as the .tl-type-btn pills above — Tailwind-only styling
   meant the pill flex-shrunk and re-flowed during resize transitions
   between desktop / tablet / mobile, occasionally compressing the icon
   + label to a misshapen rectangle. Pin it to a stable 28px height with
   no shrinking. The tablet.css `:not(#timelineSummarizeBtn)` exclusion
   keeps the 44px touch-target min-height from re-inflating it on
   tablet widths. */
#timelineSummarizeBtn {
  flex-shrink: 0;
  flex-grow: 0;
  height: 28px;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}
#timelineSummarizeBtn > i {
  flex-shrink: 0;
}

/* Mobile: icon-only circular pills.
   At <850px the labels (Calls/SMS/Email/Meetings) push two pills onto a
   second row even on narrow phones — the row wraps from 5 buttons → 2
   rows → vertical jitter as the user scrolls. Drop the labels on mobile
   so the entire filter set fits one row at any phone width AND square
   each button to the touch-target height (44px) so the existing
   rounded-full Tailwind class renders them as perfect circles instead
   of pill-shaped capsules. The "All" pill is exempt because it has no
   icon companion (hiding its text would leave a blank circle); we
   square it up too at the same 44px so the row reads as a uniform
   circular cluster. The Future toggle is exempt because its on/off
   switch IS the visual indicator. */
@media (max-width: 849px) {
  body.is-mobile .tl-type-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body.is-mobile .tl-type-btn:not([data-tl-type="all"]) {
    font-size: 0;
  }
  body.is-mobile .tl-type-btn:not([data-tl-type="all"]) > i {
    font-size: 14px;
    margin-right: 0 !important;
  }
}

/* Settings header — matches thread-header visual treatment */
#settingsView .settings-header {
  background: #f8f9fa !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 1;
}

html.dark #settingsView .settings-header {
  background: #111827 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Compose area — upward shadow to separate from messages above */
#messageThread .message-compose-area {
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.08), 0 -1px 2px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 1;
}

html.dark #messageThread .message-compose-area {
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.3), 0 -1px 2px rgba(0, 0, 0, 0.2);
}

@media (max-width: 849px) {
  /* BUG-split-pane fix: ID-level selector beats .hidden's class-level
   * specificity, which meant messageThread.classList.add('hidden') was a
   * no-op on mobile — .hidden's `display: none !important` lost to this
   * rule's `display: flex !important`. The symptom was a split-pane view
   * whenever showContactDetailInCenter tried to hide messageThread while
   * showing contactDetailWrapper: both ended up as flex:1 siblings inside
   * #messageAreaInner and stacked vertically. Scoping this rule to
   * :not(.hidden) preserves the mobile layout when visible but lets
   * classList.add('hidden') actually hide it. */
  #messageThread:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
  }

  /* 2026-05-13 — abandoned the prior mobile-only floating compose-area
     pattern (position: absolute + gradient backdrop + dynamic padding
     reservation on the messages container) in favor of matching the
     desktop layout: the compose-area is a plain opaque flex-shrink:0
     sibling that sits below the scrolling messages container. No overlap,
     no scroll-behind glassy effect, no JS padding tracking. */
  #messageThread #messagesContainer {
    flex: 1 1 0% !important;
    min-height: 0 !important;
  }
}

/* Contacts pagination — upward shadow to separate from list above */
.contacts-pagination {
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.08), 0 -1px 2px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 1;
}

html.dark .contacts-pagination {
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.3), 0 -1px 2px rgba(0, 0, 0, 0.2);
}

/* Drop zone icon pulse animation */
#dropZoneOverlay i {
  animation: dropPulse 1.5s ease-in-out infinite;
}

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

/* Uploading indicator */
.upload-progress-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.dark .upload-progress-overlay {
  background: rgba(31, 41, 55, 0.9);
}

.upload-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(59, 130, 246, 0.3);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ================================================
   Lazy Loading / Infinite Scroll
   ================================================ */

/* Message container - prevent pull-to-refresh conflicts, instant programmatic scroll */
.message-area #messagesContainer,
#messagesContainer {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto !important;
}

/* Load more sentinel - invisible trigger element at top */
.load-more-sentinel {
  height: 1px;
  width: 100%;
  pointer-events: none;
}

/* Loading spinner for older messages */
.load-more-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  gap: 8px;
  color: #6b7280;
}

.dark .load-more-spinner {
  color: #9ca3af;
}

.load-more-spinner i {
  animation: spin 1s linear infinite;
}

/* "No more messages" indicator */
.no-more-messages {
  text-align: center;
  padding: 12px;
  color: #9ca3af;
  font-size: 0.75rem;
}

.dark .no-more-messages {
  color: #6b7280;
}

/* ===== UNREAD MESSAGES DIVIDER ===== */
.unread-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 8px;
  padding: 0 16px;
}

.unread-divider::before,
.unread-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #ef4444;
}

.unread-divider span {
  font-size: 0.75rem;
  font-weight: 600;
  color: #ef4444;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.dark .unread-divider::before,
.dark .unread-divider::after {
  background: #f87171;
}

.dark .unread-divider span {
  color: #f87171;
}

/* ===== THREAD FADE-IN (mobile only) ===== */
@media (max-width: 849px) {
  @keyframes threadFadeUp {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  #messagesContainer.thread-fade-in {
    animation: threadFadeUp 0.25s ease-out both;
  }
}

/* ================================================
   Message Action Menu & Edit/Reply Features
   ================================================ */

/* Three-dot action button on messages */
.message-action-btn {
  position: absolute;
  top: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e5e7eb;
  cursor: pointer;
  color: #6b7280;
  font-size: 14px;
  z-index: 10;
}

.dark .message-action-btn {
  background: rgba(55, 65, 81, 0.9);
  border-color: #4b5563;
  color: #9ca3af;
}

/* Position: sent messages (right side) - button on left */
.message-bubble-sent-container .message-action-btn {
  left: -32px;
}

/* Position: received messages (left side) - button on right */
.message-bubble-received-container .message-action-btn {
  right: -32px;
}

/* Standalone action button is replaced by the reaction picker toolbar
   on desktop. Hidden on touch via pointer:coarse below. */
@media (hover: hover) {
  .message-action-btn {
    display: none !important;
  }
}

@media (hover: hover) {
  .message-action-btn:hover {
    background: #f3f4f6;
    color: #374151;
  }
}

@media (hover: hover) {
  .dark .message-action-btn:hover {
    background: #4b5563;
    color: #e5e7eb;
  }
}

/* Hide action button on touch devices - use long-press instead */
@media (pointer: coarse) {
  .message-action-btn {
    display: none !important;
  }
  
  /* Prevent text selection on long-press for message bubbles,
     but allow links to remain tappable */
  .internal-message .message-bubble,
  .internal-message .message-bubble *:not(a):not(a *),
  .message .message-bubble,
  .message .message-bubble *:not(a):not(a *) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .internal-message .message-bubble a,
  .message .message-bubble a {
    -webkit-touch-callout: default;
    -webkit-user-select: auto;
    user-select: auto;
    pointer-events: auto;
  }
}

/* ====================================
   Link Action Sheet (URL open/copy)
   ==================================== */
.link-action-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100000;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.link-action-overlay.visible {
  opacity: 1;
}
.link-action-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100001;
  background: var(--bg-primary, #ffffff);
  border-radius: 16px 16px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.25s ease-out;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dark .link-action-sheet {
  background: #1f2937;
}
.link-action-sheet.visible {
  transform: translateY(0);
}
.link-action-url {
  font-size: 13px;
  color: #6b7280;
  padding: 8px 12px;
  background: #f3f4f6;
  border-radius: 8px;
  word-break: break-all;
  text-align: center;
  margin-bottom: 4px;
}
.dark .link-action-url {
  background: #374151;
  color: #9ca3af;
}
.link-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.link-action-open {
  background: #007aff;
  color: #ffffff;
}
.link-action-open:active {
  background: #0056cc;
}
.link-action-copy {
  background: #f3f4f6;
  color: #1f2937;
}
.dark .link-action-copy {
  background: #374151;
  color: #f3f4f6;
}
.link-action-copy:active {
  background: #e5e7eb;
}
.dark .link-action-copy:active {
  background: #4b5563;
}
.link-action-cancel {
  background: transparent;
  color: #6b7280;
  font-weight: 400;
}

/* ====================================
   Mobile Action Sheet (Bottom Sheet)
   ==================================== */
.mobile-action-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99998;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mobile-action-sheet-overlay.show {
  opacity: 1;
}

.mobile-action-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-primary, #ffffff);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  z-index: 99999;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  padding: 8px 16px 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
}

.dark .mobile-action-sheet {
  background: #1f2937;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
}

.mobile-action-sheet.show {
  transform: translateY(0);
}

.mobile-action-sheet-handle {
  width: 36px;
  height: 4px;
  background: #d1d5db;
  border-radius: 2px;
  margin: 0 auto 12px;
}

.dark .mobile-action-sheet-handle {
  background: #4b5563;
}

.mobile-action-sheet-preview {
  padding: 12px 16px;
  background: #f3f4f6;
  border-radius: 12px;
  margin-bottom: 16px;
  max-height: 80px;
  overflow: hidden;
}

.dark .mobile-action-sheet-preview {
  background: #374151;
}

.mobile-action-sheet-preview span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Subtle highlight on the long-pressed message bubble */
.bubble-longpress-highlight {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.45), 0 2px 12px rgba(59, 130, 246, 0.15) !important;
  transition: box-shadow 0.2s ease;
}

.dark .bubble-longpress-highlight {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 2px 12px rgba(255, 255, 255, 0.1) !important;
}

.mobile-action-sheet-reactions {
  display: flex;
  justify-content: space-evenly;
  padding: 16px 12px;
}

.mobile-reaction-btn {
  width: 52px;
  height: 52px;
  border: none;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.mobile-reaction-btn:active {
  background: #e5e7eb;
  transform: scale(1.15);
}

.dark .mobile-reaction-btn:active {
  background: #374151;
}

.mobile-action-sheet-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 0 16px;
}

.dark .mobile-action-sheet-divider {
  background: #374151;
}

.mobile-action-sheet-buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-action-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: transparent;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  color: #1f2937;
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.mobile-action-btn:active {
  background: #f3f4f6;
}

.dark .mobile-action-btn {
  color: #f3f4f6;
}

.dark .mobile-action-btn:active {
  background: #374151;
}

.mobile-action-btn i {
  width: 24px;
  font-size: 18px;
  text-align: center;
  color: #6b7280;
}

.dark .mobile-action-btn i {
  color: #9ca3af;
}

.mobile-action-btn-danger {
  color: #dc2626;
}

.mobile-action-btn-danger i {
  color: #dc2626;
}

.dark .mobile-action-btn-danger {
  color: #f87171;
}

.dark .mobile-action-btn-danger i {
  color: #f87171;
}

.mobile-action-cancel {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 16px;
  background: #f3f4f6;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  color: #3b82f6;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dark .mobile-action-cancel {
  background: #374151;
  color: #60a5fa;
}

.mobile-action-cancel:active {
  background: #e5e7eb;
}

.dark .mobile-action-cancel:active {
  background: #4b5563;
}

/* Legacy .message-menu-item removed — replaced by .message-action-dropdown-item */

/* Edit mode container */
.edit-mode-container {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #f9fafb;
  border: 2px solid #3b82f6;
}

.dark .edit-mode-container {
  background: #1f2937;
  border-color: #60a5fa;
}

.edit-mode-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #eff6ff;
  border-bottom: 1px solid #dbeafe;
  font-size: 12px;
  color: #3b82f6;
  font-weight: 500;
}

.dark .edit-mode-header {
  background: #1e3a5f;
  border-bottom-color: #1e40af;
  color: #93c5fd;
}

.edit-mode-header button {
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s;
}

@media (hover: hover) {
  .edit-mode-header button:hover {
    background: rgba(59, 130, 246, 0.2);
  }
}

.edit-textarea {
  width: 100%;
  padding: 12px;
  border: none;
  resize: none;
  background: transparent;
  font-size: 14px;
  line-height: 1.5;
  color: #1f2937;
  min-height: 60px;
  max-height: 200px;
}

.dark .edit-textarea {
  color: #f3f4f6;
}

.edit-textarea:focus {
  outline: none;
}

.edit-mode-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 12px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

.dark .edit-mode-actions {
  background: #1f2937;
  border-top-color: #374151;
}

.edit-cancel-btn {
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  background: #e5e7eb;
  transition: all 0.15s;
}

@media (hover: hover) {
  .edit-cancel-btn:hover {
    background: #d1d5db;
  }
}

.dark .edit-cancel-btn {
  background: #374151;
  color: #d1d5db;
}

@media (hover: hover) {
  .dark .edit-cancel-btn:hover {
    background: #4b5563;
  }
}

.edit-save-btn {
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: white;
  background: #3b82f6;
  transition: all 0.15s;
}

@media (hover: hover) {
  .edit-save-btn:hover {
    background: #2563eb;
  }
}

.edit-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Reply quote block in messages */
.reply-quote {
  background: #f3f4f6;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 6px;
  border-left: 3px solid #3b82f6;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
  max-width: 100%;
  overflow: hidden;
}

.dark .reply-quote {
  background: #374151;
}

@media (hover: hover) {
  .reply-quote:hover {
    background: #e5e7eb;
  }
}

@media (hover: hover) {
  .dark .reply-quote:hover {
    background: #4b5563;
  }
}

.reply-quote-name {
  font-weight: 600;
  color: #3b82f6;
  margin-bottom: 2px;
}

.dark .reply-quote-name {
  color: #60a5fa;
}

.reply-quote-text {
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dark .reply-quote-text {
  color: #9ca3af;
}

/* Edited indicator */
.edited-indicator {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 2px;
  font-style: italic;
}

.dark .edited-indicator {
  color: #6b7280;
}

/* Reply preview bar animation */
#replyPreview {
  animation: slideDown 0.2s ease-out;
}

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

/* Message highlight when scrolling to replied message */
.message-highlight {
  animation: highlightPulse 1.5s ease-out;
}

@keyframes highlightPulse {
  0% {
    background-color: rgba(59, 130, 246, 0.3);
  }
  100% {
    background-color: transparent;
  }
}

/* ====================================
   Operator Console Styles
   ==================================== */

/* Header button states */
#operatorConsoleBtn {
  position: relative;
}

#operatorConsoleBtn.active {
  background-color: #f59e0b;
  color: white;
}

@media (hover: hover) {
  #operatorConsoleBtn.active:hover {
    background-color: #d97706;
  }
}

/* Call indicator dot on button */
#operatorConsoleBtn .call-indicator {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background-color: #ef4444;
  border-radius: 50%;
  border: 2px solid white;
}

.dark #operatorConsoleBtn .call-indicator {
  border-color: #1f2937;
}

/* Dashboard pop-out button */
#openDashboardBtn {
  height: 35px;
}

/* Filter buttons */
.operator-filter-btn {
  background: #f1f3f5;
  color: #4b5563;
  border: 1px solid #e5e7eb;
}

@media (hover: hover) {
  .operator-filter-btn:hover {
    background-color: #e9ecef;
    border-color: #6366f1;
  }
}

.operator-filter-btn.active {
  background-color: #f59e0b;
  color: white;
  border-color: #f59e0b;
}

.dark .operator-filter-btn,
html.dark .operator-filter-btn {
  background: #1f2937 !important;
  color: #d1d5db;
  border-color: #374151 !important;
}

@media (hover: hover) {
  .dark .operator-filter-btn:hover,
  html.dark .operator-filter-btn:hover {
    background-color: #374151 !important;
    border-color: #6366f1;
  }
}

.dark .operator-filter-btn.active,
html.dark .operator-filter-btn.active {
  background-color: #f59e0b !important;
  color: white !important;
  border-color: #f59e0b !important;
}

/* Responsive grid for operator console */
/* Container-relative reflow: `auto-fill` + `minmax(220px, 1fr)` lets the grid
   lay out as many 220px-minimum columns as fit in its own width, then shrink
   them to the available space. This replaces a fragile viewport-width media
   query stack that didn't account for side panels narrowing the grid and
   let cards overflow horizontally on resize. */
.operator-console-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  min-width: 0;
  width: 100%;
}

/* Operator console contact card */
.operator-console-card {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Allow the card to shrink inside auto-fill grid tracks; without this the
     card's intrinsic min-content (long names, action buttons) could push the
     grid track wider than its share and overflow horizontally. */
  min-width: 0;
}

@media (hover: hover) {
  .operator-console-card:hover {
    border-color: #f59e0b;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
  }
}

.dark .operator-console-card {
  background: #1f2937;
  border-color: #374151;
}

@media (hover: hover) {
  .dark .operator-console-card:hover {
    border-color: #f59e0b;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
  }
}

/* Card avatar */
.operator-console-card .card-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-bottom: 12px;
  position: relative;
}

.operator-console-card .card-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.operator-console-card .card-avatar .avatar-initials {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}

/* Presence indicator on card */
.operator-console-card .card-presence {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid white;
}

.dark .operator-console-card .card-presence {
  border-color: #1f2937;
}

/* Card info */
.operator-console-card .card-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: #111827;
  margin-bottom: 2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dark .operator-console-card .card-name {
  color: #f9fafb;
}

.operator-console-card .card-ext {
  font-size: 0.8125rem;
  color: #6b7280;
  margin-bottom: 4px;
}

.dark .operator-console-card .card-ext {
  color: #9ca3af;
}

.operator-console-card .card-status {
  font-size: 0.75rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
}

.dark .operator-console-card .card-status {
  color: #9ca3af;
}

/* Card actions - wrap-friendly row of circular buttons.
   Switched from `display: grid; grid-template-columns: repeat(3, auto)` to a
   wrapping flex so buttons reflow to a new row when the card is narrow
   (after the auto-fill grid shrinks it) instead of overflowing horizontally
   or deforming vertically. Row-gap/col-gap use the same value so wrapped
   rows stay tidy. */
.operator-console-card .card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Has-active-call shows all 6 buttons; flex-wrap handles 3+3 on normal cards
   or 2+2+2 / 1+1+... on very narrow cards without any special rule. No
   `.operator-console-card.has-active-call .card-actions` override required. */

.operator-console-card .card-action-btn {
  width: 36px;
  height: 36px;
  /* Lock shape against:
     - tablet.css blanket `min-height: var(--touch-target-min)` rule
       (deformed button to 36x48)
     - parent flex/grid stretch contexts (align-items: stretch)
     - any future global button rules
     min-width/max-width + min-height/max-height pin both dimensions,
     aspect-ratio + flex-shrink:0 provide additional guarantees. */
  min-width: 36px;
  max-width: 36px;
  min-height: 36px;
  max-height: 36px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  flex-grow: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  padding: 0;
  box-sizing: border-box;
}

/* Call button (green) */
.operator-console-card .btn-call {
  background-color: #22c55e;
  color: white;
}

@media (hover: hover) {
  .operator-console-card .btn-call:hover {
    background-color: #16a34a;
  }
}

/* Blind transfer button (amber) */
.operator-console-card .btn-blind {
  background-color: #f59e0b;
  color: white;
}

@media (hover: hover) {
  .operator-console-card .btn-blind:hover {
    background-color: #d97706;
  }
}

/* Attended transfer button (blue) */
.operator-console-card .btn-attended {
  background-color: #3b82f6;
  color: white;
}

@media (hover: hover) {
  .operator-console-card .btn-attended:hover {
    background-color: #2563eb;
  }
}

/* Voicemail transfer button (gray) */
.operator-console-card .btn-voicemail {
  background-color: #6b7280;
  color: white;
}

@media (hover: hover) {
  .operator-console-card .btn-voicemail:hover {
    background-color: #4b5563;
  }
}

/* Hide transfer buttons when not on call */
.operator-console-card .transfer-btn {
  display: none;
}

.operator-console-card.has-active-call .transfer-btn {
  display: flex;
}

/* Teams profile button (purple) */
.operator-console-card .btn-teams-profile {
  background-color: #9333ea;
  color: white;
}

@media (hover: hover) {
  .operator-console-card .btn-teams-profile:hover {
    background-color: #7e22ce;
  }
}

/* Profile button (orange - matches phone favorites) */
.operator-console-card .btn-profile {
  background-color: #f77f00;
  color: white;
}

@media (hover: hover) {
  .operator-console-card .btn-profile:hover {
    background-color: #d96e00;
  }
}

/* Chat button (blue) */
.operator-console-card .btn-chat {
  background-color: #3b82f6;
  color: white;
}

@media (hover: hover) {
  .operator-console-card .btn-chat:hover {
    background-color: #2563eb;
  }
}

/* Presence colors */
.presence-available { background-color: #22c55e; }
.presence-busy, .presence-on-call { background-color: #ef4444; }
.presence-away { background-color: #f59e0b; }
.presence-dnd { background-color: #ef4444; }
.presence-offline { background-color: #9ca3af; }

/* Operator Console Popout Mode */
body.operator-console-popout-mode {
  overflow: hidden;
}

body.operator-console-popout-mode #mainContentArea {
  margin-left: 0 !important;
  width: 100% !important;
}

body.operator-console-popout-mode #navRail {
  display: none !important;
}

body.operator-console-popout-mode #operatorConsoleView {
  height: 100vh !important;
  max-height: 100vh !important;
}

/* Prevent horizontal scroll on the operator console grid scroll container */
#operatorConsoleGrid {
  overflow-x: hidden;
}

body.operator-console-popout-mode #operatorConsoleGrid {
  height: calc(100vh - 120px) !important;
  max-height: calc(100vh - 120px) !important;
}

/* ============================================================================
   OPERATOR CONSOLE VIEW MODES
   ============================================================================ */

/* Grid class for full cards (default) */
/* See note on .operator-console-grid above — auto-fill + minmax reflows on
   the grid's own width, so cards shrink/wrap instead of overflowing when the
   center panel narrows. */
.operator-console-grid-full {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  min-width: 0;
  width: 100%;
}

/* ============================================================================
   MINI CARDS VIEW
   ============================================================================ */

/* Grid for mini cards - denser layout */
/* Container-relative reflow: auto-fill + minmax(140px, 1fr) gives a tight
   grid that keeps packing cards as the container widens, without fragile
   viewport-width breakpoints. */
.operator-console-grid-mini {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  min-width: 0;
  width: 100%;
}

/* Mini card styles */
.operator-console-card-mini {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 8px;
  padding: 10px;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}

@media (hover: hover) {
  .operator-console-card-mini:hover {
    border-color: #f59e0b;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
  }
}

.dark .operator-console-card-mini {
  background: #1f2937;
  border-color: #374151;
}

@media (hover: hover) {
  .dark .operator-console-card-mini:hover {
    border-color: #f59e0b;
  }
}

/* Mini card avatar with presence indicator */
.operator-console-card-mini .mini-card-avatar {
  position: relative;
  margin-bottom: 6px;
}

.operator-console-card-mini .mini-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}

.operator-console-card-mini .mini-avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.operator-console-card-mini .mini-presence {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
}

.dark .operator-console-card-mini .mini-presence {
  border-color: #1f2937;
}

.operator-console-card-mini .mini-card-name {
  font-weight: 600;
  font-size: 0.8125rem;
  color: #111827;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.dark .operator-console-card-mini .mini-card-name {
  color: #f9fafb;
}

.operator-console-card-mini .mini-card-ext {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 8px;
}

.dark .operator-console-card-mini .mini-card-ext {
  color: #9ca3af;
}

/* Mini card action buttons - 3 across by default */
.operator-console-card-mini .mini-card-actions {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 5px;
  justify-content: center;
}

/* When has active call, still 3 across but 2 rows */
.operator-console-card-mini.has-active-call .mini-card-actions {
  grid-template-columns: repeat(3, auto);
}

.operator-console-card-mini .mini-action-btn {
  width: 28px;
  height: 28px;
  /* Lock the circle shape against stray min-height rules (e.g. tablet
     touch-target blanket) and any flex/grid stretch contexts. */
  min-width: 28px;
  min-height: 28px;
  max-height: 28px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  flex-grow: 0;
  align-self: center;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.75rem;
  padding: 0;
  box-sizing: border-box;
}

.operator-console-card-mini .btn-call {
  background-color: #22c55e;
  color: white;
}

@media (hover: hover) {
  .operator-console-card-mini .btn-call:hover {
    background-color: #16a34a;
  }
}

.operator-console-card-mini .btn-blind {
  background-color: #f59e0b;
  color: white;
}

@media (hover: hover) {
  .operator-console-card-mini .btn-blind:hover {
    background-color: #d97706;
  }
}

.operator-console-card-mini .btn-attended {
  background-color: #3b82f6;
  color: white;
}

@media (hover: hover) {
  .operator-console-card-mini .btn-attended:hover {
    background-color: #2563eb;
  }
}

.operator-console-card-mini .btn-voicemail {
  background-color: #6b7280;
  color: white;
}

@media (hover: hover) {
  .operator-console-card-mini .btn-voicemail:hover {
    background-color: #4b5563;
  }
}

/* Hide transfer buttons in mini cards when not on call */
.operator-console-card-mini .transfer-btn {
  display: none;
}

.operator-console-card-mini.has-active-call .transfer-btn {
  display: flex;
}

/* Teams profile button (purple) */
.operator-console-card-mini .btn-teams-profile {
  background-color: #9333ea;
  color: white;
}

@media (hover: hover) {
  .operator-console-card-mini .btn-teams-profile:hover {
    background-color: #7e22ce;
  }
}

/* Profile button (orange - matches phone favorites) */
.operator-console-card-mini .btn-profile {
  background-color: #f77f00;
  color: white;
}

@media (hover: hover) {
  .operator-console-card-mini .btn-profile:hover {
    background-color: #d96e00;
  }
}

/* Chat button (blue) */
.operator-console-card-mini .btn-chat {
  background-color: #3b82f6;
  color: white;
}

@media (hover: hover) {
  .operator-console-card-mini .btn-chat:hover {
    background-color: #2563eb;
  }
}

/* ============================================================================
   LIST VIEW
   ============================================================================ */

/* List view container */
.operator-console-grid-list {
  display: block;
}

.operator-console-list {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.dark .operator-console-list {
  background: #1f2937;
  border-color: #374151;
}

/* List header */
.operator-console-list-header {
  display: grid;
  grid-template-columns: 1fr 80px 100px 220px;
  gap: 12px;
  padding: 12px 16px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.dark .operator-console-list-header {
  background: #111827;
  border-color: #374151;
  color: #9ca3af;
}

.operator-console-list-header .sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
}

@media (hover: hover) {
  .operator-console-list-header .sortable:hover {
    color: #f59e0b;
  }
}

/* List body */
.operator-console-list-body {
  max-height: calc(100vh - 280px);
  overflow-y: auto;
}

body.operator-console-popout-mode .operator-console-list-body {
  max-height: calc(100vh - 200px);
}

/* List row */
.operator-console-list-row {
  display: grid;
  grid-template-columns: 1fr 80px 100px 220px;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #f3f4f6;
  align-items: center;
  transition: background-color 0.15s ease;
}

@media (hover: hover) {
  .operator-console-list-row:hover {
    background-color: #fef3c7;
  }
}

.dark .operator-console-list-row {
  border-color: #374151;
}

@media (hover: hover) {
  .dark .operator-console-list-row:hover {
    background-color: rgba(245, 158, 11, 0.1);
  }
}

.operator-console-list-row:last-child {
  border-bottom: none;
}

/* List columns */
.list-col {
  display: flex;
  align-items: center;
  min-width: 0;
}

.list-col-name {
  gap: 10px;
}

.list-avatar-container {
  position: relative;
  flex-shrink: 0;
}

.list-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}

.list-avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.list-presence {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid white;
}

.dark .list-presence {
  border-color: #1f2937;
}

.list-name-text {
  font-weight: 500;
  font-size: 0.875rem;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dark .list-name-text {
  color: #f9fafb;
}

.list-col-ext {
  font-size: 0.875rem;
  color: #6b7280;
}

.dark .list-col-ext {
  color: #9ca3af;
}

.list-col-status {
  justify-content: flex-start;
}

.status-badge {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 9999px;
  font-weight: 500;
}

.status-badge.presence-available {
  background-color: #dcfce7;
  color: #166534;
}

.dark .status-badge.presence-available {
  background-color: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

.status-badge.presence-busy,
.status-badge.presence-on-call {
  background-color: #fee2e2;
  color: #991b1b;
}

.dark .status-badge.presence-busy,
.dark .status-badge.presence-on-call {
  background-color: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.status-badge.presence-on_phone,
.status-badge.presence-on_the_phone {
  background-color: #dbeafe;
  color: #1d4ed8;
}

.status-badge.presence-teams_call {
  background-color: rgba(98, 100, 167, 0.15);
  color: #6264A7; /* Teams brand purple */
}

.dark .status-badge.presence-on_phone,
.dark .status-badge.presence-on_the_phone {
  background-color: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.dark .status-badge.presence-teams_call {
  background-color: rgba(98, 100, 167, 0.25);
  color: #8b8dd0; /* Lighter Teams purple for dark mode */
}

.status-badge.presence-away {
  background-color: #fef3c7;
  color: #92400e;
}

.dark .status-badge.presence-away {
  background-color: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.status-badge.presence-dnd {
  background-color: #fee2e2;
  color: #991b1b;
}

.dark .status-badge.presence-dnd {
  background-color: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.status-badge.presence-offline {
  background-color: #f3f4f6;
  color: #6b7280;
}

.dark .status-badge.presence-offline {
  background-color: rgba(156, 163, 175, 0.2);
  color: #9ca3af;
}

/* List action buttons */
.list-col-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.list-action-btn {
  width: 30px;
  height: 30px;
  /* Lock the circle shape against stray min-height rules (e.g. tablet
     touch-target blanket) and any flex/grid stretch contexts. */
  min-width: 30px;
  min-height: 30px;
  max-height: 30px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  flex-grow: 0;
  align-self: center;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.75rem;
  padding: 0;
  box-sizing: border-box;
}

.list-action-btn.btn-call {
  background-color: #22c55e;
  color: white;
}

@media (hover: hover) {
  .list-action-btn.btn-call:hover {
    background-color: #16a34a;
  }
}

.list-action-btn.btn-blind {
  background-color: #f59e0b;
  color: white;
}

@media (hover: hover) {
  .list-action-btn.btn-blind:hover {
    background-color: #d97706;
  }
}

.list-action-btn.btn-attended {
  background-color: #3b82f6;
  color: white;
}

@media (hover: hover) {
  .list-action-btn.btn-attended:hover {
    background-color: #2563eb;
  }
}

.list-action-btn.btn-voicemail {
  background-color: #6b7280;
  color: white;
}

@media (hover: hover) {
  .list-action-btn.btn-voicemail:hover {
    background-color: #4b5563;
  }
}

.list-action-btn.btn-teams-profile {
  background-color: #9333ea;
  color: white;
}

@media (hover: hover) {
  .list-action-btn.btn-teams-profile:hover {
    background-color: #7e22ce;
  }
}

.list-action-btn.btn-profile {
  background-color: #f77f00;
  color: white;
}

@media (hover: hover) {
  .list-action-btn.btn-profile:hover {
    background-color: #d96e00;
  }
}

.list-action-btn.btn-chat {
  background-color: #3b82f6;
  color: white;
}

@media (hover: hover) {
  .list-action-btn.btn-chat:hover {
    background-color: #2563eb;
  }
}

/* Responsive list view - adjust columns on smaller screens */
@media (max-width: 900px) {
  .operator-console-list-header,
  .operator-console-list-row {
    grid-template-columns: 1fr 60px 80px 200px;
    gap: 8px;
    padding: 8px 12px;
  }
  
  .list-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.625rem;
  }
  
  .list-action-btn {
    width: 26px;
    height: 26px;
    font-size: 0.625rem;
  }
}

/* ============================================================================
   RING GROUP CARDS (2-column grid layout)
   ============================================================================ */

/* Ring group card - matches operator console card styling */
.ring-group-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
}

@media (hover: hover) {
  .ring-group-card:hover {
    border-color: #f59e0b;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
  }
}

.dark .ring-group-card {
  background: #1f2937;
  border-color: #374151;
}

@media (hover: hover) {
  .dark .ring-group-card:hover {
    border-color: #f59e0b;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
  }
}

/* Card header - clickable area */
.ring-group-card .rg-card-header {
  padding: 16px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  border-bottom: 1px solid rgba(99, 102, 241, 0.15);
}

@media (hover: hover) {
  .ring-group-card .rg-card-header:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
  }
}

.dark .ring-group-card .rg-card-header {
  background: #374151;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (hover: hover) {
  .dark .ring-group-card .rg-card-header:hover {
    background: #4b5563;
  }
}

/* Card name */
.ring-group-card .rg-card-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dark .ring-group-card .rg-card-name {
  color: #f9fafb;
}

/* Health badge */
.ring-group-card .rg-health-badge {
  font-size: 0.6875rem;
  padding: 2px 8px;
  border-radius: 9999px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.ring-group-card .rg-health-badge.presence-available {
  background-color: #dcfce7;
  color: #166534;
}

.dark .ring-group-card .rg-health-badge.presence-available {
  background-color: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

.ring-group-card .rg-health-badge.presence-away {
  background-color: #fef3c7;
  color: #92400e;
}

.dark .ring-group-card .rg-health-badge.presence-away {
  background-color: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.ring-group-card .rg-health-badge.presence-offline {
  background-color: #fee2e2;
  color: #991b1b;
}

.dark .ring-group-card .rg-health-badge.presence-offline {
  background-color: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* Expand icon rotation */
.ring-group-card .rg-expand-icon {
  transition: transform 0.2s ease;
}

.ring-group-card .rg-expand-icon.rotate-180 {
  transform: rotate(180deg);
}

/* Active calls section */
.ring-group-card .rg-active-calls {
  border-top: 1px solid #e5e7eb;
}

.dark .ring-group-card .rg-active-calls {
  border-color: #374151;
}

/* Expanded section */
.ring-group-card .rg-card-expanded {
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  max-height: 280px;
  overflow-y: auto;
}

.dark .ring-group-card .rg-card-expanded {
  border-color: #374151;
  background: #111827;
}

/* Members header in expanded view */
.ring-group-card .rg-members-header {
  padding: 8px 16px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
}

.dark .ring-group-card .rg-members-header {
  color: #9ca3af;
  background: #1f2937;
  border-color: #374151;
}

/* Member row in expanded view */
.ring-group-card .rg-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.15s ease;
  background-color: transparent;
}

.ring-group-card .rg-member-row:last-child {
  border-bottom: none;
}

@media (hover: hover) {
  .ring-group-card .rg-member-row:hover {
    background-color: #e5e7eb;
  }
}

.dark .ring-group-card .rg-member-row {
  border-color: #374151;
}

@media (hover: hover) {
  .dark .ring-group-card .rg-member-row:hover {
    background-color: #374151;
  }
}

/* Ringing member row highlight */
.ring-group-card .rg-member-row.rg-member-ringing {
  background-color: #fef3c7;
}

.dark .ring-group-card .rg-member-row.rg-member-ringing {
  background-color: rgba(245, 158, 11, 0.15);
}

@media (hover: hover) {
  .ring-group-card .rg-member-row.rg-member-ringing:hover {
    background-color: #fde68a;
  }
}

@media (hover: hover) {
  .dark .ring-group-card .rg-member-row.rg-member-ringing:hover {
    background-color: rgba(245, 158, 11, 0.25);
  }
}

/* Member name */
.ring-group-card .rg-member-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dark .ring-group-card .rg-member-name {
  color: #f9fafb;
}

/* Member extension */
.ring-group-card .rg-member-ext {
  font-size: 0.75rem;
  color: #9ca3af;
}

.dark .ring-group-card .rg-member-ext {
  color: #6b7280;
}

/* Member status text */
.ring-group-card .rg-member-status {
  font-size: 0.75rem;
  color: #6b7280;
}

.dark .ring-group-card .rg-member-status {
  color: #9ca3af;
}

.ring-group-card .rg-member-status.status-oncall {
  color: #ef4444;
}

.dark .ring-group-card .rg-member-status.status-oncall {
  color: #f87171;
}

.ring-group-card .rg-member-status.status-ringing {
  color: #f59e0b;
}

.dark .ring-group-card .rg-member-status.status-ringing {
  color: #fbbf24;
}

/* Member action buttons */
.ring-group-card .rg-member-action {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  background: transparent;
  color: #6b7280;
  font-size: 0.75rem;
}

@media (hover: hover) {
  .ring-group-card .rg-member-action:hover {
    background-color: #d1d5db;
    color: #111827;
  }
}

.dark .ring-group-card .rg-member-action {
  color: #9ca3af;
}

@media (hover: hover) {
  .dark .ring-group-card .rg-member-action:hover {
    background-color: #4b5563;
    color: #f9fafb;
  }
}

/* Queue Members Container - Status count spacing */
#queueMembersContainer span.text-xs.font-bold.text-emerald-600,
#queueMembersContainer span.text-xs.font-bold.text-amber-600,
#queueMembersContainer span.text-xs.font-bold.text-blue-600,
#queueMembersContainer span.text-xs.font-bold.text-slate-600 {
  margin-left: 5px;
  margin-right: 5px;
}

/* Queue Members List - Status badge font size */
#queueMembersListContent .rounded-full {
  font-size: 12px;
}

/* Queue Members Container - Status summary labels font size */
#queueMembersContainer .menu-options-header .grid span:last-child {
  font-size: 14px;
}

/* Queue Members List - Row font size */
#queueMembersListContent .menu-option-row {
  font-size: 14px;
}

/* Count badges font size */
.bg-indigo-500.rounded-full {
  font-size: 14px;
}

/* Queue Members Card font size */
#queueMembersContainer .menu-options-card {
  font-size: 14px;
}

/* ========================================
   ADMIN LOGIN PAGE STYLES
   ======================================== */

/* Admin Login - Background gradient (light mode) */
.admin-login-bg {
  background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 50%, #f8fafc 100%);
}

/* Admin Login - Background gradient (dark mode) */
html.dark .admin-login-bg {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}

/* Admin Login - Card styling */
.admin-login-card {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
}

html.dark .admin-login-card {
  background: rgba(31, 41, 55, 0.95);
}

/* Admin Login - Button (indigo gradient) */
.btn-admin-login {
  background: linear-gradient(to right, #6366f1, #4f46e5);
  transition: all 0.2s ease;
}

@media (hover: hover) {
  .btn-admin-login:hover {
    background: linear-gradient(to right, #4f46e5, #4338ca);
  }
}

.btn-admin-login:focus {
  outline: none;
  box-shadow: 0 0 0 2px #c7d2fe, 0 0 0 4px #6366f1;
}

/* ========================================
   LOGIN BUTTON GRADIENT UTILITIES
   ======================================== */

/* Blue gradient for portal login button */
.bg-gradient-to-r.from-blue-600.to-blue-700 {
  background: linear-gradient(to right, #2563eb, #1d4ed8) !important;
}

@media (hover: hover) {
  .bg-gradient-to-r.from-blue-600.to-blue-700:hover,
  .hover\:from-blue-700:hover.hover\:to-blue-800:hover {
    background: linear-gradient(to right, #1d4ed8, #1e40af) !important;
  }
}

/* Indigo gradient for admin login button */
.bg-gradient-to-r.from-indigo-500.to-indigo-600 {
  background: linear-gradient(to right, #6366f1, #4f46e5) !important;
}

@media (hover: hover) {
  .bg-gradient-to-r.from-indigo-500.to-indigo-600:hover,
  .hover\:from-indigo-600:hover.hover\:to-indigo-700:hover {
    background: linear-gradient(to right, #4f46e5, #4338ca) !important;
  }
}

/* ========================================
   RING GROUPS FILTER MODAL
   ======================================== */

.rg-filter-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.rg-filter-modal.hidden {
  display: none;
}

.rg-filter-content {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

html.dark .rg-filter-content {
  background: #1f2937;
}

.rg-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}

html.dark .rg-filter-header {
  border-bottom-color: #374151;
}

.rg-filter-body {
  padding: 20px;
  overflow-y: auto;
  max-height: 60vh;
}

.rg-filter-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

html.dark .rg-filter-footer {
  border-top-color: #374151;
  background: #111827;
}

.rg-filter-btn-secondary {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  background: #e5e7eb;
  color: #374151;
  transition: background 0.15s;
}

@media (hover: hover) {
  .rg-filter-btn-secondary:hover {
    background: #d1d5db;
  }
}

html.dark .rg-filter-btn-secondary {
  background: #374151;
  color: #e5e7eb;
}

@media (hover: hover) {
  html.dark .rg-filter-btn-secondary:hover {
    background: #4b5563;
  }
}

.rg-filter-btn-primary {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  background: #6366f1;
  color: white;
  margin-left: auto;
  transition: background 0.15s;
}

@media (hover: hover) {
  .rg-filter-btn-primary:hover {
    background: #4f46e5;
  }
}

/* Ring group filter checkbox items */
.rg-filter-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

@media (hover: hover) {
  .rg-filter-checkbox:hover {
    background: #f3f4f6;
  }
}

@media (hover: hover) {
  html.dark .rg-filter-checkbox:hover {
    background: #374151;
  }
}

.rg-filter-checkbox input {
  width: 16px;
  height: 16px;
  accent-color: #6366f1;
}

.rg-filter-checkbox label {
  flex: 1;
  cursor: pointer;
  color: #374151;
  font-size: 14px;
}

html.dark .rg-filter-checkbox label {
  color: #e5e7eb;
}

/* ========================================
   CUSTOM FILTER GROUPS
   ======================================== */

/* Close button on custom group chips (using operator-filter-btn styling) */
.operator-filter-btn .chip-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  color: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
  margin-left: 2px;
  flex-shrink: 0;
}

.operator-filter-btn.active .chip-close {
  background: rgba(255, 255, 255, 0.2);
}

@media (hover: hover) {
  .operator-filter-btn .chip-close:hover {
    background: rgba(0, 0, 0, 0.2);
  }
}

@media (hover: hover) {
  .operator-filter-btn.active .chip-close:hover {
    background: rgba(255, 255, 255, 0.3);
  }
}

html.dark .operator-filter-btn .chip-close {
  background: rgba(255, 255, 255, 0.1);
}

html.dark .operator-filter-btn.active .chip-close {
  background: rgba(255, 255, 255, 0.2);
}

@media (hover: hover) {
  html.dark .operator-filter-btn .chip-close:hover {
    background: rgba(255, 255, 255, 0.2);
  }
}

@media (hover: hover) {
  html.dark .operator-filter-btn.active .chip-close:hover {
    background: rgba(255, 255, 255, 0.3);
  }
}

/* Custom group extension checkbox in modal */
.custom-group-extension-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

@media (hover: hover) {
  .custom-group-extension-item:hover {
    background: #f3f4f6;
  }
}

@media (hover: hover) {
  html.dark .custom-group-extension-item:hover {
    background: #374151;
  }
}

.custom-group-extension-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #6366f1;
  cursor: pointer;
}

.custom-group-extension-item label {
  flex: 1;
  cursor: pointer;
  color: #374151;
  font-size: 14px;
  user-select: none;
}

html.dark .custom-group-extension-item label {
  color: #e5e7eb;
}

/* Selected member chip in modal */
.selected-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #6366f1;
  color: white;
  border-radius: 6px;
  font-size: 12px;
}

.selected-member-chip .chip-remove {
  cursor: pointer;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.15s;
}

@media (hover: hover) {
  .selected-member-chip .chip-remove:hover {
    background: rgba(255, 255, 255, 0.3);
  }
}

/* ========================================
   SETTINGS VIEW STYLES
   ======================================== */

/* Settings View Container */
#settingsView {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  z-index: 1;
}

/* Ensure settings view is above contacts view on mobile */
@media (max-width: 849px) {
  /* Settings view should use fixed positioning on mobile, similar to contacts view */
  body.settings-open #settingsView:not(.hidden) {
    position: fixed !important;
    top: var(--header-height, 76px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100vh - var(--header-height, 76px)) !important;
    z-index: 50 !important; /* Higher than sidebar z-index: 30 and contacts view z-index: 35 */
    background: #ffffff !important;
    overflow-y: auto !important;
  }
  
  .dark body.settings-open #settingsView:not(.hidden) {
    background: #111827 !important;
  }
  
  /* Hide sidebar when settings is open on mobile */
  body.settings-open .conversations-sidebar,
  body.settings-open.no-conversation-selected .conversations-sidebar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* Ensure messageArea is visible when settings is open, even with no-conversation-selected */
  /* This is already handled above, but adding here for specificity */
  body.settings-open.no-conversation-selected .message-area,
  body.settings-open.no-conversation-selected #messageArea {
    display: flex !important;
  }
  
  body.settings-open.no-conversation-selected #settingsView:not(.hidden) {
    display: flex !important;
  }
  
  /* Ensure messageArea is visible and positioned correctly */
  body.settings-open #messageArea {
    display: flex !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* Force hide contacts view when settings is open */
  body.settings-open #contactsView {
    display: none !important;
    z-index: -1 !important;
  }
}

/* Settings Header */
#settingsView .settings-header {
  flex-shrink: 0;
}

/* Settings Content (Two Column Layout) */
.settings-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Category Sidebar */
.settings-sidebar {
  width: 200px;
  flex-shrink: 0;
  background: #f8f9fa;
  border-right: 1px solid #e9ecef;
  overflow-y: auto;
}

.dark .settings-sidebar {
  background: #111827;
  border-right-color: #374151;
}

.settings-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.settings-category {
  margin: 0;
  padding: 0;
  width: 100%;
}

.settings-category button {
  width: 100%;
  display: block;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  transition: all 0.15s;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  background: transparent;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  margin: 0;
}

.dark .settings-category button {
  color: #d1d5db;
}

.settings-category.active button {
  background: #e5e7eb !important;
  color: #111827;
  font-weight: 600;
}

.dark .settings-category.active button {
  background: #374151 !important;
  color: #ffffff;
}

/* Ensure active state fills entire button area */
.settings-sidebar ul {
  padding: 0.5rem;
}

.settings-sidebar ul li {
  margin-bottom: 0.25rem;
}

.settings-sidebar ul li:last-child {
  margin-bottom: 0;
}

@media (hover: hover) {
  .settings-category button:hover {
    background: #e5e7eb;
  }
}

@media (hover: hover) {
  .dark .settings-category button:hover {
    background: #374151;
  }
}

@media (hover: hover) {
  #resetSettingsBtn:hover {
    background: #e5e7eb;
  }
}

@media (hover: hover) {
  .dark #resetSettingsBtn:hover {
    background: #374151;
  }
}

/* Settings Panels */
.settings-panels {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.settings-panel {
  display: none;
}

.settings-panel.active {
  display: block;
}

.settings-panel h2 {
  margin-bottom: 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
}

.dark .settings-panel h2 {
  color: #ffffff;
}

/* Settings Items */
.settings-item {
  margin-bottom: 1.5rem;
}

.settings-item label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

.dark .settings-item label {
  color: #d1d5db;
}

.settings-item p {
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  color: #6b7280;
}

.dark .settings-item p {
  color: #9ca3af;
}

/* Theme Options */
.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 2px solid #d1d5db;
  border-radius: 0.5rem;
  transition: all 0.15s;
  background: var(--bg-primary, #ffffff);
  cursor: pointer;
  min-width: 100px;
}

.dark .theme-option {
  background: #1f2937;
  border-color: #4b5563;
}

@media (hover: hover) {
  .theme-option:hover {
    border-color: #f59e0b;
  }
}

.theme-option.border-amber-500 {
  border-color: #f59e0b;
  background: #fef3c7;
}

.dark .theme-option.border-amber-500 {
  background: rgba(245, 158, 11, 0.2);
}

.theme-option i {
  font-size: 1.5rem;
}

.theme-option span {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

.dark .theme-option span {
  color: #d1d5db;
}

/* Settings Search */
.settings-search input,
.settings-search-mobile input {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background: var(--bg-primary, #ffffff);
  color: #111827;
}

.settings-search input {
  width: 250px;
}

.settings-search-mobile {
  display: none;
}

.dark .settings-search input,
.dark .settings-search-mobile input {
  background: #1f2937;
  border-color: #4b5563;
  color: #ffffff;
}

.settings-search input:focus,
.settings-search-mobile input:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

/* Reset Button */
#resetSettingsBtn {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  transition: all 0.15s;
  font-size: 0.875rem;
  color: #6b7280;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dark #resetSettingsBtn {
  color: #9ca3af;
}

@media (hover: hover) {
  #resetSettingsBtn:hover {
    background: #e5e7eb;
    color: #374151;
  }
}

@media (hover: hover) {
  .dark #resetSettingsBtn:hover {
    background: #374151;
    color: #d1d5db;
  }
}

/* Settings Button Active State */
#settingsBtn.active {
  background: #fef3c7;
  color: #f59e0b;
}

.dark #settingsBtn.active {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

/* Mobile back button - hidden on desktop by default */
#settingsMobileBackBtn {
  display: none;
}

/* Mobile Responsive */
@media (max-width: 849px) {
  /* Mobile: Single column layout */
  .settings-content {
    flex-direction: column;
    position: relative;
  }
  
  /* Category sidebar - full width list on mobile */
  .settings-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: none;
    max-height: none;
    flex: 1;
    overflow-y: auto;
  }
  
  .dark .settings-sidebar {
    border-bottom-color: #374151;
  }
  
  /* Category buttons - larger touch targets on mobile */
  .settings-category button {
    padding: 1rem 1.25rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  /* Add arrow indicator for mobile */
  .settings-category button::after {
    content: '>';
    font-size: 1.25rem;
    color: #9ca3af;
    margin-left: auto;
  }
  
  .dark .settings-category button::after {
    color: #6b7280;
  }
  
  /* Hide panels by default on mobile - show only when active */
  .settings-panels {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary, #ffffff);
    padding: 1rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 10;
  }
  
  .dark .settings-panels {
    background: #111827;
  }
  
  /* Show panel when active on mobile */
  .settings-panels.mobile-active {
    transform: translateX(0);
  }
  
  /* Hide sidebar when panel is active on mobile */
  .settings-sidebar.mobile-hidden {
    display: none;
  }
  
  /* Mobile back button in header */
  #settingsMobileBackBtn {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    margin-right: 0.5rem;
    color: #374151;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
  }
  
  .dark #settingsMobileBackBtn {
    color: #d1d5db;
  }
  
  @media (hover: hover) {
    #settingsMobileBackBtn:hover {
      background: #f3f4f6;
      border-radius: 0.375rem;
    }
  }
  
  @media (hover: hover) {
    .dark #settingsMobileBackBtn:hover {
      background: #374151;
    }
  }
  
  /* Hide back button when on category list */
  #settingsMobileBackBtn.hidden {
    display: none !important;
  }
  
  /* Ensure header title is visible on mobile */
  #settingsHeaderTitle {
    flex: 1;
  }
  
  /* Hide desktop search on mobile */
  .settings-search-desktop {
    display: none !important;
  }

  /* Mobile search behavior:
     Previously the entire .settings-search-mobile bar was always-visible on
     mobile (display: block !important), eating ~44px of vertical real estate
     even when the user wasn't searching. Switched to a fav-search-toggle
     style collapse — the new #settingsSearchToggle button (top-right,
     mobile-only) flips the `.expanded` class on this wrap. Defaults
     collapsed; expands on tap, focuses the input via settings.js. */
  .settings-search-mobile {
    display: none !important;
  }
  .settings-search-mobile.expanded {
    display: block !important;
  }
  
  .settings-search input {
    width: 100%;
  }
  
  /* Settings panels - full width on mobile */
  .settings-panel {
    width: 100%;
  }
  
  /* Settings items - more spacing on mobile */
  .settings-item {
    margin-bottom: 2rem;
  }
  
  /* Settings view positioning is handled in the media query above */
  /* This section is for desktop only - mobile uses fixed positioning */
}


/* ============================================
   URL LINK PREVIEW STYLES
   ============================================ */

/* URL Preview Card */
/* Increased specificity to override message bubble styles */
.message-bubble .url-preview-card,
.url-preview-card {
  display: block !important;
  max-width: 400px !important;
  margin-top: 0.5rem !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.75rem !important;
  overflow: hidden !important;
  background: #ffffff !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
  width: auto !important;
  height: auto !important;
}

@media (hover: hover) {
  .url-preview-card:hover {
    background: #f9fafb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
}

.dark .message-bubble .url-preview-card,
.dark .url-preview-card {
  border-color: #374151 !important;
  background: #1f2937 !important;
}

@media (hover: hover) {
  .dark .url-preview-card:hover {
    background: #374151;
  }
}

/* Preview Image */
.url-preview-image {
  aspect-ratio: 1.91 / 1;
  overflow: hidden;
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
}

.dark .url-preview-image {
  background: #111827;
  border-bottom-color: #374151;
}

.url-preview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Preview Content */
.url-preview-content {
  padding: 0.75rem;
}

.url-preview-site {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.375rem;
}

.dark .url-preview-site {
  color: #9ca3af;
}

.url-preview-favicon {
  width: 16px;
  height: 16px;
  border-radius: 2px;
}

.url-preview-icon {
  font-size: 0.875rem;
}

.url-preview-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: #111827;
  margin-bottom: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dark .url-preview-title {
  color: #f3f4f6;
}

.url-preview-description {
  font-size: 0.75rem;
  color: #6b7280;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dark .url-preview-description {
  color: #9ca3af;
}

/* ============================================
   VIDEO EMBED STYLES
   ============================================ */

.video-embed {
  max-width: 480px;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #000;
}

.video-thumbnail-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  background: #000;
}

.video-thumbnail-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease;
}

@media (hover: hover) {
  .video-thumbnail-wrapper:hover img {
    opacity: 0.85;
  }
}

.video-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.9;
}

@media (hover: hover) {
  .video-thumbnail-wrapper:hover .video-play-button {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
}

.video-play-bg {
  fill: #f00;
  transition: fill 0.2s ease;
}

@media (hover: hover) {
  .video-thumbnail-wrapper:hover .video-play-bg {
    fill: #cc0000;
  }
}

.video-iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

/* Vimeo specific */
.vimeo-embed .video-iframe {
  border-radius: 0.75rem;
}

/* ============================================
   FILE PREVIEW CARD STYLES
   ============================================ */

.file-preview-card {
  max-width: 360px;
  margin-top: 0.5rem;
}

.file-preview-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
}

.dark .file-preview-inner {
  background: #1f2937;
  border-color: #374151;
}

.file-preview-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}

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

.file-preview-name {
  font-weight: 500;
  font-size: 0.875rem;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .file-preview-name {
  color: #f3f4f6;
}

.file-preview-meta {
  font-size: 0.75rem;
  color: #6b7280;
}

.dark .file-preview-meta {
  color: #9ca3af;
}

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

.file-preview-actions button,
.file-preview-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 0.375rem;
  color: #6b7280;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
  .file-preview-actions button:hover,
  .file-preview-actions a:hover {
    background: #e5e7eb;
    color: #111827;
  }
}

@media (hover: hover) {
  .dark .file-preview-actions button:hover,
  .dark .file-preview-actions a:hover {
    background: #374151;
    color: #f3f4f6;
  }
}

/* ============================================
   IMAGE LIGHTBOX STYLES
   ============================================ */

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  cursor: zoom-out;
}

.image-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: default;
}

.image-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: background-color 0.15s ease;
}

@media (hover: hover) {
  .image-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
  }
}

/* ============================================
   PDF PREVIEW MODAL STYLES
   ============================================ */

.pdf-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.pdf-preview-container {
  background: white;
  border-radius: 0.5rem;
  width: 90%;
  max-width: 900px;
  height: 90%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dark .pdf-preview-container {
  background: #1f2937;
}

.pdf-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.dark .pdf-preview-header {
  border-bottom-color: #374151;
}

.pdf-preview-title {
  font-weight: 600;
  color: #111827;
}

.dark .pdf-preview-title {
  color: #f3f4f6;
}

.pdf-preview-close {
  color: #6b7280;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.375rem;
  transition: background-color 0.15s ease;
}

@media (hover: hover) {
  .pdf-preview-close:hover {
    background: #f3f4f6;
  }
}

@media (hover: hover) {
  .dark .pdf-preview-close:hover {
    background: #374151;
  }
}

.pdf-preview-iframe {
  flex: 1;
  border: none;
  width: 100%;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 640px) {
  .message-bubble .url-preview-card,
  .url-preview-card {
    max-width: 100% !important;
  }
  
  .video-embed {
    max-width: 100%;
  }
  
  .file-preview-card {
    max-width: 100%;
  }
  
  .pdf-preview-modal {
    padding: 0;
  }
  
  .pdf-preview-container {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}

/* ============================================
   HISTORICAL CALL SUMMARIES
   ============================================ */

/* Summary card styling */
.historical-summary-card {
  transition: box-shadow 0.2s ease, transform 0.1s ease;
}

@media (hover: hover) {
  .historical-summary-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
}

@media (hover: hover) {
  .dark .historical-summary-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}

/* Rotate animation for expand icon */
.historical-summary-card .rotate-90 {
  transform: rotate(90deg);
}

/* Smooth expand/collapse animation */
.historical-summary-card [id^="summaryContent"] {
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 500px;
  }
}

/* Prose styling for markdown content in summaries */
.historical-summary-card .prose ul {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding-left: 0;
}

.historical-summary-card .prose li {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
  line-height: 1.4;
}

.historical-summary-card .prose strong {
  color: inherit;
  font-weight: 600;
}

.historical-summary-card .prose p {
  margin-bottom: 0.25rem;
  line-height: 1.4;
}

.historical-summary-card .prose {
  line-height: 1.4;
}

/* Loading skeleton animation */
#historicalSummariesLoading > div {
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.dark #historicalSummariesLoading > div {
  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
  background-size: 200% 100%;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Empty state styling */
#historicalSummariesEmpty i {
  opacity: 0.5;
}

/* Transcript modal styling */
#transcriptModal {
  animation: fadeIn 0.2s ease-out;
}

#transcriptModal > div {
  animation: slideUp 0.3s ease-out;
}

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

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

/* Mobile responsive adjustments for historical summaries */
@media (max-width: 640px) {
  .historical-summary-card button {
    padding: 0.75rem;
  }
  
  .historical-summary-card [id^="summaryContent"] {
    padding: 0.75rem;
  }
  
  #historicalSummariesHeader {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ============================================
   VERTICAL NAVIGATION RAIL
   ============================================ */

.nav-rail {
  display: none; /* Hidden by default (mobile) */
  flex-direction: column;
  position: relative;
  width: 56px;
  background: var(--bg-primary, #ffffff);
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
  clip-path: inset(0 -10px 0 0); /* allow right shadow, clip top/bottom/left bleed */
  flex-shrink: 0;
  padding: 8px 0;
  transition: width 200ms ease-out;
  z-index: 50;
}

.dark .nav-rail {
  background: #1f2937; /* gray-800 - matches sidebar/call panel */
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.25);
}

/* Show rail on tablet and desktop */
@media (min-width: 850px) {
  .nav-rail {
    display: flex;
  }
}

/* Expanded state */
.nav-rail.expanded {
  width: 180px;
}

/* Nav items container */
.nav-rail-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 6px;
}

/* Footer at bottom of rail (e.g. Logout) - desktop only */
.nav-rail-footer {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  padding: 0 6px;
}

/* Individual nav item */
.nav-rail-item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: all 150ms ease;
  flex-shrink: 0;
}

/* Icon - removed duplicate, consolidated below */

.dark .nav-rail-item {
  color: #9ca3af;
}

@media (hover: hover) {
  .nav-rail-item:hover {
    background: #f3f4f6;
  }
}

@media (hover: hover) {
  .dark .nav-rail-item:hover {
    background: #1f2937;
  }
}

/* Ensure hidden utility beats the display:flex base rule */
.nav-rail-item.hidden {
  display: none !important;
}

/* Active state - matches call-nav-btn active */
.nav-rail-item.active {
  background: #eff6ff;
  color: #2563eb;
}

.dark .nav-rail-item.active {
  background: #1e3a8a;
  color: #60a5fa;
}

/* Active indicator bar */
.nav-rail-item.active::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: #2563eb;
  border-radius: 0 3px 3px 0;
}

.dark .nav-rail-item.active::before {
  background: #60a5fa;
}

/* Icon */
.nav-rail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  line-height: 1;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

/* Label (hidden when collapsed) */
.nav-rail-label {
  position: absolute;
  left: 48px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

/* Show labels when expanded */
.nav-rail.expanded .nav-rail-item {
  width: 100%;
  justify-content: flex-start;
  padding: 0 12px;
}

.nav-rail.expanded .nav-rail-label {
  position: static;
  margin-left: 12px;
  opacity: 1;
  pointer-events: auto;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Badge */
.nav-rail-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #ef4444;
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-rail.expanded .nav-rail-badge {
  position: static;
  margin-left: auto;
}

/* Call active indicator (green dot) */
.nav-rail-call-indicator {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid white;
  animation: pulse-green 2s infinite;
}

.dark .nav-rail-call-indicator {
  border-color: #111827;
}

.nav-rail.expanded .nav-rail-call-indicator {
  position: static;
  margin-left: auto;
  border: none;
}

@keyframes pulse-green {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Adjust sidebar width when rail is present.
   Note: `.conversations-sidebar` sits next to `#navRail` rather than spanning
   the full left panel; no direct width override needed here — the parent flex
   layout handles it. */

/* ============================================
   FAVORITES VIEW
   ============================================ */

.favorites-section {
  border-bottom: none;
}

/* Favorites Header Row (title + search toggle) */
.fav-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
}

.fav-header-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
}

.dark .fav-header-title {
  color: #f9fafb;
}

.fav-search-toggle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: background 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
  .fav-search-toggle:hover {
    background: #f3f4f6;
    color: #111827;
  }
}

.dark .fav-search-toggle {
  color: #9ca3af;
}

@media (hover: hover) {
  .dark .fav-search-toggle:hover {
    background: #374151;
    color: #f9fafb;
  }
}

.fav-search-toggle.active {
  background: #eff6ff;
  color: #3b82f6;
}

.dark .fav-search-toggle.active {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

#callPanelSearchToggle.placeholder {
  background: transparent !important;
  cursor: default !important;
  pointer-events: none;
}

/* Settings header search toggle — mobile-only.
   Mirrors the visual + behavior contract of #conversationsSearchToggle in
   the chat sidebar: a 32px FA-icon button that flips an `.expanded` class
   on a sibling input wrap. Hidden on desktop because the desktop layout
   already exposes a permanently-mounted `.settings-search-desktop` field
   directly in the header. The toggle only earns its keep on the narrower
   mobile layout where the inline search field would compete with the title
   for horizontal space. */
.settings-search-toggle {
  display: none;
}
body.is-mobile .settings-search-toggle {
  display: flex;
}

/* Header Filter Chips (desktop inline filters) */
.header-filter-chips {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  margin-right: 8px;
}

.header-filter-chip {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: background 0.15s ease, color 0.15s ease;
  padding: 0;
}

@media (hover: hover) {
  .header-filter-chip:hover {
    background: #f3f4f6;
    color: #6b7280;
  }
}

/* Missed-call / unread badge on header filter chips */
.chip-missed-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 0 0 1.5px #fff;
  z-index: 1;
}

.dark .chip-missed-badge {
  box-shadow: 0 0 0 1.5px #1f2937;
}

.header-filter-chip.active {
  background: transparent;
  color: #2563eb;
}

.dark .header-filter-chip {
  color: #6b7280;
}

@media (hover: hover) {
  .dark .header-filter-chip:hover {
    background: #374151;
    color: #d1d5db;
  }
}

.dark .header-filter-chip.active {
  background: transparent;
  color: #60a5fa;
}

@media (min-width: 640px) {

  .sidebar-dup-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #f97316;
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  #sidebarReviewDuplicatesBtn {
    position: relative;
    color: #f97316;
  }

  @media (hover: hover) {
    #sidebarReviewDuplicatesBtn:hover {
      background: #fff7ed;
      color: #ea580c;
    }
  }

  @media (hover: hover) {
    .dark #sidebarReviewDuplicatesBtn:hover {
      background: rgba(249, 115, 22, 0.15);
      color: #fb923c;
    }
  }

  /* Collapsible search input on desktop */
  .fav-search-input-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease, padding 0.2s ease;
    padding: 0 12px;
  }

  .fav-search-input-wrap.expanded {
    max-height: 60px;
    overflow: visible;
    padding: 4px 12px 10px;
  }
}

/* Mobile: search input collapsed by default, same as desktop */
@media (max-width: 639px) {
  .fav-search-input-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease, padding 0.2s ease;
    padding: 0 12px;
  }

  .fav-search-input-wrap.expanded {
    max-height: 60px;
    overflow: visible;
    padding: 4px 12px 10px;
  }

  .fav-search-toggle {
    min-height: 44px;
    min-width: 48px;
    width: 48px;
    background: #f1f3f5;
    border-radius: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
  }

  @media (hover: hover) {
    .fav-search-toggle:hover {
      background: #e5e7eb;
    }
  }

  .dark .fav-search-toggle {
    background: #374151;
    color: #9ca3af;
  }

  @media (hover: hover) {
    .dark .fav-search-toggle:hover {
      background: #4b5563;
    }
  }

  .fav-search-toggle.active {
    background: #dbeafe;
    color: #3b82f6;
  }

  .dark .fav-search-toggle.active {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
  }
}

.favorites-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  transition: background 0.15s ease;
}

.dark .favorites-section-header {
  background: #111827;
}

@media (hover: hover) {
  .favorites-section-header:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  }
}

@media (hover: hover) {
  .dark .favorites-section-header:hover {
    background: #111827;
  }
}

.favorites-section-header .section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}

.dark .favorites-section-header .section-title {
  color: #9ca3af;
}

.favorites-section-header .favorites-section-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #ef4444;
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -4px;
}

.favorites-section-header .favorites-section-badge.hidden {
  display: none;
}

.favorites-section-header .chevron {
  transition: transform 0.2s ease;
  color: #9ca3af;
  font-size: 0.7rem;
}

.favorites-section.collapsed .chevron {
  transform: rotate(-90deg);
}

.favorites-section-body {
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.favorites-section.collapsed .favorites-section-body {
  display: none;
}

.favorites-card {
  display: flex;
  align-items: center;
  padding: 12px 12px;
  min-height: 80px;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.15s ease;
  border-bottom: none;
}

@media (hover: hover) and (pointer: fine) {
  .favorites-card:hover {
    background: #f1f3f5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

.sidebar-contact-item {
  transition: background 0.15s ease, box-shadow 0.15s ease;
  min-height: 80px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

@media (hover: hover) {
  .sidebar-contact-item:hover {
    background: #f1f3f5;
  }

  .dark .sidebar-contact-item:hover {
    background: #374151;
  }
}

/* Selected state — matches .conversation-item.active (the chat-conversation-card
 * selection treatment). Full-item soft-blue background, no left border.
 * Kept as a dedicated CSS class (.active) rather than Tailwind utility bundles
 * applied inline so the two lists (chats, contacts) stay visually in lockstep
 * — change one rule and both update together. */
.sidebar-contact-item.active {
  background: #e7f5ff !important;
}

.dark .sidebar-contact-item.active {
  background: rgb(30 58 138 / 0.3) !important; /* blue-900/30, matches .conversation-item.active */
}

.group-member-avatars {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 2px 0;
}

.group-member-chip {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(to bottom right, #3b82f6, #9333ea);
  color: white;
  font-size: 8px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: -4px;
  border: 1.5px solid white;
  overflow: hidden;
  position: relative;
}

.dark .group-member-chip {
  border-color: #1f2937;
}

.group-member-chip:first-child {
  margin-left: 0;
}

.group-member-chip-fallback {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom right, #3b82f6, #9333ea);
  border-radius: 50%;
}

.group-member-chip-overflow {
  background: #e5e7eb;
  color: #6b7280;
  font-size: 7px;
  font-weight: 700;
}

.dark .group-member-chip-overflow {
  background: #4b5563;
  color: #d1d5db;
}

#contactPhone .group-member-avatars {
  gap: 4px;
}

#contactPhone .group-member-chip {
  width: 28px;
  height: 28px;
  font-size: 10px;
  margin-left: 0;
  border-width: 2px;
}

#contactPhone .group-member-chip-overflow {
  font-size: 9px;
}

.favorites-card .group-member-avatars,
.conversation-item .group-member-avatars {
  gap: 3px;
}

.favorites-card .group-member-chip,
.conversation-item .group-member-chip {
  margin-left: 0;
}

/* Make chips with data-user-id interactive (desktop only) */
.group-member-chip[data-user-id] {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
  .group-member-chip[data-user-id]:hover {
    transform: scale(1.2);
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  }
}

/* Disable chip hover on mobile */
body.is-mobile .group-member-chip[data-user-id] {
  cursor: default;
  pointer-events: none;
}

/* ── Chip Hover Popover ────────────────────────────────── */
.chip-popover {
  position: fixed;
  z-index: 9999;
  width: 220px;
  background: var(--bg-primary, #ffffff);
  border: 1px solid #e5e7eb;
  /* Invisible hit-area bridge above popover so mouse can traverse the gap */
  padding-top: 6px;
  margin-top: -6px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 12px;
  pointer-events: auto;
}

.chip-popover.hidden {
  display: none;
}

.dark .chip-popover {
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.chip-popover-arrow {
  position: absolute;
  top: -6px;
  width: 12px;
  height: 12px;
  background: var(--bg-primary, #ffffff);
  border-left: 1px solid #e5e7eb;
  border-top: 1px solid #e5e7eb;
  transform: translateX(-50%) rotate(45deg);
}

.dark .chip-popover-arrow {
  background: #1f2937;
  border-color: #374151;
}

.chip-popover-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.chip-popover-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(to bottom right, #3b82f6, #9333ea);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chip-popover-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.chip-popover-avatar-fallback {
  color: white;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

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

.chip-popover-name {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .chip-popover-name {
  color: #f3f4f6;
}

.chip-popover-subtitle {
  font-size: 11px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.dark .chip-popover-subtitle {
  color: #9ca3af;
}

.chip-popover-presence {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.chip-popover-presence .contact-presence-indicator {
  position: static;
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  border-radius: 50%;
  border-width: 2px;
  display: inline-block;
}

.chip-popover-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #f3f4f6;
}

.dark .chip-popover-actions {
  border-top-color: #374151;
}

.chip-popover-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  margin: 0;
  border-radius: 50%;
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  transition: filter 0.15s ease;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

@media (hover: hover) {
  .chip-popover-btn:hover {
    filter: brightness(0.88);
  }
}

.chip-popover-btn.profile-btn {
  background: #f77f00;
}

.chip-popover-btn.chat-btn {
  background: #3b82f6;
}

.chip-popover-btn.call-btn {
  background: #16a34a;
}

@media (hover: hover) and (pointer: fine) {
  .dark .favorites-card:hover {
    background: #374151;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}

.favorites-card.active {
  background: #e7f5ff !important;
}

.dark .favorites-card.active {
  background: rgba(30, 58, 138, 0.3) !important;
}


.favorites-card .fav-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}


.favorites-card .fav-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}

.favorites-card .fav-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.favorites-card .fav-avatar.avatar-img {
  position: relative;
  overflow: hidden;
  background: transparent;
}

.favorites-card .fav-avatar.avatar-img img {
  position: absolute;
  inset: 0;
}

.favorites-card .fav-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: 50%;
}

.favorites-card .fav-avatar.group-avatar {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}

.favorites-card .fav-avatar.sms-group-avatar {
  background: linear-gradient(135deg, #22c55e, #3b82f6);
}

.favorites-card .fav-avatar.sms-group-overlap {
  position: relative;
  background: transparent;
}

.favorites-card .fav-avatar.sms-group-overlap .overlap-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  z-index: 2;
}

.dark .favorites-card .fav-avatar.sms-group-overlap .overlap-top {
  border-color: #1f2937;
}

.favorites-card .fav-avatar.sms-group-overlap .overlap-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #0d9488);
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  z-index: 1;
}

.dark .favorites-card .fav-avatar.sms-group-overlap .overlap-bottom {
  border-color: #1f2937;
}

.favorites-card .fav-avatar.sms-group-overlap .overlap-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f97316;
  color: white;
  font-size: 0.55rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.favorites-card .fav-avatar.sms-group-overlap .overlap-single {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.favorites-card .fav-avatar.sms-group-overlap .overlap-group-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #22c55e;
  color: white;
  font-size: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.favorites-card .fav-avatar.sms-phone-avatar {
  background: #e5e7eb;
  color: #9ca3af;
}

.dark .favorites-card .fav-avatar.sms-phone-avatar {
  background: #4b5563;
  color: #9ca3af;
}

.favorites-card .fav-info {
  flex: 1;
  min-width: 0;
  margin-left: 12px;
}

.favorites-card .fav-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
}

.favorites-card .fav-time {
  font-size: 0.7rem;
  color: #9ca3af;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

.dark .favorites-card .fav-time {
  color: #6b7280;
}

.favorites-card .fav-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .favorites-card .fav-name {
  color: #f9fafb;
}

.favorites-card .fav-type-icon {
  font-size: 0.6rem;
  color: #9ca3af;
  flex-shrink: 0;
}

.favorites-card .fav-star {
  color: #eab308;
  font-size: 0.65rem;
  flex-shrink: 0;
}

.favorites-card .fav-subtitle {
  font-size: 0.75rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .favorites-card .fav-subtitle {
  color: #9ca3af;
}

.favorites-card .fav-preview-text {
  font-size: 0.7rem;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.dark .favorites-card .fav-preview-text {
  color: #6b7280;
}

.favorites-card .fav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 8px;
}

.favorites-card .fav-action-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  max-height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  flex-shrink: 0;
  padding: 0;
  transition: all 0.15s ease;
}

@media (max-width: 849px) {
  .favorites-section-header {
    padding: 12px 16px;
    min-height: 44px;
  }

  .favorites-card {
    padding: 14px 12px;
    min-height: 88px;
  }

  .favorites-card .fav-action-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }
  
  .favorites-card .fav-action-btn i {
    font-size: 1rem !important;
  }
}

.favorites-card .fav-action-btn.chat-btn {
  background: #3b82f6;
  color: white;
}

@media (hover: hover) {
  .favorites-card .fav-action-btn.chat-btn:hover {
    background: #2563eb;
  }
}

.favorites-card .fav-action-btn.call-btn {
  background: #16a34a;
  color: white;
}

@media (hover: hover) {
  .favorites-card .fav-action-btn.call-btn:hover {
    background: #15803d;
  }
}

.favorites-card .fav-action-btn.teams-call-btn {
  background: #4f46e5;
  color: white;
}

@media (hover: hover) {
  .favorites-card .fav-action-btn.teams-call-btn:hover {
    background: #4338ca;
  }
}

.favorites-card .fav-action-btn.profile-btn {
  background: #f77f00;
  color: white;
}

@media (hover: hover) {
  .favorites-card .fav-action-btn.profile-btn:hover {
    background: #d96e00;
  }
}

/* Panel member action buttons */
.panel-member-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 8px;
}

.panel-member-action-btn {
  padding: 0.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1;
  aspect-ratio: 1;
  transition: background 0.15s ease, transform 0.1s ease;
}

.panel-member-action-btn:active {
  transform: scale(0.92);
}

.panel-member-action-btn.profile-btn {
  background: #f77f00;
  color: white;
}

@media (hover: hover) {
  .panel-member-action-btn.profile-btn:hover {
    background: #d96e00;
  }
}

.panel-member-action-btn.chat-btn {
  background: #3b82f6;
  color: white;
}

@media (hover: hover) {
  .panel-member-action-btn.chat-btn:hover {
    background: #2563eb;
  }
}

.panel-member-action-btn.call-btn {
  background: #16a34a;
  color: white;
}

@media (hover: hover) {
  .panel-member-action-btn.call-btn:hover {
    background: #15803d;
  }
}

.favorites-card .fav-unread-badge {
  min-width: 18px;
  height: 18px;
  background: #ef4444;
  color: white;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  flex-shrink: 0;
}

/* ============================================
   COMPOSE FAB (Floating Action Button)
   ============================================ */

.compose-fab {
  position: fixed;
  z-index: 100;
  pointer-events: auto;
  /* Hidden until JavaScript positions it */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
}

.compose-fab.positioned {
  opacity: 1;
  visibility: visible;
}

.compose-fab-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* Mobile: hide desktop FAB, show inline mobile FAB */
@media (max-width: 849px) {
  #composeFab {
    display: none !important;
  }
}

/* Mobile compose FAB — sits next to segmented control */
.mobile-compose-fab {
  display: none;
}

@media (max-width: 849px) {
  .mobile-compose-fab {
    display: flex;
    position: absolute;
    right: 8px;
    bottom: calc(max(env(safe-area-inset-bottom, 0px), 1px) + 2px + 7px);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    z-index: 20;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .mobile-compose-fab:active {
    opacity: 0.8;
  }
}

@media (hover: hover) {
  .compose-fab-btn:hover {
    transform: scale(1.05);
  }
}

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

.compose-fab-btn:focus {
  outline: none;
}

.compose-fab-icon {
  font-size: 1.25rem;
  transition: transform 0.3s ease;
}

.compose-fab-btn.active .compose-fab-icon {
  transform: rotate(45deg);
}

.mobile-compose-fab i {
  transition: transform 0.3s ease;
}

.mobile-compose-fab.active i {
  transform: rotate(45deg);
}

/* FAB Modal — positioned from bottom-right of conversationsContainer */
.compose-fab-modal {
  position: absolute;
  bottom: 80px;
  right: 16px;
  width: 280px;
  z-index: 50;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transform-origin: bottom right;
  animation: fabModalIn 0.2s ease-out;
}

.dark .compose-fab-modal {
  background: #1f2937;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.compose-fab-modal.hidden {
  display: none;
}

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

.compose-fab-modal-header {
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #e5e7eb;
}

.dark .compose-fab-modal-header {
  color: #9ca3af;
}

/* Contacts FAB uses same .compose-fab styles as SMS FAB */
/* Positioned via JavaScript in positionContactsFab() */

.compose-fab-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}

@media (hover: hover) {
  .compose-fab-option:hover {
    background: #f3f4f6;
  }
}

@media (hover: hover) {
  .dark .compose-fab-option:hover {
    background: #374151;
  }
}

.compose-fab-option:not(:last-child) {
  border-bottom: 1px solid #e5e7eb;
}

.dark .compose-fab-option:not(:last-child) {
  border-bottom-color: #374151;
}

.compose-fab-option-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.compose-fab-option-text {
  flex: 1;
  min-width: 0;
}

.compose-fab-option-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 2px;
}

.dark .compose-fab-option-title {
  color: #f3f4f6;
}

.compose-fab-option-subtitle {
  font-size: 12px;
  color: #6b7280;
}

.dark .compose-fab-option-subtitle {
  color: #9ca3af;
}

/* FAB Modal Backdrop (optional, for click-outside) */
.compose-fab-backdrop {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: transparent;
}

/* FAB visibility is controlled by JavaScript based on:
   - Mobile vs desktop
   - Conversation selected vs sidebar view
   - Call panel vs conversations view
*/

/* ── Command Bar (Header Universal Search) ───────────────────── */

.command-bar {
  position: relative;
  z-index: 40;
}

.command-bar-input-wrapper {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 8px;
  padding: 6px 12px;
  transition: all 0.2s ease;
}

.command-bar-input-wrapper:focus-within {
  background: var(--bg-primary, #ffffff);
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.dark .command-bar-input-wrapper {
  background: #374151;
  border-color: #4b5563;
}

.dark .command-bar-input-wrapper:focus-within {
  background: #1f2937;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.command-bar-icon {
  color: #9ca3af;
  font-size: 14px;
  flex-shrink: 0;
  margin-right: 8px;
}

#commandBarInput {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  color: #111827;
  min-width: 0;
}

#commandBarInput::placeholder {
  color: #9ca3af;
}

.dark #commandBarInput {
  color: #f9fafb;
}

.dark #commandBarInput::placeholder {
  color: #6b7280;
}

.command-bar-shortcut {
  flex-shrink: 0;
  align-items: center;
  padding: 2px 6px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 500;
  color: #9ca3af;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  line-height: 1;
  pointer-events: none;
}

.dark .command-bar-shortcut {
  background: #374151;
  border-color: #4b5563;
  color: #6b7280;
}

/* Dropdown */
.command-bar-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 420px;
  overflow-y: auto;
  background: var(--bg-primary, #ffffff);
  border: 1px solid #e9ecef;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.06);
  z-index: 9999;
}

.dark .command-bar-dropdown {
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.command-bar-dropdown.hidden {
  display: none;
}

/* Section headers */
.cb-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}

.dark .cb-section-header {
  color: #9ca3af;
}

/* Result items */
.cb-item {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.1s ease;
  gap: 10px;
}

.cb-item.cb-highlighted {
  background: #f1f3f5;
}
@media (hover: hover) {
  .cb-item:hover {
    background: #f1f3f5;
  }
}

.dark .cb-item.cb-highlighted {
  background: #374151;
}
@media (hover: hover) {
  .dark .cb-item:hover {
    background: #374151;
  }
}

.cb-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.cb-avatar-wrapper .contact-presence-indicator {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  z-index: 2;
}

.dark .cb-avatar-wrapper .contact-presence-indicator {
  border-color: #1f2937;
}

.cb-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
  overflow: hidden;
}

.cb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.cb-avatar.avatar-img {
  position: relative;
  overflow: hidden;
  background: transparent;
}

.cb-avatar.avatar-img img {
  position: absolute;
  inset: 0;
}

.cb-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  font-size: 13px;
  font-weight: 600;
  border-radius: 50%;
}

.cb-avatar.group-avatar {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  font-size: 14px;
}

.cb-avatar.sms-group-avatar {
  background: linear-gradient(135deg, #22c55e, #3b82f6);
  font-size: 14px;
}

.cb-avatar.sms-phone-avatar {
  background: #e5e7eb;
  color: #9ca3af;
  font-size: 14px;
}

.dark .cb-avatar.sms-phone-avatar {
  background: #4b5563;
  color: #9ca3af;
}

.cb-avatar.sms-group-overlap {
  position: relative;
  background: transparent;
  overflow: visible;
}

.cb-avatar.sms-group-overlap .overlap-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: white;
  font-size: 0.55rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  z-index: 2;
}

.dark .cb-avatar.sms-group-overlap .overlap-top {
  border-color: #1f2937;
}

.cb-avatar.sms-group-overlap .overlap-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #0d9488);
  color: white;
  font-size: 0.55rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  z-index: 1;
}

.dark .cb-avatar.sms-group-overlap .overlap-bottom {
  border-color: #1f2937;
}

.cb-avatar.sms-group-overlap .overlap-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #f97316;
  color: white;
  font-size: 0.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

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

.cb-item-title {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .cb-item-title {
  color: #f9fafb;
}

.cb-item-subtitle {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.dark .cb-item-subtitle {
  color: #9ca3af;
}

.cb-item-meta {
  flex-shrink: 0;
  font-size: 11px;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cb-item-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #ef4444;
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cb-highlight {
  background: #fef3cd;
  border-radius: 2px;
  padding: 0 1px;
}

.dark .cb-highlight {
  background: #854d0e;
  color: #fef3cd;
}

.cb-empty-state {
  padding: 24px 14px;
  text-align: center;
  color: #6b7280;
  font-size: 13px;
}

.dark .cb-empty-state {
  color: #9ca3af;
}

.cb-loading {
  padding: 16px 14px;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
}

.cb-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  border-top: 1px solid #e9ecef;
  font-size: 11px;
  color: #9ca3af;
  background: #f9fafb;
  border-radius: 0 0 10px 10px;
}

.dark .cb-footer {
  border-top-color: #374151;
  background: #111827;
  color: #6b7280;
}

.cb-footer kbd {
  display: inline-flex;
  align-items: center;
  padding: 1px 4px;
  font-size: 10px;
  font-family: inherit;
  background: #e5e7eb;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  margin: 0 2px;
}

.dark .cb-footer kbd {
  background: #374151;
  border-color: #4b5563;
}

@media (max-width: 849px) {
  .command-bar {
    display: none !important;
  }
  .header-logo {
    display: none !important;
  }
}

/* ====================================
   Mobile Search Button & Full-Screen Overlay
   ==================================== */

.mobile-search-btn {
  display: none !important;
}

@media (max-width: 849px) {
  .mobile-search-btn {
    display: flex !important;
  }
}

.mobile-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: var(--bg-primary, #ffffff);
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

.mobile-search-overlay.hidden {
  pointer-events: none;
}

.mobile-search-overlay.show {
  transform: translateY(0);
}

.dark .mobile-search-overlay {
  background: #111827;
}

.mobile-search-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid #e5e7eb;
  background: var(--bg-primary, #ffffff);
  flex-shrink: 0;
}

.dark .mobile-search-header {
  background: #1f2937;
  border-bottom-color: #374151;
}

.mobile-search-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #374151;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.mobile-search-back:active {
  background: #f3f4f6;
}

.dark .mobile-search-back {
  color: #d1d5db;
}

.dark .mobile-search-back:active {
  background: #374151;
}

.mobile-search-header input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  font-size: 16px;
  color: #111827;
  outline: none;
  transition: border-color 0.15s ease;
}

.mobile-search-header input:focus {
  border-color: #6366f1;
  background: var(--bg-primary, #ffffff);
}

.mobile-search-header input::placeholder {
  color: #9ca3af;
}

.dark .mobile-search-header input {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

.dark .mobile-search-header input:focus {
  border-color: #818cf8;
  background: #1f2937;
}

.dark .mobile-search-header input::placeholder {
  color: #6b7280;
}

.mobile-search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.mobile-search-clear:active {
  background: #f3f4f6;
  color: #374151;
}

.dark .mobile-search-clear {
  color: #6b7280;
}

.dark .mobile-search-clear:active {
  background: #374151;
  color: #d1d5db;
}

.mobile-search-results {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-search-results .cb-item {
  padding: 14px 16px;
  min-height: 72px;
  border-bottom: 1px solid #f3f4f6;
}

.dark .mobile-search-results .cb-item {
  border-bottom-color: #374151;
}

.mobile-search-results .cb-section-header {
  padding: 10px 16px 6px;
}

.mobile-search-results .cb-footer {
  display: none;
}

/* ─── GIF Picker ─────────────────────────────────────────── */

/* The picker is sized + positioned at runtime by app.js:_positionGifPicker()
   to overlay #messagesContainer (the conversation thread area), with a small
   inset so the rounded corners read cleanly against the container edges.
   The width / max-height values here exist only as a fallback for cases
   where _positionGifPicker() can't find #messagesContainer (e.g. SMS tab
   without a thread); inline styles win when the JS path runs.
   2026-05-13: switched from a small popover anchored to #composeMenuBtn to
   a full-thread overlay so users have real room to search and browse. */
.gif-picker {
  position: fixed;
  width: 340px;
  max-height: 400px;
  z-index: 9999;
  background: var(--bg-primary, #ffffff);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  border: 1px solid #e9ecef;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: gifPickerFadeIn 140ms ease-out;
}

@keyframes gifPickerFadeIn {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

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

.dark .gif-picker {
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.gif-picker-search {
  padding: 12px;
  border-bottom: 1px solid #e9ecef;
  flex-shrink: 0;
}

.dark .gif-picker-search {
  border-bottom-color: #374151;
}

.gif-picker-search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  background: var(--bg-primary, #ffffff);
  color: #111827;
  outline: none;
}

.gif-picker-search input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.dark .gif-picker-search input {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

.gif-picker-results {
  /* Flexes to fill all remaining vertical space inside .gif-picker after
     the search header and footer. The old min-height/max-height clamp was
     designed for the 340×400 popover layout; in the full-thread overlay
     (2026-05-13) the parent .gif-picker carries the height, so this just
     needs to flex and scroll. */
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px;
  min-height: 0;
}

.gif-grid {
  display: grid;
  /* Responsive grid that adapts to whatever width JS gives .gif-picker.
     At the old 340 px popover width this yields ~2 columns (340 - 16 padding
     = 324 / 180 ≈ 1.8, but auto-fill rounds down then stretches); at the
     ~720 px full-thread overlay it yields 3-4 columns with 180-220 px tiles.
     Single source of truth instead of breakpoint-specific column counts. */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.gif-item {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.1s ease;
  background: #f3f4f6;
  outline: none;
}

.dark .gif-item {
  background: #374151;
}

@media (hover: hover) {
  .gif-item:hover {
    transform: scale(1.03);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
}

.gif-item-selected,
.gif-item:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
  transform: scale(1.03);
}

.gif-item img {
  width: 100%;
  height: auto;
  display: block;
  min-height: 80px;
  object-fit: cover;
}

.gif-loading,
.gif-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  padding: 24px;
}

.gif-picker-footer {
  padding: 8px 12px;
  border-top: 1px solid #e9ecef;
  text-align: center;
  flex-shrink: 0;
}

.dark .gif-picker-footer {
  border-top-color: #374151;
}

@media (prefers-reduced-motion: reduce) {
  @media (hover: hover) {
    .gif-item:hover {
      transform: none;
    }
  }
}

@media (max-width: 640px) {
  /* On mobile the JS-driven positioning already covers the full thread
     (no right contact panel, so #messagesContainer spans the viewport),
     so the picker naturally fills the screen. The previous popover-era
     fallbacks (width / left / max-height overrides) are no longer needed.
     Only the visual grid density is tuned here. */
  .gif-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
  }

  .gif-item img {
    min-height: 70px;
  }
}

/* GIF Preview Card (compose area) */
#gifPreview {
  max-width: 260px;
}

#gifPreview img#gifPreviewImg {
  max-height: 180px;
  width: auto;
  display: block;
}

@media (max-width: 640px) {
  #gifPreview {
    max-width: 200px;
  }
  #gifPreview img#gifPreviewImg {
    max-height: 140px;
  }
}

/* Meeting Assist: 60/40 split layout */
.ma-transcript-panel {
  flex: 3;
}

.ma-coaching-panel {
  flex: 2;
}

@media (max-width: 849px) {
  .ma-coaching-panel {
    display: none;
  }
  .ma-transcript-panel {
    flex: 1;
    border-right: none !important;
  }
}

/* ========================================
   BOT / AI ASSISTANT STYLES
   ======================================== */

.bot-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  background: #7c3aed;
  color: #fff;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.compact-btn {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(124, 58, 237, 0.3);
  background: transparent;
  color: #7c3aed;
  margin-left: 8px;
  cursor: pointer;
  vertical-align: middle;
  transition: all 0.15s ease;
}

.compact-btn:hover {
  background: #7c3aed;
  color: #fff;
}

.dark .compact-btn {
  color: #a78bfa;
  border-color: rgba(167, 139, 250, 0.3);
}

.dark .compact-btn:hover {
  background: #7c3aed;
  color: #fff;
}

/* ============================================================
   Bot Busy Indicator (2026-05-15)
   Renders the bot's "Working on another task" notice as a quiet
   background indicator: italic chip next to the typing indicator,
   plus a small clock icon on the conversation list item.
   Plan: /opt/accentapp/plans/2026-05-15-bot-busy-notice-as-event.md
   ============================================================ */
.typing-busy-reason {
  margin-left: 6px;
  font-style: italic;
  font-size: 0.85em;
  opacity: 0.7;
}

.bot-busy-clock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 14px;
  bottom: 10px;
  width: 18px;
  height: 18px;
  font-size: 11px;
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.12);
  border-radius: 9999px;
  pointer-events: none;
}

.dark .bot-busy-clock {
  color: #c4b5fd;
  background: rgba(167, 139, 250, 0.18);
}

/* ============================================================
   Action Groups in Bot Replies
   See /opt/accentapp/docs/plans/TEAMS_PORTAL_ACTION_BUTTONS_v1.md
   Widgets render under .message-bubble-received-container as a
   trusted-DOM sibling of the markdown bubble. All bot text reaches
   the DOM via textContent — CSS controls layout + visual chrome only.
   ============================================================ */

.action-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.625rem;
  width: fit-content;
  max-width: 100%;
}

.action-group-buttons {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.action-group-radio,
.action-group-checkbox {
  flex-direction: column;
  gap: 0.25rem;
}

.action-prompt {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 0.25rem;
  width: 100%;
}

.action-btn {
  padding: 0.4rem 0.9rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: all 0.2s;
  line-height: 1.2;
  font-family: inherit;
}

.action-btn.primary   { background: #3b82f6; color: #fff; }
.action-btn.secondary { background: #4b5563; color: #fff; }
.action-btn.danger    { background: #ef4444; color: #fff; }
.action-btn.success   { background: #10b981; color: #fff; }

.action-btn.primary:hover   { background: #2563eb; }
.action-btn.secondary:hover { background: #374151; }
.action-btn.danger:hover    { background: #dc2626; }
.action-btn.success:hover   { background: #059669; }

.action-btn:disabled,
.action-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.action-btn:disabled:hover,
.action-btn.disabled:hover {
  background: #4b5563;
}

.action-btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.action-radio-option,
.action-check-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #1f2937;
  transition: background 0.15s;
}

.action-radio-option:hover,
.action-check-option:hover {
  background: rgba(59, 130, 246, 0.08);
}

.action-radio-option:focus-within,
.action-check-option:focus-within {
  background: rgba(59, 130, 246, 0.12);
  outline: 2px solid #3b82f6;
  outline-offset: 1px;
}

.action-radio-option input[type="radio"],
.action-check-option input[type="checkbox"] {
  accent-color: #3b82f6;
  cursor: pointer;
  margin: 0;
}

.action-submit {
  align-self: flex-start;
  margin-top: 0.375rem;
  padding: 0.35rem 0.875rem;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.action-submit:hover {
  background: #2563eb;
}

.action-submit:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.action-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.action-submit:disabled:hover {
  background: #3b82f6;
}

.dark .action-submit {
  background: #2563eb;
  color: #fff;
}

.dark .action-submit:hover {
  background: #1d4ed8;
}

.dark .action-submit:focus-visible {
  outline-color: #60a5fa;
}

.dark .action-submit:disabled:hover {
  background: #2563eb;
}

.action-resolved {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  font-size: 0.8125rem;
  font-weight: 500;
  width: fit-content;
  margin: 0.25rem 0;
}

.action-click-pill-wrapper {
  display: flex;
  justify-content: center;
  margin: 0.25rem 0;
  width: 100%;
}

.action-click-pill {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  font-size: 0.75rem;
  font-weight: 500;
  max-width: 80%;
  text-align: center;
  line-height: 1.4;
}

/* Dark mode — match the .dark <html> class pattern used elsewhere in this file */

.dark .action-group {
  background: #1f2937;
  border-color: #374151;
}

.dark .action-prompt {
  color: #d1d5db;
}

.dark .action-radio-option,
.dark .action-check-option {
  color: #e5e7eb;
}

.dark .action-radio-option:hover,
.dark .action-check-option:hover {
  background: rgba(96, 165, 250, 0.12);
}

.dark .action-radio-option:focus-within,
.dark .action-check-option:focus-within {
  background: rgba(96, 165, 250, 0.18);
  outline-color: #60a5fa;
}

.dark .action-btn:disabled:hover,
.dark .action-btn.disabled:hover {
  background: #374151;
}

.dark .action-btn:focus-visible {
  outline-color: #60a5fa;
}

.dark .action-resolved {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
}

.dark .action-click-pill {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
}

/* ============================================
   Read Aloud — Per-message pause/skip button (v2.1)
   ============================================
   Injected by _injectTtsPauseButton() in app.js into the
   .message-bubble-received element. Hidden by default; revealed when
   the global tts-manager subscriber matches this button's data-message-id
   against the currently-speaking message. Click → ttsManager.skipCurrent().
   Plan: docs/plans/READ_ALOUD_PAUSE_CONTROL_PLAN.md
*/

/* Bubble needs position:relative so the absolutely-positioned button
   aligns to the bubble's top-right corner, not the container's. The
   container is already position:relative for other affordances. */
.message-bubble.message-bubble-received {
  position: relative;
}

/* Push the bubble content right while the button is visible, so a long
   single-line message doesn't collide with the icon. Reset when hidden. */
.message-bubble.message-bubble-received.has-tts-pause {
  padding-right: 36px;
}

.tts-pause-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.9);
  color: #4b5563;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  /* Larger touch target for mobile without enlarging visual footprint */
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}

.tts-pause-btn:hover {
  background: #ffffff;
  color: #1f2937;
}

.tts-pause-btn:active {
  transform: scale(0.92);
}

.tts-pause-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.tts-pause-btn.hidden {
  display: none;
}

.tts-pause-btn svg {
  display: block;
  pointer-events: none;
}

/* Dark mode */
.dark .tts-pause-btn {
  background: rgba(31, 41, 55, 0.9);
  border-color: rgba(255, 255, 255, 0.12);
  color: #d1d5db;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.dark .tts-pause-btn:hover {
  background: #374151;
  color: #f3f4f6;
}

.dark .tts-pause-btn:focus-visible {
  outline-color: #60a5fa;
}