/**
 * 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:  < 768px  (body.is-mobile, bp-xs, bp-sm, bp-md)
 *   - Tablet:  768px - 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
 *   - 767px/768px - mobile/tablet boundary (inconsistent, use 768px)
 *   - 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;
}

/* 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;
}

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

.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;
}

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

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

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

/* Global transitions for dark mode */
* {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

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

html {
  scroll-behavior: smooth;
}

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

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

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

::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

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

.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: all 0.2s ease;
}

.conversation-item:hover {
  transform: translateX(2px);
}

.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 */
}

/* 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%;
}

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

/* Bubble containers need overflow visible for reactions */
.message-bubble-sent-container,
.message-bubble-received-container {
  overflow: visible;
  position: relative;
}

.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: #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);
}

/* 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 {
  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);
}

#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 {
  background: #374151;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

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:hover,
#operatorConsoleSearch:focus,
#operatorConsoleModeSelect:hover,
#openDashboardBtn:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%) !important;
}

.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:hover,
html.dark #operatorConsoleSearch:focus,
html.dark #operatorConsoleModeSelect:hover,
html.dark #openDashboardBtn:hover {
  background: #374151 !important;
}

/* Conversation list - gradient dividers (light mode only) */
.conversation-item {
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.25) 10%, rgba(99, 102, 241, 0.25) 90%, transparent 100%) 1;
}

html.dark .conversation-item {
  border-image: none;
  border-bottom: 1px solid #374151;
}

/* 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 */
}

#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 */
}

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;
}

#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;
}

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;
}

#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;
}

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;
}

/* 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;
}

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

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

/* 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;
}

.code-block-wrapper:hover .code-copy-btn {
  opacity: 1;
}

.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);
}

.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);
}

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

/* 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;
}

#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;
}

.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;
}

.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 */
}

.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,
.markdown-content ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

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

.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;
}

.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;
}

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

/* Auto-growing textarea */
#messageInput {
  min-height: 40px;
  max-height: 120px;
  overflow-y: auto;
}

/* 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 < 768px
 *   body.is-tablet { }    - width 768px - 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 */
.main-content-area {
  transition: all 0.3s ease;
}

.conversations-sidebar {
  transition: all 0.3s ease;
  min-width: 450px;
}

.message-area {
  transition: all 0.3s ease;
}

/* 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 (includes mobile and tablet) */
@media (max-width: 1199px) {
  /* Contact panel as modal below 1200px */
  #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;
  }
  
  /* Adjust width for smaller screens */
  @media (max-width: 480px) {
    #contactPanel:not(.hidden) {
      width: 95vw !important;
      max-width: 95vw !important;
    }
  }
  
  /* Hide panel when hidden class is present */
  #contactPanel.hidden {
    display: none !important;
  }
  
  /* Show backdrop when panel is visible */
  #contactPanelBackdrop:not(.hidden) {
    display: block !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: 767px) {
  /* 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 */
    height: 100%;
    overflow: hidden;
  }
  
  /* Messages container - scrollable */
  .message-area #messagesContainer {
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0; /* Important for grid/flex scrolling */
  }
  
  /* Message compose area - always visible */
  .message-area .message-compose-area {
    flex-shrink: 0;
    max-height: 200px; /* Prevent compose from taking too much space */
    overflow-y: auto; /* Allow compose area to scroll if needed */
  }
  
  /* Thread header - fixed */
  .message-area .thread-header {
    flex-shrink: 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 {
    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 {
    font-size: 1rem;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Smaller phone number */
  .thread-header #contactPhone {
    font-size: 0.75rem;
    max-width: 140px;
    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 smooth scrolling in containers */
  .conversations-sidebar .flex-1,
  .message-area #messagesContainer {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  
  /* Prevent bounce scrolling on iOS */
  .conversations-sidebar .flex-1,
  .message-area #messagesContainer {
    overscroll-behavior-y: contain;
  }
}

/* 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 {
    max-width: 120px;
  }
  
  .thread-header #contactPhone {
    max-width: 120px;
  }
  
  /* 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 {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 0.875rem !important;
  }
  
  /* Smaller presence indicator */
  .thread-header #threadPresenceIndicator {
    width: 12px !important;
    height: 12px !important;
  }
  
  /* Truncate contact name more aggressively */
  .thread-header #contactName {
    font-size: 0.875rem;
    max-width: 90px;
  }
  
  /* Hide phone number on very narrow screens */
  .thread-header #contactPhone {
    display: none;
  }
  
  /* Hide some action buttons, keep essential ones */
  .thread-header #pinBtn,
  .thread-header #contactPanelToggle {
    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 */
.dark #leftNavDrawer #leftNavDarkModeBtn:hover,
html.dark #leftNavDrawer #leftNavDarkModeBtn:hover {
  background-color: rgba(55, 65, 81, 0.5) !important;
  color: #f3f4f6 !important;
}

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

.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 */
.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 */
}

.dark #headerMenuDrawer #menuDarkModeBtn:hover span,
html.dark #headerMenuDrawer #menuDarkModeBtn:hover span {
  color: #f3f4f6 !important; /* gray-100 - lighter text on 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: 521px) {
  /* 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;
  }
}

@media (max-width: 520px) {
  /* 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:hover,
  .conversation-item:active,
  .no-conversation-selected .conversation-item:hover,
  .no-conversation-selected .conversation-item:active {
    transform: none !important;
  }
  
  /* Reduce header padding on mobile */
  header .px-6 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  /* 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: 767px) {
  /* 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;
}

/* Enhanced conversation list for no-selection state */
.no-conversation-selected .conversation-item {
  padding: 1rem;
  margin-bottom: 0.25rem;
}

.no-conversation-selected .conversation-item:hover {
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dark .no-conversation-selected .conversation-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 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;
}

.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);
}

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

.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;
}

.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 */
.group-conversation:hover .group-indicator-icon {
  color: #059669;
}

.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;
}

.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;
}

.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;
}

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

.reaction-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.35rem;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
  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);
  min-width: 24px;
  min-height: 24px;
}

.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);
}

.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;
}

/* 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;
  }
}

/* Stack multiple reactions */
.message-reactions .reaction-badge:nth-child(2) {
  margin-left: 18px;
}

.message-reactions .reaction-badge:nth-child(3) {
  margin-left: 36px;
}

.message-reactions .reaction-badge:nth-child(4) {
  margin-left: 54px;
}


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

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

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

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

.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;
}

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

.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: pointer;
}

.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;
}

.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);
}

.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: 768px) {
  .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: 768px) {
  #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: 768px) {
  #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;
}

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

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

.presence-option:hover, .presence-preset:hover {
  background-color: #f3f4f6;
}

.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 */
.presence-status-icon.presence-on-phone-icon {
  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: #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:hover,
.autocomplete-number.bg-gray-100 {
  background: #e5e7eb !important;
}

.dark .autocomplete-number:hover,
.dark .autocomplete-number.dark\:bg-gray-700 {
  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);
}

.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);
}

.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;
}

.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);
}

.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;
}

.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);
}

.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);
}

.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);
}

.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);
}

.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);
}

.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: 768px) {
  .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;
}

.call-history-filter:hover {
  color: #212529;
  background: #f1f3f5;
}

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

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

.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;
}

.call-nav-btn:hover {
  color: #212529;
  background: #f1f3f5;
}

.call-nav-btn.active {
  color: #2563eb;
  background: #eff6ff;
}

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

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

.dark .call-nav-btn.active {
  color: #60a5fa;
  background: #1e3a8a;
}

/* 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;
}

.sms-nav-btn:hover {
  color: #212529;
  background: #f1f3f5;
}

.sms-nav-btn.active {
  color: #2563eb;
  background: #eff6ff;
}

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

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

.dark .sms-nav-btn.active {
  color: #60a5fa;
  background: #1e3a8a;
}

/* Mobile: Taller bottom navigation for easier tapping */
@media (max-width: 768px) {
  .call-nav-btn,
  .sms-nav-btn {
    height: 72px;
    padding: 0.5rem 0.75rem;
    gap: 0.25rem;
  }
  
  .call-nav-btn i,
  .sms-nav-btn i {
    font-size: 1.25rem;
  }
  
  .call-nav-btn .text-xs,
  .sms-nav-btn .text-xs {
    font-size: 0.8125rem;
  }
  
  /* Bottom nav sizing for mobile */
  /* NOTE: Safe area padding now handled by safe-areas.css */
  #smsFilterNav,
  #chatFilterNav,
  #callPanelNav {
    flex-shrink: 0 !important;
  }
  
  /* 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:hover,
.call-history-bottom-sheet-action:active {
  background: #f3f4f6;
}

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

.dark .call-history-bottom-sheet-action:hover,
.dark .call-history-bottom-sheet-action:active {
  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:hover,
.call-history-bottom-sheet-cancel button:active {
  background: #e5e7eb;
}

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

.dark .call-history-bottom-sheet-cancel button:hover,
.dark .call-history-bottom-sheet-cancel button:active {
  background: #4b5563;
}

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

/* SMS Nav Badge (Count Overlay) */
.sms-nav-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  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;
}

.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;
}

.call-control-btn.danger:hover {
  background: #b91c1c;
}

.dark .call-control-btn {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

.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;
}

.call-history-item:hover {
  background: #f1f3f5;
}

.dark .call-history-item:hover {
  background: #374151;
}

.call-history-item .call-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-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;
}

.call-panel-contact-card .contact-info-trigger {
  cursor: pointer;
  overflow: hidden;
  height: 55px;
}

.call-panel-contact-card .contact-info-trigger:hover .font-medium {
  color: #2563eb;
}

.dark .call-panel-contact-card .contact-info-trigger:hover .font-medium {
  color: #60a5fa;
}

.call-contact-btn,
.contact-chat-btn,
.contact-profile-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-profile-btn,
.dark .contact-profile-btn {
  background-color: #f77f00 !important;
}

.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 {
  transform: scale(0.95);
}

/* Transfer buttons in directory cards */
.transfer-buttons-inline button,
.transfer-overflow-menu .transfer-menu-trigger {
  width: 32px;
  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: 768px) {
  .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-panel-contact-card .contact-presence-indicator {
    width: 16px;
    height: 16px;
    bottom: -2px;
    right: -2px;
  }
  
  .call-contact-btn,
  .contact-chat-btn,
  .contact-profile-btn,
  .transfer-overflow-menu .transfer-menu-trigger,
  .transfer-buttons-inline button {
    width: 44px !important;
    height: 44px !important;
  }
  
  .call-contact-btn i,
  .contact-chat-btn i,
  .contact-profile-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 flex column for centering */
#callPanelContentInner {
  display: flex !important;
  flex-direction: column !important;
}

/* Vertically center active call view content */
#activeCallView:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  min-height: 0 !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 Header */
#activeCallHeader {
  /* Header styling will be enhanced in Phase 2 */
}

/* 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;
}

.call-tab:hover {
  background: #f1f3f5;
  color: #374151;
}

.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;
}

.m365-email-item:hover,
.m365-meeting-item:hover {
  background-color: rgba(59, 130, 246, 0.05);
}

.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;
  -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;
}

.call-banner button:hover {
  transform: translateY(-1px);
}

/* Mobile: Sticky call banner */
@media (max-width: 767px) {
  .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;
}

.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: #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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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);
}

.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;
}

.back-to-call-btn:hover::before {
  width: 300px;
  height: 300px;
}

.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 {
  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;
}

.call-banners-container::-webkit-scrollbar-thumb:hover {
  background: rgba(16, 185, 129, 0.7);
}

/* Empty state for container */
.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);
}

.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;
}

.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: 767px) {
  .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;
}

.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: 768px) {
  .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: 767px) {
  /* 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 */
@media (min-width: 1401px) {
  /* All features visible - default styles apply */
  .quick-actions {
    /* Quick actions appear on hover with full text */
  }
}

/* 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: 768px) {
  .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: 767px) {
  .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: 767px) {
  #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: 767px) {
  /* 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;
  }
  
  .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: 768px) {
  .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: Hide close button in Contacts header */
@media (max-width: 767px) {
  #closeContactsBtn {
    display: none !important;
  }
}

/* Mobile: Enable scrolling in contacts list */
@media (max-width: 767px) {
  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 and messages container */
#emptyThread,
#messagesContainer {
  background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 50%, #f8fafc 100%);
}

html.dark #emptyThread,
html.dark #messagesContainer {
  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: 767px) {
  #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 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 drop zone active state */
#messageThread.drag-over {
  background-color: rgba(59, 130, 246, 0.05);
}

/* 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 - enable smooth scrolling and prevent pull-to-refresh conflicts */
#messagesContainer {
  overscroll-behavior: contain; /* Prevents pull-to-refresh conflict on mobile */
  -webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
  scroll-behavior: auto; /* Instant scroll for programmatic scrolls */
}

/* 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;
}

/* ================================================
   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;
}

/* Show on hover (desktop only) */
.internal-message:hover .message-action-btn,
.message-action-btn:focus {
  opacity: 1;
}

.message-action-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.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 */
  .internal-message .message-bubble,
  .internal-message .message-bubble * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}

/* ====================================
   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: #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;
}

.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;
}

/* Message action menu items */
.message-menu-item {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  text-align: left;
}

/* 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;
}

.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;
}

.edit-cancel-btn:hover {
  background: #d1d5db;
}

.dark .edit-cancel-btn {
  background: #374151;
  color: #d1d5db;
}

.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;
}

.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;
}

.reply-quote:hover {
  background: #e5e7eb;
}

.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;
}

#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;
}

.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;
}

.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 */
.operator-console-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
}

@media (min-width: 600px) {
  .operator-console-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .operator-console-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .operator-console-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1500px) {
  .operator-console-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* 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;
}

.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;
}

.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 - 3 across by default (Call, Profile, Chat) */
.operator-console-card .card-actions {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 10px;
  justify-content: center;
}

/* When has active call, use 2 rows of 3 (transfers + main actions) */
.operator-console-card.has-active-call .card-actions {
  grid-template-columns: repeat(3, auto);
}

.operator-console-card .card-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
}

/* Call button (green) */
.operator-console-card .btn-call {
  background-color: #22c55e;
  color: white;
}

.operator-console-card .btn-call:hover {
  background-color: #16a34a;
}

/* Blind transfer button (amber) */
.operator-console-card .btn-blind {
  background-color: #f59e0b;
  color: white;
}

.operator-console-card .btn-blind:hover {
  background-color: #d97706;
}

/* Attended transfer button (blue) */
.operator-console-card .btn-attended {
  background-color: #3b82f6;
  color: white;
}

.operator-console-card .btn-attended:hover {
  background-color: #2563eb;
}

/* Voicemail transfer button (gray) */
.operator-console-card .btn-voicemail {
  background-color: #6b7280;
  color: white;
}

.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;
}

/* Profile button (orange - matches phone favorites) */
.operator-console-card .btn-profile {
  background-color: #f77f00;
  color: white;
}

.operator-console-card .btn-profile:hover {
  background-color: #d96e00;
}

/* Chat button (blue) */
.operator-console-card .btn-chat {
  background-color: #3b82f6;
  color: white;
}

.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 #operatorConsoleView {
  height: 100vh !important;
  max-height: 100vh !important;
}

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) */
.operator-console-grid-full {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
}

@media (min-width: 600px) {
  .operator-console-grid-full {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .operator-console-grid-full {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .operator-console-grid-full {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1500px) {
  .operator-console-grid-full {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ============================================================================
   MINI CARDS VIEW
   ============================================================================ */

/* Grid for mini cards - denser layout */
.operator-console-grid-mini {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 500px) {
  .operator-console-grid-mini {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 700px) {
  .operator-console-grid-mini {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 900px) {
  .operator-console-grid-mini {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1100px) {
  .operator-console-grid-mini {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 1300px) {
  .operator-console-grid-mini {
    grid-template-columns: repeat(7, 1fr);
  }
}

@media (min-width: 1500px) {
  .operator-console-grid-mini {
    grid-template-columns: repeat(8, 1fr);
  }
}

/* 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;
}

.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;
}

.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;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.75rem;
}

.operator-console-card-mini .btn-call {
  background-color: #22c55e;
  color: white;
}

.operator-console-card-mini .btn-call:hover {
  background-color: #16a34a;
}

.operator-console-card-mini .btn-blind {
  background-color: #f59e0b;
  color: white;
}

.operator-console-card-mini .btn-blind:hover {
  background-color: #d97706;
}

.operator-console-card-mini .btn-attended {
  background-color: #3b82f6;
  color: white;
}

.operator-console-card-mini .btn-attended:hover {
  background-color: #2563eb;
}

.operator-console-card-mini .btn-voicemail {
  background-color: #6b7280;
  color: white;
}

.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;
}

/* Profile button (orange - matches phone favorites) */
.operator-console-card-mini .btn-profile {
  background-color: #f77f00;
  color: white;
}

.operator-console-card-mini .btn-profile:hover {
  background-color: #d96e00;
}

/* Chat button (blue) */
.operator-console-card-mini .btn-chat {
  background-color: #3b82f6;
  color: white;
}

.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;
}

.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;
}

.operator-console-list-row:hover {
  background-color: #fef3c7;
}

.dark .operator-console-list-row {
  border-color: #374151;
}

.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;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.75rem;
}

.list-action-btn.btn-call {
  background-color: #22c55e;
  color: white;
}

.list-action-btn.btn-call:hover {
  background-color: #16a34a;
}

.list-action-btn.btn-blind {
  background-color: #f59e0b;
  color: white;
}

.list-action-btn.btn-blind:hover {
  background-color: #d97706;
}

.list-action-btn.btn-attended {
  background-color: #3b82f6;
  color: white;
}

.list-action-btn.btn-attended:hover {
  background-color: #2563eb;
}

.list-action-btn.btn-voicemail {
  background-color: #6b7280;
  color: white;
}

.list-action-btn.btn-voicemail:hover {
  background-color: #4b5563;
}

.list-action-btn.btn-profile {
  background-color: #f77f00;
  color: white;
}

.list-action-btn.btn-profile:hover {
  background-color: #d96e00;
}

.list-action-btn.btn-chat {
  background-color: #3b82f6;
  color: white;
}

.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;
}

.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;
}

.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);
}

.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);
}

.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;
}

.ring-group-card .rg-member-row:hover {
  background-color: #e5e7eb;
}

.dark .ring-group-card .rg-member-row {
  border-color: #374151;
}

.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);
}

.ring-group-card .rg-member-row.rg-member-ringing:hover {
  background-color: #fde68a;
}

.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;
}

.ring-group-card .rg-member-action:hover {
  background-color: #d1d5db;
  color: #111827;
}

.dark .ring-group-card .rg-member-action {
  color: #9ca3af;
}

.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;
}

.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;
}

.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;
}

.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;
}

.rg-filter-btn-secondary:hover {
  background: #d1d5db;
}

html.dark .rg-filter-btn-secondary {
  background: #374151;
  color: #e5e7eb;
}

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;
}

.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;
}

.rg-filter-checkbox:hover {
  background: #f3f4f6;
}

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);
}

.operator-filter-btn .chip-close:hover {
  background: rgba(0, 0, 0, 0.2);
}

.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);
}

html.dark .operator-filter-btn .chip-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

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;
}

.custom-group-extension-item:hover {
  background: #f3f4f6;
}

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;
}

.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: 768px) {
  /* 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;
}

.settings-category button:hover {
  background: #e5e7eb;
}

.dark .settings-category button: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: #ffffff;
  cursor: pointer;
  min-width: 100px;
}

.dark .theme-option {
  background: #1f2937;
  border-color: #4b5563;
}

.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: #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;
}

#resetSettingsBtn:hover {
  background: #e5e7eb;
  color: #374151;
}

.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: 768px) {
  /* 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: #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;
  }
  
  #settingsMobileBackBtn:hover {
    background: #f3f4f6;
    border-radius: 0.375rem;
  }
  
  .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;
  }
  
  /* Show mobile search below header */
  .settings-search-mobile {
    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;
}

.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;
}

.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;
  -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;
  -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;
}

.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;
}

.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;
}

.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;
}

.file-preview-actions button:hover,
.file-preview-actions a:hover {
  background: #e5e7eb;
  color: #111827;
}

.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;
}

.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;
}

.pdf-preview-close:hover {
  background: #f3f4f6;
}

.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;
}

.historical-summary-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.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;
  width: 56px;
  background: #ffffff;
  border-right: 1px solid #e9ecef;
  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 */
  border-right-color: #374151;
}

/* Show rail on tablet and desktop */
@media (min-width: 768px) {
  .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 {
  margin-top: auto;
  padding: 8px 6px 0;
}

/* 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;
}

.nav-rail-item:hover {
  background: #f3f4f6;
}

.dark .nav-rail-item:hover {
  background: #1f2937;
}

/* 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 */
@media (min-width: 768px) {
  .conversations-sidebar {
    /* Sidebar is now next to rail, not the full left panel */
  }
}

/* ============================================
   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;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
  transition: all 0.2s ease;
}

.compose-fab-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}

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

.compose-fab-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), 0 4px 14px rgba(59, 130, 246, 0.4);
}

.compose-fab-icon {
  font-size: 1.25rem;
  transition: transform 0.3s ease;
}

.compose-fab-btn.active .compose-fab-icon {
  transform: rotate(45deg);
}

/* FAB Modal */
.compose-fab-modal {
  position: absolute;
  bottom: 70px; /* Above the FAB button */
  right: 0;
  width: 280px;
  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;
}

.compose-fab-option:hover {
  background: #f3f4f6;
}

.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
*/