/**
 * Accent SMS Portal Custom Styles
 * Enhances Tailwind CSS with custom components
 */

/* CSS Variables */
:root {
  --header-height: 76px; /* Approximate header height */
  
  /* 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 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;
}

.message-bubble-received {
  background: #e9ecef;
  color: #212529;
  border-radius: 1rem 1rem 1rem 0.25rem;
}

.dark .message-bubble-received {
  background: #374151;
  color: #f9fafb;
}

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

.markdown-content a {
  color: #2563eb;
  text-decoration: underline;
}

.dark .markdown-content a {
  color: #60a5fa;
}

.message-bubble-sent .markdown-content a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
}

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

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

/* Menu item base styles - ensure button resets */
#headerMenuDrawer .header-menu-item {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9375rem;
}

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

@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;
  }
  
  /* 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 */
  .no-conversation-selected .message-area {
    display: none !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 */
}

/* 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 {
  background-color: #3b82f6; /* blue-500 */
  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;
}

/* 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-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-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-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 {
  margin-bottom: 1rem;
}

.active-call-details {
  margin-bottom: 0;
}

.active-call-timer-wrapper {
  margin-top: 1.5rem;
}

/* 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 {
  height: 56px !important;
  max-height: 56px !important;
  width: 100% !important;
  max-width: none !important;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15), 0px 4px 12px 0px rgba(0, 0, 0, 0.15), 0px 4px 12px 0px rgba(0, 0, 0, 0.15), 0px 4px 12px 0px rgba(0, 0, 0, 0.15) !important;
}

/* Navigation Buttons - Inactive (Grayscale) State */
#showCallPanelBtn:not(.active),
#showSMSBtn:not(.active),
#showInternalBtn:not(.active),
#showContactsPageBtn:not(.active) {
  background: #9ca3af !important;
  color: #ffffff !important;
  opacity: 0.7;
}

.dark #showCallPanelBtn:not(.active),
.dark #showSMSBtn:not(.active),
.dark #showInternalBtn:not(.active),
.dark #showContactsPageBtn:not(.active) {
  background: #6b7280 !important;
  color: #e5e7eb !important;
  opacity: 0.7;
}

/* Navigation Buttons - Active (Full Color) State */
#showCallPanelBtn.active,
#showSMSBtn.active,
#showInternalBtn.active,
#showContactsPageBtn.active {
  background: #F77F00 !important;
  color: white !important;
  opacity: 1;
}

.dark #showCallPanelBtn.active,
.dark #showSMSBtn.active,
.dark #showInternalBtn.active,
.dark #showContactsPageBtn.active {
  background: #F77F00 !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: #f1f3f5;
  border: 1px solid #e9ecef;
  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: #e9ecef;
  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);
}

/* 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;
  }
  
  /* Add safe area padding for notched phones */
  #smsFilterNav,
  #chatFilterNav,
  #callPanelNav {
    padding-bottom: calc(0.625rem + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0 !important;
    min-height: 82px;
  }
  
  /* 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 horizontal layout (Option A) */
  .active-call-info-section {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    width: 100% !important;
    padding: 0.75rem 0 !important;
    gap: 0.75rem;
  }
  
  .active-call-avatar-wrapper {
    flex-shrink: 0;
    margin-bottom: 0 !important;
  }
  
  .active-call-avatar-wrapper > div {
    width: 56px !important;
    height: 56px !important;
    font-size: 1.25rem !important;
  }
  
  .active-call-details {
    flex: 1;
    min-width: 0;
    margin-bottom: 0 !important;
  }
  
  .active-call-details #activeCallName {
    font-size: 1rem !important;
    margin-bottom: 0.125rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .active-call-details #activeCallNumber {
    font-size: 0.75rem !important;
    margin-bottom: 0.125rem !important;
  }
  
  .active-call-details .active-call-status-text {
    font-size: 0.75rem !important;
  }
  
  .active-call-timer-wrapper {
    flex-shrink: 0;
    text-align: right;
    margin-top: 0 !important;
  }
  
  .active-call-timer-wrapper #callTimer {
    font-size: 1.5rem !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;
  }
}

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

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

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

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

/* 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;
  }
  
  /* Only show the header with nav buttons, hide everything else in sidebar */
  body.contacts-active-mobile #leftSidebarHeader {
    display: block !important;
  }
  
  body.contacts-active-mobile #conversationsContainer,
  body.contacts-active-mobile #callPanelContainer,
  body.contacts-active-mobile #leftSidebarContent {
    display: none !important;
  }
  
  /* Contacts view positioned below nav buttons */
  body.contacts-active-mobile #contactsView:not(.hidden) {
    position: fixed !important;
    top: calc(var(--header-height, 76px) + 101px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100vh - var(--header-height, 76px) - 95px) !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;
  }
  
  /* 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: calc(var(--header-height, 76px) + 101px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - var(--header-height, 76px) - 95px) !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: calc(var(--header-height, 76px) + 101px) !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) + 101px + 60px) !important;
    height: calc(100vh - var(--header-height, 76px) - 95px - 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;
  }
}




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

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

/* ======================================== */
/* SMS & Call Panel Navigation Height Fixes */
/* ======================================== */

/* Set consistent height for SMS filter navigation */
#smsFilterNav {
  height: 57px;
}

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

/* Filter buttons */
.operator-filter-btn {
  background-color: #f3f4f6;
  color: #4b5563;
  border: 1px solid transparent;
}

.operator-filter-btn:hover {
  background-color: #e5e7eb;
}

.operator-filter-btn.active {
  background-color: #f59e0b;
  color: white;
}

.dark .operator-filter-btn {
  background-color: #374151;
  color: #d1d5db;
}

.dark .operator-filter-btn:hover {
  background-color: #4b5563;
}

.dark .operator-filter-btn.active {
  background-color: #f59e0b;
  color: white;
}

/* 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: white;
  border: 1px solid #e5e7eb;
  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: white;
  border: 1px solid #e5e7eb;
  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;
}

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

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

.ring-group-card .rg-card-header:hover {
  background-color: #f9fafb;
}

.dark .ring-group-card .rg-card-header:hover {
  background-color: #111827;
}

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