/* Cloud Auto car advisor. Built on the showroom theme's own tokens (--fg, --body, --label-c, --line, the two fonts, the
   jewels), so it takes the colours of the ground it sits on: the smoked-jewel glass of the home page and the lit studio
   of the cars pages. Fallbacks keep it readable on a page without the theme. The theme's rule holds: panels and
   messages are square, only the controls are pills. Logical properties throughout, so Arabic mirrors by itself. */
.ca-advisor{
  --ca-fg:var(--fg, #0C1A3D); --ca-body:var(--body, #2B3754); --ca-label:var(--label-c, #4B5673); --ca-line:var(--line, rgb(12 26 61 / .16));
  --ca-display:var(--font-display, 'Spectral', Georgia, serif); --ca-text:var(--font-text, 'Hanken Grotesk', system-ui, sans-serif);
  --ca-small:var(--fs-small, 15px); --ca-tap:var(--tap, 44px); --ca-ease:var(--ease, cubic-bezier(.2, .7, .15, 1));
  /* surfaces follow the ground's text colour, so they work on every look of the theme (dark jewels, studio, lit) */
  --ca-field:color-mix(in srgb, var(--ca-fg) 5%, transparent); --ca-field-line:color-mix(in srgb, var(--ca-fg) 24%, transparent);
  --ca-field-focus:color-mix(in srgb, var(--ca-fg) 55%, transparent);
  --ca-card:color-mix(in srgb, var(--ca-fg) 3%, transparent); --ca-card-hover:color-mix(in srgb, var(--ca-fg) 8%, transparent);
  --ca-card-line:color-mix(in srgb, var(--ca-fg) 14%, transparent);
  --ca-pill-line:color-mix(in srgb, var(--ca-fg) 30%, transparent); --ca-pill-bg:color-mix(in srgb, var(--ca-fg) 6%, transparent);
  --ca-send:var(--sapphire, #1D3366); --ca-send-hover:var(--sapphire-deep, #0C1A3D); --ca-send-fg:#F4F5F8;
  position:relative;color:var(--ca-fg);font-family:var(--ca-text)}
.ca-advisor[hidden],.ca-advisor [hidden]{display:none !important}

/* ---- inline: the chat inside the page's glass panel (the panel gives the heading and the note) */
.ca-advisor--inline{padding:22px clamp(20px, 3vw, 36px) 24px;border-block-end:1px solid var(--ca-line)}
.ca-advisor__panel{display:flex;flex-direction:column;gap:12px}

/* ---- the pill and its own panel (pages without an advisor panel) */
.ca-advisor__toggle{display:inline-flex;align-items:center;justify-content:center;block-size:var(--ca-tap);padding:0 22px;border-radius:999px;
  font:500 var(--ca-small)/1 var(--ca-text);white-space:nowrap;cursor:pointer;
  background:var(--ca-send);color:var(--ca-send-fg);border:1px solid rgb(255 255 255 / .18);transition:background .25s}
.ca-advisor__toggle:hover{background:var(--ca-send-hover)}
.ca-advisor:not(.ca-advisor--inline) .ca-advisor__panel{margin-block-start:12px;padding:20px;max-block-size:min(80vh, 40rem);
  background:var(--s-glass-strong, rgb(240 243 247 / .92));color:var(--ink, #0C1A3D);border:1px solid var(--s-edge, rgb(255 255 255 / .62));
  box-shadow:var(--s-shadow, 0 24px 60px -28px rgb(18 28 52 / .45));
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5)}
.ca-advisor__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ca-advisor__title{margin:0;font:300 24px/1.15 var(--ca-display)}
.ca-advisor__close{inline-size:var(--ca-tap);block-size:var(--ca-tap);border-radius:999px;border:1px solid var(--ca-line);background:none;color:inherit;
  font:300 22px/1 var(--ca-text);cursor:pointer}
.ca-advisor__note{margin:0;font-size:13px;line-height:1.5;color:var(--ca-label)}

/* ---- the conversation */
.ca-advisor__log{list-style:none;margin:0;padding:0;display:grid;gap:14px;overflow-y:auto;overscroll-behavior:contain;
  max-block-size:min(62vh, 36rem);scrollbar-width:thin}
.ca-advisor__log:empty{display:none}
.ca-msg{display:grid;gap:10px;margin:0;font-size:var(--ca-small);line-height:1.55;animation:ca-in .35s var(--ca-ease) both}
.ca-msg__text{white-space:pre-line;overflow-wrap:anywhere}
.ca-msg--user{justify-self:end;max-inline-size:min(40em, 88%);padding:12px 16px;background:var(--ca-fg);color:var(--ivory, #E7E8EB)} /* the theme's .msg.you wins where it is loaded */
.ca-msg--assistant{max-inline-size:44em;color:var(--ca-fg)}
.ca-msg--assistant.is-pending .ca-msg__text:empty{display:none}
.ca-msg__check{margin:0;padding-inline-start:12px;border-inline-start:2px solid var(--ca-line);font-size:13px;color:var(--ca-label)}
@keyframes ca-in{from{opacity:0;transform:translateY(6px)}}

/* the cars an answer points to: the theme's pick rows (class "pick"), without photos */
.ca-cards{display:grid;gap:8px}
.ca-cards__label{margin:0;font:500 12px/1.3 var(--ca-text);letter-spacing:.2em;text-transform:uppercase;color:var(--ca-label)}
.ca-cards__list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
/* fallbacks first; the theme's .pick colours (per look) take over where the theme is loaded */
.ca-card__link{background:var(--ca-card);border:1px solid var(--ca-card-line);color:inherit;text-decoration:none;transition:background .3s}
.ca-card__link:hover{background:var(--ca-card-hover)}
.ca-advisor .ca-card__link{display:grid;grid-template-columns:1fr auto;grid-template-areas:'nm pr';align-items:center;gap:4px 16px;padding:12px 14px}
.ca-card__name{grid-area:nm;font:300 19px/1.2 var(--ca-display)}
.ca-card__price{grid-area:pr;font:400 17px/1.2 var(--ca-display);text-align:end;white-space:nowrap}
.ca-card__from{font:400 13px var(--ca-text);color:var(--ca-label)}
.ca-card__meta{display:block;font:400 13px/1.3 var(--ca-text);color:var(--ca-label);white-space:normal}
.ca-num{font-variant-numeric:lining-nums tabular-nums;unicode-bidi:isolate}

/* what to open, and WhatsApp */
.ca-advisor__action{justify-self:start;display:inline-flex;align-items:center;gap:10px;padding-block-end:4px;border-block-end:1px solid var(--ca-line);
  color:var(--ca-fg);text-decoration:none;font-size:var(--ca-small);transition:gap .3s var(--ca-ease)}
.ca-advisor__action::after{content:"→";font-family:var(--ca-text)}
.ca-advisor[dir="rtl"] .ca-advisor__action::after{content:"←"}
.ca-advisor__action:hover{gap:14px}
.ca-advisor__wa{justify-self:start;display:inline-flex;align-items:center;block-size:40px;padding:0 18px;border-radius:999px;
  border:1px solid var(--ca-pill-line);background:var(--ca-pill-bg);color:var(--ca-fg);text-decoration:none;font:500 14px/1 var(--ca-text);
  transition:background .25s}
.ca-advisor__wa:hover{background:var(--ca-card-hover)}

/* "Checking our list…" */
.ca-advisor__status{margin:0;font-size:13px;line-height:1.4;color:var(--ca-label)}
.ca-advisor__status:empty{display:none}

/* ---- the question */
.ca-advisor__form{display:flex;gap:10px;align-items:flex-end;padding:6px;padding-inline-start:16px;
  background:var(--ca-field);border:1px solid var(--ca-field-line);transition:border-color .25s}
.ca-advisor__form:focus-within{border-color:var(--ca-field-focus)}
.ca-advisor__input{flex:1 1 auto;min-inline-size:0;min-block-size:var(--ca-tap);max-block-size:9.5em;margin:0;padding:11px 0;resize:none;
  background:none;border:0;outline:0;color:inherit;font:400 16px/1.4 var(--ca-text)}
.ca-advisor__input::placeholder{color:var(--ca-label);opacity:1}
.ca-advisor__send{flex:none;display:inline-flex;align-items:center;justify-content:center;block-size:var(--ca-tap);padding:0 22px;border-radius:999px;
  font:500 var(--ca-small)/1 var(--ca-text);cursor:pointer;background:var(--ca-send);color:var(--ca-send-fg);border:1px solid rgb(255 255 255 / .18);
  transition:background .25s}
.ca-advisor__send:hover{background:var(--ca-send-hover)}
.ca-advisor__reset{align-self:flex-end;padding:6px 0;background:none;border:0;color:var(--ca-label);font:400 13px/1.3 var(--ca-text);cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--ca-line);text-underline-offset:4px}
.ca-advisor__reset:hover{color:var(--ca-fg)}

.ca-advisor button:focus-visible,.ca-advisor a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.ca-advisor__form:has(.ca-advisor__input:focus-visible){outline:2px solid var(--ca-field-focus);outline-offset:2px}
.ca-vh{position:absolute !important;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Numbers and Latin names inside Arabic text keep their own direction. */
.ca-advisor[dir="rtl"] .ca-card__price,.ca-advisor[dir="rtl"] .ca-card__name{unicode-bidi:isolate}

@media (max-width:599px){
  .ca-advisor .ca-card__link{grid-template-columns:1fr;grid-template-areas:'nm' 'pr'}
  .ca-advisor .ca-card__price{text-align:start}
  .ca-msg--user{max-inline-size:92%}
  .ca-advisor__send{padding:0 16px}
}
@media (prefers-reduced-motion:reduce){.ca-msg{animation:none}.ca-advisor__log{scroll-behavior:auto}}