/* _content/GovConn.Platform/Components/Portal/AI/AiAssistantWidget.razor.rz.scp.css */
/*
 * Scoped styling for the public AI assistant widget.
 *
 * The widget is injected at the end of the public portal shell (see PortalShell.razor) and is
 * positioned with `position: fixed`, so nothing here can rely on its ancestors' layout. Sizing,
 * position and stacking are kept `!important` on purpose: the widget must always float above
 * arbitrary portal page content (custom backgrounds, carousels, etc.) regardless of what other
 * CSS a given municipality page happens to load.
 *
 * Brand color comes from PortalShell's `BrandVariableStyle`, which overrides --gc-brand /
 * --gc-brand-ink / --gc-brand-tint (defined in govconn-design-system.css) with the municipality's
 * own PrimaryColor/SecondaryColor. Reading those custom properties here - instead of hardcoding a
 * color - means this widget re-themes per municipality for free and stays visually consistent
 * with the rest of the public portal.
 */

.govconn-ai-backdrop[b-1ejnh7ycvk] {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483644 !important;

    display: block !important;

    width: 100vw;
    height: 100dvh;

    padding: 0;
    border: 0;

    background: rgb(15 23 42 / 40%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    cursor: default;

    animation: govconnAiFadeIn-b-1ejnh7ycvk var(--gc-motion-base, 220ms) var(--gc-ease, cubic-bezier(.22, 1, .36, 1)) both;
}

.govconn-ai-panel[b-1ejnh7ycvk] {
    position: fixed !important;
    right: 1.5rem !important;
    bottom: 6rem !important;

    z-index: 2147483646 !important;

    display: flex !important;
    flex-direction: column;

    width: min(44rem, calc(100vw - 3rem)) !important;
    height: min(46rem, calc(100dvh - 7.5rem)) !important;
    min-height: 27.5rem;

    overflow: hidden;

    border: 1px solid var(--gc-line, #dfe5ee);
    border-radius: var(--gc-radius-xl, 32px);

    background: var(--gc-surface, #ffffff);

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    box-shadow:
        0 30px 60px -18px rgb(15 23 42 / 32%),
        0 12px 24px -12px rgb(15 23 42 / 22%),
        0 0 0 1px rgb(255 255 255 / 60%) inset;

    animation: govconnAiPanelRise-b-1ejnh7ycvk var(--gc-motion-slow, 420ms) var(--gc-ease, cubic-bezier(.22, 1, .36, 1)) both;
    transform-origin: bottom right;
}

/* ---------- Header ---------- */

.govconn-ai-header[b-1ejnh7ycvk] {
    background: linear-gradient(180deg, color-mix(in srgb, var(--gc-brand-tint, #e6f3ec) 55%, white), var(--gc-surface, #fff));
}

.govconn-ai-avatar[b-1ejnh7ycvk] {
    position: relative;
    background: linear-gradient(135deg, var(--gc-brand, #0f6e4f), color-mix(in srgb, var(--gc-brand-ink, #0b4d38) 82%, black));
    box-shadow:
        0 8px 18px -6px color-mix(in srgb, var(--gc-brand, #0f6e4f) 55%, transparent),
        0 0 0 4px color-mix(in srgb, var(--gc-brand, #0f6e4f) 14%, transparent);
}

.govconn-ai-status-dot--connecting[b-1ejnh7ycvk] {
    background: #f59e0b;
}

.govconn-ai-status-dot--online[b-1ejnh7ycvk] {
    background: var(--gc-brand, #0f6e4f);
}

.govconn-ai-status-dot--offline[b-1ejnh7ycvk] {
    background: #e11d48;
}

.govconn-ai-status-badge[b-1ejnh7ycvk] {
    border: 1px solid transparent;
}

.govconn-ai-status-badge--connecting[b-1ejnh7ycvk] {
    background: #fffbeb;
    color: #92400e;
    border-color: #fde68a;
}

.govconn-ai-status-badge--online[b-1ejnh7ycvk] {
    background: color-mix(in srgb, var(--gc-brand-tint, #e6f3ec) 70%, white);
    color: var(--gc-brand-ink, #0b4d38);
    border-color: color-mix(in srgb, var(--gc-brand, #0f6e4f) 22%, white);
}

.govconn-ai-status-badge--offline[b-1ejnh7ycvk] {
    background: #fef2f2;
    color: #9f1239;
    border-color: #fecdd3;
}

.govconn-ai-icon-btn[b-1ejnh7ycvk] {
    color: var(--gc-ink-500, #647087);
    transition: background-color var(--gc-motion-fast, 150ms) var(--gc-ease, cubic-bezier(.22, 1, .36, 1)), color var(--gc-motion-fast, 150ms) var(--gc-ease, cubic-bezier(.22, 1, .36, 1));
}

.govconn-ai-icon-btn:hover:not(:disabled)[b-1ejnh7ycvk] {
    background: var(--gc-ink-100, #eef1f6);
    color: var(--gc-ink-950, #0b1220);
}

.govconn-ai-newchat-btn[b-1ejnh7ycvk] {
    color: var(--gc-brand-ink, #0b4d38);
    border-color: color-mix(in srgb, var(--gc-brand, #0f6e4f) 24%, white);
    background: color-mix(in srgb, var(--gc-brand-tint, #e6f3ec) 40%, white);
    transition: background-color var(--gc-motion-fast, 150ms) var(--gc-ease, cubic-bezier(.22, 1, .36, 1)), border-color var(--gc-motion-fast, 150ms) var(--gc-ease, cubic-bezier(.22, 1, .36, 1));
}

.govconn-ai-newchat-btn:hover:not(:disabled)[b-1ejnh7ycvk] {
    background: color-mix(in srgb, var(--gc-brand-tint, #e6f3ec) 75%, white);
    border-color: color-mix(in srgb, var(--gc-brand, #0f6e4f) 38%, white);
}

/* ---------- Message area ---------- */

.govconn-ai-main[b-1ejnh7ycvk] {
    background:
        radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--gc-brand-tint, #e6f3ec) 45%, transparent), transparent 60%),
        var(--gc-surface-muted, #f6f8fb);
}

.govconn-ai-state-card[b-1ejnh7ycvk] {
    border-radius: var(--gc-radius-lg, 24px);
    box-shadow: var(--gc-shadow-sm, 0 1px 2px rgba(11, 18, 32, .07));
}

/* ---------- Suggested questions ---------- */

.govconn-ai-suggested-card[b-1ejnh7ycvk] {
    transition:
        transform var(--gc-motion-base, 220ms) var(--gc-ease, cubic-bezier(.22, 1, .36, 1)),
        border-color var(--gc-motion-base, 220ms) var(--gc-ease, cubic-bezier(.22, 1, .36, 1)),
        background-color var(--gc-motion-base, 220ms) var(--gc-ease, cubic-bezier(.22, 1, .36, 1)),
        box-shadow var(--gc-motion-base, 220ms) var(--gc-ease, cubic-bezier(.22, 1, .36, 1));
}

.govconn-ai-suggested-card:hover:not(:disabled)[b-1ejnh7ycvk] {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--gc-brand, #0f6e4f) 35%, white);
    background: color-mix(in srgb, var(--gc-brand-tint, #e6f3ec) 55%, white);
    box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--gc-brand, #0f6e4f) 45%, transparent);
}

.govconn-ai-suggested-card:hover:not(:disabled) .govconn-ai-suggested-icon[b-1ejnh7ycvk] {
    background: var(--gc-brand, #0f6e4f);
    color: white;
}

.govconn-ai-suggested-card:hover:not(:disabled) .govconn-ai-suggested-arrow[b-1ejnh7ycvk] {
    transform: translateX(3px);
    color: var(--gc-brand-ink, #0b4d38);
}

.govconn-ai-suggested-icon[b-1ejnh7ycvk] {
    background: color-mix(in srgb, var(--gc-brand-tint, #e6f3ec) 65%, white);
    color: var(--gc-brand-ink, #0b4d38);
    transition: background-color var(--gc-motion-base, 220ms) var(--gc-ease, cubic-bezier(.22, 1, .36, 1)), color var(--gc-motion-base, 220ms) var(--gc-ease, cubic-bezier(.22, 1, .36, 1));
}

/* ---------- Thinking indicator ---------- */

.govconn-ai-thinking-dot[b-1ejnh7ycvk] {
    background: var(--gc-brand, #0f6e4f);
}

/* ---------- Footer / composer ---------- */

.govconn-ai-input-shell[b-1ejnh7ycvk] {
    border: 1.5px solid var(--gc-line, #dfe5ee);
    background: var(--gc-surface, #fff);
    transition: border-color var(--gc-motion-fast, 150ms) var(--gc-ease, cubic-bezier(.22, 1, .36, 1)), box-shadow var(--gc-motion-fast, 150ms) var(--gc-ease, cubic-bezier(.22, 1, .36, 1));
}

.govconn-ai-input-shell:focus-within[b-1ejnh7ycvk] {
    border-color: var(--gc-brand, #0f6e4f);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--gc-brand, #0f6e4f) 16%, transparent);
}

/* The wrapping .govconn-ai-input-shell already shows a brand-colored ring on focus-within, so
   suppress the textarea's own focus-visible ring (from the site-wide :focus-visible rule in
   govconn-design-system.css) to avoid a double ring effect. */
.govconn-ai-textarea:focus-visible[b-1ejnh7ycvk] {
    box-shadow: none;
}

.govconn-ai-send-btn[b-1ejnh7ycvk] {
    background: linear-gradient(135deg, var(--gc-brand, #0f6e4f), color-mix(in srgb, var(--gc-brand-ink, #0b4d38) 78%, black));
    color: #fff;
    box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--gc-brand, #0f6e4f) 55%, transparent);
    transition: transform var(--gc-motion-fast, 150ms) var(--gc-ease, cubic-bezier(.22, 1, .36, 1)), box-shadow var(--gc-motion-fast, 150ms) var(--gc-ease, cubic-bezier(.22, 1, .36, 1)), filter var(--gc-motion-fast, 150ms) var(--gc-ease, cubic-bezier(.22, 1, .36, 1));
}

.govconn-ai-send-btn:hover:not(:disabled)[b-1ejnh7ycvk] {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 14px 26px -8px color-mix(in srgb, var(--gc-brand, #0f6e4f) 60%, transparent);
}

.govconn-ai-send-btn:disabled[b-1ejnh7ycvk] {
    background: var(--gc-ink-300, #c7d0dc);
    box-shadow: none;
}

.govconn-ai-counter--normal[b-1ejnh7ycvk] {
    color: var(--gc-ink-500, #647087);
}

.govconn-ai-counter--warning[b-1ejnh7ycvk] {
    color: #b45309;
}

.govconn-ai-counter--limit[b-1ejnh7ycvk] {
    color: #be123c;
}

/* ---------- Launcher ---------- */

.govconn-ai-launcher[b-1ejnh7ycvk] {
    position: fixed !important;
    right: 1.5rem !important;
    bottom: 1.5rem !important;

    z-index: 2147483647 !important;

    display: grid !important;
    place-items: center;

    width: 4rem !important;
    height: 4rem !important;

    padding: 0;
    border: 0;
    border-radius: 9999px;

    background: linear-gradient(135deg, var(--gc-brand, #0f6e4f), color-mix(in srgb, var(--gc-brand-ink, #0b4d38) 80%, black)) !important;
    color: white !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    cursor: pointer;

    box-shadow:
        0 20px 32px -8px color-mix(in srgb, var(--gc-brand, #0f6e4f) 50%, transparent),
        0 8px 14px -6px color-mix(in srgb, var(--gc-brand, #0f6e4f) 45%, transparent);

    transition:
        transform 180ms var(--gc-ease, cubic-bezier(.22, 1, .36, 1)),
        box-shadow 180ms var(--gc-ease, cubic-bezier(.22, 1, .36, 1));
}

.govconn-ai-launcher[b-1ejnh7ycvk]::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    border: 1.5px solid color-mix(in srgb, var(--gc-brand, #0f6e4f) 55%, transparent);
    opacity: 0;
    animation: govconnAiLauncherPulse-b-1ejnh7ycvk 2.6s var(--gc-ease, cubic-bezier(.22, 1, .36, 1)) infinite;
}

.govconn-ai-launcher:hover[b-1ejnh7ycvk] {
    transform: translateY(-0.25rem);

    box-shadow:
        0 26px 40px -10px color-mix(in srgb, var(--gc-brand, #0f6e4f) 55%, transparent),
        0 10px 18px -8px color-mix(in srgb, var(--gc-brand, #0f6e4f) 50%, transparent);
}

.govconn-ai-launcher:focus-visible[b-1ejnh7ycvk] {
    outline: 4px solid color-mix(in srgb, var(--gc-brand, #0f6e4f) 45%, white);
    outline-offset: 3px;
}

.govconn-ai-launcher--open[b-1ejnh7ycvk]::before {
    display: none;
}

/* ---------- Motion ---------- */

@keyframes govconnAiFadeIn-b-1ejnh7ycvk {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes govconnAiPanelRise-b-1ejnh7ycvk {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes govconnAiLauncherPulse-b-1ejnh7ycvk {
    0% {
        opacity: .55;
        transform: scale(1);
    }

    75%,
    100% {
        opacity: 0;
        transform: scale(1.22);
    }
}

@media (prefers-reduced-motion: reduce) {
    .govconn-ai-backdrop[b-1ejnh7ycvk],
    .govconn-ai-panel[b-1ejnh7ycvk] {
        animation: none;
    }

    .govconn-ai-launcher[b-1ejnh7ycvk]::before {
        animation: none;
        display: none;
    }
}

/* ---------- Responsive ---------- */

@media (max-width: 639px) {
    .govconn-ai-panel[b-1ejnh7ycvk] {
        top: 0.75rem !important;
        right: 0.75rem !important;
        bottom: 5rem !important;
        left: 0.75rem !important;

        width: auto !important;
        height: auto !important;
        min-height: 0;

        border-radius: var(--gc-radius-lg, 24px);
    }

    .govconn-ai-launcher[b-1ejnh7ycvk] {
        right: 0.75rem !important;
        bottom: 0.75rem !important;

        width: 3.5rem !important;
        height: 3.5rem !important;

        border-radius: 1rem;
    }
}

@media (max-width: 374px) {
    .govconn-ai-panel[b-1ejnh7ycvk] {
        top: 0.5rem !important;
        right: 0.5rem !important;
        bottom: 4.75rem !important;
        left: 0.5rem !important;
    }

    .govconn-ai-launcher[b-1ejnh7ycvk] {
        right: 0.5rem !important;
        bottom: 0.5rem !important;
    }
}

@media (max-height: 600px) and (min-width: 640px) {
    .govconn-ai-panel[b-1ejnh7ycvk] {
        top: 1rem !important;
        bottom: 5.5rem !important;

        height: auto !important;
        min-height: 0;
    }
}