/* Ariel — AI chat widget (pairs with assets/js/ariel.js). Self-contained, RTL.
   The widget root is dir="rtl", so inline-END = the LEFT edge of the screen.
   Theme hooks (override on :root or .ariel):
     --ariel-offset-inline  distance from the left edge   (default 20px)
     --ariel-offset-block   distance from the bottom edge (default 20px)
     --ariel-z              stacking order                (default 9990)
   Colors fall back to the theme tokens in main.css when present. */

.ariel {
  --ariel-offset-inline: 20px;
  --ariel-offset-block: 20px;
  --ariel-z: 9990;
  --ariel-w: 384px;
  --ariel-h: 620px;

  --ariel-ink: var(--ink, #101B3B);
  --ariel-ink-soft: var(--ink-soft, #46506B);
  --ariel-night: var(--night, #0F1C40);
  --ariel-on-night: var(--on-night, #F4F2EC);
  --ariel-on-night-soft: var(--on-night-soft, #B9C3DD);
  --ariel-paper: var(--paper, #F7F5F0);
  --ariel-card: var(--card, #FFFFFF);
  --ariel-line: var(--line, #DCD7CB);
  --ariel-mist: var(--mist, #EEF1F8);
  --ariel-accent: var(--amber, #F7A21B);
  --ariel-accent-hover: var(--amber-hover, #FFB547);
  --ariel-accent-text: var(--amber-text, #9A4A00);
  --ariel-accent-wash: var(--amber-wash, #FFF0D6);
  --ariel-error: #B42318;
  --ariel-wa: #1F8F4E;
  --ariel-font: var(--font-body, "IBM Plex Sans Hebrew", "Assistant", system-ui, sans-serif);
  --ariel-font-display: var(--font-display, "Rubik", "Heebo", system-ui, sans-serif);
  --ariel-shadow: var(--shadow-float, 0 2px 8px -2px rgba(16, 27, 59, .08), 0 40px 80px -34px rgba(16, 27, 59, .4));
  --ariel-safe-inline: env(safe-area-inset-left, 0px);
  --ariel-safe-block: env(safe-area-inset-bottom, 0px);

  font-family: var(--ariel-font);
  color: var(--ariel-ink);
  font-size: 16px;
  line-height: 1.6;
}
.ariel *, .ariel *::before, .ariel *::after { box-sizing: border-box; }
.ariel [hidden] { display: none !important; }
.ariel p, .ariel h2, .ariel h3 { margin: 0; }
.ariel button, .ariel input, .ariel textarea { font: inherit; color: inherit; }
.ariel :focus-visible { outline: 3px solid var(--ariel-accent); outline-offset: 2px; }

.ariel-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- launcher ---------- */
.ariel-launcher {
  position: fixed;
  inset-inline-end: calc(var(--ariel-offset-inline) + var(--ariel-safe-inline));
  inset-block-end: calc(var(--ariel-offset-block) + var(--ariel-safe-block));
  z-index: var(--ariel-z);
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px;
  padding-block: 8px; padding-inline: 10px 18px;
  border: 0; border-radius: 999px;
  background: var(--ariel-night); color: var(--ariel-on-night);
  font-family: var(--ariel-font-display); font-weight: 600; font-size: 1rem; line-height: 1.2;
  box-shadow: 0 10px 30px -10px rgba(10, 20, 49, .55), 0 2px 6px rgba(10, 20, 49, .18);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.ariel-launcher:hover { transform: translateY(-2px); background: var(--night-raise, #16285A); }
.ariel-launcher__icon {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ariel-accent); color: var(--ariel-night);
}
.ariel-launcher--unread .ariel-launcher__icon { box-shadow: 0 0 0 3px var(--ariel-night), 0 0 0 5px var(--ariel-accent); }
.ariel--open .ariel-launcher { transform: scale(.96); }

/* ---------- panel ---------- */
.ariel-panel {
  position: fixed;
  inset-inline-end: calc(var(--ariel-offset-inline) + var(--ariel-safe-inline));
  inset-block-end: calc(var(--ariel-offset-block) + var(--ariel-safe-block) + 64px);
  z-index: calc(var(--ariel-z) + 1);
  display: flex; flex-direction: column;
  width: min(var(--ariel-w), calc(100vw - 2 * var(--ariel-offset-inline)));
  height: min(var(--ariel-h), calc(100vh - 110px));
  height: min(var(--ariel-h), calc(100dvh - 110px));
  background: var(--ariel-paper);
  border: 1px solid var(--ariel-line);
  border-radius: 20px;
  box-shadow: var(--ariel-shadow);
  overflow: hidden;
  opacity: 0; transform: translateY(12px) scale(.98); transform-origin: bottom left;
  transition: opacity .2s ease, transform .2s ease;
}
.ariel-panel--in { opacity: 1; transform: none; }

/* header */
.ariel-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 14px 12px;
  background: var(--ariel-night); color: var(--ariel-on-night);
}
.ariel-avatar {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ariel-accent); color: var(--ariel-night);
  font-family: var(--ariel-font-display); font-weight: 800; font-size: 1.15rem;
}
.ariel-head__text { flex: 1; min-width: 0; }
.ariel-head__title { font-family: var(--ariel-font-display); font-size: 1.1rem; font-weight: 700; line-height: 1.3; }
.ariel-head__sub { font-size: .875rem; color: var(--ariel-on-night-soft); line-height: 1.4; }
.ariel-head__note { margin-top: 6px !important; font-size: .75rem; color: var(--ariel-on-night-soft); line-height: 1.45; opacity: .9; }
.ariel-iconbtn {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ariel-on-night); cursor: pointer;
}
.ariel-iconbtn:hover { background: rgba(255, 255, 255, .1); }

/* body + messages */
.ariel-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ariel-log {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 14px;
}
.ariel-log:focus-visible { outline-offset: -3px; }
.ariel-msg {
  max-width: 86%;
  padding: 10px 13px;
  border-radius: 16px;
  font-size: .95rem; line-height: 1.6;
  overflow-wrap: anywhere;
  animation: ariel-pop .18s ease both;
}
.ariel-msg p + p { margin-top: 8px; }
.ariel-msg a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; unicode-bidi: isolate; }
.ariel-msg--bot {
  align-self: flex-start;
  background: var(--ariel-card); color: var(--ariel-ink);
  border: 1px solid var(--ariel-line);
  border-start-start-radius: 4px;
}
.ariel-msg--bot a { color: var(--ariel-accent-text); }
.ariel-msg--user {
  align-self: flex-end;
  background: var(--ariel-night); color: var(--ariel-on-night);
  border-start-end-radius: 4px;
}
.ariel-msg--error { border-color: var(--ariel-error); color: var(--ariel-error); }

/* typing indicator */
.ariel-typing { padding: 12px 14px; }
.ariel-dots { display: inline-flex; gap: 5px; align-items: center; height: 10px; }
.ariel-dots i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ariel-ink-soft); opacity: .35;
  animation: ariel-blink 1.1s infinite ease-in-out;
}
.ariel-dots i:nth-child(2) { animation-delay: .15s; }
.ariel-dots i:nth-child(3) { animation-delay: .3s; }

/* quick replies */
.ariel-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 14px 10px;
}
.ariel-chip {
  border: 1px solid var(--ariel-line); border-radius: 999px;
  background: var(--ariel-card); color: var(--ariel-ink);
  padding: 7px 13px; min-height: 36px;
  font-size: .875rem; font-weight: 500; line-height: 1.2; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.ariel-chip:hover { background: var(--ariel-accent-wash); border-color: var(--ariel-accent); }

/* composer */
.ariel-form {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px calc(10px + var(--ariel-sheet-safe, 0px));
  border-top: 1px solid var(--ariel-line);
  background: var(--ariel-card);
}
.ariel-input {
  flex: 1; min-width: 0; resize: none;
  max-height: 120px; min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--ariel-line); border-radius: 12px;
  background: var(--ariel-paper);
  font-size: 1rem; line-height: 1.45; /* 16px+ avoids iOS zoom */
}
.ariel-input:focus { outline: none; border-color: var(--ariel-night); box-shadow: 0 0 0 3px var(--ariel-accent-wash); }
.ariel-send {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: var(--ariel-accent); color: var(--ariel-night); cursor: pointer;
  transition: background-color .15s ease;
}
.ariel-send:hover { background: var(--ariel-accent-hover); }
.ariel-send:disabled { opacity: .5; cursor: progress; }

/* ---------- fallback: contact form ---------- */
.ariel-fallback { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }
.ariel-fallback__card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; border-radius: 16px;
  background: var(--ariel-card); border: 1px solid var(--ariel-line);
}
.ariel-fallback__title { font-family: var(--ariel-font-display); font-size: 1.05rem; font-weight: 700; }
.ariel-fallback__title:focus { outline: none; }
.ariel-fallback__intro { font-size: .9rem; color: var(--ariel-ink-soft); }
.ariel-lead { display: flex; flex-direction: column; gap: 10px; }
.ariel-field { display: flex; flex-direction: column; gap: 4px; }
.ariel-field__label { font-size: .85rem; font-weight: 600; }
.ariel-field__input {
  width: 100%; min-height: 44px; padding: 9px 12px;
  border: 1px solid var(--ariel-line); border-radius: 10px;
  background: var(--ariel-paper); font-size: 1rem;
}
.ariel-field__input[dir="ltr"] { text-align: right; }
textarea.ariel-field__input { resize: vertical; min-height: 64px; }
.ariel-field__input:focus { outline: none; border-color: var(--ariel-night); box-shadow: 0 0 0 3px var(--ariel-accent-wash); }
.ariel-hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }
.ariel-ferr { color: var(--ariel-error); font-size: .875rem; font-weight: 600; }
.ariel-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  border-radius: 12px; border: 1px solid transparent;
  font-family: var(--ariel-font-display); font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
}
.ariel-btn--primary { background: var(--ariel-accent); color: var(--ariel-night); }
.ariel-btn--primary:hover { background: var(--ariel-accent-hover); }
.ariel-btn--primary:disabled { opacity: .6; cursor: progress; }
.ariel-btn--wa { background: var(--ariel-wa); color: #fff; }
.ariel-btn--wa:hover { filter: brightness(1.08); }
.ariel-btn--ghost { background: transparent; border-color: var(--ariel-line); color: var(--ariel-ink); }
.ariel-btn--ghost:hover { background: var(--ariel-mist); }
.ariel-done { padding: 16px; border-radius: 16px; background: var(--green-wash, #E2F2E8); color: var(--green-text, #1C6E49); margin-bottom: 10px; }
.ariel-done__title { font-weight: 700; }

/* ---------- mobile: full-height sheet ---------- */
@media (max-width: 480px) {
  .ariel-launcher__label { font-size: .95rem; }
  .ariel-panel {
    inset: 0;
    width: 100%; height: 100%;
    max-height: none;
    border-radius: 0; border: 0;
    padding-top: env(safe-area-inset-top, 0px);
    transform: translateY(24px);
    --ariel-sheet-safe: env(safe-area-inset-bottom, 0px);
  }
  .ariel-panel--in { transform: none; }
  .ariel--open .ariel-launcher { display: none; }
  .ariel-msg { max-width: 90%; }
}
html.ariel-lock, html.ariel-lock body { overflow: hidden !important; }

/* ---------- motion ---------- */
@keyframes ariel-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ariel-blink { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: .9; transform: translateY(-2px); } }

@media (prefers-reduced-motion: reduce) {
  .ariel-launcher, .ariel-panel, .ariel-chip, .ariel-send { transition: none !important; }
  .ariel-launcher:hover { transform: none; }
  .ariel-msg { animation: none !important; }
  .ariel-dots i { animation: none !important; opacity: .6; }
  .ariel-panel, .ariel-panel--in { transform: none !important; }
}

@media print { .ariel { display: none !important; } }