/* ==========================================================
   IPS chat assistant
   Everything is scoped to #wpai-chatbot so the theme can't leak in.
   ========================================================== */

#wpai-chatbot{
--wpai-ink:#0E3B36;          /* main colour (set in settings) */
--wpai-ink-2:color-mix(in srgb, var(--wpai-ink) 82%, #fff);
--wpai-brass:#C8A24A;        /* small highlights only */
--wpai-bg:#F5F7F6;           /* message area */
--wpai-surface:#FFFFFF;
--wpai-text:#1C2624;
--wpai-muted:#64716D;
--wpai-line:#DDE3E1;
--wpai-serif:"Newsreader",Georgia,"Times New Roman",serif;
--wpai-sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

position:fixed;
right:24px;
bottom:24px;
z-index:999999;
font-family:var(--wpai-sans);
font-size:15px;
line-height:1.55;
color:var(--wpai-text);
-webkit-font-smoothing:antialiased;
}

#wpai-chatbot *,
#wpai-chatbot *::before,
#wpai-chatbot *::after{box-sizing:border-box;}

#wpai-chatbot button,
#wpai-chatbot textarea{
font:inherit;
color:inherit;
margin:0;
letter-spacing:normal;
text-transform:none;
box-shadow:none;
}

#wpai-chatbot svg{
width:20px;
height:20px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
flex:none;
}

/* White text on dark buttons (must beat the reset above) */
#wpai-chatbot #wpai-toggle,
#wpai-chatbot #wpai-send{color:#fff;}
#wpai-chatbot .wpai-icon-btn{color:rgba(255,255,255,.85);}
#wpai-chatbot .wpai-icon-btn:hover{color:#fff;}

#wpai-chatbot :focus-visible{
outline:2px solid var(--wpai-brass);
outline-offset:2px;
}

/* ---------- Launcher ---------- */

#wpai-toggle{
display:flex;
align-items:center;
gap:10px;
height:52px;
padding:0 22px 0 18px;
border:0;
border-radius:26px;
background:var(--wpai-ink);
color:#fff;
font-weight:600;
font-size:15px;
cursor:pointer;
box-shadow:0 12px 28px -8px rgba(14,59,54,.55);
transition:background .2s, transform .2s;
}

#wpai-toggle:hover{background:var(--wpai-ink-2);transform:translateY(-1px);}

#wpai-toggle .wpai-icon{
fill:var(--wpai-brass);
stroke:none;
}

#wpai-chatbot[data-open="true"] #wpai-toggle{display:none;}

/* ---------- Window ---------- */

#wpai-window{
display:flex;
flex-direction:column;
width:400px;
height:min(640px, calc(100vh - 48px));
background:var(--wpai-surface);
border-radius:20px;
overflow:hidden;
box-shadow:0 30px 70px -20px rgba(10,35,32,.45), 0 0 0 1px rgba(14,59,54,.08);
transform-origin:bottom right;
animation:wpai-open .22s cubic-bezier(.2,.8,.2,1);
}

#wpai-window[hidden]{display:none;}

@keyframes wpai-open{
from{opacity:0;transform:translateY(12px) scale(.97);}
to{opacity:1;transform:none;}
}

/* ---------- Header ---------- */

#wpai-header{
display:flex;
align-items:center;
gap:12px;
padding:16px 12px 16px 18px;
background:var(--wpai-ink);
color:#fff;
border-bottom:3px solid var(--wpai-brass);
}

.wpai-mark{
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:50%;
background:rgba(255,255,255,.12);
color:var(--wpai-brass);
font-family:var(--wpai-serif);
font-weight:600;
font-size:13px;
letter-spacing:.04em;
flex:none;
}

.wpai-heading{flex:1;min-width:0;}

#wpai-chatbot .wpai-heading h2{
margin:0;
padding:0;
font-family:var(--wpai-serif);
font-size:21px;
font-weight:500;
line-height:1.15;
color:#fff;
}

#wpai-chatbot .wpai-heading p{
margin:2px 0 0;
font-size:12.5px;
line-height:1.35;
color:rgba(255,255,255,.72);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.wpai-icon-btn{
display:grid;
place-items:center;
width:36px;
height:36px;
padding:0;
border:0;
border-radius:10px;
background:transparent;
color:rgba(255,255,255,.85);
cursor:pointer;
transition:background .15s;
}

.wpai-icon-btn:hover{background:rgba(255,255,255,.12);color:#fff;}

/* ---------- Messages ---------- */

#wpai-messages{
flex:1;
overflow-y:auto;
padding:20px 18px 8px;
background:var(--wpai-bg);
scroll-behavior:smooth;
}

.wpai-user{
width:fit-content;
max-width:82%;
margin:0 0 16px auto;
padding:10px 14px;
border-radius:16px 16px 4px 16px;
background:var(--wpai-ink);
color:#fff;
white-space:pre-wrap;
word-wrap:break-word;
}

.wpai-bot{
position:relative;
margin:0 0 18px;
padding-left:36px;
color:var(--wpai-text);
word-wrap:break-word;
}

.wpai-bot::before{
content:"IPS";
position:absolute;
left:0;
top:1px;
display:grid;
place-items:center;
width:26px;
height:26px;
border-radius:50%;
background:var(--wpai-ink);
color:var(--wpai-brass);
font-family:var(--wpai-serif);
font-size:9.5px;
font-weight:600;
letter-spacing:.03em;
}

#wpai-chatbot .wpai-bot p{margin:0 0 10px;}
#wpai-chatbot .wpai-bot p:last-child{margin-bottom:0;}
#wpai-chatbot .wpai-bot .wpai-h{font-size:15.5px;margin-top:4px;}
#wpai-chatbot .wpai-bot ul,
#wpai-chatbot .wpai-bot ol{margin:0 0 10px;padding-left:20px;}
#wpai-chatbot .wpai-bot li{margin:0 0 5px;}
#wpai-chatbot .wpai-bot a{
color:var(--wpai-ink);
text-decoration:underline;
text-decoration-color:var(--wpai-brass);
text-underline-offset:2px;
}
#wpai-chatbot .wpai-bot code{background:#E8EDEB;padding:1px 5px;border-radius:4px;font-size:.92em;}

/* Sources */
.wpai-sources{
margin-top:12px;
display:flex;
flex-wrap:wrap;
gap:6px;
}

#wpai-chatbot .wpai-sources a{
display:inline-flex;
align-items:center;
max-width:100%;
padding:4px 10px;
border:1px solid var(--wpai-line);
border-radius:14px;
background:var(--wpai-surface);
color:var(--wpai-muted);
font-size:12.5px;
text-decoration:none;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
transition:border-color .15s,color .15s;
}

#wpai-chatbot .wpai-sources a:hover{border-color:var(--wpai-ink);color:var(--wpai-ink);}

/* Welcome + suggestions */
.wpai-suggestions{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:8px;
margin:-4px 0 18px 36px;
}

#wpai-chatbot .wpai-suggestion{
padding:8px 14px;
border:1px solid var(--wpai-line);
border-radius:18px;
background:var(--wpai-surface);
color:var(--wpai-ink);
font-size:14px;
text-align:left;
cursor:pointer;
transition:border-color .15s, background .15s;
}

#wpai-chatbot .wpai-suggestion:hover{border-color:var(--wpai-ink);background:#fff;}

/* Thinking indicator */
.wpai-typing{display:flex;align-items:center;gap:4px;min-height:26px;}
.wpai-typing .wpai-dot{
width:6px;height:6px;border-radius:50%;
background:var(--wpai-muted);
animation:wpai-pulse 1.2s infinite ease-in-out;
}
.wpai-typing .wpai-dot:nth-child(2){animation-delay:.15s;}
.wpai-typing .wpai-dot:nth-child(3){animation-delay:.3s;}
.wpai-status-text{margin-left:8px;font-size:13px;color:var(--wpai-muted);font-style:normal;}
@keyframes wpai-pulse{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* Cursor while the answer is being written */
.wpai-streaming > :last-child::after{
content:"";
display:inline-block;
width:7px;
height:1.05em;
margin-left:3px;
vertical-align:-.15em;
background:var(--wpai-brass);
animation:wpai-pulse 1s infinite;
}

/* ---------- Composer ---------- */

#wpai-input{
display:flex;
align-items:flex-end;
gap:8px;
margin:0;
padding:12px 14px 6px;
background:var(--wpai-bg);
}

#wpai-chatbot #wpai-text{
flex:1;
min-height:46px;
max-height:140px;
padding:12px 14px;
border:1px solid var(--wpai-line);
border-radius:14px;
background:var(--wpai-surface);
color:var(--wpai-text);
font-size:15px;
line-height:1.4;
resize:none;
outline:none;
transition:border-color .15s, box-shadow .15s;
}

#wpai-chatbot #wpai-text::placeholder{color:#8D9894;}

#wpai-chatbot #wpai-text:focus{
border-color:var(--wpai-ink);
box-shadow:0 0 0 3px rgba(14,59,54,.12);
}

#wpai-send{
display:grid;
place-items:center;
width:46px;
height:46px;
padding:0;
border:0;
border-radius:14px;
background:var(--wpai-ink);
color:#fff;
cursor:pointer;
transition:background .15s, opacity .15s;
}

#wpai-send:hover{background:var(--wpai-ink-2);}
#wpai-send:disabled{opacity:.45;cursor:default;}

#wpai-chatbot #wpai-note{
margin:0;
padding:4px 16px 12px;
background:var(--wpai-bg);
color:var(--wpai-muted);
font-size:11.5px;
text-align:center;
}

#wpai-chatbot .screen-reader-text{
position:absolute;
width:1px;height:1px;
overflow:hidden;
clip:rect(0 0 0 0);
white-space:nowrap;
}

/* ---------- Phones: full screen ---------- */

@media (max-width:520px){
#wpai-chatbot{right:16px;bottom:16px;}
#wpai-chatbot[data-open="true"]{inset:0;}
#wpai-window{
width:100vw;
height:100dvh;
border-radius:0;
}
#wpai-chatbot #wpai-text{font-size:16px;} /* stops iOS zooming in */
}

@media (prefers-reduced-motion:reduce){
#wpai-window,
#wpai-chatbot .wpai-dot,
.wpai-streaming > :last-child::after{animation:none;}
#wpai-toggle,#wpai-messages{transition:none;scroll-behavior:auto;}
}