/*
  Baby Bob theme overrides for the Silktide Consent Manager.
  Mirrors the app design tokens (resources/css/app.css) so the banner matches
  the product in both light and dark mode. Loaded after the vendor stylesheet.
  Values are hard-coded (not var(--primary) …) so the banner is themed on first
  paint, before the Vite app stylesheet loads.
*/

#stcm-wrapper {
    --fontFamily: inherit;
    --backgroundColor: oklch(1 0 0);
    --textColor: oklch(0.413 0.073 289.1);
    --primaryColor: oklch(0.643 0.125 288.8);
    --iconBackgroundColor: oklch(0.643 0.125 288.8);
    --iconColor: oklch(1 0 0);
    --boxShadow: 0 12px 32px -12px oklch(0.413 0.073 289.1 / 0.28);
    --backdropBackgroundColor: oklch(0.206 0.042 287.5 / 0.5);
    --backdropBackgroundBlur: 2px;
}

.dark #stcm-wrapper {
    --backgroundColor: oklch(0.251 0.053 288.1);
    --textColor: oklch(0.931 0.019 293.7);
    --primaryColor: oklch(0.739 0.097 289.9);
    --iconBackgroundColor: oklch(0.739 0.097 289.9);
    --iconColor: oklch(0.241 0.052 288);
    --boxShadow: 0 12px 32px -12px oklch(0 0 0 / 0.6);
    --backdropBackgroundColor: oklch(0 0 0 / 0.6);
}

/* Match the app's rounded surfaces and hairline borders. */
#stcm-wrapper #stcm-banner,
#stcm-wrapper #stcm-modal {
    border-radius: 1rem;
    border: 1px solid oklch(0.945 0.023 296.7);
}

.dark #stcm-wrapper #stcm-banner,
.dark #stcm-wrapper #stcm-modal {
    border: 1px solid oklch(1 0 0 / 0.1);
}

/*
  Buttons mirror the app's rounded pills. The vendor's default hover swaps
  background<->text, which collapses to invisible text in dark mode — so the
  primary/secondary hover states are redefined here to always keep contrast.
*/
#stcm-wrapper .stcm-button {
    border-radius: 9999px;
    font-weight: 500;
    transition: background-color 0.15s, color 0.15s, filter 0.15s;
}

/* Primary — filled purple with light text, like the app's default button. */
#stcm-wrapper .stcm-button-primary {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
    color: oklch(1 0 0);
}

#stcm-wrapper .stcm-button-primary:hover {
    background-color: var(--primaryColor);
    color: oklch(1 0 0);
    filter: brightness(1.05);
}

.dark #stcm-wrapper .stcm-button-primary,
.dark #stcm-wrapper .stcm-button-primary:hover {
    color: oklch(0.241 0.052 288);
}

/* Secondary — outline on the surface, like the app's outline button. Hover
   keeps the text colour and only tints the surface, so it never disappears. */
#stcm-wrapper .stcm-button-secondary {
    background-color: var(--backgroundColor);
    border-color: color-mix(in oklab, var(--primaryColor) 45%, transparent);
    color: var(--textColor);
}

#stcm-wrapper .stcm-button-secondary:hover {
    background-color: color-mix(in oklab, var(--primaryColor) 12%, var(--backgroundColor));
    color: var(--textColor);
}

/* Smaller reopen icon (default 60px). 44px keeps a comfortable tap target. */
#stcm-wrapper #stcm-icon {
    width: 44px;
    height: 44px;
}

#stcm-wrapper #stcm-icon svg {
    width: 26px;
    height: 26px;
}

/*
  On viewports below Tailwind's `lg` breakpoint the app shows a fixed bottom
  navigation bar (h-16, see components/bottom-nav.tsx). Lift the persistent
  cookie icon and the bottom-anchored prompt above it so they don't overlap.
*/
@media (max-width: 1023.98px) {
    #stcm-wrapper #stcm-icon {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 4.75rem);
    }

    #stcm-wrapper #stcm-banner.stcm-pos-bottom-left,
    #stcm-wrapper #stcm-banner.stcm-pos-bottom-center,
    #stcm-wrapper #stcm-banner.stcm-pos-bottom-right {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 4.75rem);
    }
}

/*
  While an app modal is open Radix locks body scroll (`data-scroll-locked`).
  The Silktide reopen icon sits at z-index 99999 and would float over the
  sheet/dialog, so hide the persistent widget for the duration of the modal.
*/
body[data-scroll-locked] #stcm-wrapper #stcm-icon,
body[data-scroll-locked] #stcm-wrapper .stcm-nudge {
    display: none !important;
}