/* v2-pixo-chat.css — Ask Pixo panel: context welcome (what Pixo sees on set) → live suggestions while typing → conversation */
.oBody{display:flex;flex-direction:column;gap:12px}
.ocW{display:flex;flex-direction:column;gap:16px;padding:4px 0 2px;transition:opacity .25s}
.ocK{font:600 11px/1 Inter,sans-serif;letter-spacing:.14em;color:var(--gold,#E5A82E);display:flex;align-items:center;gap:8px}
.ocK i{flex:1;height:1px;background:linear-gradient(90deg,rgba(229,168,46,.4),transparent)}
.ocT{font:700 24px/1.15 Inter,sans-serif;letter-spacing:-.02em;color:var(--tp,#F5F4F0);margin:0;text-wrap:balance;transition:font-size .25s,opacity .25s}
.ocS{font-size:13.5px;line-height:1.5;color:var(--ts,#B8B2A7);margin:-6px 0 0;text-wrap:pretty}
/* the set strip: what Pixo is looking at */
.ocSet{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:8px;transition:gap .25s}
.ocSi{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;border:0;background:none;padding:0;cursor:pointer;text-align:left;color:inherit;font:inherit}
.ocSi .im{position:relative;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:#262624;border:1px solid rgba(245,244,240,.1);transition:aspect-ratio .25s,border-color .2s}
.ocSi .im img{width:100%;height:100%;object-fit:cover;display:block}
.ocSi .im.empty{display:flex;align-items:center;justify-content:center;border-style:dashed;color:rgba(245,244,240,.35);font-size:20px}
.ocSi.cur .im{border-color:var(--gold,#E5A82E);box-shadow:0 0 0 1px var(--gold,#E5A82E)}
.ocSi.cur .im::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(229,168,46,.28))}
.ocSi small{font:600 9.5px/1 Inter,sans-serif;letter-spacing:.12em;color:var(--tm,#8A857C);text-transform:uppercase}
.ocSi b{font:600 12px/1.25 Inter,sans-serif;color:var(--tp,#F5F4F0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ocSi:hover .im{border-color:rgba(229,168,46,.6)}
/* suggestions */
.ocQh{font:600 11px/1 Inter,sans-serif;letter-spacing:.12em;color:var(--tm,#8A857C);text-transform:uppercase;margin-top:2px}
.ocQ{display:flex;flex-direction:column;gap:6px}
.ocQi{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:8px;border:1px solid rgba(245,244,240,.1);background:#222220;color:var(--tp,#F5F4F0);font:500 13.5px/1.35 Inter,sans-serif;text-align:left;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.ocQi span{flex:1;min-width:0}.ocQi mark{background:none;color:var(--gold,#E5A82E);font-weight:700}
.ocQi svg{flex:none;color:var(--tm,#8A857C);transition:transform .15s,color .15s}
.ocQi:hover,.ocQi.hi{border-color:rgba(229,168,46,.55);background:#262420}.ocQi:hover svg,.ocQi.hi svg{color:var(--gold,#E5A82E);transform:translateX(2px)}
.ocNone{font-size:13px;color:var(--ts,#B8B2A7);padding:10px 2px;display:flex;align-items:center;gap:8px}
.ocNone kbd{font:600 11px Inter,sans-serif;border:1px solid rgba(245,244,240,.2);border-radius:8px;padding:2px 7px;color:var(--tp)}
/* typing: the welcome compacts so the matches lead */
.ocW.typing .ocT{font-size:15px;opacity:.75}.ocW.typing .ocS{display:none}
.ocW.typing .ocSet{gap:6px}.ocW.typing .ocSi .im{aspect-ratio:1}.ocW.typing .ocSi b,.ocW.typing .ocSi small{display:none}
.ocW.typing .ocQh{color:var(--gold,#E5A82E)}
/* once a conversation starts the welcome folds into one line */
.ocW.chat{gap:8px;padding-bottom:10px;border-bottom:1px solid rgba(245,244,240,.08)}
.ocW.chat .ocT,.ocW.chat .ocS,.ocW.chat .ocQh,.ocW.chat .ocQ{display:none}
.ocW.chat .ocSet{grid-template-columns:repeat(var(--n,4),36px);gap:6px}.ocW.chat .ocSi .im{aspect-ratio:1}.ocW.chat .ocSi b,.ocW.chat .ocSi small{display:none}
.oMsg{animation:ocIn .25s ease-out both}
@keyframes ocIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.oMsg.typingDots{display:flex;gap:4px;padding:14px 16px}.oMsg.typingDots i{width:6px;height:6px;border-radius:50%;background:var(--ts,#B8B2A7);animation:ocDot 1s infinite}.oMsg.typingDots i:nth-child(2){animation-delay:.15s}.oMsg.typingDots i:nth-child(3){animation-delay:.3s}
@keyframes ocDot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.oChips:empty{display:none}
#oPanel.ocOn .oChips{display:none}
@media (prefers-reduced-motion:reduce){.oMsg,.oMsg.typingDots i{animation:none}.ocW,.ocT,.ocSet,.ocSi .im{transition:none}}