/* =============================================================================
   GiGi, the Habit Youth skin guide: corner launcher, talking intro, chat panel.
   GiGi owns the bottom-right corner; the existing "Talk to us" quote widget moves
   to bottom-left on desktop (on phones it is already replaced by the mobile bar).
   ============================================================================= */
@media(min-width:961px){
  .pk-btn{right:auto;left:22px}
  .pk-card{right:auto;left:22px}
}

.gg{position:fixed;right:14px;bottom:18px;z-index:95;font-family:var(--font);font-size:15px;line-height:1.45}
.gg *{box-sizing:border-box}
.gg [hidden]{display:none!important}
.gg-launch{display:flex;flex-direction:column;align-items:center;background:none;border:0;padding:0;cursor:pointer;color:inherit}
.gg-fig{display:block;height:255px;filter:drop-shadow(0 10px 14px rgba(14,20,32,.22));transition:transform .3s ease}
.gg-launch:hover .gg-fig{transform:translateY(-4px)}
.gg-fig img,.gg-fig canvas{display:block;height:100%;width:auto}
.gg-fig canvas{aspect-ratio:256/512}
.gg-label{margin-top:-12px;position:relative;background:var(--brand);color:#fff;font-weight:700;font-size:.95rem;
  padding:8px 16px;border-radius:100px;box-shadow:0 8px 26px rgba(0,0,0,.22)}
.gg-say{position:absolute;right:6px;bottom:calc(100% + 10px);width:270px;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:16px;padding:11px 14px;font-size:.9rem;box-shadow:var(--shadow-lg)}
.gg-say b{color:var(--brand)}
.gg-video{position:fixed;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}

.gg-panel{width:min(380px,calc(100vw - 24px));height:min(580px,calc(100vh - 40px));height:min(580px,calc(100dvh - 40px));
  background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(14,20,32,.3),0 0 0 1px var(--line);
  display:flex;flex-direction:column;overflow:hidden}
.gg-head{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px;background:var(--brand);color:#fff}
.gg-head b{display:block;font-size:1rem;color:#fff}
.gg-head small{display:block;font-size:.75rem;opacity:.85}
.gg-face{flex:0 0 auto;width:38px;height:38px;border-radius:50%;overflow:hidden;background:#fff0f4;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.gg-face img{width:100%;height:100%;object-fit:cover;display:block}
.gg-face.sm{width:26px;height:26px;box-shadow:none}
.gg-face.talking{animation:gg-pulse 1s ease-in-out infinite}
.gg-ico{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:none;border:0;color:#fff;cursor:pointer}
.gg-ico+.gg-ico{margin-left:0}
.gg-ico:hover{background:rgba(255,255,255,.16)}
.gg-ico svg{width:18px;height:18px}
.gg-body{flex:1;overflow-y:auto;padding:14px;background:var(--soft);display:flex;flex-direction:column;gap:10px}
.gg-msg{display:flex;align-items:flex-end;gap:8px}
.gg-msg.me{justify-content:flex-end}
.gg-msg p{margin:0;max-width:82%;padding:9px 13px;border-radius:16px;font-size:.92rem;white-space:pre-wrap;background:#fff;color:var(--ink);
  box-shadow:0 1px 2px rgba(14,20,32,.06)}
.gg-msg.me p{background:var(--brand);color:#fff}
.gg-msg p a{color:var(--brand);font-weight:700;text-decoration:underline}
.gg-dots i{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;background:#9aa3b2;animation:gg-dot 1s infinite}
.gg-dots i:nth-child(2){animation-delay:.15s}.gg-dots i:nth-child(3){animation-delay:.3s}
.gg-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px 0;background:#fff}
.gg-chips button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:100px;padding:5px 11px;font-size:.8rem;cursor:pointer;font-family:var(--font)}
.gg-chips button:hover{border-color:var(--brand);color:var(--brand)}
.gg-form{display:flex;align-items:center;gap:8px;padding:10px;border-top:1px solid var(--line);background:#fff}
.gg-form input{flex:1;min-width:0;border:1px solid var(--line);border-radius:100px;padding:10px 14px;font:inherit;font-size:.92rem;outline:none}
.gg-form input:focus{border-color:var(--brand)}
.gg-round{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.gg-round svg{width:18px;height:18px}
.gg-round.go{background:var(--brand);border-color:var(--brand);color:#fff}
.gg-round:disabled{opacity:.55;cursor:default}
.gg-round.on{background:var(--brand);border-color:var(--brand);color:#fff;animation:gg-pulse 1.2s ease-in-out infinite}
.gg-foot{margin:0;padding:0 14px 6px;background:#fff;text-align:center;font-size:.72rem;color:#7a8394}
.gg-foot a{color:inherit;text-decoration:underline}
.gg-credit{padding-bottom:10px;opacity:.85}

@keyframes gg-pulse{0%,100%{box-shadow:0 0 0 2px rgba(255,255,255,.7)}50%{box-shadow:0 0 0 5px rgba(255,255,255,.35)}}
@keyframes gg-dot{0%,80%,100%{opacity:.3}40%{opacity:1}}

@media(max-width:960px){
  .gg{right:8px;bottom:78px}
  .gg-fig{height:180px}
  .gg-label{font-size:.85rem;padding:6px 13px}
  .gg-say{width:230px;font-size:.85rem}
  .gg-panel{height:min(560px,calc(100dvh - 96px))}
}
@media(prefers-reduced-motion:reduce){.gg-fig,.gg-face.talking,.gg-round.on,.gg-dots i{animation:none;transition:none}}
@media print{.gg{display:none}}