/* Styles for the ChatAI widget */
:root {
    --chat-bg: #fafafa;
    --chat-pale: #fafafa;
    --chat-fg: #333;
    --chat-accent: rgba(8, 91, 236, 0.1);
    --chat-user: rgba(8, 91, 236, 1);


    --chat-accent-contrast: #ffffff;
    --chat-warning-bg: #dd1515;
    --chat-warning-fg: #fafafa;
    --chat-cutoff-bg: #f5f0d8;
    --chat-cutoff-fg: #4a3b1a;
    --chat-cutoff-border: #d1b55c;


    --chat-border: #ccc;
    --chat-radius: 8px;
    --chat-message-padding: 1rem;
    --chat-font: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --chat-margin-x: 1.5rem;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    #chatbot-dialog {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .chatbot-status-visible {
        animation: none !important;
    }
}


@media (prefers-color-scheme: dark) {
    :root {
        --chat-bg: #1e1e1e;
        --chat-fg: #f5f5f5;
        --chat-accent: rgba(8, 91, 236, 0.1);
        --chat-border: #444;

        /* Dark variants */
        --chat-warning-bg: #b91c1c;
        --chat-warning-fg: #fef2f2;
    }
}

.chatbot-toggle {
    display: block;
    position: fixed;
    inset: auto 1.5rem 1.5rem auto;
    background: var(--chat-accent);
    backdrop-filter: blur(3px);
    color: white;
    border: none;
    border-radius: 50%;
    padding: 0.75rem;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

    & svg {
        width: 2rem;
        aspect-ratio: 1;
    }
}

/*   Before-open state  */
.chatbot-dialog {
    width: min(80%, 50ch);
    border: none;
    border-radius: var(--chat-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    /*
    position: fixed;
    */
    inset: auto var(--chat-margin-x) 5rem auto;

    font-family: var(--chat-font);
    background: var(--chat-bg);
    color: var(--chat-fg);
    z-index: 1001;

    transform-origin: bottom right;
    transform: translateX(calc(100% + var(--chat-margin-x)));

    transition: opacity 0.5s ease-out,
    transform 0.5s ease-out,
    overlay 0.5s ease-out allow-discrete,
    display 0.5s ease-out allow-discrete;

}

#chatbot-dialog[open] {
    display: grid;
    grid-template-rows: max-content 1fr max-content max-content;
    opacity: 1;
    max-height: 80vh;
    width: min(70%, 50ch);
    border: none;
    border-radius: var(--chat-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    inset: auto 1.5rem 5rem auto;
    padding: var(--chat-message-padding);
    font-family: var(--chat-font);
    background: var(--chat-bg);
    color: var(--chat-fg);
    z-index: 1001;
    transform-origin: bottom right;
    transform: translateX(calc(var(--chat-margin-x)*-1));
    transition: opacity 0.5s ease-out,
    transform 0.5s ease-out,
    overlay 0.5s ease-out allow-discrete,
    display 0.5s ease-out allow-discrete;
}


/* Needs to be after the previous dialog[open] rule to take effect,
    as the specificity is the same */
@starting-style {
    #chatbot-dialog[open] {
        opacity: 0;
        transform: translateX(100%);
    }
}


.chatbot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--chat-bg);
    border-bottom: 1px solid var(--chat-border);
}

.chatbot-header-icon {
    & svg {
        fill: var(--chat-fg);
        display: block;
        width: 2rem;
        aspect-ratio: 1;
    }
}

.chatbot-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--chat-fg);

    & svg {
        display: block;
        width: 2rem;
        aspect-ratio: 1;
        fill: currentColor;
    }
}

.chatbot-msg-wrapper {
    overflow-y: scroll;
    overscroll-behavior: contain;
    min-height: 0;
}

.chatbot-messages {
    font-size: clamp(0.9rem, 0.9rem + 0.1vw, 1rem);
    background: var(--chat-bg);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-wrap: pretty;
}

.chatbot-welcome {
    margin: var(--chat-message-padding);
}

.chatbot-name {
    font-size: 0.8rem;
}

.chatbot-msg {
    max-width: 80%;
    padding: 0.6rem 0.9rem;
    border-radius: var(--chat-radius);
    line-height: 1.4;
}

.chatbot-msg.user {
    align-self: flex-end;
    background: var(--chat-user);
    color: var(--chat-accent-contrast);
}


.chatbot-msg.bot {
    align-self: flex-start;
    background: #e9e9e9;
    color: #111;

    &.chatbot-warning {
        background: var(--chat-warning-bg);
        font-weight: bold;
        color: var(--chat-warning-fg);
    }

    &.chatbot-cutoff {
        background-color: var(--chat-cutoff-bg, #f5f0d8);
        color: var(--chat-cutoff-fg, #4a3b1a);
        border-left: 3px solid var(--chat-cutoff-border, #d1b55c);
        font-size: 0.9rem;
    }
}

.chatbot-form {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--chat-message-padding);
    margin-block: var(--chat-message-padding);
    align-items: end;
}

#chatbot-dialog input[type="text"].chatbot-input,
.chatbot-submit {
    font: inherit;             
    color: inherit;
}
/* overrides PW default theme input[type="text"] styles */
#chatbot-dialog input[type="text"].chatbot-input {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-bottom: 1px solid var(--chat-border);
    background: transparent;
    padding: 0.55rem 0.2rem;
    line-height: 1.2;
    font-family: var(--chat-font);
}

/* overrides PW default theme input[type="text"] styles */
#chatbot-dialog input[type="text"].chatbot-input::placeholder {
    color: color-mix(in srgb, var(--chat-fg) 55%, transparent);
    opacity: 1;                 /* FF placeholder opacity quirk */
}

.chatbot-submit {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid transparent;
    background: var(--chat-user);
    color: var(--chat-accent-contrast);
    padding: 0.55rem 0.9rem;
    border-radius: calc(var(--chat-radius) - 2px);
    cursor: pointer;
    line-height: 1.2;
}

.chatbot-submit:hover {
    filter: brightness(0.8);
}

.chatbot-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}




.chatbot-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.25rem;
    font-size: 0.85rem;
}

.chatbot-clear .chatai-reset {
    padding: 0;
    border: none;
    background: none;
    color: var(--chat-fg);
    text-decoration: underline;
    text-underline-offset: 0.12em;
    cursor: pointer;
    font: inherit;
}

/* Reuse your existing focus style */
.chatbot-clear .chatai-reset:focus-visible {
    outline: 2px solid var(--chat-user);
    outline-offset: 2px;
}



.chatbot-status {
    font-size: 0.85rem;
    margin-top: 0.5rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.chatbot-status[aria-busy="true"] {
    opacity: 1;
}

/* honor [hidden] if you ever toggle it directly */
.chatbot-status[hidden] {
    display: none;
}

.chatbot-status-visible {
    display: inline-block;
    animation: chatbotThinkingPulse 1.3s ease-in-out infinite;
}

@keyframes chatbotThinkingPulse {
    0% {
        opacity: 0.3;
        transform: translateX(0);
    }
    50% {
        opacity: 1;
        transform: translateX(2px);
    }
    100% {
        opacity: 0.3;
        transform: translateX(0);
    }
}

/* visually hidden for screen readers */
.chatbot-status-sr {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    position: absolute;
}

.chatbot-footer {
    font-size: 0.8rem;
}

/* Focus rings for keyboard users */
.chatbot-toggle:focus-visible,
.chatbot-close:focus-visible,
.chatbot-form button:focus-visible,
.chatbot-input:focus-visible {
    outline: 2px solid var(--chat-user);
    outline-offset: 3px;
}

/* Link styling inside messages */
.chatbot-msg a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.chatbot-msg a:hover {
    text-decoration-thickness: 0.11em;
}

.chatbot-msg a:focus-visible {
    outline: 2px solid var(--chat-user);
    outline-offset: 2px;
}

/* RTL support for message alignment */
[dir="rtl"] .chatbot-msg.user {
    align-self: flex-start;
}

[dir="rtl"] .chatbot-msg.bot {
    align-self: flex-end;
}

/* Inline code styling */
.chatbot-msg code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.9em;
    padding: 0.1em 0.3em;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.05);
}

@media (prefers-color-scheme: dark) {
    .chatbot-msg code {
        background: rgba(255, 255, 255, 0.1);
    }
}

/* Mobile tuning */
@media (max-width: 480px) {
    .chatbot-toggle {
        inset: auto 1rem 1rem auto;
        padding: 0.9rem;
    }

    #chatbot-dialog,
    .chatbot-dialog {
        width: 95vw;
        inset: auto 0.75rem 4.5rem auto;
    }
}

/* Hide widget in print views */
@media print {
    .chatbot-toggle,
    #chatbot-dialog,
    .chatbot-dialog {
        display: none !important;
    }
}

/* TinyMCE and CKEditor classes */
.align_left {text-align: left}
.align_center {text-align: center}
.align_right {text-align: right}

/*
 * TODO ChatAI widget CSS
 *
 * Implemented (leave here as reference):
 * - Focus states: visible :focus-visible rings for toggle, inputs, buttons, and links.
 * - Reduced motion: dialog transitions shortened and typing animation disabled on prefers-reduced-motion.
 * - High-contrast tokens: added --chat-accent-contrast, --chat-warning-bg, --chat-warning-fg.
 * - RTL support: basic alignment flip for .chatbot-msg.user/.bot under [dir="rtl"].
 * - Typography scale: clamp() font size on .chatbot-messages and text-wrap: pretty.
 * - Link styling: explicit :hover and :focus-visible states for links inside messages.
 * - Code styling: inline <code> inside messages.
 * - Scroll behavior: overscroll-behavior: contain and a single scrollable wrapper for messages.
 * - Warning colour: warning bubble now uses dedicated bg/fg tokens.
 * - Mobile spacing: minor inset/padding tweaks at <= 480px; tap targets kept comfortable.
 * - Print styles: hide toggle and dialog in print views.
 *
 * Backlog / nice-to-haves:
 * 1) Container queries: size dialog via @container where supported instead of viewport width only.
 * 2) Remaining-messages badge: small unobtrusive counter in header; aria-live="polite"; only visible when close to the limit.
 * 3) Reply colour tokens: separate message bubble colours from button colours; introduce --chat-reply-bg/fg or similar.
 * 4) Close button placement: final decision and tests for sticky top-right behaviour, hit area >= 44px, and interaction with launcher.
 * 5) Footer styling: refine layout and spacing for disclaimer + “talk to a human” / “book” links; consider mobile-specific tweaks and per-site variants.
 * 6) File upload affordance (future feature): visual design and focus/hover states for an attach button once backend support is in place.
 */