/* hagame chat helper "น้องหาหา" (site/mascot.js). Bottom-right bubble + panel. */
.hgm{position:fixed;right:18px;bottom:var(--hgm-bottom,calc(18px + var(--safe-b,0px)));z-index:55;font-family:"IBM Plex Sans Thai",system-ui,sans-serif}
@media (max-width:759px){.hgm{right:12px;bottom:var(--hgm-bottom,calc(76px + var(--safe-b,0px)))}}
.hgm-fab{position:relative;width:64px;height:64px;border-radius:50%;border:0;padding:3px;cursor:pointer;background:linear-gradient(135deg,#ffcf6b,#ff8a3d 55%,#ff4f7b);box-shadow:0 10px 26px rgba(255,90,90,.35),0 4px 10px rgba(0,0,0,.35);transition:transform .18s ease}
.hgm-fab:hover{transform:translateY(-2px) scale(1.04)}
.hgm-fab:active{transform:scale(.96)}
.hgm-fab .hgm-in-face{display:block;width:100%;height:100%;border-radius:50%;background:#2a1f55;overflow:hidden}
.hgm-fab svg{width:100%;height:100%;display:block;transform:translateY(6%) scale(1.12)}
.hgm-dot{position:absolute;right:2px;bottom:4px;width:14px;height:14px;border-radius:50%;background:#3ee59a;border:3px solid #0b0d1a}
.hgm-peek{position:absolute;right:74px;bottom:12px;white-space:nowrap;background:#fff;color:#1d1338;font:600 14px/1.25 "IBM Plex Sans Thai",sans-serif;padding:9px 30px 9px 13px;border-radius:16px 16px 4px 16px;box-shadow:0 8px 22px rgba(0,0,0,.3);animation:hgmPop .35s ease both}
.hgm-peek button{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:22px;height:22px;border:0;border-radius:50%;background:transparent;color:#8a86a6;font-size:15px;cursor:pointer;line-height:1}
@keyframes hgmPop{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
.hgm.open .hgm-fab,.hgm.open .hgm-peek{display:none}
.hgm.open{z-index:86}

.hgm-panel{position:absolute;right:0;bottom:0;width:380px;height:min(600px,calc(100vh - 110px));display:none;flex-direction:column;background:#12152a;border:1px solid rgba(255,255,255,.12);border-radius:24px;box-shadow:0 24px 60px rgba(0,0,0,.55);overflow:hidden;color:#f1f3fb;animation:hgmPop .22s ease both}
.hgm.open .hgm-panel{display:flex}
@media (max-width:759px){
  .hgm.open{left:0;right:0;bottom:var(--hgm-navh,calc(64px + var(--safe-b,0px)))}
  .hgm-panel{position:relative;width:100%;height:calc(100vh - var(--hgm-navh,64px) - 56px);height:calc(100dvh - var(--hgm-navh,64px) - 56px);border-radius:22px 22px 0 0;border-bottom:0}
}
.hgm-head{position:relative;display:flex;align-items:center;gap:11px;padding:12px 12px 12px 14px;background:radial-gradient(120% 140% at 0% 0%,rgba(255,138,61,.35),transparent 60%),linear-gradient(135deg,#231845,#160f2b);border-bottom:1px solid rgba(255,255,255,.08)}
.hgm-ava{flex:none;width:50px;height:50px;border-radius:50%;padding:2px;background:linear-gradient(135deg,#ffcf6b,#ff8a3d 55%,#ff4f7b)}
.hgm-ava>span{display:block;width:100%;height:100%;border-radius:50%;background:#2a1f55;overflow:hidden}
.hgm-ava svg{width:100%;height:100%;display:block;transform:translateY(6%) scale(1.12)}
.hgm-who{flex:1;min-width:0}
.hgm-who b{display:block;font:600 18px/1.15 Kanit,sans-serif;color:#fff}
.hgm-who small{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#c7c3e6;margin-top:2px}
.hgm-who small i{width:8px;height:8px;border-radius:50%;background:#3ee59a;flex:none}
.hgm-tag{font-style:normal;font-size:11px;font-weight:600;padding:1px 7px;border-radius:99px;background:rgba(255,255,255,.12);color:#ffd9a8}
.hgm-hb{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer}
.hgm-hb:hover{background:rgba(255,255,255,.16)}
.hgm-hb svg{width:18px;height:18px}

.hgm-log>*{flex:none}
.hgm-log{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 12px 6px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain;scrollbar-width:thin}
.hgm-msg{display:flex;align-items:flex-end;gap:7px;max-width:100%}
.hgm-msg p{margin:0;padding:9px 13px;border-radius:18px;font-size:14.5px;line-height:1.5;word-wrap:break-word;overflow-wrap:anywhere;white-space:pre-line}
.hgm-msg.bot p{background:#1f2446;border-bottom-left-radius:6px;max-width:82%}
.hgm-msg.me{justify-content:flex-end}
.hgm-msg.me p{background:linear-gradient(135deg,#ffcf6b,#ff8a3d 60%,#ff6a6a);color:#1d1338;font-weight:500;border-bottom-right-radius:6px;max-width:80%}
.hgm-mini{flex:none;width:30px;height:30px;border-radius:50%;background:#2a1f55;overflow:hidden;border:2px solid #ff9a4d}
.hgm-mini svg{width:100%;height:100%;display:block;transform:translateY(6%) scale(1.12)}
.hgm-msg.bot.cont .hgm-mini{visibility:hidden}
.hgm-msg p a{color:#ffb86b;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.hgm-typing p{display:flex;align-items:center;gap:4px;padding:10px 14px}
.hgm-typing p span{margin-right:6px;color:#c7cbe4;font-size:13.5px}
[data-theme="light"] .hgm-typing p span{color:#5d6488}
.hgm-typing i{width:7px;height:7px;border-radius:50%;background:#9aa2c4;animation:hgmDot 1s infinite}
.hgm-typing i:nth-child(2){animation-delay:.15s}.hgm-typing i:nth-child(3){animation-delay:.3s}
@keyframes hgmDot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}

.hgm-chips{display:flex;flex-wrap:wrap;gap:7px;padding-left:37px}
.hgm-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,165,61,.45);background:rgba(255,165,61,.08);color:#ffd9a8;font:500 13.5px/1 "IBM Plex Sans Thai",sans-serif;padding:8px 12px;border-radius:99px;cursor:pointer;transition:background .15s}
.hgm-chip:hover{background:rgba(255,165,61,.2)}
.hgm-chip svg{width:15px;height:15px;flex:none}
.hgm-chip.ghost{border-color:rgba(255,255,255,.16);background:transparent;color:#c7cbe4}

.hgm-cards{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px 37px;scrollbar-width:none}
.hgm-cards::-webkit-scrollbar{display:none}
.hgm-card{flex:none;width:138px;border-radius:14px;background:#1a1f3d;border:1px solid rgba(255,255,255,.08);overflow:hidden;cursor:pointer;text-align:left;padding:0;color:inherit;font:inherit}
.hgm-card img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#22284c}
.hgm-card b{display:block;font-size:13px;line-height:1.3;padding:7px 9px 2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hgm-card small{display:block;font-size:11px;color:#9aa2c4;padding:0 9px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hgm-card:hover{border-color:rgba(255,165,61,.5)}

.hgm-form{display:flex;gap:8px;align-items:center;padding:9px 10px 4px;border-top:1px solid rgba(255,255,255,.07)}
.hgm-form input{flex:1;min-width:0;height:44px;border-radius:99px;border:1px solid rgba(255,255,255,.12);background:#0e1124;color:#f1f3fb;padding:0 16px;font:15px "IBM Plex Sans Thai",sans-serif;outline:none}
.hgm-form input:focus{border-color:#ff9a4d}
.hgm-send{flex:none;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;background:linear-gradient(135deg,#ffcf6b,#ff8a3d 55%,#ff4f7b);color:#1d1338;display:grid;place-items:center}
.hgm-send svg{width:20px;height:20px}
.hgm-send:disabled{opacity:.45;cursor:default}
.hgm-note{margin:0;padding:3px 14px 10px;font-size:11px;color:#7d84a8;text-align:center}

/* light theme */
[data-theme="light"] .hgm-panel{background:#fff;color:#151935;border-color:rgba(22,26,60,.12);box-shadow:0 24px 60px rgba(30,35,80,.22)}
[data-theme="light"] .hgm-msg.bot p{background:#f0f1f8}
[data-theme="light"] .hgm-chip{color:#b4540f;background:#fff4e8;border-color:#ffc58f}
[data-theme="light"] .hgm-chip.ghost{color:#5d6488;background:#fff;border-color:rgba(22,26,60,.15)}
[data-theme="light"] .hgm-card{background:#f5f6fb;border-color:rgba(22,26,60,.08)}
[data-theme="light"] .hgm-form{border-color:rgba(22,26,60,.08)}
[data-theme="light"] .hgm-form input{background:#f5f6fb;color:#151935;border-color:rgba(22,26,60,.14)}
[data-theme="light"] .hgm-dot{border-color:#fff}
[data-theme="light"] .hgm-msg p a{color:#d4600f}
@media (prefers-reduced-motion:reduce){.hgm *{animation:none!important;transition:none!important}}
/* clothing studio pages (#studio…): no peek, and no helper at all on phones (it covered the editor tool row) */
.hgm.hgm-studio .hgm-peek{display:none!important}
@media (max-width:759px){.hgm.hgm-studio{display:none}}
@media print{.hgm{display:none}}