/* ============================================================================
   ASK HAVA — Desert Modern chat skin  (desert_chat.css)

   Pairs with chat.html (extends desert_base.html). Tokens come from
   desert.css (:root). LOAD ORDER CONTRACT: this file loads AFTER
   chat_cards.css so the B-01 hardening there (svg/img size clamps,
   .voice white-space:pre-line + overflow-wrap, .component-slot min-width)
   keeps winning — nothing below re-declares those properties or raises any
   size limit.

   Everything is scoped under body.ll-chat (the body classes chat.html keeps
   for chat_cards.css). Selectors that intentionally override chat_cards.css
   values (composer clearance var, photo-btn / act-btn accent colors) repeat
   that file's exact selectors so the later-file tiebreak applies.

   Sections:
     1. Page shell + empty state (eyebrow / display h1 / suggestion chips)
     2. Sticky composer — the mockup's shadow-boxed ask bar
     3. Transcript turns (user bubble / Hava voice / avatar / typing dots)
     4. Per-response actions (thumbs, Save, Share)
     5. Component cards: agenda, week strip, card row, single card,
        business list (+ Spotlight & paid-placement disclosure), contribute
     6. Loading overlay
     7. Responsive + reduced motion
   ========================================================================= */

/* ------------------------------------------------- 1. shell + empty state */
body.ll-chat .chat-shell {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 20px 0;
}

body.ll-chat .empty-state {
  text-align: center;
  max-width: 680px;
  margin: 26px auto 10px;
}

body.ll-chat .chat-eyebrow {
  color: var(--orange-deep);
  margin-bottom: 14px;
}

body.ll-chat .chat-display {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(40px, 7vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

body.ll-chat .chat-display em {
  font-style: normal;
  color: var(--orange);
}

body.ll-chat .chat-sub {
  margin-top: 14px;
  font-size: 15.5px;
}

body.ll-chat .chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 18px;
}

/* Pill chips per the mockup ask-bar hints — outline, orange on hover.
   (.chip class name is a load-bearing JS hook: .chip[data-q].) */
body.ll-chat .chips .chip {
  font-family: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 1.5px solid var(--black);
  border-radius: 999px;
  padding: 8px 17px;
  background: transparent;
  color: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

body.ll-chat .chips .chip:hover,
body.ll-chat .chips .chip:focus-visible {
  border-color: var(--orange-deep);
  color: var(--orange-deep);
}

body.ll-chat .chat-contribute {
  margin-top: 20px;
  font-size: 13px;
  opacity: 0.75;
}

body.ll-chat .chat-contribute a {
  font-weight: 700;
  color: var(--orange-deep);
  border-bottom: 2px solid var(--orange);
  padding-bottom: 1px;
}

/* ------------------------------------- 2. composer — shadow-boxed ask bar */

/* Clearance var: chat_cards.css sets 64px for the old Lake Light nav.
   Desert's bottom nav only exists <=700px, so shrink the lift on desktop and
   size it to the Desert nav on mobile. Same selector as chat_cards.css —
   later file wins. */
body.ll-chat {
  --ll-bottomnav-clear: 18px;
}

/* Extra room so the last turn clears the taller boxed composer. */
body.ll-chat .thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
  padding-bottom: calc(var(--ll-bottomnav-clear) + 150px + env(safe-area-inset-bottom));
}

body.ll-chat .stuck-composer {
  position: fixed;
  left: 14px;
  right: 14px;
  z-index: 60;
  /* `bottom` comes from chat_cards.css via --ll-bottomnav-clear. */
}

body.ll-chat .composer-disclaimer {
  color: rgba(23, 19, 16, 0.62);
  font-weight: 500;
}

/* The mockup .askbar: black box, offset orange shadow, cream input strip,
   solid orange Ask button. */
body.ll-chat .stuck-composer .composer {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--black);
  border: var(--d-border);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--orange);
  padding: 9px;
}

body.ll-chat .stuck-composer .composer input[type="text"] {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: var(--cream);
  border-radius: 10px;
  font-family: var(--text);
  font-size: 15px;
  color: var(--black);
  padding: 12px 14px;
}

body.ll-chat .stuck-composer .composer input[type="text"]::placeholder {
  color: #716552;
}

body.ll-chat .stuck-composer .composer input[type="text"]:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: -1px;
}

/* Photo button lives on the black box — cream text, peach accents.
   Selectors mirror chat_cards.css so the desert colors win its jade ones. */
body.ll-chat .stuck-composer .composer .photo-btn {
  border: 1.5px solid rgba(251, 244, 230, 0.4);
  background: transparent;
  color: var(--cream);
  font-family: var(--text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 13px;
}

body.ll-chat .stuck-composer .composer .photo-btn:hover,
body.ll-chat .stuck-composer .composer .photo-btn:focus-visible {
  color: var(--peach);
  border-color: var(--peach);
}

body.ll-chat .stuck-composer .composer .photo-btn.has-file {
  color: var(--black);
  background: var(--peach);
  border-color: var(--peach);
}

/* Send: solid deep-orange block, cream arrow — 4.5:1 with cream (a11y 2026-06-10) */
body.ll-chat .stuck-composer .composer .send {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 10px;
  background: var(--orange-deep);
  color: var(--cream);
  cursor: pointer;
  transition: background 0.15s;
}

body.ll-chat .stuck-composer .composer .send:hover,
body.ll-chat .stuck-composer .composer .send:focus-visible {
  background: var(--black);
}

body.ll-chat .stuck-composer .composer .send[disabled] {
  opacity: 0.55;
  cursor: default;
}

body.ll-chat .stuck-composer .composer .send svg {
  width: 16px;
  height: 16px;
}

/* --------------------------------------------------- 3. transcript turns */
body.ll-chat .turn-user {
  display: flex;
  justify-content: flex-end;
}

/* Orange user bubble — black text per the contrast covenant (orange blocks
   take black body text). */
body.ll-chat .turn-user .bubble {
  max-width: min(80%, 560px);
  background: var(--orange);
  color: var(--black);
  border: 2px solid var(--black);
  border-radius: 16px 16px 6px 16px;
  padding: 12px 16px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

body.ll-chat .turn-hava {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* Avatar: the sun-over-ridge logomark in miniature. */
body.ll-chat .turn-hava .avatar {
  width: 30px;
  height: 30px;
  flex: none;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--orange);
  border: 2px solid var(--black);
  position: relative;
  overflow: hidden;
}

body.ll-chat .turn-hava .avatar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: var(--blue);
  border-top: 2px solid var(--black);
}

body.ll-chat .turn-hava .said {
  min-width: 0;
  flex: 1;
  max-width: min(92%, 720px);
}

/* Bordered-cream voice card. white-space/overflow-wrap stay owned by
   chat_cards.css (.thread .voice) — not re-declared here. */
body.ll-chat .turn-hava .voice {
  margin: 0;
  background: var(--cream);
  border: var(--d-border);
  border-radius: 16px 16px 16px 6px;
  padding: 14px 17px;
  font-size: 16px;
  line-height: 1.55;
}

body.ll-chat .turn-hava .voice a {
  color: var(--orange-deep);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* Honesty/error turns stay legible and clearly flagged — sand panel with an
   orange edge, never hidden or dimmed. */
body.ll-chat .turn-hava.is-error .voice {
  background: var(--sand);
  border-left: 6px solid var(--orange);
}

body.ll-chat .turn-hava .component-slot {
  margin-top: 12px;
}

/* typing dots (loading turn) */
body.ll-chat .typing-dots {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

body.ll-chat .typing-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  animation: dChatPulse 1.1s infinite ease-in-out;
}

body.ll-chat .typing-dots span:nth-child(2) { animation-delay: 0.15s; }
body.ll-chat .typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes dChatPulse {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

/* ----------------------------------- 4. per-response actions (thumbs etc.) */
/* Same selectors as chat_cards.css §3 — desert accents replace the jade. */
body.ll-chat .msg-actions .act-btn {
  border: 1.5px solid rgba(23, 19, 16, 0.4);
  background: var(--cream);
  color: var(--black);
  font-family: var(--text);
  font-weight: 700;
  letter-spacing: 0.04em;
}

body.ll-chat .msg-actions .act-btn:hover,
body.ll-chat .msg-actions .act-btn:focus-visible {
  border-color: var(--orange-deep);
  color: var(--orange-deep);
}

body.ll-chat .msg-actions .act-btn.is-active {
  border-color: var(--orange-deep);
  color: var(--orange-deep);
  background: rgba(212, 88, 30, 0.12);
}

body.ll-chat .msg-feedback-err {
  color: var(--orange-deep);
  font-weight: 700;
}

/* --------------------------------------------------- 5. component cards */

/* shared card frame for the JS-built components */
body.ll-chat .agenda,
body.ll-chat .weekstrip,
body.ll-chat .biz-list,
body.ll-chat .single-card,
body.ll-chat .contribute-flow {
  background: var(--cream);
  border: var(--d-border);
  border-radius: var(--d-radius);
  overflow: hidden;
}

/* uppercase micro-labels used across the cards */
body.ll-chat .agenda-section-label,
body.ll-chat .agenda-foot,
body.ll-chat .mini-card .meta,
body.ll-chat .single-card .meta-row,
body.ll-chat .facts .key {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---- day agenda ---- */
body.ll-chat .agenda-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 18px 12px;
  border-bottom: 2px solid var(--black);
  background: var(--sand);
}

body.ll-chat .agenda-date {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

body.ll-chat .agenda-meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
}

body.ll-chat .agenda-section {
  padding: 6px 0 2px;
}

body.ll-chat .agenda-section-label {
  color: var(--orange-deep);
  padding: 10px 18px 2px;
}

body.ll-chat .agenda-row {
  display: flex;
  gap: 16px;
  padding: 12px 18px;
  border-top: 1.5px solid rgba(23, 19, 16, 0.12);
  transition: background 0.12s;
}

body.ll-chat .agenda-section .agenda-row:first-of-type {
  border-top: none;
}

body.ll-chat .agenda-row:hover,
body.ll-chat .agenda-row:focus-visible {
  background: var(--sand);
}

body.ll-chat .agenda-row .time {
  flex: none;
  width: 74px;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
}

body.ll-chat .agenda-row .time .ampm {
  font-size: 11px;
  font-weight: 700;
}

body.ll-chat .agenda-row .time .range {
  display: block;
  font-family: var(--text);
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.6;
}

body.ll-chat .agenda-row .content {
  min-width: 0;
}

body.ll-chat .agenda-row .title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
}

body.ll-chat .agenda-row .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 3px;
  font-size: 12.5px;
  opacity: 0.8;
}

body.ll-chat .agenda-row .meta .tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.ll-chat .agenda-row .meta .tag .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
}

body.ll-chat .agenda-row .meta .tag.warm .dot {
  background: var(--orange);
}

body.ll-chat .agenda-foot {
  padding: 10px 18px 14px;
  border-top: 1.5px solid rgba(23, 19, 16, 0.12);
  opacity: 0.6;
}

body.ll-chat .agenda-empty {
  padding: 18px;
  font-size: 14px;
  opacity: 0.7;
}

/* ---- week strip ---- */
body.ll-chat .weekstrip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  background: var(--sand);
  border-bottom: 2px solid var(--black);
}

body.ll-chat .weekstrip-head .title {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
}

body.ll-chat .weekstrip-head .meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
}

body.ll-chat .weekstrip-days {
  display: flex;
  gap: 8px;
  padding: 14px 18px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1.5px solid rgba(23, 19, 16, 0.12);
}

body.ll-chat .weekstrip-days::-webkit-scrollbar { display: none; }

body.ll-chat .wsday {
  flex: none;
  min-width: 56px;
  border: 2px solid var(--black);
  border-radius: 12px;
  background: var(--cream);
  color: inherit;
  padding: 8px 6px 7px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s;
}

body.ll-chat .wsday:hover {
  transform: translateY(-2px);
  background: var(--sand);
}

body.ll-chat .wsday.is-today {
  box-shadow: 3px 3px 0 var(--orange);
}

body.ll-chat .wsday.is-selected {
  background: var(--orange);
  color: var(--black);
}

body.ll-chat .wsday .dow {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}

body.ll-chat .wsday .num {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.1;
}

body.ll-chat .wsday .dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  min-height: 8px;
}

body.ll-chat .wsday .dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.65;
}

body.ll-chat .wsday .dots .more {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-size: 9px;
  font-weight: 700;
  opacity: 0.8;
}

body.ll-chat .weekstrip-foot {
  padding: 12px 18px 14px;
  border-top: 1.5px solid rgba(23, 19, 16, 0.12);
}

body.ll-chat .weekstrip-foot a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
}

body.ll-chat .weekstrip-foot a:hover {
  color: var(--orange-deep);
}

/* ---- card row (horizontal mini-cards) ---- */
body.ll-chat .cardrow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 236px);
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: none;
}

body.ll-chat .cardrow::-webkit-scrollbar { display: none; }

body.ll-chat .mini-card {
  display: block;
  background: var(--cream);
  border: var(--d-border);
  border-radius: var(--d-radius);
  overflow: hidden;
  transition: transform 0.14s, box-shadow 0.14s;
}

body.ll-chat .mini-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--black);
}

body.ll-chat .mini-card .img {
  background: linear-gradient(135deg, var(--sand), var(--peach));
  border-bottom: 2px solid var(--black);
}

body.ll-chat .mini-card .body {
  padding: 12px 14px 14px;
}

body.ll-chat .mini-card .meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--orange-deep);
  min-height: 13px;
}

body.ll-chat .mini-card .meta .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  flex: none;
}

body.ll-chat .mini-card .meta .dot.warm {
  background: var(--orange);
}

body.ll-chat .mini-card .name {
  margin-top: 5px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
}

body.ll-chat .mini-card .blurb {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.45;
  opacity: 0.8;
}

/* ---- single card ---- */
body.ll-chat .single-card .img {
  background: linear-gradient(135deg, var(--sand), var(--peach));
  border-bottom: 2px solid var(--black);
}

body.ll-chat .single-card .img:empty {
  aspect-ratio: auto;
  height: 10px;
  border-bottom: none;
  background: var(--orange);
}

body.ll-chat .single-card .body {
  padding: 16px 18px 18px;
}

body.ll-chat .single-card .meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--orange-deep);
  margin-bottom: 8px;
}

body.ll-chat .single-card .tag-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
  flex: none;
}

body.ll-chat .single-card .tag-dot.warm {
  background: var(--orange);
}

body.ll-chat .single-card h3 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 21px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

body.ll-chat .single-card .summary {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.55;
}

body.ll-chat .facts {
  margin-top: 12px;
  border-top: 1.5px solid rgba(23, 19, 16, 0.15);
}

body.ll-chat .facts .fact {
  display: flex;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1.5px solid rgba(23, 19, 16, 0.12);
  font-size: 13.5px;
}

body.ll-chat .facts .key {
  flex: none;
  width: 92px;
  opacity: 0.6;
  padding-top: 2px;
}

body.ll-chat .facts .val {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.ll-chat .facts .val a {
  color: var(--orange-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* shared action buttons (single-card + biz rows): outline / solid pills */
body.ll-chat .component-slot .actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

body.ll-chat .component-slot .actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--text);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 2px solid var(--black);
  border-radius: 999px;
  padding: 8px 16px;
  background: transparent;
  color: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

body.ll-chat .component-slot .actions .btn:hover {
  background: var(--sand);
}

body.ll-chat .component-slot .actions .btn.primary {
  background: var(--black);
  color: var(--cream);
}

body.ll-chat .component-slot .actions .btn.primary:hover {
  background: var(--orange-deep);
  border-color: var(--orange-deep);
  color: var(--cream);
}

body.ll-chat .component-slot .actions .act-sep {
  opacity: 0.4;
}

/* ---- business list ---- */
body.ll-chat .biz-list-head {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
  padding: 16px 18px 12px;
  background: var(--sand);
  border-bottom: 2px solid var(--black);
}

body.ll-chat .biz-list-head .title {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
}

/* Keep the N-03 textual separator visible (it is the no-CSS fallback), just
   dimmed so the title/count pairing reads as one lockup. */
body.ll-chat .biz-list-head .head-sep {
  opacity: 0.45;
}

body.ll-chat .biz-list-head .count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
}

body.ll-chat .biz-row {
  display: flex;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1.5px solid rgba(23, 19, 16, 0.12);
  transition: background 0.12s;
}

body.ll-chat .biz-list .biz-row:nth-of-type(1) {
  border-top: none;
}

body.ll-chat .biz-row:hover,
body.ll-chat .biz-row:focus-visible {
  background: var(--sand);
}

/* Spotlight = paid placement: warm tint + labeled tag, never subtle-ized.
   Tint and tag travel together with the footer disclosure (trust contract). */
body.ll-chat .biz-row.is-spotlight {
  background: rgba(212, 88, 30, 0.1);
  box-shadow: inset 4px 0 0 var(--orange);
}

body.ll-chat .biz-row.is-spotlight:hover {
  background: rgba(212, 88, 30, 0.16);
}

body.ll-chat .biz-row .thumb {
  flex: none;
  width: 58px;
  height: 58px;
  border: 2px solid var(--black);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--sand), var(--peach));
}

body.ll-chat .biz-row .thumb,
body.ll-chat .biz-row .thumb img {
  border-radius: 12px;
}

body.ll-chat .biz-row .body {
  min-width: 0;
  flex: 1;
}

body.ll-chat .biz-row .head-line {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

body.ll-chat .biz-row .name {
  margin: 0;
  font-family: var(--text);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.3;
}

/* Orange pill, black text — mirrors .d-tag--sponsored (always label paid). */
body.ll-chat .biz-row .spotlight-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--orange);
  color: var(--black);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 10px;
}

body.ll-chat .biz-row .spotlight-tag .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--black);
}

body.ll-chat .biz-row .meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 3px;
  font-size: 12.5px;
}

body.ll-chat .biz-row .meta .sep {
  opacity: 0.45;
}

body.ll-chat .biz-row .meta .rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: var(--orange-deep);
}

body.ll-chat .biz-row .blurb {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.85;
}

/* status pill (open / closed / closing soon) — shared by biz rows + single
   card. Colors hold AA on cream and on the sand hover. */
body.ll-chat .component-slot .status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.ll-chat .component-slot .status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

body.ll-chat .component-slot .status.open { color: #1e6b3d; }
body.ll-chat .component-slot .status.closed { color: var(--orange-deep); }
body.ll-chat .component-slot .status.closing,
body.ll-chat .component-slot .status.closing-soon { color: var(--orange-deep); }

/* Paid-placement disclosure: black band, cream text — deliberately the
   loudest element in the card footer. Never hide or shrink this. */
body.ll-chat .biz-list-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 18px;
  background: var(--black);
  color: var(--cream);
  border-top: 2px solid var(--black);
}

body.ll-chat .biz-list-foot .disclosure {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

body.ll-chat .biz-list-foot a {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
}

body.ll-chat .biz-list-foot a:hover {
  color: var(--peach);
}

/* ---- contribute flow ---- */
body.ll-chat .contribute-flow {
  padding: 16px 18px;
}

body.ll-chat .cf-summary {
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

body.ll-chat .cf-q {
  margin-top: 8px;
  font-weight: 700;
  font-size: 15px;
}

body.ll-chat .cf-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

body.ll-chat .cf-btn {
  font-family: var(--text);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 2px solid var(--black);
  border-radius: 999px;
  padding: 9px 18px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

body.ll-chat .cf-btn:hover {
  background: var(--sand);
}

body.ll-chat .cf-btn.primary {
  background: var(--black);
  color: var(--cream);
}

body.ll-chat .cf-btn.primary:hover {
  background: var(--orange);
  border-color: var(--orange);
}

/* ------------------------------------------------------ 6. loading overlay */
body.ll-chat .ll-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(23, 19, 16, 0.5);
  display: none; /* JS flips to flex */
  align-items: center;
  justify-content: center;
  padding: 18px;
}

body.ll-chat .ll-loading-card {
  width: min(520px, 100%);
  background: var(--cream);
  border: var(--d-border);
  border-radius: 18px;
  box-shadow: 8px 8px 0 var(--orange);
  padding: 20px 22px;
}

body.ll-chat .ll-loading-title {
  display: flex;
  align-items: center;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

body.ll-chat .ll-dots {
  display: inline-flex;
  gap: 6px;
  margin-left: 10px;
}

body.ll-chat .ll-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  animation: dChatPulse 1.1s infinite ease-in-out;
}

body.ll-chat .ll-dots span:nth-child(2) { animation-delay: 0.15s; }
body.ll-chat .ll-dots span:nth-child(3) { animation-delay: 0.3s; }

body.ll-chat .ll-loading-answer {
  margin-top: 14px;
}

body.ll-chat .ll-loading-you-asked {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange-deep);
}

body.ll-chat .ll-loading-question {
  margin: 4px 0 10px;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.1;
}

/* cream on blue — AA per the palette covenant */
body.ll-chat .ll-loading-answer-card {
  background: var(--blue);
  color: var(--cream);
  border: 2px solid var(--black);
  border-radius: 12px;
  padding: 13px 15px;
  font-size: 14.5px;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

body.ll-chat .ll-loading-close {
  margin-top: 10px;
  font-size: 11.5px;
  opacity: 0.6;
}

/* ----------------------------------------- 7. responsive + reduced motion */
@media (max-width: 700px) {
  /* Lift the composer over Desert's fixed bottom nav (same custom property
     chat_cards.css keys its bottom + thread clearance on). */
  body.ll-chat {
    --ll-bottomnav-clear: 84px;
  }

  body.ll-chat .chat-shell {
    padding-top: 18px;
  }

  body.ll-chat .stuck-composer .composer {
    border-radius: 14px;
    box-shadow: 4px 4px 0 var(--orange);
  }

  body.ll-chat .agenda-row .time {
    width: 60px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ll-chat .typing-dots span,
  body.ll-chat .ll-dots span {
    animation: none;
  }

  body.ll-chat .chips .chip,
  body.ll-chat .wsday,
  body.ll-chat .mini-card,
  body.ll-chat .composer .send,
  body.ll-chat .component-slot .actions .btn,
  body.ll-chat .cf-btn {
    transition: none;
  }

  body.ll-chat .wsday:hover,
  body.ll-chat .mini-card:hover {
    transform: none;
  }
}