/* Commerce Lab — hidden internal product-consultation chat.
   Prefix: cl-.

   Typography is set here rather than inherited. The app runs on Arial at
   dashboard sizes; this is a surface someone sits in front of and reads, so it
   gets a system UI face with a large x-height, bigger type throughout, and
   properly dark text. Every grey that was decorative has been darkened —
   var(--cl-faint) on white is roughly 2.5:1 and fails the readable threshold. */

.cl, .cl-shell, .cl-side, .cl-start {
  --cl-font: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
             system-ui, "Helvetica Neue", sans-serif;
  --cl-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* text, from strongest to faintest — none of them below 4.5:1 on white */
  --cl-ink:    #10161d;
  --cl-body:   #1f2a35;
  --cl-muted:  #4a565f;
  --cl-faint:  #66727b;
  --cl-line:   #d3dade;
  --cl-line-2: #e6eaed;

  font-family: var(--cl-font);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

/* ── shell: chat left, concierge right ────────────────────────────────── */
.cl-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1.5rem;
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 1.25rem 1.5rem;
  align-items: start;
}

.cl {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: calc(100dvh - 116px);
  font-size: 1.15rem;
}

.cl-head { padding: 0.25rem 0 0.75rem; }
.cl-head__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cl-head__left { min-width: 0; }
.cl-head__title { font-weight: 700; font-size: 1.6rem; color: var(--bam-slate); letter-spacing: -0.01em; }
.cl-head__hint { font-size: 1rem; color: var(--cl-faint); margin-top: 0.15rem; }
.cl-head__new {
  flex: 0 0 auto; background: #fff; border: 1px solid var(--cl-line); border-radius: 10px;
  padding: 0.5rem 1rem; font-size: 1.02rem; color: var(--bam-slate);
  text-decoration: none; font-weight: 600; white-space: nowrap;
}
.cl-head__new:hover { border-color: var(--bam-slate); background: #f4f7f8; }

.cl .messages { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1rem; padding: 0.5rem 0 1rem; }

/* Sticky, not fixed: a fixed bar anchors to the viewport and drifts away from
   its column the moment the layout has more than one. */
.cl .chat-form-wrapper {
  position: sticky;
  bottom: 0;
  z-index: 900;
  background: #fff;
  border: 1px solid var(--cl-line-2);
  border-radius: 14px;
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.07);
  padding: 0.9rem 1rem 1rem;
  margin-top: auto;
}
.cl .chat-form-wrapper textarea {
  width: 100%; border: 1px solid var(--cl-line); border-radius: 10px;
  padding: 0.95rem 1.1rem; font-family: var(--cl-font); font-size: 1.2rem;
  line-height: 1.5; resize: vertical; color: var(--cl-ink);
}
.cl .chat-form-wrapper textarea:focus { outline: 2px solid var(--bam-slate); outline-offset: 1px; border-color: transparent; }
.cl .form-actions { display: flex; justify-content: flex-end; margin-top: 0.6rem; }
.cl .form-actions input[type="submit"] {
  background: var(--bam-slate); color: #fff; border: 0; border-radius: 10px;
  padding: 0.7rem 1.8rem; font-size: 1.1rem; font-weight: 600; cursor: pointer;
}
.cl .form-actions input[type="submit"]:disabled { background: var(--cl-faint); cursor: default; }
.cl-status { padding: 0.2rem 0.25rem 0.5rem; font-size: 0.93rem; color: var(--cl-faint); min-height: 1.3rem; }

/* ── chat scaffolding ─────────────────────────────────────────────────── */
.cl .event-row { display: flex; gap: 0.9rem; align-items: flex-start; }
.cl .event-time { font-size: 0.86rem; color: var(--cl-faint); font-family: var(--cl-mono); white-space: nowrap; padding-top: 1rem; min-width: 4.5rem; text-align: right; }
.cl .event-body { flex: 1; min-width: 0; }
.cl .event-bubble { border-radius: 0.9rem; padding: 1.05rem 1.3rem; font-size: 1.25rem; line-height: 1.75; }
.cl .event-label { font-weight: 700; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.35rem; }
.cl .bubble--streaming { opacity: 0.9; }
.cl .event-start { background: #e4ecef; border-left: 5px solid var(--bam-slate); }
.cl .event-start .event-label { color: #24414e; }
.cl .event-start .event-content { color: var(--cl-ink); white-space: pre-wrap; font-size: 1.25rem; font-weight: 500; }
.cl .event-text { background: #fff; border: 1px solid var(--cl-line); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.cl .event-text .event-content { color: var(--cl-body); overflow-wrap: break-word; font-size: 1.25rem; line-height: 1.78; }
.cl .event-text .event-content p { margin: 0 0 0.8rem; }
.cl .event-text .event-content p:last-child { margin-bottom: 0; }
.cl .event-text .event-content ul, .cl .event-text .event-content ol { margin: 0 0 0.8rem; padding-left: 1.3rem; }
.cl .event-text .event-content li { margin-bottom: 0.3rem; }
.cl .event-text .event-content strong { color: var(--cl-ink); }
/* Search steps: one line per step, tightly stacked. Consecutive steps move
   closer together and drop the timestamp — so a long lookup reads as a log
   instead of a wall of boxes. */
.cl .cl-steprow { margin-bottom: 0; }
.cl .cl-steprow + .cl-steprow { margin-top: -0.55rem; }
.cl .cl-steprow + .cl-steprow .event-time { visibility: hidden; }
.cl .cl-steprow .event-time { padding-top: 0.25rem; }
.cl .cl-step {
  display: flex; align-items: baseline; gap: 0.5rem; padding: 0.18rem 0.7rem;
  border-left: 3px solid #f0b429; background: #fffdf5; border-radius: 0 7px 7px 0;
  font-size: 1.02rem; line-height: 1.45;
}
.cl .cl-step__icon   { flex: 0 0 auto; font-size: 0.95rem; }
.cl .cl-step__verb   { color: #8a5a00; font-weight: 600; white-space: nowrap; }
.cl .cl-step__detail { color: var(--cl-muted); overflow-wrap: anywhere; }
.cl .event-tool-result { background: #f9fafb; border-left: 4px solid var(--cl-line); padding: 0.5rem 1rem; }
.cl .event-tool-result .event-label { color: var(--cl-faint); margin-bottom: 0.1rem; font-size: 0.84rem; }
.cl .event-tool-result .event-content { color: var(--cl-faint); font-size: 0.93rem; overflow-wrap: anywhere; }
.cl .event-thinking { background: var(--cl-line-2); border-left: 4px solid var(--cl-faint); }
.cl .event-thinking .event-content { color: var(--cl-muted); font-style: italic; white-space: pre-wrap; }
.cl .event-error { background: #fef2f2; border-left: 4px solid #ef4444; }
.cl .event-error .event-label { color: #b91c1c; }
.cl .event-other { background: #f7f9fa; border: 1px dashed var(--cl-line-2); font-size: 0.93rem; color: var(--cl-faint); padding: 0.4rem 1rem; }
.cl-event-detail { margin-left: 0.4rem; font-family: var(--cl-mono); }
.cl .spinner { display: inline-block; width: 0.55rem; height: 0.55rem; margin-left: 0.3rem; border-radius: 50%; background: var(--cl-faint); animation: cl-pulse 1s infinite; }
@keyframes cl-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* ── intro ────────────────────────────────────────────────────────────── */
.cl-intro { background: #fff; border: 1px solid var(--cl-line-2); border-radius: 14px; padding: 1.3rem 1.4rem; font-size: 1.15rem; color: var(--cl-body); line-height: 1.72; }
.cl-intro p { margin: 0 0 0.6rem; }
.cl-intro__muted { color: var(--cl-faint); font-size: 1.02rem; }

/* ── chips ────────────────────────────────────────────────────────────── */
.cl-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.cl-chip {
  background: #eef2f4; border: 1px solid var(--cl-line); border-radius: 999px;
  padding: 0.55rem 1.1rem; font-size: 1.08rem; color: #24414e; cursor: pointer;
  font-family: var(--cl-font); text-align: left; line-height: 1.35;
}
.cl-chip:hover { background: var(--bam-slate); border-color: var(--bam-slate); color: #fff; }
.cl-chip--sm { padding: 0.4rem 0.85rem; font-size: 1rem; }

/* ── product cards ────────────────────────────────────────────────────── */
.cl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.cl-cards--single { grid-template-columns: 1fr; }
.cl-card { background: #fff; border: 1px solid var(--cl-line-2); border-radius: 14px; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.cl-card__name { font-weight: 700; font-size: 1.3rem; color: var(--cl-ink); line-height: 1.3; }
.cl-card__brand { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--cl-faint); margin-top: 0.15rem; }
.cl-card__facts { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.cl-card__size { background: #f0f7f2; border-left: 4px solid #4d9a6a; padding: 0.5rem 0.8rem; border-radius: 8px; font-size: 1rem; color: #24603c; }
.cl-card__sizes { font-size: 1.02rem; color: var(--cl-muted); }
.cl-card__label { font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cl-faint); margin-right: 0.4rem; }
.cl-card__why { font-size: 1.12rem; color: var(--cl-body); line-height: 1.68; }
.cl-card__actions { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.cl-card__cart { background: var(--bam-slate); color: #fff; border: 0; border-radius: 10px; padding: 0.5rem 1.1rem; font-size: 1.05rem; cursor: pointer; font-family: var(--cl-font); font-weight: 600; }
.cl-card__cart:hover { background: #33505c; }
.cl-card__save { background: #fff; color: var(--bam-slate); border: 1px solid var(--cl-line); border-radius: 10px; padding: 0.5rem 1rem; font-size: 1.05rem; cursor: pointer; font-family: var(--cl-font); }
.cl-card__save:hover { border-color: var(--bam-slate); }
.cl-card__marked { background: #e7f5ec !important; color: #24603c !important; border-color: #b7e0c6 !important; cursor: default; }
.cl-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding-top: 0.6rem; border-top: 1px solid var(--cl-line-2); }
.cl-card__sku { font-size: 0.9rem; color: var(--cl-faint); font-family: var(--cl-mono); }
.cl-card__link { font-size: 1.05rem; color: var(--bam-slate); text-decoration: none; font-weight: 600; }

.cl-price { font-size: 1.18rem; font-weight: 700; color: var(--cl-ink); }
.cl-price--none { font-weight: 400; color: var(--cl-faint); font-size: 1.02rem; }
.cl-price__at { display: block; font-size: 0.82rem; font-weight: 400; color: var(--cl-faint); }

.cl-badge { font-size: 0.88rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--cl-line-2); color: var(--cl-muted); }
.cl-badge--yes { background: #e7f5ec; color: #24603c; }
.cl-badge--no { background: #fdeceb; color: #a12d24; }

/* ── comparison ───────────────────────────────────────────────────────── */
.cl-intro__label { font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cl-faint); margin: 0.9rem 0 0.4rem; font-weight: 700; }
.cl-basket__meta { display: inline-flex; align-items: center; gap: 0.35rem; }

/* ── brand choice on the start screen ─────────────────────────────────── */
.cl-start__label--2 { margin-top: 1.4rem; }
.cl-brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.6rem; margin-top: 0.6rem; }
.cl-brand {
  position: relative; display: flex; flex-direction: column; gap: 0.1rem; cursor: pointer;
  background: #fff; border: 2px solid var(--cl-line-2); border-radius: 11px; padding: 0.7rem 0.9rem;
}
.cl-brand:hover { border-color: var(--cl-line); }
/* Same game as with the engines: --on is the state at load time, :has the
   state after the click. Without it the tile feels dead. */
.cl-brand--on { border-color: var(--bam-slate); background: #f4f8fa; }
.cl-brand:has(.cl-brand__radio:checked) { border-color: var(--bam-slate); background: #f4f8fa; }
.cl-brand:has(.cl-brand__radio:not(:checked)) { border-color: var(--cl-line-2); background: #fff; }
.cl-brand:has(.cl-brand__radio:focus-visible) { box-shadow: 0 0 0 3px rgba(60, 90, 105, 0.35); }
.cl-brand__radio { position: absolute; inset: auto auto 0 0; width: 1px; height: 1px; opacity: 0; }
.cl-brand__name { font-weight: 700; font-size: 1.08rem; color: var(--cl-ink); }
.cl-brand__sub { font-size: 0.9rem; color: var(--cl-muted); line-height: 1.35; }
.cl-brand-badge {
  display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.6rem; border-radius: 999px;
  background: var(--bam-slate); color: #fff; font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
}

/* ── the concierge's five suggestions ─────────────────────────────────── */
.cl-opening:empty { display: none; }
.cl-opening { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px dashed var(--cl-line); }
.cl-opening__head { font-size: 0.95rem; font-weight: 700; color: var(--cl-muted); margin-bottom: 0.5rem; letter-spacing: 0.02em; }
.cl-opening__dot { color: #b8860b; margin-right: 0.3rem; }
.cl-chip--fresh { border-color: #e0cfa0; background: #fdf8ec; }
.cl-chip--fresh:hover { border-color: #b8860b; }
.cl-intro__brand { font-size: 1.05rem; color: var(--cl-body); margin-top: 0.3rem; }

/* ── "Alles dazu": the dossier ───────────────────────────────────────────
   Rendered by the server, so it is there immediately. Deliberately wider and
   calmer than a card — here people read instead of skimming. */
.cl-card__more {
  background: #fff7e6; color: #8a5a00; border: 1px solid #e8c887; border-radius: 10px;
  padding: 0.5rem 1rem; font-size: 1.05rem; cursor: pointer; font-family: var(--cl-font);
  font-weight: 700;
}
.cl-card__more:hover { background: #ffedcc; border-color: #d9a441; }
.cl-card__more--busy { opacity: 0.55; cursor: progress; }

.cl-dossier {
  background: #fff; border: 1px solid var(--cl-line); border-left: 5px solid #d9a441;
  border-radius: 14px; padding: 1.3rem 1.5rem; box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.cl-dossier__head { border-bottom: 1px solid var(--cl-line-2); padding-bottom: 0.7rem; margin-bottom: 0.9rem; }
.cl-dossier__title { font-size: 1.55rem; font-weight: 800; color: var(--cl-ink); line-height: 1.25; }
.cl-dossier__sub { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cl-faint); margin-top: 0.2rem; }
.cl-dossier__top { display: grid; grid-template-columns: 220px 1fr; gap: 1.2rem; align-items: start; }
.cl-dossier__facts { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.cl-dossier__lead { flex: 1 1 100%; font-size: 1.12rem; line-height: 1.7; color: var(--cl-body); margin: 0.4rem 0 0; }
.cl-dossier__block { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--cl-line-2); }
.cl-dossier__label { font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--cl-faint); font-weight: 700; margin-bottom: 0.5rem; }
.cl-dossier__list { margin: 0; display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 0.35rem 1rem; }
.cl-dossier__list dt { font-weight: 700; color: var(--cl-ink); font-size: 1.02rem; }
.cl-dossier__list dd { margin: 0; color: var(--cl-body); font-size: 1.05rem; line-height: 1.65; }
.cl-dossier__color { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; font-size: 1.05rem; }
.cl-dossier__swatch { width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--cl-line); flex: 0 0 auto; }
.cl-dossier__sizes { color: var(--cl-muted); font-size: 0.98rem; }
.cl-dossier__note { color: var(--cl-muted); font-size: 0.98rem; margin-top: 0.3rem; font-style: italic; }
.cl-dossier__shots { margin: 0; padding-left: 1.1rem; color: var(--cl-body); font-size: 1.02rem; line-height: 1.6; }
.cl-dossier__shots li { margin-bottom: 0.25rem; }
.cl-dossier__related { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cl-dossier__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.1rem; padding-top: 0.7rem; border-top: 1px solid var(--cl-line-2); font-size: 0.9rem; color: var(--cl-faint); }
.cl-dossier__foot code { font-family: var(--cl-mono); }

.cl-sizetable { overflow-x: auto; }
.cl-sizetable table { border-collapse: collapse; font-size: 0.98rem; }
.cl-sizetable th, .cl-sizetable td { padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--cl-line-2); text-align: left; white-space: nowrap; }
.cl-sizetable thead th { background: #f7f9fa; color: var(--cl-ink); font-size: 0.9rem; }
.cl-sizetable tbody th { color: var(--cl-muted); font-weight: 600; }

@media (max-width: 900px) {
  .cl-dossier__top { grid-template-columns: 1fr; }
  .cl-dossier__list { grid-template-columns: 1fr; gap: 0.1rem 0; }
  .cl-dossier__list dd { margin-bottom: 0.5rem; }
}

/* ── product image ────────────────────────────────────────────────────────
   The image is deliberately small on the card: otherwise eight cards in one
   answer are eight large images, and the text is what gets read. It grows when
   pointed at, as large as the screen allows. */
.cl-shot {
  margin: 0 0 0.2rem; background: #f7f9fa; border: 1px solid var(--cl-line-2);
  border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
  align-items: center; justify-content: center; position: relative;
}
.cl-shot--card { height: 190px; }
.cl-shot--cell { height: 130px; width: 100%; }
.cl-shot__img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;
  object-fit: contain; cursor: zoom-in; transition: transform 0.12s ease-out;
  background: #fff;
}
.cl-shot__img:hover, .cl-shot__img:focus-visible { transform: scale(1.04); outline: none; }
.cl-shot__img:focus-visible { box-shadow: 0 0 0 3px var(--bam-slate); }
.cl-shot__hint {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 0.2rem 0.4rem;
  font-size: 0.78rem; color: var(--cl-muted); background: rgba(255,255,255,0.9);
  text-align: center; opacity: 0; transition: opacity 0.12s ease-out; pointer-events: none;
}
.cl-shot:hover .cl-shot__hint { opacity: 1; }
.cl-shot__similar {
  position: absolute; top: 0.35rem; right: 0.35rem; z-index: 2;
  background: rgba(255,255,255,0.94); border: 1px solid var(--cl-line); border-radius: 8px;
  padding: 0.2rem 0.55rem; font-size: 0.86rem; font-weight: 600; color: var(--cl-muted);
  cursor: pointer; font-family: var(--cl-font); opacity: 0.45; transition: opacity 0.12s ease-out;
}
/* Not only on hover: a tablet has no hover, and a button you cannot see is
   no button. */
.cl-shot:hover .cl-shot__similar, .cl-shot__similar:focus-visible { opacity: 1; }
.cl-shot__similar:hover { color: var(--cl-ink); border-color: var(--bam-slate); }
.cl-shot__similar--busy { opacity: 1; cursor: progress; }
.cl-chip--escape { background: #fff; border-style: dashed; color: var(--cl-muted); }
.cl-chip--escape:hover { border-style: solid; color: var(--cl-ink); }
.cl-cards__lead { font-size: 1.1rem; font-weight: 600; color: var(--cl-muted); margin-bottom: 0.5rem; }
.cl-shot--empty { color: var(--cl-faint); }
.cl-shot__none { font-size: 0.9rem; color: var(--cl-faint); }

/* The lightbox. It opens on a click and takes the next click itself to
   close — that is why it sits above everything and deliberately captures the
   mouse. */
.cl-lightbox {
  position: fixed; inset: 0; z-index: 1200; display: none; cursor: zoom-out;
  align-items: center; justify-content: center; flex-direction: column; gap: 1rem;
  background: rgba(10, 16, 22, 0.88); padding: 2vh 2vw;
}
.cl-lightbox--on { display: flex; }
.cl-lightbox__img {
  max-width: 92vw; max-height: 84vh; width: auto; height: auto; object-fit: contain;
  background: #fff; border-radius: 14px; box-shadow: 0 18px 60px rgba(0,0,0,0.5);
}
.cl-lightbox__caption { color: #fff; font-size: 1.4rem; font-weight: 600; text-align: center; }
.cl-lightbox__close { color: #9fb0bd; font-size: 1rem; }

@media (max-width: 900px) {
  .cl-shot--card { height: 150px; }
  .cl-shot--cell { height: 100px; }
}

.cl-compare { background: #fff; border: 1px solid var(--cl-line-2); border-radius: 14px; overflow-x: auto; }
.cl-compare__table { width: 100%; border-collapse: collapse; font-size: 1.08rem; }
.cl-compare__table th, .cl-compare__table td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--cl-line-2); vertical-align: top; }
.cl-compare__table thead th { background: #f7f9fa; font-size: 1rem; color: var(--cl-ink); }
.cl-compare__table tbody th { font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cl-faint); font-weight: 600; white-space: nowrap; }
.cl-compare__corner { color: var(--cl-faint) !important; }
.cl-compare__why { line-height: 1.68; color: var(--cl-body); }

/* ── notes ────────────────────────────────────────────────────────────── */
.cl-note { border-radius: 12px; padding: 0.95rem 1.2rem; font-size: 1.12rem; line-height: 1.72; border-left: 4px solid var(--cl-line); background: #f9fafb; }
.cl-note__label { font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: 0.25rem; color: var(--cl-muted); }
.cl-note__text { color: var(--cl-body); }
.cl-note--assumption { background: #fff8ec; border-left-color: #e0a537; }
.cl-note--assumption .cl-note__label { color: #a86a10; }
.cl-note--gap { background: #f4f6f8; border-left-color: #6b7a85; }
.cl-note--handoff { background: #eef3fb; border-left-color: #5b7fb8; }
.cl-note--handoff .cl-note__label { color: #33538c; }

/* ── ask + offers ─────────────────────────────────────────────────────── */
.cl-ask { background: #fff; border: 1px solid var(--cl-line); border-left: 4px solid var(--bam-slate); border-radius: 12px; padding: 1rem 1.2rem; }
.cl-ask__question { font-weight: 600; font-size: 1.2rem; color: var(--cl-ink); line-height: 1.5; }
.cl-ask__why { font-size: 1.02rem; color: var(--cl-muted); margin-top: 0.25rem; }
.cl-ask__hint { font-size: 0.93rem; color: var(--cl-faint); margin-top: 0.6rem; }
.cl-offers { background: #f4f7f8; border: 1px solid var(--cl-line); border-radius: 12px; padding: 0.95rem 1.2rem; }
.cl-offers__label { font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.06em; color: #5a7280; font-weight: 700; }
.cl-offers__hint { font-size: 0.93rem; color: var(--cl-faint); margin-top: 0.55rem; }

/* ── places ───────────────────────────────────────────────────────────── */
.cl-places { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 0.7rem; }
.cl-place { background: #fff; border: 1px solid var(--cl-line-2); border-radius: 12px; padding: 0.9rem 1.1rem; }
.cl-place__head { display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; }
.cl-place__name { font-weight: 700; font-size: 1.15rem; color: var(--cl-ink); }
.cl-place__where { font-size: 1.02rem; color: var(--cl-muted); margin-top: 0.2rem; }
.cl-place__brands { font-size: 0.88rem; color: var(--cl-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.3rem; }
.cl-place__foot { display: flex; gap: 0.9rem; align-items: center; margin-top: 0.55rem; padding-top: 0.5rem; border-top: 1px solid var(--cl-line-2); }
.cl-place__phone { font-size: 1.02rem; color: var(--cl-muted); font-family: var(--cl-mono); }

/* ── side panel ───────────────────────────────────────────────────────── */
.cl-side {
  position: sticky; top: 108px; align-self: start;
  max-height: calc(100dvh - 140px); overflow-y: auto;
  background: #fff; border: 1px solid var(--cl-line-2); border-radius: 14px;
  padding: 1.1rem 1.2rem; font-size: 1rem;
}
.cl-side__head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--cl-line-2); padding-bottom: 0.6rem; margin-bottom: 0.8rem; }
.cl-side__title { font-weight: 700; color: var(--bam-slate); font-size: 1.1rem; }
.cl-side__time { font-size: 0.86rem; color: var(--cl-faint); font-family: var(--cl-mono); }
.cl-side__block { margin-bottom: 1rem; }
.cl-side__label { font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--cl-muted); font-weight: 700; margin-bottom: 0.35rem; }
.cl-side__empty { color: var(--cl-faint); font-style: italic; }
.cl-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.7rem; margin: 0; }
.cl-facts dt { color: var(--cl-faint); font-size: 0.96rem; }
.cl-facts dd { margin: 0; color: var(--cl-ink); font-weight: 600; font-size: 1.02rem; }
.cl-side__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cl-side__gap { font-size: 0.9rem; background: #fff8ec; color: #a86a10; border: 1px solid #f0dcb8; border-radius: 999px; padding: 0.15rem 0.55rem; }
.cl-side__skus { font-family: var(--cl-mono); font-size: 0.9rem; color: var(--cl-muted); line-height: 1.68; word-break: break-all; }
.cl-side__list, .cl-side__log { margin: 0; padding-left: 1.1rem; color: var(--cl-muted); line-height: 1.68; }
.cl-side__log { color: var(--cl-faint); font-size: 0.93rem; }
.cl-side__list li, .cl-side__log li { margin-bottom: 0.3rem; }

/* ── start screen ─────────────────────────────────────────────────────── */
.cl--start { justify-content: flex-start; min-height: auto; }
.cl-start { max-width: 720px; margin: 1.5rem auto 0; background: #fff; border: 1px solid var(--cl-line-2); border-radius: 16px; padding: 1.8rem 2rem 1.6rem; box-shadow: 0 2px 20px rgba(0,0,0,.06); }
.cl-start__head { margin-bottom: 1rem; }
.cl-start__lead { font-size: 1.12rem; color: var(--cl-muted); line-height: 1.72; margin: 0 0 1.4rem; }
.cl-start__label { font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cl-faint); font-weight: 700; margin-bottom: 0.6rem; }
.cl-engines { display: flex; flex-direction: column; gap: 0.7rem; }
.cl-engine { display: flex; gap: 0.8rem; align-items: flex-start; border: 1px solid var(--cl-line-2); border-radius: 12px; padding: 0.95rem 1.1rem; cursor: pointer; transition: border-color .12s, background .12s; }
.cl-engine:hover { border-color: #c3ccd1; background: #f7f9fa; }
/* The server renders --on for the state at load time. Without the second rule
   the highlight would stick there until the page reloads — you click SDK and
   the border stays on the own loop. */
.cl-engine--on { border-color: var(--bam-slate); background: #f4f7f8; }
.cl-engine:has(.cl-engine__radio:checked) { border-color: var(--bam-slate); background: #f4f7f8; }
.cl-engine:has(.cl-engine__radio:not(:checked)) { border-color: var(--cl-line-2); background: #fff; }
.cl-engine__radio { margin-top: 0.3rem; transform: scale(1.2); }
.cl-engine__title { font-weight: 700; font-size: 1.18rem; color: var(--cl-ink); }
.cl-engine__sub { font-size: 0.98rem; color: var(--cl-faint); margin-bottom: 0.3rem; }
.cl-engine__note { font-size: 1.05rem; color: var(--cl-muted); line-height: 1.68; }
.cl-start__actions { margin-top: 1.3rem; }
.cl-start__go { background: var(--bam-slate); color: #fff; border: 0; border-radius: 10px; padding: 0.7rem 1.7rem; font-size: 1.12rem; cursor: pointer; font-family: var(--cl-font); font-weight: 600; }
.cl-start__foot { margin-top: 1rem; font-size: 0.93rem; color: var(--cl-faint); line-height: 1.68; }
.cl-runtime-badge { font-size: 0.84rem; text-transform: uppercase; letter-spacing: 0.06em; background: #eef2f4; color: #5a7280; border-radius: 999px; padding: 0.15rem 0.6rem; margin-left: 0.45rem; }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .cl-shell { grid-template-columns: minmax(0, 1fr); }
  .cl-side { position: static; max-height: none; order: -1; }
  .cl { min-height: auto; }
}

@media (max-width: 720px) {
  .cl-shell { padding: 0 0.75rem 1rem; gap: 1rem; }
  .cl .event-row { flex-direction: column; gap: 0.2rem; }
  .cl .event-time { min-width: 0; text-align: left; padding-top: 0; font-size: 0.82rem; }
  .cl .event-bubble { font-size: 1.12rem; }
  .cl-cards, .cl-places { grid-template-columns: 1fr; }
}

/* ── basket, set apart from the concierge below it ────────────────────── */
.cl-basket {
  background: #f4f7f8;
  border: 1px solid var(--cl-line);
  border-radius: 12px;
  padding: 0.9rem 1rem 0.8rem;
  margin: -0.2rem -0.2rem 1.2rem;
}
.cl-basket__block { margin-bottom: 0.9rem; }
.cl-basket__block:last-of-type { margin-bottom: 0; }
.cl-basket__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.cl-basket__title { font-weight: 800; font-size: 1.05rem; color: var(--cl-ink); letter-spacing: -0.01em; }
.cl-basket__icon { margin-right: 0.35rem; }
.cl-basket__count { background: var(--bam-slate); color: #fff; border-radius: 999px; padding: 0.1rem 0.55rem; font-size: 0.88rem; font-weight: 700; }
.cl-basket__empty { color: var(--cl-faint); font-style: italic; font-size: 0.96rem; margin-top: 0.15rem; }
.cl-basket__list { list-style: none; margin: 0.45rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.cl-basket__list li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: #fff; border: 1px solid var(--cl-line); border-radius: 9px; padding: 0.5rem 0.4rem 0.5rem 0.7rem; }
.cl-basket__entry { min-width: 0; flex: 1 1 auto; }
.cl-basket__shot {
  width: 46px; height: 46px; flex: 0 0 auto; object-fit: contain; background: #fff;
  border: 1px solid var(--cl-line-2); border-radius: 7px; cursor: zoom-in;
}
.cl-basket__name { font-weight: 700; font-size: 1rem; color: var(--cl-ink); line-height: 1.3; }
.cl-basket__sku { font-size: 0.84rem; color: var(--cl-faint); font-family: var(--cl-mono); }
.cl-basket__x { background: none; border: 0; color: var(--cl-faint); cursor: pointer; font-size: 1.5rem; line-height: 1; padding: 0 0.4rem; border-radius: 6px; }
.cl-basket__x:hover { color: #fff; background: #a12d24; }
.cl-basket__note { font-size: 0.88rem; color: var(--cl-muted); font-style: italic; margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--cl-line); }