:root{
  --nch-primary: #c9973f;
  --nch-primary-dim: #8a6a2e;
  --nch-bg: #1c1610;
  --nch-surface: #241c14;
  --nch-border: #362a1c;
  --nch-text: #f3ead9;
  --nch-text-muted: #a4917a;
  --nch-danger: #c1503f;
  --nch-radius: 18px;
  --nch-shadow: 0 16px 40px rgba(0,0,0,.4);
}

.nch-root, .nch-root *{ box-sizing:border-box; font-family:'Vazirmatn', sans-serif; }


.nch-bubble{
  position:fixed; bottom:22px; left:22px; width:60px; height:60px; border-radius:50%;
  background: linear-gradient(160deg, var(--nch-primary), #8a6a2e); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow: var(--nch-shadow);
  z-index:9998; color:#1a1206; transition: transform .18s ease;
}
.nch-bubble:hover{ transform: scale(1.06); }
.nch-bubble:focus-visible{ outline:3px solid var(--nch-primary); outline-offset:3px; }
.nch-bubble::after{
  content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--nch-primary);
  opacity:.55; animation: nch-pulse 2.4s ease-out infinite;
}
@keyframes nch-pulse{ 0%{ transform:scale(.9); opacity:.5; } 100%{ transform:scale(1.35); opacity:0; } }
.nch-bubble__badge{
  position:absolute; top:-2px; right:-2px; background: var(--nch-danger); color:#fff; font-size:.68rem; font-weight:700;
  min-width:18px; height:18px; border-radius:999px; display:none; align-items:center; justify-content:center; padding:0 4px;
}
.nch-bubble__badge.is-visible{ display:flex; }
.nch-bubble svg.nch-icon-close{ display:none; }
.nch-root.is-open .nch-bubble svg.nch-icon-chat{ display:none; }
.nch-root.is-open .nch-bubble svg.nch-icon-close{ display:block; }

.nch-panel{
  position:fixed; bottom:96px; left:22px; width:370px; max-width:calc(100vw - 32px); height:520px; max-height:calc(100vh - 130px);
  background: linear-gradient(180deg, var(--nch-bg), var(--nch-surface)); border:1px solid var(--nch-border); border-radius: var(--nch-radius);
  box-shadow: var(--nch-shadow); display:flex; flex-direction:column; overflow:hidden; z-index:9999;
  opacity:0; transform: translateY(16px) scale(.97); pointer-events:none; transition: opacity .2s ease, transform .2s ease;
}
.nch-root.is-open .nch-panel{ opacity:1; transform:none; pointer-events:auto; }

.nch-head{ padding:16px 18px; background: var(--nch-surface); border-bottom:1px solid var(--nch-border); display:flex; align-items:center; gap:10px; }
.nch-head__avatar{ width:38px; height:38px; border-radius:50%; background: linear-gradient(160deg, var(--nch-primary), #7a5c28); display:flex; align-items:center; justify-content:center; font-weight:700; color:#1a1206; flex-shrink:0; }
.nch-head__meta{ line-height:1.4; flex:1; min-width:0; }
.nch-head__meta strong{ display:block; color: var(--nch-text); font-size:.9rem; }
.nch-head__meta span{ display:flex; align-items:center; gap:5px; color: var(--nch-text-muted); font-size:.72rem; }
.nch-head__dot{ width:7px; height:7px; border-radius:50%; background:#74a05e; box-shadow:0 0 8px rgba(116,160,94,.7); }

.nch-form{ padding:20px 18px; display:flex; flex-direction:column; gap:13px; overflow-y:auto; }
.nch-form p{ margin:0 0 2px; color: var(--nch-text-muted); font-size:.8rem; line-height:1.8; }
.nch-field{ display:flex; flex-direction:column; gap:6px; }
.nch-field span{ font-size:.78rem; color: var(--nch-text-muted); }
.nch-field input, .nch-field textarea{
  background: var(--nch-surface); border:1px solid var(--nch-border); color: var(--nch-text); border-radius:10px;
  padding:10px 12px; font-size:.85rem; outline:none; font-family:inherit;
}
.nch-field input:focus, .nch-field textarea:focus{ border-color: var(--nch-primary); }
.nch-field textarea{ resize:none; min-height:64px; }
.nch-error{ display:none; background: rgba(193,80,63,.14); border:1px solid rgba(193,80,63,.4); color:#e8b3a9; font-size:.76rem; padding:8px 10px; border-radius:8px; }
.nch-error.is-visible{ display:block; }
.nch-submit{
  background: linear-gradient(180deg, var(--nch-primary), #b3822f); border:none; color:#1a1206; font-weight:700;
  padding:11px; border-radius:10px; cursor:pointer; font-size:.87rem; margin-top:2px;
}
.nch-submit:disabled{ opacity:.6; cursor:default; }

.nch-thread{ display:none; flex:1; flex-direction:column; min-height:0; }
.nch-root.is-chatting .nch-form{ display:none; }
.nch-root.is-chatting .nch-thread{ display:flex; }

.nch-messages{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:9px; }
.nch-msg{ max-width:80%; display:flex; flex-direction:column; gap:3px; }
.nch-msg__body{ padding:9px 13px; border-radius:14px; font-size:.84rem; line-height:1.7; white-space:pre-wrap; word-break:break-word; }
.nch-msg--me{ align-self:flex-end; }
.nch-msg--me .nch-msg__body{ background: linear-gradient(180deg, var(--nch-primary), #b3822f); color:#1a1206; border-bottom-left-radius:3px; }
.nch-msg--them{ align-self:flex-start; }
.nch-msg--them .nch-msg__body{ background: var(--nch-surface); border:1px solid var(--nch-border); color: var(--nch-text); border-bottom-right-radius:3px; }
.nch-msg__time{ font-size:.64rem; color: var(--nch-text-muted); padding:0 4px; }

.nch-closed-note{ display:none; margin:10px 16px; background: rgba(193,80,63,.12); border:1px solid rgba(193,80,63,.35); color:#e8b3a9; font-size:.76rem; padding:9px 12px; border-radius:10px; text-align:center; }
.nch-closed-note.is-visible{ display:block; }

.nch-input-row{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--nch-border); background: var(--nch-surface); }
.nch-input-row textarea{
  flex:1; resize:none; background: var(--nch-bg); border:1px solid var(--nch-border); color: var(--nch-text);
  border-radius:10px; padding:10px 12px; font-size:.85rem; font-family:inherit; outline:none; max-height:80px; min-height:40px;
}
.nch-input-row textarea:focus{ border-color: var(--nch-primary); }
.nch-input-row button{
  background: var(--nch-primary); border:none; color:#1a1206; width:40px; height:40px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.nch-input-row button:disabled{ opacity:.5; cursor:default; }

@media (max-width: 480px){
  .nch-panel{ left:12px; right:12px; width:auto; bottom:88px; height:calc(100vh - 120px); }
  .nch-bubble{ left:16px; bottom:16px; }
}

@media (prefers-reduced-motion: reduce){
  .nch-bubble::after{ animation:none; }
  .nch-panel{ transition:none; }
}