/* =========================================================
   CredBrain — Phase 2: Deep Liquid Glass
   Requires Phase 1. Visual-only refinement.
   ========================================================= */

/* Stronger ambient depth */
body {
  background:
    radial-gradient(circle at 8% 0%, rgba(91, 170, 255, .28), transparent 24%),
    radial-gradient(circle at 82% 8%, rgba(75, 229, 216, .20), transparent 22%),
    radial-gradient(circle at 56% 92%, rgba(107, 102, 255, .15), transparent 28%),
    linear-gradient(135deg, #e5f0ff 0%, #f8fbff 45%, #e8f1fb 100%) !important;
}

/* Top header — deeper translucent glass */
.topbar,
.dashboard-header,
.dashboard-topbar,
.page-header,
.main-header {
  background:
    linear-gradient(135deg,
      rgba(15, 70, 165, .88) 0%,
      rgba(35, 98, 214, .82) 54%,
      rgba(30, 90, 199, .78) 100%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  backdrop-filter: blur(26px) saturate(165%);
  border: 1px solid rgba(255,255,255,.30) !important;
  box-shadow:
    0 18px 42px rgba(22, 69, 155, .20),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(20,70,150,.16) !important;
}

/* liquid highlight moving across header */
.topbar::before,
.dashboard-header::before,
.dashboard-topbar::before,
.page-header::before,
.main-header::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.18), transparent 19%),
    linear-gradient(110deg, transparent 0 44%, rgba(255,255,255,.11) 50%, transparent 56%);
  background-size: auto, 220% 100%;
  animation: cbLiquidSweep 11s ease-in-out infinite;
}

@keyframes cbLiquidSweep {
  0%, 20% { background-position: center, 120% 0; }
  55% { background-position: center, -20% 0; }
  100% { background-position: center, -20% 0; }
}

/* Sidebar looks like a floating frosted slab */
.sidebar {
  margin: 6px 0 6px 6px !important;
  height: calc(100vh - 12px) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(244,250,255,.58)) !important;
  border: 1px solid rgba(255,255,255,.88) !important;
  box-shadow:
    0 18px 50px rgba(37,77,135,.11),
    inset 0 1px 0 rgba(255,255,255,.94),
    inset -1px 0 0 rgba(84,132,201,.08) !important;
}

/* Stronger active navigation */
.nav-item.active {
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(224,239,255,.77)) !important;
  box-shadow:
    0 12px 30px rgba(48,111,212,.16),
    0 0 0 1px rgba(255,255,255,.92) inset,
    inset 4px 0 0 #3f8cff !important;
}

/* Provider/right rail becomes distinct floating pane */
.provider-panel,
.dashboard-right-panel,
.right-panel {
  margin: 16px 10px 10px 8px !important;
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(245,250,255,.60)) !important;
  border: 1px solid rgba(255,255,255,.92) !important;
  box-shadow:
    0 16px 42px rgba(37,77,135,.10),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* Main white cards gain visible frosted depth */
.provider-profile-card,
.provider-metric-card,
.priority-item,
.quick-action-card,
.composer-box,
.assistant-message,
.security-card,
[class*="dashboard-card"],
[class*="metric-card"],
[class*="summary-card"],
[class*="workspace-card"],
[class*="panel-card"],
[class*="content-card"] {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,.84), rgba(245,250,255,.68)) !important;
  border: 1px solid rgba(255,255,255,.96) !important;
  box-shadow:
    0 16px 36px rgba(37,77,135,.10),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(63,112,183,.05) !important;
}

/* Fine reflective streak on glass cards */
.provider-profile-card::after,
.provider-metric-card::after,
.priority-item::after,
.quick-action-card::after,
[class*="dashboard-card"]::after,
[class*="metric-card"]::after,
[class*="summary-card"]::after,
[class*="workspace-card"]::after,
[class*="panel-card"]::after {
  content:"";
  position:absolute;
  width:44%;
  height:180%;
  top:-55%;
  right:-22%;
  transform:rotate(18deg);
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}

/* Deep glass hero — visually obvious */
[class*="hero-card"],
[class*="ai-hero"],
[class*="assistant-hero"],
.dashboard-hero,
.ai-workspace-hero,
.welcome-hero {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 78% 42%, rgba(58,222,220,.18), transparent 22%),
    radial-gradient(circle at 61% 70%, rgba(104,108,255,.18), transparent 28%),
    linear-gradient(135deg,
      rgba(14,57,140,.92) 0%,
      rgba(26,74,167,.86) 48%,
      rgba(21,68,158,.82) 100%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  backdrop-filter: blur(26px) saturate(165%);
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow:
    0 22px 56px rgba(25,72,166,.24),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(9,43,115,.24) !important;
}

/* Common large dark-blue blocks in dashboard */
.dashboard-main section[style*="background"],
.dashboard-content section[style*="background"] {
  backdrop-filter: blur(20px);
}

/* Use targeted selector for large dark blue block if present */
.ai-workspace-card,
.credentialing-hero,
.hero-panel,
.dashboard-hero-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 44%, rgba(59,226,220,.18), transparent 22%),
    linear-gradient(135deg, rgba(15,63,153,.92), rgba(34,86,191,.82)) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow:
    0 22px 54px rgba(31,82,176,.24),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

/* Add refraction rings behind hero content if hero element exists */
[class*="hero-card"]::before,
[class*="ai-hero"]::before,
[class*="assistant-hero"]::before,
.ai-workspace-card::before,
.credentialing-hero::before,
.hero-panel::before,
.dashboard-hero-card::before {
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  right:8%;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle,
      transparent 0 28%,
      rgba(102,198,255,.10) 29% 30%,
      transparent 31% 42%,
      rgba(102,198,255,.07) 43% 44%,
      transparent 45% 56%,
      rgba(102,198,255,.05) 57% 58%,
      transparent 59%);
  animation: cbHeroBreath 7s ease-in-out infinite;
}

@keyframes cbHeroBreath {
  0%,100% { transform:translateY(-50%) scale(.96); opacity:.7; }
  50% { transform:translateY(-50%) scale(1.04); opacity:1; }
}

/* Buttons feel more glass-like */
.new-chat-button,
.send-button,
.primary-button,
.button-primary,
[class*="primary-btn"] {
  background:
    linear-gradient(145deg, rgba(42,117,246,.94), rgba(31,91,214,.90)) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  box-shadow:
    0 12px 28px rgba(31,91,214,.22),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

/* subtle luminous hover */
.provider-profile-card:hover,
.provider-metric-card:hover,
.quick-action-card:hover,
.priority-item:hover,
[class*="dashboard-card"]:hover,
[class*="metric-card"]:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 42px rgba(37,77,135,.14),
    0 0 0 1px rgba(91,154,255,.10),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

/* Preserve text readability */
.provider-panel,
.dashboard-right-panel,
.right-panel,
.sidebar {
  color: #17395f !important;
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .topbar::before,
  .dashboard-header::before,
  .dashboard-topbar::before,
  .page-header::before,
  .main-header::before,
  [class*="hero-card"]::before,
  [class*="ai-hero"]::before,
  [class*="assistant-hero"]::before,
  .ai-workspace-card::before,
  .credentialing-hero::before,
  .hero-panel::before,
  .dashboard-hero-card::before {
    animation: none !important;
  }
}