/* Finale F: the dialog with the Bemanu agent (chat.js) in the CTA frame (final.css .fcta), with no panel and no title:
 * one window 620 px tall and 792 px wide, centred, just wider than its composer; the thread scrolls inside, the composer
 * sits at the bottom, in the style of Claude / ChatGPT. The route comes down the frame's centre (.cw__line continues the
 * page's line inside the frame) and stops on the window's top edge, at the port. */
.fs--final > .container:has(.fcta--chat) { z-index: 2; }
.fcta--chat { grid-template-columns: minmax(0, 1fr); grid-template-areas: "chat"; grid-template-rows: auto; gap: var(--space-lg); align-items: start; }
.fcta--chat::before { content: none; }   /* no panel behind the chat: the window stands on the page */
.cw__line { position: absolute; top: -40px; left: 50%; z-index: 0; width: 1px; margin-left: -0.5px; background: var(--track); pointer-events: none; }

/* the window */
.cp { grid-area: chat; justify-self: center; position: relative; z-index: 1; display: grid; grid-template-rows: minmax(0, 1fr) auto; width: min(100%, 792px); height: 620px; border-radius: 28px; background: var(--color-card); box-shadow: 0 0 0 1px var(--color-rule), 0 2px 4px rgb(17 26 35 / 0.04), 0 32px 64px -32px rgb(17 26 35 / 0.28); }
.cp__port { position: absolute; top: 0; left: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--color-card); box-shadow: inset 0 0 0 1px var(--track); transition: background-color 0.4s, box-shadow 0.4s; }
.cp.is-live .cp__port { background: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-wash); }
.cp__log { min-height: 0; padding: 32px 24px 16px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scroll-behavior: auto; }
.cp__thread { width: 100%; max-width: 760px; margin-inline: auto; }
.cp__thread { display: flex; flex-direction: column; gap: 22px; }

/* messages: the agent writes plain text next to its mark; the visitor's are bubbles on the right */
.cm { display: flex; align-items: flex-start; gap: 12px; }
.cm__av { flex-shrink: 0; margin-top: 1px; line-height: 0; }
.cm__av .app-icon { border-radius: 50%; }
.cm__col { display: grid; gap: 12px; justify-items: start; min-width: 0; }
.cm--agent .cm__col { flex: 1; grid-template-columns: minmax(0, 1fr); }
.cm--agent .cm__col > * { justify-self: start; max-width: 100%; }
.cm__text { margin: 0; padding-top: 2px; color: var(--color-ink); font-size: 16px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: pretty; }
.cm--you { justify-content: flex-end; }
.cm--you .cm__col { justify-items: end; max-width: min(78%, 560px); gap: 6px; }
.cm__bubble { margin: 0; padding: 10px 16px; border-radius: 20px; background: var(--color-paper-2); color: var(--color-ink); font-size: 16px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm--block { display: block; }
.cm__dots { display: inline-flex; gap: 4px; padding: 10px 0; }
.cm__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-muted); animation: cm-dot 1s infinite ease-in-out; }
.cm__dots i:nth-child(2) { animation-delay: 0.15s; }
.cm__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes cm-dot { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.cm__link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--color-grid); color: var(--color-ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.cm__link:hover { background: var(--color-paper-2); }
.cm__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* quick answers under the agent's question */
.cq { display: flex; flex-wrap: wrap; gap: 8px; }
.cq__chip, .cq__go { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--color-card); box-shadow: inset 0 0 0 1px var(--color-grid); color: var(--color-ink); font: 500 14px/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.cq__chip:hover:not(:disabled) { background: var(--color-paper-2); }
.cq__chip[aria-pressed="true"] { background: var(--color-accent-wash); box-shadow: inset 0 0 0 1.5px var(--color-accent); color: var(--color-accent-wash-ink); }
.cq__go { background: var(--color-primary); box-shadow: none; color: var(--color-primary-ink); }
.cq__go:hover:not(:disabled) { background: var(--color-primary-hover); }
.cq [disabled] { cursor: default; }
.cq[data-done] .cq__chip:not([aria-pressed="true"]), .cq[data-done] .cq__go { opacity: 0.45; }
.cq[data-done] .cq__go { display: none; }
.cq button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* the summary: a station card, wider */
.csum.o-card { width: min(100%, 420px); gap: 10px; padding: 14px 16px 16px 14px; font-size: 14px; }
.csum .o-head { min-height: 36px; }
.csum .o-title { gap: 10px; font-size: 15px; }
.csum .o-rows { display: grid; gap: 8px; padding-left: 2px; }
.csum .o-kv { align-items: baseline; }
.csum .o-v { text-align: right; }

/* the one small card: icon chip + name + size (+ remove) */

/* the composer: big, at the bottom of the column */
.cp__foot { display: grid; gap: 8px; width: calc(100% - 32px); margin-inline: auto; padding-bottom: 16px; }
.cp__err { margin: 0; padding: 0 8px; color: var(--st-error); font-size: 13px; }
.cp__err:empty { display: none; }
.cp__comp { display: grid; gap: 8px; padding: 14px 12px 10px 20px; border-radius: 28px; background: var(--color-card); box-shadow: 0 0 0 1px var(--color-grid), 0 12px 32px -18px rgb(17 26 35 / 0.3); transition: box-shadow var(--dur-short) var(--ease-out); }
.cp__comp:focus-within { box-shadow: 0 0 0 1.5px var(--color-accent), 0 12px 32px -18px rgb(17 26 35 / 0.3); }
.fcta .cp textarea { display: block; width: 100%; min-height: 48px; max-height: 168px; padding: 4px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--color-ink); font: 400 17px/1.45 var(--font-body); resize: none; overflow-y: auto; }
.fcta .cp textarea:focus-visible { outline: 0; }
.fcta .cp textarea:disabled { color: var(--color-muted); }
.cp__bar { display: flex; align-items: center; gap: 4px; }
.cp__btn, .cp__send { display: inline-grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.cp__btn { background: transparent; color: var(--color-ink-2); }
.cp__btn:first-child { margin-left: -8px; }
.cp__btn:hover:not(:disabled) { background: var(--color-paper-2); }
.cp__btn[hidden] { display: none; }
.cp__btn:disabled { opacity: 0.4; cursor: default; }
.cp__send { margin-left: auto; background: var(--color-primary); color: var(--color-primary-ink); }
.cp__send:hover { background: var(--color-primary-hover); }
.cp__send[aria-disabled="true"] { opacity: 0.35; }
.cp__btn:focus-visible, .cp__send:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* recording: the mic turns red and pulses, a timer beside it */
.cp__mic.is-rec { background: var(--st-error); color: #fff; animation: cp-pulse 1.4s infinite ease-out; }
.cp__mic.is-rec:hover { background: var(--st-error); }
@keyframes cp-pulse { 0% { box-shadow: 0 0 0 0 rgb(163 67 74 / 0.45); } 100% { box-shadow: 0 0 0 12px rgb(163 67 74 / 0); } }
.cp__rec { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; color: var(--color-ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.cp__rec[hidden] { display: none; }
.cp__rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--st-error); animation: cp-blink 1s infinite steps(2, start); }
@keyframes cp-blink { to { visibility: hidden; } }

/* drag and drop over the whole window */

/* the contact form: the column's full width, two fields a row, Send on the right */
.cform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; padding: 18px; border-radius: 18px; background: var(--color-card); box-shadow: 0 0 0 1px var(--color-rule), 0 10px 24px -14px rgb(17 26 35 / 0.3); }
.cform__f { display: grid; gap: 5px; align-content: start; min-width: 0; }
.cform__f > span { font-size: 13px; font-weight: 500; color: var(--color-ink-2); }
.cform__f em { color: var(--color-muted); font-style: normal; font-weight: 400; }
.fcta .cform input { min-height: 44px; padding: 10px 12px; font-size: 15px; }
.fcta .cform input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--st-error); }
.fcta .cform input:disabled { background: var(--color-paper); color: var(--color-ink-2); }
.cform__err { min-height: 0; color: var(--st-error); font-size: 12px; }
.cform__err:empty { display: none; }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cform__fail { grid-column: 1 / -1; margin: 0; color: var(--st-error); font-size: 14px; }
.cform__fail[hidden] { display: none; }
.cform__fail a { color: inherit; text-decoration: underline; }
.cform__bar { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.cform__go { min-height: 44px; padding: 0 26px; }
.cform__go:disabled { background: var(--color-paper-3); color: var(--color-ink-2); cursor: default; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* phone: the window takes the frame's full width, the quick answers scroll sideways, the form is one column */
@media (max-width: 47.5rem) {
  .fcta--chat { gap: var(--space-md); }
  .fcta--chat::before { inset: -24px -16px; }
  .cw__line { top: -24px; }
  .cp { height: clamp(460px, calc(100svh - 280px), 620px); border-radius: 24px; }
  .cp__log { padding: 24px 14px 12px; }
  .cp__thread { gap: 18px; }
  .cp__foot { width: calc(100% - 28px); padding-bottom: 12px; }
  .cp__comp { padding: 12px 8px 6px 16px; border-radius: 24px; }
  .fcta .cp textarea { min-height: 40px; font-size: 16px; }
  .cm { gap: 10px; }
  .cm__text, .cm__bubble { font-size: 15.5px; }
  .cm--you .cm__col { max-width: 86%; }
  .cm--agent .cm__col > .cq { justify-self: stretch; max-width: none; }
  .cq { flex-wrap: nowrap; margin-right: -14px; padding-right: 14px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cq::-webkit-scrollbar { display: none; }
  .cq button { flex-shrink: 0; }
  .cform { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .cform__go { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cm__dots i, .cp__mic.is-rec, .cp__rec i { animation: none; }
  .cp__mic.is-rec { box-shadow: 0 0 0 3px rgb(163 67 74 / 0.3); }
}