/* ============================================================================
   PinePrompts AI Assistant — floating chat widget
   Colours are driven by --ppai-accent (set inline from settings).
   ========================================================================== */

#ppai-root{
    --ppai-accent:#E60023;
    --ppai-bg:#141416;
    --ppai-surface:#1d1d20;
    --ppai-surface-2:#26262b;
    --ppai-border:#2e2e34;
    --ppai-text:#f4f4f5;
    --ppai-text-dim:#a1a1aa;
    --ppai-radius:18px;
    --ppai-font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* Light-mode adaptation when the host site is in light theme */
[data-theme="light"] #ppai-root{
    --ppai-bg:#ffffff;
    --ppai-surface:#ffffff;
    --ppai-surface-2:#f4f4f5;
    --ppai-border:#e6e6ea;
    --ppai-text:#18181b;
    --ppai-text-dim:#6b7280;
}

#ppai-root *{box-sizing:border-box;}

/* ── Launcher bubble ─────────────────────────────────────────────────────── */
.ppai-launcher{
    position:fixed; right:20px; bottom:20px; z-index:2147483000;
    width:58px; height:58px; border-radius:50%; border:none; cursor:pointer;
    background:var(--ppai-accent); color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 28px rgba(0,0,0,.32), 0 0 0 6px rgba(230,0,35,.12);
    transition:transform .18s ease, box-shadow .18s ease;
    padding:0;
}
.ppai-launcher:hover{transform:translateY(-2px) scale(1.04);}
.ppai-launcher:active{transform:scale(.96);}
.ppai-launcher svg{width:26px;height:26px;}
.ppai-launcher.ppai-hidden{opacity:0;pointer-events:none;transform:scale(.6);}

/* tiny "AI" ping dot */
.ppai-launcher::after{
    content:""; position:absolute; top:10px; right:11px;
    width:9px; height:9px; border-radius:50%; background:#22c55e;
    border:2px solid var(--ppai-accent);
}

/* ── Panel ───────────────────────────────────────────────────────────────── */
.ppai-panel{
    position:fixed; right:20px; bottom:20px; z-index:2147483001;
    width:384px; max-width:calc(100vw - 32px);
    height:600px; max-height:calc(100dvh - 40px);
    background:var(--ppai-bg); color:var(--ppai-text);
    border:1px solid var(--ppai-border); border-radius:var(--ppai-radius);
    box-shadow:0 24px 70px rgba(0,0,0,.45);
    display:flex; flex-direction:column; overflow:hidden;
    font-family:var(--ppai-font);
    transform:translateY(16px) scale(.98); opacity:0; pointer-events:none;
    transition:transform .22s cubic-bezier(.4,0,.2,1), opacity .18s ease;
}
.ppai-panel.ppai-open{transform:translateY(0) scale(1); opacity:1; pointer-events:auto;}

/* Header */
.ppai-head{
    display:flex; align-items:center; gap:11px;
    padding:15px 16px; border-bottom:1px solid var(--ppai-border);
    background:linear-gradient(180deg, color-mix(in srgb, var(--ppai-accent) 12%, transparent), transparent);
    flex-shrink:0;
}
.ppai-head-icon{
    width:36px;height:36px;border-radius:10px;flex-shrink:0;
    background:var(--ppai-accent);color:#fff;display:flex;align-items:center;justify-content:center;
}
.ppai-head-icon svg{width:20px;height:20px;}
.ppai-head-meta{display:flex;flex-direction:column;line-height:1.2;min-width:0;}
.ppai-head-title{font-size:15px;font-weight:800;letter-spacing:-.2px;}
.ppai-head-sub{font-size:11.5px;color:var(--ppai-text-dim);display:flex;align-items:center;gap:5px;}
.ppai-head-sub::before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e;}
.ppai-close{
    margin-left:auto; background:transparent; border:none; cursor:pointer;
    color:var(--ppai-text-dim); width:32px;height:32px;border-radius:8px;
    display:flex;align-items:center;justify-content:center; transition:background .15s,color .15s;
}
.ppai-close:hover{background:var(--ppai-surface-2);color:var(--ppai-text);}

/* Messages */
.ppai-body{
    flex:1 1 auto; min-height:0; overflow-y:auto; padding:16px;
    display:flex; flex-direction:column; gap:12px; scroll-behavior:smooth;
}
.ppai-body::-webkit-scrollbar{width:8px;}
.ppai-body::-webkit-scrollbar-thumb{background:var(--ppai-border);border-radius:8px;}

.ppai-msg{max-width:86%;font-size:13.5px;line-height:1.55;word-wrap:break-word;}
.ppai-msg.ppai-user{
    align-self:flex-end; background:var(--ppai-accent); color:#fff;
    padding:9px 13px; border-radius:14px 14px 4px 14px;
}
.ppai-msg.ppai-bot{
    align-self:flex-start; background:var(--ppai-surface); color:var(--ppai-text);
    border:1px solid var(--ppai-border);
    padding:11px 13px; border-radius:14px 14px 14px 4px;
}
.ppai-msg.ppai-bot p{margin:0 0 8px;}
.ppai-msg.ppai-bot p:last-child{margin-bottom:0;}
.ppai-msg.ppai-bot a{color:var(--ppai-accent);font-weight:700;}
.ppai-msg.ppai-bot strong{font-weight:800;}
.ppai-msg.ppai-bot code:not(.ppai-pre code){
    background:var(--ppai-surface-2);padding:1px 5px;border-radius:5px;font-size:12px;
}

/* Code block with copy button */
.ppai-pre{
    position:relative; margin:8px 0; border:1px solid var(--ppai-border);
    border-radius:12px; background:var(--ppai-surface-2); overflow:hidden;
}
.ppai-pre pre{
    margin:0; padding:12px 13px; padding-top:30px;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
    line-height:1.5; white-space:pre-wrap; word-break:break-word; color:var(--ppai-text);
}
.ppai-copy{
    position:absolute; top:6px; right:6px; z-index:2;
    background:var(--ppai-accent); color:#fff; border:none; cursor:pointer;
    font-size:11px; font-weight:700; font-family:var(--ppai-font);
    padding:4px 9px; border-radius:7px; transition:opacity .15s;
}
.ppai-copy:hover{opacity:.88;}

/* Prompt result cards */
.ppai-cards{align-self:flex-start;display:flex;flex-direction:column;gap:8px;width:100%;}
.ppai-cards-label{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ppai-text-dim);margin:2px 0;}
.ppai-card{
    display:flex; gap:10px; align-items:center; text-decoration:none;
    background:var(--ppai-surface); border:1px solid var(--ppai-border);
    border-radius:12px; padding:9px; transition:border-color .15s, transform .12s;
}
.ppai-card:hover{border-color:var(--ppai-accent);transform:translateY(-1px);}
.ppai-card-thumb{width:46px;height:46px;border-radius:9px;object-fit:cover;flex-shrink:0;background:var(--ppai-surface-2);}
.ppai-card-thumb.ppai-ph{display:flex;align-items:center;justify-content:center;font-size:20px;}
.ppai-card-txt{min-width:0;}
.ppai-card-title{font-size:13px;font-weight:700;color:var(--ppai-text);line-height:1.25;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.ppai-card-ex{font-size:11.5px;color:var(--ppai-text-dim);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* Typing indicator */
.ppai-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:var(--ppai-surface);border:1px solid var(--ppai-border);border-radius:14px 14px 14px 4px;}
.ppai-typing span{width:7px;height:7px;border-radius:50%;background:var(--ppai-text-dim);animation:ppai-bounce 1.2s infinite ease-in-out;}
.ppai-typing span:nth-child(2){animation-delay:.15s;}
.ppai-typing span:nth-child(3){animation-delay:.3s;}
@keyframes ppai-bounce{0%,80%,100%{transform:scale(.6);opacity:.5;}40%{transform:scale(1);opacity:1;}}

/* Composer */
.ppai-foot{
    flex-shrink:0; border-top:1px solid var(--ppai-border); padding:10px 12px;
    display:flex; gap:8px; align-items:flex-end; background:var(--ppai-bg);
}
.ppai-input{
    flex:1; resize:none; max-height:120px; min-height:42px;
    background:var(--ppai-surface); color:var(--ppai-text);
    border:1px solid var(--ppai-border); border-radius:12px;
    padding:11px 13px; font-family:var(--ppai-font); font-size:13.5px; line-height:1.4;
    outline:none; transition:border-color .15s;
}
.ppai-input:focus{border-color:var(--ppai-accent);}
.ppai-input::placeholder{color:var(--ppai-text-dim);}
.ppai-send{
    flex-shrink:0; width:42px; height:42px; border-radius:12px; border:none; cursor:pointer;
    background:var(--ppai-accent); color:#fff; display:flex; align-items:center; justify-content:center;
    transition:opacity .15s, transform .12s;
}
.ppai-send:hover{transform:translateY(-1px);}
.ppai-send:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.ppai-send svg{width:19px;height:19px;}

.ppai-disclaimer{font-size:10px;color:var(--ppai-text-dim);text-align:center;padding:0 12px 8px;background:var(--ppai-bg);}

/* Custom logo image (launcher + header) */
.ppai-launcher.ppai-has-logo{background:#fff;}
.ppai-launcher .ppai-logo-img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
.ppai-head-icon .ppai-logo-img{width:100%;height:100%;border-radius:10px;object-fit:cover;}

/* Login CTA button (shown when guests hit the limit) */
.ppai-loginbtn{
    align-self:flex-start; display:inline-block; text-decoration:none;
    background:var(--ppai-accent); color:#fff; font-weight:800; font-size:13px;
    padding:10px 18px; border-radius:11px; transition:transform .12s, opacity .15s;
}
.ppai-loginbtn:hover{transform:translateY(-1px);opacity:.92;}

/* ── Mobile: bottom sheet + edge-docked peek launcher ────────────────────── */
@media (max-width:520px){
    .ppai-launcher{
        /* dock to the RIGHT EDGE, raised well above any bottom mobile nav */
        right:0; left:auto; top:auto;
        bottom:calc(env(safe-area-inset-bottom,0px) + 112px);
        width:52px; height:52px;
        border-radius:50% 0 0 50%;              /* half-pill tab shape */
        box-shadow:-5px 6px 22px rgba(0,0,0,.34), 0 0 0 5px rgba(230,0,35,.10);
        transition:transform .3s cubic-bezier(.34,1.25,.64,1), box-shadow .2s, opacity .2s;
    }
    .ppai-launcher::after{right:12px;top:9px;}
    .ppai-launcher svg{margin-right:4px;}            /* nudge icon toward the visible edge */
    /* tucked state: peeks ~half off the right edge until tapped */
    .ppai-launcher.ppai-peek{
        transform:translateX(48%);
        box-shadow:-3px 4px 14px rgba(0,0,0,.3);
    }
    .ppai-launcher.ppai-peek:active{transform:translateX(10%);}

    .ppai-panel{
        right:0; left:0; bottom:0; width:100%; max-width:100%;
        height:88dvh; max-height:88dvh;
        border-radius:20px 20px 0 0; border-left:none; border-right:none; border-bottom:none;
        transform:translateY(100%);
    }
    .ppai-panel.ppai-open{transform:translateY(0);}
    .ppai-msg{max-width:90%;}
}

@media (prefers-reduced-motion:reduce){
    .ppai-panel,.ppai-launcher,.ppai-card,.ppai-send{transition:none;}
    .ppai-typing span{animation:none;}
}