/* Onsite AI Chat — front-end widget */
#oac-widget, .oac-inline { --oac-p:#C60C29; --oac-t:#fff; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:14px; line-height:1.45; color:#1d2327; }
#oac-widget *, .oac-inline * { box-sizing:border-box; }

/* launcher */
.oac-launcher { position:fixed; display:flex; align-items:center; gap:10px; z-index:var(--oac-z,99999); cursor:pointer; }
.oac-launcher.right { flex-direction:row; } .oac-launcher.left { flex-direction:row-reverse; }
.oac-launcher-label { background:#fff; color:#1d2327; padding:9px 14px; border-radius:999px; font-weight:600; font-size:13px; box-shadow:0 6px 20px rgba(0,0,0,.14); white-space:nowrap; }
.oac-bubble { width:60px; height:60px; border-radius:50%; background:var(--oac-p); color:var(--oac-t); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(0,0,0,.25); transition:transform .15s; border:0; }
.oac-bubble:hover { transform:scale(1.06); }
.oac-bubble svg { width:28px; height:28px; fill:currentColor; }
.oac-bubble .oac-x { display:none; font-size:26px; line-height:1; }
.oac-open .oac-bubble svg { display:none; } .oac-open .oac-bubble .oac-x { display:block; }
.oac-open .oac-launcher-label { display:none; }
.oac-unread { position:absolute; top:-2px; right:-2px; width:14px; height:14px; border-radius:50%; background:#22a74a; border:2px solid #fff; }

/* window */
.oac-window { position:fixed; width:380px; max-width:calc(100vw - 24px); height:600px; max-height:calc(100vh - 110px); background:#fff; border-radius:18px; box-shadow:0 18px 60px rgba(0,0,0,.28); display:flex; flex-direction:column; overflow:hidden; z-index:var(--oac-z,99999); opacity:0; transform:translateY(14px) scale(.98); pointer-events:none; transition:opacity .18s, transform .18s; }
.oac-open .oac-window { opacity:1; transform:none; pointer-events:auto; }
.oac-inline .oac-window { position:static; width:100%; height:100%; max-height:none; opacity:1; transform:none; pointer-events:auto; box-shadow:0 4px 22px rgba(0,0,0,.1); border:1px solid #e6e8eb; }
@media (max-width:480px) { #oac-widget .oac-window { width:100vw; height:100vh; max-width:none; max-height:none; border-radius:0; left:0 !important; right:0 !important; bottom:0 !important; } }

.oac-head { background:var(--oac-p); color:var(--oac-t); padding:14px 16px; display:flex; align-items:center; gap:12px; }
.oac-avatar { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.22) center/cover no-repeat; display:flex; align-items:center; justify-content:center; flex:none; }
.oac-avatar svg { width:22px; height:22px; fill:currentColor; }
.oac-head b { display:block; font-size:15px; } .oac-head small { font-size:12px; opacity:.88; }
.oac-head .oac-online { display:inline-block; width:8px; height:8px; border-radius:50%; background:#4ade80; margin-right:5px; }
.oac-close { margin-left:auto; background:transparent; border:0; color:inherit; font-size:24px; cursor:pointer; opacity:.9; line-height:1; padding:4px; }
.oac-reset { background:transparent; border:0; color:inherit; cursor:pointer; opacity:.85; font-size:16px; padding:4px; }

.oac-body { flex:1; overflow-y:auto; padding:14px; background:#f6f7f9; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; }
.oac-msg { max-width:84%; display:flex; flex-direction:column; }
.oac-msg.bot { align-self:flex-start; } .oac-msg.user { align-self:flex-end; align-items:flex-end; }
.oac-b { padding:10px 13px; border-radius:16px; font-size:14px; white-space:pre-wrap; word-break:break-word; }
.oac-msg.bot .oac-b { background:#fff; border:1px solid #e6e8eb; border-bottom-left-radius:5px; }
.oac-msg.user .oac-b { background:var(--oac-p); color:var(--oac-t); border-bottom-right-radius:5px; }
.oac-msg.err .oac-b { background:#fdecea; border-color:#f5c2c0; color:#8a1f1a; }
.oac-b a { color:var(--oac-p); text-decoration:underline; word-break:break-all; }
.oac-msg.user .oac-b a { color:var(--oac-t); }
.oac-time { font-size:10.5px; color:#9ca3af; margin:3px 4px 0; }
.oac-typing { display:inline-flex; gap:4px; padding:12px 14px; }
.oac-typing i { width:7px; height:7px; border-radius:50%; background:#b6bbc4; animation:oac-bl 1.2s infinite; }
.oac-typing i:nth-child(2) { animation-delay:.2s } .oac-typing i:nth-child(3) { animation-delay:.4s }
@keyframes oac-bl { 0%,80%,100%{opacity:.3; transform:translateY(0)} 40%{opacity:1; transform:translateY(-3px)} }

.oac-chips { display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px; background:#f6f7f9; }
.oac-chip { background:#fff; border:1px solid var(--oac-p); color:var(--oac-p); border-radius:999px; padding:6px 12px; font-size:12.5px; cursor:pointer; font-weight:600; }
.oac-chip:hover { background:var(--oac-p); color:var(--oac-t); }

.oac-consent { padding:10px 14px; background:#fff; border-top:1px solid #e6e8eb; font-size:12.5px; display:flex; gap:8px; align-items:flex-start; }
.oac-foot { border-top:1px solid #e6e8eb; background:#fff; }
.oac-form { display:flex; align-items:flex-end; gap:8px; padding:10px 12px; }
.oac-form textarea { flex:1; resize:none; border:1px solid #d1d5db; border-radius:12px; padding:10px 12px; font:inherit; font-size:14px; max-height:120px; min-height:42px; outline:none; }
.oac-form textarea:focus { border-color:var(--oac-p); box-shadow:0 0 0 3px rgba(198,12,41,.15); }
.oac-send { width:42px; height:42px; border-radius:50%; background:var(--oac-p); color:var(--oac-t); border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none; }
.oac-send:disabled { opacity:.5; cursor:default; }
.oac-send svg { width:20px; height:20px; fill:currentColor; }
.oac-privacy { font-size:11px; color:#9ca3af; text-align:center; padding:0 12px 8px; }
.oac-powered { font-size:10.5px; color:#b6bbc4; text-align:center; padding-bottom:8px; }

/* ===== Layout "bar": bottom ask-bar -> side panel (Google Merchant style) ===== */
.oac-bar { position:fixed; left:0; right:0; bottom:0; z-index:var(--oac-z,99999); display:flex; flex-direction:column; align-items:center; padding:10px 16px 12px; pointer-events:none; }
.oac-bar > * { pointer-events:auto; }
.oac-bar-bg { position:absolute; inset:0; background:linear-gradient(to top, rgba(255,255,255,.98) 55%, rgba(255,255,255,0)); pointer-events:none; z-index:-1; }
.oac-bar-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:10px; max-width:860px; }
.oac-bar-chip { background:#fff; border:1px solid #d5d9df; color:#1d2327; border-radius:999px; padding:8px 16px; font-size:13px; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.06); transition:border-color .15s, background .15s; }
.oac-bar-chip:hover { border-color:var(--oac-p); background:#fff5f6; color:var(--oac-p); }
.oac-bar-input { display:flex; align-items:center; width:100%; max-width:560px; background:#fff; border:1px solid #d1d5db; border-radius:999px; padding:6px 8px 6px 18px; box-shadow:0 6px 24px rgba(0,0,0,.12); transition:border-color .15s, box-shadow .15s; }
.oac-bar-input:focus-within { border-color:var(--oac-p); box-shadow:0 0 0 3px rgba(198,12,41,.15), 0 6px 24px rgba(0,0,0,.12); }
.oac-bar-input input { flex:1; border:0; outline:none; font:inherit; font-size:15px; background:transparent; min-width:0; }
.oac-bar-input .oac-send { width:40px; height:40px; }
.oac-bar-note { font-size:11px; color:#9ca3af; margin-top:7px; text-align:center; }
.oac-bar-note a { color:inherit; }
.oac-bar-hide { display:none; }
@media (max-width:640px) { .oac-bar-chips { display:none; } }

.oac-panel { position:fixed; top:0 !important; bottom:0 !important; height:auto !important; max-height:none !important; border-radius:0; width:var(--oac-pw,420px) !important; max-width:100vw !important; max-width:100vw; background:#fff; box-shadow:-8px 0 30px rgba(0,0,0,.18); z-index:calc(var(--oac-z,99999) + 1); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .22s ease; }
.oac-panel.left { left:0; right:auto; transform:translateX(-100%); box-shadow:8px 0 30px rgba(0,0,0,.18); }
.oac-panel.right { right:0 !important; left:auto !important; }
.oac-panel.left { left:0 !important; right:auto !important; }
.oac-panel-open .oac-panel { transform:none; }
.oac-panel .oac-head { background:#fff; color:#1d2327; border-bottom:1px solid #e6e8eb; }
.oac-panel .oac-head .oac-avatar { background-color:var(--oac-p); color:var(--oac-t); }
.oac-panel .oac-head .oac-online { background:#22a74a; }
.oac-panel .oac-body { background:#fff; padding:18px 18px 8px; gap:12px; }
.oac-panel .oac-msg.bot .oac-b { background:#f6f7f9; border-color:#eef0f2; }
.oac-panel .oac-msg.bot { max-width:92%; }
.oac-panel .oac-foot { border-top:1px solid #e6e8eb; padding-top:2px; }
.oac-panel .oac-form textarea { border-radius:999px; padding:10px 16px; }
.oac-panel-open .oac-bar { opacity:0; pointer-events:none; transition:opacity .15s; }
.oac-panel-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.18); z-index:var(--oac-z,99999); opacity:0; pointer-events:none; transition:opacity .2s; }
.oac-panel-open .oac-panel-backdrop { opacity:1; pointer-events:auto; }
@media (min-width:1100px) { .oac-panel-backdrop { display:none; } }
@media (max-width:480px) { .oac-panel { width:100vw; } }

/* product cards under replies */
.oac-cards { display:flex; flex-direction:column; gap:8px; margin-top:8px; width:100%; }
.oac-card { display:flex; gap:10px; background:#fff; border:1px solid #e6e8eb; border-radius:12px; padding:10px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.oac-panel .oac-card { background:#fff; }
.oac-card-img { width:56px; height:56px; flex:none; border-radius:8px; background:#f3f4f6 center/cover no-repeat; }
.oac-card-main { min-width:0; flex:1; }
.oac-card-title { font-size:12.5px; font-weight:600; line-height:1.3; color:#1d2327; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.oac-card-price { display:inline-block; margin-top:3px; font-size:13px; font-weight:700; color:var(--oac-p); }
.oac-card-btns { display:flex; gap:8px; margin-top:7px; flex-wrap:wrap; align-items:center; }
.oac-card-add { background:var(--oac-p); color:var(--oac-t); border:0; border-radius:999px; padding:6px 14px; font-size:12px; font-weight:600; cursor:pointer; }
.oac-card-add:hover { filter:brightness(.92); }
.oac-card-add.added { background:#1b7f3b; }
.oac-card-add:disabled { opacity:.6; cursor:default; }
.oac-card-view { font-size:12px; font-weight:600; color:var(--oac-p); text-decoration:underline; }
a.oac-card-add-link { display:inline-block; background:var(--oac-p); color:var(--oac-t) !important; border-radius:999px; padding:5px 13px; font-size:12px; font-weight:600; text-decoration:none !important; }
a.oac-card-add-link:hover { filter:brightness(.92); }

/* inline action row / card replacing the raw product URL inside the bubble */
.oac-inline-actions { display:inline-flex; gap:8px; align-items:center; margin:4px 0 2px; vertical-align:middle; }
.oac-inline-actions .oac-card-add { padding:5px 13px; }
.oac-b .oac-card { display:flex; margin:8px 0 4px; background:#fff; }
.oac-msg.bot .oac-b .oac-card { border:1px solid #e3e5e8; box-shadow:0 1px 4px rgba(0,0,0,.07); }