/* ===== Tarahi Chatbot — کلیکی (کرسر ۵۰۵) ===== */
#tc-root{
  --tc-accent:#c8ff00;
  --tc-ink:#0d0f0a;
  --tc-bg:#14170e;
  --tc-bg2:#1d2114;
  --tc-line:rgba(200,255,0,.22);
  --tc-text:#eef2e2;
  --tc-muted:#9aa48a;
  font-family:inherit; font-size:14px; line-height:1.6; color:var(--tc-text);
}
#tc-root *{ box-sizing:border-box; }

/* ---------- ماسکات ---------- */
#tc-root .tc-bot{
  position:fixed; top:0; left:0; z-index:99998;
  width:96px; height:120px; cursor:pointer;
  opacity:0; transition:opacity .5s ease; will-change:transform;
  outline:none; -webkit-tap-highlight-color:transparent;
}
#tc-root .tc-bot.tc-ready{ opacity:1; }
#tc-root .tc-body{ width:100%; height:100%; transform-origin:50% 100%; transition:transform .25s ease; }
#tc-root .tc-bot:hover .tc-body{ transform:scale(1.06); }
#tc-root .tc-bot:focus-visible .tc-body{ outline:2px solid var(--tc-accent); outline-offset:4px; border-radius:12px; }
#tc-root .tc-bot svg{ overflow:visible; display:block; filter:drop-shadow(0 0 10px rgba(200,255,0,.3)); }

/* کاراکتر سه‌بعدی: بوم بزرگ‌تر از کادر ماسکات، چسبیده به پایین و وسط (تا حباب‌ها و جرقه‌ها بیرون نزنن)؛ کلیک از کادر خود ماسکات می‌گیره */
#tc-root .tc-body{ position:relative; }
#tc-root .tc-body canvas.tc-3d{ position:absolute; left:50%; bottom:0; width:229%; height:192%; transform:translateX(-50%); pointer-events:none; display:block; }
#tc-root .tc-hint{ z-index:2; }
/* در حالت سه‌بعدی، سر بالاتر از کادره؛ حباب باید بالای سر باشه */
#tc-root .tc-bot.tc-has3d .tc-hint{ margin-bottom:10px; }

#tc-root .tc-fill{ fill:var(--tc-accent); }
#tc-root .tc-fill-dim{ fill:var(--tc-accent); opacity:.78; }
#tc-root .tc-stroke{ stroke:var(--tc-accent); }
#tc-root .tc-ink-fill{ fill:var(--tc-ink); }
#tc-root .tc-ink-stroke{ stroke:var(--tc-ink); }
#tc-root .tc-body-fill{ fill:var(--tc-body,#7d8a6a); }
#tc-root .tc-body-stroke{ stroke:var(--tc-body,#7d8a6a); }

/* بدنه‌ی شناور و تنفس */
#tc-root .tc-char{ transform-origin:50px 130px; animation:tcFloat 3.2s ease-in-out infinite; }
@keyframes tcFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
#tc-root .tc-shadow{ transform-box:fill-box; transform-origin:center; animation:tcShadow 3.2s ease-in-out infinite; }
@keyframes tcShadow{ 0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(.86); opacity:.7} }

/* چشمک */
#tc-root .tc-eye{ animation:tcBlink 5s infinite; }
@keyframes tcBlink{ 0%,92%,100%{transform:scaleY(1)} 95%{transform:scaleY(.08)} }

/* دست‌ها */
#tc-root .tc-arm-l, #tc-root .tc-arm-r{ transition:transform .35s ease; }
#tc-root .tc-arm-l{ transform-origin:33px 90px; }
#tc-root .tc-arm-r{ transform-origin:67px 90px; }

/* برچسب ۵۰۵ */
#tc-root .tc-tag{ transform-origin:74px 120px; animation:tcTag 3.2s ease-in-out infinite; }
@keyframes tcTag{ 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(3deg)} }

/* چیزهای اضافه: پیش‌فرض مخفی */
#tc-root .tc-dots, #tc-root .tc-q, #tc-root .tc-zzz, #tc-root .tc-sparks, #tc-root .tc-confetti, #tc-root .tc-lens,
#tc-root .tc-eyes-sleep, #tc-root .tc-eyes-happy,
#tc-root .tc-m-open, #tc-root .tc-m-hmm, #tc-root .tc-m-o{ display:none; }

/* ---------- حالت: راه‌رفتن (هنگام اسکرول) ---------- */
#tc-root .tc-bot.walking .tc-char{ animation:tcWalk .4s ease-in-out infinite; }
@keyframes tcWalk{ 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-6px) rotate(4deg)} }
#tc-root .tc-bot.walking .tc-tag{ animation:tcTagFast .4s ease-in-out infinite; }
@keyframes tcTagFast{ 0%,100%{transform:rotate(10deg)} 50%{transform:rotate(-8deg)} }
#tc-root .tc-bot.walking .tc-arm-l{ animation:tcSwingL .4s ease-in-out infinite; }
@keyframes tcSwingL{ 0%,100%{transform:rotate(-14deg)} 50%{transform:rotate(18deg)} }

/* ---------- حالت: دست‌تکون‌دادن ---------- */
#tc-root .tc-bot.wave .tc-arm-r{ animation:tcWave .6s ease-in-out infinite; }
@keyframes tcWave{ 0%,100%{transform:rotate(-122deg)} 50%{transform:rotate(-92deg)} }

/* ---------- حالت: فکر کردن ---------- */
#tc-root .tc-bot.thinking .tc-char{ animation:tcThink 1.3s ease-in-out infinite; }
@keyframes tcThink{ 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)} }
#tc-root .tc-bot.thinking .tc-dots{ display:inline; }
#tc-root .tc-bot.thinking .tc-dots circle{ transform-box:fill-box; transform-origin:center; animation:tcDotPop 1.2s ease-in-out infinite; }
#tc-root .tc-bot.thinking .tc-dots circle:nth-child(2){ animation-delay:.2s; }
#tc-root .tc-bot.thinking .tc-dots circle:nth-child(3){ animation-delay:.4s; }
@keyframes tcDotPop{ 0%,100%{transform:scale(.55); opacity:.4} 50%{transform:scale(1.15); opacity:1} }
#tc-root .tc-bot.thinking .tc-m-smile{ display:none; }
#tc-root .tc-bot.thinking .tc-m-o{ display:inline; }

/* ---------- حالت: خوشحال ---------- */
#tc-root .tc-bot.mood-happy .tc-char{ animation:tcHop .5s ease-in-out 3; }
@keyframes tcHop{ 0%,100%{transform:translateY(0)} 40%{transform:translateY(-14px) rotate(-3deg)} 70%{transform:translateY(-3px) rotate(2deg)} }
#tc-root .tc-bot.mood-happy .tc-eyes-open{ display:none; }
#tc-root .tc-bot.mood-happy .tc-eyes-happy{ display:inline; }
#tc-root .tc-bot.mood-happy .tc-m-smile{ display:none; }
#tc-root .tc-bot.mood-happy .tc-m-open{ display:inline; }
#tc-root .tc-bot.mood-happy .tc-sparks, #tc-root .tc-bot.party .tc-sparks{ display:inline; }
#tc-root .tc-spark{ transform-box:fill-box; transform-origin:center; animation:tcSpark 1s ease-out infinite; }
#tc-root .tc-sparks g:nth-child(2) .tc-spark{ animation-delay:.2s; }
#tc-root .tc-sparks g:nth-child(3) .tc-spark{ animation-delay:.4s; }
#tc-root .tc-sparks g:nth-child(4) .tc-spark{ animation-delay:.6s; }
@keyframes tcSpark{ 0%{transform:scale(0) rotate(0); opacity:0} 40%{transform:scale(1.25) rotate(45deg); opacity:1} 100%{transform:scale(0) rotate(90deg); opacity:0} }

/* ---------- حالت: نمی‌دونم (شونه‌بالاانداختن) ---------- */
#tc-root .tc-bot.mood-unknown .tc-char{ animation:tcShrug 1.2s ease-in-out 3; }
@keyframes tcShrug{ 0%,100%{transform:translateY(0) rotate(0)} 40%{transform:translateY(-3px) rotate(-5deg)} 70%{transform:translateY(-3px) rotate(4deg)} }
#tc-root .tc-bot.mood-unknown .tc-arm-r{ transform:rotate(-62deg); }
#tc-root .tc-bot.mood-unknown .tc-arm-l{ transform:rotate(70deg); }
#tc-root .tc-bot.mood-unknown .tc-q{ display:inline; transform-box:fill-box; transform-origin:center; animation:tcQ 1.1s ease-in-out infinite; }
@keyframes tcQ{ 0%,100%{transform:translateY(0) rotate(-8deg)} 50%{transform:translateY(-5px) rotate(8deg)} }
#tc-root .tc-bot.mood-unknown .tc-m-smile{ display:none; }
#tc-root .tc-bot.mood-unknown .tc-m-hmm{ display:inline; }

/* ---------- حالت: اشاره به بخش‌های سایت ---------- */
#tc-root[data-side="left"] .tc-bot.mood-point .tc-arm-r{ transform:rotate(-42deg); }
#tc-root[data-side="right"] .tc-bot.mood-point .tc-arm-l{ transform:rotate(53deg); }
#tc-root .tc-bot.mood-point .tc-char{ animation:tcPoint .8s ease-in-out infinite; }
@keyframes tcPoint{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(5px)} }
#tc-root[data-side="right"] .tc-bot.mood-point .tc-char{ animation-name:tcPointR; }
@keyframes tcPointR{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(-5px)} }

/* ---------- حالت: خواب‌آلود ---------- */
#tc-root .tc-bot.sleepy .tc-char{ animation:tcSleep 4s ease-in-out infinite; }
@keyframes tcSleep{ 0%,100%{transform:translateY(2px) rotate(4deg)} 50%{transform:translateY(6px) rotate(7deg)} }
#tc-root .tc-bot.sleepy .tc-eyes-open{ display:none; }
#tc-root .tc-bot.sleepy .tc-eyes-sleep{ display:inline; }
#tc-root .tc-bot.sleepy .tc-m-smile{ display:none; }
#tc-root .tc-bot.sleepy .tc-m-o{ display:inline; }
#tc-root .tc-bot.sleepy .tc-zzz{ display:inline; }
#tc-root .tc-bot.sleepy .tc-zzz text{ animation:tcZ 2.4s ease-in-out infinite; }
#tc-root .tc-bot.sleepy .tc-zzz text:nth-child(2){ animation-delay:.5s; }
#tc-root .tc-bot.sleepy .tc-zzz text:nth-child(3){ animation-delay:1s; }
@keyframes tcZ{ 0%{opacity:0; transform:translate(0,6px)} 30%,70%{opacity:1} 100%{opacity:0; transform:translate(4px,-8px)} }
#tc-root .tc-bot.sleepy .tc-arm-l, #tc-root .tc-bot.sleepy .tc-arm-r{ animation:none; }

/* ---------- حالت: کنجکاو (موس روی دکمه/لینک) ---------- */
#tc-root .tc-bot.curious .tc-eyes-open{ transform:scale(1.14); transform-origin:50px 53px; }
#tc-root .tc-bot.curious .tc-char{ animation:tcCurious .35s ease-out forwards; }
@keyframes tcCurious{ from{transform:rotate(0)} to{transform:rotate(-6deg) translateY(-2px)} }

/* ---------- حالت: ذره‌بین (بخش نمونه‌کارها) ---------- */
#tc-root .tc-bot.magnify .tc-arm-r{ transform:rotate(-48deg); }
#tc-root .tc-bot.magnify .tc-lens{ display:inline; }
#tc-root .tc-bot.magnify .tc-lens{ animation:tcScan 1.6s ease-in-out infinite; }
@keyframes tcScan{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(2px,-3px)} }

/* ---------- حالت: جشن (آخر صفحه) ---------- */
#tc-root .tc-bot.party .tc-char{ animation:tcHop .45s ease-in-out infinite; }
#tc-root .tc-bot.party .tc-eyes-open{ display:none; }
#tc-root .tc-bot.party .tc-eyes-happy{ display:inline; }
#tc-root .tc-bot.party .tc-m-smile{ display:none; }
#tc-root .tc-bot.party .tc-m-open{ display:inline; }
#tc-root .tc-bot.party .tc-arm-r{ transform:rotate(-112deg); }
#tc-root .tc-bot.party .tc-arm-l{ transform:rotate(95deg); }
#tc-root .tc-bot.party .tc-confetti{ display:inline; }
#tc-root .tc-confetti rect{ transform-box:fill-box; transform-origin:center; animation:tcConf 1.5s linear infinite; }
#tc-root .tc-confetti rect:nth-child(2n){ animation-duration:1.9s; animation-delay:.3s; }
#tc-root .tc-confetti rect:nth-child(3n){ animation-duration:1.3s; animation-delay:.6s; }
@keyframes tcConf{ 0%{transform:translateY(-10px) rotate(0); opacity:1} 100%{transform:translateY(150px) rotate(360deg); opacity:0} }

/* ---------- حباب کنار ماسکات ---------- */
#tc-root .tc-hint{
  position:absolute; bottom:100%; left:0; margin-bottom:6px;
  width:max-content; max-width:min(230px, 60vw);
  transform:translateY(6px) scale(.92); transform-origin:bottom left;
  padding:7px 12px; background:var(--tc-accent); color:var(--tc-ink);
  font-weight:600; font-size:13px; line-height:1.5; border-radius:12px;
  opacity:0; transition:opacity .3s ease, transform .3s ease; pointer-events:none;
}
#tc-root[data-side="right"] .tc-hint{ left:auto; right:0; transform-origin:bottom right; }
#tc-root .tc-hint::after{ content:""; position:absolute; top:100%; left:24px; border:6px solid transparent; border-top-color:var(--tc-accent); }
#tc-root[data-side="right"] .tc-hint::after{ left:auto; right:24px; }
#tc-root .tc-hint.show{ opacity:1; transform:none; }

/* ---------- پنل چت ---------- */
#tc-root .tc-panel{
  position:fixed; bottom:24px; z-index:99999;
  width:360px; height:min(540px, calc(100vh - 56px)); height:min(540px, calc(100dvh - 56px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--tc-bg); border:1px solid var(--tc-line); border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4);
  opacity:0; transform:translateY(14px) scale(.98); pointer-events:none; visibility:hidden;
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
#tc-root[data-side="left"] .tc-panel{ left:24px; }
#tc-root[data-side="right"] .tc-panel{ right:24px; }
#tc-root .tc-panel.open{ opacity:1; transform:none; pointer-events:auto; visibility:visible; transition:opacity .25s ease, transform .25s ease; }

#tc-root .tc-head{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:var(--tc-bg2); border-bottom:1px solid var(--tc-line);
}
#tc-root .tc-dot{ width:9px; height:9px; border-radius:50%; background:var(--tc-accent); box-shadow:0 0 8px var(--tc-accent); flex:none; }
#tc-root .tc-title{ flex:1; font-weight:700; font-size:14px; color:var(--tc-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#tc-root .tc-iconbtn{
  all:unset; box-sizing:border-box; cursor:pointer; width:30px; height:30px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center; color:var(--tc-muted); font-size:16px; line-height:1;
}
#tc-root .tc-iconbtn:hover, #tc-root .tc-iconbtn:focus-visible{ background:rgba(200,255,0,.12); color:var(--tc-accent); }

#tc-root .tc-msgs{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; }
#tc-root .tc-msgs::-webkit-scrollbar{ width:6px; }
#tc-root .tc-msgs::-webkit-scrollbar-thumb{ background:rgba(200,255,0,.25); border-radius:3px; }
#tc-root .tc-msg{
  max-width:86%; padding:9px 13px; border-radius:14px; white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere;
  animation:tcIn .22s ease;
}
@keyframes tcIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
#tc-root .tc-msg.bot{ align-self:flex-start; background:var(--tc-bg2); border:1px solid var(--tc-line); color:var(--tc-text); }
#tc-root .tc-msg.user{ align-self:flex-end; background:var(--tc-accent); color:var(--tc-ink); font-weight:500; }
#tc-root .tc-msg.err{ border-color:rgba(255,120,120,.5); color:#ffb4b4; }
#tc-root[dir="rtl"] .tc-msg.bot{ border-bottom-right-radius:4px; }
#tc-root[dir="rtl"] .tc-msg.user{ border-bottom-left-radius:4px; }
#tc-root[dir="ltr"] .tc-msg.bot{ border-bottom-left-radius:4px; }
#tc-root[dir="ltr"] .tc-msg.user{ border-bottom-right-radius:4px; }

/* دکمه‌ی «نشونم بده» زیر پاسخ */
#tc-root .tc-go{
  all:unset; box-sizing:border-box; cursor:pointer; display:block; width:max-content; max-width:100%;
  margin-top:8px; padding:5px 12px; border-radius:999px;
  background:rgba(200,255,0,.12); border:1px solid var(--tc-accent); color:var(--tc-accent);
  font-size:12.5px; font-weight:600; line-height:1.5; white-space:normal;
}
#tc-root .tc-go:hover, #tc-root .tc-go:focus-visible{ background:var(--tc-accent); color:var(--tc-ink); }

#tc-root .tc-typing{ display:inline-flex; gap:5px; padding:12px 14px; }
#tc-root .tc-typing i{ width:7px; height:7px; border-radius:50%; background:var(--tc-accent); opacity:.4; animation:tcDot 1s infinite; }
#tc-root .tc-typing i:nth-child(2){ animation-delay:.15s; }
#tc-root .tc-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes tcDot{ 0%,100%{opacity:.25; transform:translateY(0)} 50%{opacity:1; transform:translateY(-3px)} }

#tc-root .tc-chips{ display:flex; flex-wrap:wrap; gap:7px; padding:0 14px 10px; }
#tc-root .tc-chips[hidden]{ display:none; }
#tc-root .tc-chip{
  all:unset; box-sizing:border-box; cursor:pointer; padding:6px 12px; border-radius:999px;
  border:1px solid var(--tc-line); color:var(--tc-accent); font-size:12.5px; line-height:1.4;
}
#tc-root .tc-chip:hover, #tc-root .tc-chip:focus-visible{ background:rgba(200,255,0,.12); }

#tc-root .tc-form{ display:flex; align-items:flex-end; gap:8px; padding:10px 12px; border-top:1px solid var(--tc-line); background:var(--tc-bg2); }
#tc-root .tc-input{
  flex:1; resize:none; max-height:110px; min-height:40px; height:40px; padding:9px 12px; margin:0;
  background:var(--tc-bg); color:var(--tc-text); border:1px solid var(--tc-line); border-radius:12px;
  font:inherit; font-size:14px; line-height:20px; outline:none; box-shadow:none;
  overflow-y:hidden; display:block; width:auto;
}
#tc-root .tc-input::placeholder{ color:var(--tc-muted); }
#tc-root .tc-input:focus{ border-color:var(--tc-accent); }
#tc-root .tc-send{
  all:unset; box-sizing:border-box; cursor:pointer; flex:none; width:38px; height:38px; border-radius:12px;
  background:var(--tc-accent); color:var(--tc-ink); display:inline-flex; align-items:center; justify-content:center;
}
#tc-root .tc-send:hover{ filter:brightness(1.08); }
#tc-root .tc-send:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
#tc-root .tc-send[disabled]{ opacity:.45; cursor:default; }
#tc-root[dir="rtl"] .tc-send svg{ transform:scaleX(-1); }
#tc-root .tc-note{ padding:0 14px 9px; background:var(--tc-bg2); color:var(--tc-muted); font-size:11px; text-align:center; }

/* ---------- موبایل و تبلت ---------- */
@media (max-width:900px){
  #tc-root .tc-bot{ top:auto !important; left:auto !important; bottom:14px; width:64px; height:80px; transform:none !important; }
  #tc-root[data-side="left"] .tc-bot{ left:14px !important; }
  #tc-root[data-side="right"] .tc-bot{ right:14px !important; }
  #tc-root .tc-hint{ font-size:12px; }
  #tc-root .tc-panel,
  #tc-root[data-side] .tc-panel{
    top:max(14px, env(safe-area-inset-top)); bottom:max(14px, env(safe-area-inset-bottom));
    left:12px; right:12px; width:auto; height:auto; max-height:none; border-radius:18px;
  }
  #tc-root.tc-open .tc-bot{ display:none; }
  #tc-root .tc-input{ font-size:16px; } /* جلوی زوم خودکار iOS */
}
@media (prefers-reduced-motion:reduce){
  #tc-root *{ animation:none !important; transition:none !important; }
}