/* Novus CPQ Advisor – chat UI.
   Brand colours from the novuscpq.com Avada theme: teal #3aa695 (primary fills / borders),
   dark teal #2c8a7c for surfaces carrying white text, green #96c346 as the accent, text #333. */
:root {
  --teal: #3aa695;
  --teal-dark: #2c8a7c;
  --teal-darker: #24736a;
  --teal-soft: #e6f4f1;
  --green: #96c346;
  --green-dark: #6f9a2a;
  --green-soft: #f4f9ea;
  --bg: #f4f7f6;
  --panel: #ffffff;
  --text: #333333;
  --muted: #6b7a76;
  --border: #dfe8e5;
  --bot: #eef4f2;
  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 15px/1.45 var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }

/* Standalone: centred card with padding. Embedded (embed=1): fills the iframe edge to edge. */
.app { display: flex; flex-direction: column; height: 100dvh; max-width: 560px; margin: 0 auto; background: var(--panel); }
@media (min-width: 1000px) { .app[data-embed="0"] { max-width: 920px; } }
@media (min-width: 640px) {
  .app[data-embed="0"] { height: calc(100dvh - 48px); margin: 24px auto; border-radius: 18px; box-shadow: 0 20px 60px rgba(44, 138, 124, .18); overflow: hidden; }
}
.app[data-embed="1"] { max-width: none; height: 100dvh; }

.header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--teal-dark); color: #fff; }
.header-brand { display: flex; align-items: center; gap: 12px; }
.header-logo { width: 38px; height: 38px; border-radius: 10px; background: var(--green); color: #fff; font-weight: 800; font-size: 20px; display: grid; place-items: center; }
.header-title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .1px; }
.header-sub { margin: 1px 0 0; font-size: 12.5px; opacity: .85; }
.header-actions { display: flex; gap: 6px; }
.icon-btn { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { background: var(--green); color: #fff; }

.progress { padding: 10px 16px 8px; border-bottom: 1px solid var(--border); background: #fff; }
.progress-label { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.mode-badge { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; color: var(--teal-darker); background: var(--teal-soft); padding: 2px 8px; border-radius: 999px; }
.progress-bar { height: 6px; border-radius: 999px; background: var(--teal-soft); overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--teal), var(--green)); border-radius: 999px; transition: width .35s ease; }

.messages { flex: 1; overflow-y: auto; padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.messages > * { flex-shrink: 0; } /* the scroll container must never squeeze bubbles / chip rows */
.msg { max-width: 86%; padding: 10px 14px; border-radius: var(--radius); word-wrap: break-word; animation: pop .18s ease-out; line-height: 1.45; }
.msg p { margin: 0; }
.msg p + p, .msg p + ul, .msg p + ol, .msg ul + p, .msg ol + p { margin-top: 8px; }
.msg ul, .msg ol { margin: 0; padding-left: 20px; }
.msg li + li { margin-top: 4px; }
.msg.user { white-space: pre-wrap; }
.msg a { color: inherit; text-decoration: underline; }
.msg.bot { align-self: flex-start; background: var(--bot); color: var(--text); border-bottom-left-radius: 4px; }
.msg.user { align-self: flex-end; background: var(--teal-dark); color: #fff; border-bottom-right-radius: 4px; }
.msg.error { align-self: center; background: #fff3f1; color: #9a2e21; font-size: 13px; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.typing { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #98a2b3; animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

/* Quick replies sit inside the transcript under the last bot bubble and always wrap fully (never clipped);
   beyond 8 chips the rest is behind a "Show all" toggle */
.options { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 4px; max-width: 100%; }
.chip { white-space: normal; text-align: left; line-height: 1.25; }
.chip.chip-toggle { border-style: dotted; color: var(--muted); border-color: var(--border); }
.options:empty { display: none; }
.sources { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: -4px 0 2px; padding: 0 2px; font-size: 11.5px; }
.sources-label { color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; font-size: 10px; }
.source-link { color: var(--teal-darker); text-decoration: none; border-bottom: 1px dotted var(--teal); max-width: 100%; overflow-wrap: anywhere; }
.source-link:hover { color: var(--green-dark); border-bottom-style: solid; }
.composer-hint { display: none; padding: 0 16px 6px; font-size: 11px; color: var(--muted); text-align: right; background: #fff; }
@media (min-width: 640px) { .composer-hint { display: block; } }
.chip { border: 1.5px solid var(--teal); background: #fff; color: var(--teal-darker); border-radius: 999px; padding: 7px 14px; font: 600 13.5px var(--font); cursor: pointer; transition: background .12s, color .12s; }
.chip:hover { background: var(--teal-dark); color: #fff; border-color: var(--teal-dark); }
.chip:disabled { opacity: .5; cursor: default; }
.chip.chip-context { border-style: dashed; border-color: var(--green-dark); color: var(--green-dark); background: var(--green-soft); }
.chip.chip-context:hover { background: var(--green-dark); color: #fff; }

/* Compact header when the widget is rendered inline in a page (the page already has its own title) */
.app[data-inline="1"] .header { padding: 9px 14px; }
.app[data-inline="1"] .header-logo { width: 30px; height: 30px; font-size: 16px; border-radius: 8px; }
.app[data-inline="1"] .header-title { font-size: 14.5px; }
.app[data-inline="1"] .header-sub { font-size: 11.5px; }
.app[data-inline="1"] .icon-btn { width: 30px; height: 30px; font-size: 17px; }

.composer { display: flex; gap: 8px; padding: 10px 16px 12px; border-top: 1px solid var(--border); background: #fff; }
.composer textarea { flex: 1; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 22px; font: 15px/1.4 var(--font); color: var(--text); outline: none; resize: none; max-height: 120px; min-height: 44px; box-sizing: border-box; }
.composer textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(150, 195, 70, .25); }
.composer textarea::placeholder { color: #9aa8a4; }
.send { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--teal-dark); color: #fff; cursor: pointer; display: grid; place-items: center; flex: none; }
.send:hover { background: var(--teal-darker); }
.send:disabled { opacity: .5; cursor: default; }

.footer { padding: 8px 16px 10px; font-size: 11.5px; color: var(--muted); text-align: center; background: #fff; }

@media (max-width: 480px) {
  .msg { max-width: 92%; }
  .header-sub { display: none; }
}

@media (max-height: 600px) { .footer { display: none; } }

/* ---- Layout: transcript column + recommendations panel ---------------------------------- */
.body { flex: 1; min-height: 0; display: flex; position: relative; }
.chat { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; --bottom-ui: 120px; }

/* Recommended for you – shared card styling (30% more compact than the old inline cards) */
.recs { background: #fff; display: flex; flex-direction: column; min-height: 0; }
.recs-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 8px; border-bottom: 1px solid var(--border); }
.recs-title { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; font-weight: 800; color: var(--green-dark); }
.recs-close { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--teal-soft); color: var(--teal-darker); font-size: 18px; line-height: 1; cursor: pointer; display: none; }
.recs-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 7px; }
.offer { padding: 9px 11px; border: 1px solid var(--border); border-left: 4px solid var(--green); border-radius: 10px; background: var(--green-soft); animation: pop .25s ease-out; }
.offer.is-complement { border-left-color: var(--teal); background: var(--teal-soft); }
.offer-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.offer-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--green-dark); font-weight: 700; }
.offer.is-complement .offer-kicker { color: var(--teal-darker); }
.offer-price { font-size: 11px; font-weight: 700; color: var(--muted); margin-left: auto; }
.offer-name { font-weight: 700; font-size: 13.5px; line-height: 1.3; color: var(--teal-darker); margin-top: 1px; }
.offer-reason { margin: 3px 0 7px; font-size: 12px; line-height: 1.4; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.offer-access { display: block; margin: -4px 0 6px; font-size: 11px; color: var(--green-dark); }
.offer-cta { display: inline-block; padding: 5px 11px; border-radius: 7px; background: var(--teal-dark); color: #fff; text-decoration: none; font-weight: 600; font-size: 12.5px; }
.offer.is-complement .offer-cta { background: #fff; color: var(--teal-darker); border: 1.5px solid var(--teal); }
.offer-cta:hover { background: var(--teal-darker); color: #fff; }
.offers-note { font-size: 11px; color: var(--muted); padding: 0 2px; }
.recs-sub { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; font-weight: 800; color: var(--muted); margin-top: 6px; }
.match-row { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 4px 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; color: var(--text); text-decoration: none; }
a.match-row:hover { border-color: var(--teal); background: var(--teal-soft); }
.match-vendor { font-weight: 700; color: var(--teal-darker); }
.match-pct { font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-darker); }
.match-pct.is-strong { background: var(--green-soft); color: var(--green-dark); }
.match-why { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recs-sources { margin: 0; padding: 0 0 0 14px; font-size: 11.5px; line-height: 1.5; }
.recs-sources a { color: var(--teal-darker); text-decoration: none; border-bottom: 1px dotted var(--teal); }

/* Quiet line in the transcript, attached to the reply that produced the recommendations */
.rec-note { align-self: flex-start; border: 0; background: none; padding: 0 4px; margin: -4px 0 0; font: 600 12px var(--font); color: var(--green-dark); cursor: pointer; text-align: left; }
.rec-note:hover { text-decoration: underline; }

/* Narrow: bar above the composer, panel as a bottom sheet over the transcript */
.rec-bar { display: flex; align-items: center; gap: 4px; width: 100%; padding: 8px 16px; border: 0; border-top: 1px solid var(--border); background: var(--green-soft); color: var(--green-dark); font: 600 12.5px var(--font); cursor: pointer; text-align: left; }
.rec-bar-label { color: var(--teal-darker); }
.rec-bar-counts { color: var(--muted); font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-bar-caret { transition: transform .2s; }
.rec-bar[aria-expanded="true"] .rec-bar-caret { transform: rotate(90deg); }
.app[data-wide="0"] .recs { position: absolute; left: 0; right: 0; bottom: var(--bottom-ui, 120px); max-height: 70%; border-radius: 14px 14px 0 0; box-shadow: 0 -12px 32px rgba(44, 138, 124, .22); transform: translateY(calc(100% + 24px)); transition: transform .22s ease; visibility: hidden; z-index: 5; }
.app[data-wide="0"] .recs.is-open { transform: none; visibility: visible; }
.app[data-wide="0"] .recs-close { display: inline-flex; align-items: center; justify-content: center; }
.app[data-wide="0"] .recs-head::before { content: ""; position: absolute; top: 5px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--border); }
.app[data-wide="0"] .recs-head { position: relative; padding-top: 14px; }
.app[data-wide="0"] .chat::after { content: ""; position: absolute; inset: 0 0 var(--bottom-ui, 120px) 0; background: rgba(51, 51, 51, .28); opacity: 0; pointer-events: none; transition: opacity .22s; z-index: 4; }
.app[data-wide="0"] .body.is-sheet-open .chat::after { opacity: 1; }

/* Wide (>= 720px container): two columns, the panel sticky and independently scrollable.
   The column is reserved only once there is content and animates its width once (200ms). */
.app[data-wide="1"] .recs { flex: 0 0 0%; width: 0; overflow: hidden; border-left: 1px solid var(--border); transition: flex-basis .2s ease; position: sticky; top: 0; align-self: stretch; }
.app[data-wide="1"] .recs.has { flex-basis: 42%; }
.app[data-wide="1"] .chat { flex: 1 1 58%; }
.app[data-wide="1"] .rec-bar { display: none; }
.app[data-wide="1"] .recs.is-flash .recs-body { animation: flash .9s ease-out; }
@keyframes flash { 0% { background: var(--green-soft); } 100% { background: transparent; } }
.recs[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Compact mode: an inline CONTEXT ENTRY POINT on a page (not the chat window).
   Page-specific opener + up to three chips + the input, sized to its content.
   The conversation itself happens in the centered modal, which the host page
   opens on the first message; the widget then drops back to the full layout.
   --------------------------------------------------------------------------- */
.app[data-compact="1"] { height: auto; min-height: 0; background: transparent; }
.app[data-compact="1"] .header,
.app[data-compact="1"] .progress,
.app[data-compact="1"] .footer,
.app[data-compact="1"] .recs,
.app[data-compact="1"] .rec-bar,
.app[data-compact="1"] .sources,
.app[data-compact="1"] .composer-hint { display: none; }
.app[data-compact="1"] .body,
.app[data-compact="1"] .chat { height: auto; min-height: 0; overflow: visible; }
.app[data-compact="1"] .messages { flex: none; height: auto; overflow: visible; padding: 14px 16px 4px; gap: 8px; }
/* the opener reads as page copy, not as a chat bubble; anything else is hidden */
.app[data-compact="1"] .msg { max-width: 100%; padding: 0; background: none; border-radius: 0; animation: none; font-size: 15.5px; color: var(--text); }
.app[data-compact="1"] .msg ~ .msg,
.app[data-compact="1"] .msg.user,
.app[data-compact="1"] .msg.typing { display: none; }
.app[data-compact="1"] .options { padding: 4px 16px 0; }
.app[data-compact="1"] .composer { border-top: 0; padding: 10px 16px 14px; background: transparent; }

/* Minimise lives in the widget's own header when it runs as the modal (one action row). */
.icon-btn.is-labelled { width: auto; padding: 0 12px 0 9px; border-radius: 999px; gap: 6px; font: 600 13px/1 var(--font); }