/* sales-bot.css -- the academy's assistant (BOT1). The button is the academy's own
   mark (the header's logo square, its dot breathing as there) on a dark square, a
   small orange chat sign at its corner and "تواصل معنا" beside it, in WhatsApp's old
   place (it went, 9ef3e22). Nothing of Contrix (owner). The window speaks the menu
   panel's language (.nav-menu: its ground, line and corners); its buttons are the site's .btn. */
.sb-float { position: fixed; bottom: 22px; inset-inline-start: 22px; z-index: 40; width: 60px; height: 60px; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: rgba(20,20,22,.92); cursor: pointer; display: grid; place-items: center; box-shadow: 0 16px 40px rgba(0,0,0,.45); transition: border-color .2s; }
.sb-float:hover { border-color: var(--accent); }
.sb-mark { width: 40px; height: 40px; }
.sb-mark .lg-w { fill: #fff; }
.sb-mark .lg-o { fill: var(--accent); }
.sb-mark .lg-dot { animation: rec 1.5s cubic-bezier(.445, 0, .55, .95) infinite; }
.sb-badge { position: absolute; top: -7px; inset-inline-end: -7px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 0 0 2px #000; }
.sb-ico { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.sb-tag { position: absolute; inset-inline-start: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 4px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(20,20,22,.92); color: var(--text); font-family: var(--font); font-size: 14px; font-weight: 700; line-height: 1.8; }
.sb-float[aria-expanded="true"] .sb-tag { display: none; }
.sb-wa { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; margin-inline-start: auto; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-family: var(--font); font-size: 13px; }
.sb-wa:hover { border-color: var(--accent); }
.sb-wa svg { width: 15px; height: 15px; fill: #25d366; }

.sb-panel { position: fixed; bottom: 94px; inset-inline-start: 22px; z-index: 46; width: min(370px, calc(100vw - 32px)); height: min(540px, calc(100vh - 134px)); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: #141416; box-shadow: 0 20px 40px rgba(0,0,0,.45); overflow: hidden; }
.sb-panel[hidden] { display: none; }
.sb-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--white); font-family: "Arboria", sans-serif; font-weight: 700; font-size: 15px; }
.sb-close { background: none; border: 0; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.sb-close:hover { color: var(--accent); }
.sb-log { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.sb-msg { margin: 0; max-width: 88%; font-size: 15px; line-height: 1.7; white-space: pre-line; }
.sb-bot { align-self: flex-start; color: var(--text); }
.sb-me { align-self: flex-end; padding: 8px 14px; border-radius: 14px; background: var(--bg-2); color: var(--white); }
.sb-spark { position: absolute; fill: var(--accent); filter: drop-shadow(0 0 4px rgba(255,62,0,.8)); animation: ai-twinkle 2.4s ease-in-out infinite; }
.sb-wait { position: relative; width: 22px; height: 22px; }
.sb-wait .sb-spark { top: 4px; right: auto; inset-inline-start: 0; width: 14px; height: 14px; }
.sb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-actions .btn { height: 38px; padding: 0 18px; font-size: 14px; }
.sb-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.sb-input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--white); font: inherit; font-size: 15px; }
.sb-input:focus { outline: none; border-color: var(--accent); }
.sb-send { width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; background: var(--accent); cursor: pointer; display: grid; place-items: center; }
.sb-send svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; transform: scaleX(-1); }
html[dir="ltr"] .sb-send svg { transform: none; }
.sb-input:disabled, .sb-send:disabled { opacity: .45; cursor: default; }

@media (max-width: 900px) {
  .buy-bar:not([hidden]) ~ .sb-float { bottom: 78px; }
  .sb-tag { display: none; }
  .sb-panel { inset-inline: 16px; bottom: 94px; width: auto; height: min(540px, calc(100vh - 116px)); }
  .buy-bar:not([hidden]) ~ .sb-panel { bottom: 150px; height: min(540px, calc(100vh - 172px)); }
}
@media (prefers-reduced-motion: reduce) { .sb-mark .lg-dot, .sb-spark { animation: none; } }