/* =====================================================================
   MIHANI CIRCLE — AI support robot button + chat overlay
   Cartoony, fully animated. Present on every page (incl. 404).
   ===================================================================== */

.mc-bot-root{
  position:fixed;z-index:9000;bottom:22px;right:22px;
  display:flex;flex-direction:row;align-items:flex-end;gap:10px;
  font-family:var(--font, "Vazirmatn", sans-serif);
}

/* ---------- speech bubble (sits to the LEFT of the robot) ---------- */
.mc-bot-bubble{
  align-self:center;
  max-width:210px;background:var(--panel-2,#222);color:var(--text,#fff);
  border:1px solid var(--border,rgba(255,255,255,.12));
  padding:10px 14px;border-radius:16px;border-end-end-radius:4px;
  font-size:13px;font-weight:600;line-height:1.5;box-shadow:0 14px 30px rgba(0,0,0,.35);
  opacity:0;transform:translateX(14px) scale(.85);transform-origin:right center;
  transition:opacity .3s ease,transform .35s cubic-bezier(.2,1.4,.4,1);
  pointer-events:none;white-space:normal;
  position:relative;
}
/* little pointer toward the robot */
.mc-bot-bubble::after{
  content:"";position:absolute;right:-6px;bottom:14px;width:12px;height:12px;
  background:inherit;border-right:1px solid var(--border,rgba(255,255,255,.12));
  border-top:1px solid var(--border,rgba(255,255,255,.12));transform:rotate(45deg);
}
.mc-bot-bubble.show{opacity:1;transform:none}

/* ---------- the robot button (modern, glossy, headphone ear-pads) ---------- */
.mc-bot-btn{
  position:relative;width:66px;height:66px;border:0;cursor:pointer;padding:0;
  border-radius:20px;
  background:
    radial-gradient(120% 90% at 30% 18%, color-mix(in srgb,#fff 38%,transparent), transparent 46%),
    linear-gradient(160deg,var(--primary-2,#ff3b46),var(--primary,#e10a17));
  box-shadow:0 16px 34px color-mix(in srgb,var(--primary,#e10a17) 50%,transparent),
             inset 0 2px 4px rgba(255,255,255,.45), inset 0 -7px 14px rgba(0,0,0,.32);
  animation:botFloat 4s ease-in-out infinite;
  transition:transform .25s cubic-bezier(.2,1.4,.4,1),box-shadow .25s;
}
.mc-bot-btn:hover{transform:translateY(-4px) scale(1.07) rotate(-2deg)}
.mc-bot-btn:active{transform:scale(.95)}
@keyframes botFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* antenna with glowing tip */
.mc-bot-btn .antenna{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  width:3px;height:11px;background:rgba(255,255,255,.85);border-radius:2px;
}
.mc-bot-btn .antenna::after{
  content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:8px;height:8px;border-radius:50%;background:#fff;
  box-shadow:0 0 12px 2px #fff,0 0 4px #fff;animation:antBlink 1.6s ease-in-out infinite;
}
@keyframes antBlink{0%,100%{opacity:1;box-shadow:0 0 12px 2px #fff,0 0 4px #fff}50%{opacity:.55;box-shadow:0 0 6px 1px #fff}}

/* headphone-style ear pads (nod to the rose+headphones brand logo) */
.mc-bot-btn .ear{position:absolute;top:50%;width:7px;height:24px;border-radius:6px;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.7));transform:translateY(-50%);
  box-shadow:0 2px 6px rgba(0,0,0,.3)}
.mc-bot-btn .ear.l{left:-3px}
.mc-bot-btn .ear.r{right:-3px}

/* dark glossy screen face */
.mc-bot-face{
  position:absolute;inset:11px;border-radius:14px;
  background:radial-gradient(circle at 50% 32%, #2b313d, #0c0e13 75%);
  box-shadow:inset 0 2px 7px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;gap:8px;
}
/* glowing cyan eyes */
.mc-bot-eye{
  position:relative;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#eafcff,#7fe8ff);
  box-shadow:0 0 9px #7fe8ff,0 0 3px #fff;overflow:hidden;
}
.mc-bot-eye .pupil{
  position:absolute;top:50%;left:50%;width:7px;height:7px;border-radius:50%;
  background:#0b1020;transform:translate(-50%,-50%);transition:transform .12s ease-out;
}
/* blink: eyelids close */
.mc-bot-eye::after{
  content:"";position:absolute;inset:0;background:#0c0e13;transform:translateY(-100%);
}
.mc-bot-root.blink .mc-bot-eye::after{animation:blink .28s ease}
@keyframes blink{0%,100%{transform:translateY(-100%)}45%,55%{transform:translateY(0)}}

/* glowing mouth */
.mc-bot-mouth{
  position:absolute;bottom:13px;left:50%;transform:translateX(-50%);
  width:16px;height:3px;border-radius:3px;background:#7fe8ff;box-shadow:0 0 7px #7fe8ff;
  transition:height .2s,border-radius .2s;
}
.mc-bot-root.talk .mc-bot-mouth{animation:talk .4s ease-in-out infinite}
@keyframes talk{0%,100%{height:3px}50%{height:8px;border-radius:8px}}

/* notification dot */
.mc-bot-btn .dot{
  position:absolute;top:-3px;right:-3px;width:16px;height:16px;border-radius:50%;
  background:var(--success,#47d18c);border:2px solid var(--bg,#120406);
  display:none;
}
.mc-bot-btn.has-dot .dot{display:block;animation:softPulse 1.6s ease-in-out infinite}

/* ---------- chat overlay ---------- */
.mc-chat{
  position:fixed;z-index:9001;bottom:100px;inset-inline-end:22px;
  width:min(380px,calc(100vw - 32px));height:min(560px,70vh);
  background:var(--panel-2,#181818);border:1px solid var(--border,rgba(255,255,255,.12));
  border-radius:22px;box-shadow:0 30px 70px rgba(0,0,0,.5);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:translateY(20px) scale(.92);transform-origin:bottom right;
  pointer-events:none;transition:opacity .28s ease,transform .32s cubic-bezier(.2,1.2,.4,1);
}
[dir="rtl"] .mc-chat{transform-origin:bottom left}
.mc-chat.open{opacity:1;transform:none;pointer-events:auto}

.mc-chat-head{
  display:flex;align-items:center;gap:11px;padding:14px 16px;
  background:linear-gradient(160deg,var(--primary-2,#ff3b46),var(--primary,#e10a17));color:#fff;
}
.mc-chat-head .mini{
  width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.18);
  display:grid;place-items:center;flex-shrink:0;
}
.mc-chat-head .mini svg{width:20px;height:20px;fill:#fff}
.mc-chat-head h4{font-size:15px;font-weight:800;margin:0}
.mc-chat-head p{font-size:11px;opacity:.85;margin:0}
.mc-chat-head .status{display:inline-block;width:7px;height:7px;border-radius:50%;background:#7CFFB2;margin-inline-end:5px;box-shadow:0 0 6px #7CFFB2}
.mc-chat-close{margin-inline-start:auto;width:32px;height:32px;border:0;border-radius:9px;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;font-size:18px;line-height:1;display:grid;place-items:center}
.mc-chat-close:hover{background:rgba(255,255,255,.3)}

.mc-chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.mc-msg{max-width:84%;padding:10px 13px;border-radius:15px;font-size:14px;line-height:1.6;animation:msgIn .35s cubic-bezier(.2,1.3,.4,1) both;white-space:pre-wrap;word-wrap:break-word}
@keyframes msgIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.mc-msg.bot{align-self:flex-start;background:var(--panel,#262626);color:var(--text,#eee);border-end-start-radius:4px}
.mc-msg.user{align-self:flex-end;background:linear-gradient(160deg,var(--primary-2,#ff3b46),var(--primary,#e10a17));color:#fff;border-end-end-radius:4px}

/* typing indicator */
.mc-typing{align-self:flex-start;display:flex;gap:5px;padding:12px 14px;background:var(--panel,#262626);border-radius:15px;border-end-start-radius:4px}
.mc-typing i{width:8px;height:8px;border-radius:50%;background:var(--muted,#999);animation:bounce 1.1s ease-in-out infinite}
.mc-typing i:nth-child(2){animation-delay:.16s}
.mc-typing i:nth-child(3){animation-delay:.32s}

.mc-chat-foot{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border,rgba(255,255,255,.1));background:var(--panel,#1f1f1f)}
.mc-chat-foot input{
  flex:1;background:var(--bg,#111);border:1px solid var(--border,rgba(255,255,255,.12));
  color:var(--text,#fff);border-radius:12px;padding:11px 14px;font:inherit;font-size:14px;outline:none;
}
.mc-chat-foot input:focus{border-color:var(--primary,#e10a17)}
.mc-chat-send{
  width:44px;height:44px;flex-shrink:0;border:0;border-radius:12px;cursor:pointer;
  background:linear-gradient(160deg,var(--primary-2,#ff3b46),var(--primary,#e10a17));color:#fff;
  display:grid;place-items:center;transition:transform .15s,filter .15s;
}
.mc-chat-send:hover{filter:brightness(1.08);transform:translateY(-1px)}
.mc-chat-send:active{transform:scale(.94)}
.mc-chat-send svg{width:20px;height:20px;fill:currentColor}
[dir="rtl"] .mc-chat-send svg{transform:scaleX(-1)}

@media (max-width:480px){
  .mc-chat{bottom:92px;height:min(70vh,520px)}
}
@media (prefers-reduced-motion:reduce){
  .mc-bot-btn,.mc-bot-btn .antenna::after{animation:none}
}