/* ============================================================
   ChatCentral — استایل مودال چت مرکزی (dark/light خودکار)
   v15: تب پشتیبانی لبه راست (پیل + فلش) — حالت جمع‌شونده (فقط فلش) + EN/FA هوشمند
   ============================================================ */
/* ════════════════════════════════════════════════════════════════
   تب پشتیبانی لبه راست (پیل کشیده + فلش) — طراحی جدید (جایگزین FAB)
   یک تکه چسبیده به لبه راست؛ با کلیک مودال چت باز می‌شود؛
   قابل درگ عمودی؛ موقعیت در Cache ذخیره می‌شود.
   ════════════════════════════════════════════════════════════════ */
#cc-fab{display:none !important} /* آیکن چت قدیمی (💬) دیگر نمایش داده نمی‌شود */

#cc-tab{
  position:fixed;right:0;top:50%;z-index:9998;
  display:flex;align-items:center;gap:5px;
  padding:13px 16px 13px 20px;
  background:linear-gradient(135deg,#4f8cff,#7c5cff);
  color:#fff;cursor:pointer;user-select:none;-webkit-user-select:none;
  border-radius:999px 0 0 999px; /* لبه چپ گرد، لبه راست چسبیده به صفحه */
  box-shadow:-8px 8px 26px rgba(79,140,255,.4);
  border-left:3px solid rgba(255,255,255,.4); /* جدایی ظریف فلش از بدنه — یک تکه دیده می‌شود */
  transition:opacity .25s ease,transform .25s ease,filter .2s,box-shadow .2s;
  touch-action:none;
  animation:cc-tab-attention 2.6s ease .8s 1;
}
#cc-tab:hover{filter:brightness(1.08);box-shadow:-10px 12px 34px rgba(79,140,255,.55)}
#cc-tab:active{filter:brightness(.94)}
#cc-tab:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* وقتی مودال باز است، تب مخفی می‌شود (مودال ✕ دارد) */
#cc-tab.cc-hidden{opacity:0;pointer-events:none;transform:translateX(46px)}

/* فلش گرافیکی دوتایی به سمت بیرون (چپ) */
#cc-tab .cc-tab-arrow{width:22px;height:22px;flex:0 0 auto;color:#fff;animation:cc-tab-nudge 1.6s ease-in-out infinite}
#cc-tab:hover .cc-tab-arrow{animation:none;transform:translateX(-3px)}

/* متن دو خطی: پشتیبانی / هوشمند (یا Smart / Support) */
#cc-tab .cc-tab-text{display:flex;flex-direction:column;line-height:1.25;text-align:center;white-space:nowrap}
#cc-tab .cc-tab-t1{font-size:13.5px;font-weight:800;letter-spacing:.2px}
#cc-tab .cc-tab-t2{font-size:10.5px;font-weight:600;opacity:.85;letter-spacing:.4px}

/* انیمیشن توجه هنگام لود (قانون CC-001) — فقط glow، بدون transform تا با مخفی‌سازی تداخل نکند */
@keyframes cc-tab-attention{
  0%,100%{box-shadow:-8px 8px 26px rgba(79,140,255,.4)}
  25%{box-shadow:-8px 8px 42px rgba(79,140,255,.9)}
  55%{box-shadow:-8px 8px 26px rgba(79,140,255,.4)}
}
@keyframes cc-tab-nudge{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(-3px)}
}

/* ── پنل چت — تغییر عرض و ارتفاع توسط کاربر (هندل پایین) ── */
.cc-panel{
  position:fixed;bottom:150px;right:16px;z-index:9999;
  width:min(420px,calc(100vw - 32px));
  min-width:320px;max-width:min(720px,calc(100vw - 32px));
  height:min(600px,calc(100vh - 96px));
  min-height:300px;max-height:calc(100vh - 60px);
  overflow:hidden;
  background:var(--bg2,#0f1630);border:1px solid var(--border,#26335e);
  border-radius:18px;display:flex;flex-direction:column;
  box-shadow:0 16px 50px rgba(0,0,0,.5);
  font-family:inherit;color:var(--text,#e8ecf8);
  /* کشویی: ابتدا کاملاً بیرون لبه راست + مخفی (visibility با تأخیر) */
  visibility:hidden;opacity:0;
  transform:translateX(calc(100% + 60px));
  pointer-events:none;
  transition:transform .38s cubic-bezier(.4,0,.2,1),opacity .3s ease,visibility 0s linear .38s;
}
/* باز → کشویی از راست داخل می‌لغزد */
.cc-panel.open{
  visibility:visible;opacity:1;transform:translateX(0);pointer-events:auto;
  transition:transform .38s cubic-bezier(.4,0,.2,1),opacity .3s ease,visibility 0s;
}
/* هدر دوسطری (فیکس سرریز عرض): ردیف بالا = بج کاربر لاگین‌شده، ردیف پایین = عنوان یک‌خطی + ابزار */
.cc-head{display:flex;flex-direction:column;gap:7px;padding:8px 14px 10px 30px;
  background:linear-gradient(135deg,var(--brand,#4f8cff),var(--brand2,#7c5cff));color:#fff}
.cc-head-auth{display:none;min-width:0}
.cc-head-auth.cc-show{display:flex;align-items:center;min-width:0}
.cc-head-row{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%}
.cc-head-row .cc-title{flex:1 1 auto;min-width:0;font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-ver{flex:0 0 auto;font-size:10px;line-height:1;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:6px;
  padding:3px 6px;opacity:.75;cursor:help;white-space:nowrap;user-select:all;transition:opacity .2s,background .2s}
.cc-ver:hover{opacity:1;background:rgba(255,255,255,.28)}
/* ── نوار ابزار هدر: جایی برای ابزارهای آینده (تاریخچه، کپی، تم، …) ── */
.cc-tools{display:flex;align-items:center;gap:4px}
.cc-tool{background:rgba(255,255,255,.14);border:none;color:#fff;
  width:30px;height:30px;border-radius:9px;cursor:pointer;font-size:15px;
  display:flex;align-items:center;justify-content:center;line-height:1;
  transition:background .2s,transform .15s}
.cc-tool:hover{background:rgba(255,255,255,.3);transform:scale(1.08)}
.cc-tool.active{background:rgba(255,255,255,.42);box-shadow:0 0 0 2px rgba(255,255,255,.35) inset}
.cc-close{background:rgba(255,255,255,.14);border:none;color:#fff;font-size:14px;
  cursor:pointer;line-height:1;width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;transition:background .2s}
.cc-close:hover{background:rgba(255,255,255,.3)}

/* بج کاربر در ردیف بالای هدر — دکمه پیل کوچک (نام ایمیل/کاربر لاگین‌شده) */
.cc-auth{display:inline-flex;max-width:100%}
.cc-auth-btn{display:inline-flex;align-items:center;gap:6px;max-width:100%;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.38);color:#fff;
  font-family:inherit;font-size:11.5px;font-weight:600;line-height:1;cursor:pointer;
  padding:4px 12px;border-radius:999px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 1px 4px rgba(0,0,0,.12);transition:background .2s,border-color .2s}
.cc-auth-btn:hover{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.6)}
.cc-auth.cc-auth-off{display:none} /* ورود فقط از دکمه 🔑 نوار ابزار؛ ردیف بالا مخصوص کاربر لاگین‌شده */

/* ── پنل تاریخچه با بازه زمانی (ابزار 📅) ── */
.cc-range{display:none;padding:10px 14px;background:var(--card,#141c38);
  border-bottom:1px solid var(--border,#26335e);flex-direction:column;gap:8px}
.cc-range.show{display:flex}
.cc-range-title{font-size:12.5px;font-weight:700;color:var(--text,#e8ecf8);margin:0}
.cc-range-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cc-range-row label{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted,#93a1c8)}
.cc-range-row input{background:var(--bg,#0b1020);border:1px solid var(--border,#26335e);
  color:var(--text,#e8ecf8);border-radius:8px;padding:5px 8px;font-size:12px;font-family:inherit}
.cc-range-row input:focus{outline:none;border-color:var(--brand,#4f8cff)}
.cc-range-apply{background:linear-gradient(135deg,var(--brand,#4f8cff),var(--brand2,#7c5cff));
  color:#fff;border:none;border-radius:8px;padding:6px 14px;font-size:12px;font-weight:700;cursor:pointer}
.cc-range-apply:hover{filter:brightness(1.1)}

/* ── نوارهای کنترلی بالای پیام‌ها ── */
.cc-older{display:block;width:100%;padding:7px;margin:0 0 4px;font-size:12px;font-weight:700;
  background:var(--card,#141c38);border:1px dashed var(--border,#26335e);color:var(--brand,#6ea0ff);
  border-radius:10px;cursor:pointer;text-align:center;transition:background .2s}
.cc-older:hover{background:var(--brand,#4f8cff);color:#fff;border-color:transparent}
.cc-backbar{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 12px;margin-bottom:4px;font-size:12px;font-weight:700;
  background:var(--card,#141c38);border:1px solid var(--border,#26335e);color:var(--muted,#93a1c8);
  border-radius:10px}
.cc-backbar button{background:linear-gradient(135deg,var(--brand,#4f8cff),var(--brand2,#7c5cff));
  color:#fff;border:none;border-radius:8px;padding:4px 12px;font-size:11.5px;font-weight:700;cursor:pointer}
.cc-backbar button:hover{filter:brightness(1.1)}
.cc-empty{padding:26px 12px;text-align:center;color:var(--muted,#93a1c8);font-size:13px}
.cc-error{color:#ff7b7b;font-size:13px;line-height:1.8}
.cc-retry{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:5px 14px;border:1px solid rgba(255,123,123,.45);border-radius:999px;background:rgba(255,123,123,.08);color:#ff9b9b;font-size:12.5px;cursor:pointer;transition:background .2s}
.cc-retry:hover{background:rgba(255,123,123,.18)}

.cc-msgs{flex:1;min-height:0;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.cc-msg{position:relative;max-width:86%;padding:10px 14px;border-radius:14px;
  font-size:13.5px;line-height:1.8;white-space:pre-wrap;text-align:start;
  word-spacing:0.08em;font-family:'Vazirmatn','Vazir','IRANSansX','IRANSans',Tahoma,'Segoe UI',system-ui,-apple-system,sans-serif}
.cc-msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--brand,#4f8cff),var(--brand2,#7c5cff));color:#fff}
.cc-msg.bot{align-self:flex-start;background:var(--card,#141c38);border:1px solid var(--border,#26335e)}
/* دکمه کپی — فقط با هاور ظاهر می‌شود */
.cc-copy{position:absolute;top:-9px;right:-9px;display:none;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;border:1px solid var(--border,#26335e);
  background:var(--card2,#1a2446);color:var(--muted,#93a1c8);cursor:pointer;font-size:11px;padding:0;line-height:1}
.cc-msg:hover .cc-copy{display:flex}
.cc-copy:hover{background:var(--brand,#4f8cff);color:#fff}
/* زمان پیام */
.cc-ts{display:block;font-size:10px;color:var(--muted,#93a1c8);margin-top:5px;opacity:.85}
.cc-msg.user .cc-ts{color:rgba(255,255,255,.75)}
.cc-msg.typing{display:inline-flex;align-items:center;gap:6px;min-height:26px;font-style:normal}
.cc-msg.typing .cc-dot{width:9px;height:9px;border-radius:50%;background:var(--muted,#93a1c8);opacity:.35;animation:cc-typing 1.2s infinite ease-in-out}
.cc-msg.typing .cc-dot:nth-child(2){animation-delay:.18s}
.cc-msg.typing .cc-dot:nth-child(3){animation-delay:.36s}
@keyframes cc-typing{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.cc-ctx{font-size:11px;color:var(--muted,#93a1c8);padding:2px 14px 0;text-align:start}
.cc-input-row{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border,#26335e);background:var(--card,#141c38)}
.cc-input{flex:1;background:var(--bg,#0b1020);border:1px solid var(--border,#26335e);color:var(--text,#e8ecf8);
  border-radius:12px;padding:10px 14px;font-size:14px;font-family:'Vazirmatn','Vazir','IRANSansX','IRANSans',Tahoma,'Segoe UI',system-ui,-apple-system,sans-serif;resize:vertical;min-height:60px;text-align:start}
.cc-input:focus{outline:none;border-color:var(--brand,#4f8cff)}
.cc-send{background:linear-gradient(135deg,var(--brand,#4f8cff),var(--brand2,#7c5cff));color:#fff;border:none;
  border-radius:12px;padding:0 18px;font-size:14px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit}
.cc-send:hover{filter:brightness(1.1)}
.cc-send-ico{flex:0 0 auto}
.cc-send-label{white-space:nowrap}
.cc-foot{font-size:13px;color:var(--muted,#93a1c8);padding:8px 14px;background:var(--card2,#1a2446);text-align:center;font-weight:500}
/* ── هندل تغییر ابعاد — گوشه بالا-چپ (درگ: عرض و ارتفاع با هم) ──
   پیشنهاد کاربر (RAGVault 2026-08-27): به‌جای نوار وسط ضلع پایینی،
   گوشه بالا-چپ واضح‌تر است (مثل گوشه پنجره‌های ویندوز) */
.cc-resize{
  position:absolute;top:0;left:0;width:26px;height:26px;z-index:6;
  cursor:nwse-resize;user-select:none;touch-action:none;
}
.cc-resize::before{
  content:'';position:absolute;top:3px;left:3px;width:13px;height:13px;
  border-top:2px solid rgba(255,255,255,.85);
  border-left:2px solid rgba(255,255,255,.85);
  border-top-left-radius:3px;transition:transform .15s;
}
.cc-resize:hover::before{transform:scale(1.2);border-color:#fff}
/* ── کارت تیکت (اعلان سیستم — قابل‌کلیک: باز کردن بخش گزارش) ── */
.cc-ticket-card{background:var(--card2,#1a2446);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:10px 12px;margin:6px 0}
.cc-ticket-card .cc-ticket-body{font-size:13px;line-height:1.7;white-space:pre-wrap;margin-bottom:8px}
/* ── کارت ساختاریافته تیکت: هدر وضعیت / پیام کاربر (نقل‌قول) / اقدام / پانوشت ── */
.cc-ticket-top{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:2px 0 9px;border-bottom:1px solid rgba(255,255,255,.08)}
.cc-ticket-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;
  font-size:12.5px}
.cc-ticket-hd-ico{font-size:14px;line-height:1}
.cc-ticket-no{font-weight:800;direction:ltr;unicode-bidi:isolate;opacity:.9;
  background:rgba(255,255,255,.09);border-radius:6px;padding:1px 7px;font-size:11.5px}
.cc-ticket-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:700;padding:3px 11px;border-radius:999px;white-space:nowrap}
.cc-st-open{background:rgba(148,163,184,.17);color:#cbd5e1}
.cc-st-in_progress{background:rgba(99,132,255,.17);color:#a5baff}
.cc-st-testing{background:rgba(255,193,7,.15);color:#ffd76a}
.cc-st-resolved{background:rgba(52,199,123,.16);color:#63e6ac}
.cc-st-closed{background:rgba(148,163,184,.13);color:#a7b3c7}
.cc-ticket-sec{padding:7px 0 1px}
.cc-ticket-sec + .cc-ticket-sec{margin-top:5px;padding-top:9px;border-top:1px dashed rgba(255,255,255,.1)}
.cc-ticket-sec-lb{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  letter-spacing:.2px;color:var(--muted,#93a1c8);margin-bottom:4px}
.cc-ticket-quote{margin:0;padding:6px 11px;background:rgba(125,160,255,.09);
  border-inline-start:3px solid rgba(125,160,255,.55);
  border-start-start-radius:9px;border-start-end-radius:9px;
  font-size:12.5px;line-height:1.8;white-space:pre-wrap;overflow-wrap:break-word}
.cc-ticket-note-tx{font-size:13px;line-height:1.8;white-space:pre-wrap;overflow-wrap:break-word}
.cc-ticket-foot{padding-top:9px;margin-top:9px;border-top:1px dashed rgba(255,255,255,.08);
  font-size:11.5px;line-height:1.7;color:var(--muted,#93a1c8)}


/* ── موبایل: پنل تمام‌صفحه (bottom sheet → fullscreen) ──
   v14: breakpoint از 560px به 768px ارتقا یافت (بیشتر گوشی‌ها شامل شوند)
   + تمام‌صفحه واقعی (inset:0) + بهبود UX مثل پیام‌رسان‌ها */
@media (max-width:768px){
  .cc-panel{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;max-width:100vw !important;
    height:100vh !important;height:100dvh !important;
    max-height:100dvh !important;min-height:0 !important;
    right:0 !important;bottom:0 !important;left:0 !important;top:0 !important;
    border-radius:0;border:none;
  }
  .cc-resize{display:none !important}
  .cc-msg{max-width:92%}
  .cc-range-row label{flex:1;flex-direction:column;align-items:flex-start}
  .cc-range-row input{width:100%}

  /* بهبود UX موبایل — الگوی پیام‌رسان (مثل چت AgentGUI) */
  .cc-head{padding:12px 14px;font-size:15px}
  .cc-msgs{padding:10px 10px 6px}
  .cc-msg{font-size:14.5px;padding:10px 13px;border-radius:16px}
  .cc-msg.user{border-bottom-right-radius:6px}
  .cc-msg.bot{border-bottom-left-radius:6px}
  .cc-input-row{padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));gap:8px}
  .cc-input{min-height:44px;font-size:16px;border-radius:22px;padding:10px 16px}
  .cc-send{width:46px;height:46px;min-width:46px;border-radius:50%;font-size:18px;padding:0}
  .cc-send .cc-send-label{display:none}
  .cc-send .cc-send-ico{width:22px;height:22px}
  .cc-send:disabled{opacity:.5}
  /* تب در موبایل: کمی فشرده‌تر (موقعیت درگ همان است) */
  #cc-tab{padding:11px 13px 11px 17px}
  #cc-tab .cc-tab-t1{font-size:12.5px}
  #cc-tab .cc-tab-t2{font-size:10px}
  #cc-tab .cc-tab-arrow{width:19px;height:19px}
  /* جلوگیری از zoom خودکار iOS روی input (الزام: font-size ≥ 16px) */
  .cc-input{font-size:16px !important;min-height:48px}
  .cc-msgs{padding-bottom:8px}
  .cc-foot,.cc-older,.cc-backbar{padding:8px 10px}
  .cc-ctx{font-size:11.5px;padding:5px 10px}
  .cc-ticket-card{padding:10px;font-size:13.5px}
  .cc-copy{width:34px;height:34px;font-size:14px}
  /* جلوگیری از zoom خودکار iOS هنگام فوکوس input */
  .cc-input,.cc-login-inp{font-size:16px}
}

/* light theme */
@media (prefers-color-scheme: light){
  .cc-panel{background:#fff;border-color:#d8e0f0;color:#1b2440}
  .cc-msg.bot{background:#f8fafd;border-color:#d8e0f0}
  .cc-input{background:#f4f6fb;border-color:#d8e0f0;color:#1b2440}
  .cc-input-row,.cc-foot,.cc-range,.cc-older,.cc-backbar{background:#f8fafd;border-color:#d8e0f0}
  .cc-ctx{color:#5c6a92}
  .cc-range-row input{background:#fff;border-color:#d8e0f0;color:#1b2440}
  .cc-copy{background:#fff;border-color:#d8e0f0;color:#5c6a92}
  .cc-ts,.cc-empty{color:#5c6a92}
}

/* ══ فرم ورود (الگوی RAGVault — همان ایمیل/رمز AgentGUI) ══ */
.cc-login-modal{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(8,12,26,.55);backdrop-filter:blur(2px)}
.cc-login-box{width:min(300px,86%);background:var(--panel,#141c38);border:1px solid #26335e;border-radius:14px;padding:18px;box-shadow:0 12px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:10px;text-align:center}
.cc-login-title{font-size:13px;font-weight:700;color:#e8ecf8;margin-bottom:2px}
.cc-login-inp{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:9px;border:1px solid #26335e;background:#0f1730;color:#e8ecf8;font-size:13px;direction:ltr;text-align:left}
.cc-login-inp::placeholder{color:#5c6a92}
.cc-login-inp:focus{outline:none;border-color:#4f8cff;box-shadow:0 0 0 2px rgba(79,140,255,.25)}
.cc-login-row{display:flex;gap:8px;margin-top:2px}
.cc-login-submit{flex:1;padding:9px;border:none;border-radius:9px;background:#4f8cff;color:#fff;font-size:13px;font-weight:700;cursor:pointer}
.cc-login-submit:hover{background:#3d76e0}
.cc-login-submit:disabled{opacity:.6;cursor:wait}
.cc-login-cancel{padding:9px 14px;border:1px solid #26335e;border-radius:9px;background:transparent;color:#93a1c8;font-size:13px;cursor:pointer}
.cc-login-cancel:hover{border-color:#4f8cff;color:#e8ecf8}
.cc-login-err{font-size:11.5px;color:#ff6b6b;line-height:1.5}
.cc-login-reg{margin-top:4px;font-size:11.5px;color:#93a1c8;line-height:1.6}
.cc-login-reg a{color:#4f8cff;text-decoration:none;font-weight:700}
.cc-login-reg a:hover{text-decoration:underline}
.cc-login-regnote{font-size:10.5px;color:#5c6a92;margin-top:4px}
/* light theme — فرم ورود */
@media (prefers-color-scheme: light){
  .cc-login-box{background:#fff;border-color:#d8e0f0}
  .cc-login-title{color:#1b2440}
  .cc-login-inp{background:#f8fafd;border-color:#d8e0f0;color:#1b2440}
  .cc-login-inp::placeholder{color:#5c6a92}
  .cc-login-cancel{color:#5c6a92}
  .cc-login-reg{color:#5c6a92}
  .cc-login-regnote{color:#93a1c8}
  .cc-login-err{color:#d33}
}

/* ════════════════════════════════════════════════════════════════
   دکمهٔ سراسری EN/FA — چسبیده به لبه راست، زیر تب Smart Support
   (مثل تب قابل درگ عمودی است ولی کلیک روی آن مستقل = تغییر زبان)
   ============================================================ */
#cc-langbtn{
  position:fixed;right:0;z-index:9998;
  display:flex;align-items:center;justify-content:center;
  min-width:52px;padding:7px 12px;
  background:linear-gradient(135deg,#3a6fd8,#5c4fcf);
  color:#fff;cursor:pointer;user-select:none;-webkit-user-select:none;
  border-radius:999px 0 0 999px;
  box-shadow:-6px 6px 20px rgba(60,110,220,.38);
  border-left:3px solid rgba(255,255,255,.5);
  font-size:.72rem;font-weight:800;letter-spacing:.4px;font-family:inherit;
  transition:background .2s,transform .12s;
}
#cc-langbtn:hover{background:linear-gradient(135deg,#4f8cff,#7c5cff);transform:scale(1.05)}
#cc-langbtn:active{transform:scale(.97)}
#cc-langbtn.cc-lang-fa{font-size:.85rem} /* نمایش «فا» درشت‌تر */

/* ════════════════════════════════════════════════════════════════
   v15 — حالت جمع‌شوندهٔ تب (فقط فلش رقصان) + دکمهٔ EN/FA هوشمند
   ----------------------------------------------------------------
   • حالت عادی: فقط دستهٔ باریک با فلش رقصان دیده می‌شود → فضای صفحه آزاد
   • hover (دسکتاپ) / focus (کیبورد) / اولین tap (موبایل) → تب باز می‌شود:
     متن Smart Support + دکمهٔ EN/FA (از زیر/کنار) ظاهر می‌شود
   • فلش همیشه «سمت چپِ آیکن» می‌ماند (سمت داخل صفحه) در هر دو زبان FA/EN،
     تا هنگام باز/بسته شدن (شیفت به داخل) همچنان دیده شود.
     برای این کار چیدمان داخلی تب با direction:ltr از dir صفحه جدا شده است.
   ============================================================ */
#cc-tab{
  direction:ltr;               /* فلش همیشه فیزیکی-چپ بماند حتی در RTL */
  box-sizing:border-box;
  width:48px; min-width:48px;  /* جمع‌شده: فقط فلش (22px + border3 + padding) */
  padding:13px 8px 13px 12px;
  overflow:hidden;
  transition:opacity .25s ease,transform .25s ease,
             width .3s cubic-bezier(.4,0,.2,1),padding .3s cubic-bezier(.4,0,.2,1),
             filter .2s,box-shadow .2s;
}
#cc-tab.cc-expanded{
  width:106px;                  /* EN: 190→106 (کاملاً هم‌اندازه متن)؛ FA با کلاس cc-fa عریض‌تر */
  padding:13px 12px 13px 12px;
}
#cc-tab.cc-fa.cc-expanded{width:136px} /* متن فارسی پشتیبانی/هوشمند کمی پهن‌تر است */
#cc-tab .cc-tab-text{flex:1 1 0;min-width:0;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s ease .03s}
#cc-tab.cc-expanded .cc-tab-text{opacity:1;transition:opacity .2s ease .12s}
#cc-tab:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* دکمهٔ زبان: فقط وقتی تب باز است از لبهٔ راست می‌لغزد بیرون */
#cc-langbtn{
  transform:translateX(120%);
  opacity:0;
  pointer-events:none;
  transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .22s ease,background .2s;
}
#cc-langbtn.cc-show{transform:none;opacity:1;pointer-events:auto}
#cc-langbtn.cc-show:hover{transform:scale(1.06)}
#cc-langbtn.cc-hidden{transform:translateX(120%);opacity:0;pointer-events:none}

/* ── light: کارت تیکت ساختاریافته (رنگ‌های خوانا روی پس‌زمینه روشن) ── */
@media (prefers-color-scheme: light){
  .cc-ticket-top{border-bottom-color:rgba(20,35,90,.12)}
  .cc-ticket-no{background:rgba(20,35,90,.08);color:#33415c}
  .cc-ticket-sec + .cc-ticket-sec{border-top-color:rgba(20,35,90,.1)}
  .cc-ticket-quote{background:rgba(77,110,255,.07);border-inline-start-color:rgba(77,110,255,.5)}
  .cc-ticket-foot{border-top-color:rgba(20,35,90,.1);color:#5a6577}
  .cc-ticket-sec-lb{color:#5a6577}
  .cc-st-open{background:rgba(100,116,139,.13);color:#526078}
  .cc-st-in_progress{background:rgba(77,110,255,.1);color:#3a5bd9}
  .cc-st-testing{background:rgba(255,170,0,.13);color:#92610a}
  .cc-st-resolved{background:rgba(16,150,90,.11);color:#0b7a4d}
  .cc-st-closed{background:rgba(100,116,139,.1);color:#5a6577}
}

/* ════════════════════════════════════════════════════════════════
   v24 — badge تعداد پیام‌های جدید (آپدیت تیکت‌ها) روی تب
   ----------------------------------------------------------------
   • وقتی ادمین/سیستم برای کاربر پیام تیکت می‌فرستد و کاربر هنوز چت را
     باز نکرده → badge قرمز عددی گوشهٔ بالای تب + فلش «طلایی درخشان»
     با سه ضربان توجه (درس‌دادن تدریجی: شکل خاص = پیام جدید در چت)
   ============================================================ */
#cc-tab .cc-badge{
  position:absolute;top:2px;right:2px;z-index:4;
  min-width:19px;height:19px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;
  border-radius:999px;
  background:linear-gradient(135deg,#ff6b6b,#e01e37);
  color:#fff;font-size:10px;font-weight:800;line-height:1;letter-spacing:.2px;
  border:2px solid rgba(255,255,255,.95);
  box-shadow:0 2px 7px rgba(224,30,55,.55);
  animation:cc-badge-pop .38s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none; /* کلیک badge = کلیک خود تب (باز کردن چت) */
}
#cc-tab .cc-badge[hidden]{display:none}
@keyframes cc-badge-pop{
  from{transform:scale(.3);opacity:0}
  to{transform:scale(1);opacity:1}
}
/* ── حالت «پیام جدید»: فلش حالت خاص می‌گیرد ── */
#cc-tab.cc-has-unread .cc-tab-arrow{
  color:#ffe066;
  filter:drop-shadow(0 0 7px rgba(255,224,102,.95));
  animation:cc-unread-flash 1.1s ease-in-out 3;
}
@keyframes cc-unread-flash{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.3)}
}
#cc-tab.cc-has-unread{
  box-shadow:-8px 10px 30px rgba(255,196,0,.35),-8px 8px 26px rgba(79,140,255,.4);
}
/* badge در موبایل کمی جمع‌وجورتر */
@media (max-width:768px){
  #cc-tab .cc-badge{min-width:17px;height:17px;font-size:9px;top:1px;right:1px}
}

/* ════ ChatCentral — My Tickets (v26) ════ */
.cc-tkview{display:none;flex-direction:column;flex:1 1 auto;min-height:0;border-top:1px solid rgba(128,128,128,.25);}
.cc-tkview.show{display:flex;}
.cc-panel.cc-tk .cc-msgs{display:none;}
.cc-tkview-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid rgba(128,128,128,.25);flex:0 0 auto;}
.cc-tkview-title{flex:1 1 auto;font-size:.86rem;font-weight:700;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cc-tkview-back,.cc-tkview-x,.cc-tk-back-list{background:transparent;border:1px solid rgba(128,128,128,.35);border-radius:8px;padding:1px 8px;cursor:pointer;font-size:.78rem;color:inherit;line-height:1.5;}
.cc-tkview-back:hover,.cc-tkview-x:hover,.cc-tk-back-list:hover{background:rgba(128,128,128,.14);}
.cc-tkview-body{flex:1 1 auto;overflow-y:auto;min-height:0;padding:6px;display:flex;flex-direction:column;gap:6px;}
.cc-tk-state{opacity:.75;font-size:.8rem;text-align:center;padding:20px 8px;line-height:1.7;}
.cc-tk-row{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid rgba(128,128,128,.28);border-radius:10px;cursor:pointer;}
.cc-tk-row:hover{background:rgba(128,128,128,.10);}
.cc-tk-chip{flex:0 0 auto;color:#fff;font-size:.66rem;font-weight:700;border-radius:999px;padding:1px 9px;white-space:nowrap;letter-spacing:.2px;}
.cc-tk-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;}
.cc-tk-no{font-size:.66rem;font-weight:700;opacity:.65;}
.cc-tk-title{font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cc-tk-date{flex:0 0 auto;font-size:.64rem;opacity:.65;white-space:nowrap;}
.cc-tk-detail{display:flex;flex-direction:column;gap:6px;padding:6px 8px;}
.cc-tk-detail-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.cc-tk-detail-no{font-size:.85rem;}
.cc-tk-detail-title{font-size:.94rem;font-weight:700;line-height:1.6;}
.cc-tk-detail-desc{font-size:.82rem;white-space:pre-wrap;word-break:break-word;opacity:.85;line-height:1.7;max-height:38vh;overflow-y:auto;}
.cc-tk-detail-meta{font-size:.68rem;opacity:.6;}
.cc-tk-follow{margin-top:4px;align-self:flex-start;border:1px solid rgba(128,128,128,.35);border-radius:10px;padding:5px 14px;cursor:pointer;font-size:.8rem;background:rgba(128,128,128,.08);color:inherit;}
.cc-tk-follow:hover{background:rgba(128,128,128,.18);}
