.pf-ai{
    --pf-ai-primary:var(--color-primary,#534baf);
    --pf-ai-accent:#edf4ff;
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:1050;
    font-family:inherit;
    color:#222b43;
    font-size:14px;
    line-height:1.5;
}

.pf-ai [hidden],
.pf-ai[hidden]{
    display:none!important;
}

.pf-ai *{
    box-sizing:border-box;
}

.pf-ai button,
.pf-ai textarea{
    font:inherit;
}

.pf-ai button{
    cursor:pointer;
}

.pf-ai button:disabled{
    cursor:wait;
    opacity:.55;
}

.pf-ai button:focus-visible,
.pf-ai textarea:focus-visible,
.pf-ai a:focus-visible,
.pf-ai summary:focus-visible{
    outline:3px solid #1979c2;
    outline-offset:4px;
}

/* Launcher */
.pf-ai__launcher{
    display:flex;
    align-items:center;
    gap:10px;
    padding:16px 20px;
    border:0;
    border-radius:18px;
    color:#fff;
    background:var(--pf-ai-primary);
    box-shadow:0 8px 30px #23315833;
    font-weight:600!important;
    transition:transform .18s;
}

.pf-ai__launcher:hover{
    transform:translateY(-2px);
}

/* Panel */
.pf-ai__panel{
    position:absolute;
    right:0;
    bottom:76px;
    width:414px;
    height:min(660px,calc(100dvh - 135px));
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#fff;
    border:1px solid #e5e8f0;
    border-radius:20px;
    box-shadow:0 16px 65px #20315233;
}

/* Header */
.pf-ai__header{
    display:flex;
    align-items:center;
    gap:11px;
    padding:20px 18px;
    background:var(--pf-ai-primary);
    color:#fff;
    flex-shrink:0;
}

/* IMPORTANT: let title area fill available space */
.pf-ai__header > div{
    flex:1 1 auto;
    min-width:0;
}

.pf-ai__header h2{
    margin:0;
    font-size:16px;
    line-height:1.3;
    color:inherit;
    font-weight:700;
    white-space:normal;
}

.pf-ai__header p{
    margin:3px 0 0;
    font-size:11px;
    line-height:1.4;
    color:inherit;
    opacity:.88;
}

.pf-ai__avatar{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    flex:0 0 38px;
    background:#ffffff20;
    border:1px solid #ffffff40;
    border-radius:12px;
    font-size:24px;
}

.pf-ai__close{
    display:grid;
    place-items:center;
    margin-left:auto;
    flex:0 0 32px;
    width:32px;
    height:32px;
    border:0;
    background:transparent;
    color:#fff;
    font-size:27px!important;
    padding:0;
    line-height:1;
}

/* Transcript */
.pf-ai__transcript{
    flex:1;
    min-height:0;
    overflow:auto;
    overscroll-behavior:contain;
    padding:22px 18px;
    background:linear-gradient(180deg,#f6f8fc,#fff 150px);
    scroll-behavior:smooth;
}

.pf-ai__message{
    margin:0 0 18px;
    overflow-wrap:anywhere;
}

.pf-ai__who{
    font-size:10px;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
    margin-bottom:5px;
    color:#697389;
}

.pf-ai__bubble{
    padding:12px 14px;
    border-radius:4px 15px 15px;
    background:#f0f3f9;
    white-space:pre-wrap;
    font-size:14px;
    line-height:1.65;
}

.pf-ai__message--user{
    margin-left:38px;
}

.pf-ai__message--user .pf-ai__who{
    text-align:right;
}

.pf-ai__message--user .pf-ai__bubble{
    border-radius:15px 4px 15px 15px;
    background:var(--pf-ai-primary);
    color:#fff;
}

/* Starter buttons */
.pf-ai__starters{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:12px;
}

.pf-ai__starters button{
    border:1px solid #dce2ef;
    border-radius:10px;
    background:#fff;
    color:#364966;
    padding:8px 10px;
    text-align:left;
    font-size:14px;
}

.pf-ai__starters button:hover{
    background:var(--pf-ai-accent);
}

/* Status / errors */
.pf-ai__status{
    min-height:22px;
    padding:0 18px;
    font-size:14px;
    color:#657189;
}

.pf-ai__error{
    margin:0 16px 8px;
    padding:10px;
    border-radius:8px;
    background:#fff0ed;
    color:#8a3020;
    font-size:12px;
}

.pf-ai__error button{
    border:0;
    background:none;
    text-decoration:underline;
    color:inherit;
    padding:5px;
}

/* Form */
.pf-ai__form{
    display:flex;
    align-items:flex-end;
    gap:8px;
    margin:0 14px;
    padding:6px;
    border:1px solid #dce2ef;
    border-radius:13px;
    background:#fff;
    flex-shrink:0;
}

.pf-ai__form textarea{
    width:100%;
    min-width:0;
    min-height:42px;
    max-height:100px;
    resize:none;
    border:0;
    background:transparent;
    box-shadow:none;
    padding:10px;
    color:#222b43;
    line-height:1.5;
    border-radius:6px;
    font-size:14px;
}

.pf-ai__send{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    flex:0 0 42px;
    border:0;
    border-radius:10px;
    background:var(--pf-ai-primary);
    color:#fff;
    padding:0;
}

.pf-ai__notice{
    margin:10px 18px 14px;
    color:#6a7487;
    font-size:10px;
    line-height:1.5;
    text-align:center;
    flex-shrink:0;
}

/* Products */
.pf-ai__products{
    display:grid;
    gap:12px;
    margin:12px 0;
}

.pf-ai__product{
    display:grid;
    grid-template-columns:74px minmax(0,1fr);
    gap:12px;
    border:1px solid #e0e6ef;
    border-radius:12px;
    padding:12px;
    background:#fff;
    overflow:hidden;
}

.pf-ai__product img{
    width:74px;
    height:88px;
    object-fit:cover;
    border-radius:8px;
    background:#f0f3f9;
}

.pf-ai__product h3{
    font-size:14px;
    line-height:1.4;
    margin:0 0 5px;
    color:#222b43;
}

.pf-ai__product p{
    font-size:12px;
    line-height:1.5;
    margin:6px 0;
    color:#536079;
    white-space:pre-wrap;
}

.pf-ai__price{
    font-weight:700;
    color:var(--pf-ai-primary);
    font-size:13px;
}

.pf-ai__product a{
    display:inline-block;
    margin-top:7px;
    padding:6px 10px;
    border-radius:7px;
    background:var(--pf-ai-accent);
    font-size:12px;
    font-weight:600;
    color:#263c60;
    text-decoration:none;
}

.pf-ai__product details{
    grid-column:1/-1;
    font-size:12px;
}

.pf-ai__product summary{
    cursor:pointer;
    font-weight:600;
}

.pf-ai__product ul{
    padding-left:18px;
    margin:6px 0;
}

.pf-ai__product li{
    margin-bottom:5px;
}

/* Accessibility */
.pf-ai__sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* Misc */
.pf-ai__short{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}

.pf-ai__footer{
    flex-shrink:0;
    padding:8px 16px 10px;
    text-align:center;
}

.pf-ai__footer .pf-ai__notice{
    margin:0 0 3px;
}

.pf-ai__reset{
    border:0;
    background:transparent;
    text-decoration:underline;
    color:#4c5b76;
    font-size:11px!important;
    padding:5px 10px;
    min-height:28px;
}

.pf-ai__navigation{
    display:inline-block;
    margin-top:8px;
    padding:9px 12px;
    border-radius:8px;
    background:var(--pf-ai-accent);
    color:#263c60;
    font-weight:600;
    text-decoration:none;
}

.pf-ai__resumed{
    font-size:11px;
    text-align:center;
    color:#657189;
}

/* Mobile */
@media(max-width:520px){
    .pf-ai{
        right:14px;
        bottom:max(14px,env(safe-area-inset-bottom));
    }

    .pf-ai__launcher{
        padding:14px 17px;
        border-radius:16px;
    }

    .pf-ai__panel{
        position:fixed;
        inset:8px 8px auto;
        width:auto;
        height:calc(100dvh - 16px);
        max-height:calc(100dvh - 16px);
        border-radius:17px;
        padding-bottom:env(safe-area-inset-bottom);
    }

    .pf-ai__header{
        padding:17px 14px;
        gap:10px;
    }

    .pf-ai__header h2{
        font-size:15px;
    }

    .pf-ai__avatar{
        width:36px;
        height:36px;
        flex-basis:36px;
    }

    .pf-ai__form textarea{
        font-size:16px;
    }

    .pf-ai__transcript{
        padding:18px 14px;
    }

    body.pf-ai-mobile-open{
        overflow:hidden;
    }
}

@media(prefers-reduced-motion:reduce){
    .pf-ai__launcher{
        transition:none;
    }

    .pf-ai__transcript{
        scroll-behavior:auto;
    }
}