.khai, .khai * { box-sizing: border-box; }
.khai {
  --c: var(--khai-c, #1f6f5c);
  --on: var(--khai-on, #fff);
  position: fixed; bottom: 20px; z-index: 99990;
  font-family: inherit; font-size: 14px; line-height: 1.75; color: #1d2327; direction: rtl; text-align: right;
}
.khai-left { left: 20px; }
.khai-right { right: 20px; }
.khai [hidden] { display: none !important; }
.khai button, .khai textarea, .khai a { font-family: inherit; }
.khai button { cursor: pointer; margin: 0; }
.khai .khai-ic { display: inline-flex; line-height: 0; }

/* دکمه شناور */
.khai-fab {
  width: 58px; height: 58px; border-radius: 50%; border: 0; padding: 0;
  background: var(--c); color: var(--on); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .15s ease;
}
.khai-fab:hover { transform: scale(1.06); }
.khai-fab:focus-visible, .khai-btn:focus-visible, .khai-chip:focus-visible, .khai-send:focus-visible { outline: 3px solid rgba(0,0,0,.35); outline-offset: 2px; }
.khai-open .khai-fab { display: none; }

.khai-teaser {
  position: absolute; bottom: 70px; max-width: 240px; width: max-content;
  background: #fff; color: #1d2327; padding: 10px 14px; border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18); cursor: pointer; animation: khai-pop .25s ease;
}
.khai-left .khai-teaser { left: 0; }
.khai-right .khai-teaser { right: 0; }

/* پنجره */
.khai-panel {
  width: 380px; max-width: calc(100vw - 24px); height: 590px; max-height: calc(100vh - 40px);
  background: #fff; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 12px 48px rgba(0,0,0,.28); animation: khai-pop .2s ease;
}
.khai-head {
  background: var(--c); color: var(--on); padding: 12px 14px; display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
}
.khai-avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.khai-avatar svg { width: 22px; height: 22px; }
.khai-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.khai-title b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.khai-title small { font-size: 11.5px; opacity: .85; }
.khai-actions { display: flex; gap: 2px; }
.khai-btn { background: transparent; border: 0; color: inherit; width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 0; }
.khai-btn:hover { background: rgba(255,255,255,.18); }

.khai-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 12px; background: #f6f7f8; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.khai-msg { display: flex; flex-direction: column; max-width: 88%; }
.khai-msg.khai-u { align-self: flex-start; } /* در RTL: ابتدای خط = سمت راست */
.khai-msg.khai-b { align-self: flex-end; max-width: 94%; }
.khai-bubble { padding: 9px 13px; border-radius: 16px; word-wrap: break-word; overflow-wrap: anywhere; }
.khai-u .khai-bubble { background: var(--c); color: var(--on); border-bottom-right-radius: 4px; white-space: pre-wrap; }
.khai-b .khai-bubble { background: #fff; color: #1d2327; border: 1px solid #e3e5e8; border-bottom-left-radius: 4px; }
.khai-err .khai-bubble { background: #fff4f4; border-color: #f1c4c4; color: #8a1f1f; }
.khai-bubble a { color: var(--c); text-decoration: underline; }
.khai-u .khai-bubble a { color: var(--on); }
.khai-bubble a.khai-url { direction: ltr; unicode-bidi: isolate; display: inline-block; max-width: 100%; overflow-wrap: anywhere; }

.khai-typing { display: flex; gap: 4px; padding: 13px 16px; }
.khai-typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa0a6; animation: khai-bounce 1.2s infinite ease-in-out; }
.khai-typing i:nth-child(2) { animation-delay: .15s; }
.khai-typing i:nth-child(3) { animation-delay: .3s; }

/* کارت محصول */
.khai-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.khai-card {
  display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid #e3e5e8; border-radius: 12px;
  padding: 8px; text-decoration: none !important; color: inherit !important; transition: border-color .15s, box-shadow .15s;
}
.khai-card:hover { border-color: var(--c); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.khai-card img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: #eee; }
.khai-card-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.khai-card-name { font-weight: 600; font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.khai-card-price { font-size: 12.5px; color: #3c434a; }
.khai-badge { font-size: 11px; padding: 0 8px; border-radius: 99px; line-height: 20px; }
.khai-badge.ok { background: #e6f4ea; color: #137333; }
.khai-badge.no { background: #fdecea; color: #b3261e; }

.khai-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; background: #f6f7f8; flex: 0 0 auto; }
.khai-chip { background: #fff; border: 1px solid var(--c); color: var(--c); border-radius: 99px; padding: 4px 12px; font-size: 13px; }
.khai-chip:hover { background: var(--c); color: var(--on); }

.khai-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; background: #f6f7f8; flex: 0 0 auto; }
.khai-form textarea {
  flex: 1; resize: none; border: 1px solid #d0d4d9; border-radius: 14px; padding: 9px 12px; font-size: 14px; line-height: 1.6;
  background: #fff; color: #1d2327; max-height: 110px; min-height: 40px; margin: 0; box-shadow: none; direction: rtl;
}
.khai-form textarea:focus { outline: 2px solid var(--c); outline-offset: -1px; border-color: transparent; }
.khai-send { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--c); color: var(--on); display: flex; align-items: center; justify-content: center; padding: 0; flex: 0 0 auto; }
.khai-send:disabled, .khai-form textarea:disabled { opacity: .55; cursor: not-allowed; }
.khai-note { font-size: 11px; color: #6b7076; text-align: center; padding: 0 12px 8px; background: #f6f7f8; flex: 0 0 auto; }

@keyframes khai-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes khai-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-5px); opacity: 1; } }

@media (max-width: 520px) {
  .khai { bottom: 14px; }
  .khai-left { left: 14px; } .khai-right { right: 14px; }
  .khai-open { left: 0 !important; right: 0 !important; bottom: 0 !important; top: 0; }
  .khai-open .khai-panel { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .khai-form textarea { font-size: 16px; } /* جلوگیری از زوم iOS */
}
@media (prefers-reduced-motion: reduce) {
  .khai *, .khai { animation: none !important; transition: none !important; }
}