/**
 * TMD WOO AI — Frontend Chat Widget CSS
 *
 * BEM block: .tmd-woo-ai-widget
 * All classes scoped under .tmd-woo-ai-* — zero global style pollution.
 * CSS custom properties consumed here; values injected by JS (frontend.js applyTheme()).
 *
 * Responsive breakpoints:
 *   Mobile  : max-width 767px  (targets 375px viewport)
 *   Tablet  : 768px – 1023px
 *   Desktop : min-width 1024px
 *
 * Accessibility:
 *   - WCAG AA contrast on all text/background pairs
 *   - focus-visible ring on all interactive elements
 *   - prefers-reduced-motion: disables transitions + animations
 *   - Touch targets min 44x44px (toggle=56px, send=44px, feedback=36px)
 *
 * File size target: <10 KB
 *
 * @package TMD\WooAssistantAI
 * @version 1.10.0
 */

/* =============================================================================
   1. CUSTOM PROPERTIES (theming layer)
   JS sets --tmd-ai-primary and --tmd-ai-z on :root; CSS falls back to these.
   ============================================================================= */

:root {
    --tmd-ai-primary:        #0073aa;
    --tmd-ai-primary-dark:   #005a87;
    --tmd-ai-bg:             #ffffff;
    --tmd-ai-bg-bot:         #f0f6fc;
    --tmd-ai-bg-user:        #0073aa;   /* mirrors --tmd-ai-primary for user bubbles */
    --tmd-ai-text:           #1d2327;
    --tmd-ai-text-light:     #ffffff;
    --tmd-ai-text-muted:     #646970;
    --tmd-ai-border:         #dcdcde;
    --tmd-ai-radius:         12px;
    --tmd-ai-radius-sm:      8px;
    --tmd-ai-shadow:         0 4px 24px rgba(0, 0, 0, 0.15);
    --tmd-ai-width:          360px;
    --tmd-ai-height:         520px;
    --tmd-ai-fab:            56px;      /* launcher size — overridden by size modifiers */
    --tmd-ai-z:              999999;
    --tmd-ai-error-bg:       #fcf0f1;
    --tmd-ai-error-color:    #d63638;
    --tmd-ai-disclosure-bg:  #fffbea;
    --tmd-ai-disclosure-bdr: #f0e6a0;
    --tmd-ai-disclosure-txt: #6b5c00;
}

/* =============================================================================
   2. WIDGET CONTAINER — .tmd-woo-ai-widget (BEM Block)
   ============================================================================= */

.tmd-woo-ai-widget {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tmd-ai-text);
    box-sizing: border-box;
}

.tmd-woo-ai-widget *,
.tmd-woo-ai-widget *::before,
.tmd-woo-ai-widget *::after {
    box-sizing: inherit;
}

/* The [hidden] attribute is the single source of truth for JS-driven
   show/hide (panel open/close, typing indicator, error banner). Element
   rules below set an explicit `display`, which would otherwise override the
   UA `[hidden] { display:none }` and leave elements stuck visible. Force it. */
.tmd-woo-ai-widget [hidden],
.tmd-woo-ai-panel[hidden] {
    display: none !important;
}

/* --- Floating variant -------------------------------------------------------- */

.tmd-woo-ai-widget--floating {
    position: fixed;
    bottom: 24px;
    right: 24px;
    /* z-index from CSS custom property — JS overrides via :root */
    z-index: var(--tmd-ai-z);
}

/* Position modifiers */
.tmd-woo-ai-widget--floating.tmd-woo-ai-pos--bottom-right {
    right: 24px;
    left: auto;
}

.tmd-woo-ai-widget--floating.tmd-woo-ai-pos--bottom-left {
    right: auto;
    left: 24px;
}

/* --- Inline variant --------------------------------------------------------- */

.tmd-woo-ai-widget--inline {
    position: relative;
    width: 100%;
}

/* =============================================================================
   3. TOGGLE BUTTON — .tmd-woo-ai-toggle (BEM Element)
   FAB: 56x56px circle — exceeds 44px touch target minimum.
   ============================================================================= */

.tmd-woo-ai-toggle {
    position: relative; /* anchor for .tmd-woo-ai-nudge-dot */
    width: var(--tmd-ai-fab);
    height: var(--tmd-ai-fab);
    border-radius: 50%;
    /* Launcher background is independent of the widget primary color.
       --tmd-ai-fab-bg is set by frontend.js from the "Fundal bulină" setting;
       when unset it falls back to the primary color (previous behaviour). */
    background: var(--tmd-ai-fab-bg, var(--tmd-ai-primary));
    color: var(--tmd-ai-text-light);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--tmd-ai-shadow);
    transition: background 0.2s ease, transform 0.15s ease;
    /* Prevent text selection on rapid click */
    user-select: none;
}

/* Media slot wraps the icon set (and the Lottie mount point). */
.tmd-woo-ai-toggle__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tmd-ai-fab);
    height: var(--tmd-ai-fab);
    flex: none;
}

/* Pill label — hidden unless launcher style is pill. */
.tmd-woo-ai-toggle__label {
    display: none;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.tmd-woo-ai-toggle:hover {
    background: var(--tmd-ai-fab-bg-hover, var(--tmd-ai-primary-dark));
    transform: scale(1.05);
}

.tmd-woo-ai-toggle:focus-visible {
    background: var(--tmd-ai-fab-bg-hover, var(--tmd-ai-primary-dark));
    outline: 3px solid var(--tmd-ai-primary);
    outline-offset: 3px;
}

/* =============================================================================
   4. CHAT PANEL — .tmd-woo-ai-panel (BEM Element)
   ============================================================================= */

.tmd-woo-ai-panel {
    background: var(--tmd-ai-bg);
    border-radius: var(--tmd-ai-radius);
    box-shadow: var(--tmd-ai-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Floating panel: anchored above toggle button */
.tmd-woo-ai-widget--floating .tmd-woo-ai-panel {
    position: absolute;
    bottom: calc(var(--tmd-ai-fab) + 12px);
    right: 0;
    width: var(--tmd-ai-width);
    height: var(--tmd-ai-height);
}

/* Floating + bottom-left: panel opens to the right of anchor */
.tmd-woo-ai-widget--floating.tmd-woo-ai-pos--bottom-left .tmd-woo-ai-panel {
    right: auto;
    left: 0;
}

/* Inline panel: full-width, fixed height */
.tmd-woo-ai-widget--inline .tmd-woo-ai-panel {
    width: 100%;
    height: 500px;
    border: 1px solid var(--tmd-ai-border);
    border-radius: var(--tmd-ai-radius);
}

/* =============================================================================
   5. HEADER — .tmd-woo-ai-header (BEM Element)
   ============================================================================= */

.tmd-woo-ai-header {
    background: var(--tmd-ai-primary);
    color: var(--tmd-ai-text-light);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* BEM Element: title */
.tmd-woo-ai-header__title {
    font-weight: 600;
    font-size: 15px;
    flex: 1;
    /* Prevent overflow on narrow panels */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* BEM Element: badge */
.tmd-woo-ai-header__badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 2px 6px;
    flex-shrink: 0;
}

/* Close button (floating only) */
.tmd-woo-ai-close {
    background: none;
    border: none;
    color: var(--tmd-ai-text-light);
    cursor: pointer;
    /* Minimum 44x44 touch area with padding */
    padding: 10px;
    margin: -10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.tmd-woo-ai-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
}

.tmd-woo-ai-close:focus-visible {
    opacity: 1;
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
    background: rgba(255, 255, 255, 0.15);
}

/* =============================================================================
   6. BOT DISCLOSURE — .tmd-woo-ai-disclosure (BEM Element)
   EU AI Act compliance notice.
   ============================================================================= */

.tmd-woo-ai-disclosure {
    background: var(--tmd-ai-disclosure-bg);
    border-bottom: 1px solid var(--tmd-ai-disclosure-bdr);
    padding: 6px 12px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--tmd-ai-disclosure-txt);
    flex-shrink: 0;
}

/* =============================================================================
   7. MESSAGES AREA — .tmd-woo-ai-messages (BEM Element)
   Scrollable region; aria-live="polite" is on the element in markup.
   ============================================================================= */

.tmd-woo-ai-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scroll-behavior: smooth;
    /* Custom scrollbar — subtle */
    scrollbar-width: thin;
    scrollbar-color: var(--tmd-ai-border) transparent;
}

.tmd-woo-ai-messages:focus-visible {
    outline: 2px solid var(--tmd-ai-primary);
    outline-offset: -2px;
}

/* Webkit scrollbar */
.tmd-woo-ai-messages::-webkit-scrollbar {
    width: 4px;
}

.tmd-woo-ai-messages::-webkit-scrollbar-track {
    background: transparent;
}

.tmd-woo-ai-messages::-webkit-scrollbar-thumb {
    background: var(--tmd-ai-border);
    border-radius: 2px;
}

/* =============================================================================
   8. MESSAGE BUBBLE — .tmd-woo-ai-message (BEM Block within messages)
   BEM Modifiers: --bot | --user
   ============================================================================= */

.tmd-woo-ai-message {
    display: flex;
    flex-direction: column;
    max-width: 85%;
}

.tmd-woo-ai-message--bot {
    align-self: flex-start;
}

.tmd-woo-ai-message--user {
    align-self: flex-end;
}

/* BEM Element: message text bubble */
.tmd-woo-ai-message__text {
    display: inline-block;
    padding: 8px 12px;
    border-radius: var(--tmd-ai-radius);
    word-break: break-word;
    white-space: pre-wrap;
    font-size: 13.5px;
    line-height: 1.55;
}

/* Bot bubble: light background, dark text — contrast 7:1 on #f0f6fc */
.tmd-woo-ai-message--bot .tmd-woo-ai-message__text {
    background: var(--tmd-ai-bg-bot);
    color: var(--tmd-ai-text);
    border-bottom-left-radius: 4px;
}

/* User bubble: primary background, white text — contrast verified on #0073aa */
.tmd-woo-ai-message--user .tmd-woo-ai-message__text {
    background: var(--tmd-ai-bg-user);
    color: var(--tmd-ai-text-light);
    border-bottom-right-radius: 4px;
}

/* BEM Element: content column (bubble + timestamp + feedback). Keeps the HH:MM
   under the bubble even when a bot avatar makes the message row horizontal. */
.tmd-woo-ai-message__body {
    display: flex;
    flex-direction: column;
    min-width: 0; /* let long words wrap inside the flex row */
}

.tmd-woo-ai-message--bot .tmd-woo-ai-message__body,
.tmd-woo-ai-message--operator .tmd-woo-ai-message__body {
    align-items: flex-start;
}

.tmd-woo-ai-message--user .tmd-woo-ai-message__body {
    align-items: flex-end;
}

/* BEM Element: message timestamp (HH:MM) — muted, sits just under the bubble */
.tmd-woo-ai-message__time {
    margin-top: 3px;
    font-size: 10.5px;
    line-height: 1;
    color: var(--tmd-ai-text-muted);
}

/* =============================================================================
   9. FEEDBACK BUTTONS — .tmd-woo-ai-feedback (BEM Block; built by JS)
   Thumbs up/down appended after bot messages.
   ============================================================================= */

.tmd-woo-ai-feedback {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

/* BEM Element: single thumb button */
.tmd-woo-ai-feedback__btn {
    background: none;
    border: 1px solid var(--tmd-ai-border);
    border-radius: 4px;
    /* 36px target — acceptable as secondary feedback action */
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--tmd-ai-text-muted);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.tmd-woo-ai-feedback__btn:hover {
    color: var(--tmd-ai-primary);
    border-color: var(--tmd-ai-primary);
}

.tmd-woo-ai-feedback__btn:focus-visible {
    outline: 2px solid var(--tmd-ai-primary);
    outline-offset: 2px;
}

.tmd-woo-ai-feedback__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* BEM Modifier: selected state */
.tmd-woo-ai-feedback__btn--active {
    color: var(--tmd-ai-primary);
    border-color: var(--tmd-ai-primary);
    background: var(--tmd-ai-bg-bot);
}

/* =============================================================================
   10. TYPING INDICATOR — .tmd-woo-ai-typing (BEM Element)
   Three animated dots; hidden by default via [hidden] attribute.
   ============================================================================= */

.tmd-woo-ai-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    background: var(--tmd-ai-bg-bot);
    border-radius: var(--tmd-ai-radius);
    border-bottom-left-radius: 4px;
    width: fit-content;
    align-self: flex-start;
}

/* BEM Element: single dot */
.tmd-woo-ai-typing__dot {
    width: 6px;
    height: 6px;
    background: #9ca3af;
    border-radius: 50%;
    animation: tmd-ai-bounce 1.2s ease-in-out infinite;
}

.tmd-woo-ai-typing__dot:nth-child(2) {
    animation-delay: 0.2s;
}

.tmd-woo-ai-typing__dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes tmd-ai-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30%           { transform: translateY(-6px); }
}

/* =============================================================================
   11. INPUT FORM — .tmd-woo-ai-form (BEM Element)
   ============================================================================= */

.tmd-woo-ai-form {
    border-top: 1px solid var(--tmd-ai-border);
    padding: 8px 12px;
    flex-shrink: 0;
    background: var(--tmd-ai-bg);
}

/* Row: textarea + send button */
.tmd-woo-ai-input-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

/* Textarea */
.tmd-woo-ai-input {
    flex: 1;
    border: 1px solid var(--tmd-ai-border);
    border-radius: var(--tmd-ai-radius-sm);
    padding: 8px 10px;
    font-size: 13.5px;
    font-family: inherit;
    line-height: 1.4;
    color: var(--tmd-ai-text);
    background: var(--tmd-ai-bg);
    resize: none;
    transition: border-color 0.15s ease;
    /* Prevent WP admin styles bleeding in */
    box-shadow: none;
    appearance: none;
}

.tmd-woo-ai-input:focus {
    outline: none;
    border-color: var(--tmd-ai-primary);
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.15);
}

.tmd-woo-ai-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Send button: 44x44 minimum touch target */
.tmd-woo-ai-send {
    background: var(--tmd-ai-primary);
    color: var(--tmd-ai-text-light);
    border: none;
    border-radius: var(--tmd-ai-radius-sm);
    width: 44px;
    height: 44px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.tmd-woo-ai-send:hover {
    background: var(--tmd-ai-primary-dark);
}

.tmd-woo-ai-send:focus-visible {
    outline: 3px solid var(--tmd-ai-primary);
    outline-offset: 2px;
    background: var(--tmd-ai-primary-dark);
}

.tmd-woo-ai-send:disabled {
    background: #a0aec0;
    cursor: not-allowed;
}

/* =============================================================================
   12. GDPR NOTICE — .tmd-woo-ai-gdpr (BEM Element)
   ============================================================================= */

.tmd-woo-ai-gdpr {
    margin-top: 6px;
    font-size: 11px;
    color: var(--tmd-ai-text-muted);
    line-height: 1.45;
}

/* BEM Element: label wrapping checkbox + text */
.tmd-woo-ai-gdpr__label {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    cursor: pointer;
}

/* BEM Element: checkbox — keep at top of text */
.tmd-woo-ai-gdpr__checkbox {
    margin-top: 2px;
    flex-shrink: 0;
    /* 16px native size: acceptable for supporting checkbox at 11px text size */
    cursor: pointer;
    accent-color: var(--tmd-ai-primary);
}

/* Privacy policy link inside GDPR label */
.tmd-woo-ai-gdpr a {
    color: var(--tmd-ai-primary);
    text-decoration: underline;
}

.tmd-woo-ai-gdpr a:hover {
    color: var(--tmd-ai-primary-dark);
}

.tmd-woo-ai-gdpr a:focus-visible {
    outline: 2px solid var(--tmd-ai-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* =============================================================================
   13. ERROR ALERT — .tmd-woo-ai-error (BEM Element)
   aria-live="assertive" is on the element in markup.
   Hidden by default via [hidden] attribute.
   ============================================================================= */

.tmd-woo-ai-error {
    margin-top: 6px;
    font-size: 12px;
    color: var(--tmd-ai-error-color);
    padding: 6px 8px 6px 10px;
    background: var(--tmd-ai-error-bg);
    border-radius: 4px;
    border-left: 3px solid var(--tmd-ai-error-color);
    line-height: 1.4;
}

/* =============================================================================
   14. LAUNCHER ICONS — .tmd-woo-ai-icon (BEM Element on toggle)
   JS toggles .is-active on the icon matching the selected launcher type.
   Four icons: chat / sparkle / help / dot — only one visible at a time.
   ============================================================================= */

.tmd-woo-ai-icon {
    display: none;
    /* Prevent icon from affecting toggle dimensions */
    line-height: 0;
}

.tmd-woo-ai-icon.is-active {
    display: block;
}

/* Custom launcher image/animation (overrides the SVG preset when configured).
   Sized relative to the FAB so it scales with the launcher size (S/M/L). object-fit
   keeps the aspect ratio; animated GIF/WebP animate natively (no player needed). */
.tmd-woo-ai-icon--custom {
    line-height: 0;
}
.tmd-woo-ai-launcher-img {
    display: block;
    width: calc(var(--tmd-ai-fab) * 0.64);
    height: calc(var(--tmd-ai-fab) * 0.64);
    object-fit: contain;
}

/* =============================================================================
   15. SHAPE MODIFIERS — --shape-rounded | --shape-square
   Applied on .tmd-woo-ai-widget by JS from settings.
   rounded: use token --tmd-ai-radius (default 12px) — same as base.
   square:  override to 0 on panel, FAB, inputs, bubbles.
   ============================================================================= */

/* Rounded shape: already the default — no additional rules needed for panel.
   Override FAB shape token to match panel radius (instead of 50%). */
.tmd-woo-ai-widget--shape-rounded .tmd-woo-ai-toggle {
    border-radius: 50%; /* Keep FAB circular on rounded */
}

.tmd-woo-ai-widget--shape-rounded .tmd-woo-ai-panel {
    border-radius: var(--tmd-ai-radius);
}

.tmd-woo-ai-widget--shape-rounded .tmd-woo-ai-input {
    border-radius: var(--tmd-ai-radius-sm);
}

.tmd-woo-ai-widget--shape-rounded .tmd-woo-ai-message__text {
    border-radius: var(--tmd-ai-radius);
}

/* Square shape: zero radius on panel, FAB, inputs, bubbles, send button */
.tmd-woo-ai-widget--shape-square .tmd-woo-ai-toggle {
    border-radius: 4px; /* Not 0 — keeps some usability; square but not sharp */
}

.tmd-woo-ai-widget--shape-square .tmd-woo-ai-panel {
    border-radius: 0;
}

.tmd-woo-ai-widget--shape-square .tmd-woo-ai-input {
    border-radius: 0;
}

.tmd-woo-ai-widget--shape-square .tmd-woo-ai-send {
    border-radius: 0;
}

.tmd-woo-ai-widget--shape-square .tmd-woo-ai-message__text {
    border-radius: 0;
}

.tmd-woo-ai-widget--shape-square .tmd-woo-ai-typing {
    border-radius: 0;
}

/* Square + mobile: keep bottom radius 0 even with mobile override */
@media (max-width: 767px) {
    .tmd-woo-ai-widget--floating.tmd-woo-ai-widget--shape-square .tmd-woo-ai-panel {
        border-radius: 0;
    }
}

/* =============================================================================
   16. AVATAR — HEADER (.tmd-woo-ai-avatar-header) + MESSAGE (.tmd-woo-ai-message__avatar)
   ============================================================================= */

/* Header avatar: sits before the title text in .tmd-woo-ai-header */
.tmd-woo-ai-avatar-header {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.tmd-woo-ai-avatar-header img,
.tmd-woo-ai-avatar-header svg {
    width: 32px;
    height: 32px;
    object-fit: cover;
    /* Rounded shape: circular; Square shape: overridden below */
    border-radius: 50%;
    display: block;
}

/* Square shape: straight corners on header avatar */
.tmd-woo-ai-widget--shape-square .tmd-woo-ai-avatar-header img,
.tmd-woo-ai-widget--shape-square .tmd-woo-ai-avatar-header svg {
    border-radius: 2px;
}

/* Message avatar: inline with bot bubble */
.tmd-woo-ai-message__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: flex-start;
    overflow: hidden;
    /* Margin between avatar and bubble */
    margin-right: 6px;
}

.tmd-woo-ai-message__avatar img,
.tmd-woo-ai-message__avatar svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* When avatar is present, bot message row becomes horizontal */
.tmd-woo-ai-message--bot:has(.tmd-woo-ai-message__avatar) {
    flex-direction: row;
    align-items: flex-start;
    max-width: 90%; /* Slightly wider to account for avatar width */
}

/* Square shape: straight corners on message avatar */
.tmd-woo-ai-widget--shape-square .tmd-woo-ai-message__avatar {
    border-radius: 2px;
}

/* =============================================================================
   17. TEASER / ATTENTION BUBBLE — .tmd-woo-ai-teaser
   Positioned above the FAB; hidden by default, shown with .is-active.
   ============================================================================= */

.tmd-woo-ai-teaser {
    position: absolute;
    /* Sits above the toggle button (launcher height + gap) */
    bottom: calc(var(--tmd-ai-fab) + 12px);
    right: 0;
    /* Constrain width so it stays near FAB */
    max-width: 240px;
    min-width: 120px;
    background: var(--tmd-ai-bg);
    color: var(--tmd-ai-text);
    font-size: 13px;
    line-height: 1.4;
    padding: 10px 14px;
    border-radius: var(--tmd-ai-radius);
    box-shadow: var(--tmd-ai-shadow);
    /* Entry animation: start hidden + slightly below */
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    /* Pointer events off when hidden to avoid blocking FAB */
    pointer-events: none;
    /* Ensure teaser is above page content but below panel */
    z-index: 1;
    /* Prevent text wrapping oddly */
    white-space: normal;
    word-break: break-word;
}

/* Optional tail / caret pointing down toward FAB */
.tmd-woo-ai-teaser::after {
    content: "";
    position: absolute;
    bottom: -6px;
    right: 18px;
    width: 12px;
    height: 12px;
    background: var(--tmd-ai-bg);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.08);
    transform: rotate(45deg);
    border-radius: 1px;
}

/* bottom-left: teaser and its tail switch to left side */
.tmd-woo-ai-widget--floating.tmd-woo-ai-pos--bottom-left .tmd-woo-ai-teaser {
    right: auto;
    left: 0;
}

.tmd-woo-ai-widget--floating.tmd-woo-ai-pos--bottom-left .tmd-woo-ai-teaser::after {
    right: auto;
    left: 18px;
}

/* Active state: fade + slide in */
.tmd-woo-ai-teaser.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Square shape: no radius on teaser */
.tmd-woo-ai-widget--shape-square .tmd-woo-ai-teaser {
    border-radius: 0;
}

.tmd-woo-ai-widget--shape-square .tmd-woo-ai-teaser::after {
    border-radius: 0;
}

/* FAB pulse ring — subtle, not aggressive. Used by the 'pulse' nudge type. */
@keyframes tmd-ai-fab-pulse {
    0%   { box-shadow: var(--tmd-ai-shadow), 0 0 0 0 rgba(0, 115, 170, 0.35); }
    60%  { box-shadow: var(--tmd-ai-shadow), 0 0 0 10px rgba(0, 115, 170, 0); }
    100% { box-shadow: var(--tmd-ai-shadow), 0 0 0 0 rgba(0, 115, 170, 0); }
}

/* =============================================================================
   18. LAUNCHER LAYOUT — size / style / nudge (ARECH-style appearance options)
   Modifiers set on .tmd-woo-ai-widget root by PHP from settings:
     .tmd-woo-ai-launcher--size-{s|m|l}     → drive --tmd-ai-fab (48/56/64px)
     .tmd-woo-ai-launcher--style-{circle|rounded|pill}
     .tmd-woo-ai-nudge--{tooltip|pulse|dot|off}
     .tmd-woo-ai-widget--avoid-totop        → extra bottom offset
     .tmd-woo-ai-widget--animated           → Lottie mounted (JS removes on failure)
   ============================================================================= */

/* --- Size: launcher diameter via custom property -------------------------- */
.tmd-woo-ai-launcher--size-s { --tmd-ai-fab: 48px; }
.tmd-woo-ai-launcher--size-m { --tmd-ai-fab: 56px; }
.tmd-woo-ai-launcher--size-l { --tmd-ai-fab: 64px; }

/* --- Style: rounded launcher (square-ish, not full circle) ----------------- */
.tmd-woo-ai-launcher--style-rounded .tmd-woo-ai-toggle {
    border-radius: 16px;
}

/* --- Style: pill launcher with text label ---------------------------------- */
.tmd-woo-ai-launcher--style-pill .tmd-woo-ai-toggle {
    width: auto;
    border-radius: 999px;
    padding: 0 18px 0 6px;
    gap: 6px;
}
.tmd-woo-ai-launcher--style-pill .tmd-woo-ai-toggle__media {
    width: calc(var(--tmd-ai-fab) - 8px);
    height: calc(var(--tmd-ai-fab) - 8px);
}
.tmd-woo-ai-launcher--style-pill .tmd-woo-ai-toggle__label {
    display: inline;
}

/* --- Animated (Lottie) icon: transparent FAB, slightly larger art ---------- */
/* When the Lottie player mounts, root gets .tmd-woo-ai-widget--animated. The art
   has no baked background, so drop the FAB fill/shadow and hide the SVG icons. */
.tmd-woo-ai-widget--animated:not(.tmd-woo-ai-launcher--style-pill) .tmd-woo-ai-toggle {
    background: transparent;
    box-shadow: none;
}
/* Keep the pill launcher's solid background on hover too. The base rule above
   (line ~894) already excludes pill from the transparent FAB fill; without the
   same exclusion here, a pill launcher showed a colour normally but turned
   transparent on hover. Pill hover falls through to the .toggle:hover rule
   (--tmd-ai-fab-bg-hover), so it stays coloured. */
.tmd-woo-ai-widget--animated:not(.tmd-woo-ai-launcher--style-pill) .tmd-woo-ai-toggle:hover {
    background: transparent;
}
.tmd-woo-ai-widget--animated .tmd-woo-ai-icon {
    display: none !important; /* Lottie replaces the SVG icon set when active. */
}
.tmd-woo-ai-lottie {
    display: none; /* Shown only when animated; JS mounts the SVG renderer here. */
    width: 100%;
    height: 100%;
    line-height: 0;
}
.tmd-woo-ai-widget--animated .tmd-woo-ai-lottie {
    display: block;
}
.tmd-woo-ai-lottie > svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- Nudge: dot badge ------------------------------------------------------ */
.tmd-woo-ai-nudge-dot {
    display: none;
    position: absolute;
    top: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--tmd-ai-error-color);
    border: 2px solid #ffffff;
}
.tmd-woo-ai-pos--bottom-left .tmd-woo-ai-nudge-dot {
    right: auto;
    left: -2px;
}
.tmd-woo-ai-nudge--dot .tmd-woo-ai-nudge-dot {
    display: block;
}

/* --- Nudge: pulse ring (only while panel closed) --------------------------- */
.tmd-woo-ai-nudge--pulse.tmd-woo-ai-widget--floating .tmd-woo-ai-toggle {
    animation: tmd-ai-fab-pulse 2s ease-out infinite;
}

/* Defense-in-depth: the teaser bubble belongs to the 'tooltip' nudge only.
   JS already gates it, but if a theme overrides [hidden] or JS fails to run,
   force it hidden for every non-tooltip nudge type. */
.tmd-woo-ai-nudge--pulse .tmd-woo-ai-teaser,
.tmd-woo-ai-nudge--dot .tmd-woo-ai-teaser,
.tmd-woo-ai-nudge--off .tmd-woo-ai-teaser {
    display: none !important;
}

/* --- Avoid theme back-to-top button: lift the whole widget up -------------- */
.tmd-woo-ai-widget--floating.tmd-woo-ai-widget--avoid-totop {
    bottom: 88px;
}

/* =============================================================================
   18a. LIVE OPERATOR MESSAGE (Level 4) — distinct from AI bot bubbles
   ============================================================================= */

.tmd-woo-ai-message--operator .tmd-woo-ai-message__text {
    background: #eaf7ee;
    border: 1px solid #bfe6cb;
    color: #14532d;
}

/* =============================================================================
   18b. HANDOFF (AI→human) — trigger bar + channel/form overlay
   ============================================================================= */

/* Trigger bar: slim link-style button between messages and input. */
.tmd-woo-ai-handoff-bar {
    padding: 6px 12px;
    border-top: 1px solid var(--tmd-ai-border);
    text-align: center;
}

.tmd-woo-ai-handoff-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--tmd-ai-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--tmd-ai-radius-sm);
}

.tmd-woo-ai-handoff-trigger:hover {
    text-decoration: underline;
}

.tmd-woo-ai-handoff-trigger:focus-visible {
    outline: 2px solid var(--tmd-ai-primary);
    outline-offset: 2px;
}

/* Overlay: covers the whole panel body when open. */
.tmd-woo-ai-handoff {
    position: absolute;
    inset: 0;
    background: var(--tmd-ai-bg);
    display: flex;
    flex-direction: column;
    padding: 16px;
    overflow-y: auto;
    z-index: 2;
}

.tmd-woo-ai-handoff[hidden] {
    display: none;
}

.tmd-woo-ai-handoff__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.tmd-woo-ai-handoff__title {
    font-weight: 700;
    font-size: 15px;
}

.tmd-woo-ai-handoff__close {
    background: transparent;
    border: none;
    color: var(--tmd-ai-text-muted);
    cursor: pointer;
    padding: 4px;
    line-height: 0;
}

.tmd-woo-ai-handoff__close:focus-visible {
    outline: 2px solid var(--tmd-ai-primary);
    outline-offset: 2px;
}

.tmd-woo-ai-handoff__intro {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--tmd-ai-text-muted);
}

.tmd-woo-ai-handoff__channels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.tmd-woo-ai-handoff__channel {
    flex: 1 1 auto;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    color: var(--tmd-ai-text-light);
    background: var(--tmd-ai-primary);
    padding: 10px 14px;
    border-radius: var(--tmd-ai-radius-sm);
}

.tmd-woo-ai-handoff__channel--wa {
    background: #25d366;
}

.tmd-woo-ai-handoff__channel--ms {
    background: #0084ff;
}

.tmd-woo-ai-handoff__channel:focus-visible {
    outline: 2px solid var(--tmd-ai-text);
    outline-offset: 2px;
}

.tmd-woo-ai-handoff__form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Honeypot: off-screen (NOT display:none, so naive bots still fill it). */
.tmd-woo-ai-handoff__hp-wrap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.tmd-woo-ai-handoff__field {
    display: block;
}

.tmd-woo-ai-handoff__name,
.tmd-woo-ai-handoff__email,
.tmd-woo-ai-handoff__phone,
.tmd-woo-ai-handoff__message {
    width: 100%;
    border: 1px solid var(--tmd-ai-border);
    border-radius: var(--tmd-ai-radius-sm);
    padding: 9px 11px;
    font-size: 14px;
    font-family: inherit;
    color: var(--tmd-ai-text);
    background: var(--tmd-ai-bg);
}

.tmd-woo-ai-handoff__name:focus,
.tmd-woo-ai-handoff__email:focus,
.tmd-woo-ai-handoff__phone:focus,
.tmd-woo-ai-handoff__message:focus {
    outline: 2px solid var(--tmd-ai-primary);
    outline-offset: 0;
    border-color: var(--tmd-ai-primary);
}

.tmd-woo-ai-handoff__message {
    resize: vertical;
    min-height: 56px;
}

.tmd-woo-ai-handoff__consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--tmd-ai-text-muted);
    line-height: 1.4;
}

.tmd-woo-ai-handoff__consent input {
    margin-top: 2px;
    accent-color: var(--tmd-ai-primary);
    flex-shrink: 0;
}

.tmd-woo-ai-handoff__submit {
    background: var(--tmd-ai-primary);
    color: var(--tmd-ai-text-light);
    border: none;
    border-radius: var(--tmd-ai-radius-sm);
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.tmd-woo-ai-handoff__submit:hover {
    background: var(--tmd-ai-primary-dark);
}

.tmd-woo-ai-handoff__submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.tmd-woo-ai-handoff__submit:focus-visible {
    outline: 3px solid var(--tmd-ai-primary);
    outline-offset: 2px;
}

.tmd-woo-ai-handoff__feedback {
    font-size: 13px;
    color: #00731a;
    padding-top: 4px;
}

.tmd-woo-ai-handoff__feedback.is-error {
    color: var(--tmd-ai-error-color);
}

/* Square shape: straighten handoff corners. */
.tmd-woo-ai-widget--shape-square .tmd-woo-ai-handoff__channel,
.tmd-woo-ai-widget--shape-square .tmd-woo-ai-handoff__name,
.tmd-woo-ai-widget--shape-square .tmd-woo-ai-handoff__email,
.tmd-woo-ai-widget--shape-square .tmd-woo-ai-handoff__phone,
.tmd-woo-ai-widget--shape-square .tmd-woo-ai-handoff__message,
.tmd-woo-ai-widget--shape-square .tmd-woo-ai-handoff__submit {
    border-radius: 0;
}

/* =============================================================================
   CSS-optimizer safelist seed (v1.8.3) — keep it invisible.
   public/partials/widget-chat.php renders a hidden .tmd-woo-ai-ucss-keep element
   listing every JS-injected class so "Remove Unused CSS" optimizers keep their
   rules. The native [hidden] attribute already hides it; this rule is a belt-and-
   braces guard against themes that reset [hidden]. It must never affect layout.
   ============================================================================= */
.tmd-woo-ai-ucss-keep {
    display: none !important;
}

/* =============================================================================
   18c. PRE-CHAT CONTACT GATE (P3) — .tmd-woo-ai-prechat (built by JS)
   Optional gate: Name + Country + Email + consent captured before chatting.
   Rendered in place of the chat form; reuses the same design tokens.
   ============================================================================= */

.tmd-woo-ai-prechat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 12px;
    border-top: 1px solid var(--tmd-ai-border);
    background: var(--tmd-ai-bg);
    flex-shrink: 0;
}

/* Clean single-screen gate: while the pre-chat form is showing, hide the
   greeting/message log, the bot-disclosure notice and the "Vorbește cu un om"
   bar so only the contact form is visible. frontend.js adds
   .tmd-woo-ai-panel--prechat on the panel while the gate is active and removes
   it once the lead is captured (then the normal chat screen appears). */
.tmd-woo-ai-panel--prechat .tmd-woo-ai-messages,
.tmd-woo-ai-panel--prechat .tmd-woo-ai-disclosure,
.tmd-woo-ai-panel--prechat .tmd-woo-ai-handoff-bar {
    display: none;
}

/* No top border on the gate when it is the first element in the clean screen. */
.tmd-woo-ai-panel--prechat .tmd-woo-ai-prechat {
    border-top: none;
}

.tmd-woo-ai-prechat__intro {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--tmd-ai-text-muted);
}

/* Field wrapper: stacked label + control */
.tmd-woo-ai-prechat__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tmd-woo-ai-prechat__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--tmd-ai-text);
}

.tmd-woo-ai-prechat__input,
.tmd-woo-ai-prechat__select {
    width: 100%;
    border: 1px solid var(--tmd-ai-border);
    border-radius: var(--tmd-ai-radius-sm);
    padding: 9px 11px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.4;
    color: var(--tmd-ai-text);
    background: var(--tmd-ai-bg);
    /* Prevent WP admin styles bleeding in */
    box-shadow: none;
}

.tmd-woo-ai-prechat__input {
    appearance: none;
}

.tmd-woo-ai-prechat__input:focus,
.tmd-woo-ai-prechat__select:focus {
    outline: 2px solid var(--tmd-ai-primary);
    outline-offset: 0;
    border-color: var(--tmd-ai-primary);
}

/* Consent row: checkbox + text */
.tmd-woo-ai-prechat__consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--tmd-ai-text-muted);
    line-height: 1.4;
    cursor: pointer;
}

.tmd-woo-ai-prechat__consent-check {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--tmd-ai-primary);
    cursor: pointer;
}

/* Error feedback: hidden by default via [hidden] attribute */
.tmd-woo-ai-prechat__feedback {
    font-size: 12px;
    color: var(--tmd-ai-error-color);
    padding: 6px 8px 6px 10px;
    background: var(--tmd-ai-error-bg);
    border-radius: 4px;
    border-left: 3px solid var(--tmd-ai-error-color);
    line-height: 1.4;
}

.tmd-woo-ai-prechat__submit {
    background: var(--tmd-ai-primary);
    color: var(--tmd-ai-text-light);
    border: none;
    border-radius: var(--tmd-ai-radius-sm);
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.tmd-woo-ai-prechat__submit:hover {
    background: var(--tmd-ai-primary-dark);
}

.tmd-woo-ai-prechat__submit:focus-visible {
    outline: 3px solid var(--tmd-ai-primary);
    outline-offset: 2px;
    background: var(--tmd-ai-primary-dark);
}

.tmd-woo-ai-prechat__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Square shape: straighten pre-chat corners. */
.tmd-woo-ai-widget--shape-square .tmd-woo-ai-prechat__input,
.tmd-woo-ai-widget--shape-square .tmd-woo-ai-prechat__select,
.tmd-woo-ai-widget--shape-square .tmd-woo-ai-prechat__submit {
    border-radius: 0;
}

/* Mobile: prevent iOS auto-zoom on focus (matches .tmd-woo-ai-input rule). */
@media (max-width: 767px) {
    .tmd-woo-ai-prechat__input,
    .tmd-woo-ai-prechat__select {
        font-size: 16px;
    }
}

/* =============================================================================
   18d. OFFLINE CARD (P4) — .tmd-woo-ai-offline-card (built by JS)
   Bot-side card shown when the assistant is offline: intro text, an FAQ
   accordion, and a contact CTA that reuses the handoff overlay. Reuses the
   same design tokens as the message bubbles for visual consistency.
   ============================================================================= */

.tmd-woo-ai-offline-card {
    align-self: flex-start;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: var(--tmd-ai-bg-bot);
    border: 1px solid var(--tmd-ai-border);
    border-radius: var(--tmd-ai-radius);
    border-bottom-left-radius: 4px;
}

/* Intro paragraph — preserves server \n newlines. */
.tmd-woo-ai-offline-intro {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--tmd-ai-text);
    white-space: pre-line;
}

/* FAQ accordion list */
.tmd-woo-ai-offline-faqs {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tmd-woo-ai-offline-faq {
    border: 1px solid var(--tmd-ai-border);
    border-radius: var(--tmd-ai-radius-sm);
    background: var(--tmd-ai-bg);
    overflow: hidden;
}

/* Summary (question) — pointer cursor, custom +/- caret, no native marker. */
.tmd-woo-ai-offline-faq-q {
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tmd-ai-text);
    cursor: pointer;
    list-style: none;
}

.tmd-woo-ai-offline-faq-q::-webkit-details-marker {
    display: none;
}

.tmd-woo-ai-offline-faq-q::after {
    content: "+";
    float: right;
    margin-left: 8px;
    color: var(--tmd-ai-text-muted);
    font-weight: 400;
}

/* Open state: subtle divider under the question + collapse glyph. */
.tmd-woo-ai-offline-faq[open] .tmd-woo-ai-offline-faq-q {
    border-bottom: 1px solid var(--tmd-ai-border);
}

.tmd-woo-ai-offline-faq[open] .tmd-woo-ai-offline-faq-q::after {
    content: "\2013"; /* en dash = collapse */
}

.tmd-woo-ai-offline-faq-q:focus-visible {
    outline: 2px solid var(--tmd-ai-primary);
    outline-offset: -2px;
}

/* Answer body — preserves server \n newlines. */
.tmd-woo-ai-offline-faq-a {
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tmd-ai-text);
    white-space: pre-line;
}

/* CTA row: button and/or channel links. */
.tmd-woo-ai-offline-cta-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tmd-woo-ai-offline-cta,
.tmd-woo-ai-offline-link {
    flex: 1 1 auto;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--tmd-ai-text-light);
    background: var(--tmd-ai-primary);
    border: none;
    border-radius: var(--tmd-ai-radius-sm);
    padding: 10px 14px;
    cursor: pointer;
}

.tmd-woo-ai-offline-cta:hover,
.tmd-woo-ai-offline-link:hover {
    background: var(--tmd-ai-primary-dark);
}

.tmd-woo-ai-offline-cta:focus-visible,
.tmd-woo-ai-offline-link:focus-visible {
    outline: 3px solid var(--tmd-ai-primary);
    outline-offset: 2px;
    background: var(--tmd-ai-primary-dark);
}

/* Channel-specific brand colours (match the handoff channel buttons). */
.tmd-woo-ai-offline-link--wa {
    background: #25d366;
    color: #ffffff;
}

.tmd-woo-ai-offline-link--ms {
    background: #0084ff;
    color: #ffffff;
}

/* Square shape: straighten offline card corners. */
.tmd-woo-ai-widget--shape-square .tmd-woo-ai-offline-card,
.tmd-woo-ai-widget--shape-square .tmd-woo-ai-offline-faq,
.tmd-woo-ai-widget--shape-square .tmd-woo-ai-offline-cta,
.tmd-woo-ai-widget--shape-square .tmd-woo-ai-offline-link {
    border-radius: 0;
}

/* =============================================================================
   18e. CONVERSATION RATING (WP-4) — .tmd-woo-ai-rating (built by JS)
   One-time star rating shown as a panel overlay when the visitor closes the
   chat. Reuses the same design tokens; SVG Feather "star" glyphs (no emoji).
   ============================================================================= */

.tmd-woo-ai-rating {
    position: absolute;
    inset: 0;
    background: var(--tmd-ai-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px;
    text-align: center;
    z-index: 3;
}

.tmd-woo-ai-rating__question {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tmd-ai-text);
}

.tmd-woo-ai-rating__stars {
    display: flex;
    gap: 6px;
}

/* Single star button — 44x44 touch target; empty (outline) by default. */
.tmd-woo-ai-rating__star {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--tmd-ai-border);
    line-height: 0;
    border-radius: 4px;
    transition: color 0.15s ease, transform 0.15s ease;
}

.tmd-woo-ai-rating__star:hover {
    color: #f5a623;
    transform: scale(1.1);
}

/* Selected star: filled amber. */
.tmd-woo-ai-rating__star.is-selected {
    color: #f5a623;
}

.tmd-woo-ai-rating__star.is-selected svg {
    fill: #f5a623;
}

.tmd-woo-ai-rating__star:focus-visible {
    outline: 2px solid var(--tmd-ai-primary);
    outline-offset: 2px;
}

.tmd-woo-ai-rating__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.tmd-woo-ai-rating__submit {
    background: var(--tmd-ai-primary);
    color: var(--tmd-ai-text-light);
    border: none;
    border-radius: var(--tmd-ai-radius-sm);
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.tmd-woo-ai-rating__submit:hover {
    background: var(--tmd-ai-primary-dark);
}

.tmd-woo-ai-rating__submit:focus-visible {
    outline: 3px solid var(--tmd-ai-primary);
    outline-offset: 2px;
    background: var(--tmd-ai-primary-dark);
}

.tmd-woo-ai-rating__submit:disabled {
    background: #a0aec0;
    cursor: not-allowed;
}

/* Dismiss link: subtle, underlined text button. */
.tmd-woo-ai-rating__skip {
    background: none;
    border: none;
    color: var(--tmd-ai-text-muted);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px 8px;
}

.tmd-woo-ai-rating__skip:hover {
    color: var(--tmd-ai-primary);
}

.tmd-woo-ai-rating__skip:focus-visible {
    outline: 2px solid var(--tmd-ai-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Square shape: straighten rating submit corners. */
.tmd-woo-ai-widget--shape-square .tmd-woo-ai-rating__submit {
    border-radius: 0;
}

/* =============================================================================
   18f. CLOUDFLARE TURNSTILE (v1.10.0) — .tmd-woo-ai-turnstile
   Step-up anti-abuse container (documente/ARCHITECTURE_TURNSTILE.md §7.2),
   sibling of .tmd-woo-ai-form inside .tmd-woo-ai-panel. assets/js/turnstile.js
   injects Cloudflare's own iframe here via turnstile.render({ size:'flexible' }),
   which already sizes itself responsively to the container width — CF's own
   script handles that, not this stylesheet (VERIFY-CF: iframe sizing behaviour
   confirmed against developers.cloudflare.com/turnstile, not an official
   WP/WOO/Elementor surface).

   appearance:'interaction-only' means the widget renders at ~0 visible height
   for normal (non-suspect) traffic — the common case — and only becomes
   visually apparent when Cloudflare decides the visitor must interact. This
   block therefore carries NO fixed padding/margin/border of its own: any
   persistent spacing here would show a permanent gap in the form for every
   visitor, which breaks the "semi-invisible" requirement. The handful of
   visitors who DO see the challenge get Cloudflare's own internal iframe
   padding, which is enough to read comfortably without our help.
   ============================================================================= */

.tmd-woo-ai-turnstile {
    /* Flex item of .tmd-woo-ai-panel (column flex) — full width, never
       collapsed by neighbouring flex-basis math. */
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    /* Zeroes the few stray px an inline-level iframe child leaves below its
       baseline, so a genuinely empty (not-yet-needed) challenge takes truly
       zero space instead of a ~4-5px sliver. */
    line-height: 0;
}

/* Defensive width cap on whatever Cloudflare injects (tag selector, not one
   of their internal class names — those are undocumented/VERIFY-CF and could
   change; the iframe element itself is the only stable contract). size:'flexible'
   already keeps CF's own width responsive; this is belt-and-braces so a future
   CF change can never push the chat panel into horizontal overflow. */
.tmd-woo-ai-turnstile iframe {
    display: block;
    max-width: 100%;
}

/* =============================================================================
   19. SCREEN READER ONLY utility (used in widget markup)
   ============================================================================= */

.tmd-woo-ai-widget .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal;
}

/* =============================================================================
   20. ACCESSIBILITY — prefers-reduced-motion
   Disables: typing animation, toggle transitions, teaser animation, FAB pulse.
   Teaser: appears instantly (no slide/fade) — content still accessible.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .tmd-woo-ai-toggle,
    .tmd-woo-ai-close,
    .tmd-woo-ai-send,
    .tmd-woo-ai-input,
    .tmd-woo-ai-feedback__btn,
    .tmd-woo-ai-rating__star,
    .tmd-woo-ai-typing__dot {
        transition: none;
        animation: none;
    }

    .tmd-woo-ai-messages {
        scroll-behavior: auto;
    }

    /* Teaser: skip entry animation — show at final position instantly */
    .tmd-woo-ai-teaser {
        transition: none;
        transform: translateY(0);
    }

    /* FAB pulse (nudge): disabled */
    .tmd-woo-ai-nudge--pulse.tmd-woo-ai-widget--floating .tmd-woo-ai-toggle {
        animation: none;
    }

    /* Lottie launcher: pause the animation when reduced motion is requested.
       JS also checks prefers-reduced-motion and skips mounting (belt + braces). */
    .tmd-woo-ai-lottie > svg {
        animation-play-state: paused;
    }
}

/* =============================================================================
   21. RESPONSIVE — Mobile (max 767px, targets 375px)
   Panel becomes near-full-screen; toggle stays fixed bottom corner.
   ============================================================================= */

@media (max-width: 767px) {
    /* Floating panel: near-full-screen on mobile */
    .tmd-woo-ai-widget--floating .tmd-woo-ai-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        /* Leave space for native OS chrome (notch, home bar) */
        height: calc(100vh - 80px);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        /* Override position-specific absolute right/left from desktop */
        margin: 0;
    }

    /* Both position modifiers: same full-width treatment on mobile */
    .tmd-woo-ai-widget--floating.tmd-woo-ai-pos--bottom-left .tmd-woo-ai-panel,
    .tmd-woo-ai-widget--floating.tmd-woo-ai-pos--bottom-right .tmd-woo-ai-panel {
        right: 0;
        left: 0;
    }

    /* Toggle stays at bottom-right (or bottom-left per modifier) */
    .tmd-woo-ai-widget--floating {
        bottom: 16px;
        right: 16px;
    }

    .tmd-woo-ai-widget--floating.tmd-woo-ai-pos--bottom-left {
        right: auto;
        left: 16px;
    }

    /* Slightly larger textarea rows on mobile for comfort */
    .tmd-woo-ai-input {
        font-size: 16px; /* Prevents iOS auto-zoom on focus */
    }

    /* Inline widget: constrained height on mobile */
    .tmd-woo-ai-widget--inline .tmd-woo-ai-panel {
        height: 400px;
    }
}

/* =============================================================================
   22. RESPONSIVE — Tablet (768px – 1023px)
   Panel slightly narrower than desktop default; everything else same.
   ============================================================================= */

@media (min-width: 768px) and (max-width: 1023px) {
    .tmd-woo-ai-widget--floating .tmd-woo-ai-panel {
        width: 320px;
        height: 480px;
    }
}

/* =============================================================================
   23. RESPONSIVE — Desktop (1024px+)
   Default sizes from custom properties apply; no override needed.
   Panel uses --tmd-ai-width (360px) and --tmd-ai-height (520px).
   ============================================================================= */

@media (min-width: 1024px) {
    /* Explicit anchor: ensures panel does not overflow viewport on ultra-wide */
    .tmd-woo-ai-widget--floating {
        bottom: 24px;
        right: 24px;
    }

    .tmd-woo-ai-widget--floating.tmd-woo-ai-pos--bottom-left {
        right: auto;
        left: 24px;
    }

    /* P5: operator-adjustable panel size — DESKTOP ONLY. frontend.js sets the
       *-desktop vars from the settings sliders; when unset they fall back to the
       defaults (360×520). Tablet (§22) and mobile (§21) keep their fixed sizes on
       purpose, so the size sliders never affect small screens. */
    .tmd-woo-ai-widget--floating .tmd-woo-ai-panel {
        width: var(--tmd-ai-width-desktop, var(--tmd-ai-width));
        height: var(--tmd-ai-height-desktop, var(--tmd-ai-height));
    }
}

/* =============================================================================
   BRAND FOOTER (B2) — persistent credit line at the bottom of the chat panel.
   Version intentionally omitted here (public surface) to avoid fingerprinting.
   ============================================================================= */

.tmd-woo-ai-brand {
    padding: 8px 14px;
    border-top: 1px solid var(--tmd-ai-border);
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    color: var(--tmd-ai-text-muted);
}

.tmd-woo-ai-brand a {
    color: var(--tmd-ai-text-muted);
    text-decoration: underline;
}

.tmd-woo-ai-brand a:hover,
.tmd-woo-ai-brand a:focus-visible {
    color: var(--tmd-ai-primary);
}