.aislp-language-switcher{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin:0 0 10px;font-size:11px;direction:ltr}
.aislp-language-switcher__label{color:var(--aislp-fg-3,#94a3b8);margin-right:3px}
.aislp-language-switcher a{border:1px solid var(--aislp-border,rgba(100,116,139,.2));background:transparent;color:var(--aislp-fg-2,#64748b);border-radius:999px;padding:4px 8px;font:inherit;text-decoration:none;cursor:pointer;transition:all .18s ease}
.aislp-language-switcher a:hover,.aislp-language-switcher a:focus-visible{color:var(--aislp-primary,#6d28d9);border-color:var(--aislp-primary,#6d28d9);background:rgba(109,40,217,.06);outline:none}
.aislp-language-switcher a.is-active{color:var(--aislp-primary,#6d28d9);font-weight:700;border-color:var(--aislp-primary,#6d28d9)}

/* ==========================================================================
   AI Smart Login Pro v4 — Frontend design system
   ==========================================================================
   Tokens live in :root. Components consume only tokens — no hard-coded
   colors. Light mode only. Fully RTL-first, LTR fallback via [dir="ltr"].
   ========================================================================== */

:root {
  /* Brand */
  --aislp-primary:        #6d28d9;
  --aislp-primary-2:      #8b5cf6;
  --aislp-accent:         #f59e0b;
  --aislp-success:        #10b981;
  --aislp-danger:         #ef4444;
  --aislp-warning:        #f59e0b;

  /* Surfaces (light) */
  --aislp-bg:             #f6f7fb;
  --aislp-surface:        rgba(255,255,255,.72);
  --aislp-surface-solid:  #ffffff;
  --aislp-elev-1:         0 1px 2px rgba(15,23,42,.06), 0 8px 24px -12px rgba(15,23,42,.12);
  --aislp-elev-2:         0 4px 12px rgba(15,23,42,.08), 0 24px 60px -18px rgba(15,23,42,.25);
  --aislp-elev-glow:      0 0 0 6px color-mix(in oklab, var(--aislp-primary) 15%, transparent);

  /* Text */
  --aislp-fg:             #0f172a;
  --aislp-fg-2:           #475569;
  --aislp-fg-3:           #94a3b8;
  --aislp-fg-invert:      #ffffff;

  /* Lines */
  --aislp-border:         color-mix(in oklab, #0f172a 10%, transparent);
  --aislp-border-strong:  color-mix(in oklab, #0f172a 18%, transparent);
  --aislp-focus:          color-mix(in oklab, var(--aislp-primary) 45%, transparent);

  /* Radius / spacing */
  --aislp-r-sm: 8px;
  --aislp-r:    16px;
  --aislp-r-lg: 22px;
  --aislp-r-xl: 28px;

  /* Motion */
  --aislp-ease:      cubic-bezier(.2,.8,.2,1);
  --aislp-dur-fast:  .14s;
  --aislp-dur:       .28s;
  --aislp-dur-slow:  .5s;

  /* Type */
  --aislp-font: "Tajawal", "Cairo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Gradients */
  --aislp-grad-hero:    radial-gradient(120% 120% at 10% 10%, color-mix(in oklab, var(--aislp-primary) 22%, transparent) 0%, transparent 55%),
                        radial-gradient(90% 90% at 90% 20%, color-mix(in oklab, var(--aislp-accent) 22%, transparent) 0%, transparent 55%),
                        linear-gradient(180deg, var(--aislp-bg), var(--aislp-bg));
  --aislp-grad-primary: linear-gradient(135deg, var(--aislp-primary), var(--aislp-primary-2));
}

/* ==========================================================================
   Root wrapper
   ========================================================================== */

.aislp {
  font-family: var(--aislp-font);
  color: var(--aislp-fg);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.aislp *, .aislp *::before, .aislp *::after { box-sizing: border-box; }
.aislp[dir="ltr"] { direction: ltr; }

/* ==========================================================================
   Layout — split hero
   ========================================================================== */

.aislp-shell {
  display: block;
  /*
   * vw = نسبة من عرض الشاشة مباشرة (ليس الحاوية الأب)
   * هذا يضمن العرض الصحيح حتى داخل WooCommerce columns
   */
  width: min(96vw, 540px);
  margin: 0 auto;
  box-sizing: border-box;
}

.aislp-card {
  display: block;
  /*
   * ✅ vw = viewport width — دائماً نسبة من الشاشة مهما كانت الحاوية
   *   Stripe / Shopify / GitHub يستخدمون نفس الأسلوب
   *   — هاتف 375px : 95vw = 356px   ✓  (حواف 9px كل جانب)
   *   — هاتف 412px : 95vw = 391px   ✓
   *   — تابلت 768px: 95vw = 730px → محدود بـ 500px  ✓
   *   — ديسك توب   : 95vw = كبير → محدود بـ 500px   ✓
   */
  width: min(95vw, 500px);
  margin: 28px auto;
  background: var(--aislp-surface);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--aislp-border);
  border-radius: var(--aislp-r-xl);
  box-shadow: var(--aislp-elev-2);
  padding: clamp(20px, 5vw, 48px) clamp(20px, 5.5vw, 52px);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.aislp-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(140deg, color-mix(in oklab, var(--aislp-primary) 6%, transparent), transparent 40%);
  pointer-events: none;
}


/* ==========================================================================
   Role selector
   ========================================================================== */

.aislp-roles {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px;
}
.aislp-role {
  cursor:pointer;
  border: 1.5px solid var(--aislp-border);
  border-radius: var(--aislp-r);
  padding: 16px;
  background: var(--aislp-surface-solid);
  display:flex; flex-direction:column; gap:6px;
  transition: transform var(--aislp-dur) var(--aislp-ease), border-color var(--aislp-dur), box-shadow var(--aislp-dur), background var(--aislp-dur);
  position: relative; text-align: start;
}
.aislp-role:hover { transform: translateY(-2px); border-color: var(--aislp-border-strong); }
.aislp-role.is-active {
  border-color: transparent;
  background: linear-gradient(var(--aislp-surface-solid), var(--aislp-surface-solid)) padding-box,
              var(--aislp-grad-primary) border-box;
  box-shadow: var(--aislp-elev-1), var(--aislp-elev-glow);
}
.aislp-role__icon {
  width: 40px; height: 40px; border-radius: 12px;
  display:grid; place-items:center;
  background: color-mix(in oklab, var(--aislp-primary) 12%, transparent);
  color: var(--aislp-primary);
}
.aislp-role__icon svg { width:22px; height:22px; }
.aislp-role__title { font-weight: 700; font-size: 15px; color: var(--aislp-fg); }
.aislp-role__desc  { font-size: 12px; color: var(--aislp-fg-2); }

/* ==========================================================================
   Tabs
   ========================================================================== */

.aislp-tabs {
  display:flex; gap:4px; padding:4px;
  background: color-mix(in oklab, var(--aislp-fg) 4%, transparent);
  border-radius: 14px; margin-bottom: 20px; position: relative;
}
.aislp-tab {
  flex:1; padding:10px 14px; border:0; background:transparent; cursor:pointer;
  font-weight:600; font-size:14px; color:var(--aislp-fg-2); border-radius:10px;
  transition: color var(--aislp-dur);
}
.aislp-tab.is-active { color: var(--aislp-fg); background: var(--aislp-surface-solid); box-shadow: var(--aislp-elev-1); }

/* Stepper */
.aislp-stepper { display:flex; align-items:center; gap:8px; margin-bottom: 18px; }
.aislp-step {
  flex:1; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--aislp-fg-3);
}
.aislp-step__dot {
  width: 26px; height: 26px; border-radius:50%; display:grid; place-items:center;
  background: color-mix(in oklab, var(--aislp-fg) 8%, transparent); color: var(--aislp-fg-2);
  font-weight: 700; font-size: 12px; transition: all var(--aislp-dur);
}
.aislp-step.is-active .aislp-step__dot { background: var(--aislp-grad-primary); color:#fff; box-shadow: var(--aislp-elev-glow); }
.aislp-step.is-done   .aislp-step__dot { background: var(--aislp-success); color:#fff; }
.aislp-step.is-active .aislp-step__label,
.aislp-step.is-done   .aislp-step__label { color: var(--aislp-fg); }
.aislp-step__line { flex:1; height:2px; background: color-mix(in oklab, var(--aislp-fg) 8%, transparent); }
.aislp-step.is-done ~ .aislp-step .aislp-step__line { }

/* ==========================================================================
   Form controls
   ========================================================================== */

.aislp-field { margin-bottom: 14px; }
.aislp-label { display:block; font-size:13px; font-weight:600; color: var(--aislp-fg-2); margin-bottom:6px; }
.aislp-input, .aislp-select, .aislp-textarea {
  width: 100%;
  background: var(--aislp-surface-solid);
  border: 1.5px solid var(--aislp-border);
  border-radius: 14px;
  padding: 12px 14px;
  font: inherit; color: var(--aislp-fg);
  transition: border-color var(--aislp-dur), box-shadow var(--aislp-dur), background var(--aislp-dur);
  outline: 0;
}
.aislp-input::placeholder, .aislp-textarea::placeholder { color: var(--aislp-fg-3); }
.aislp-input:focus, .aislp-select:focus, .aislp-textarea:focus {
  border-color: var(--aislp-primary);
  box-shadow: 0 0 0 4px var(--aislp-focus);
}

/* Floating label variant */
.aislp-float { position: relative; }
.aislp-float .aislp-input { padding-top: 20px; padding-bottom: 8px; }
.aislp-float .aislp-label {
  position: absolute; top: 12px; inset-inline-start: 14px; margin: 0; pointer-events: none;
  color: var(--aislp-fg-3); font-weight: 500; font-size: 14px;
  transition: transform var(--aislp-dur) var(--aislp-ease), color var(--aislp-dur), font-size var(--aislp-dur);
}
.aislp-float .aislp-input:focus + .aislp-label,
.aislp-float .aislp-input:not(:placeholder-shown) + .aislp-label {
  transform: translateY(-10px); font-size: 11px; color: var(--aislp-primary);
}

/* Password strength meter */
.aislp-pw { height: 4px; background: color-mix(in oklab, var(--aislp-fg) 8%, transparent); border-radius: 999px; margin-top: 6px; overflow: hidden; }
.aislp-pw__bar { height:100%; width:0%; background: var(--aislp-danger); transition: width var(--aislp-dur), background var(--aislp-dur); }
.aislp-pw[data-level="1"] .aislp-pw__bar { width: 25%; background: var(--aislp-danger); }
.aislp-pw[data-level="2"] .aislp-pw__bar { width: 50%; background: var(--aislp-warning); }
.aislp-pw[data-level="3"] .aislp-pw__bar { width: 75%; background: #22c55e; }
.aislp-pw[data-level="4"] .aislp-pw__bar { width: 100%; background: var(--aislp-success); }

/* Buttons */
.aislp-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width: 100%; padding: 13px 16px; border:0; cursor:pointer;
  font: inherit; font-weight: 700; font-size: 15px; color: #fff;
  background: var(--aislp-grad-primary);
  border-radius: 14px; box-shadow: var(--aislp-elev-1);
  transition: transform var(--aislp-dur-fast) var(--aislp-ease), box-shadow var(--aislp-dur), filter var(--aislp-dur);
}
.aislp-btn:hover  { transform: translateY(-1px); box-shadow: var(--aislp-elev-2); filter: brightness(1.05); }
.aislp-btn:active { transform: translateY(0); filter: brightness(.98); }
.aislp-btn[disabled] { opacity:.55; cursor:not-allowed; transform:none; }

.aislp-btn--ghost {
  background: var(--aislp-surface-solid); color: var(--aislp-fg);
  border: 1.5px solid var(--aislp-border-strong); box-shadow: none;
}
.aislp-btn--ghost:hover { background: color-mix(in oklab, var(--aislp-fg) 4%, var(--aislp-surface-solid)); }

.aislp-btn--icon { width: auto; padding: 10px 14px; font-size: 14px; }

/* Social row — responsive columns */
.aislp-social { display:grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; margin-top: 10px; }
.aislp-social .aislp-btn--ghost { padding: 12px; }
.aislp-social svg { width: 18px; height: 18px; }

/* Divider */
.aislp-divider { display:flex; align-items:center; gap:12px; margin: 18px 0; color: var(--aislp-fg-3); font-size: 12px; }
.aislp-divider::before, .aislp-divider::after { content:""; flex:1; height:1px; background: var(--aislp-border); }

/* Alerts */
.aislp-alert {
  padding: 12px 14px; border-radius: 12px; font-size: 14px;
  border: 1px solid var(--aislp-border); background: var(--aislp-surface-solid);
  display:flex; gap:10px; align-items:flex-start; margin-bottom: 12px;
}
.aislp-alert--ok    { border-color: color-mix(in oklab, var(--aislp-success) 40%, transparent); background: color-mix(in oklab, var(--aislp-success) 8%, var(--aislp-surface-solid)); }
.aislp-alert--warn  { border-color: color-mix(in oklab, var(--aislp-warning) 40%, transparent); background: color-mix(in oklab, var(--aislp-warning) 8%, var(--aislp-surface-solid)); }
.aislp-alert--error { border-color: color-mix(in oklab, var(--aislp-danger)  40%, transparent); background: color-mix(in oklab, var(--aislp-danger)  8%, var(--aislp-surface-solid)); }

/* OTP inputs — flex بدل عرض ثابت للتكيّف مع جميع الشاشات */
.aislp-otp { display:flex; gap:clamp(4px,1.5%,10px); justify-content:center; direction: ltr; }
.aislp-otp input {
  flex: 1;
  min-width: 0;
  max-width: 52px;
  height: clamp(46px, 12vw, 58px);
  text-align:center;
  font-size: clamp(18px, 4.5vw, 24px);
  font-weight: 700;
  border: 1.5px solid var(--aislp-border);
  border-radius: 12px;
  background: var(--aislp-surface-solid);
  color: var(--aislp-fg);
  transition: border-color var(--aislp-dur), transform var(--aislp-dur-fast);
}
.aislp-otp input:focus { outline:0; border-color: var(--aislp-primary); box-shadow: 0 0 0 4px var(--aislp-focus); transform: scale(1.04); }

/* Chat (AI assistant) */
.aislp-chat { display:flex; flex-direction:column; height: 460px; border-radius: var(--aislp-r); border:1px solid var(--aislp-border); background: var(--aislp-surface-solid); }
.aislp-chat__log { flex:1; padding: 14px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.aislp-msg { max-width: 80%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.6; word-wrap: break-word; }
.aislp-msg--bot  { align-self: flex-start; background: color-mix(in oklab, var(--aislp-primary) 8%, var(--aislp-surface-solid)); border: 1px solid var(--aislp-border); border-bottom-inline-start-radius: 4px; }
.aislp-msg--user { align-self: flex-end;   background: var(--aislp-grad-primary); color:#fff; border-bottom-inline-end-radius: 4px; }
.aislp-typing { display:inline-flex; gap:4px; padding: 10px 14px; }
.aislp-typing span { width:6px; height:6px; border-radius:50%; background: var(--aislp-fg-3); animation: aislp-bounce 1s infinite; }
.aislp-typing span:nth-child(2) { animation-delay: .15s; }
.aislp-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes aislp-bounce { 0%,80%,100% { transform:translateY(0); opacity:.5 } 40% { transform:translateY(-4px); opacity:1 } }

.aislp-chat__form { display:flex; gap:8px; padding: 10px; border-top:1px solid var(--aislp-border); background: var(--aislp-surface); }
.aislp-chat__form .aislp-input { border-radius: 999px; }
.aislp-chat__form .aislp-btn { width:auto; border-radius: 999px; padding: 10px 18px; }

/* Chips (suggested prompts) */
.aislp-chips { display:flex; flex-wrap:wrap; gap:6px; padding: 0 14px 12px; }
.aislp-chip {
  padding: 6px 12px; border-radius: 999px; font-size: 12px;
  border:1px solid var(--aislp-border); background: var(--aislp-surface-solid); color: var(--aislp-fg-2); cursor:pointer;
  transition: transform var(--aislp-dur-fast), color var(--aislp-dur), border-color var(--aislp-dur);
}
.aislp-chip:hover { color: var(--aislp-fg); border-color: var(--aislp-border-strong); transform: translateY(-1px); }

/* Vendor store name suggestions */
.aislp-suggest { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.aislp-suggest__item {
  padding: 8px 12px; border-radius: 10px; font-size: 13px; cursor:pointer;
  background: var(--aislp-surface-solid); border:1px solid var(--aislp-border); color: var(--aislp-fg);
  display:flex; align-items:center; gap:6px;
}
.aislp-suggest__item[data-available="false"] { opacity:.4; text-decoration: line-through; cursor:not-allowed; }
.aislp-suggest__item .dot { width:6px; height:6px; border-radius:50%; background: var(--aislp-success); }
.aislp-suggest__item[data-available="false"] .dot { background: var(--aislp-danger); }

/* Risk meter */
.aislp-risk { display:flex; align-items:center; gap:10px; font-size: 12px; color: var(--aislp-fg-2); margin-top: 8px; }
.aislp-risk__bar { flex:1; height:6px; background: color-mix(in oklab, var(--aislp-fg) 8%, transparent); border-radius: 999px; overflow: hidden; }
.aislp-risk__fill { height:100%; width: 0%; transition: width var(--aislp-dur-slow), background var(--aislp-dur); }

/* Onboarding */
.aislp-onb { display:flex; flex-direction:column; gap:10px; }
.aislp-onb__item {
  display:flex; align-items:center; gap:12px; padding: 12px; border-radius: 12px;
  border:1px solid var(--aislp-border); background: var(--aislp-surface-solid);
}
.aislp-onb__check {
  width: 22px; height: 22px; border-radius: 50%; border:2px solid var(--aislp-border-strong);
  display:grid; place-items:center; color: transparent; transition: all var(--aislp-dur);
}
.aislp-onb__item.is-done .aislp-onb__check { background: var(--aislp-success); border-color: var(--aislp-success); color:#fff; }

/* Utility: sr-only, honeypot */
.aislp-sr {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip: rect(0,0,0,0); border:0;
}
.aislp-hp { position:absolute !important; left:-9999px !important; opacity:0 !important; height:0 !important; }

/* Motion: reduced */
@media (prefers-reduced-motion: reduce) {
  .aislp *, .aislp *::before, .aislp *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Skeleton */
.aislp-skel { background: linear-gradient(90deg, color-mix(in oklab, var(--aislp-fg) 6%, transparent), color-mix(in oklab, var(--aislp-fg) 12%, transparent), color-mix(in oklab, var(--aislp-fg) 6%, transparent)); background-size: 200% 100%; animation: aislp-skel 1.4s infinite; border-radius: 8px; }
@keyframes aislp-skel { to { background-position: -200% 0; } }

/* =====================================================================
 * AI Concierge v5 — chat surface
 * ===================================================================== */
.aislp-ai {
  display:flex; flex-direction:column; height: 560px;
  border:1px solid var(--aislp-border); border-radius: var(--aislp-r);
  background: var(--aislp-surface-solid); overflow:hidden;
}
.aislp-ai__head {
  display:flex; align-items:center; gap:12px;
  padding: 12px 14px; border-bottom:1px solid var(--aislp-border);
  background: linear-gradient(180deg, color-mix(in oklab, var(--aislp-primary) 8%, transparent), transparent);
}
.aislp-ai__avatar {
  position:relative; width:40px; height:40px; border-radius:50%;
  background: var(--aislp-grad-primary); color:#fff;
  display:grid; place-items:center; flex:0 0 auto; overflow:hidden;
}
.aislp-ai__avatar img { width:100%; height:100%; object-fit:cover; }
.aislp-ai__pulse {
  position:absolute; right:-2px; bottom:-2px; width:12px; height:12px; border-radius:50%;
  background: var(--aislp-success, #10b981); border:2px solid var(--aislp-surface-solid);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--aislp-success, #10b981) 60%, transparent);
  animation: aislp-pulse 1.8s infinite;
}
@keyframes aislp-pulse { 70% { box-shadow: 0 0 0 8px transparent; } }
.aislp-ai__meta { display:flex; flex-direction:column; line-height:1.2; flex:1; min-width:0; }
.aislp-ai__meta b { font-size:14px; color: var(--aislp-fg); }
.aislp-ai__meta span { font-size:11px; color: var(--aislp-fg-3); }
.aislp-ai__reset {
  border:1px solid var(--aislp-border); background:transparent; color: var(--aislp-fg-2);
  width:32px; height:32px; border-radius:10px; cursor:pointer; display:grid; place-items:center;
  transition: all .18s ease;
}
.aislp-ai__reset:hover { color: var(--aislp-fg); border-color: var(--aislp-border-strong); transform: rotate(-25deg); }

.aislp-ai__progress {
  display:flex; gap:8px; padding: 10px 12px; overflow-x:auto;
  border-bottom:1px solid var(--aislp-border);
  background: color-mix(in oklab, var(--aislp-primary) 3%, transparent);
}
.aislp-ai__prog-item {
  display:inline-flex; align-items:center; gap:6px;
  padding: 6px 10px; border-radius:999px;
  border:1px solid var(--aislp-border);
  font-size:12px; color: var(--aislp-fg-3);
  white-space:nowrap; background: var(--aislp-surface-solid);
  transition: all .25s ease;
}
.aislp-ai__prog-item .dot {
  width:8px; height:8px; border-radius:50%;
  background: var(--aislp-fg-3); opacity:.4; transition: all .25s ease;
}
.aislp-ai__prog-item b { font-weight:600; color: var(--aislp-fg-2); font-size:12px; max-width:110px; overflow:hidden; text-overflow:ellipsis; }
.aislp-ai__prog-item.is-done {
  color: var(--aislp-fg); border-color: color-mix(in oklab, var(--aislp-success, #10b981) 50%, var(--aislp-border));
  background: color-mix(in oklab, var(--aislp-success, #10b981) 8%, var(--aislp-surface-solid));
}
.aislp-ai__prog-item.is-done .dot { background: var(--aislp-success, #10b981); opacity:1; box-shadow: 0 0 8px color-mix(in oklab, var(--aislp-success, #10b981) 60%, transparent); }
.aislp-ai__prog-item.is-pulse { animation: aislp-progpulse .9s ease; }
@keyframes aislp-progpulse { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

.aislp-ai__log { flex:1; padding: 14px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; scroll-behavior: smooth; }

.aislp-ai__chips { display:flex; flex-wrap:wrap; gap:6px; padding: 0 12px 10px; }
.aislp-ai__chips:empty { display:none; }

.aislp-ai__composer {
  display:flex; align-items:flex-end; gap:8px;
  padding: 10px 12px; border-top:1px solid var(--aislp-border);
  background: var(--aislp-surface);
}
.aislp-ai__composer .aislp-input { border-radius: 22px; flex:1; }

/* Textarea auto-expand — replaces the fixed single-line input */
.aislp-ai__textarea {
  resize: none;
  min-height: 44px;
  max-height: 160px;
  overflow-y: auto;
  line-height: 1.6;
  padding: 11px 16px;
  border-radius: 22px;
  font-size: 15px;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge */
}
.aislp-ai__textarea::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.aislp-ai__textarea::placeholder { color: var(--aislp-fg-3); }

.aislp-ai__send { width:44px; height:44px; border-radius:50%; padding:0; display:grid; place-items:center; flex-shrink:0; }
.aislp-ai__mic  { flex-shrink: 0; }
.aislp-ai__mic {
  width:44px; height:44px; border-radius:50%; padding:0; display:grid; place-items:center;
  background:transparent; border:1px solid var(--aislp-border); color: var(--aislp-fg-2); cursor:pointer;
  transition: all .18s ease;
}
.aislp-ai__mic:hover { color: var(--aislp-fg); border-color: var(--aislp-border-strong); }
.aislp-ai__mic.is-live { color:#fff; background: var(--aislp-danger, #ef4444); border-color: transparent;
  animation: aislp-mic 1s infinite; }
@keyframes aislp-mic { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.6);} 50% { box-shadow: 0 0 0 10px rgba(239,68,68,0);} }

.aislp-ai__legal { padding: 8px 14px 12px; font-size:11px; color: var(--aislp-fg-3); text-align:center; }

.aislp-ai__otp-boxes { display:flex; gap:6px; justify-content:center; direction:ltr; }
.aislp-ai__otp-boxes input {
  width:36px; height:44px; text-align:center; font-size:18px; font-weight:700;
  border:1px solid var(--aislp-border); border-radius:10px; background: var(--aislp-surface-solid);
  color: var(--aislp-fg);
}
.aislp-ai__otp-boxes input:focus { outline:none; border-color: var(--aislp-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--aislp-primary) 25%, transparent); }
.aislp-ai__otp-timer { text-align:center; margin-top:8px; font-size:12px; color: var(--aislp-fg-3); }
.aislp-ai__pwbox { max-width: 90%; }

/* Slight enter animation for new bubbles */
.aislp-ai__log .aislp-msg { animation: aislp-bubble .22s ease both; }
.aislp-ai__captcha-message {
  width: min(100%, 430px);
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aislp-ai__captcha-message > strong { color: var(--aislp-fg); }
.aislp-ai__captcha-message > span { color: var(--aislp-fg-2); font-size: 12px; }
.aislp-ai__captcha-message .aislp-captcha { margin: 10px 0 0; }
@keyframes aislp-bubble { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform:none; } }

/* =============================================================
   AI Neural Concierge v6 — additions
   ============================================================= */
.aislp-ai--v6 { position:relative; }
.aislp-ai--v6 .aislp-ai__head { display:flex; align-items:center; gap:12px; padding:12px 14px; }
.aislp-ai__mood { position:absolute; bottom:-4px; right:-4px; font-size:14px; background:var(--aislp-surface-solid); border-radius:50%; padding:2px 4px; box-shadow:var(--aislp-elev-1); }
.aislp-ai__tools { display:flex; gap:6px; margin-inline-start:auto; }
.aislp-ai__tool { background:transparent; border:1px solid var(--aislp-border); color:var(--aislp-fg-2); border-radius:10px; padding:6px; cursor:pointer; transition:var(--aislp-dur) var(--aislp-ease); }
.aislp-ai__tool:hover, .aislp-ai__tool.is-on { background:var(--aislp-primary); color:#fff; border-color:transparent; }

.aislp-ai__proghead { display:flex; align-items:center; gap:14px; padding:0 14px 8px; }
.aislp-ai__ring { position:relative; width:52px; height:52px; flex-shrink:0; }
.aislp-ai__ring svg { transform:rotate(-90deg); width:100%; height:100%; }
.aislp-ai__ring circle { fill:none; stroke-width:4; }
.aislp-ai__ring circle.bg { stroke:var(--aislp-border); }
.aislp-ai__ring circle.fg { stroke:url(#aislpGrad, var(--aislp-primary)); stroke:var(--aislp-primary); stroke-linecap:round; stroke-dasharray:0 200; transition:stroke-dasharray var(--aislp-dur) var(--aislp-ease); }
.aislp-ai__ring b { position:absolute; inset:0; display:grid; place-items:center; font-size:11px; color:var(--aislp-fg-2); }
.aislp-ai__progress { flex:1; display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.aislp-ai__prog-item { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--aislp-fg-3); background:var(--aislp-surface); border:1px solid var(--aislp-border); border-radius:10px; padding:6px 8px; }
.aislp-ai__prog-item .dot { width:6px; height:6px; border-radius:50%; background:var(--aislp-border-strong); }
.aislp-ai__prog-item.is-done { color:var(--aislp-fg); border-color:var(--aislp-primary); }
.aislp-ai__prog-item.is-done .dot { background:var(--aislp-success); box-shadow:0 0 0 3px color-mix(in oklab, var(--aislp-success) 25%, transparent); }
.aislp-ai__prog-item.is-pulse { animation:aislpPulse .9s var(--aislp-ease); }
.aislp-ai__prog-item b { margin-inline-start:auto; font-weight:600; font-size:10px; opacity:.8; }
@keyframes aislpPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08); box-shadow:var(--aislp-elev-glow)} }

.aislp-ai__resume { display:flex; align-items:center; gap:8px; margin:0 14px 8px; padding:8px 12px; background:color-mix(in oklab, var(--aislp-primary) 8%, transparent); border:1px solid color-mix(in oklab, var(--aislp-primary) 30%, transparent); border-radius:12px; font-size:13px; }
.aislp-ai__resume button { margin-inline-start:auto; background:var(--aislp-primary); color:#fff; border:0; border-radius:8px; padding:4px 10px; font-size:12px; cursor:pointer; }
.aislp-ai__resume button + button { background:transparent; color:var(--aislp-fg-2); }

.aislp-ai__otp-head { font-size:12px; color:var(--aislp-fg-2); margin-bottom:6px; }
.aislp-ai__otp-boxes { display:flex; gap:6px; justify-content:center; direction:ltr; }
.aislp-ai__otp-boxes input { width:36px; height:44px; text-align:center; font-size:18px; font-weight:700; border:1.5px solid var(--aislp-border); border-radius:10px; background:var(--aislp-surface-solid); color:var(--aislp-fg); transition:var(--aislp-dur-fast); }
.aislp-ai__otp-boxes input:focus { border-color:var(--aislp-primary); box-shadow:var(--aislp-elev-glow); outline:none; }
.aislp-ai__otp-timer { text-align:center; font-size:11px; color:var(--aislp-fg-3); margin-top:6px; }
.aislp-ai__otp-actions { display:flex; gap:6px; justify-content:center; margin-top:8px; }
.aislp-ai__otp-actions button { background:transparent; border:1px solid var(--aislp-border); color:var(--aislp-fg-2); border-radius:8px; padding:4px 10px; font-size:11px; cursor:pointer; }
.aislp-ai__otp-actions button:hover { border-color:var(--aislp-primary); color:var(--aislp-primary); }

.aislp-ai__gen, .aislp-ai__summary, .aislp-ai__consent, .aislp-ai__fix, .aislp-ai__magic { display:flex; flex-direction:column; gap:8px; }
.aislp-ai__gen code { display:block; font-family:ui-monospace, monospace; font-size:14px; padding:8px 10px; background:var(--aislp-surface-solid); border:1px dashed var(--aislp-border); border-radius:8px; word-break:break-all; letter-spacing:1px; }
.aislp-ai__gen-actions { display:flex; gap:6px; flex-wrap:wrap; }
.aislp-ai__gen-actions button, .aislp-ai__pw-actions button { flex:1; }
.aislp-ai__pw-actions { display:flex; gap:6px; margin-top:8px; }

.aislp-ai__summary .aislp-ai__row { display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--aislp-surface-solid); border:1px solid var(--aislp-border); border-radius:10px; font-size:13px; }
.aislp-ai__summary .aislp-ai__row b { flex:1; font-weight:600; font-size:13px; word-break:break-all; }
.aislp-ai__summary .aislp-ai__row button { background:transparent; border:0; cursor:pointer; font-size:14px; opacity:.6; }
.aislp-ai__summary .aislp-ai__row button:hover { opacity:1; }

.aislp-ai__consent label { display:flex; gap:8px; font-size:13px; color:var(--aislp-fg-2); cursor:pointer; }
.aislp-ai__consent a { color:var(--aislp-primary); font-weight:600; }

.aislp-ai__fix { flex-direction:row; align-items:center; flex-wrap:wrap; }
.aislp-ai__fix b { color:var(--aislp-primary); }
.aislp-ai__fix button, .aislp-ai__magic button { background:var(--aislp-primary); color:#fff; border:0; border-radius:8px; padding:4px 10px; font-size:12px; cursor:pointer; }
.aislp-ai__fix button + button, .aislp-ai__fix button[data-act="no"] { background:transparent; color:var(--aislp-fg-2); border:1px solid var(--aislp-border); }

.aislp-ai__hint { margin-inline-start:auto; opacity:.5; font-family:ui-monospace, monospace; font-size:11px; }
.aislp-ai__legal { display:flex; align-items:center; gap:6px; }

/* Mood-driven accent glow */
.aislp-ai[data-mood="celebration"] .aislp-ai__avatar { box-shadow:0 0 0 4px color-mix(in oklab, var(--aislp-success) 40%, transparent); }
.aislp-ai[data-mood="warning"]     .aislp-ai__avatar { box-shadow:0 0 0 4px color-mix(in oklab, var(--aislp-danger)  40%, transparent); }

.aislp.is-shake, .aislp-ai__otp.is-shake { animation:aislpShake .35s var(--aislp-ease); }
@keyframes aislpShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 50%{transform:translateX(6px)} 75%{transform:translateX(-3px)} }

/* =========================================================================
 * AI Smart Login Pro v9 — Forgot Password Panel (v7 classic UI)
 * ========================================================================= */

/* Forgot panel */
.aislp-frg-panel { animation: aislpFadeIn .25s ease-out; }
@keyframes aislpFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.aislp-frg__head { text-align: center; margin-bottom: 18px; }
.aislp-frg__icon { font-size: 36px; margin-bottom: 8px; }
.aislp-frg__title { font-size: 18px; font-weight: 800; color: var(--aislp-fg,#0f172a); margin: 0 0 6px; }
.aislp-frg__sub { font-size: 13px; color: var(--aislp-fg-2,#475569); margin: 0; line-height: 1.6; }

/* Channel selector */
.aislp-frg__channels { display: flex; gap: 6px; margin-bottom: 12px; }
.aislp-frg__ch {
  flex: 1; padding: 8px 4px; font-size: 12px; border-radius: 10px;
  border: 1.5px solid var(--aislp-border,rgba(0,0,0,.12));
  background: transparent; color: var(--aislp-fg-2,#475569); cursor: pointer;
  transition: all .15s;
}
.aislp-frg__ch.is-active {
  border-color: var(--aislp-primary,#6d28d9);
  color: var(--aislp-primary,#6d28d9);
  background: color-mix(in oklab, var(--aislp-primary,#6d28d9) 8%, transparent);
  font-weight: 600;
}

/* Sent message */
.aislp-frg__sent-msg {
  text-align: center; font-size: 13px; color: var(--aislp-fg-2,#475569);
  margin-bottom: 14px; line-height: 1.6;
}

/* 6-digit OTP boxes */
.aislp-frg__digits {
  display: flex; gap: 7px; justify-content: center;
  direction: ltr; margin-bottom: 14px;
}
.aislp-frg__digit {
  flex: 1; min-width: 0; height: 50px; border-radius: 10px;
  border: 1.5px solid var(--aislp-border,rgba(0,0,0,.15));
  background: transparent; font-size: 20px; font-weight: 700;
  text-align: center; color: var(--aislp-fg,#0f172a); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.aislp-frg__digit:focus {
  border-color: var(--aislp-primary,#6d28d9);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--aislp-primary,#6d28d9) 15%, transparent);
}

/* Timer */
.aislp-frg__timer-row {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-bottom: 12px;
}
.aislp-frg__timer-val { font-size: 13px; font-weight: 700; color: var(--aislp-fg-2,#475569); }

/* Password rules */
.aislp-frg__rules {
  list-style: none; margin: 0 0 10px; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
}
.aislp-frg__rules li {
  font-size: 11px; color: var(--aislp-fg-3,#94a3b8);
  padding-inline-start: 14px; position: relative; line-height: 1.6;
  transition: color .2s;
}
.aislp-frg__rules li::before {
  content: '○'; position: absolute; inset-inline-start: 0; font-size: 9px; line-height: 1.7;
}
.aislp-frg__rules li.is-ok { color: var(--aislp-success,#10b981); }
.aislp-frg__rules li.is-ok::before { content: '✓'; }

/* Strength bar override for forgot step */
.aislp-frg-panel .aislp-pw__bar { transition: width .3s, background .3s; }

/* Password eye toggle */
.aislp-pw-eye {
  position: absolute; top: 10px; inset-inline-end: 8px;
  background: transparent; border: 0; padding: 6px; cursor: pointer;
  color: var(--aislp-fg-3,#94a3b8); border-radius: 6px;
}
.aislp-pw-eye:hover { color: var(--aislp-primary,#6d28d9); }

/* Done badge */
.aislp-frg__done-badge {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #6d28d9, #8b5cf6);
  color: #fff; font-size: 28px; font-weight: 900;
  display: grid; place-items: center; margin: 0 auto 12px;
  box-shadow: 0 12px 32px -12px rgba(109,40,217,.5);
  animation: aislpPop .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes aislpPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ==========================================================================
   MOBILE FIRST — واجهة بسيطة وعريضة للهاتف
   ========================================================================== */

@media (max-width: 600px) {

  /* ✅ 95vw = 95% من الشاشة مباشرة — يتجاوز أي حاوية ضيقة */
  .aislp-card {
    width: 95vw;
    max-width: 460px;
    margin: 14px auto;
    border-radius: 20px;
    padding: 22px 18px 28px;
  }

  .aislp-shell {
    width: 95vw;
    max-width: 460px;
    padding: 0;
  }

  /* التبويبات: أكبر وأوضح */
  .aislp-tabs {
    display: flex;
    gap: 0;
    padding: 0;
    background: color-mix(in oklab, var(--aislp-fg) 6%, transparent);
    border-radius: 16px;
    margin-bottom: 24px;
    overflow: hidden;
  }
  .aislp-tab {
    flex: 1;
    padding: 14px 8px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 14px;
    color: var(--aislp-fg-2);
    letter-spacing: 0;
  }
  .aislp-tab.is-active {
    color: var(--aislp-fg);
    background: var(--aislp-surface-solid);
    box-shadow: var(--aislp-elev-1);
  }

  /* حقول الإدخال: أكبر وأسهل للمس */
  .aislp-field {
    margin-bottom: 16px;
  }
  .aislp-input,
  .aislp-select,
  .aislp-textarea {
    padding: 15px 16px;
    font-size: 16px; /* منع zoom في iOS */
    border-radius: 16px;
  }

  /* الـ floating label: تبسيط — نرفع padding الأعلى قليلاً */
  .aislp-float .aislp-input {
    padding-top: 22px;
    padding-bottom: 10px;
    font-size: 16px;
  }
  .aislp-float .aislp-label {
    font-size: 14px;
    top: 14px;
  }
  .aislp-float .aislp-input:focus + .aislp-label,
  .aislp-float .aislp-input:not(:placeholder-shown) + .aislp-label {
    transform: translateY(-10px);
    font-size: 11px;
  }

  /* الأزرار: أكبر وأراح */
  .aislp-btn {
    padding: 16px 18px;
    font-size: 16px;
    border-radius: 16px;
  }
  .aislp-btn--ghost {
    padding: 14px 16px;
    font-size: 15px;
  }

  /* الفاصل */
  .aislp-divider {
    margin: 16px 0;
  }

  /* أزرار رابط سحري + بصمة */
  .aislp-panel[data-panel="login"] > div[style*="grid"] {
    gap: 10px !important;
  }

  /* خانات OTP: تملأ العرض */
  .aislp-otp {
    gap: 6px;
  }
  .aislp-otp input {
    width: calc((100% - 30px) / 6);
    height: 56px;
    font-size: 24px;
    border-radius: 14px;
  }

  /* خانات OTP في نسيت المرور */
  .aislp-frg__digits {
    gap: 5px;
  }
  .aislp-frg__digit {
    flex: 1; min-width: 0;
    height: 52px;
    font-size: 20px;
  }

  /* الـ Stepper: أصغر على الهاتف */
  .aislp-stepper {
    gap: 4px;
    margin-bottom: 20px;
  }
  .aislp-step {
    gap: 4px;
    font-size: 11px;
  }
  .aislp-step__dot {
    width: 28px;
    height: 28px;
    font-size: 12px;
    flex-shrink: 0;
  }

  /* الـ AI chat: ارتفاع مناسب */
  .aislp-ai {
    height: calc(100vh - 180px);
    min-height: 400px;
    border-radius: 16px;
  }
  .aislp-ai__proghead {
    padding: 0 12px 8px;
  }
  .aislp-ai__ring {
    width: 44px;
    height: 44px;
  }
  .aislp-ai__progress {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
  .aislp-ai__prog-item {
    font-size: 10px;
    padding: 4px 6px;
  }

  /* Composer على الموبايل */
  .aislp-ai__composer {
    padding: 8px 10px;
    gap: 6px;
  }
  .aislp-ai__textarea {
    font-size: 16px; /* يمنع iOS zoom عند الكتابة */
    min-height: 44px;
    max-height: 120px;
    padding: 10px 14px;
    border-radius: 20px;
  }
  .aislp-ai__send,
  .aislp-ai__mic {
    width: 40px;
    height: 40px;
  }

  /* Chips — تمرير أفقي سلس */
  .aislp-ai__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .aislp-ai__chips::-webkit-scrollbar { display: none; }
  .aislp-ai__chips .aislp-chip {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* فقاعات الرسائل: عرض أكبر على الموبايل */
  .aislp-msg { max-width: 90%; font-size: 14px; }

  /* الـ legal footer: أصغر */
  .aislp-ai__legal { font-size: 10px; padding: 6px 12px 10px; }

  /* رسالة التنبيه */
  .aislp-alert {
    font-size: 13px;
    padding: 10px 12px;
    border-radius: 14px;
    margin-bottom: 14px;
  }

  /* نسيت المرور */
  .aislp-frg__head {
    margin-bottom: 16px;
  }
  .aislp-frg__icon {
    font-size: 32px;
    margin-bottom: 6px;
  }
  .aislp-frg__title {
    font-size: 18px;
  }

  /* قواعد كلمة المرور */
  .aislp-frg__rules {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 12px;
  }

  /* Social slot */
  .aislp-social {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 8px;
  }

  /* نسيت كلمة المرور link */
  .aislp-panel[data-panel="login"] a[data-action="show-forgot"] {
    font-size: 14px;
  }
}

/* ==========================================================================
 * AI registration refresh — v9.6.0
 *
 * The AI flow gets its own spacious surface so it remains legible inside
 * WooCommerce columns and themes that apply aggressive form/button rules.
 * ==========================================================================
 */

.aislp-card.aislp-card--ai {
  width: min(95vw, 680px);
  padding: clamp(14px, 2.4vw, 24px);
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 58, 237, .12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
}

.aislp-card--ai::before { display: none; }
.aislp-card--ai .aislp-tabs {
  margin-bottom: 16px;
  padding: 5px;
  background: color-mix(in oklab, var(--aislp-primary) 7%, var(--aislp-surface-solid));
  border: 1px solid color-mix(in oklab, var(--aislp-primary) 10%, transparent);
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, .03);
}
.aislp-card--ai .aislp-tab {
  min-height: 44px;
  padding: 11px 14px;
  color: var(--aislp-fg-2);
  font-size: 14px;
  font-weight: 700;
}
.aislp-card--ai .aislp-tab:hover { color: var(--aislp-primary); }
.aislp-card--ai .aislp-tab.is-active {
  color: var(--aislp-primary);
  background: var(--aislp-surface-solid);
  box-shadow: 0 5px 14px color-mix(in oklab, var(--aislp-primary) 14%, transparent);
}
.aislp-tab__ai-mark {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--aislp-primary);
  font-size: 18px;
  line-height: 1;
}

.aislp-card--ai .aislp-ai {
  height: clamp(570px, 70vh, 700px);
  min-height: 520px;
  border: 1px solid var(--aislp-border);
  border-radius: 22px;
  background: var(--aislp-surface-solid);
  box-shadow: var(--aislp-elev-2);
}
.aislp-card--ai .aislp-ai__head {
  min-height: 78px;
  padding: 16px 18px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in oklab, var(--aislp-primary-2) 28%, transparent), transparent 42%),
    var(--aislp-grad-primary);
  border-bottom: 0;
  color: #fff;
}
.aislp-card--ai .aislp-ai__avatar {
  width: 46px;
  height: 46px;
  border: 3px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.16);
  box-shadow: 0 7px 20px rgba(15, 23, 42, .18);
}
.aislp-card--ai .aislp-ai__avatar svg { width: 23px; height: 23px; }
.aislp-card--ai .aislp-ai__pulse { border-color: var(--aislp-primary); }
.aislp-card--ai .aislp-ai__meta b { color: #fff; font-size: 16px; }
.aislp-card--ai .aislp-ai__meta span { color: rgba(255,255,255,.76); margin-top: 5px; }
.aislp-card--ai .aislp-ai__mood {
  right: -7px;
  bottom: -7px;
  min-width: 21px;
  height: 21px;
  padding: 0 4px;
  color: var(--aislp-primary);
  font: 800 9px/21px ui-sans-serif, system-ui, sans-serif;
  text-align: center;
  letter-spacing: .04em;
  border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(15,23,42,.18);
}
.aislp-card--ai .aislp-ai__tools { gap: 7px; }
.aislp-card--ai .aislp-ai__tool {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  color: rgba(255,255,255,.86);
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.10);
}
.aislp-card--ai .aislp-ai__tool:hover,
.aislp-card--ai .aislp-ai__tool.is-on {
  color: var(--aislp-primary);
  background: var(--aislp-surface-solid);
  border-color: var(--aislp-surface-solid);
}

.aislp-card--ai .aislp-ai__proghead {
  gap: 14px;
  padding: 16px 18px 12px;
  background: color-mix(in oklab, var(--aislp-primary) 3%, var(--aislp-surface-solid));
  border-bottom: 1px solid var(--aislp-border);
}
.aislp-card--ai .aislp-ai__ring { width: 56px; height: 56px; }
.aislp-card--ai .aislp-ai__ring b { color: var(--aislp-primary); font-size: 12px; }
.aislp-card--ai .aislp-ai__ring circle.bg { stroke: var(--aislp-border); }
.aislp-card--ai .aislp-ai__ring circle.fg { stroke: var(--aislp-primary); }
.aislp-card--ai .aislp-ai__progress { gap: 7px; }
.aislp-card--ai .aislp-ai__prog-item {
  min-width: 0;
  min-height: 32px;
  padding: 7px 9px;
  color: var(--aislp-fg-3);
  background: var(--aislp-surface-solid);
  border-color: var(--aislp-border);
  font-size: 11px;
}
.aislp-card--ai .aislp-ai__prog-item .dot { width: 7px; height: 7px; }
.aislp-card--ai .aislp-ai__prog-item b { color: var(--aislp-fg-2); font-size: 10px; }
.aislp-card--ai .aislp-ai__prog-item.is-done {
  color: var(--aislp-success);
  background: color-mix(in oklab, var(--aislp-success) 8%, var(--aislp-surface-solid));
  border-color: color-mix(in oklab, var(--aislp-success) 32%, transparent);
}

.aislp-card--ai .aislp-ai__log {
  min-height: 220px;
  padding: 20px 18px;
  background:
    linear-gradient(180deg, var(--aislp-surface-solid) 0%, color-mix(in oklab, var(--aislp-primary) 2%, var(--aislp-surface-solid)) 100%);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--aislp-primary) 35%, transparent) transparent;
}
.aislp-card--ai .aislp-ai__log::-webkit-scrollbar { width: 6px; }
.aislp-card--ai .aislp-ai__log::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--aislp-primary) 35%, transparent);
  border-radius: 999px;
}
.aislp-card--ai .aislp-msg {
  max-width: min(88%, 520px);
  padding: 12px 15px;
  color: var(--aislp-fg);
  font-size: 14px;
  line-height: 1.75;
  border-radius: 17px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .04);
}
.aislp-card--ai .aislp-msg--bot {
  background: color-mix(in oklab, var(--aislp-primary) 8%, var(--aislp-surface-solid));
  border: 1px solid color-mix(in oklab, var(--aislp-primary) 18%, transparent);
  border-bottom-inline-start-radius: 5px;
}
.aislp-card--ai .aislp-msg--user {
  color: #fff;
  background: var(--aislp-grad-primary);
  border: 0;
  border-bottom-inline-end-radius: 5px;
  box-shadow: 0 8px 18px color-mix(in oklab, var(--aislp-primary) 20%, transparent);
}
.aislp-card--ai .aislp-ai__chips {
  gap: 8px;
  padding: 0 18px 12px;
  background: var(--aislp-surface-solid);
}
.aislp-card--ai .aislp-chip {
  min-height: 34px;
  padding: 7px 13px;
  color: var(--aislp-primary);
  background: color-mix(in oklab, var(--aislp-primary) 6%, var(--aislp-surface-solid));
  border-color: color-mix(in oklab, var(--aislp-primary) 18%, transparent);
  font-size: 12px;
  font-weight: 700;
}
.aislp-card--ai .aislp-chip:hover {
  color: var(--aislp-primary);
  background: color-mix(in oklab, var(--aislp-primary) 12%, var(--aislp-surface-solid));
  border-color: color-mix(in oklab, var(--aislp-primary) 35%, transparent);
  transform: translateY(-1px);
}

.aislp-card--ai .aislp-ai__composer {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px 48px;
  align-items: end;
  gap: 8px;
  direction: ltr;
  padding: 12px 16px 10px;
  background: var(--aislp-surface-solid);
  border-top: 1px solid var(--aislp-border);
}
.aislp-card--ai .aislp-ai__textarea {
  width: 100% !important;
  min-width: 0;
  min-height: 46px;
  max-height: 150px;
  margin: 0 !important;
  padding: 12px 15px !important;
  color: var(--aislp-fg) !important;
  background: var(--aislp-bg) !important;
  border: 1px solid var(--aislp-border) !important;
  border-radius: 15px !important;
  direction: rtl;
  text-align: right;
  font: 500 14px/1.65 var(--aislp-font) !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.03) !important;
}
.aislp-card--ai .aislp-ai__textarea:hover { border-color: var(--aislp-border-strong) !important; }
.aislp-card--ai .aislp-ai__textarea:focus {
  border-color: var(--aislp-primary) !important;
  background: var(--aislp-surface-solid) !important;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--aislp-primary) 13%, transparent) !important;
  outline: none !important;
}
.aislp-card--ai .aislp-ai__textarea::placeholder {
  color: var(--aislp-fg-3) !important;
  opacity: 1;
}
.aislp-card--ai .aislp-ai__mic,
.aislp-card--ai .aislp-ai__send {
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  align-self: end;
}
.aislp-card--ai .aislp-ai__mic {
  color: var(--aislp-fg-2);
  background: var(--aislp-surface-solid);
  border: 1px solid var(--aislp-border);
  border-radius: 13px;
}
.aislp-card--ai .aislp-ai__mic:hover {
  color: var(--aislp-primary);
  background: color-mix(in oklab, var(--aislp-primary) 6%, var(--aislp-surface-solid));
  border-color: var(--aislp-border-strong);
}
.aislp-card--ai .aislp-ai__send {
  color: #fff;
  background: var(--aislp-grad-primary);
  border-radius: 14px;
  box-shadow: 0 7px 15px color-mix(in oklab, var(--aislp-primary) 24%, transparent);
}
.aislp-card--ai .aislp-ai__send:hover {
  color: #fff;
  background: var(--aislp-grad-primary);
  transform: translateY(-2px);
}
.aislp-card--ai .aislp-ai__legal {
  padding: 6px 16px 13px;
  color: var(--aislp-fg-3);
  background: var(--aislp-surface-solid);
  font-size: 10px;
}
.aislp-card--ai .aislp-ai__legal-icon {
  color: var(--aislp-success);
  font-size: 15px;
  font-weight: 800;
  vertical-align: -1px;
}
.aislp-card--ai .aislp-ai__hint { color: var(--aislp-fg-2); }
.aislp-card--ai .aislp-ai__resume {
  margin: 12px 18px 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in oklab, var(--aislp-primary) 22%, transparent);
  border-radius: 13px;
  background: color-mix(in oklab, var(--aislp-primary) 6%, var(--aislp-surface-solid));
}
.aislp-card--ai .aislp-ai__resume button {
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--aislp-primary);
  background: var(--aislp-surface-solid);
  border: 1px solid color-mix(in oklab, var(--aislp-primary) 22%, transparent);
  font-weight: 700;
}
.aislp-card--ai .aislp-ai__resume button:hover { background: color-mix(in oklab, var(--aislp-primary) 12%, var(--aislp-surface-solid)); }

@media (max-width: 600px) {
  .aislp-card.aislp-card--ai {
    width: 96vw;
    padding: 10px;
    border-radius: 20px;
  }
  .aislp-card--ai .aislp-tabs { margin-bottom: 10px; }
  .aislp-card--ai .aislp-tab { min-height: 42px; padding: 10px 6px; font-size: 12px; }
  .aislp-card--ai .aislp-ai { min-height: 0; height: min(690px, 78vh); border-radius: 18px; }
  .aislp-card--ai .aislp-ai__head { min-height: 70px; padding: 13px 12px; }
  .aislp-card--ai .aislp-ai__avatar { width: 40px; height: 40px; }
  .aislp-card--ai .aislp-ai__meta b { font-size: 14px; }
  .aislp-card--ai .aislp-ai__tools { gap: 4px; }
  .aislp-card--ai .aislp-ai__tool { width: 30px; height: 30px; }
  .aislp-card--ai .aislp-ai__proghead { gap: 10px; padding: 12px 12px 9px; }
  .aislp-card--ai .aislp-ai__ring { width: 48px; height: 48px; }
  .aislp-card--ai .aislp-ai__progress { gap: 5px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aislp-card--ai .aislp-ai__prog-item { min-height: 28px; padding: 5px 6px; font-size: 9px; gap: 4px; }
  .aislp-card--ai .aislp-ai__prog-item b { display: none; }
  .aislp-card--ai .aislp-ai__log { padding: 14px 12px; }
  .aislp-card--ai .aislp-ai__composer {
    grid-template-columns: 36px minmax(0, 1fr) 36px 42px;
    gap: 5px;
    padding: 9px 10px 8px;
  }
  .aislp-card--ai .aislp-ai__textarea { min-height: 42px; padding: 10px 12px !important; font-size: 15px !important; }
  .aislp-card--ai .aislp-ai__mic,
  .aislp-card--ai .aislp-ai__send { width: 36px !important; height: 36px !important; border-radius: 11px; }
  .aislp-card--ai .aislp-ai__legal { padding: 5px 10px 10px; }
}

@media (max-width: 380px) {
  .aislp-card.aislp-card--ai {
    width: 96vw;
    max-width: 680px;
    margin: 10px auto;
    padding: 10px;
    border-radius: 20px;
  }
  .aislp-card--ai .aislp-ai__tools .aislp-ai__tool:nth-child(1) { display: none; }
  .aislp-card--ai .aislp-ai__meta span { font-size: 10px; }
  .aislp-card--ai .aislp-ai__composer { grid-template-columns: 34px minmax(0, 1fr) 34px 40px; }
}

/* ==========================================================================
 * AI composer hardening — v9.6.1
 *
 * Keep the composer inside the fixed-height chat surface and neutralize
 * common theme rules that hide inline SVG icons or collapse form controls.
 * ==========================================================================
 */

.aislp-card.aislp-card--ai .aislp-ai {
  min-height: 0;
  overflow: hidden;
}
.aislp-card.aislp-card--ai .aislp-ai__head,
.aislp-card.aislp-card--ai .aislp-ai__proghead,
.aislp-card.aislp-card--ai .aislp-ai__resume,
.aislp-card.aislp-card--ai .aislp-ai__chips,
.aislp-card.aislp-card--ai .aislp-ai__composer,
.aislp-card.aislp-card--ai .aislp-ai__legal {
  flex: 0 0 auto;
}
.aislp-card.aislp-card--ai .aislp-ai__log {
  flex: 1 1 auto;
  min-height: 0 !important;
  height: auto;
  overflow-y: auto;
}
.aislp-card.aislp-card--ai .aislp-ai__chips {
  min-height: 0;
}
.aislp-card.aislp-card--ai .aislp-ai__composer {
  position: relative;
  z-index: 2;
  min-height: 66px;
  width: 100%;
  box-sizing: border-box;
  isolation: isolate;
}
.aislp-card.aislp-card--ai .aislp-ai__composer button,
.aislp-card.aislp-card--ai .aislp-ai__composer button:hover,
.aislp-card.aislp-card--ai .aislp-ai__composer button:focus {
  appearance: none !important;
  -webkit-appearance: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  font-size: 16px !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  text-shadow: none !important;
}
.aislp-card.aislp-card--ai .aislp-ai__composer button svg,
.aislp-card.aislp-card--ai .aislp-ai__composer button svg *,
.aislp-card.aislp-card--ai .aislp-ai__tools button svg,
.aislp-card.aislp-card--ai .aislp-ai__tools button svg * {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 18px !important;
  height: 18px !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
}
.aislp-card.aislp-card--ai .aislp-ai__composer button svg {
  flex: 0 0 18px;
  stroke: currentColor !important;
  fill: none !important;
}
.aislp-card.aislp-card--ai .aislp-ai__tools button svg {
  stroke: currentColor !important;
  fill: none !important;
}
.aislp-card.aislp-card--ai .aislp-ai__textarea {
  position: relative;
  z-index: 1;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 1 1 auto;
  align-self: end;
  overflow-y: auto !important;
}

@media (max-width: 600px) {
  .aislp-card.aislp-card--ai .aislp-ai__composer {
    min-height: 58px;
  }
  .aislp-card.aislp-card--ai .aislp-ai__composer button svg {
    width: 16px !important;
    height: 16px !important;
    flex-basis: 16px;
  }
}

/* ── شاشات متوسطة: تابلت / هاتف أفقي (601px–900px) ── */
@media (min-width: 601px) and (max-width: 900px) {
  .aislp-card  { width: min(88vw, 480px); }
  .aislp-shell { width: min(88vw, 480px); }
}

/* ── شاشات كبيرة: لاب توب / ديسك توب (>900px) ── */
@media (min-width: 901px) {
  .aislp-card  { width: min(90vw, 500px); }
  .aislp-shell { width: min(90vw, 500px); padding: 0; }
}

/* ── ألواح صغيرة جداً (iPhone SE وما دونه ≤380px) ── */
@media (max-width: 380px) {
  .aislp-card {
    width: 97vw;
    max-width: none;
    margin: 10px auto;
    padding: 18px 14px 26px;
    border-radius: 18px;
  }
  .aislp-shell { width: 97vw; max-width: none; padding: 0; }
  .aislp-tab   { font-size: 13px; padding: 12px 4px; }
  .aislp-otp input { height: 46px; font-size: 18px; border-radius: 10px; }
  .aislp-btn   { padding: 14px 14px; font-size: 15px; }
  .aislp-social { grid-template-columns: 1fr 1fr; }
  .aislp-frg__rules,
  .aislp-v8__pw-rules,
  .aislp-v8__pwlist { grid-template-columns: 1fr; }
}