/**
 * Dana AI Assistant — storefront widget styles.
 *
 * Everything is scoped under .dana and resets aggressively. Merchant themes set
 * global rules on button/input/a that will otherwise leak in and wreck the
 * layout — that is the single most common way an embedded widget breaks.
 */

.dana {
  --dana-accent: #1f6feb;
  /* Message bubbles, split out so a merchant on a theming plan can set them
     independently of the accent. They DEFAULT to the previous hard-coded
     values, so a shop that never touches them renders exactly as before —
     the widget's own defaults live here, not in the server payload, which is
     why the bootstrap omits absent keys rather than sending copies of these. */
  --dana-bot-bg: #ffffff;
  --dana-bot-fg: var(--dana-text);
  --dana-user-bg: var(--dana-accent);
  --dana-user-fg: #ffffff;
  --dana-surface: #ffffff;
  --dana-text: #1a1a1a;
  --dana-muted: #6b7280;
  --dana-border: #e5e7eb;
  --dana-radius: 16px;

  position: fixed;
  /* Offsets from the chosen corner. Set as inline custom properties by the
     widget when the merchant nudges it; these are the defaults, so a shop that
     never touches the setting renders exactly as before. */
  --dana-offset-x: 20px;
  --dana-offset-y: 20px;

  bottom: var(--dana-offset-y);
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--dana-text);
}

.dana--bottom-right { right: var(--dana-offset-x); align-items: flex-end; }
.dana--bottom-left  { left: var(--dana-offset-x);  align-items: flex-start; }

.dana *,
.dana *::before,
.dana *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ launcher */

.dana__launcher {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  /* The caption is centred under the mark, and the mark still does not move.
     Both halves matter, and an earlier version of this file rejected centring
     because it could not have both:

       - Centre inside a column sized by the CAPTION and the mark slides inward
         off the corner, by a different distance for every label, since the
         merchant writes the text.
       - The open state hides the caption, so the column resizes and the mark
         jumps sideways on every open and close.

     Fixed by making the column always exactly the width of the mark and taking
     the caption out of flow. The column can then never be resized by text, so
     the mark is pinned to the corner in both states, and the caption is free to
     overhang symmetrically on both sides — which is the centring that was
     actually wanted. */
  position: relative;
  width: 56px;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #1f2430;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease;
  text-transform: none;
  letter-spacing: normal;
}

.dana__launcher:hover { transform: translateY(-1px); }
/* The ring goes on the mark, not the button. The button is a transparent
   column now that the caption sits below the tile, so a ring drawn on it
   traces empty page. Two-tone because that page belongs to the merchant and
   can be any colour: the white ring reads against a dark storefront, the dark
   halo just outside it reads against a light one. The first shadow is the
   launcher's own, repeated because `box-shadow` replaces rather than adds. */
.dana__launcher:focus-visible { outline: none; }
.dana__launcher:focus-visible .dana__launcher-mark {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18), 0 0 0 6px rgba(31, 36, 48, 0.55);
}
.dana__launcher-mark {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--dana-accent);
  color: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.dana__launcher:hover .dana__launcher-mark { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22); }
/* 40, not 30 — and the number comes from the glyph's own geometry, not taste.
   `danaMark` is a 0 0 64 64 viewBox whose path runs 6→58 on both axes, so 81%
   of the box is ink and 9.4% is baked-in margin per side. At 30px that left
   24.4px of ink centred in a 56px tile: 43% fill, 15.8px of flat accent on
   every side, which read as a small mark floating in a large square rather
   than as an icon. 40px puts the ink at 32.5px — 58% fill, 11.7px of surround
   — which is the proportion a launcher glyph normally sits at.
   The tile stays 56px: it is the hit target, and it is what `.dana--open`
   and the corner alignment above are both measured against. */
.dana__launcher svg { width: 40px; height: 40px; flex: none; }
/* A merchant's own logo, in place of the built-in glyph. `contain` and not
   `cover`: a logo cropped to fill a circle is a logo the merchant did not
   approve. The rounding sits on the box so a square upload still looks at
   home in a round launcher.
   Smaller than the built-in mark on purpose. We know `danaMark` carries 9.4%
   of internal margin and can size past it; an uploaded PNG may be trimmed to
   its ink, and at 40px a trimmed logo would touch the tile edge. 36px is the
   bigger-but-safe reading of the same complaint. */
.dana__launcher-logo {
  width: 36px;
  height: 36px;
  flex: none;
  display: block;
  border-radius: 6px;
  object-fit: contain;
}
/* Dana's own portrait, which is the default launcher until a merchant on the
   theming plan replaces it. It breaks both rules above deliberately.

   The 40px reasoning is about a flat mark with margin baked into its viewBox.
   A face is not a mark: at 40px inside a 56px tile the eyes and mouth are a few
   pixels across and she reads as a smudge in a coloured square. So she takes
   the whole tile, and the accent square she would otherwise sit on goes away —
   the artwork carries its own cream ground, which is also why she survives
   whatever accent colour a merchant picks.

   Circular rather than the 16px squircle, because the artwork is a disc with
   transparent corners; a rounded square would show four slivers of accent
   around her. The radius moves to the mark so the shadow and the focus ring
   follow the shape the shopper actually sees. */
.dana__launcher-mark--portrait {
  background: none;
  border-radius: 50%;
}
.dana__launcher-logo--portrait {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.dana__launcher-label {
  /* Out of flow, so the caption cannot change the column's width. Centred on
     the mark and allowed to overhang it on both sides. */
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.dana--open .dana__launcher-label { display: none; }
/* `width` is no longer set here: the launcher is always 56px, so there is
   nothing left for the open state to correct. */
.dana--open .dana__launcher { gap: 0; justify-content: center; }

/* --------------------------------------------------------------------- panel */

.dana__panel {
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: calc(100vw - 40px);
  height: 560px;
  max-height: calc(100vh - 120px);
  background: var(--dana-surface);
  border: 1px solid var(--dana-border);
  border-radius: var(--dana-radius);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.dana__panel[hidden] { display: none; }

.dana__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--dana-accent);
  color: #fff;
  flex: none;
}

.dana__title { margin-inline-end: auto; font-weight: 600; font-size: 15px; }

.dana__close {
  display: inline-flex;
  padding: 4px;
  margin: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.dana__close svg { width: 20px; height: 20px; }
.dana__close:hover { background: rgba(255, 255, 255, 0.18); }

/* ------------------------------------------------------------------ messages */

.dana__messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f9fafb;
}

.dana-msg { display: flex; flex-direction: column; gap: 8px; max-width: 85%; }
.dana-msg--user { align-self: flex-end; align-items: flex-end; }
.dana-msg--bot  { align-self: flex-start; }

/* Something the shopper did, not something anyone said. Centred and quiet so
   it reads as a timeline note rather than a turn in the conversation — and
   icon-first so the three kinds are told apart without reading them. */
.dana-msg--event {
  align-self: center;
  max-width: 90%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--dana-muted);
  text-align: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.035);
}

.dana-msg__eventicon { flex: none; opacity: 0.75; }
.dana-msg__eventtext { min-width: 0; }
.dana-msg__time {
  color: var(--dana-muted);
  font-size: 10px;
  line-height: 1;
}
.dana-msg--event .dana-msg__time { flex: none; }

.dana-msg__bubble {
  padding: 10px 14px;
  border-radius: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dana-msg--bot .dana-msg__bubble {
  background: var(--dana-bot-bg);
  color: var(--dana-bot-fg);
  border: 1px solid var(--dana-border);
  border-bottom-left-radius: 4px;
}

.dana-msg--user .dana-msg__bubble {
  background: var(--dana-user-bg);
  color: var(--dana-user-fg);
  border-bottom-right-radius: 4px;
}

/* typing indicator */
.dana-typing { display: flex; gap: 4px; align-items: center; min-height: 22px; }
.dana-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dana-muted);
  animation: dana-bounce 1.2s infinite ease-in-out;
}
.dana-typing span:nth-child(2) { animation-delay: 0.15s; }
.dana-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes dana-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .dana-typing span { animation: none; opacity: 0.6; }
  .dana__launcher { transition: none; }
  /* Nothing slides, nothing blinks, and nothing is delayed. The JS checks the
     same query and skips the streaming outright, so the text is whole; these
     two lines only make sure a card cannot arrive late or invisible. */
  .dana-enter { animation: none !important; }
  .dana-msg__bubble--typing::after { animation: none; opacity: 0.55; }
}

/* ------------------------------------------------------- arriving on screen */

/* One entrance, used by messages, events and cards alike. Short and small:
   28px of travel over 260ms reads as "this just arrived", where anything
   longer reads as the widget being slow. Applied once per message — see
   `_revealed` in the widget — so a repaint never replays it. */
@keyframes dana-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.dana-enter { animation: dana-enter 0.26s cubic-bezier(0.2, 0.7, 0.3, 1) both; }

/* The caret that says the sentence is still being written. On the last line
   box, so it sits after the final character rather than under the bubble. */
.dana-msg__bubble--typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-inline-start: 2px;
  vertical-align: -0.15em;
  background: currentColor;
  opacity: 0.55;
  animation: dana-caret 1s steps(2, start) infinite;
}
@keyframes dana-caret { 0%, 50% { opacity: 0.55; } 50.01%, 100% { opacity: 0; } }

/* ------------------------------------------------------------------ products */

/* A rail, not a wall. Six cards stacked two-up filled a 380px widget and
   pushed the reply that explained them off the top of the conversation.
   `clamp` keeps roughly two and a bit cards in view at any panel width, and
   that clipped third card is the only affordance saying there is more. */
.dana-products {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* Scrollbar hidden, not merely thinned. The arrows are the affordance now
     (see `carousel` in the JS), and a 6px bar under a 380px panel was both the
     ugliest thing in the widget and, on macOS where overlay scrollbars are not
     painted until you scroll, invisible to the shopper who most needed it.
     Scrolling itself is untouched — drag, swipe and shift-wheel all still work,
     and the rail keeps its own keyboard focus. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dana-products::-webkit-scrollbar { display: none; }

/* The rail's positioning context, so the arrows can sit on top of it rather
   than take a gutter each — this panel is 380px and two tap targets beside the
   rail would cost most of a card. */
.dana-carousel { position: relative; }

.dana-carousel__arrow {
  position: absolute;
  top: 50%;
  /* Nudged up by half the card's footer so the arrow sits over the image
     rather than over the title, where it would cover the words. */
  transform: translateY(-70%);
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dana-border);
  border-radius: 50%;
  background: #fff;
  color: #1a1a1a;
  cursor: pointer;
  /* Above the cards, below the variant picker sheet. */
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.dana-carousel__arrow:hover { background: #f6f6f7; border-color: var(--dana-accent); }
.dana-carousel__arrow:focus-visible { outline: 2px solid var(--dana-accent); outline-offset: 1px; }
.dana-carousel__arrow[hidden] { display: none; }
.dana-carousel__arrow--prev { left: 2px; }
.dana-carousel__arrow--next { right: 2px; }

/* Touch gets the swipe and does not need a button in the way of it. Pointer
   coarseness, not width — a small laptop still has a mouse and still needs
   these. */
@media (pointer: coarse) {
  .dana-carousel__arrow { display: none; }
}

.dana-product {
  flex: 0 0 clamp(128px, 43%, 168px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dana-border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}
.dana-product:hover { border-color: var(--dana-accent); }

.dana-product__img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.dana-product__body { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.dana-product__title {
  font-size: 13px; font-weight: 500; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dana-product__price { font-size: 13px; color: var(--dana-muted); }

/* Shown only when availability is positively known to be false — never for
   "we don't know". See renderProducts. */
.dana-product__soldout {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #8a1c1c;
}

/* The card is a <div> now, not an <a> — it has to be able to contain a button,
   and a <button> inside an <a> is invalid and unclickable. The link half is
   this element; the Add to cart button is its sibling. */
.dana-product__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  flex: 1;
}

.dana-product__add {
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-top: 1px solid var(--dana-border);
  background: #fff;
  color: var(--dana-accent);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  width: 100%;
}
.dana-product__add:hover { background: var(--dana-accent); color: #fff; }
.dana-product__options {
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-top: 1px solid var(--dana-border);
  background: #fff;
  color: #3f4752;
  font: inherit;
  font-size: 12px;
  text-align: start;
  cursor: pointer;
}
.dana-product__options::after { content: " +"; float: right; color: var(--dana-accent); }
.dana-product__options[aria-expanded="true"]::after { content: " −"; }
[dir="rtl"] .dana-product__options::after { float: left; }
.dana-product--expanded { flex-basis: min(300px, calc(100vw - 76px)); }
.dana-product__picker { padding: 0 8px 8px; }
.dana-product__picker .dana-picker { margin-top: 0; border-radius: 8px; }

/* ------------------------------------------------------------ variant picker */

.dana-picker {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--dana-border);
  border-radius: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dana-picker__row { display: flex; flex-direction: column; gap: 6px; }
.dana-picker__label { font-size: 12px; font-weight: 600; color: var(--dana-muted); }
.dana-picker__values { display: flex; flex-wrap: wrap; gap: 6px; }

.dana-picker__btn {
  margin: 0;
  padding: 6px 11px;
  border: 1px solid var(--dana-border);
  border-radius: 999px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}
.dana-picker__btn:hover:not(:disabled) { border-color: var(--dana-accent); }
.dana-picker__btn--on {
  border-color: var(--dana-accent);
  background: var(--dana-accent);
  color: #fff;
}
/* Sold out in this combination. Shown and struck through rather than removed —
   a value that vanishes looks like a rendering bug, and "we don't have that in
   your size" is information the shopper wants. */
.dana-picker__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

.dana-picker__note { font-size: 12px; color: var(--dana-muted); }

.dana-picker__confirm {
  margin: 0;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--dana-accent);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}
.dana-picker__confirm:disabled { opacity: 0.45; cursor: not-allowed; }

/* --------------------------------------------------------------- message CTA */

.dana-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.dana-cta__btn {
  margin: 0;
  padding: 8px 13px;
  border: 1px solid var(--dana-border);
  border-radius: 999px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}
.dana-cta__btn:hover { border-color: var(--dana-accent); }
.dana-cta__btn--primary {
  border-color: var(--dana-accent);
  background: var(--dana-accent);
  color: #fff;
}

/* -------------------------------------------------------------- quick actions */

.dana__quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; background: #f9fafb; }
.dana__quick[hidden] { display: none; }

.dana-quick__btn {
  margin: 0;
  padding: 7px 12px;
  border: 1px solid var(--dana-border);
  border-radius: 999px;
  background: #fff;
  color: var(--dana-accent);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}
.dana-quick__btn:hover { border-color: var(--dana-accent); }

/* ---------------------------------------------------------------------- form */

.dana__form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--dana-border);
  background: #fff;
  flex: none;
}
/* `display: flex` above beats the `hidden` attribute's UA `display: none`, so
   without this the pre-chat gate would render *above* a composer it is meant
   to replace. Same rule `.dana__contact` already carries. */
.dana__form[hidden] { display: none; }

.dana__input {
  flex: 1;
  min-width: 0;
  height: 42px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--dana-border);
  border-radius: 21px;
  background: #fff;
  font: inherit;
  color: var(--dana-text);
}
.dana__input:focus { outline: none; border-color: var(--dana-accent); box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.15); }

.dana__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dana-accent);
  color: #fff;
  cursor: pointer;
}
.dana__send svg { width: 18px; height: 18px; }
.dana__send:disabled { opacity: 0.5; cursor: default; }

/* -------------------------------------------------------------------- mobile */

@media (max-width: 480px) {
  /* Horizontal offset deliberately ignored here: the panel spans the screen
     on a phone, so nudging it sideways would push it off-screen rather than
     move it. The vertical offset still applies — clearing a sticky
     add-to-cart bar is exactly the case that needs it, and that bar is a
     mobile pattern. */
  .dana {
    bottom: max(12px, var(--dana-offset-y));
    right: 12px;
    left: 12px;
    align-items: flex-end;
  }
  .dana--bottom-left { align-items: flex-start; }

  .dana__panel {
    width: 100%;
    max-width: none;
    height: calc(100vh - 100px);
    height: calc(100dvh - 100px);
  }

  /* Was `grid-template-columns: 1fr` — one card per row, so six results meant
     six screens of scrolling on the device most likely to see them. The rail
     needs no narrow-screen variant; it just gets swiped instead of dragged. */
  .dana-product { flex-basis: 46%; }
}

.dana--desktop-only { display: flex; }
@media (max-width: 767px) {
  .dana--desktop-only { display: none; }
}

/* ------------------------------------------------------------ human handoff */

/* Sits in the header next to Close. Understated on purpose — it should be
   findable the moment someone wants it, without shouting "the bot is bad" at
   shoppers who are perfectly happy. */
.dana__human {
  margin: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  font: inherit;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.dana__new-chat { white-space: nowrap; }
.dana__human:hover { background: rgba(255, 255, 255, 0.28); }
.dana__human[hidden] { display: none; }

/* An agent's messages must not read as "the bot, but different". Distinct
   colour, and the person's name above the bubble. */
.dana-msg--agent { align-self: flex-start; }
.dana-msg__who {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.dana-msg__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  /* `.dana *` already sets border-box, so a theme's `span { padding }` keeps
     the 20px circle but squashes the initials inside it. Explicit zero. */
  padding: 0;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.dana-msg__name {
  color: var(--dana-accent);
}
.dana-msg--agent .dana-msg__bubble {
  background: #eef6ff;
  border: 1px solid var(--dana-accent);
  color: #10233d;
  border-radius: 14px 14px 14px 4px;
  padding: 10px 12px;
}

/* "You're chatting with Sara" — directly above the composer, where the shopper
   is looking as they type. */
.dana__status {
  padding: 6px 14px;
  font-size: 12px;
  color: #5c6470;
  background: #f6f8fa;
  border-top: 1px solid #e6e9ec;
}
.dana__status[hidden] { display: none; }

/* The nobody-is-online fallback. */
.dana__contact { padding: 12px 14px; border-top: 1px solid #e6e9ec; background: #fbfcfd; }
.dana__contact[hidden] { display: none; }
.dana-contact__form { display: flex; flex-direction: column; gap: 8px; }
.dana-contact__input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid #d3d8de;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
}
.dana-contact__input:focus {
  outline: none;
  border-color: var(--dana-accent);
  box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.16);
}
.dana-contact__submit {
  border: 0;
  background: var(--dana-accent);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.dana-contact__submit:disabled { opacity: 0.6; cursor: default; }
.dana-contact__error { font-size: 12px; color: #b42318; }
.dana-contact__error[hidden] { display: none; }

.dana-offer-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(17, 24, 39, 0.48);
}
.dana-offer-modal[hidden] { display: none; }
.dana-offer-modal__card {
  position: relative;
  width: min(380px, calc(100vw - 40px));
  box-sizing: border-box;
  padding: 26px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(17, 24, 39, 0.24);
}
.dana-offer-modal__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--dana-accent);
  font-weight: 700;
}
.dana-offer-modal__brand svg { width: 32px; height: 32px; }
.dana-offer-modal__logo {
  width: 32px;
  height: 32px;
  display: block;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.dana-offer-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5c6470;
  cursor: pointer;
}
.dana-offer-modal__close:hover { background: #f2f4f7; }
.dana-offer-modal__close svg { width: 18px; height: 18px; }

/* Pre-chat gate: "Skip for now". Deliberately quiet next to the accent-filled
   submit button, but a real, full-width target — a skip control that has to be
   hunted for on a phone is a gate pretending to be a request. */
.dana-prechat__skip {
  border: 0;
  background: none;
  color: #5c6470;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  padding: 6px 0;
  cursor: pointer;
}
.dana-prechat__skip:hover { color: #1f2430; }

/* Attribution on the free tiers. Present only when the bootstrap sent it —
   paid plans buy `whiteLabel` and the server omits the whole block.

   Quiet on purpose: this sits on a merchant's storefront and its job is to be
   legible to the curious, not to compete with their brand. `display: block`
   because it is the last child of the panel and should sit under the composer
   rather than beside it. */
.dana__credit {
  display: block;
  padding: 6px 14px 10px;
  font-size: 11px;
  line-height: 1;
  text-align: center;
  color: var(--dana-muted);
  text-decoration: none;
  background: var(--dana-surface);
}
.dana__credit[hidden] { display: none; }
/* The attribution is a 24x24 mark (App Store requirement 5.1.4); the words are
   its tooltip and accessible name. Quiet until pointed at. */
.dana__credit:has(.dana__credit-mark) {
  display: flex;
  justify-content: center;
  padding: 4px 14px 8px;
}
.dana__credit-mark {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
a.dana__credit:hover .dana__credit-mark,
a.dana__credit:focus-visible .dana__credit-mark { opacity: 1; }
a.dana__credit:hover { color: var(--dana-accent); text-decoration: underline; }
a.dana__credit:focus-visible {
  outline: 2px solid var(--dana-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---- The action engine's step -------------------------------------------
 *
 * A summary the shopper confirms before anything happens, and chips for a slot
 * the engine still needs. Styled to read as a receipt rather than a chat
 * bubble: this is the one moment in the conversation where the shopper is
 * agreeing to something, and it should not look like more talking.
 */
.dana-step { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }

.dana-step__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dana-step__chip {
  font: inherit;
  font-size: 13px;
  padding: 6px 12px;
  border: 1px solid var(--dana-border, #e5e7eb);
  border-radius: 999px;
  background: var(--dana-surface);
  color: var(--dana-text);
  cursor: pointer;
}
.dana-step__chip:hover:not(:disabled) { border-color: var(--dana-accent); color: var(--dana-accent); }
.dana-step__chip:disabled { opacity: 0.5; cursor: default; }

.dana-step__summary {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--dana-border, #e5e7eb);
  border-radius: 10px;
  background: var(--dana-surface);
}
.dana-step__thumb {
  width: 44px; height: 44px;
  object-fit: cover;
  border-radius: 6px;
  flex: 0 0 auto;
}
.dana-step__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dana-step__title {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  /* Catalogue titles run to sixteen words. Two lines, then ellipsis — the
   * shopper needs to recognise the item, not read its full SEO name. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dana-step__line { font-size: 12px; color: var(--dana-muted); }
.dana-step__total { font-size: 13px; font-weight: 600; }

.dana-step__actions { display: flex; gap: 8px; }
.dana-step__confirm, .dana-step__cancel {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
}
.dana-step__confirm { background: var(--dana-accent); color: #fff; flex: 1; }
.dana-step__cancel {
  background: transparent;
  color: var(--dana-muted);
  border-color: var(--dana-border, #e5e7eb);
}
.dana-step__confirm:disabled, .dana-step__cancel:disabled { opacity: 0.5; cursor: default; }
.dana-step__confirm:focus-visible, .dana-step__cancel:focus-visible, .dana-step__chip:focus-visible {
  outline: 2px solid var(--dana-accent);
  outline-offset: 2px;
}