:root { --wpai-panel-width: clamp(320px, 26vw, 380px); }
/* The style-demo's developer breakpoint badge overlaps the visitor launcher. :has() hides it
   with the stylesheet itself, before the footer script runs, so it never flashes on load;
   the class rule stays for browsers without :has() support. */
body:has(.wpai-sidebar) .bp-badge, body.wpai-has-chat .bp-badge { display: none !important; }
.wpai-chat, .wpai-sidebar, .wpai-launcher {
  --wpai-bg: var(--cubix-bg, #141414); --wpai-surface: var(--cubix-surface, #1f1f1f);
  --wpai-border: var(--cubix-border, #383838); --wpai-text: var(--cubix-text, #fafafa);
  --wpai-muted: var(--cubix-text-muted, #a6a6a6); --wpai-primary: var(--cubix-primary, #f96d10);
  /* One text line for the whole panel: boxes (composer, cards, bubbles) stand on the 16px edge
     line, and every text run starts where the composer's own text starts — edge + 1px border +
     10px inner padding. The right-aligned elements end on the mirrored line. */
  --wpai-edge: 16px; --wpai-box-pad: 10px; --wpai-line: calc(var(--wpai-edge) + 1px + var(--wpai-box-pad));
  --wpai-line-inset: calc(var(--wpai-line) - var(--wpai-edge));
  color: var(--wpai-text); font: 14px/1.6 var(--cubix-font-body, "Inter", system-ui, sans-serif);
  box-sizing: border-box; color-scheme: dark;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
[data-theme="light"] .wpai-chat, [data-theme="light"] .wpai-sidebar { color-scheme: light; }
.wpai-chat *, .wpai-sidebar * { box-sizing: border-box; }
.wpai-chat [hidden], .wpai-sidebar[hidden], .wpai-launcher[hidden], .wpai-launcher-dot[hidden] { display: none !important; }
.wpai-sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: var(--wpai-panel-width); height: auto; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box; z-index: 99990; background: var(--wpai-bg); border-left: 1px solid var(--wpai-border); display: flex; flex-direction: column; }
.admin-bar .wpai-sidebar { top: 32px; }
/* The theme header is an 80px inner box (.cubix-container h-20) with its 1px divider below; under
   border-box the same line needs 81px here so the two separators run at the same pixel row. */
.wpai-panel-heading { display: flex; align-items: center; justify-content: space-between; min-height: 81px; padding: 8px var(--wpai-line); border-bottom: 1px solid var(--wpai-border); }
.wpai-panel-heading strong { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 500; }
/* 50px still leaves ~15px above and below inside the 81px heading. */
.wpai-avatar { flex: none; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--wpai-border); }
.wpai-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wpai-beta { margin-left: auto; margin-right: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.5; color: var(--cubix-accent, #0DDEC9); background: color-mix(in srgb, var(--cubix-accent, #0DDEC9) 18%, transparent); }
.wpai-panel-close { border: 0; background: none; color: inherit; font-size: 28px; width: 40px; height: 40px; cursor: pointer; line-height: 1; }
/* The bubble itself is the button, with space for its speech tail inside the hit area.
   Existing corner clamping, safe areas and cookie-bar placement remain shared. */
.wpai-launcher { position: fixed; right: calc(16px + var(--wpai-right-clamp, 0px)); bottom: calc(29px + env(safe-area-inset-bottom, 0px) + var(--wpai-cookie-lift, 0px) + var(--wpai-bottom-clamp, 0px)); z-index: 99989; display: inline-flex; white-space: nowrap; transition: bottom .25s ease; }
.wpai-launcher button.wpai-panel-open { position: relative; display: block; box-sizing: border-box; width: var(--wpai-bubble-width, 62px); height: var(--wpai-bubble-height, 72px); min-height: 0; padding: 0; border: 0; border-radius: 17px; background: transparent; color: #06241f; cursor: pointer; appearance: none; box-shadow: none; filter: none; }
.wpai-logo { display: block; width: var(--wpai-bubble-width, 62px); height: var(--wpai-bubble-height, 72px); pointer-events: none; }
.wpai-logo > svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Isolate the icon from theme button decoration, including cached pre-icon markup. */
.wpai-launcher button.wpai-panel-open:hover, .wpai-launcher button.wpai-panel-open:active,
.wpai-launcher button.wpai-panel-open:focus { background: transparent; border: 0; box-shadow: none; filter: none; color: #06241f; transform: none; }
.wpai-launcher button.wpai-panel-open::before, .wpai-launcher button.wpai-panel-open::after,
.wpai-launcher .wpai-label, .wpai-launcher .wpai-launcher-minimize { display: none !important; }
.wpai-launcher .wpai-logo > svg > rect, .wpai-launcher .wpai-logo > svg > path { fill: var(--cubix-accent, #0ddec9); }
.wpai-launcher .wpai-logo > svg > g { stroke: #06241f; }
.wpai-launcher button.wpai-launcher-dismiss { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 24px; height: 24px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: var(--wpai-surface); color: var(--wpai-muted); font: 20px/1 system-ui, sans-serif; box-shadow: none; cursor: pointer; }
.wpai-launcher button.wpai-launcher-dismiss:hover { color: var(--wpai-text); }
.wpai-launcher-dismiss:focus-visible { outline: 2px solid var(--cubix-accent, #0ddec9); outline-offset: 2px; }
.wpai-brain-trace { fill: none; stroke: var(--wpai-primary); stroke-linecap: round; opacity: 0; stroke-dasharray: var(--wpai-trace-tail) 200; animation: wpai-brain-flow 30s linear infinite; }
.wpai-brain-glow { --wpai-trace-tail: 14; --wpai-trace-end: -86; --wpai-trace-alpha: .35; stroke-width: 2.15; filter: drop-shadow(0 0 1px var(--wpai-primary)); }
.wpai-brain-tail { --wpai-trace-tail: 9; --wpai-trace-end: -91; --wpai-trace-alpha: .95; stroke-width: 1.75; }
.wpai-brain-head { --wpai-trace-tail: 3; --wpai-trace-end: -97; --wpai-trace-alpha: 1; stroke: #ffd399; stroke-width: 1.15; }
/* 2.8s / 3 = 0.9333s active travel in a 30s cycle; the rest is quiet. */
@keyframes wpai-brain-flow {
  0% { stroke-dashoffset: var(--wpai-trace-tail); opacity: 0; }
  .07778% { opacity: var(--wpai-trace-alpha); }
  2.92444% { opacity: var(--wpai-trace-alpha); }
  3.11111%, 100% { stroke-dashoffset: var(--wpai-trace-end); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .wpai-brain-trace { animation: none; } }
@media (max-width: 767px) {
  .wpai-launcher { --wpai-bubble-width: 55.8px; --wpai-bubble-height: 64.8px; --wpai-safe-bottom: env(safe-area-inset-bottom, 0px); right: calc(16px + env(safe-area-inset-right, 0px) + var(--wpai-right-clamp, 0px)); bottom: calc(12px + var(--wpai-safe-bottom) + var(--wpai-cookie-lift, 0px) + var(--wpai-bottom-clamp, 0px)); transition: bottom .25s ease; }
}
@media (max-width: 767px) { .wpai-launcher button.wpai-launcher-dismiss { width: 21.6px; height: 21.6px; top: -7.2px; right: -7.2px; font-size: 18px; } }
/* Returning after a cookie banner closed: a short settle-in instead of a flight. */
.wpai-launcher.is-appearing .wpai-panel-open { animation: wpai-appear .35s cubic-bezier(.16,1,.3,1) both; }
@keyframes wpai-appear { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
/* The docked launcher is a small turquoise brain icon in the site header next to the theme toggle,
   reusing the theme's ghost icon button classes; :where() keeps these fallbacks below the theme's
   own .btn-icon rules. (Class names keep the historical "dot" wording.) */
.wpai-launcher-dot { --wpai-accent: var(--cubix-accent, #0DDEC9); --wpai-border: var(--cubix-border, #383838); --wpai-surface: var(--cubix-surface, #1f1f1f); color: var(--wpai-accent); }
.wpai-launcher-dot.wpai-launcher-dot:hover:not(:disabled) { color: var(--wpai-accent); border-color: var(--wpai-accent); background: color-mix(in srgb, var(--wpai-accent) 8%, transparent); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--wpai-accent) 45%, transparent); }
:where(.wpai-launcher-dot) { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; min-height: 0; padding: 0; border: 1px solid var(--wpai-border); border-radius: 999px; background: transparent; cursor: pointer; }
.wpai-launcher-dot.is-floating { position: fixed; right: calc(16px + var(--wpai-right-clamp, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--wpai-cookie-lift, 0px) + var(--wpai-bottom-clamp, 0px)); z-index: 99989; background: var(--wpai-surface); }
/* While the pill is being absorbed the ring is already in place; the orange mark pops on arrival. */
.wpai-launcher-dot.is-arriving { animation: wpai-ring .3s ease both; pointer-events: none; }
.wpai-launcher-dot.is-arriving .wpai-launcher-dot-mark { transform: scale(0); }
@keyframes wpai-ring { from { opacity: 0; } to { opacity: 1; } }
.wpai-launcher-dot-mark { display: inline-flex; color: var(--wpai-accent); }
.wpai-launcher-dot-mark svg { display: block; }
.wpai-launcher-dot.is-popping .wpai-launcher-dot-mark { animation: wpai-pop .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes wpai-pop { from { transform: scale(0); } 55% { transform: scale(1.45); } to { transform: scale(1); } }
.wpai-launcher-dot.is-popping::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--wpai-accent); animation: wpai-ripple .6s ease-out both; pointer-events: none; }
@keyframes wpai-ripple { from { opacity: .8; transform: scale(.6); } to { opacity: 0; transform: scale(1.8); } }
@media (prefers-reduced-motion: reduce) {
  .wpai-launcher-dot.is-popping .wpai-launcher-dot-mark, .wpai-launcher-dot.is-popping::after,
  .wpai-launcher-dot.is-arriving, .wpai-launcher.is-appearing .wpai-panel-open { animation: none; }
}
.wpai-chat { position: relative; display: flex; flex-direction: column; min-height: 0; max-width: 760px; height: 650px; margin: 20px auto; background: var(--wpai-bg); border: 1px solid var(--wpai-border); border-radius: 16px; overflow: hidden; overflow-wrap: anywhere; }
.wpai-sidebar .wpai-chat { flex: 1; width: 100%; max-width: none; height: auto; margin: 0; border: 0; border-radius: 0; }
.wpai-conversation-area { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--wpai-line) 16px; scrollbar-width: thin; }
.wpai-empty { margin: auto; padding: 24px 8px; text-align: center; color: var(--wpai-muted); max-width: 310px; }
.wpai-empty > span { display: block; font-size: 30px; color: var(--wpai-primary); }
.wpai-empty p { font-size: 18px; line-height: 1.62; color: var(--wpai-text); }
.wpai-empty p > span { display: block; }
.wpai-empty p > span:first-child { font-weight: 500; }
@media (max-width: 350px) { .wpai-empty p { font-size: 16px; } }
.wpai-composer { flex: none; padding: 0 var(--wpai-edge) 10px; background: var(--wpai-bg); }
.wpai-chat fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.wpai-question-form { border: 1px solid var(--wpai-border); border-radius: 14px; padding: var(--wpai-box-pad); background: var(--wpai-surface); }
.wpai-question-form:focus-within { border-color: var(--wpai-primary); }
.wpai-chat label { display: block; margin: 12px 0; font-weight: 500; }
.wpai-chat .wpai-input-label { margin: 0; }
.wpai-chat textarea, .wpai-chat input:not([type="checkbox"]) { display: block; width: 100%; padding: 10px; border: 1px solid var(--wpai-border); border-radius: 8px; color: inherit; background: var(--wpai-surface); font: inherit; font-size: max(16px, 1em); line-height: 1.5; }
.wpai-chat textarea { resize: vertical; }
/* A long draft scrolls inside a stable three-line composer instead of resizing the panel on each key. */
.wpai-chat textarea[name="question"] { border: 0; outline: 0; background: transparent; padding: 2px 0; height: 5.125rem; min-height: 5.125rem; max-height: 5.125rem; resize: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.wpai-chat textarea::placeholder { color: var(--wpai-muted); opacity: 1; }
.wpai-question-form fieldset { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 10px; align-items: stretch; }
.wpai-chat .wpai-composer-tools { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.wpai-chat .wpai-input-label { min-width: 0; }
.wpai-chat .wpai-attachment { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--wpai-muted); }
.wpai-attachment span { flex: 1; min-width: 0; }
.wpai-chat button.wpai-remove-file { padding: 0; width: 28px; height: 28px; background: transparent; color: inherit; }
/* Same button tokens, gradient and interaction as the WordPress theme; fallbacks also work without the theme. */
.wpai-chat button { cursor: pointer; border: 0; font: 600 13px/1 var(--cubix-font-body, "Inter", system-ui, sans-serif); }
.wpai-chat .btn-primary, .wpai-chat .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.75rem; padding: .7rem 1.4rem; border-radius: var(--cubix-radius-pill, 999px);
  font-weight: 600; line-height: 1;
  transition: background-position .6s cubic-bezier(.16,1,.3,1), transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s cubic-bezier(.16,1,.3,1);
}
.wpai-chat .btn-primary { --btn-c: var(--cubix-primary, #f96d10); color: var(--cubix-primary-contrast, #fff); }
.wpai-chat .btn-primary {
  background-color: var(--btn-c);
  background-image: linear-gradient(100deg,var(--btn-c) 0%,color-mix(in srgb,var(--btn-c) 68%,#fff) 45%,var(--btn-c) 86%);
  background-size: 220% 100%; background-position: 100% 0; box-shadow: 0 1px 2px color-mix(in srgb,var(--btn-c) 30%,transparent);
}
.wpai-chat .btn-primary:hover:not(:disabled) { background-position: 0 0; transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 26px -6px color-mix(in srgb,var(--btn-c) 55%,transparent),0 0 0 4px color-mix(in srgb,var(--btn-c) 18%,transparent); }
.wpai-chat .btn-primary:active:not(:disabled) { transform: translateY(0) scale(.99); }
.wpai-chat .btn-ghost { border: 1px solid var(--wpai-border); color: var(--wpai-text); background: transparent; }
.wpai-chat .btn-ghost:hover:not(:disabled) { color: var(--wpai-primary); border-color: var(--wpai-primary); background: color-mix(in srgb,var(--wpai-primary) 8%,transparent); transform: translateY(-2px); }
.wpai-chat button.wpai-send, .wpai-chat button.wpai-attach { flex: none; width: 36px; height: 36px; min-height: 36px; padding: 0; font-size: 24px; }
.wpai-chat button.wpai-attach { border-color: transparent; }
.wpai-chat button:disabled, .wpai-chat fieldset:disabled { opacity: .6; cursor: wait; }
@media (prefers-reduced-motion: reduce) {
  .wpai-chat .btn-primary, .wpai-chat .btn-ghost { transition-duration: 1ms; }
  .wpai-chat .btn-primary:hover:not(:disabled), .wpai-chat .btn-ghost:hover:not(:disabled) { transform: none; }
}
.wpai-chat :focus-visible, .wpai-panel-open:focus-visible, .wpai-launcher-dot:focus-visible, .wpai-panel-close:focus-visible { outline: 2px solid var(--cubix-accent, #0ddec9); outline-offset: 3px; }
.wpai-chat textarea[name="question"]:focus-visible { outline: none; }
.wpai-chat a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.wpai-chat p { margin: 8px 0; }
.wpai-chat small { color: var(--wpai-muted); font-size: 11px; }
.wpai-chat .wpai-prerequisites { display: block; margin-top: 8px; }
.wpai-chat h3 { color: inherit; font: 600 17px/1.4 var(--cubix-font-body, system-ui, sans-serif); margin: 8px 0; }
.wpai-turn { margin: 14px 0; white-space: pre-wrap; }
/* Visitor bubbles shrink to their content and hang on the right: the box edge stands on the 16px
   edge line (like the composer) and the text inside ends on the mirrored text line. */
.wpai-user-turn { width: fit-content; max-width: 85%; margin-left: auto; margin-right: calc(-1 * var(--wpai-line-inset)); padding: 10px var(--wpai-line-inset); background: var(--wpai-surface); border-radius: 12px 12px 3px 12px; }
.wpai-user-turn small { display: block; margin-top: 6px; }
.wpai-assistant-turn { padding: 2px 0 12px; }
.wpai-course { margin-top: 12px; padding: 12px; border: 1px solid var(--wpai-border); border-radius: 10px; white-space: normal; font-size: 12px; }
.wpai-course h3 a { text-decoration-color: var(--wpai-primary); }
.wpai-stage { color: var(--wpai-muted); font-size: 11px; }
.wpai-follow-up { font-weight: 500; }
.wpai-chat .wpai-status, .wpai-chat .wpai-ticket-status { margin: 0; padding: 6px 0; font-size: 12px; color: var(--wpai-muted); }
.wpai-chat .wpai-status { padding: 6px var(--wpai-line-inset); }
.wpai-chat .wpai-status:empty, .wpai-chat .wpai-ticket-status:empty { display: none; }
.wpai-chat .wpai-help-actions { display: flex; align-items: center; gap: 16px; padding: 7px var(--wpai-line-inset) 0; }
.wpai-chat .wpai-help-actions button, .wpai-chat .wpai-help-actions a { min-width: 0; margin: 0; padding: 3px 0; border: 0; background: none; color: var(--wpai-muted); font-size: 11px; font-weight: 400; line-height: 1.5; text-decoration: none; }
.wpai-chat .wpai-help-actions .wpai-human, .wpai-chat .wpai-help-actions .wpai-bug { text-align: left; }
.wpai-chat .wpai-help-actions .wpai-privacy { margin-left: auto; text-align: right; }
.wpai-help-actions button:hover, .wpai-help-actions a:hover { color: var(--wpai-text); text-decoration: underline; }
/* Native top-layer dialog covers the viewport, including fixed headers/admin bars. */
body.wpai-ticket-open { overflow: hidden !important; }
.wpai-chat .wpai-ticket-dialog {
  position: fixed; inset: 0; margin: 0; width: 100vw; max-width: none;
  height: auto; max-height: none; border: 0; border-radius: 0;
  padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  overflow-y: auto; overscroll-behavior: contain; background: var(--wpai-bg);
  color: var(--wpai-text); font: inherit;
}
.wpai-ticket-dialog::backdrop { background: var(--wpai-bg, #141414); }
.wpai-ticket-sheet { width: 100%; max-width: 640px; min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.wpai-chat .wpai-ticket-form { position: static; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; }
.wpai-chat .wpai-ticket-form fieldset { display: flex; flex-direction: column; gap: 20px; }
.wpai-chat .wpai-ticket-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.wpai-chat .wpai-ticket-title { margin: 0; font-size: 24px; }
.wpai-chat .wpai-ticket-close { flex: none; width: 44px; height: 44px; padding: 0; font-size: 26px; line-height: 1; }
.wpai-chat .wpai-ticket-form label { display: grid; gap: 10px; margin: 0; }
.wpai-chat .wpai-ticket-form input:not([type="checkbox"]), .wpai-chat .wpai-ticket-form textarea { margin: 0; padding: 12px; }
.wpai-chat .wpai-ticket-form textarea { min-height: 140px; }
.wpai-chat .wpai-ticket-form .wpai-share { display: flex; align-items: flex-start; gap: 10px; }
.wpai-chat .wpai-share input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 2px 0 0; }
.wpai-chat .wpai-ticket-form .wpai-actions { gap: 12px; }
.wpai-chat .wpai-ticket-form .wpai-actions button { min-height: 44px; padding: 12px 18px; }
.wpai-chat .wpai-ticket-status:not(:empty) { padding: 8px 14px; }
.wpai-ticket-screenshot { display: grid; gap: 12px; }
.wpai-ticket-screenshot small { color: var(--wpai-muted); font-weight: 400; }
.wpai-screenshot-preview { display: grid; justify-items: start; gap: 12px; }
.wpai-screenshot-preview img { display: block; max-width: 100%; max-height: 240px; object-fit: contain; border-radius: 12px; border: 1px solid var(--wpai-border); }
.wpai-ticket-thanks { display: grid; justify-items: center; text-align: center; gap: 20px; padding: 32px 0; }
.wpai-ticket-thanks > span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--cubix-accent, #0DDEC9) 18%, transparent); color: var(--cubix-accent, #0DDEC9); font-size: 32px; }
.wpai-ticket-thanks h3 { margin: 0; max-width: 480px; font-size: clamp(24px, 4vw, 32px); line-height: 1.3; }
.wpai-ticket-thanks p { margin: 0; color: var(--wpai-muted); }
.wpai-share { font-size: 12px; font-weight: 400; }
.wpai-chat input[type="checkbox"] { accent-color: var(--wpai-primary); }
.wpai-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wpai-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.wpai-admin-tools { padding: 12px; font-size: 12px; }
@media (min-width: 1100px) {
  body.wpai-sidebar-open { width: calc(100% - var(--wpai-panel-width)); margin-right: var(--wpai-panel-width); }
  body.wpai-sidebar-open .wpai-fixed-header { width: calc(100% - var(--wpai-panel-width)) !important; right: var(--wpai-panel-width) !important; }
}
@media (max-width: 1099px) {
  .wpai-sidebar { width: min(420px, 100vw); box-shadow: -8px 0 30px #0003; }
}
@media (max-width: 782px) { .admin-bar .wpai-sidebar { top: 46px; } }
@media (max-width: 480px) {
  .wpai-sidebar { width: 100%; }
}

/* Visible progress stays below actual model text. Respect reduced motion. */
.wpai-streaming::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 8px; border-radius: 50%; background: currentColor; animation: wpai-pulse 1.2s ease-in-out infinite; }
.wpai-partial p { white-space: pre-wrap; }
@keyframes wpai-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .wpai-streaming::after { animation: none; } }
.wpai-chat .wpai-feedback { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--wpai-muted); }
.wpai-chat .wpai-feedback button { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 4px 9px; border: 1px solid var(--wpai-border, currentColor); border-radius: 999px; background: none; color: var(--wpai-muted); cursor: pointer; }
.wpai-chat .wpai-feedback .wpai-feedback-down svg { transform: scaleY(-1); }
.wpai-chat .wpai-feedback button.is-selected { border-color: var(--cubix-accent, #0DDEC9); color: var(--wpai-text); }
.wpai-chat .wpai-feedback button:disabled { cursor: default; opacity: .7; }
/* One-tap level scale: a surface card in the reply, five pill steps per topic, the chosen
   step in the Cubix primary colour with the lower steps tinted like a level meter. */
.wpai-chat .wpai-skills { margin-top: 12px; padding: 12px 14px 14px; border: 1px solid var(--wpai-border); border-radius: 12px; background: var(--wpai-surface); white-space: normal; }
.wpai-chat .wpai-skills-hint { margin: 0 0 4px; font-size: 11px; line-height: 1.5; color: var(--wpai-muted); }
.wpai-chat .wpai-skill { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--wpai-border); }
.wpai-chat .wpai-skills-hint + .wpai-skill { border-top: 0; }
.wpai-chat .wpai-skill-name { font-size: 13px; font-weight: 600; line-height: 1.4; }
.wpai-chat .wpai-skill-row { display: flex; align-items: center; gap: 10px; }
.wpai-chat .wpai-skill-scale { display: flex; flex: none; gap: 5px; }
.wpai-chat .wpai-skill-level { flex: 1; min-width: 0; font-size: 11px; line-height: 1.4; color: var(--wpai-muted); text-align: right; }
.wpai-chat button.wpai-skill-step {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; min-height: 30px; padding: 0;
  border: 1px solid var(--wpai-border); border-radius: var(--cubix-radius-pill, 999px); background: transparent; color: var(--wpai-text);
  font-size: 12px; font-weight: 600; line-height: 1;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
}
.wpai-chat button.wpai-skill-step:hover:not(:disabled) { border-color: var(--wpai-primary); color: var(--wpai-primary); transform: translateY(-2px); }
.wpai-chat button.wpai-skill-step.is-filled { border-color: color-mix(in srgb, var(--wpai-primary) 60%, transparent); background: color-mix(in srgb, var(--wpai-primary) 16%, transparent); color: var(--wpai-primary); }
.wpai-chat button.wpai-skill-step.is-selected { border-color: var(--wpai-primary); background: var(--wpai-primary); color: var(--cubix-primary-contrast, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wpai-primary) 22%, transparent); }
.wpai-chat .wpai-skills-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.wpai-chat .wpai-skills-send { min-height: 36px; padding: .55rem 1.2rem; font-size: 13px; }
.wpai-chat .wpai-skills-send:disabled { opacity: .45; cursor: not-allowed; }
/* Sent scales stay readable as a record of the answer, with only the chosen levels lit. */
.wpai-chat .wpai-skills.is-locked button.wpai-skill-step:disabled { opacity: 1; cursor: default; }
.wpai-chat .wpai-skills.is-locked button.wpai-skill-step:not(.is-selected):not(.is-filled) { opacity: .4; }
.wpai-chat .wpai-skills.is-locked .wpai-skills-actions { display: none; }
@media (prefers-reduced-motion: reduce) {
  .wpai-chat button.wpai-skill-step { transition-duration: 1ms; }
  .wpai-chat button.wpai-skill-step:hover:not(:disabled) { transform: none; }
}
/* Honeypot: off-screen for people, present for form-filling bots. */
.wpai-chat .wpai-website-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }