/* ============ Sara · Consulente di stile (chat AI) ============ */
.sara-chat{
    --sc-grad:linear-gradient(120deg,#e9c8b4,#f0ddcf 40%,#d9b9c4);
    --sc-ink:#1a1714;
    --sc-bg:#fffdfa;
    --sc-soft:#f5efe6;
    --sc-line:#ece2d4;
    --sc-muted:#9a9085;
    position:fixed;
    right:max(1.25rem, env(safe-area-inset-right));
    bottom:max(1.25rem, env(safe-area-inset-bottom));
    z-index:9000;
    font-family:var(--sans,'Jost',system-ui,sans-serif);
}

/* ---------- Launcher ---------- */
.sc-launcher{
    position:relative;display:inline-flex;align-items:center;gap:.6rem;
    height:60px;padding:0 22px 0 18px;border:none;cursor:pointer;
    border-radius:34px;color:var(--sc-ink);
    background:var(--sc-grad);
    box-shadow:0 12px 34px rgba(160,120,95,.34), inset 0 0 0 1px rgba(255,255,255,.35);
    font-family:inherit;font-size:.82rem;letter-spacing:.04em;font-weight:500;
    transition:transform .35s cubic-bezier(.2,.9,.3,1.3), box-shadow .3s, opacity .3s;
}
.sc-launcher:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(160,120,95,.42), inset 0 0 0 1px rgba(255,255,255,.45)}
.sc-launcher:active{transform:translateY(-1px) scale(.98)}
.sc-launcher svg{flex:none;position:relative;z-index:1}
.sc-launcher-label{white-space:nowrap;position:relative;z-index:1}
.sc-launcher-pulse{
    position:absolute;inset:0;border-radius:inherit;z-index:0;
    box-shadow:0 0 0 0 rgba(217,185,196,.6);
    animation:sc-pulse 2.6s ease-out infinite;
}
@keyframes sc-pulse{
    0%{box-shadow:0 0 0 0 rgba(217,185,196,.55)}
    70%{box-shadow:0 0 0 16px rgba(217,185,196,0)}
    100%{box-shadow:0 0 0 0 rgba(217,185,196,0)}
}

/* ---------- Panel ---------- */
.sc-panel{
    position:absolute;right:0;bottom:0;
    width:min(384px, calc(100vw - 2rem));
    height:min(620px, calc(100vh - 2.5rem));
    display:flex;flex-direction:column;overflow:hidden;
    background:var(--sc-bg);
    border-radius:22px;
    border:1px solid var(--sc-line);
    box-shadow:0 28px 70px rgba(40,28,20,.28);
    opacity:0;visibility:hidden;transform:translateY(18px) scale(.96);
    transform-origin:bottom right;pointer-events:none;
    transition:opacity .3s ease, transform .35s cubic-bezier(.2,.9,.3,1.2), visibility .3s;
}
.sara-chat.is-open .sc-panel{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto}
.sara-chat.is-open .sc-launcher{opacity:0;transform:translateY(10px) scale(.85);pointer-events:none}

/* ---------- Header ---------- */
.sc-head{
    display:flex;align-items:center;gap:.7rem;padding:1rem 1rem 1rem 1.1rem;
    background:var(--sc-grad);color:var(--sc-ink);position:relative;
}
.sc-avatar{
    flex:none;width:40px;height:40px;border-radius:50%;
    display:grid;place-items:center;
    background:rgba(255,255,255,.55);
    font-family:var(--serif,'Cormorant Garamond',serif);font-size:1.4rem;font-weight:600;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
.sc-head-txt{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
.sc-head-name{font-family:var(--serif,'Cormorant Garamond',serif);font-size:1.2rem;font-weight:600;letter-spacing:.3px}
.sc-head-role{font-size:.7rem;letter-spacing:.02em;opacity:.78}
.sc-head-role::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#4caf72;margin-right:6px;vertical-align:middle}
.sc-close{flex:none;width:34px;height:34px;display:grid;place-items:center;border:none;cursor:pointer;
    border-radius:50%;background:rgba(255,255,255,.35);color:var(--sc-ink);transition:background .2s}
.sc-close:hover{background:rgba(255,255,255,.6)}

/* ---------- Log ---------- */
.sc-log{
    flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.7rem;
    background:linear-gradient(var(--sc-bg),var(--sc-bg)) ,radial-gradient(circle at 100% 0,rgba(233,200,180,.16),transparent 45%);
    scrollbar-width:thin;scrollbar-color:var(--sc-line) transparent;
}
.sc-log::-webkit-scrollbar{width:7px}
.sc-log::-webkit-scrollbar-thumb{background:var(--sc-line);border-radius:10px}

.sc-msg{max-width:84%;padding:.7rem .9rem;border-radius:16px;font-size:.9rem;line-height:1.5;animation:sc-in .35s ease both}
.sc-msg.is-bot{align-self:flex-start;background:var(--sc-soft);color:var(--sc-ink);border-bottom-left-radius:5px}
.sc-msg.is-user{align-self:flex-end;background:var(--sc-ink);color:#f7efe6;border-bottom-right-radius:5px}
@keyframes sc-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* typing */
.sc-typing{align-self:flex-start;background:var(--sc-soft);padding:.8rem 1rem;border-radius:16px;border-bottom-left-radius:5px;display:inline-flex;gap:5px}
.sc-typing span{width:7px;height:7px;border-radius:50%;background:var(--sc-muted);animation:sc-bounce 1.3s infinite ease-in-out}
.sc-typing span:nth-child(2){animation-delay:.18s}
.sc-typing span:nth-child(3){animation-delay:.36s}
@keyframes sc-bounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-5px);opacity:1}}

/* product cards inside a bot turn */
.sc-prods{align-self:flex-start;max-width:96%;display:flex;flex-direction:column;gap:.55rem;margin-top:-.1rem}
.sc-prod{
    display:flex;align-items:center;gap:.75rem;padding:.5rem;text-decoration:none;
    background:var(--sc-bg);border:1px solid var(--sc-line);border-radius:14px;color:var(--sc-ink);
    transition:transform .2s, box-shadow .2s, border-color .2s;animation:sc-in .4s ease both;
}
.sc-prod:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(40,28,20,.12);border-color:#dcc9b8}
.sc-prod-img{flex:none;width:54px;height:66px;border-radius:9px;background:var(--sc-soft) center/cover no-repeat}
.sc-prod-info{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1}
.sc-prod-name{font-size:.86rem;line-height:1.25;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sc-prod-price{font-size:.82rem;color:var(--sc-muted)}
.sc-prod-go{flex:none;margin-left:auto;color:var(--sc-muted);font-size:1.2rem;line-height:1}

/* ---------- Chips ---------- */
.sc-chips{display:flex;gap:.45rem;padding:.2rem .9rem .55rem;overflow-x:auto;scrollbar-width:none}
.sc-chips::-webkit-scrollbar{display:none}
.sc-chip{
    flex:none;border:1px solid var(--sc-line);background:var(--sc-bg);color:var(--sc-ink);
    padding:.42rem .85rem;border-radius:30px;font-family:inherit;font-size:.76rem;cursor:pointer;
    white-space:nowrap;transition:background .2s,border-color .2s,transform .15s;
}
.sc-chip:hover{background:var(--sc-soft);border-color:#dcc9b8}
.sc-chip:active{transform:scale(.96)}

/* ---------- Form ---------- */
.sc-form{display:flex;align-items:center;gap:.5rem;padding:.7rem .8rem;border-top:1px solid var(--sc-line);background:var(--sc-bg)}
.sc-input{
    flex:1;min-width:0;border:1px solid var(--sc-line);background:var(--sc-soft);
    border-radius:24px;padding:.7rem 1rem;font-family:inherit;font-size:.9rem;color:var(--sc-ink);
    outline:none;transition:border-color .2s, background .2s;
}
.sc-input:focus{border-color:#d9b9c4;background:var(--sc-bg)}
.sc-input::placeholder{color:var(--sc-muted)}
.sc-mic,.sc-send{
    flex:none;width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
    display:grid;place-items:center;transition:transform .15s, background .2s, color .2s;
}
.sc-mic{background:var(--sc-soft);color:var(--sc-ink)}
.sc-mic:hover{background:var(--sc-line)}
.sc-mic.is-recording{background:#e2596b;color:#fff;animation:sc-rec 1.1s infinite}
@keyframes sc-rec{0%{box-shadow:0 0 0 0 rgba(226,89,107,.5)}70%{box-shadow:0 0 0 12px rgba(226,89,107,0)}100%{box-shadow:0 0 0 0 rgba(226,89,107,0)}}
.sc-send{background:var(--sc-ink);color:#f7efe6}
.sc-send:hover{transform:scale(1.06)}
.sc-send:disabled{opacity:.45;cursor:default;transform:none}

.sc-foot{margin:0;padding:0 1rem .7rem;text-align:center;font-size:.66rem;color:var(--sc-muted)}

/* ---------- Mobile ---------- */
@media (max-width:480px){
    .sara-chat{right:0;bottom:0;left:0}
    .sc-launcher{position:fixed;right:1rem;bottom:1rem}
    .sc-panel{
        position:fixed;inset:0;width:100vw;height:100dvh;
        border-radius:0;border:none;transform:translateY(100%) scale(1);
    }
    .sara-chat.is-open .sc-panel{transform:translateY(0)}
    .sc-launcher-label{display:none}
    .sc-launcher{padding:0;width:60px;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
    .sc-launcher-pulse,.sc-mic.is-recording{animation:none}
    .sc-panel,.sc-launcher,.sc-msg,.sc-prod{transition:opacity .2s;animation:none}
}