/* AI chat: floating button + panel (brand: red, navy, gold, cream). rem-based -> scales up on 4K via html font-size clamp */
.ai-root{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:60;font-family:var(--f-body)}
.ai-fab{position:relative;display:block;border:0;cursor:pointer;padding:0;width:5rem;height:5rem;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#fffaf0 0,var(--cream) 60%,var(--gold-l) 100%);
  box-shadow:0 0 0 .16rem var(--gold),0 .55rem 1.3rem rgba(20,38,75,.35);transition:transform .15s;-webkit-tap-highlight-color:transparent}
.ai-fab-img{position:absolute;left:50%;bottom:.1rem;width:5.6rem;height:5.6rem;margin-left:-2.8rem;object-fit:contain;filter:drop-shadow(0 .2rem .25rem rgba(20,38,75,.35));animation:aiBob 3.2s ease-in-out infinite;transform-origin:50% 100%;pointer-events:none}
.ai-fab:hover .ai-fab-img{animation-duration:1.4s}
.ai-fab:active{transform:scale(.94)}
.ai-fab:focus-visible{outline:.2rem solid var(--red);outline-offset:.25rem}
@keyframes aiBob{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-.3rem) rotate(-3deg)}60%{transform:translateY(-.1rem) rotate(2deg)}}
.ai-hint{position:absolute;right:.3rem;bottom:5.9rem;display:flex;align-items:center;gap:.25rem;max-width:min(15rem,calc(100vw - 2rem));background:#fff;color:var(--navy);border:.14rem solid var(--gold);border-radius:1rem;padding:.45rem .4rem .45rem .8rem;font-weight:700;font-size:.95rem;line-height:1.3;box-shadow:0 .4rem 1rem rgba(20,38,75,.25);opacity:0;transform:translateY(.4rem) scale(.95);transform-origin:90% 100%;transition:opacity .3s,transform .3s}
html[lang=th] .ai-hint{font-family:"Kanit",var(--f-body);font-weight:500}
.ai-hint.show{opacity:1;transform:none}
.ai-hint[hidden]{display:none}
.ai-hint::after{content:"";position:absolute;right:2rem;bottom:-.5rem;width:.8rem;height:.8rem;background:#fff;border-right:.14rem solid var(--gold);border-bottom:.14rem solid var(--gold);transform:rotate(45deg)}
.ai-hint-t{cursor:pointer;white-space:nowrap}
.ai-hint-x{border:0;background:transparent;color:var(--muted);font-size:1.15rem;line-height:1;cursor:pointer;padding:.1rem .3rem}
.ai-root.open .ai-fab{display:none}
.ai-panel{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));width:min(27rem,calc(100vw - 2rem));height:min(40rem,calc(100dvh - 2rem));
  display:flex;flex-direction:column;background:var(--paper);border:.18rem solid var(--gold);border-radius:1.25rem;overflow:hidden;box-shadow:0 1rem 3rem rgba(20,38,75,.4)}
.ai-panel[hidden]{display:none}
.ai-head{display:flex;align-items:center;gap:.6rem;background:var(--navy);color:var(--cream);padding:.65rem .7rem .65rem .8rem;border-bottom:.25rem solid var(--gold)}
.ai-head-av{width:3rem;height:3rem;border-radius:50%;background:var(--cream);border:.12rem solid var(--gold);flex:none;object-fit:contain;object-position:50% 100%}
.ai-auto{position:relative}.ai-auto.on{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.ai-off{position:absolute;left:22%;right:22%;top:50%;height:.13rem;background:currentColor;transform:rotate(-45deg);border-radius:1rem}
.ai-ht{flex:1;min-width:0}
.ai-head h2{margin:0;color:var(--cream);font-size:1.05rem;line-height:1.25;text-align:left}
html[lang=th] .ai-head h2{font-family:"Kanit",var(--f-body);font-weight:600}
.ai-sub{margin:0;font-size:.78rem;color:var(--gold-l);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-icon{flex:none;width:2.4rem;height:2.4rem;border-radius:50%;border:.1rem solid rgba(230,201,119,.55);background:transparent;color:var(--cream);cursor:pointer;display:grid;place-items:center;padding:0}
.ai-icon svg{width:1.25rem;height:1.25rem}
.ai-icon:hover{background:rgba(255,255,255,.08)}
.ai-log{flex:1;overflow-y:auto;padding:.9rem .8rem;display:flex;flex-direction:column;gap:.6rem;background:var(--cream) radial-gradient(circle at 50% 0,#fff8e6 0,transparent 70%);overscroll-behavior:contain}
.ai-msg{display:flex;flex-direction:column;max-width:90%}
.ai-msg.me{align-self:flex-end;align-items:flex-end}
.ai-msg.bot{align-self:flex-start;flex-direction:row;align-items:flex-start;gap:.4rem;max-width:94%}
.ai-mb{display:flex;flex-direction:column;min-width:0;flex:1}
.ai-av{flex:none;width:2.3rem;height:2.3rem;border-radius:50%;background:#fff;border:.1rem solid var(--gold);object-fit:contain;object-position:50% 100%}
.ai-av-think{animation:aiThink 1.2s ease-in-out infinite}
@keyframes aiThink{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.ai-bubble{padding:.65rem .85rem;border-radius:1.05rem;line-height:1.55;font-size:1rem;word-wrap:break-word}
.ai-msg.bot .ai-bubble{background:#fff;border:.1rem solid var(--gold);border-top-left-radius:.3rem;color:var(--ink)}
.ai-msg.me .ai-bubble{background:var(--navy);color:var(--cream);border-top-right-radius:.3rem}
.ai-msg.err .ai-bubble{border-color:var(--red);color:var(--red-d)}
.ai-link{display:inline-block;margin:0 .15rem;padding:0 .5rem;border-radius:62rem;background:var(--red);color:#fff;font-size:.82rem;font-weight:700;text-decoration:none;line-height:1.6}
.ai-say{display:flex;align-items:center;gap:.35rem;margin-top:.45rem;border:.1rem solid var(--navy);background:transparent;color:var(--navy);border-radius:62rem;padding:.15rem .65rem;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.ai-say svg{width:1rem;height:1rem}
.ai-cards{display:grid;gap:.4rem;margin-top:.45rem;width:100%}
.ai-card{display:flex;align-items:center;gap:.55rem;background:#fff;border:.1rem solid var(--cream-d);border-left:.3rem solid var(--navy);border-radius:.75rem;padding:.4rem .6rem;text-decoration:none;color:var(--ink)}
.ai-card.cat-beer{border-left-color:var(--gold)}.ai-card.cat-wine{border-left-color:var(--red)}
.ai-card-ic{flex:none;width:2rem;height:2rem;display:grid;place-items:center;color:var(--navy)}
.ai-card-ic svg{width:1.6rem;height:1.6rem}
.ai-card-b{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.ai-card-b b{font-size:.92rem;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-card-b small{font-size:.76rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-stock{flex:none;display:flex;align-items:center;gap:.2rem;font-size:.72rem;font-weight:800;color:#1f7a3a;background:#e5f4e8;border-radius:62rem;padding:.1rem .45rem}
.ai-stock svg{width:.9rem;height:.9rem}
.ai-sugg{display:flex;flex-wrap:wrap;gap:.4rem}
.ai-chip{font:inherit;font-size:.86rem;border:.1rem solid var(--gold);background:#fff;color:var(--navy);border-radius:62rem;padding:.3rem .75rem;cursor:pointer;font-weight:600}
.ai-chip:hover{background:var(--gold-l)}
.ai-typing{display:flex;align-items:center;gap:.3rem;color:var(--muted)}
.ai-typing span{width:.45rem;height:.45rem;border-radius:50%;background:var(--gold);animation:aiDot 1s infinite}
.ai-typing span:nth-child(2){animation-delay:.15s}.ai-typing span:nth-child(3){animation-delay:.3s}
@keyframes aiDot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-.2rem)}}
.ai-form{display:flex;gap:.5rem;padding:.6rem;border-top:.1rem solid var(--cream-d);background:var(--paper)}
.ai-in{flex:1;min-width:0;font:inherit;font-size:1rem;padding:.65rem .95rem;border:.13rem solid var(--navy);border-radius:62rem;background:#fff;outline:none}
.ai-in:focus{box-shadow:0 0 0 .25rem rgba(201,162,75,.45)}
.ai-send{flex:none;width:2.9rem;height:2.9rem;border-radius:50%;border:0;background:var(--red);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:inset 0 0 0 .12rem var(--gold-l)}
.ai-send svg{width:1.35rem;height:1.35rem}
.ai-note{margin:0;padding:0 .8rem .55rem;font-size:.72rem;color:var(--muted);text-align:center;background:var(--paper)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:30rem){
  .ai-panel{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0;border:0}
  .ai-fab{width:4.6rem;height:4.6rem}.ai-fab-img{width:5.2rem;height:5.2rem;margin-left:-2.6rem}.ai-hint{bottom:5.4rem}
}
@media(prefers-reduced-motion:reduce){.ai-fab-img,.ai-av-think,.ai-typing span{animation:none}.ai-hint,.ai-fab{transition:none}}
/* keep page-end content clear of the floating Nong Hop button */
body:has(.ai-root) footer{padding-bottom:6.5rem}
@media print{.ai-root{display:none}}
/* vision result badge on the scan panel */
.ai-read{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.6rem 0 .2rem;font-size:.9rem;color:var(--navy)}
.ai-read .ai-tag{background:var(--navy);color:var(--cream);border-radius:62rem;padding:.1rem .6rem;font-weight:700;font-size:.78rem;display:inline-flex;align-items:center;gap:.3rem}
.ai-read .ai-tag svg{width:.95rem;height:.95rem}
.ai-read b{color:var(--red-d)}
/* while the customer is typing in a page field (mobile keyboard open), tuck Nong Hop away so he never covers inputs */
body:has(:is(input,textarea,select):focus):not(:has(.ai-panel :focus)) .ai-root:not(.open){opacity:0;pointer-events:none;transition:opacity .2s}