@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Vazirmatn-Variable.woff2') format('woff2 supports variations'),
       url('fonts/Vazirmatn-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

#csz-chat-root{
  --csz-ink:#132A3A;
  --csz-ink-2:#1E3E52;
  --csz-paper:#F6F3EC;
  --csz-paper-2:#FFFFFF;
  --csz-brass:#B98A3E;
  --csz-brass-soft:#E4C88A;
  --csz-moss:#4E7C6B;
  --csz-text:#1B2430;
  --csz-muted:#6B7684;
  --csz-line:#E4DFD2;
  font-family:'Vazirmatn', Tahoma, sans-serif;
  direction:rtl;
}
#csz-chat-root *{ box-sizing:border-box; }

#csz-launcher{
  position:fixed; z-index:99998;
  bottom:24px; left:24px;
  width:60px; height:60px;
  border-radius:50%;
  background:linear-gradient(145deg, var(--csz-ink-2), var(--csz-ink));
  box-shadow:0 16px 36px -10px rgba(19,42,58,.4);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease;
}
#csz-launcher:hover{ transform:translateY(-2px) scale(1.03); }
#csz-launcher svg{ width:26px; height:26px; }
#csz-launcher .csz-dot{
  position:absolute; top:6px; left:6px; width:11px; height:11px;
  border-radius:50%; background:var(--csz-brass); border:2px solid #fff;
}

#csz-panel{
  position:fixed; z-index:99999;
  bottom:24px; left:24px;
  width:370px; max-width:calc(100vw - 32px);
  height:540px; max-height:calc(100vh - 64px);
  background:var(--csz-paper-2);
  border-radius:16px;
  box-shadow:0 20px 46px -12px rgba(19,42,58,.4);
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(14px) scale(.97); opacity:0; pointer-events:none;
  transition:all .25s cubic-bezier(.2,.8,.2,1);
}
#csz-panel.csz-open{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }

.csz-head{
  background:linear-gradient(120deg, var(--csz-ink), var(--csz-ink-2));
  color:#fff; padding:14px 16px; display:flex; align-items:center; gap:10px;
}
.csz-head .csz-avatar{
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;
  object-fit:cover;
}
.csz-head .csz-avatar-fallback{
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.12);
  align-items:center; justify-content:center; font-size:17px; flex-shrink:0;
}
.csz-head .csz-meta{ flex:1; min-width:0; }
.csz-head .csz-title{ font-weight:700; font-size:14px; }
.csz-status{ display:flex; align-items:center; gap:6px; font-size:11px; color:rgba(255,255,255,.82); margin-top:2px; }
.csz-status .d{ width:7px; height:7px; border-radius:50%; background:var(--csz-moss); }
.csz-status.human .d{ background:var(--csz-brass); }
.csz-close{ background:rgba(255,255,255,.1); border:none; color:#fff; width:28px; height:28px; border-radius:8px; cursor:pointer; }
.csz-back{ background:rgba(255,255,255,.1); border:none; color:#fff; width:28px; height:28px; border-radius:8px; cursor:pointer; font-size:16px; flex-shrink:0; }
.csz-back:hover{ background:rgba(255,255,255,.18); }

.csz-messages{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:9px; background:var(--csz-paper); }

.csz-home{ flex:1; overflow-y:auto; padding:20px 16px; background:var(--csz-paper); }
.csz-home-welcome{ font-size:14px; line-height:1.9; color:var(--csz-text); margin-bottom:16px; }
.csz-name-input{
  width:100%; border:1px solid var(--csz-line); border-radius:11px; padding:9px 12px;
  font-family:inherit; font-size:12.5px; background:#fff; color:var(--csz-text);
  margin-bottom:14px; outline:none; box-sizing:border-box;
}
.csz-name-input:focus{ border-color:var(--csz-ink-2); }
.csz-continue-btn{
  width:100%; text-align:right; font-family:inherit; font-size:12.5px; font-weight:600;
  color:var(--csz-ink); background:#fff; border:1px solid var(--csz-brass-soft);
  padding:10px 14px; border-radius:12px; cursor:pointer; margin-bottom:16px;
}
.csz-continue-btn:hover{ background:#FFF7E8; }
.csz-home-label{ font-size:11.5px; color:var(--csz-muted); font-weight:600; margin-bottom:8px; }
.csz-home-chips{ display:flex; flex-direction:column; gap:8px; }
.csz-home-chip{
  text-align:right; border:1px solid var(--csz-line); background:#fff; color:var(--csz-ink-2);
  font-family:inherit; font-size:13px; padding:11px 14px; border-radius:12px; cursor:pointer;
  transition:all .15s ease;
}
.csz-home-chip:hover{ background:var(--csz-ink); color:#fff; border-color:var(--csz-ink); }
.csz-row{ display:flex; gap:7px; max-width:88%; }
.csz-row.user{ align-self:flex-end; flex-direction:row-reverse; }
.csz-row.bot, .csz-row.operator, .csz-row.system{ align-self:flex-start; }
.csz-bubble{ padding:9px 12px; border-radius:13px; font-size:13px; line-height:1.85; white-space:pre-wrap; }
.csz-row.user .csz-bubble{ background:var(--csz-ink); color:#fff; border-bottom-left-radius:4px; }
.csz-tick{ display:inline-block; margin-right:6px; font-size:11px; color:rgba(255,255,255,.55); letter-spacing:-1px; }
.csz-tick.csz-tick-seen{ color:#8fd3ff; }
.csz-row.bot .csz-bubble{ background:#fff; border:1px solid var(--csz-line); border-bottom-right-radius:4px; }
.csz-row.operator .csz-bubble{ background:#FFF7E8; border:1px solid var(--csz-brass-soft); border-bottom-right-radius:4px; }
.csz-row.system .csz-bubble{ background:transparent; color:var(--csz-muted); font-size:11px; text-align:center; }
.csz-row.system{ align-self:center; max-width:100%; }
.csz-avatar-sm{ width:24px; height:24px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; background:var(--csz-ink-2); color:#fff; }
.csz-row.operator .csz-avatar-sm{ background:var(--csz-brass); }

.csz-suggestions{ display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px; background:var(--csz-paper); }
.csz-chip{ border:1px solid var(--csz-line); background:#fff; color:var(--csz-ink-2); font-family:inherit; font-size:11.5px; padding:6px 10px; border-radius:100px; cursor:pointer; }
.csz-chip:hover{ background:var(--csz-ink); color:#fff; }

.csz-escalate-bar{ padding:7px 14px; background:var(--csz-paper); border-top:1px dashed var(--csz-line); display:flex; justify-content:center; }
.csz-escalate-btn{ font-family:inherit; font-size:11.5px; color:var(--csz-brass); background:none; border:none; cursor:pointer; font-weight:600; }
.csz-escalate-btn:hover{ text-decoration:underline; }

.csz-input-row{ display:flex; align-items:center; gap:8px; padding:11px; border-top:1px solid var(--csz-line); background:#fff; }
.csz-input-row input{ flex:1; border:1px solid var(--csz-line); border-radius:11px; padding:9px 12px; font-family:inherit; font-size:13px; background:var(--csz-paper); color:var(--csz-text); outline:none; }
.csz-input-row input:focus{ border-color:var(--csz-ink-2); }
.csz-send{ width:36px; height:36px; border-radius:10px; border:none; background:var(--csz-ink); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.csz-send:hover{ background:var(--csz-ink-2); }

.csz-typing{ display:flex; gap:4px; padding:5px 3px; }
.csz-typing span{ width:6px; height:6px; border-radius:50%; background:var(--csz-muted); animation:csz-bounce 1.2s infinite; }
.csz-typing span:nth-child(2){ animation-delay:.15s; }
.csz-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes csz-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5;} 30%{ transform:translateY(-4px); opacity:1;} }

@media (max-width:480px){
  #csz-panel{ left:12px; bottom:12px; width:calc(100vw - 24px); }
  #csz-launcher{ left:16px; bottom:16px; }
}