/* ==========================================================================
   Чуулганы чат туслах — виджет
   ========================================================================== */
.chx-fab{
  position:fixed; right:22px; bottom:22px; z-index:900;
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:var(--state); color:#fff;
  box-shadow:0 4px 18px rgba(8,52,121,.35);
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, background .15s ease;
}
.chx-fab:hover{ background:var(--ink-2); transform:translateY(-2px); }
.chx-fab svg{ width:26px; height:26px; }
.chx-fab .chx-close-ic{ display:none; }
.chx-open .chx-fab .chx-chat-ic{ display:none; }
.chx-open .chx-fab .chx-close-ic{ display:block; }

.chx-panel{
  position:fixed; right:22px; bottom:90px; z-index:900;
  width:372px; max-width:calc(100vw - 32px);
  height:520px; max-height:calc(100vh - 120px);
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 0 0 .8px rgba(8,60,130,.08), 0 12px 42px rgba(8,35,79,.28);
  display:none; flex-direction:column;
}
.chx-open .chx-panel{ display:flex; }

.chx-head{
  background:var(--state); color:#fff; padding:14px 16px;
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.chx-head .chx-dot{
  width:34px; height:34px; border-radius:50%; background:var(--gold);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.chx-head .chx-dot svg{ width:18px; height:18px; }
.chx-head b{ font-size:15px; font-weight:700; letter-spacing:.2px; display:block; }
.chx-head span{ font-size:12px; opacity:.75; display:block; margin-top:1px; }

.chx-log{
  flex:1; overflow-y:auto; padding:16px 14px;
  background:var(--parch-2);
  display:flex; flex-direction:column; gap:10px;
}
.chx-msg{
  max-width:86%; padding:9px 13px; border-radius:12px;
  font-size:14px; line-height:1.55; white-space:pre-wrap; word-wrap:break-word;
}
.chx-msg.chx-user{
  align-self:flex-end; background:var(--state); color:#fff;
  border-bottom-right-radius:4px;
}
.chx-msg.chx-bot{
  align-self:flex-start; background:#fff; color:var(--text);
  border:1px solid var(--rule); border-bottom-left-radius:4px;
}
.chx-msg.chx-err{ background:#FBF0F0; border-color:#E5C6C6; color:#6E2230; }

.chx-typing{ align-self:flex-start; display:flex; gap:5px; padding:12px 14px; }
.chx-typing i{
  width:7px; height:7px; border-radius:50%; background:var(--state-2);
  animation:chx-b 1.1s infinite;
}
.chx-typing i:nth-child(2){ animation-delay:.18s; }
.chx-typing i:nth-child(3){ animation-delay:.36s; }
@keyframes chx-b{ 0%,60%,100%{ opacity:.3; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-4px);} }

.chx-chips{
  display:flex; flex-wrap:wrap; gap:7px; padding:0 14px 10px; background:var(--parch-2);
  flex-shrink:0;
}
.chx-chips button{
  border:1px solid var(--rule-2); background:#fff; color:var(--state);
  border-radius:999px; padding:6px 12px; font-size:12.5px; cursor:pointer;
  transition:background .12s ease;
}
.chx-chips button:hover{ background:var(--state-3); }

.chx-form{
  display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--rule);
  background:#fff; flex-shrink:0;
}
.chx-form input{
  flex:1; border:1px solid var(--rule-2); border-radius:8px;
  padding:10px 12px; font:inherit; font-size:14px; color:var(--text);
}
.chx-form input:focus{ outline:2px solid var(--state-2); outline-offset:-1px; border-color:transparent; }
.chx-form button{
  border:none; background:var(--gold); color:#fff; border-radius:8px;
  width:44px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .12s ease; flex-shrink:0;
}
.chx-form button:hover{ background:var(--gold-dk); }
.chx-form button:disabled{ background:var(--rule-2); cursor:default; }
.chx-form button svg{ width:18px; height:18px; }

.chx-note{
  font-size:11px; color:var(--ink-3); text-align:center; padding:0 14px 9px; background:#fff;
  flex-shrink:0;
}

@media (max-width:520px){
  .chx-panel{
    right:0; left:0; bottom:0; width:100%; max-width:100%;
    height:76vh; max-height:76vh; border-radius:14px 14px 0 0;
  }
  .chx-open .chx-fab{ bottom:calc(76vh + 12px); }
}

@media print{ .chx-fab, .chx-panel{ display:none !important; } }