/* Shared Ask Fineas AI widget for the FAQ page and header popover. */

.ask-fineas-widget {
    --ask-bg: var(--bg-card, #2c2f48);
    --ask-bg-deep: var(--bg-card-dark, #1c1e2b);
    --ask-bg-hover: var(--bg-nav-hover, #3a3d5e);
    --ask-bg-input: var(--bg-input, #2e2e42);
    --ask-border: var(--border-medium, rgba(255, 255, 255, 0.15));
    --ask-border-subtle: var(--border-subtle, rgba(255, 255, 255, 0.06));
    --ask-accent: var(--color-primary, #9d6bff);
    --ask-accent-muted: var(--color-primary-glow, rgba(139, 92, 246, 0.35));
    --ask-accent-light: var(--color-primary-light, #a78bfa);
    --ask-text: var(--text-primary, #ffffff);
    --ask-text-sub: var(--text-secondary, #cccccc);
    --ask-text-muted: var(--text-muted, #aaaaaa);
    --ask-text-dim: var(--text-dim, rgba(255, 255, 255, 0.6));
    --ask-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.25));
    --ask-shadow-accent: var(--shadow-primary, 0 4px 12px rgba(139, 92, 246, 0.35));
    --ask-r-sm: var(--radius-sm, 6px);
    --ask-r-md: var(--radius-md, 8px);
    --ask-r-lg: var(--radius-lg, 12px);
    --ask-r-xl: var(--radius-xl, 16px);
    --ask-grad-card: var(--gradient-card, linear-gradient(145deg, #2e2f4c, #1e1f35));
    --ask-grad-accent: var(--gradient-accent-blue, linear-gradient(90deg, #8B5CF6, #3B82F6));
}

.ask-fineas-widget--embedded {
    margin-bottom: 32px;
}

.ask-fineas-widget--popover {
    position: relative;
}

.ask-fineas-widget__backdrop {
    position: fixed;
    inset: 0;
    border: none;
    padding: 0;
    background: rgba(10, 13, 24, 0.48);
    z-index: 940;
    cursor: default;
    display: none;
}

.ask-fineas-widget__panel {
    position: relative;
    background: var(--ask-grad-card);
    border: 1px solid var(--ask-accent-muted);
    border-radius: var(--ask-r-xl);
    overflow: hidden;
    box-shadow: var(--ask-shadow);
}

.ask-fineas-widget__panel::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: var(--ask-accent-muted);
    filter: blur(48px);
    pointer-events: none;
    z-index: 0;
}

.ask-fineas-widget__panel > * {
    position: relative;
    z-index: 1;
}

.ask-fineas-widget--embedded .ask-fineas-widget__panel {
    padding: 28px 28px 24px;
}

.ask-fineas-widget--popover .ask-fineas-widget__panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 20px 18px;
    z-index: 960;
}

.ask-fineas-widget__header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.ask-fineas-widget__intro {
    flex: 1;
}

.ask-fineas-widget__icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: var(--ask-r-lg);
    background: var(--ask-grad-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: var(--ask-shadow-accent);
}

.ask-fineas-widget__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ask-text);
    margin: 0 0 3px;
}

.ask-fineas-widget__subtitle {
    font-size: 0.875rem;
    color: var(--ask-text-muted);
    margin: 0;
    line-height: 1.5;
}

.ask-fineas-widget__close {
    border: none;
    background: transparent;
    color: var(--ask-text-dim);
    cursor: pointer;
    padding: 6px;
}

.ask-fineas-widget__limit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: var(--ask-r-sm);
    margin-bottom: 14px;
    letter-spacing: 0.01em;
}

.ask-fineas-widget__limit--available {
    background: var(--color-success-bg, rgba(34, 197, 94, 0.12));
    color: var(--color-success-bright, #22c55e);
    border: 1px solid var(--color-success-border, rgba(34, 197, 94, 0.35));
}

.ask-fineas-widget__limit--used {
    background: var(--color-warning-bg, rgba(249, 115, 22, 0.12));
    color: var(--color-warning, #f97316);
    border: 1px solid var(--color-warning-border, rgba(249, 115, 22, 0.35));
}

.ask-fineas-widget__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ask-fineas-widget__hint {
    margin: -2px 2px 0;
    line-height: 1.5;
}

.ask-fineas-widget__textarea {
    width: 100%;
    min-height: 80px;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--ask-border);
    border-radius: var(--ask-r-md);
    background: var(--ask-bg-input);
    color: var(--ask-text);
    font-size: 0.95rem;
    line-height: 1.6;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ask-fineas-widget__textarea::placeholder {
    color: var(--ask-text-dim);
}

.ask-fineas-widget__textarea:focus {
    outline: none;
    border-color: var(--ask-accent);
    box-shadow: 0 0 0 3px var(--ask-accent-muted);
}

.ask-fineas-widget__textarea:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ask-fineas-widget__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ask-fineas-widget__char-count {
    font-size: 0.78rem;
    color: var(--ask-text-dim);
}

.ask-fineas-widget__response {
    display: none;
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: var(--ask-r-md);
    background: rgba(139, 92, 246, 0.07);
    border: 1px solid var(--ask-accent-muted);
    border-left: 3px solid var(--ask-accent);
    line-height: 1.8;
    color: var(--ask-text-sub);
    font-size: 0.93rem;
    animation: askFineasFadeIn 0.3s ease;
}

.ask-fineas-widget__response p {
    margin: 0 0 0.75em;
}

.ask-fineas-widget__response p:last-child {
    margin-bottom: 0;
}

.ask-fineas-widget__response-heading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ask-text);
    margin: 1em 0 0.4em;
}

.ask-fineas-widget__response-heading:first-child {
    margin-top: 0;
}

.ask-fineas-widget__response-list {
    margin: 0.5em 0 0.75em 1.2em;
    padding: 0;
    list-style-type: disc;
}

.ask-fineas-widget__response-list li {
    margin-bottom: 0.35em;
}

.ask-fineas-widget__response-rule {
    border: none;
    border-top: 1px solid var(--ask-accent-muted);
    margin: 1em 0;
}

.ask-fineas-widget__response-link {
    display: inline;
    color: var(--ask-accent-light);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ask-fineas-widget__response-link:hover {
    opacity: 0.85;
}

.ask-fineas-widget__response.is-visible,
.ask-fineas-widget__error.is-visible {
    display: block;
}

.ask-fineas-widget__error {
    display: none;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: var(--ask-r-sm);
    background: var(--color-danger-bg, rgba(239, 68, 68, 0.1));
    color: var(--color-danger, #ef4444);
    border: 1px solid var(--color-danger-border, rgba(239, 68, 68, 0.35));
    font-size: 0.875rem;
}

.ask-fineas-widget__auth-prompt {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--ask-text-sub);
    flex-wrap: wrap;
}

.ask-fineas-widget__auth-prompt p {
    margin: 0;
}

@keyframes askFineasFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

@media (max-width: 768px) {
    .ask-fineas-widget--embedded .ask-fineas-widget__panel {
        padding: 20px 18px;
    }

    .ask-fineas-widget__header {
        gap: 12px;
    }

    .ask-fineas-widget__auth-prompt {
        flex-direction: column;
        align-items: flex-start;
    }

    .ask-fineas-widget--popover .ask-fineas-widget__panel {
        position: fixed;
        top: 72px;
        right: 16px;
        left: 16px;
        width: auto;
        max-height: calc(100vh - 96px);
        overflow-y: auto;
    }

    .ask-fineas-widget--popover.is-open .ask-fineas-widget__backdrop {
        display: block;
    }
}