/* ==========================================================================
   chatbot.css — хөвөгч туслах (mascot + pop үгс + чат самбар). Accent-аар өнгөждөг.
   ========================================================================== */
.cbot{position:fixed;bottom:24px;right:24px;z-index:131;font-family:'Onest',system-ui,sans-serif}

/* ---- toggle (mascot) ---- */
.cbot-toggle{position:relative;width:64px;height:64px;border:none;cursor:pointer;border-radius:50%;
  background:linear-gradient(150deg,var(--accent-2),var(--accent));box-shadow:0 12px 30px rgba(var(--accent-rgb),.55);
  display:grid;place-items:center;animation:cbot-bob 3.2s ease-in-out infinite}
.cbot-toggle::before{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5);animation:cbot-ring 2.6s ease-out infinite}
.cbot-toggle:hover{filter:brightness(1.06)}
@keyframes cbot-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes cbot-ring{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.45)}70%{box-shadow:0 0 0 18px rgba(var(--accent-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}}

/* mascot — найрсаг бөмбөрцөг царай (blink + waving) */
.cbot-mascot{width:46px;height:46px;display:block;transform-origin:62% 80%;animation:cbot-wave 4.5s ease-in-out infinite}
@keyframes cbot-wave{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-9deg)}90%{transform:rotate(7deg)}95%{transform:rotate(-4deg)}}
.cbot-mascot .eye{transform-origin:center;animation:cbot-blink 4s infinite}
@keyframes cbot-blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.cbot.open .cbot-toggle{animation:none}
.cbot-close-x{display:none}
.cbot.open .cbot-mascot{display:none}
.cbot.open .cbot-close-x{display:block;width:22px;height:22px;stroke:#fff;stroke-width:2.4;fill:none}

/* ---- popping word bubble (хаалттай үед анхаарал татна) ---- */
.cbot-pop{position:absolute;bottom:76px;right:2px;background:#fff;color:var(--ink);
  padding:10px 15px;border-radius:16px 16px 4px 16px;box-shadow:0 10px 30px rgba(16,36,31,.2);
  font-size:13.5px;font-weight:600;white-space:nowrap;max-width:230px;
  opacity:0;transform:translateY(10px) scale(.85);transform-origin:bottom right;
  transition:opacity .45s ease,transform .45s cubic-bezier(.34,1.6,.5,1);pointer-events:none}
.cbot-pop::after{content:"";position:absolute;bottom:-6px;right:16px;width:12px;height:12px;background:#fff;transform:rotate(45deg);border-radius:0 0 3px 0}
.cbot-pop.show{opacity:1;transform:translateY(0) scale(1)}
.cbot.open .cbot-pop{display:none}

/* ---- chat panel ---- */
.cbot-panel{position:absolute;bottom:82px;right:0;width:344px;max-width:calc(100vw - 32px);
  background:var(--cream);border-radius:22px;overflow:hidden;
  box-shadow:0 28px 70px rgba(16,36,31,.3);border:1px solid rgba(255,255,255,.5);
  opacity:0;transform:translateY(22px) scale(.95);transform-origin:bottom right;pointer-events:none;
  transition:opacity .35s ease,transform .4s cubic-bezier(.34,1.4,.5,1)}
.cbot.open .cbot-panel{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

.cbot-head{position:relative;background:linear-gradient(135deg,var(--accent-2),var(--accent-deep));color:#fff;padding:20px 22px;display:flex;align-items:center;gap:13px}
.cbot-head .av{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.cbot-head .av svg{width:30px;height:30px}
.cbot-head b{font-family:'Onest',system-ui,sans-serif;font-size:15px;font-weight:700;display:block;line-height:1.2}
.cbot-head span{font-size:12px;color:rgba(255,255,255,.8);display:inline-flex;align-items:center;gap:6px;margin-top:3px}
.cbot-head span::before{content:"";width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.3)}

.cbot-body{padding:18px;max-height:330px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.cbot-msg{max-width:84%;padding:11px 15px;border-radius:16px;font-size:14px;line-height:1.55;animation:cbot-in .4s cubic-bezier(.34,1.4,.5,1)}
.cbot-msg.bot{align-self:flex-start;background:#fff;color:var(--ink);border-bottom-left-radius:5px;box-shadow:0 3px 12px rgba(16,36,31,.07)}
.cbot-msg.user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:5px}
@keyframes cbot-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.cbot-msg a.cbot-link{display:inline-block;margin-top:8px;color:var(--accent);font-weight:700;font-size:13.5px}
.cbot-msg a.cbot-link::after{content:" →"}

.cbot-chips{display:flex;flex-wrap:wrap;gap:8px;padding:6px 18px 18px}
.cbot-chip{border:1.5px solid var(--accent);color:var(--accent);background:transparent;border-radius:30px;
  padding:9px 15px;font-family:'Onest',system-ui,sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .22s}
.cbot-chip:hover{background:var(--accent);color:#fff;box-shadow:0 8px 18px rgba(var(--accent-rgb),.3)}

@media(max-width:680px){
  .cbot{bottom:18px;right:18px}
  .cbot-panel{width:calc(100vw - 36px)}
}
@media(prefers-reduced-motion:reduce){
  .cbot-toggle,.cbot-toggle::before,.cbot-mascot .eye{animation:none}
}