/* ============================================================
   Arandano Chat — Ari widget
   Recreated from the "Ari Chat Widget" design handoff
   (Arandano Design System: brand purple + Poppins).
   Everything is scoped under .arandano-chat so it never
   collides with the host theme's CSS.
   ============================================================ */

/* ── Poppins (self-hosted) ───────────────────────────────── */
@font-face { font-family: "Arandano Poppins"; src: url("../fonts/Poppins-Light.ttf")     format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Arandano Poppins"; src: url("../fonts/Poppins-Regular.ttf")   format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Arandano Poppins"; src: url("../fonts/Poppins-Medium.ttf")    format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Arandano Poppins"; src: url("../fonts/Poppins-SemiBold.ttf")  format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Arandano Poppins"; src: url("../fonts/Poppins-Bold.ttf")      format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Arandano Poppins"; src: url("../fonts/Poppins-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }

/* ── Root: design tokens + namespace ─────────────────────── */
.arandano-chat {
  /* Brand purple scale (Arandano). Primary accent (--brand-600) can be
     overridden per store via the inline --arandano-chat-primary property. */
  --brand-50:  #f4f0ff;
  --brand-100: #ebe5ff;
  --brand-200: #d9ccff;
  --brand-300: #bea6ff;
  --brand-400: #a175ff;
  --brand-500: #8355ff;
  --brand-600: var(--arandano-chat-primary, #7134f5);
  --brand-700: #6020d6;

  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  --color-success: #10b981;
  --color-success-bg: #ecfdf5;
  --color-success-text: #065f46;

  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --radius-full: 9999px;
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-brand: 0 4px 14px 0 rgba(131, 85, 255, 0.30);

  font-family: "Arandano Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Reset only inside our own subtree so the host theme is untouched. */
.arandano-chat *,
.arandano-chat *::before,
.arandano-chat *::after { box-sizing: border-box; }
.arandano-chat button { font-family: inherit; cursor: pointer; }

/* Author display rules below outrank the UA [hidden] rule, so restate it with
   higher specificity to keep the hidden attribute working on flex elements. */
.arandano-chat [hidden],
.arandano-chat__panel[hidden],
.arandano-chat__cartbar[hidden] { display: none !important; }

/* ───────────────────────── LAUNCHER BUBBLE ───────────────────────── */
.arandano-chat__launcher {
  position: fixed; bottom: 24px; z-index: 2147483000;
  width: 60px; height: 60px; border: 0; border-radius: 50%;
  background: linear-gradient(140deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 10px 26px rgba(96, 32, 214, 0.42), 0 2px 6px rgba(0, 0, 0, 0.12);
  display: grid; place-items: center; color: #fff;
  animation: arandano-float 5s ease-in-out infinite;
  transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.26s;
}
.arandano-chat--bottom-right .arandano-chat__launcher { right: 24px; }
.arandano-chat--bottom-left  .arandano-chat__launcher { left: 24px; }
.arandano-chat__launcher:hover { transform: scale(1.07) translateY(-1px); box-shadow: 0 16px 34px rgba(96, 32, 214, 0.5); }
.arandano-chat__launcher:active { transform: scale(0.96); }
.arandano-chat__launcher.is-open { animation: none; }
.arandano-chat__launcher-logo { width: 30px; height: 30px; object-fit: contain; transition: transform 0.3s, opacity 0.3s; }
.arandano-chat__launcher-fallback {
  font-weight: var(--fw-extrabold); font-size: 24px; color: #fff; line-height: 1;
  transition: transform 0.3s, opacity 0.3s;
}
.arandano-chat__launcher-close { position: absolute; opacity: 0; transform: rotate(-90deg) scale(0.6); transition: 0.3s; display: grid; place-items: center; }
.arandano-chat__launcher-close svg { width: 24px; height: 24px; }
.arandano-chat__launcher.is-open .arandano-chat__launcher-logo,
.arandano-chat__launcher.is-open .arandano-chat__launcher-fallback { opacity: 0; transform: scale(0.5); }
.arandano-chat__launcher.is-open .arandano-chat__launcher-close { opacity: 1; transform: rotate(0) scale(1); }
@keyframes arandano-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.arandano-chat__ring { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--brand-400); opacity: 0; pointer-events: none; }
.arandano-chat__launcher:not(.is-open) .arandano-chat__ring { animation: arandano-ping 2.6s ease-out infinite; }
@keyframes arandano-ping { 0% { opacity: 0.7; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.45); } }

/* ───────────────────────── TEASER ───────────────────────── */
.arandano-chat__teaser {
  position: fixed; bottom: 32px; z-index: 2147482999; max-width: 230px;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 16px 16px 4px 16px;
  padding: 12px 14px; box-shadow: var(--shadow-lg); font-size: 13.5px; color: var(--gray-700);
  line-height: 1.45; transform-origin: bottom right;
  animation: arandano-teaser-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both;
}
.arandano-chat--bottom-right .arandano-chat__teaser { right: 96px; }
.arandano-chat--bottom-left  .arandano-chat__teaser { left: 96px; border-radius: 16px 16px 16px 4px; }
.arandano-chat__teaser b { color: var(--gray-900); font-weight: var(--fw-semibold); }
.arandano-chat__teaser-close {
  position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gray-700); color: #fff; border: 0; display: grid; place-items: center;
  font-size: 14px; line-height: 1; padding: 0;
}
@keyframes arandano-teaser-in { from { opacity: 0; transform: translateY(10px) scale(0.9); } to { opacity: 1; transform: none; } }

/* ───────────────────────── PANEL ───────────────────────── */
.arandano-chat__panel {
  position: fixed; bottom: 96px; z-index: 2147483001;
  width: 392px; max-width: calc(100vw - 32px);
  height: min(660px, calc(100vh - 120px));
  background: #fff; border-radius: 22px; overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid rgba(20, 10, 40, 0.06);
  box-shadow: 0 24px 60px rgba(50, 20, 110, 0.26), 0 8px 20px rgba(0, 0, 0, 0.08);
  transform-origin: bottom right;
  animation: arandano-panel-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.arandano-chat--bottom-right .arandano-chat__panel { right: 24px; }
.arandano-chat--bottom-left  .arandano-chat__panel { left: 24px; transform-origin: bottom left; }
.arandano-chat__panel.is-closing { animation: arandano-panel-out 0.26s cubic-bezier(0.4, 0, 1, 1) both; }
@keyframes arandano-panel-in { from { opacity: 0; transform: translateY(22px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes arandano-panel-out { to { opacity: 0; transform: translateY(16px) scale(0.95); } }

/* Header */
.arandano-chat__head {
  position: relative; color: #fff; padding: 16px 16px 16px 18px;
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 58%, var(--brand-400) 100%);
  overflow: hidden; flex-shrink: 0;
}
.arandano-chat__head::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120px 120px at 85% -30%, rgba(255, 255, 255, 0.28), transparent 70%),
    radial-gradient(90px 90px at 12% 120%, rgba(255, 255, 255, 0.16), transparent 70%);
}
.arandano-chat__head-top { position: relative; display: flex; align-items: center; gap: 11px; }
.arandano-chat__avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; position: relative;
  background: linear-gradient(150deg, var(--brand-400), var(--brand-700)); display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(40, 12, 90, 0.3), inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.arandano-chat__avatar img { width: 26px; height: 26px; object-fit: contain; }
.arandano-chat__avatar-fallback { font-weight: var(--fw-extrabold); font-size: 18px; color: #fff; }
.arandano-chat__avatar-dot { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; background: var(--color-success); border: 2.5px solid #fff; }
.arandano-chat__head-name { font-weight: var(--fw-bold); font-size: 16.5px; line-height: 1.1; letter-spacing: -0.01em; }
.arandano-chat__head-sub { font-size: 12px; opacity: 0.9; margin-top: 2px; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.arandano-chat__head-live { width: 6px; height: 6px; border-radius: 50%; background: #bbf7d0; box-shadow: 0 0 0 0 rgba(187, 247, 208, 0.7); animation: arandano-livedot 2s infinite; }
@keyframes arandano-livedot {
  0% { box-shadow: 0 0 0 0 rgba(187, 247, 208, 0.6); }
  70% { box-shadow: 0 0 0 6px rgba(187, 247, 208, 0); }
  100% { box-shadow: 0 0 0 0 rgba(187, 247, 208, 0); }
}
.arandano-chat__head-btns { margin-left: auto; display: flex; gap: 2px; }
.arandano-chat__head-btn { width: 34px; height: 34px; border-radius: 10px; border: 0; background: transparent; color: rgba(255, 255, 255, 0.85); display: grid; place-items: center; transition: 0.16s; }
.arandano-chat__head-btn:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.arandano-chat__head-btn svg { width: 20px; height: 20px; }

/* Messages */
.arandano-chat__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 8px; background: #faf9fd; scroll-behavior: smooth; }
.arandano-chat__body::-webkit-scrollbar { width: 7px; }
.arandano-chat__body::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 10px; border: 2px solid #faf9fd; }
.arandano-chat__body::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

.arandano-chat__day { text-align: center; margin: 2px 0 14px; }
.arandano-chat__day span { font-size: 11px; color: var(--gray-400); background: #faf9fd; padding: 0 10px; font-weight: var(--fw-medium); }

.arandano-chat__row { display: flex; gap: 8px; margin-bottom: 12px; align-items: flex-end; animation: arandano-msg-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
.arandano-chat__row--user { flex-direction: row-reverse; }
.arandano-chat__row.is-restored { animation: none; }
@keyframes arandano-msg-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.arandano-chat__mini-ava { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(140deg, var(--brand-500), var(--brand-700)); display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--shadow-xs); }
.arandano-chat__mini-ava img { width: 17px; height: 17px; object-fit: contain; }
.arandano-chat__mini-ava span { color: #fff; font-size: 11px; font-weight: var(--fw-bold); }
.arandano-chat__row--user .arandano-chat__mini-ava { background: var(--gray-300); }
.arandano-chat__mini-ava-user svg { width: 14px; height: 14px; color: var(--gray-600); }
.arandano-chat__stack { display: flex; flex-direction: column; gap: 5px; max-width: 80%; min-width: 0; }
.arandano-chat__row--widget .arandano-chat__stack { max-width: 86%; }

.arandano-chat__bubble {
  padding: 9px 13px; font-size: 14px; line-height: 1.5; border-radius: 16px;
  box-shadow: var(--shadow-xs); width: fit-content; max-width: 100%;
  word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap;
}
.arandano-chat__row--ari .arandano-chat__bubble { background: #fff; color: var(--gray-800); border-bottom-left-radius: 5px; border: 1px solid rgba(20, 10, 40, 0.04); }
.arandano-chat__row--user .arandano-chat__bubble { background: linear-gradient(135deg, var(--brand-600), var(--brand-500)); color: #fff; border-bottom-right-radius: 5px; margin-left: auto; }

/* Typing */
.arandano-chat__typing { display: flex; gap: 4px; padding: 12px 14px; }
.arandano-chat__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-300); display: inline-block; animation: arandano-typing 1.3s infinite ease-in-out; }
.arandano-chat__typing i:nth-child(2) { animation-delay: 0.18s; }
.arandano-chat__typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes arandano-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* Composer */
.arandano-chat__foot { padding: 10px 14px 14px; background: #fff; border-top: 1px solid var(--gray-100); flex-shrink: 0; }

/* persistent cart summary bar */
.arandano-chat__cartbar {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; padding: 8px 12px 8px 10px;
  margin-bottom: 10px; box-shadow: var(--shadow-sm); transition: 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  animation: arandano-cartbar-in 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.arandano-chat__cartbar:hover { border-color: var(--brand-300); box-shadow: 0 6px 16px rgba(96, 32, 214, 0.16); transform: translateY(-1px); }
.arandano-chat__cartbar:active { transform: translateY(0) scale(0.99); }
.arandano-chat__cartbar-stack { display: flex; flex-shrink: 0; }
.arandano-chat__cartbar-av { width: 32px; height: 32px; border-radius: 9px; overflow: hidden; border: 2px solid #fff; margin-left: -12px; box-shadow: var(--shadow-xs); background: var(--gray-100); }
.arandano-chat__cartbar-av:first-child { margin-left: 0; }
.arandano-chat__cartbar-av img { width: 100%; height: 100%; object-fit: cover; }
.arandano-chat__cartbar-txt { font-size: 13px; color: var(--gray-700); font-weight: var(--fw-medium); flex: 1; line-height: 1.3; }
.arandano-chat__cartbar-txt b { color: var(--brand-600); font-weight: var(--fw-semibold); }
.arandano-chat__cartbar-go { color: var(--gray-300); display: grid; place-items: center; transition: 0.18s; flex-shrink: 0; }
.arandano-chat__cartbar:hover .arandano-chat__cartbar-go { color: var(--brand-500); transform: translateX(2px); }
.arandano-chat__cartbar-go svg { width: 18px; height: 18px; }
@keyframes arandano-cartbar-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* quick reply chips */
.arandano-chat__chips { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 9px; scrollbar-width: none; }
.arandano-chat__chips::-webkit-scrollbar { display: none; }
/* Right-edge fade while there are more chips to scroll to (toggled in JS). */
.arandano-chat__chips.has-more {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
}
.arandano-chat__chip {
  white-space: nowrap; flex-shrink: 0; border: 1px solid var(--brand-200); background: var(--brand-50);
  color: var(--brand-700); font-size: 12.5px; font-weight: var(--fw-medium); padding: 7px 13px; border-radius: var(--radius-full);
  transition: 0.16s; animation: arandano-chip-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.arandano-chat__chip:hover { background: var(--brand-100); border-color: var(--brand-300); transform: translateY(-1px); }
.arandano-chat__chip:active { transform: translateY(0) scale(0.97); }
@keyframes arandano-chip-in { from { opacity: 0; transform: translateY(6px) scale(0.9); } to { opacity: 1; transform: none; } }

.arandano-chat__inputrow { display: flex; align-items: flex-end; gap: 8px; }
.arandano-chat__input {
  flex: 1; display: flex; align-items: center; gap: 8px; background: var(--gray-100); border-radius: 20px;
  padding: 0 6px 0 15px; min-height: 44px; border: 1.5px solid transparent; transition: 0.18s;
}
.arandano-chat__input:focus-within { background: #fff; border-color: var(--brand-400); box-shadow: 0 0 0 4px rgba(131, 85, 255, 0.12); }
.arandano-chat__input textarea {
  flex: 1; border: 0; background: transparent; outline: 0; font-size: 14px; color: var(--gray-900);
  padding: 11px 0; font-family: inherit; resize: none; max-height: 96px; line-height: 1.4;
}
.arandano-chat__input textarea::placeholder { color: var(--gray-400); }
.arandano-chat__send { width: 36px; height: 36px; border-radius: 50%; border: 0; flex-shrink: 0; display: grid; place-items: center; background: var(--brand-600); color: #fff; transition: 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.arandano-chat__send:disabled { background: var(--gray-200); color: var(--gray-400); cursor: not-allowed; }
.arandano-chat__send:not(:disabled):hover { background: var(--brand-700); transform: scale(1.08); }
.arandano-chat__send:not(:disabled):active { transform: scale(0.9); }
/* Optical centering: the paper plane points up-right, so nudge it down-left. */
.arandano-chat__send svg { width: 17px; height: 17px; transform: translate(-1px, 1px); }
.arandano-chat__branding { text-align: center; font-size: 10.5px; color: var(--gray-400); margin-top: 9px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.arandano-chat__branding b { color: var(--brand-600); font-weight: var(--fw-semibold); }
.arandano-chat__branding svg { width: 12px; height: 12px; color: var(--brand-500); }

/* ───────────────────────── PRODUCT WIDGET ───────────────────────── */
.arandano-chat__wcard { background: #fff; border: 1px solid var(--gray-200); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); width: 100%; }
.arandano-chat__whead { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--gray-100); }
.arandano-chat__whead svg { width: 11px; height: 11px; color: var(--brand-600); }
.arandano-chat__whead-ov { font-size: 10.5px; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-400); }
.arandano-chat__whead-ov b { color: var(--brand-600); }

.arandano-chat__pscroll { display: flex; gap: 11px; overflow-x: auto; padding: 13px 14px; scrollbar-width: thin; scroll-snap-type: x mandatory; }
.arandano-chat__pscroll::-webkit-scrollbar { height: 6px; }
.arandano-chat__pscroll::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 10px; }
.arandano-chat__pmini { width: 142px; flex-shrink: 0; scroll-snap-align: start; display: flex; flex-direction: column; }
.arandano-chat__pmini .arandano-chat__art { height: 104px; border-radius: 12px; overflow: hidden; margin-bottom: 9px; background: var(--gray-100); position: relative; }
.arandano-chat__psale { position: absolute; top: 7px; left: 7px; z-index: 1; background: #e11d48; color: #fff; font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: 0.05em; padding: 3px 7px; border-radius: 999px; }
.arandano-chat__pmini .arandano-chat__art img { width: 100%; height: 100%; object-fit: cover; }
.arandano-chat__pmini-nm { font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--gray-900); line-height: 1.3; min-height: 32px; text-decoration: none; display: block; }
a.arandano-chat__pmini-nm:hover { color: var(--brand-700); }
.arandano-chat__pmini-pr { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 9px; }
.arandano-chat__pprice { font-weight: var(--fw-bold); color: var(--gray-900); font-size: 13.5px; }
.arandano-chat__pprice-old { font-size: 11.5px; color: var(--gray-400); text-decoration: line-through; margin-left: 5px; }
.arandano-chat__pstock { font-size: 11px; color: var(--gray-400); }
.arandano-chat__pstock.is-out { color: var(--color-success-text); }

/* gradient illustration fallback when a product has no image */
.arandano-chat__arttile { width: 100%; height: 100%; display: grid; place-items: center; position: relative; background: linear-gradient(140deg, var(--brand-400), var(--brand-700)); }
.arandano-chat__arttile::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 30% 22%, rgba(255, 255, 255, 0.45), transparent 60%); }
.arandano-chat__arttile svg { width: 42%; height: 42%; position: relative; z-index: 1; color: #fff; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.16)); }

/* add-to-cart morph button */
.arandano-chat__add {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  border: 0; border-radius: 10px; background: var(--brand-600); color: #fff; font-weight: var(--fw-semibold);
  font-size: 12.5px; padding: 8px; transition: 0.2s; position: relative; overflow: hidden; margin-top: auto;
}
.arandano-chat__add:hover:not(:disabled) { background: var(--brand-700); }
.arandano-chat__add:active:not(:disabled) { transform: scale(0.97); }
.arandano-chat__add.is-added { background: var(--color-success); }
.arandano-chat__add:disabled { background: var(--gray-200); color: var(--gray-400); cursor: not-allowed; }
.arandano-chat__add svg { width: 14px; height: 14px; }

/* standalone action buttons (gateway "actions") */
.arandano-chat__actions { display: flex; flex-wrap: wrap; gap: 7px; }
.arandano-chat__action {
  display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 10px;
  background: var(--brand-600); color: #fff; font-weight: var(--fw-semibold); font-size: 12.5px; padding: 8px 13px;
  transition: 0.2s;
}
.arandano-chat__action:hover:not(:disabled) { background: var(--brand-700); }
.arandano-chat__action.is-added { background: var(--color-success); }
.arandano-chat__action:disabled { background: var(--gray-200); color: var(--gray-400); cursor: not-allowed; }
.arandano-chat__action svg { width: 14px; height: 14px; }

/* WhatsApp human-handoff button: branded green so it reads as "leave the bot" */
a.arandano-chat__action { text-decoration: none; }
.arandano-chat__action--whatsapp { background: #25d366; }
.arandano-chat__action--whatsapp:hover:not(:disabled) { background: #1ebe5d; }
.arandano-chat__action--whatsapp svg { width: 15px; height: 15px; }

/* ───────────────────────── RESPONSIVE ───────────────────────── */
/* Fullscreen panel on phones AND on short viewports (landscape phones, small
   desktop windows) where the 660px floating panel does not fit. Keep this in
   sync with the fullscreenQuery matchMedia in widget.js. */
@media (max-width: 640px), (max-height: 500px) {
  .arandano-chat__launcher { bottom: 18px; }
  .arandano-chat--bottom-right .arandano-chat__launcher { right: 18px; }
  .arandano-chat--bottom-left  .arandano-chat__launcher { left: 18px; }

  .arandano-chat__panel,
  .arandano-chat__panel.is-closing {
    inset: 0; width: 100vw; max-width: none; height: 100dvh; border-radius: 0;
    transform-origin: bottom center;
  }
  .arandano-chat__head { padding-top: calc(16px + env(safe-area-inset-top)); }
  .arandano-chat__foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }

  /* iOS Safari auto-zooms inputs with a font-size under 16px. */
  .arandano-chat__input textarea { font-size: 16px; }

  /* Hide launcher + teaser while the full-screen panel is open. */
  .arandano-chat.is-open .arandano-chat__launcher { opacity: 0; pointer-events: none; transform: scale(0.6); }
  .arandano-chat__teaser { display: none; }
}

/* ───────────────────────── ACCESSIBILITY ───────────────────────── */
.arandano-chat :focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .arandano-chat *,
  .arandano-chat *::before,
  .arandano-chat *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ───────────────────────── ORDER WIDGET ───────────────────────── */
.arandano-chat__order-card { /* no extra overrides needed — inherits wcard shell */ }

.arandano-chat__order-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }

/* Timeline stepper */
.arandano-chat__order-timeline { display: flex; flex-direction: column; gap: 0; }

.arandano-chat__order-step {
  display: grid;
  grid-template-columns: 20px 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 10px;
  position: relative;
}

.arandano-chat__order-step-dot {
  grid-column: 1; grid-row: 1;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gray-200); border: 2px solid var(--gray-200);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1; flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}
.arandano-chat__order-step-dot svg { width: 11px; height: 11px; color: #fff; }

.arandano-chat__order-step-line {
  grid-column: 1; grid-row: 2;
  width: 2px; background: var(--gray-200);
  margin: 2px auto 0; min-height: 18px;
  transition: background 0.2s;
}
/* Hide connector after the last step */
.arandano-chat__order-step:last-child .arandano-chat__order-step-line { display: none; }

.arandano-chat__order-step-label {
  grid-column: 2; grid-row: 1;
  font-size: 12.5px; color: var(--gray-400); font-weight: var(--fw-medium);
  line-height: 20px; padding-bottom: 16px;
}
.arandano-chat__order-step:last-child .arandano-chat__order-step-label { padding-bottom: 0; }

/* Done step */
.arandano-chat__order-step.is-done .arandano-chat__order-step-dot {
  background: var(--color-success); border-color: var(--color-success);
}
.arandano-chat__order-step.is-done .arandano-chat__order-step-line { background: var(--color-success); }
.arandano-chat__order-step.is-done .arandano-chat__order-step-label { color: var(--gray-700); }

/* Active step */
.arandano-chat__order-step.is-active .arandano-chat__order-step-dot {
  background: var(--brand-600); border-color: var(--brand-600);
  box-shadow: 0 0 0 4px rgba(113, 52, 245, 0.18);
}
.arandano-chat__order-step.is-active .arandano-chat__order-step-label {
  color: var(--gray-900); font-weight: var(--fw-semibold);
}

/* Terminal step — error (cancelled / failed) */
.arandano-chat__order-step--error .arandano-chat__order-step-dot {
  background: #dc2626; border-color: #dc2626;
}
.arandano-chat__order-step--error .arandano-chat__order-step-label { color: #dc2626; font-weight: var(--fw-semibold); }

/* Terminal step — neutral (refunded) */
.arandano-chat__order-step--neutral .arandano-chat__order-step-dot {
  background: var(--gray-400); border-color: var(--gray-400);
}
.arandano-chat__order-step--neutral .arandano-chat__order-step-label { color: var(--gray-500); font-weight: var(--fw-semibold); }

/* Meta grid (total / date / shipping) */
.arandano-chat__order-meta {
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 5px;
  align-items: baseline;
}
.arandano-chat__order-meta-label {
  font-size: 11px; font-weight: var(--fw-semibold); color: var(--gray-500);
  letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
.arandano-chat__order-meta-value {
  font-size: 13px; color: var(--gray-900); font-weight: var(--fw-medium); word-break: break-word;
}

/* Line items */
.arandano-chat__order-items {
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--gray-100); padding-top: 10px;
}
.arandano-chat__order-item { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.arandano-chat__order-item-name { font-size: 12.5px; color: var(--gray-700); font-weight: var(--fw-medium); flex: 1; }
.arandano-chat__order-item-qty { font-size: 12px; color: var(--gray-500); white-space: nowrap; flex-shrink: 0; }

/* Tracking pill */
.arandano-chat__order-tracking {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: var(--brand-50); border-radius: 8px; padding: 8px 10px;
}
.arandano-chat__order-tracking-label {
  font-size: 11px; font-weight: var(--fw-semibold); color: var(--brand-600);
  letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
.arandano-chat__order-tracking-num {
  font-size: 12.5px; color: var(--brand-700); font-weight: var(--fw-medium); word-break: break-all;
}