/*
 * SimplyPMG. login/auth pages: Anchor Blue page with a white sign-in card.
 * Loaded via a <link> that docker-compose.override.yml inserts into index.html at startup.
 * Scoped with :has() to the auth layout, the only page that renders assets/logo.svg.
 */
.min-h-screen:has(img[src="assets/logo.svg"]) {
  background-color: #005775 !important; /* Anchor Blue */
}

/* Sign-in card: always white with dark text, whatever the light/dark setting */
.min-h-screen:has(img[src="assets/logo.svg"]) main > div {
  --surface-primary: 255 255 255;
  --surface-tertiary: 238 240 242; /* Welcoming Glow (button hover) */
  --text-primary: 0 38 62;         /* Deep Ocean */
  --text-secondary: 79 117 139;    /* Soft Horizon */
  --border-light: 204 225 232;
  --border-medium: 204 225 232;
  --accent-primary: 0 87 117;
  --accent-primary-hover: 0 38 62;
  background-color: #ffffff !important;
  color: #00263e;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgb(0 38 62 / 0.25);
  margin: 1rem;
}

/* Footer links (Privacy / Terms) and the theme switcher sit on the blue */
.min-h-screen:has(img[src="assets/logo.svg"]) > [role="contentinfo"],
.min-h-screen:has(img[src="assets/logo.svg"]) > .absolute {
  --accent-primary: 255 255 255;
  --accent-primary-hover: 238 240 242;
  --text-primary: 255 255 255;
  --text-secondary: 238 240 242;
  --border-medium: 238 240 242;
  --surface-hover: 0 38 62;
  color: #ffffff;
}
.min-h-screen:has(img[src="assets/logo.svg"]) > [role="contentinfo"] a {
  color: #ffffff !important;
}

/*
 * SimplyPMG. sidebar: solid Anchor Blue; the only gradient is the left-to-right fade into the chat.
 * Desktop sidebar = the <aside> holding the open/close sidebar button; phones = #mobile-drawer.
 * Color tokens are redefined inside the sidebar only, so every element in it recolors together.
 */
aside:has([data-testid="close-sidebar-button"]),
aside:has([data-testid="open-sidebar-button"]),
#mobile-drawer {
  background: #005775 !important; /* Anchor Blue, the primary brand blue */
  --text-primary: 255 255 255;
  --text-secondary: 207 230 238;
  --text-tertiary: 160 200 215;
  --border-light: 255 255 255;
  --border-light-alpha: 0.14;
  --border-medium: 120 170 190;
  --border-inset: 255 255 255;
  --border-inset-alpha: 0.14;
  color: #ffffff;
}

/* Let the gradient show through panels that normally paint a solid fill */
:is(aside:has([data-testid="close-sidebar-button"]), aside:has([data-testid="open-sidebar-button"]), #mobile-drawer)
  :is(.bg-surface-primary-alt, .bg-surface-primary, .bg-surface-secondary) {
  background-color: transparent !important;
}
:is(aside:has([data-testid="close-sidebar-button"]), aside:has([data-testid="open-sidebar-button"]), #mobile-drawer)
  :is(.border-border-inset, .border-border-light) {
  border-color: rgb(255 255 255 / 0.14) !important;
}

/* Hover: translucent white */
:is(aside:has([data-testid="close-sidebar-button"]), aside:has([data-testid="open-sidebar-button"]), #mobile-drawer)
  :is(.hover\:bg-surface-hover:hover, .hover\:bg-surface-nav-hover:hover, .hover\:bg-surface-tertiary:hover,
      .hover\:bg-surface-active-alt:hover, .hover\:bg-surface-secondary-alt:hover, .hover\:bg-surface-secondary:hover,
      .bg-surface-hover, .data-\[active-item\]\:bg-surface-hover[data-active-item]) {
  background-color: rgb(255 255 255 / 0.10) !important;
}

/* Selected chat / active rail icon: Clear Sky tint with an accent bar */
:is(aside:has([data-testid="close-sidebar-button"]), aside:has([data-testid="open-sidebar-button"]), #mobile-drawer)
  :is(.bg-surface-nav-selected, .bg-surface-active-alt) {
  background-color: rgb(78 195 224 / 0.22) !important;
  box-shadow: inset 3px 0 0 #4ec3e0;
}

/* Search box: frosted glass */
:is(aside:has([data-testid="close-sidebar-button"]), aside:has([data-testid="open-sidebar-button"]), #mobile-drawer)
  .bg-surface-search {
  background-color: rgb(255 255 255 / 0.10) !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}
:is(aside:has([data-testid="close-sidebar-button"]), aside:has([data-testid="open-sidebar-button"]), #mobile-drawer)
  input::placeholder {
  color: rgb(207 230 238 / 0.8);
}

/* Send button: Anchor Blue -> Clear Sky gradient */
[data-testid="send-button"]:not(:disabled) {
  background-image: linear-gradient(90deg, #005775 0%, #4ec3e0 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgb(0 87 117 / 0.35);
}
[data-testid="send-button"]:not(:disabled):hover {
  background-image: linear-gradient(90deg, #00263e 0%, #005775 100%) !important;
}

/*
 * Sidebar gradient fading into the chat window (desktop only; on phones the drawer slides over the chat).
 * The chat pane is the element right after the sidebar <aside>. Its background repeats the sidebar
 * gradient, then a layer of the normal chat color fades in from the left over ~280px.
 */
@media (min-width: 768px) {
  aside:has([data-testid$="-sidebar-button"]) ~ div.flex-1 {
    /* left-to-right only: Anchor Blue at the sidebar edge, 20 smoothstep stops (zero slope at both ends, so the fade has no visible start) over 150px */
    background:
      linear-gradient(90deg,
        rgb(var(--surface-chat) / 0.000) 0px,
        rgb(var(--surface-chat) / 0.008) 8px,
        rgb(var(--surface-chat) / 0.031) 16px,
        rgb(var(--surface-chat) / 0.067) 24px,
        rgb(var(--surface-chat) / 0.114) 32px,
        rgb(var(--surface-chat) / 0.171) 39px,
        rgb(var(--surface-chat) / 0.236) 47px,
        rgb(var(--surface-chat) / 0.307) 55px,
        rgb(var(--surface-chat) / 0.383) 63px,
        rgb(var(--surface-chat) / 0.461) 71px,
        rgb(var(--surface-chat) / 0.539) 79px,
        rgb(var(--surface-chat) / 0.617) 87px,
        rgb(var(--surface-chat) / 0.693) 95px,
        rgb(var(--surface-chat) / 0.764) 103px,
        rgb(var(--surface-chat) / 0.829) 111px,
        rgb(var(--surface-chat) / 0.886) 118px,
        rgb(var(--surface-chat) / 0.933) 126px,
        rgb(var(--surface-chat) / 0.969) 134px,
        rgb(var(--surface-chat) / 0.992) 142px,
        rgb(var(--surface-chat) / 1.000) 150px),
      linear-gradient(#005775, #005775) !important;
  }

  /* Keep the header and the message-box strip from painting solid bands over the fade */
  aside:has([data-testid$="-sidebar-button"]) ~ div.flex-1 .bg-surface-canvas {
    background-color: transparent !important;
  }
  aside:has([data-testid$="-sidebar-button"]) ~ div.flex-1 [class*="from-surface-canvas"] {
    background-image: none !important;
  }

  /* No divider line between the sidebar and the chat: one continuous surface.
     :is(#mobile-drawer, ...) lifts specificity above the sidebar-wide border rule above. */
  :is(#mobile-drawer, aside:has([data-testid$="-sidebar-button"])) nav.border-r {
    border-right-color: transparent !important;
  }

  /* Resize handle: invisible until hovered or dragged, then a soft Clear Sky line */
  aside:has([data-testid$="-sidebar-button"]) [role="separator"] {
    background-color: transparent !important;
  }
  aside:has([data-testid$="-sidebar-button"]) [role="separator"]:hover,
  aside:has([data-testid$="-sidebar-button"]) [role="separator"]:active {
    background-color: rgb(78 195 224 / 0.45) !important;
  }
}

/* Sidebar scrollbars: faint white thumb on the dark gradient */
:is(aside:has([data-testid$="-sidebar-button"]), #mobile-drawer) * {
  scrollbar-color: rgb(255 255 255 / 0.22) transparent;
}
:is(aside:has([data-testid$="-sidebar-button"]), #mobile-drawer) ::-webkit-scrollbar-thumb {
  background-color: rgb(255 255 255 / 0.22);
}
:is(aside:has([data-testid$="-sidebar-button"]), #mobile-drawer) ::-webkit-scrollbar-track {
  background-color: transparent;
}

/* Welcome-screen greeting ("Hi Andres, ...") and agent name: Anchor Blue; Clear Sky in dark mode for contrast */
p.split-parent {
  color: #005775 !important;
}
.dark p.split-parent {
  color: #4ec3e0 !important;
}