/* Global themed styles for CS Multi-Chat dock to ensure consistent look on every page */

/* Root dock container */
#csDock {
  color: var(--fg, #212529);
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #dee2e6);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  z-index: 3000;
}
#csDock *, #csDock *::before, #csDock *::after { box-sizing: border-box; }

/* Header */
#csDock > div:first-child {
  /* this targets the inline-created header */
  border-bottom: 1px solid var(--border, #dee2e6) !important;
  background-color: var(--surface-2, #f8f9fa) !important;
  color: var(--fg, #212529) !important;
}
#csDock strong { color: var(--fg, #212529); }

/* Content area should inherit themed background */
#csDock > div:nth-child(2) { /* content */
  background: var(--surface, #ffffff);
  color: var(--fg, #212529);
}

/* Tabs, lists, and common containers inside the dock */
#csDock .nav-tabs .nav-link { color: var(--fg, #212529); border-color: var(--border, #dee2e6); }
#csDock .nav-tabs .nav-link.active {
  background-color: var(--surface, #ffffff);
  border-color: var(--border, #dee2e6) var(--border, #dee2e6) transparent;
  color: var(--fg, #212529);
}
#csDock .nav-tabs { border-bottom-color: var(--border, #dee2e6); }

#csDock .list-group { background: transparent; }
#csDock .list-group-item {
  background-color: var(--surface, #ffffff);
  color: var(--fg, #212529);
  border-color: var(--border, #dee2e6);
}
#csDock .list-group-item-action:hover, #csDock .list-group-item-action:focus {
  background-color: color-mix(in srgb, var(--primary, #002e57) 10%, var(--surface, #ffffff));
  color: var(--fg, #212529);
}

/* Form elements */
#csDock .form-control, #csDock .form-select {
  background-color: var(--surface, #ffffff);
  color: var(--fg, #212529);
  border-color: var(--border, #dee2e6);
}
#csDock .form-control:focus, #csDock .form-select:focus {
  border-color: var(--primary, #002e57);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary, #002e57) 25%, transparent);
}

/* Dropdowns */
#csDock .dropdown-menu {
  background-color: var(--surface, #ffffff);
  color: var(--fg, #212529);
  border-color: var(--border, #dee2e6);
}
#csDock .dropdown-item { color: var(--fg, #212529); }
#csDock .dropdown-item:hover, #csDock .dropdown-item:focus {
  background-color: var(--surface-2, #f8f9fa);
  color: var(--fg, #212529);
}
#csDock .dropdown-divider { border-top-color: var(--border, #dee2e6); }

/* Buttons (normalize outlines to theme) */
#csDock .btn-outline-secondary { color: var(--fg, #212529); border-color: var(--border, #dee2e6); }
#csDock .btn-outline-danger { border-color: var(--border, #dee2e6); }
#csDock .btn-outline-primary { border-color: var(--primary, #002e57); color: var(--primary, #002e57); }
#csDock .btn-outline-success { border-color: var(--success, #0d6efd); color: var(--success, #0d6efd); }

/* Small text/muted */
#csDock .text-muted { color: var(--muted, #6c757d) !important; }

/* Scroll containers inside dock should have themed scrollbars where supported */
#csDock .scroll-area { scrollbar-width: thin; }
#csDock .scroll-area::-webkit-scrollbar { height: 8px; width: 8px; }
#csDock .scroll-area::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--fg, #212529) 15%, transparent); border-radius: 4px; }

/* Minimized floating action button */
#csDockFab {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 64px !important;
  height: 64px !important;
  border-radius: 50%;
  border: none;
  background: transparent !important;
  color: var(--primary, #002e57) !important;
  box-shadow: none !important;
  z-index: 3001;
  display: none; /* controlled by JS */
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
/* Blinking/pulse indicator for minimized FAB (visible on dark theme too) */
#csDockFab.fab-blink {
  /* keep transparent background but add subtle glow to the icon */
}
#csDockFab.fab-blink i {
  text-shadow: 0 0 8px color-mix(in srgb, var(--primary, #002e57) 55%, transparent);
}
@keyframes csFabRingPulse {
  0% { transform: scale(1); opacity: 0.75; }
  70% { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}
/* Outer ring pulse */
#csDockFab.fab-blink::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--primary, #002e57);
  animation: csFabRingPulse 1.2s ease-out infinite;
  pointer-events: none;
}
/* Small notification dot in corner for extra contrast */
#csDockFab.fab-blink::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--primary, #002e57);
  border: 2px solid var(--surface, #ffffff);
  top: 6px; right: 6px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--primary, #002e57) 50%, transparent);
}

/* Ensure any inline light colors inside the dock are mapped to theme (override inline with !important) */
#csDock [style*="background-color: #f8f9fa"],
#csDock [style*="background:#f8f9fa"] { background-color: var(--surface-2, #f8f9fa) !important; }
#csDock [style*="background-color: #ffffff"],
#csDock [style*="background: #ffffff"],
#csDock [style*="background:#ffffff"] { background-color: var(--surface, #ffffff) !important; }
#csDock [style*="border-color: #dee2e6"],
#csDock [style*="border: 1px solid #dee2e6"] { border-color: var(--border, #dee2e6) !important; }
#csDock [style*="color: #6c757d"], #csDock [style*="color:#6c757d"] { color: var(--muted, #6c757d) !important; }

/* Z-index guard for pages with high z overlays */
#csDock, #csDockFab { z-index: 3000; }