/* Smart chat assistant widget */
.zb { --zb-p: #0b8f7a; --zb-p2: #087563; --zb-bg: #fff; --zb-soft: #f3f6f8; --zb-line: #e3e9ee; --zb-ink: #13212e; --zb-mute: #66788a; --zb-user: #0b8f7a;
  position: fixed; inset-inline-end: 22px; bottom: 22px; z-index: 70; font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; color: var(--zb-ink); }
[data-theme="dark"] .zb { --zb-bg: #0f1d2b; --zb-soft: #16283a; --zb-line: #22384d; --zb-ink: #e6eef5; --zb-mute: #95a8ba; --zb-user: #0f9c85; }
.zb.zb-above-wa { bottom: 92px; }
.zb-launch { width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; background: linear-gradient(135deg, var(--zb-p), #19b39a); color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 25px -6px rgba(11, 143, 122, .6); transition: transform .2s; position: relative; margin-inline-start: auto; }
.zb-launch:hover { transform: scale(1.07); }
.zb-launch svg { width: 28px; height: 28px; }
.zb-badge { position: absolute; top: -2px; inset-inline-end: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #e5484d; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; }
.zb-badge[hidden] { display: none; }
.zb-hint { position: absolute; bottom: 68px; inset-inline-end: 0; white-space: nowrap; background: var(--zb-bg); color: var(--zb-ink); border: 1px solid var(--zb-line); padding: 9px 14px; border-radius: 14px; font-size: 14px; font-weight: 500;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .25); cursor: pointer; animation: zb-in .3s ease; }
.zb-panel { position: absolute; bottom: 70px; inset-inline-end: 0; width: 370px; max-width: calc(100vw - 32px); height: min(590px, calc(100vh - 190px)); background: var(--zb-bg); border: 1px solid var(--zb-line);
  border-radius: 20px; box-shadow: 0 24px 60px -18px rgba(10, 30, 50, .45); display: flex; flex-direction: column; overflow: hidden; animation: zb-in .22s ease; }
.zb-panel[hidden], .zb-hint[hidden] { display: none; }
@keyframes zb-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.zb-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px; background: linear-gradient(135deg, var(--zb-p), #14a58d); color: #fff; }
.zb-avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .2); display: grid; place-items: center; font-weight: 700; font-size: 19px; flex: none; }
.zb-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.zb-who strong { font-size: 15.5px; }
.zb-status { font-size: 12.5px; opacity: .92; display: flex; align-items: center; gap: 6px; }
.zb-status i { width: 8px; height: 8px; border-radius: 50%; background: #7dffb0; box-shadow: 0 0 0 3px rgba(125, 255, 176, .25); }
.zb-icon { background: rgba(255, 255, 255, .14); border: 0; color: #fff; width: 32px; height: 32px; border-radius: 10px; cursor: pointer; display: grid; place-items: center; flex: none; }
.zb-icon:hover { background: rgba(255, 255, 255, .26); }
.zb-icon svg { width: 18px; height: 18px; }
.zb-body { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px; background: var(--zb-soft); overscroll-behavior: contain; }
.zb-msg { display: flex; flex-direction: column; max-width: 86%; animation: zb-in .2s ease; }
.zb-assistant, .zb-staff { align-self: flex-start; }
.zb-user { align-self: flex-end; }
.zb-bubble { padding: 10px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.65; overflow-wrap: anywhere; }
.zb-assistant .zb-bubble, .zb-staff .zb-bubble { background: var(--zb-bg); border: 1px solid var(--zb-line); border-start-start-radius: 5px; }
.zb-staff .zb-bubble { border-color: #f2c14e; background: color-mix(in srgb, #ffb020 10%, var(--zb-bg)); }
.zb-user .zb-bubble { background: var(--zb-user); color: #fff; border-end-end-radius: 5px; }
.zb-from { font-size: 11.5px; color: var(--zb-mute); margin: 0 4px 3px; font-weight: 600; }
.zb-error .zb-bubble { border-color: #f1b0b3; color: #b3261e; }
.zb-bubble p { margin: 0; } .zb-bubble p + p, .zb-bubble p + ul, .zb-bubble p + ol, .zb-bubble ul + p, .zb-bubble ol + p { margin-top: 6px; }
.zb-bubble ul, .zb-bubble ol { margin: 4px 0; padding-inline-start: 20px; }
.zb-bubble a { color: var(--zb-p); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
[data-theme="dark"] .zb-bubble a { color: #3fd0b5; }
.zb-typing .zb-bubble { display: flex; gap: 4px; padding: 13px 15px; }
.zb-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--zb-mute); animation: zb-dot 1.2s infinite; }
.zb-typing span:nth-child(2) { animation-delay: .15s; } .zb-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes zb-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.zb-note { align-self: center; font-size: 12px; color: var(--zb-mute); background: var(--zb-bg); border: 1px solid var(--zb-line); border-radius: 20px; padding: 3px 10px; }
.zb-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 4px; background: var(--zb-soft); }
.zb-chips[hidden] { display: none; }
.zb-chips button { border: 1px solid color-mix(in srgb, var(--zb-p) 40%, var(--zb-line)); background: var(--zb-bg); color: var(--zb-p); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
[data-theme="dark"] .zb-chips button { color: #3fd0b5; }
.zb-chips button:hover { background: color-mix(in srgb, var(--zb-p) 10%, var(--zb-bg)); }
.zb-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--zb-line); background: var(--zb-bg); }
.zb-form textarea { flex: 1; resize: none; border: 1px solid var(--zb-line); border-radius: 14px; padding: 10px 12px; font: inherit; font-size: 14.5px; line-height: 1.45; background: var(--zb-soft); color: var(--zb-ink); max-height: 120px; }
.zb-form textarea:focus { outline: 2px solid color-mix(in srgb, var(--zb-p) 50%, transparent); border-color: transparent; }
.zb-send { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 0; background: var(--zb-p); color: #fff; cursor: pointer; display: grid; place-items: center; }
.zb-send:hover { background: var(--zb-p2); }
.zb-send svg { width: 19px; height: 19px; }
[dir="rtl"] .zb-send svg { transform: scaleX(-1); }
.zb-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 14px 10px; background: var(--zb-bg); font-size: 12.5px; }
.zb-human { background: none; border: 0; padding: 2px 0; color: var(--zb-mute); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.zb-human:hover { color: var(--zb-p); }
.zb-wa { color: #1a9e4f; font-weight: 700; }
.zb-wa[hidden] { display: none; }
@media (max-width: 520px) {
  .zb { inset-inline-end: 14px; bottom: 14px; }
  .zb.zb-above-wa { bottom: 82px; }
  .zb.zb-open { inset: 0; }
  .zb.zb-open .zb-launch { display: none; }
  .zb-panel { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; border-radius: 0; border: 0; bottom: 0; }
}
@media print { .zb { display: none; } }