:root{
  --cc-primary:#00a884;
  --cc-accent:#e53935;
  --cc-chat:#e53935;
  --cc-text:#1f2937;
  --cc-muted:#9ca3af;
  --cc-bg:#fff;
  --cc-soft:#f3f4f6;
  --cc-border:#eee;
  --cc-shadow:0 20px 60px rgba(0,0,0,.18);
  --cc-z:99999;
  --cc-font:Vazirmatn, Tahoma, system-ui, sans-serif;
  --cc-radius:22px;
  --cc-ease:cubic-bezier(.22,1,.36,1);
}
@font-face{
  font-family:Vazirmatn;
  src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight:400;font-display:swap;
}
@font-face{
  font-family:Vazirmatn;
  src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight:700;font-display:swap;
}

.cc-root{all:initial;font-family:var(--cc-font);direction:rtl;position:relative;z-index:var(--cc-z)}
.cc-root *,.cc-root *::before,.cc-root *::after{box-sizing:border-box}

/* ===== Side tab launcher ===== */
.cc-side-tab{
  position:fixed;top:50%;transform:translateY(-50%);
  z-index:var(--cc-z);width:46px;min-height:160px;padding:16px 0 14px;
  border:0;border-radius:14px 0 0 14px;cursor:pointer;
  background:var(--cc-accent);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:14px;
  box-shadow:0 8px 28px rgba(229,57,53,.35);
  transition:transform .25s var(--cc-ease), box-shadow .25s ease;
}
.cc-side-tab.cc-pos-left{left:0;right:auto;border-radius:0 14px 14px 0}
.cc-side-tab.cc-pos-right{right:0;left:auto;border-radius:14px 0 0 14px}
.cc-side-tab:hover{transform:translateY(-50%) scale(1.03);box-shadow:0 12px 34px rgba(229,57,53,.45)}
.cc-side-tab-text{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font:700 14px/1.2 var(--cc-font);letter-spacing:.5px;white-space:nowrap;
}
.cc-side-tab-x{
  width:22px;height:22px;display:grid;place-items:center;
  font-size:16px;line-height:1;opacity:.95;
  transition:transform .3s var(--cc-ease);
}
.cc-side-tab:not(.is-closed) .cc-side-tab-x{transform:rotate(90deg)}
.cc-side-tab.is-closed .cc-side-tab-x{display:none}
.cc-side-tab.is-closed::after{
  content:"";width:18px;height:18px;margin-bottom:2px;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.2 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1l-2.2 2.2z'/%3E%3C/svg%3E");
}

/* ===== FAB launcher (chat) ===== */
.cc-fab{
  position:fixed;bottom:24px;z-index:var(--cc-z);
  width:60px;height:60px;border:0;border-radius:50%;cursor:pointer;
  background:linear-gradient(135deg,var(--cc-chat),#c62828);color:#fff;
  box-shadow:0 12px 28px rgba(198,40,40,.4);
  display:grid;place-items:center;
  transition:transform .35s var(--cc-ease), box-shadow .25s ease, background .25s ease;
}
.cc-fab:hover{transform:scale(1.08);box-shadow:0 16px 36px rgba(198,40,40,.5)}
.cc-fab.is-open{transform:rotate(90deg) scale(1.05)}
.cc-fab.cc-pos-left{left:24px;right:auto}
.cc-fab.cc-pos-right{right:24px;left:auto}
.cc-fab svg{width:26px;height:26px;fill:currentColor;transition:transform .3s var(--cc-ease)}

/* ===== Quick stack ===== */
.cc-quick{
  position:fixed;bottom:24px;z-index:var(--cc-z);
  display:flex;flex-direction:column;gap:12px;
  direction:ltr; /* isolate from RTL so left/right labels are predictable */
}
.cc-quick.cc-pos-left{left:20px;right:auto;align-items:flex-start}
.cc-quick.cc-pos-right{right:20px;left:auto;align-items:flex-end}
.cc-quick-row{display:flex;align-items:center;gap:10px}
/* Left edge: icon near edge, label toward center (right of icon) */
.cc-quick.cc-pos-left .cc-quick-row{flex-direction:row}
/* Right edge: icon near edge, label toward center (left of icon) */
.cc-quick.cc-pos-right .cc-quick-row{flex-direction:row-reverse}
.cc-quick-btn{
  width:56px;height:56px;border:0;border-radius:18px;cursor:pointer;color:#fff;
  display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.18);
  transition:transform .2s var(--cc-ease), box-shadow .2s ease;
  flex:0 0 auto;
}
.cc-quick-btn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 28px rgba(0,0,0,.22)}
.cc-quick-btn svg{width:24px;height:24px;fill:currentColor}
.cc-quick-label{
  background:#fff;color:#111;padding:10px 16px;border-radius:999px;
  font:700 13px/1 var(--cc-font);box-shadow:0 8px 20px rgba(0,0,0,.12);
  white-space:nowrap;direction:rtl;
}
.cc-quick-toggle{background:#e53935}
.cc-quick-item{
  text-decoration:none;
  animation:ccQuickIn .4s var(--cc-ease) both;
  animation-delay:calc(var(--i, 0) * .06s);
}
@keyframes ccQuickIn{
  from{opacity:0;transform:translateY(16px) scale(.85)}
  to{opacity:1;transform:none}
}

/* ===== Contact panel ===== */
.cc-panel{
  position:fixed;z-index:var(--cc-z);width:min(360px,calc(100vw - 70px));
  max-height:min(560px,calc(100vh - 40px));
  background:#fff;border-radius:var(--cc-radius);box-shadow:var(--cc-shadow);
  overflow:hidden;flex-direction:column;
  display:flex;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-46%) scale(.92);
  transition:opacity .28s var(--cc-ease), transform .35s var(--cc-ease), visibility .28s;
}
.cc-panel.open{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(-50%) scale(1);
}
.cc-panel.cc-pos-left{left:58px;right:auto;top:50%}
.cc-panel.cc-pos-right{right:58px;left:auto;top:50%}

.cc-contact-head{
  background:var(--cc-primary);color:#fff;padding:18px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.cc-contact-head-right{display:flex;align-items:center;gap:12px}
.cc-head-ico,.cc-head-close{
  width:42px;height:42px;border-radius:50%;border:0;display:grid;place-items:center;
  background:rgba(255,255,255,.18);color:#fff;cursor:pointer;flex:0 0 auto;
  transition:transform .2s var(--cc-ease), background .2s ease;
}
.cc-head-close:hover,.cc-head-ico:hover{background:rgba(255,255,255,.28);transform:scale(1.06)}
.cc-head-ico svg,.cc-head-close svg{width:20px;height:20px;fill:currentColor}
.cc-contact-head h3{margin:0;font:700 18px/1.2 var(--cc-font)}
.cc-contact-body{padding:16px;overflow:auto;background:#fafafa;flex:1}
.cc-channel{
  display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:12px;
  background:#fff;border-radius:16px;text-decoration:none;color:var(--cc-text);
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  transition:transform .2s var(--cc-ease), box-shadow .2s ease;
  animation:ccItemIn .35s var(--cc-ease) both;
  animation-delay:calc(var(--i, 0) * .05s);
}
.cc-channel:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.1)}
.cc-channel-ico{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;color:#fff;
}
.cc-channel-ico svg{width:24px;height:24px;fill:currentColor}
.cc-channel-meta{flex:1;min-width:0}
.cc-channel-meta strong{display:block;font:700 14px/1.3 var(--cc-font)}
.cc-channel-meta span{display:block;margin-top:3px;font:400 12px/1.2 var(--cc-font);color:var(--cc-muted);text-transform:lowercase}
.cc-channel-chev{color:#c4c4c4;font-size:22px;line-height:1;padding:0 4px}
.cc-panel-foot{padding:10px 16px 16px;background:#fafafa;display:flex;gap:8px}
.cc-mini-tab{
  flex:1;border:0;background:#fff;border-radius:12px;padding:10px;cursor:pointer;
  font:700 12px var(--cc-font);color:#666;box-shadow:0 2px 8px rgba(0,0,0,.05);
  transition:background .2s ease, color .2s ease, transform .15s ease;
}
.cc-mini-tab:hover{transform:translateY(-1px)}
.cc-mini-tab.active{background:var(--cc-primary);color:#fff}

/* ===== Chat panel ===== */
.cc-chat-panel{
  position:fixed;bottom:100px;z-index:var(--cc-z);width:min(380px,calc(100vw - 24px));
  height:min(560px,calc(100vh - 130px));background:#fff;border-radius:20px;
  box-shadow:var(--cc-shadow);overflow:hidden;flex-direction:column;
  display:flex;
  opacity:0;visibility:hidden;pointer-events:none;
  transform-origin:bottom center;
  transform:translateY(28px) scale(.88);
  transition:opacity .3s var(--cc-ease), transform .4s var(--cc-ease), visibility .3s;
}
.cc-chat-panel.open{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(0) scale(1);
}
.cc-chat-panel.cc-pos-left{left:24px;right:auto;transform-origin:bottom left}
.cc-chat-panel.cc-pos-right{right:24px;left:auto;transform-origin:bottom right}
.cc-chat-panel.cc-pos-left.open,.cc-chat-panel.cc-pos-right.open{transform:translateY(0) scale(1)}

.cc-chat-head{
  background:linear-gradient(90deg,var(--cc-chat),#c62828);color:#fff;
  padding:14px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex:0 0 auto;
}
.cc-chat-head-user{display:flex;align-items:center;gap:10px}
.cc-avatar{
  width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;
  overflow:hidden;flex:0 0 auto;box-shadow:0 0 0 2px rgba(255,255,255,.35);
}
.cc-avatar img{width:100%;height:100%;object-fit:cover}
.cc-avatar-fallback{width:28px;height:28px;background:var(--cc-primary);border-radius:8px;display:block}
.cc-chat-head h3{margin:0;font:700 15px/1.2 var(--cc-font)}
.cc-chat-status{display:flex;align-items:center;gap:6px;font:400 12px var(--cc-font);opacity:.95;margin-top:3px}
.cc-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;animation:ccPulse 1.8s ease infinite}
.cc-dot.off{background:#cbd5e1;animation:none}
@keyframes ccPulse{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}}
.cc-chat-close{
  width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.2);color:#fff;display:grid;place-items:center;
  transition:transform .2s var(--cc-ease), background .2s ease;
}
.cc-chat-close:hover{background:rgba(255,255,255,.32);transform:rotate(90deg)}
.cc-chat-close svg{width:16px;height:16px;fill:currentColor}

.cc-chat-body{
  flex:1;overflow:auto;background:#f5f5f5;padding:16px;
  display:flex;flex-direction:column;gap:12px;min-height:0;width:100%;
}
#cc-chat-log{
  display:flex;flex-direction:column;gap:12px;width:100%;flex:1;
}

/* Fix: bubbles must size to content, not collapse to 1 glyph */
.cc-msg-row{
  display:flex;align-items:flex-end;gap:8px;width:100%;
  animation:ccMsgIn .3s var(--cc-ease) both;
}
.cc-msg-row.operator{flex-direction:row;justify-content:flex-start}
.cc-msg-row.visitor{flex-direction:row;justify-content:flex-end}
.cc-msg-col{
  display:flex;flex-direction:column;
  max-width:min(78%, 280px);
  min-width:0;
  flex:0 1 auto;
}
.cc-msg-row.visitor .cc-msg-col{align-items:flex-end}
.cc-msg-row.operator .cc-msg-col{align-items:flex-start}
.cc-bubble{
  display:inline-block;
  width:fit-content;
  max-width:100%;
  background:#fff;padding:12px 14px;border-radius:16px;
  font:400 13px/1.7 var(--cc-font);color:var(--cc-text);
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  white-space:pre-wrap;
  word-break:normal;
  overflow-wrap:anywhere;
  direction:rtl;text-align:right;
  unicode-bidi:plaintext;
}
.cc-msg-row.visitor .cc-bubble{background:#ffe8e6;border-bottom-left-radius:6px}
.cc-msg-row.operator .cc-bubble{border-bottom-right-radius:6px}
.cc-msg-time{font:400 11px var(--cc-font);color:#9ca3af;margin-top:4px}
.cc-msg-avatar{width:28px;height:28px;border-radius:50%;background:#fff;overflow:hidden;flex:0 0 auto}
.cc-msg-avatar img{width:100%;height:100%;object-fit:cover}
.cc-msg-avatar .cc-avatar-fallback{width:100%;height:100%;border-radius:50%}

@keyframes ccMsgIn{
  from{opacity:0;transform:translateY(8px) scale(.96)}
  to{opacity:1;transform:none}
}
@keyframes ccItemIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

.cc-chat-foot{
  padding:12px;background:#fff;display:flex;align-items:center;gap:10px;
  border-top:1px solid #f0f0f0;flex:0 0 auto;
}
.cc-attach,.cc-send{
  width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;
  cursor:pointer;flex:0 0 auto;
  transition:transform .2s var(--cc-ease), box-shadow .2s ease;
}
.cc-attach{background:#eef2f7;color:#64748b}
.cc-send{background:var(--cc-chat);color:#fff;box-shadow:0 6px 16px rgba(229,57,53,.35)}
.cc-attach:hover,.cc-send:hover{transform:scale(1.08)}
.cc-attach svg,.cc-send svg{width:18px;height:18px;fill:currentColor}
.cc-chat-input{
  flex:1;min-width:0;border:1px solid #e5e7eb;background:#fff;border-radius:999px;
  padding:12px 16px;font:400 13px var(--cc-font);outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.cc-chat-input:focus{border-color:#fca5a5;box-shadow:0 0 0 3px rgba(229,57,53,.12)}

.cc-form{padding:4px;animation:ccItemIn .3s var(--cc-ease)}
.cc-form label{display:block;font:600 12px var(--cc-font);color:#6b7280;margin:0 0 6px}
.cc-form input,.cc-form select,.cc-form textarea{
  width:100%;margin-bottom:10px;padding:11px 14px;border:1px solid #e5e7eb;border-radius:14px;
  font:400 13px var(--cc-font);background:#fff;
}
.cc-btn{
  width:100%;border:0;border-radius:14px;padding:12px;cursor:pointer;
  background:var(--cc-chat);color:#fff;font:700 13px var(--cc-font);
  transition:transform .2s var(--cc-ease), box-shadow .2s ease;
}
.cc-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(229,57,53,.3)}
.cc-note{font:400 12px/1.7 var(--cc-font);color:#92400e;background:#fff7ed;border-radius:12px;padding:10px;margin-bottom:10px}
.cc-faq-search{width:100%;padding:11px 14px;border:1px solid #e5e7eb;border-radius:14px;margin-bottom:10px;font:13px var(--cc-font)}
.cc-faq-item{background:#fff;border-radius:14px;margin-bottom:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.cc-faq-q{width:100%;text-align:right;background:transparent;border:0;padding:12px 14px;cursor:pointer;font:700 13px var(--cc-font);color:var(--cc-text)}
.cc-faq-a{display:none;padding:0 14px 12px;font:400 12px/1.8 var(--cc-font);color:#6b7280}
.cc-faq-item.open .cc-faq-a{display:block}

@media(max-width:480px){
  .cc-panel,.cc-chat-panel{
    left:0!important;right:0!important;bottom:0!important;top:auto!important;
    width:100%;max-height:88vh;height:88vh;
    border-radius:22px 22px 0 0;
    transform-origin:bottom center;
  }
  .cc-panel{transform:translateY(40%) scale(.96)}
  .cc-panel.open{transform:translateY(0) scale(1)}
  .cc-chat-panel{transform:translateY(40%) scale(.96)}
  .cc-chat-panel.open{transform:translateY(0) scale(1)}
  .cc-side-tab{top:auto;bottom:120px;transform:none}
  .cc-side-tab:hover{transform:scale(1.03)}
}

@media (prefers-reduced-motion:reduce){
  .cc-panel,.cc-chat-panel,.cc-quick-item,.cc-channel,.cc-msg-row,.cc-fab,.cc-side-tab{
    animation:none!important;transition:none!important
  }
}