/* "Ask your AI about Lime" ribbon + popover. Markup: inc/templates/ai-ribbon/index.tpl.php. Behaviour: assets/js/ai-ribbon.js. */

/* Lifts the inline pre-load cloak (ai-ribbon-frontend.php) once this deferred file applies; first so later rules win */
.ai-cloak { display: revert; }

.ai-tab,
.ai-scrim,
.ai-pop {
    --ai-ink: var(--wp--preset--color--neutral-900);
    --ai-muted: var(--wp--preset--color--neutral-800);
    --ai-line: var(--wp--preset--color--neutral-200);
    --ai-soft: var(--wp--preset--color--neutral-50);
    --ai-accent: var(--wp--preset--color--brand-1);
    --ai-focus: var(--wp--preset--color--primary);
    --ai-ok: #2f8f6f; /* no theme token for this success green */
    --ai-ease: cubic-bezier(.2, .8, .2, 1);
    --ai-z: 900; /* closed tab: under chat (999) and header overlay (1000) */
    --ai-modal-z: 1001; /* open popover: above everything */
    font-family: var(--wp--preset--font-family--body);
    box-sizing: border-box;
}

.ai-tab *,
.ai-pop * {
    box-sizing: border-box;
}

/* ---------- Ribbon: icon that peeks into a bar (nudge, hover-intent, focus) ---------- */
.ai-tab {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: var(--ai-z);
    transform: translate(0, -50%);
    background: var(--ai-accent);
    color: var(--ai-ink);
    border-radius: 16px 0 0 16px;
    box-shadow: 0 6px 24px rgba(38, 39, 43, .18);
    transition: transform .45s var(--ai-ease), opacity .3s;
}
/* Off-screen extension so the scroll wiggle never shows a gap at the right edge */
.ai-tab::after { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 24px; background: inherit; }
.ai-tab[hidden] { display: none; }
.ai-tab.is-off { transform: translate(110%, -50%); opacity: 0; pointer-events: none; }
/* Hidden while the Userlike messenger is open (class set by chat-button.js) */
html.lt-chat-open .ai-tab { transform: translate(110%, -50%); opacity: 0; pointer-events: none; }

.ai-tab__open {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 8px 10px 8px 8px;
    font: 700 .9rem/1 var(--wp--preset--font-family--body);
    letter-spacing: .01em;
}
.ai-tab__open:focus-visible { outline: 3px solid var(--ai-focus); outline-offset: 2px; border-radius: 12px; }
.ai-icon { width: 20px; height: 20px; flex: none; }
.ai-tab__open > .ai-icon {
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    transition: transform .4s var(--ai-ease);
}
.ai-tab__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    margin-left: 0;
    transition: max-width .4s var(--ai-ease), opacity .2s, margin-left .4s var(--ai-ease);
}
.ai-tab__label { white-space: nowrap; }
.ai-tab__sub { font-weight: 400; font-size: .78rem; opacity: .75; white-space: nowrap; }
.ai-tab.is-peek .ai-tab__text { max-width: 320px; opacity: 1; margin-left: 12px; transition-delay: 0s, .12s, 0s; }
.ai-tab.is-peek .ai-tab__open { padding-right: 22px; }
.ai-tab.is-peek .ai-tab__open > .ai-icon { transform: rotate(-12deg); }

.ai-tab__close {
    all: unset;
    cursor: pointer;
    position: absolute;
    top: -9px;
    left: -9px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--wp--preset--color--white);
    color: var(--ai-ink);
    box-shadow: 0 2px 8px rgba(38, 39, 43, .25);
    opacity: 0;
    transform: scale(.7);
    pointer-events: none;
    transition: opacity .15s, transform .15s var(--ai-ease);
}
.ai-tab__close svg { width: 10px; height: 10px; }
.ai-tab__close:focus-visible { outline: 3px solid var(--ai-focus); outline-offset: 1px; }
.ai-tab.is-peek .ai-tab__close { opacity: 1; transform: scale(1); pointer-events: auto; }

/* ---------- Popover / bottom sheet ---------- */
.ai-scrim {
    position: fixed;
    inset: 0;
    background: rgba(38, 39, 43, .35);
    z-index: var(--ai-modal-z);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}
.ai-scrim.open { opacity: 1; pointer-events: auto; }
@media (min-width: 768px) { .ai-scrim { display: none; } } /* desktop popover is non-modal */

.ai-pop {
    position: fixed;
    z-index: calc(var(--ai-modal-z) + 1);
    right: 16px;
    top: 50%;
    translate: 0 -50%;
    width: 400px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 200px); /* keeps clear of the 60px chat button bottom right */
    overflow: auto;
    transform-origin: top left;
    background: var(--wp--preset--color--white);
    color: var(--ai-ink);
    border-radius: 20px;
    box-shadow: 0 16px 48px rgba(38, 39, 43, .28);
    padding: 28px;
    visibility: hidden;
    line-height: 1.55;
}
.ai-pop.open { visibility: visible; }
.ai-pop__x {
    all: unset;
    cursor: pointer;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}
.ai-pop__x svg { width: 14px; height: 14px; }
.ai-pop__x:hover,
.ai-pop__x:focus-visible { background: var(--ai-soft); }
.ai-pop__x:focus-visible { outline: 3px solid var(--ai-focus); outline-offset: 1px; }
.ai-pop h2 {
    font-family: var(--wp--preset--font-family--headline);
    font-weight: 600;
    line-height: 1.1;
    font-size: 1.6rem;
    margin: 0 0 .35em;
    padding-right: 32px;
    color: inherit;
}
.ai-pop__lead { margin: 0 0 4px; font-size: .95rem; }
.ai-pop__trust { margin: 0 0 18px; color: var(--ai-muted); font-size: .85rem; display: flex; gap: 6px; align-items: flex-start; }
.ai-pop__trust svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ai-ok); }

.ai-prompt {
    background: var(--ai-soft);
    border-left: 3px solid var(--ai-accent);
    border-radius: 4px 12px 12px 4px;
    padding: 12px 14px;
    font-size: .88rem;
    line-height: 1.5;
    margin-bottom: 16px;
    max-height: 150px;
    overflow: auto;
    user-select: all;
    overflow-wrap: anywhere;
}
.ai-btn {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 20px;
    border-radius: 999px;
    font-weight: 700;
    transition: background .2s, border-color .2s, color .2s;
}
.ai-btn:focus-visible { outline: 3px solid var(--ai-focus); outline-offset: 2px; }
.ai-btn--primary { background: var(--ai-ink); color: var(--wp--preset--color--white); }
.ai-btn.is-done { background: var(--ai-ok); color: var(--wp--preset--color--white); }
.ai-hint {
    margin: 10px 0 0;
    font-size: .9rem;
    text-align: center;
    min-height: 1.4em;
    color: var(--ai-ok);
    font-weight: 700;
    opacity: 0;
    transition: opacity .2s;
}
.ai-hint.show { opacity: 1; }

/* Open-in icon row */
.ai-iconrow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
.ai-iconrow__label { font-size: .9rem; color: var(--ai-muted); margin-right: 4px; }
.ai-app {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid var(--ai-line);
    display: grid;
    place-items: center;
    transition: border-color .15s, transform .15s var(--ai-ease);
    color: var(--ai-ink);
}
.ai-app svg { width: 22px; height: 22px; fill: var(--brand); }
.ai-app:hover,
.ai-app:focus-visible { border-color: var(--brand); transform: translateY(-2px); outline: none; }
.ai-app:focus-visible { box-shadow: 0 0 0 3px var(--ai-focus); }
/* Shared assistant tooltip; JS centres it over the hovered icon and clamps it inside the popover */
.ai-iconrow { position: relative; }
.ai-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    translate: 0 4px;
    background: var(--ai-ink);
    color: var(--wp--preset--color--white);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.35;
    padding: 5px 9px;
    border-radius: 6px;
    width: max-content;
    max-width: 180px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s, translate .15s;
}
.ai-tip.is-on { opacity: 1; translate: 0 0; }
/* Arrow points at the hovered icon even when the box is shifted to stay inside the popover */
.ai-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: var(--ai-tip-arrow, 50%);
    translate: -50% 0;
    border: 6px solid transparent;
    border-top-color: var(--ai-ink);
}

.ai-how { margin-top: 16px; font-size: .85rem; color: var(--ai-muted); }
.ai-how summary { cursor: pointer; text-align: center; list-style: none; }
.ai-how summary::-webkit-details-marker { display: none; }
.ai-how summary::after { content: ' \25BE'; }
.ai-how[open] summary::after { content: ' \25B4'; }
.ai-how summary:focus-visible { outline: 3px solid var(--ai-focus); outline-offset: 2px; border-radius: 4px; }
.ai-how ul { margin: 10px 0 8px; padding-left: 18px; text-align: left; }
.ai-how li + li { margin-top: 4px; }
.ai-how a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ai-how a:hover,
.ai-how a:focus-visible { text-decoration: none; }

@media (max-width: 767px) {
    .ai-tab__text { display: none !important; }
    .ai-tab__close { display: none; }
    .ai-pop {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        max-width: none;
        translate: none;
        max-height: 90vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        transition: transform .35s var(--ai-ease), visibility 0s .35s;
        padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
    }
    .ai-pop.open { transform: translateY(0); transition: transform .35s var(--ai-ease); }
    .ai-pop::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--ai-line); margin: -10px auto 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-tab,
    .ai-tab *,
    .ai-pop,
    .ai-scrim { transition: none !important; }
}