/* Faithful local copy of the five product demos from usealloy.ai.
   Shared Geist faces are served locally by site.css. */

/* docking: copied from the public Alloy homepage embed; remote font import removed. */
#alloy-kc-docking {
      /* Colors */
      --color-chat-bg: #171717;            /* Chat + Comment section surface */
      --color-window-bg: #171717;          /* backing fill behind chat (kept dark so loop fade-out doesn't flash) */
      --color-border-window: #474747;      /* window left border */
      --color-user-bubble: rgba(255,255,255,0.2);
      --color-user-avatar-bg: #ffffff;
      --color-user-avatar-border: #025dfe;
      --text-inverse: #ffffff;
      --color-text-70: rgba(255,255,255,0.7);
      --color-text-50: rgba(255,255,255,0.5);
      --color-border-10: rgba(255,255,255,0.1);
      --color-border-20: rgba(255,255,255,0.2);
      --background-accent: #65ed74;
      --color-pill-border: rgba(101,237,116,0.5);
      --border-icon: #605f66;
      --color-input-bg: #2e2e2e;
      --text-highlight: #0013a4;           /* Alloy avatar stroke */
      --color-send-icon: #171717;

      /* Spacing */
      --space-6x-sml: 4px;
      --space-5x-sml: 6px;
      --space-4x-sml: 8px;
      --space-3x-sml: 10px;
      --space-2x-sml: 12px;
      --space-x-sml: 14px;
      --space-med: 20px;
      --space-x-lrg: 32px;
      --spacings-2x-sml: 4px;
      --spacings-x-sml: 8px;
      --spacings-sml: 12px;
      --spacings-med: 16px;
      --spacings-lrg: 24px;
      --spacings-4x-lrg: 64px;

      /* Radii */
      --radius-x-sml: 2px;
      --radius-sml: 4px;
      --radius-med: 8px;
      --radius-full: 999px;

      /* Sizes (font) */
      --size-4x-sml: 14px;
      --size-3x-sml: 16px;

      /* Type families */
      --family-primary: 'Geist', sans-serif;
      display: block;
      width: 100%;
      box-sizing: border-box;
      font-family: var(--family-primary);
      color: var(--text-inverse);
      -webkit-font-smoothing: antialiased;
      text-align: left;
      text-transform: none;
      font-style: normal;
      font-variant: normal;
      letter-spacing: normal;
      line-height: normal;
    }
    #alloy-kc-docking *, #alloy-kc-docking *::before, #alloy-kc-docking *::after { box-sizing: border-box; }
    #alloy-kc-docking * { margin: 0; padding: 0; }
    #alloy-kc-docking .kc-sizer { position: relative; width: 100%; max-width: 796px; margin: 0 auto; overflow: hidden; }
    #alloy-kc-docking .kc-stage { position: absolute; top: 0; left: 0; width: 796px; transform-origin: top left; will-change: transform; backface-visibility: hidden; }
    /* perf: isolate the animated subtree so reveals don't reflow/repaint the page */
    #alloy-kc-docking .chat-window { contain: layout paint; }
    #alloy-kc-docking .chat { contain: layout paint; }
    #alloy-kc-docking .reveal { will-change: grid-template-rows; }
    #alloy-kc-docking .reveal-inner { will-change: opacity, transform; }

    /* ---- Chat Window (749:3690) ---- */
    #alloy-kc-docking .chat-window {
      width: 796px;
      height: 730px;
      background: var(--color-window-bg);
      border-top-right-radius: var(--radius-med);
      border-bottom-right-radius: var(--radius-med);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      overflow: hidden;
    }

    /* ---- Chat (749:3691) ---- */
    #alloy-kc-docking .chat {
      flex: 1 0 0;
      min-height: 0;
      width: 100%;
      background: var(--color-chat-bg);
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: center;
      justify-content: flex-end;
      padding: var(--spacings-lrg) var(--space-x-lrg);
      overflow: hidden;
      transition: opacity 0.4s ease;
    }
    /* height-easing reveal wrapper: collapsed components reserve no space */
    #alloy-kc-docking .reveal {
      display: grid;
      grid-template-rows: 0fr;
      width: 100%;
      transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }
    #alloy-kc-docking .reveal.show { grid-template-rows: 1fr; }
    #alloy-kc-docking .reveal > .reveal-inner {
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.55s ease 0.05s, transform 0.55s ease 0.05s;
    }
    #alloy-kc-docking .reveal.show > .reveal-inner { opacity: 1; transform: translateY(0); }

    /* ---- User message (749:3692 / 3693 / 3694) ---- */
    #alloy-kc-docking .chat-message {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      padding-left: var(--spacings-4x-lrg);
    }
    #alloy-kc-docking .chat-message__inner {
      width: 567px;
      display: flex;
      flex-direction: column;
      gap: var(--space-6x-sml);
      align-items: flex-start;
      justify-content: flex-end;
    }
    #alloy-kc-docking .bubble {
      width: 100%;
      background: var(--color-user-bubble);
      display: flex;
      flex-direction: column;
      gap: var(--space-4x-sml);
      align-items: flex-start;
      justify-content: center;
      padding: var(--spacings-x-sml) var(--spacings-sml);
      /* br corner left square (quirk preserved) */
      border-top-left-radius: var(--radius-med);
      border-top-right-radius: var(--radius-med);
      border-bottom-left-radius: var(--radius-med);
    }
    #alloy-kc-docking .you {
      display: flex;
      gap: var(--space-6x-sml);
      align-items: center;
    }
    #alloy-kc-docking .you__avatar {
      width: 24px;
      height: 24px;
      background: var(--color-user-avatar-bg);
      border: 0.879px solid var(--color-user-avatar-border);
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-5x-sml);
    }
    #alloy-kc-docking .you__avatar p {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--color-user-avatar-border);
      text-align: center;
      white-space: nowrap;
    }
    #alloy-kc-docking .you__name, #alloy-kc-docking .you__time {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--text-inverse);
      white-space: nowrap;
    }
    #alloy-kc-docking .bubble__text {
      width: 100%;
      font-weight: 400;
      font-size: var(--size-3x-sml);
      line-height: 1.4;
      color: var(--text-inverse);
    }

    /* ---- AI message (749:3705) ---- */
    #alloy-kc-docking .ai-message {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: flex-start;
      padding-right: var(--spacings-lrg);
    }
    #alloy-kc-docking .ai-message__top {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: flex-start;
    }

    /* Alloy identity row (749:3707) */
    #alloy-kc-docking .alloy {
      display: flex;
      gap: var(--space-6x-sml);
      align-items: center;
    }
    #alloy-kc-docking .alloy__avatar {
      width: 21.941px;
      height: 21.941px;
      flex-shrink: 0;
    }
    #alloy-kc-docking .alloy__avatar svg { display: block; width: 100%; height: 100%; }
    #alloy-kc-docking .alloy__name, #alloy-kc-docking .alloy__time {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--text-inverse);
      white-space: nowrap;
    }

    /* Status box (749:3712) */
    #alloy-kc-docking .status-box {
      width: 100%;
      border: 1px solid var(--color-border-10);
      border-radius: var(--radius-sml);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: var(--space-2x-sml);
    }
    #alloy-kc-docking .status-box__row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    #alloy-kc-docking .status-pill {
      display: flex;
      gap: var(--space-6x-sml);
      align-items: center;
      overflow: hidden;
      padding: var(--space-6x-sml) var(--space-5x-sml);
      border: 1px solid var(--color-pill-border);
      border-radius: var(--radius-sml);
    }
    #alloy-kc-docking .status-pill p {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--background-accent);
      white-space: nowrap;
    }
    #alloy-kc-docking .icon-16 { width: 16px; height: 16px; flex-shrink: 0; overflow: hidden; }
    #alloy-kc-docking .icon-16 svg { display: block; width: 100%; height: 100%; }
    #alloy-kc-docking .icon-12 { width: 12px; height: 12px; flex-shrink: 0; overflow: hidden; }
    #alloy-kc-docking .icon-12 svg { display: block; width: 100%; height: 100%; }
    #alloy-kc-docking .chevron { opacity: 0.7; }

    /* message block (749:3718) */
    #alloy-kc-docking .message {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: flex-start;
    }
    #alloy-kc-docking .message__lede {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--space-6x-sml);
      align-items: flex-start;
    }
    #alloy-kc-docking .message__heading {
      width: 100%;
      font-weight: 500;
      font-size: var(--space-med);
      line-height: normal;
      letter-spacing: -0.6px;
      color: var(--text-inverse);
    }
    #alloy-kc-docking .message__sub {
      width: 100%;
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--color-text-70);
    }

    /* patterns box (749:3722) */
    #alloy-kc-docking .patterns {
      width: 100%;
      border: 1px solid var(--color-border-10);
      border-radius: var(--radius-sml);
      display: flex;
      flex-direction: column;
      gap: var(--space-4x-sml);
      align-items: flex-start;
      padding: var(--space-2x-sml);
    }
    #alloy-kc-docking .patterns__heading {
      width: 690px;
      max-width: 100%;
      font-weight: 500;
      font-size: var(--size-3x-sml);
      line-height: 18px; /* frame height; trim approximated */
      letter-spacing: -0.32px;
      color: var(--color-text-70);
    }
    #alloy-kc-docking .patterns__list {
      width: 100%;
      border: 1px solid var(--color-border-10);
      border-radius: var(--radius-sml);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    #alloy-kc-docking .patterns__row {
      width: 100%;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: var(--space-4x-sml) var(--space-2x-sml);
    }
    #alloy-kc-docking .patterns__row--divider { border-bottom: 1px solid var(--color-border-10); }
    #alloy-kc-docking .patterns__row-inner {
      flex: 1 0 0;
      min-width: 0;
      display: flex;
      align-items: center;
    }
    #alloy-kc-docking .patterns__row-inner p {
      flex: 1 0 0;
      min-width: 0;
      font-weight: 400;
      font-size: 14px;
      line-height: normal;
      color: var(--color-text-50);
    }

    /* trailing paragraph (749:3734) */
    #alloy-kc-docking .message__outro {
      width: 100%;
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--color-text-70);
    }

    /* PDF chip (749:3735) */
    #alloy-kc-docking .pdf-chip {
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: var(--space-4x-sml) var(--space-2x-sml);
      border: 1px solid var(--color-border-20);
      border-radius: var(--radius-sml);
    }
    #alloy-kc-docking .pdf-chip__inner {
      display: flex;
      gap: var(--spacings-2x-sml);
      align-items: center;
    }
    #alloy-kc-docking .pdf-chip__name {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--text-inverse);
      white-space: nowrap;
    }

    /* feedback icon group (749:3744) */
    #alloy-kc-docking .icon-group {
      display: flex;
      gap: var(--spacings-x-sml);
      align-items: center;
    }

    /* ---- Comment section (749:3748) ---- */
    #alloy-kc-docking .comment-section {
      width: 100%;
      background: var(--color-chat-bg);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 0 var(--space-x-lrg) var(--space-x-lrg);
    }
    #alloy-kc-docking .comment-field {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--spacings-x-sml);
      align-items: flex-start;
    }
    #alloy-kc-docking .comment-wrapper {
      width: 100%;
      background: var(--color-input-bg);
      border: 1px solid var(--color-border-10);
      border-radius: var(--radius-sml);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      overflow: hidden;
    }
    #alloy-kc-docking .comment-bottom {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
      padding: var(--spacings-x-sml) var(--spacings-sml);
      border-bottom-left-radius: var(--radius-med);
      border-bottom-right-radius: var(--radius-med);
    }
    #alloy-kc-docking .comment-placeholder {
      flex: 1 0 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-weight: 400;
      font-size: var(--size-3x-sml);
      line-height: 1.4;
      color: var(--color-text-70);
    }
    #alloy-kc-docking .comment-icons {
      display: flex;
      gap: var(--spacings-x-sml);
      align-items: center;
      flex-shrink: 0;
    }
    #alloy-kc-docking .send-btn {
      width: 28px;
      height: 28px;
      flex-shrink: 0;
      background: var(--background-accent);
      border: none;
      appearance: none;
      -webkit-appearance: none;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 0;
      cursor: pointer;
    }
    /* Icon/LH (749:3758) rotated -90deg, glyph inset to match Figma */
    #alloy-kc-docking .send-btn__rot {
      position: relative;
      width: 14px;
      height: 14px;
      transform: rotate(-90deg);
    }
    #alloy-kc-docking .send-btn__vec {
      position: absolute;
      top: 12.49%;
      right: 8.33%;
      bottom: 12.49%;
      left: 12.49%;
    }
    #alloy-kc-docking .send-btn__bleed {
      position: absolute;
      top: -4.76%;
      right: -4.51%;
      bottom: -4.76%;
      left: -4.51%;
    }
    #alloy-kc-docking .send-btn__bleed svg { display: block; width: 100%; height: 100%; }

    /* ---- Animation layer (does not alter the static design) ---- */
    #alloy-kc-docking .anim {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }
    #alloy-kc-docking .anim.show { opacity: 1; transform: translateY(0); }
    #alloy-kc-docking .gone { display: none !important; }

    /* typing into the message bar */
    #alloy-kc-docking .comment-placeholder .typed-line { display: none; align-items: center; }
    #alloy-kc-docking .comment-placeholder.typing .ph-text { display: none; }
    #alloy-kc-docking .comment-placeholder.typing .typed-line { display: flex; }
    #alloy-kc-docking .typed { color: var(--text-inverse); white-space: pre-wrap; }
    #alloy-kc-docking .caret {
      display: inline-block;
      width: 1.5px;
      height: 17px;
      background: var(--text-inverse);
      margin-left: 1px;
      animation: caret-blink 1s step-end infinite;
    }
    @keyframes caret-blink { 50% { opacity: 0; } }

    /* streaming text cursor (mimics live token output) */
    #alloy-kc-docking .streaming::after {
      content: '';
      display: inline-block;
      width: 6px;
      height: 1.05em;
      background: currentColor;
      margin-left: 2px;
      transform: translateY(2px);
      animation: caret-blink 1s step-end infinite;
    }

    /* Alloy thinking indicator */
    #alloy-kc-docking .thinking {
      display: flex;
      align-items: center;
      gap: 6px;
      height: 21.941px;
      padding-left: 2px;
    }
    #alloy-kc-docking .thinking .dot {
      width: 6px;
      height: 6px;
      border-radius: var(--radius-full);
      background: rgba(255, 255, 255, 0.5);
      animation: dot-pulse 1.2s infinite ease-in-out;
    }
    #alloy-kc-docking .thinking .dot:nth-child(2) { animation-delay: 0.18s; }
    #alloy-kc-docking .thinking .dot:nth-child(3) { animation-delay: 0.36s; }
    @keyframes dot-pulse {
      0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
      30% { transform: translateY(-4px); opacity: 1; }
    }

/* oscillation: copied from the public Alloy homepage embed; remote font import removed. */
#alloy-kc-oscillation {
      /* Colors */
      --color-chat-bg: #171717;            /* Chat + Comment section surface */
      --color-window-bg: #171717;          /* backing fill behind chat (kept dark so loop fade-out doesn't flash) */
      --color-border-window: #474747;      /* window left border */
      --color-user-bubble: rgba(255,255,255,0.2);
      --color-user-avatar-bg: #ffffff;
      --color-user-avatar-border: #025dfe;
      --text-inverse: #ffffff;
      --color-text-70: rgba(255,255,255,0.7);
      --color-text-50: rgba(255,255,255,0.5);
      --color-border-10: rgba(255,255,255,0.1);
      --color-border-20: rgba(255,255,255,0.2);
      --background-accent: #65ed74;
      --color-pill-border: rgba(101,237,116,0.5);
      --border-icon: #605f66;
      --color-input-bg: #2e2e2e;
      --text-highlight: #0013a4;           /* Alloy avatar stroke */
      --color-send-icon: #171717;

      /* Spacing */
      --space-6x-sml: 4px;
      --space-5x-sml: 6px;
      --space-4x-sml: 8px;
      --space-3x-sml: 10px;
      --space-2x-sml: 12px;
      --space-x-sml: 14px;
      --space-med: 20px;
      --space-x-lrg: 32px;
      --spacings-2x-sml: 4px;
      --spacings-x-sml: 8px;
      --spacings-sml: 12px;
      --spacings-med: 16px;
      --spacings-lrg: 24px;
      --spacings-4x-lrg: 64px;

      /* Radii */
      --radius-x-sml: 2px;
      --radius-sml: 4px;
      --radius-med: 8px;
      --radius-full: 999px;

      /* Sizes (font) */
      --size-4x-sml: 14px;
      --size-3x-sml: 16px;

      /* Type families */
      --family-primary: 'Geist', sans-serif;
      display: block;
      width: 100%;
      box-sizing: border-box;
      font-family: var(--family-primary);
      color: var(--text-inverse);
      -webkit-font-smoothing: antialiased;
      text-align: left;
      text-transform: none;
      font-style: normal;
      font-variant: normal;
      letter-spacing: normal;
      line-height: normal;
    }
    #alloy-kc-oscillation *, #alloy-kc-oscillation *::before, #alloy-kc-oscillation *::after { box-sizing: border-box; }
    #alloy-kc-oscillation * { margin: 0; padding: 0; }
    #alloy-kc-oscillation .kc-sizer { position: relative; width: 100%; max-width: 796px; margin: 0 auto; overflow: hidden; }
    #alloy-kc-oscillation .kc-stage { position: absolute; top: 0; left: 0; width: 796px; transform-origin: top left; will-change: transform; backface-visibility: hidden; }
    /* perf: isolate the animated subtree so reveals don't reflow/repaint the page */
    #alloy-kc-oscillation .chat-window { contain: layout paint; }
    #alloy-kc-oscillation .chat { contain: layout paint; }
    #alloy-kc-oscillation .reveal { will-change: grid-template-rows; }
    #alloy-kc-oscillation .reveal-inner { will-change: opacity, transform; }

    /* ---- Chat Window (749:3690) ---- */
    #alloy-kc-oscillation .chat-window {
      width: 796px;
      height: 730px;
      background: var(--color-window-bg);
      border-top-right-radius: var(--radius-med);
      border-bottom-right-radius: var(--radius-med);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      overflow: hidden;
    }

    /* ---- Chat (749:3691) ---- */
    #alloy-kc-oscillation .chat {
      flex: 1 0 0;
      min-height: 0;
      width: 100%;
      background: var(--color-chat-bg);
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: center;
      justify-content: flex-end;
      padding: var(--spacings-lrg) var(--space-x-lrg);
      overflow: hidden;
      transition: opacity 0.4s ease;
    }
    /* height-easing reveal wrapper: collapsed components reserve no space */
    #alloy-kc-oscillation .reveal {
      display: grid;
      grid-template-rows: 0fr;
      width: 100%;
      transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }
    #alloy-kc-oscillation .reveal.show { grid-template-rows: 1fr; }
    #alloy-kc-oscillation .reveal > .reveal-inner {
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.55s ease 0.05s, transform 0.55s ease 0.05s;
    }
    #alloy-kc-oscillation .reveal.show > .reveal-inner { opacity: 1; transform: translateY(0); }

    /* ---- User message (749:3692 / 3693 / 3694) ---- */
    #alloy-kc-oscillation .chat-message {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      padding-left: var(--spacings-4x-lrg);
    }
    #alloy-kc-oscillation .chat-message__inner {
      width: 567px;
      display: flex;
      flex-direction: column;
      gap: var(--space-6x-sml);
      align-items: flex-start;
      justify-content: flex-end;
    }
    #alloy-kc-oscillation .bubble {
      width: 100%;
      background: var(--color-user-bubble);
      display: flex;
      flex-direction: column;
      gap: var(--space-4x-sml);
      align-items: flex-start;
      justify-content: center;
      padding: var(--spacings-x-sml) var(--spacings-sml);
      /* br corner left square (quirk preserved) */
      border-top-left-radius: var(--radius-med);
      border-top-right-radius: var(--radius-med);
      border-bottom-left-radius: var(--radius-med);
    }
    #alloy-kc-oscillation .you {
      display: flex;
      gap: var(--space-6x-sml);
      align-items: center;
    }
    #alloy-kc-oscillation .you__avatar {
      width: 24px;
      height: 24px;
      background: var(--color-user-avatar-bg);
      border: 0.879px solid var(--color-user-avatar-border);
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-5x-sml);
    }
    #alloy-kc-oscillation .you__avatar p {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--color-user-avatar-border);
      text-align: center;
      white-space: nowrap;
    }
    #alloy-kc-oscillation .you__name, #alloy-kc-oscillation .you__time {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--text-inverse);
      white-space: nowrap;
    }
    #alloy-kc-oscillation .bubble__text {
      width: 100%;
      font-weight: 400;
      font-size: var(--size-3x-sml);
      line-height: 1.4;
      color: var(--text-inverse);
    }

    /* ---- AI message (749:3705) ---- */
    #alloy-kc-oscillation .ai-message {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: flex-start;
      padding-right: var(--spacings-lrg);
    }
    #alloy-kc-oscillation .ai-message__top {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: flex-start;
    }

    /* Alloy identity row (749:3707) */
    #alloy-kc-oscillation .alloy {
      display: flex;
      gap: var(--space-6x-sml);
      align-items: center;
    }
    #alloy-kc-oscillation .alloy__avatar {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
    }
    #alloy-kc-oscillation .alloy__avatar svg { display: block; width: 100%; height: 100%; }
    #alloy-kc-oscillation .alloy__name, #alloy-kc-oscillation .alloy__time {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--text-inverse);
      white-space: nowrap;
    }

    /* Status box (749:3712) */
    #alloy-kc-oscillation .status-box {
      width: 100%;
      border: 1px solid var(--color-border-10);
      border-radius: var(--radius-sml);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: var(--space-2x-sml);
    }
    #alloy-kc-oscillation .status-box__row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    #alloy-kc-oscillation .status-pill {
      display: flex;
      gap: var(--space-6x-sml);
      align-items: center;
      overflow: hidden;
      padding: var(--space-6x-sml) var(--space-5x-sml);
      border: 1px solid var(--color-pill-border);
      border-radius: var(--radius-sml);
    }
    #alloy-kc-oscillation .status-pill p {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--background-accent);
      white-space: nowrap;
    }
    #alloy-kc-oscillation .icon-16 { width: 16px; height: 16px; flex-shrink: 0; overflow: hidden; }
    #alloy-kc-oscillation .icon-16 svg { display: block; width: 100%; height: 100%; }
    #alloy-kc-oscillation .icon-12 { width: 12px; height: 12px; flex-shrink: 0; overflow: hidden; }
    #alloy-kc-oscillation .icon-12 svg { display: block; width: 100%; height: 100%; }
    #alloy-kc-oscillation .chevron { opacity: 0.7; }

    /* message block (749:3718) */
    #alloy-kc-oscillation .message {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: flex-start;
    }
    #alloy-kc-oscillation .message__lede {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--space-6x-sml);
      align-items: flex-start;
    }
    #alloy-kc-oscillation .message__heading {
      width: 100%;
      font-weight: 500;
      font-size: var(--space-med);
      line-height: normal;
      letter-spacing: -0.6px;
      color: var(--text-inverse);
    }
    #alloy-kc-oscillation .message__sub {
      width: 100%;
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--color-text-70);
    }

    /* patterns box (749:3722) */
    #alloy-kc-oscillation .patterns {
      width: 100%;
      border: 1px solid var(--color-border-10);
      border-radius: var(--radius-sml);
      display: flex;
      flex-direction: column;
      gap: var(--space-4x-sml);
      align-items: flex-start;
      padding: var(--space-2x-sml);
    }
    #alloy-kc-oscillation .patterns__heading {
      width: 690px;
      max-width: 100%;
      font-weight: 500;
      font-size: var(--size-3x-sml);
      line-height: 18px; /* frame height; trim approximated */
      letter-spacing: -0.32px;
      color: var(--color-text-70);
    }
    #alloy-kc-oscillation .patterns__list {
      width: 100%;
      border: 1px solid var(--color-border-10);
      border-radius: var(--radius-sml);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    #alloy-kc-oscillation .patterns__row {
      width: 100%;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: var(--space-4x-sml) var(--space-2x-sml);
    }
    #alloy-kc-oscillation .patterns__row--divider { border-bottom: 1px solid var(--color-border-10); }
    #alloy-kc-oscillation .patterns__row-inner {
      flex: 1 0 0;
      min-width: 0;
      display: flex;
      align-items: center;
    }
    #alloy-kc-oscillation .patterns__row-inner p {
      flex: 1 0 0;
      min-width: 0;
      font-weight: 400;
      font-size: 14px;
      line-height: normal;
      color: var(--color-text-50);
    }

    /* trailing paragraph (749:3734) */
    #alloy-kc-oscillation .message__outro {
      width: 100%;
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--color-text-70);
    }

    /* PDF chip (749:3735) */
    #alloy-kc-oscillation .pdf-chip {
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: var(--space-4x-sml) var(--space-2x-sml);
      border: 1px solid var(--color-border-20);
      border-radius: var(--radius-sml);
    }
    #alloy-kc-oscillation .pdf-chip__inner {
      display: flex;
      gap: var(--spacings-2x-sml);
      align-items: center;
    }
    #alloy-kc-oscillation .pdf-chip__name {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--text-inverse);
      white-space: nowrap;
    }

    /* feedback icon group (749:3744) */
    #alloy-kc-oscillation .icon-group {
      display: flex;
      gap: var(--spacings-x-sml);
      align-items: center;
    }

    /* ---- Comment section (749:3748) ---- */
    #alloy-kc-oscillation .comment-section {
      width: 100%;
      background: var(--color-chat-bg);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 0 var(--space-x-lrg) var(--space-x-lrg);
    }
    #alloy-kc-oscillation .comment-field {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--spacings-x-sml);
      align-items: flex-start;
    }
    #alloy-kc-oscillation .comment-wrapper {
      width: 100%;
      background: var(--color-input-bg);
      border: 1px solid var(--color-border-10);
      border-radius: var(--radius-sml);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      overflow: hidden;
    }
    #alloy-kc-oscillation .comment-bottom {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
      padding: var(--spacings-x-sml) var(--spacings-sml);
      border-bottom-left-radius: var(--radius-med);
      border-bottom-right-radius: var(--radius-med);
    }
    #alloy-kc-oscillation .comment-placeholder {
      flex: 1 0 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-weight: 400;
      font-size: var(--size-3x-sml);
      line-height: 1.4;
      color: var(--color-text-70);
    }
    #alloy-kc-oscillation .comment-icons {
      display: flex;
      gap: var(--spacings-x-sml);
      align-items: center;
      flex-shrink: 0;
    }
    #alloy-kc-oscillation .send-btn {
      width: 28px;
      height: 28px;
      flex-shrink: 0;
      background: var(--background-accent);
      border: none;
      appearance: none;
      -webkit-appearance: none;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 0;
      cursor: pointer;
    }
    /* Icon/LH (749:3758) rotated -90deg, glyph inset to match Figma */
    #alloy-kc-oscillation .send-btn__rot {
      position: relative;
      width: 14px;
      height: 14px;
      transform: rotate(-90deg);
    }
    #alloy-kc-oscillation .send-btn__vec {
      position: absolute;
      top: 12.49%;
      right: 8.33%;
      bottom: 12.49%;
      left: 12.49%;
    }
    #alloy-kc-oscillation .send-btn__bleed {
      position: absolute;
      top: -4.76%;
      right: -4.51%;
      bottom: -4.76%;
      left: -4.51%;
    }
    #alloy-kc-oscillation .send-btn__bleed svg { display: block; width: 100%; height: 100%; }

    /* ---- Animation layer (does not alter the static design) ---- */
    #alloy-kc-oscillation .anim {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }
    #alloy-kc-oscillation .anim.show { opacity: 1; transform: translateY(0); }
    #alloy-kc-oscillation .gone { display: none !important; }

    /* typing into the message bar */
    #alloy-kc-oscillation .comment-placeholder .typed-line { display: none; align-items: center; }
    #alloy-kc-oscillation .comment-placeholder.typing .ph-text { display: none; }
    #alloy-kc-oscillation .comment-placeholder.typing .typed-line { display: flex; }
    #alloy-kc-oscillation .typed { color: var(--text-inverse); white-space: pre-wrap; }
    #alloy-kc-oscillation .caret {
      display: inline-block;
      width: 1.5px;
      height: 17px;
      background: var(--text-inverse);
      margin-left: 1px;
      animation: caret-blink 1s step-end infinite;
    }
    @keyframes caret-blink { 50% { opacity: 0; } }

    /* streaming text cursor (mimics live token output) */
    #alloy-kc-oscillation .streaming::after {
      content: '';
      display: inline-block;
      width: 6px;
      height: 1.05em;
      background: currentColor;
      margin-left: 2px;
      transform: translateY(2px);
      animation: caret-blink 1s step-end infinite;
    }

    /* Alloy thinking indicator */
    #alloy-kc-oscillation .thinking {
      display: flex;
      align-items: center;
      gap: 6px;
      height: 21.941px;
      padding-left: 2px;
    }
    #alloy-kc-oscillation .thinking .dot {
      width: 6px;
      height: 6px;
      border-radius: var(--radius-full);
      background: rgba(255, 255, 255, 0.5);
      animation: dot-pulse 1.2s infinite ease-in-out;
    }
    #alloy-kc-oscillation .thinking .dot:nth-child(2) { animation-delay: 0.18s; }
    #alloy-kc-oscillation .thinking .dot:nth-child(3) { animation-delay: 0.36s; }
    @keyframes dot-pulse {
      0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
      30% { transform: translateY(-4px); opacity: 1; }
    }

/* deployment: copied from the public Alloy homepage embed; remote font import removed. */
#alloy-kc-deployment {
      /* Colors */
      --color-chat-bg: #171717;            /* Chat + Comment section surface */
      --color-window-bg: #171717;          /* backing fill behind chat (kept dark so loop fade-out doesn't flash) */
      --color-border-window: #474747;      /* window left border */
      --color-user-bubble: rgba(255,255,255,0.2);
      --color-user-avatar-bg: #ffffff;
      --color-user-avatar-border: #025dfe;
      --text-inverse: #ffffff;
      --color-text-70: rgba(255,255,255,0.7);
      --color-text-50: rgba(255,255,255,0.5);
      --color-border-10: rgba(255,255,255,0.1);
      --color-border-20: rgba(255,255,255,0.2);
      --background-accent: #65ed74;
      --color-pill-border: rgba(101,237,116,0.5);
      --border-icon: #605f66;
      --color-input-bg: #2e2e2e;
      --text-highlight: #0013a4;           /* Alloy avatar stroke */
      --color-send-icon: #171717;

      /* Spacing */
      --space-6x-sml: 4px;
      --space-5x-sml: 6px;
      --space-4x-sml: 8px;
      --space-3x-sml: 10px;
      --space-2x-sml: 12px;
      --space-x-sml: 14px;
      --space-med: 20px;
      --space-x-lrg: 32px;
      --spacings-2x-sml: 4px;
      --spacings-x-sml: 8px;
      --spacings-sml: 12px;
      --spacings-med: 16px;
      --spacings-lrg: 24px;
      --spacings-4x-lrg: 64px;

      /* Radii */
      --radius-x-sml: 2px;
      --radius-sml: 4px;
      --radius-med: 8px;
      --radius-full: 999px;

      /* Sizes (font) */
      --size-4x-sml: 14px;
      --size-3x-sml: 16px;

      /* Type families */
      --family-primary: 'Geist', sans-serif;
      display: block;
      width: 100%;
      box-sizing: border-box;
      font-family: var(--family-primary);
      color: var(--text-inverse);
      -webkit-font-smoothing: antialiased;
      text-align: left;
      text-transform: none;
      font-style: normal;
      font-variant: normal;
      letter-spacing: normal;
      line-height: normal;
    }
    #alloy-kc-deployment *, #alloy-kc-deployment *::before, #alloy-kc-deployment *::after { box-sizing: border-box; }
    #alloy-kc-deployment * { margin: 0; padding: 0; }
    #alloy-kc-deployment .kc-sizer { position: relative; width: 100%; max-width: 796px; margin: 0 auto; overflow: hidden; }
    #alloy-kc-deployment .kc-stage { position: absolute; top: 0; left: 0; width: 796px; transform-origin: top left; will-change: transform; backface-visibility: hidden; }
    /* perf: isolate the animated subtree so reveals don't reflow/repaint the page */
    #alloy-kc-deployment .chat-window { contain: layout paint; }
    #alloy-kc-deployment .chat { contain: layout paint; }
    #alloy-kc-deployment .reveal { will-change: grid-template-rows; }
    #alloy-kc-deployment .reveal-inner { will-change: opacity, transform; }

    /* ---- Chat Window (749:3690) ---- */
    #alloy-kc-deployment .chat-window {
      width: 796px;
      height: 730px;
      background: var(--color-window-bg);
      border-top-right-radius: var(--radius-med);
      border-bottom-right-radius: var(--radius-med);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      overflow: hidden;
    }

    /* ---- Chat (749:3691) ---- */
    #alloy-kc-deployment .chat {
      flex: 1 0 0;
      min-height: 0;
      width: 100%;
      background: var(--color-chat-bg);
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: center;
      justify-content: flex-end;
      padding: var(--spacings-lrg) var(--space-x-lrg);
      overflow: hidden;
      transition: opacity 0.4s ease;
    }
    /* height-easing reveal wrapper: collapsed components reserve no space */
    #alloy-kc-deployment .reveal {
      display: grid;
      grid-template-rows: 0fr;
      width: 100%;
      transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }
    #alloy-kc-deployment .reveal.show { grid-template-rows: 1fr; }
    #alloy-kc-deployment .reveal > .reveal-inner {
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.55s ease 0.05s, transform 0.55s ease 0.05s;
    }
    #alloy-kc-deployment .reveal.show > .reveal-inner { opacity: 1; transform: translateY(0); }

    /* ---- User message (749:3692 / 3693 / 3694) ---- */
    #alloy-kc-deployment .chat-message {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      padding-left: var(--spacings-4x-lrg);
    }
    #alloy-kc-deployment .chat-message__inner {
      width: 567px;
      display: flex;
      flex-direction: column;
      gap: var(--space-6x-sml);
      align-items: flex-start;
      justify-content: flex-end;
    }
    #alloy-kc-deployment .bubble {
      width: 100%;
      background: var(--color-user-bubble);
      display: flex;
      flex-direction: column;
      gap: var(--space-4x-sml);
      align-items: flex-start;
      justify-content: center;
      padding: var(--spacings-x-sml) var(--spacings-sml);
      /* br corner left square (quirk preserved) */
      border-top-left-radius: var(--radius-med);
      border-top-right-radius: var(--radius-med);
      border-bottom-left-radius: var(--radius-med);
    }
    #alloy-kc-deployment .you {
      display: flex;
      gap: var(--space-6x-sml);
      align-items: center;
    }
    #alloy-kc-deployment .you__avatar {
      width: 24px;
      height: 24px;
      background: var(--color-user-avatar-bg);
      border: 0.879px solid var(--color-user-avatar-border);
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-5x-sml);
    }
    #alloy-kc-deployment .you__avatar p {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--color-user-avatar-border);
      text-align: center;
      white-space: nowrap;
    }
    #alloy-kc-deployment .you__name, #alloy-kc-deployment .you__time {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--text-inverse);
      white-space: nowrap;
    }
    #alloy-kc-deployment .bubble__text {
      width: 100%;
      font-weight: 400;
      font-size: var(--size-3x-sml);
      line-height: 1.4;
      color: var(--text-inverse);
    }

    /* ---- AI message (749:3705) ---- */
    #alloy-kc-deployment .ai-message {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: flex-start;
      padding-right: var(--spacings-lrg);
    }
    #alloy-kc-deployment .ai-message__top {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: flex-start;
    }

    /* Alloy identity row (749:3707) */
    #alloy-kc-deployment .alloy {
      display: flex;
      gap: var(--space-6x-sml);
      align-items: center;
    }
    #alloy-kc-deployment .alloy__avatar {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
    }
    #alloy-kc-deployment .alloy__avatar svg { display: block; width: 100%; height: 100%; }
    #alloy-kc-deployment .alloy__name, #alloy-kc-deployment .alloy__time {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--text-inverse);
      white-space: nowrap;
    }

    /* Status box (749:3712) */
    #alloy-kc-deployment .status-box {
      width: 100%;
      border: 1px solid var(--color-border-10);
      border-radius: var(--radius-sml);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: var(--space-2x-sml);
    }
    #alloy-kc-deployment .status-box__row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    #alloy-kc-deployment .status-pill {
      display: flex;
      gap: var(--space-6x-sml);
      align-items: center;
      overflow: hidden;
      padding: var(--space-6x-sml) var(--space-5x-sml);
      border: 1px solid var(--color-pill-border);
      border-radius: var(--radius-sml);
    }
    #alloy-kc-deployment .status-pill p {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--background-accent);
      white-space: nowrap;
    }
    #alloy-kc-deployment .icon-16 { width: 16px; height: 16px; flex-shrink: 0; overflow: hidden; }
    #alloy-kc-deployment .icon-16 svg { display: block; width: 100%; height: 100%; }
    #alloy-kc-deployment .icon-12 { width: 12px; height: 12px; flex-shrink: 0; overflow: hidden; }
    #alloy-kc-deployment .icon-12 svg { display: block; width: 100%; height: 100%; }
    #alloy-kc-deployment .chevron { opacity: 0.7; }

    /* message block (749:3718) */
    #alloy-kc-deployment .message {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: flex-start;
    }
    #alloy-kc-deployment .message__lede {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--space-6x-sml);
      align-items: flex-start;
    }
    #alloy-kc-deployment .message__heading {
      width: 100%;
      font-weight: 500;
      font-size: var(--space-med);
      line-height: normal;
      letter-spacing: -0.6px;
      color: var(--text-inverse);
    }
    #alloy-kc-deployment .message__sub {
      width: 100%;
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--color-text-70);
    }

    /* patterns box (749:3722) */
    #alloy-kc-deployment .patterns {
      width: 100%;
      border: 1px solid var(--color-border-10);
      border-radius: var(--radius-sml);
      display: flex;
      flex-direction: column;
      gap: var(--space-4x-sml);
      align-items: flex-start;
      padding: var(--space-2x-sml);
    }
    #alloy-kc-deployment .patterns__heading {
      width: 690px;
      max-width: 100%;
      font-weight: 500;
      font-size: var(--size-3x-sml);
      line-height: 18px; /* frame height; trim approximated */
      letter-spacing: -0.32px;
      color: var(--color-text-70);
    }
    #alloy-kc-deployment .patterns__list {
      width: 100%;
      border: 1px solid var(--color-border-10);
      border-radius: var(--radius-sml);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    #alloy-kc-deployment .patterns__row {
      width: 100%;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: var(--space-4x-sml) var(--space-2x-sml);
    }
    #alloy-kc-deployment .patterns__row--divider { border-bottom: 1px solid var(--color-border-10); }
    #alloy-kc-deployment .patterns__row-inner {
      flex: 1 0 0;
      min-width: 0;
      display: flex;
      align-items: center;
    }
    #alloy-kc-deployment .patterns__row-inner p {
      flex: 1 0 0;
      min-width: 0;
      font-weight: 400;
      font-size: 14px;
      line-height: normal;
      color: var(--color-text-50);
    }

    /* standalone list boxes (Marcus) + inline link */
    #alloy-kc-deployment .list-box {
      width: 100%;
      border: 1px solid var(--color-border-10);
      border-radius: var(--radius-sml);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    #alloy-kc-deployment .list-row {
      width: 100%;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: var(--space-4x-sml) var(--space-2x-sml);
    }
    #alloy-kc-deployment .list-row--divider { border-bottom: 1px solid var(--color-border-10); }
    #alloy-kc-deployment .list-row--col {
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      overflow: visible;
    }
    #alloy-kc-deployment .list-row__inner {
      flex: 1 0 0;
      min-width: 0;
      width: 100%;
      display: flex;
      align-items: center;
    }
    #alloy-kc-deployment .list-row__inner p {
      flex: 1 0 0;
      min-width: 0;
      font-weight: 400;
      font-size: 14px;
      line-height: normal;
      color: var(--color-text-50);
    }
    #alloy-kc-deployment .recal-line {
      display: flex;
      gap: var(--space-5x-sml);
      align-items: center;
      flex-wrap: wrap;
    }
    #alloy-kc-deployment .recal-line p {
      font-weight: 400;
      font-size: 14px;
      line-height: normal;
      color: var(--color-text-50);
      white-space: nowrap;
    }
    #alloy-kc-deployment .inline-link {
      display: inline-flex;
      gap: var(--spacings-2x-sml);
      align-items: center;
    }
    #alloy-kc-deployment .inline-link__text {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--text-inverse);
      white-space: nowrap;
    }

    /* trailing paragraph (749:3734) */
    #alloy-kc-deployment .message__outro {
      width: 100%;
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--color-text-70);
    }

    /* PDF chip (749:3735) */
    #alloy-kc-deployment .pdf-chip {
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: var(--space-4x-sml) var(--space-2x-sml);
      border: 1px solid var(--color-border-20);
      border-radius: var(--radius-sml);
    }
    #alloy-kc-deployment .pdf-chip__inner {
      display: flex;
      gap: var(--spacings-2x-sml);
      align-items: center;
    }
    #alloy-kc-deployment .pdf-chip__name {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--text-inverse);
      white-space: nowrap;
    }

    /* feedback icon group (749:3744) */
    #alloy-kc-deployment .icon-group {
      display: flex;
      gap: var(--spacings-x-sml);
      align-items: center;
    }

    /* ---- Comment section (749:3748) ---- */
    #alloy-kc-deployment .comment-section {
      width: 100%;
      background: var(--color-chat-bg);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 0 var(--space-x-lrg) var(--space-x-lrg);
    }
    #alloy-kc-deployment .comment-field {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--spacings-x-sml);
      align-items: flex-start;
    }
    #alloy-kc-deployment .comment-wrapper {
      width: 100%;
      background: var(--color-input-bg);
      border: 1px solid var(--color-border-10);
      border-radius: var(--radius-sml);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      overflow: hidden;
    }
    #alloy-kc-deployment .comment-bottom {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
      padding: var(--spacings-x-sml) var(--spacings-sml);
      border-bottom-left-radius: var(--radius-med);
      border-bottom-right-radius: var(--radius-med);
    }
    #alloy-kc-deployment .comment-placeholder {
      flex: 1 0 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-weight: 400;
      font-size: var(--size-3x-sml);
      line-height: 1.4;
      color: var(--color-text-70);
    }
    #alloy-kc-deployment .comment-icons {
      display: flex;
      gap: var(--spacings-x-sml);
      align-items: center;
      flex-shrink: 0;
    }
    #alloy-kc-deployment .send-btn {
      width: 28px;
      height: 28px;
      flex-shrink: 0;
      background: var(--background-accent);
      border: none;
      appearance: none;
      -webkit-appearance: none;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 0;
      cursor: pointer;
    }
    /* Icon/LH (749:3758) rotated -90deg, glyph inset to match Figma */
    #alloy-kc-deployment .send-btn__rot {
      position: relative;
      width: 14px;
      height: 14px;
      transform: rotate(-90deg);
    }
    #alloy-kc-deployment .send-btn__vec {
      position: absolute;
      top: 12.49%;
      right: 8.33%;
      bottom: 12.49%;
      left: 12.49%;
    }
    #alloy-kc-deployment .send-btn__bleed {
      position: absolute;
      top: -4.76%;
      right: -4.51%;
      bottom: -4.76%;
      left: -4.51%;
    }
    #alloy-kc-deployment .send-btn__bleed svg { display: block; width: 100%; height: 100%; }

    /* ---- Animation layer (does not alter the static design) ---- */
    #alloy-kc-deployment .anim {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }
    #alloy-kc-deployment .anim.show { opacity: 1; transform: translateY(0); }
    #alloy-kc-deployment .gone { display: none !important; }

    /* typing into the message bar */
    #alloy-kc-deployment .comment-placeholder .typed-line { display: none; align-items: center; }
    #alloy-kc-deployment .comment-placeholder.typing .ph-text { display: none; }
    #alloy-kc-deployment .comment-placeholder.typing .typed-line { display: flex; }
    #alloy-kc-deployment .typed { color: var(--text-inverse); white-space: pre-wrap; }
    #alloy-kc-deployment .caret {
      display: inline-block;
      width: 1.5px;
      height: 17px;
      background: var(--text-inverse);
      margin-left: 1px;
      animation: caret-blink 1s step-end infinite;
    }
    @keyframes caret-blink { 50% { opacity: 0; } }

    /* streaming text cursor (mimics live token output) */
    #alloy-kc-deployment .streaming::after {
      content: '';
      display: inline-block;
      width: 6px;
      height: 1.05em;
      background: currentColor;
      margin-left: 2px;
      transform: translateY(2px);
      animation: caret-blink 1s step-end infinite;
    }

    /* Alloy thinking indicator */
    #alloy-kc-deployment .thinking {
      display: flex;
      align-items: center;
      gap: 6px;
      height: 21.941px;
      padding-left: 2px;
    }
    #alloy-kc-deployment .thinking .dot {
      width: 6px;
      height: 6px;
      border-radius: var(--radius-full);
      background: rgba(255, 255, 255, 0.5);
      animation: dot-pulse 1.2s infinite ease-in-out;
    }
    #alloy-kc-deployment .thinking .dot:nth-child(2) { animation-delay: 0.18s; }
    #alloy-kc-deployment .thinking .dot:nth-child(3) { animation-delay: 0.36s; }
    @keyframes dot-pulse {
      0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
      30% { transform: translateY(-4px); opacity: 1; }
    }

/* safestop: copied from the public Alloy homepage embed; remote font import removed. */
#alloy-kc-safestop {
      /* Colors */
      --color-chat-bg: #171717;            /* Chat + Comment section surface */
      --color-window-bg: #171717;          /* backing fill behind chat (kept dark so loop fade-out doesn't flash) */
      --color-border-window: #474747;      /* window left border */
      --color-user-bubble: rgba(255,255,255,0.2);
      --color-user-avatar-bg: #ffffff;
      --color-user-avatar-border: #025dfe;
      --text-inverse: #ffffff;
      --color-text-70: rgba(255,255,255,0.7);
      --color-text-50: rgba(255,255,255,0.5);
      --color-border-10: rgba(255,255,255,0.1);
      --color-border-20: rgba(255,255,255,0.2);
      --background-accent: #65ed74;
      --color-pill-border: rgba(101,237,116,0.5);
      --border-icon: #605f66;
      --color-input-bg: #2e2e2e;
      --text-highlight: #0013a4;           /* Alloy avatar stroke */
      --color-send-icon: #171717;

      /* Spacing */
      --space-6x-sml: 4px;
      --space-5x-sml: 6px;
      --space-4x-sml: 8px;
      --space-3x-sml: 10px;
      --space-2x-sml: 12px;
      --space-x-sml: 14px;
      --space-med: 20px;
      --space-x-lrg: 32px;
      --spacings-2x-sml: 4px;
      --spacings-x-sml: 8px;
      --spacings-sml: 12px;
      --spacings-med: 16px;
      --spacings-lrg: 24px;
      --spacings-4x-lrg: 64px;

      /* Radii */
      --radius-x-sml: 2px;
      --radius-sml: 4px;
      --radius-med: 8px;
      --radius-full: 999px;

      /* Sizes (font) */
      --size-4x-sml: 14px;
      --size-3x-sml: 16px;

      /* Type families */
      --family-primary: 'Geist', sans-serif;
      display: block;
      width: 100%;
      box-sizing: border-box;
      font-family: var(--family-primary);
      color: var(--text-inverse);
      -webkit-font-smoothing: antialiased;
      text-align: left;
      text-transform: none;
      font-style: normal;
      font-variant: normal;
      letter-spacing: normal;
      line-height: normal;
    }
    #alloy-kc-safestop *, #alloy-kc-safestop *::before, #alloy-kc-safestop *::after { box-sizing: border-box; }
    #alloy-kc-safestop * { margin: 0; padding: 0; }
    #alloy-kc-safestop .kc-sizer { position: relative; width: 100%; max-width: 796px; margin: 0 auto; overflow: hidden; }
    #alloy-kc-safestop .kc-stage { position: absolute; top: 0; left: 0; width: 796px; transform-origin: top left; will-change: transform; backface-visibility: hidden; }
    /* perf: isolate the animated subtree so reveals don't reflow/repaint the page */
    #alloy-kc-safestop .chat-window { contain: layout paint; }
    #alloy-kc-safestop .chat { contain: layout paint; }
    #alloy-kc-safestop .reveal { will-change: grid-template-rows; }
    #alloy-kc-safestop .reveal-inner { will-change: opacity, transform; }

    /* ---- Chat Window (749:3690) ---- */
    #alloy-kc-safestop .chat-window {
      width: 796px;
      height: 730px;
      background: var(--color-window-bg);
      border-top-right-radius: var(--radius-med);
      border-bottom-right-radius: var(--radius-med);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      overflow: hidden;
    }

    /* ---- Chat (749:3691) ---- */
    #alloy-kc-safestop .chat {
      flex: 1 0 0;
      min-height: 0;
      width: 100%;
      background: var(--color-chat-bg);
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: center;
      justify-content: flex-end;
      padding: var(--spacings-lrg) var(--space-x-lrg);
      overflow: hidden;
      transition: opacity 0.4s ease;
    }
    /* height-easing reveal wrapper: collapsed components reserve no space */
    #alloy-kc-safestop .reveal {
      display: grid;
      grid-template-rows: 0fr;
      width: 100%;
      transition: grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    }
    #alloy-kc-safestop .reveal.show { grid-template-rows: 1fr; }
    #alloy-kc-safestop .reveal > .reveal-inner {
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.45s ease 0.05s, transform 0.45s ease 0.05s;
    }
    #alloy-kc-safestop .reveal.show > .reveal-inner { opacity: 1; transform: translateY(0); }

    /* ---- User message (749:3692 / 3693 / 3694) ---- */
    #alloy-kc-safestop .chat-message {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      padding-left: var(--spacings-4x-lrg);
    }
    #alloy-kc-safestop .chat-message__inner {
      width: 567px;
      display: flex;
      flex-direction: column;
      gap: var(--space-6x-sml);
      align-items: flex-start;
      justify-content: flex-end;
    }
    #alloy-kc-safestop .bubble {
      width: 100%;
      background: var(--color-user-bubble);
      display: flex;
      flex-direction: column;
      gap: var(--space-4x-sml);
      align-items: flex-start;
      justify-content: center;
      padding: var(--spacings-x-sml) var(--spacings-sml);
      /* br corner left square (quirk preserved) */
      border-top-left-radius: var(--radius-med);
      border-top-right-radius: var(--radius-med);
      border-bottom-left-radius: var(--radius-med);
    }
    #alloy-kc-safestop .you {
      display: flex;
      gap: var(--space-6x-sml);
      align-items: center;
    }
    #alloy-kc-safestop .you__avatar {
      width: 24px;
      height: 24px;
      background: var(--color-user-avatar-bg);
      border: 0.879px solid var(--color-user-avatar-border);
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-5x-sml);
    }
    #alloy-kc-safestop .you__avatar p {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--color-user-avatar-border);
      text-align: center;
      white-space: nowrap;
    }
    #alloy-kc-safestop .you__name, #alloy-kc-safestop .you__time {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--text-inverse);
      white-space: nowrap;
    }
    #alloy-kc-safestop .bubble__text {
      width: 100%;
      font-weight: 400;
      font-size: var(--size-3x-sml);
      line-height: 1.4;
      color: var(--text-inverse);
    }

    /* ---- AI message (749:3705) ---- */
    #alloy-kc-safestop .ai-message {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: flex-start;
      padding-right: var(--spacings-lrg);
    }
    #alloy-kc-safestop .ai-message__top {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: flex-start;
    }

    /* Alloy identity row (749:3707) */
    #alloy-kc-safestop .alloy {
      display: flex;
      gap: var(--space-6x-sml);
      align-items: center;
    }
    #alloy-kc-safestop .alloy__avatar {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
    }
    #alloy-kc-safestop .alloy__avatar svg { display: block; width: 100%; height: 100%; }
    #alloy-kc-safestop .alloy__name, #alloy-kc-safestop .alloy__time {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--text-inverse);
      white-space: nowrap;
    }

    /* Status box (749:3712) */
    #alloy-kc-safestop .status-box {
      width: 100%;
      border: 1px solid var(--color-border-10);
      border-radius: var(--radius-sml);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: var(--space-2x-sml);
    }
    #alloy-kc-safestop .status-box__row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    #alloy-kc-safestop .status-pill {
      display: flex;
      gap: var(--space-6x-sml);
      align-items: center;
      overflow: hidden;
      padding: var(--space-6x-sml) var(--space-5x-sml);
      border: 1px solid var(--color-pill-border);
      border-radius: var(--radius-sml);
    }
    #alloy-kc-safestop .status-pill p {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--background-accent);
      white-space: nowrap;
    }
    #alloy-kc-safestop .icon-16 { width: 16px; height: 16px; flex-shrink: 0; overflow: hidden; }
    #alloy-kc-safestop .icon-16 svg { display: block; width: 100%; height: 100%; }
    #alloy-kc-safestop .icon-12 { width: 12px; height: 12px; flex-shrink: 0; overflow: hidden; }
    #alloy-kc-safestop .icon-12 svg { display: block; width: 100%; height: 100%; }
    #alloy-kc-safestop .chevron { opacity: 0.7; }

    /* message block (749:3718) */
    #alloy-kc-safestop .message {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: flex-start;
    }
    #alloy-kc-safestop .message__lede {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--space-6x-sml);
      align-items: flex-start;
    }
    #alloy-kc-safestop .message__heading {
      width: 100%;
      font-weight: 500;
      font-size: var(--space-med);
      line-height: normal;
      letter-spacing: -0.6px;
      color: var(--text-inverse);
    }
    #alloy-kc-safestop .message__sub {
      width: 100%;
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--color-text-70);
    }

    /* patterns box (749:3722) */
    #alloy-kc-safestop .patterns {
      width: 100%;
      border: 1px solid var(--color-border-10);
      border-radius: var(--radius-sml);
      display: flex;
      flex-direction: column;
      gap: var(--space-4x-sml);
      align-items: flex-start;
      padding: var(--space-2x-sml);
    }
    #alloy-kc-safestop .patterns__heading {
      width: 690px;
      max-width: 100%;
      font-weight: 500;
      font-size: var(--size-3x-sml);
      line-height: 18px; /* frame height; trim approximated */
      letter-spacing: -0.32px;
      color: var(--color-text-70);
    }
    #alloy-kc-safestop .patterns__list {
      width: 100%;
      border: 1px solid var(--color-border-10);
      border-radius: var(--radius-sml);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    #alloy-kc-safestop .patterns__row {
      width: 100%;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: var(--space-4x-sml) var(--space-2x-sml);
    }
    #alloy-kc-safestop .patterns__row--divider { border-bottom: 1px solid var(--color-border-10); }
    #alloy-kc-safestop .patterns__row-inner {
      flex: 1 0 0;
      min-width: 0;
      display: flex;
      align-items: center;
    }
    #alloy-kc-safestop .patterns__row-inner p {
      flex: 1 0 0;
      min-width: 0;
      font-weight: 400;
      font-size: 14px;
      line-height: normal;
      color: var(--color-text-50);
    }

    /* standalone list boxes (Marcus) + inline link */
    #alloy-kc-safestop .list-box {
      width: 100%;
      border: 1px solid var(--color-border-10);
      border-radius: var(--radius-sml);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    #alloy-kc-safestop .list-row {
      width: 100%;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: var(--space-4x-sml) var(--space-2x-sml);
    }
    #alloy-kc-safestop .list-row--divider { border-bottom: 1px solid var(--color-border-10); }
    #alloy-kc-safestop .list-row--col {
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      overflow: visible;
    }
    #alloy-kc-safestop .list-row__inner {
      flex: 1 0 0;
      min-width: 0;
      width: 100%;
      display: flex;
      align-items: center;
    }
    #alloy-kc-safestop .list-row__inner p {
      flex: 1 0 0;
      min-width: 0;
      font-weight: 400;
      font-size: 14px;
      line-height: normal;
      color: var(--color-text-50);
    }
    #alloy-kc-safestop .recal-line {
      display: flex;
      gap: var(--space-5x-sml);
      align-items: center;
      flex-wrap: wrap;
    }
    #alloy-kc-safestop .recal-line p {
      font-weight: 400;
      font-size: 14px;
      line-height: normal;
      color: var(--color-text-50);
      white-space: nowrap;
    }
    #alloy-kc-safestop .inline-link {
      display: inline-flex;
      gap: var(--spacings-2x-sml);
      align-items: center;
    }
    #alloy-kc-safestop .inline-link__text {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--text-inverse);
      white-space: nowrap;
    }

    /* trailing paragraph (749:3734) */
    #alloy-kc-safestop .message__outro {
      width: 100%;
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--color-text-70);
    }

    /* PDF chip (749:3735) */
    #alloy-kc-safestop .pdf-chip {
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: var(--space-4x-sml) var(--space-2x-sml);
      border: 1px solid var(--color-border-20);
      border-radius: var(--radius-sml);
    }
    #alloy-kc-safestop .pdf-chip__inner {
      display: flex;
      gap: var(--spacings-2x-sml);
      align-items: center;
    }
    #alloy-kc-safestop .pdf-chip__name {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--text-inverse);
      white-space: nowrap;
    }

    /* feedback icon group (749:3744) */
    #alloy-kc-safestop .icon-group {
      display: flex;
      gap: var(--spacings-x-sml);
      align-items: center;
    }

    /* ---- Comment section (749:3748) ---- */
    #alloy-kc-safestop .comment-section {
      width: 100%;
      background: var(--color-chat-bg);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 0 var(--space-x-lrg) var(--space-x-lrg);
    }
    #alloy-kc-safestop .comment-field {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--spacings-x-sml);
      align-items: flex-start;
    }
    #alloy-kc-safestop .comment-wrapper {
      width: 100%;
      background: var(--color-input-bg);
      border: 1px solid var(--color-border-10);
      border-radius: var(--radius-sml);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      overflow: hidden;
    }
    #alloy-kc-safestop .comment-bottom {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
      padding: var(--spacings-x-sml) var(--spacings-sml);
      border-bottom-left-radius: var(--radius-med);
      border-bottom-right-radius: var(--radius-med);
    }
    #alloy-kc-safestop .comment-placeholder {
      flex: 1 0 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-weight: 400;
      font-size: var(--size-3x-sml);
      line-height: 1.4;
      color: var(--color-text-70);
    }
    #alloy-kc-safestop .comment-icons {
      display: flex;
      gap: var(--spacings-x-sml);
      align-items: center;
      flex-shrink: 0;
    }
    #alloy-kc-safestop .send-btn {
      width: 28px;
      height: 28px;
      flex-shrink: 0;
      background: var(--background-accent);
      border: none;
      appearance: none;
      -webkit-appearance: none;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 0;
      cursor: pointer;
    }
    /* Icon/LH (749:3758) rotated -90deg, glyph inset to match Figma */
    #alloy-kc-safestop .send-btn__rot {
      position: relative;
      width: 14px;
      height: 14px;
      transform: rotate(-90deg);
    }
    #alloy-kc-safestop .send-btn__vec {
      position: absolute;
      top: 12.49%;
      right: 8.33%;
      bottom: 12.49%;
      left: 12.49%;
    }
    #alloy-kc-safestop .send-btn__bleed {
      position: absolute;
      top: -4.76%;
      right: -4.51%;
      bottom: -4.76%;
      left: -4.51%;
    }
    #alloy-kc-safestop .send-btn__bleed svg { display: block; width: 100%; height: 100%; }

    /* ---- Animation layer (does not alter the static design) ---- */
    #alloy-kc-safestop .anim {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }
    #alloy-kc-safestop .anim.show { opacity: 1; transform: translateY(0); }
    #alloy-kc-safestop .gone { display: none !important; }

    /* typing into the message bar */
    #alloy-kc-safestop .comment-placeholder .typed-line { display: none; align-items: center; }
    #alloy-kc-safestop .comment-placeholder.typing .ph-text { display: none; }
    #alloy-kc-safestop .comment-placeholder.typing .typed-line { display: flex; }
    #alloy-kc-safestop .typed { color: var(--text-inverse); white-space: pre-wrap; }
    #alloy-kc-safestop .caret {
      display: inline-block;
      width: 1.5px;
      height: 17px;
      background: var(--text-inverse);
      margin-left: 1px;
      animation: caret-blink 1s step-end infinite;
    }
    @keyframes caret-blink { 50% { opacity: 0; } }

    /* streaming text cursor (mimics live token output) */
    #alloy-kc-safestop .streaming::after {
      content: '';
      display: inline-block;
      width: 6px;
      height: 1.05em;
      background: currentColor;
      margin-left: 2px;
      transform: translateY(2px);
      animation: caret-blink 1s step-end infinite;
    }

    /* Alloy thinking indicator */
    #alloy-kc-safestop .thinking {
      display: flex;
      align-items: center;
      gap: 6px;
      height: 21.941px;
      padding-left: 2px;
    }
    #alloy-kc-safestop .thinking .dot {
      width: 6px;
      height: 6px;
      border-radius: var(--radius-full);
      background: rgba(255, 255, 255, 0.5);
      animation: dot-pulse 1.2s infinite ease-in-out;
    }
    #alloy-kc-safestop .thinking .dot:nth-child(2) { animation-delay: 0.18s; }
    #alloy-kc-safestop .thinking .dot:nth-child(3) { animation-delay: 0.36s; }
    @keyframes dot-pulse {
      0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
      30% { transform: translateY(-4px); opacity: 1; }
    }

/* fleet: copied from the public Alloy homepage embed; remote font import removed. */
#alloy-kc-fleet {
      /* Colors */
      --color-chat-bg: #171717;            /* Chat + Comment section surface */
      --color-window-bg: #171717;          /* backing fill behind chat (kept dark so loop fade-out doesn't flash) */
      --color-border-window: #474747;      /* window left border */
      --color-user-bubble: rgba(255,255,255,0.2);
      --color-user-avatar-bg: #ffffff;
      --color-user-avatar-border: #025dfe;
      --text-inverse: #ffffff;
      --color-text-70: rgba(255,255,255,0.7);
      --color-text-50: rgba(255,255,255,0.5);
      --color-border-10: rgba(255,255,255,0.1);
      --color-border-20: rgba(255,255,255,0.2);
      --background-accent: #65ed74;
      --color-pill-border: rgba(101,237,116,0.5);
      --border-icon: #605f66;
      --color-input-bg: #2e2e2e;
      --text-highlight: #0013a4;           /* Alloy avatar stroke */
      --color-send-icon: #171717;

      /* Spacing */
      --space-6x-sml: 4px;
      --space-5x-sml: 6px;
      --space-4x-sml: 8px;
      --space-3x-sml: 10px;
      --space-2x-sml: 12px;
      --space-x-sml: 14px;
      --space-med: 20px;
      --space-x-lrg: 32px;
      --spacings-2x-sml: 4px;
      --spacings-x-sml: 8px;
      --spacings-sml: 12px;
      --spacings-med: 16px;
      --spacings-lrg: 24px;
      --spacings-4x-lrg: 64px;

      /* Radii */
      --radius-x-sml: 2px;
      --radius-sml: 4px;
      --radius-med: 8px;
      --radius-full: 999px;

      /* Sizes (font) */
      --size-4x-sml: 14px;
      --size-3x-sml: 16px;

      /* Type families */
      --family-primary: 'Geist', sans-serif;
      display: block;
      width: 100%;
      box-sizing: border-box;
      font-family: var(--family-primary);
      color: var(--text-inverse);
      -webkit-font-smoothing: antialiased;
      text-align: left;
      text-transform: none;
      font-style: normal;
      font-variant: normal;
      letter-spacing: normal;
      line-height: normal;
    }
    #alloy-kc-fleet *, #alloy-kc-fleet *::before, #alloy-kc-fleet *::after { box-sizing: border-box; }
    #alloy-kc-fleet * { margin: 0; padding: 0; }
    #alloy-kc-fleet .kc-sizer { position: relative; width: 100%; max-width: 796px; margin: 0 auto; overflow: hidden; }
    #alloy-kc-fleet .kc-stage { position: absolute; top: 0; left: 0; width: 796px; transform-origin: top left; will-change: transform; backface-visibility: hidden; }
    /* perf: isolate the animated subtree so reveals don't reflow/repaint the page */
    #alloy-kc-fleet .chat-window { contain: layout paint; }
    #alloy-kc-fleet .chat { contain: layout paint; }
    #alloy-kc-fleet .reveal { will-change: grid-template-rows; }
    #alloy-kc-fleet .reveal-inner { will-change: opacity, transform; }

    /* ---- Chat Window (749:3690) ---- */
    #alloy-kc-fleet .chat-window {
      width: 796px;
      height: 730px;
      background: var(--color-window-bg);
      border-top-right-radius: var(--radius-med);
      border-bottom-right-radius: var(--radius-med);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      overflow: hidden;
    }

    /* ---- Chat (749:3691) ---- */
    #alloy-kc-fleet .chat {
      flex: 1 0 0;
      min-height: 0;
      width: 100%;
      background: var(--color-chat-bg);
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: center;
      justify-content: flex-end;
      padding: var(--spacings-lrg) var(--space-x-lrg);
      overflow: hidden;
      transition: opacity 0.4s ease;
    }
    /* height-easing reveal wrapper: collapsed components reserve no space */
    #alloy-kc-fleet .reveal {
      display: grid;
      grid-template-rows: 0fr;
      width: 100%;
      transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }
    #alloy-kc-fleet .reveal.show { grid-template-rows: 1fr; }
    #alloy-kc-fleet .reveal > .reveal-inner {
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.55s ease 0.05s, transform 0.55s ease 0.05s;
    }
    #alloy-kc-fleet .reveal.show > .reveal-inner { opacity: 1; transform: translateY(0); }

    /* ---- User message (749:3692 / 3693 / 3694) ---- */
    #alloy-kc-fleet .chat-message {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      padding-left: var(--spacings-4x-lrg);
    }
    #alloy-kc-fleet .chat-message__inner {
      width: 567px;
      display: flex;
      flex-direction: column;
      gap: var(--space-6x-sml);
      align-items: flex-start;
      justify-content: flex-end;
    }
    #alloy-kc-fleet .bubble {
      width: 100%;
      background: var(--color-user-bubble);
      display: flex;
      flex-direction: column;
      gap: var(--space-4x-sml);
      align-items: flex-start;
      justify-content: center;
      padding: var(--spacings-x-sml) var(--spacings-sml);
      /* br corner left square (quirk preserved) */
      border-top-left-radius: var(--radius-med);
      border-top-right-radius: var(--radius-med);
      border-bottom-left-radius: var(--radius-med);
    }
    #alloy-kc-fleet .you {
      display: flex;
      gap: var(--space-6x-sml);
      align-items: center;
    }
    #alloy-kc-fleet .you__avatar {
      width: 24px;
      height: 24px;
      background: var(--color-user-avatar-bg);
      border: 0.879px solid var(--color-user-avatar-border);
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-5x-sml);
    }
    #alloy-kc-fleet .you__avatar p {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--color-user-avatar-border);
      text-align: center;
      white-space: nowrap;
    }
    #alloy-kc-fleet .you__name, #alloy-kc-fleet .you__time {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--text-inverse);
      white-space: nowrap;
    }
    #alloy-kc-fleet .bubble__text {
      width: 100%;
      font-weight: 400;
      font-size: var(--size-3x-sml);
      line-height: 1.4;
      color: var(--text-inverse);
    }

    /* ---- AI message (749:3705) ---- */
    #alloy-kc-fleet .ai-message {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: flex-start;
      padding-right: var(--spacings-lrg);
    }
    #alloy-kc-fleet .ai-message__top {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: flex-start;
    }

    /* Alloy identity row (749:3707) */
    #alloy-kc-fleet .alloy {
      display: flex;
      gap: var(--space-6x-sml);
      align-items: center;
    }
    #alloy-kc-fleet .alloy__avatar {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
    }
    #alloy-kc-fleet .alloy__avatar svg { display: block; width: 100%; height: 100%; }
    #alloy-kc-fleet .alloy__name, #alloy-kc-fleet .alloy__time {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--text-inverse);
      white-space: nowrap;
    }

    /* Status box (749:3712) */
    #alloy-kc-fleet .status-box {
      width: 100%;
      border: 1px solid var(--color-border-10);
      border-radius: var(--radius-sml);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: var(--space-2x-sml);
    }
    #alloy-kc-fleet .status-box__row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    #alloy-kc-fleet .status-pill {
      display: flex;
      gap: var(--space-6x-sml);
      align-items: center;
      overflow: hidden;
      padding: var(--space-6x-sml) var(--space-5x-sml);
      border: 1px solid var(--color-pill-border);
      border-radius: var(--radius-sml);
    }
    #alloy-kc-fleet .status-pill p {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--background-accent);
      white-space: nowrap;
    }
    #alloy-kc-fleet .icon-16 { width: 16px; height: 16px; flex-shrink: 0; overflow: hidden; }
    #alloy-kc-fleet .icon-16 svg { display: block; width: 100%; height: 100%; }
    #alloy-kc-fleet .icon-12 { width: 12px; height: 12px; flex-shrink: 0; overflow: hidden; }
    #alloy-kc-fleet .icon-12 svg { display: block; width: 100%; height: 100%; }
    #alloy-kc-fleet .chevron { opacity: 0.7; }

    /* message block (749:3718) */
    #alloy-kc-fleet .message {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: flex-start;
    }
    #alloy-kc-fleet .message__lede {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--space-6x-sml);
      align-items: flex-start;
    }
    #alloy-kc-fleet .message__heading {
      width: 100%;
      font-weight: 500;
      font-size: var(--space-med);
      line-height: normal;
      letter-spacing: -0.6px;
      color: var(--text-inverse);
    }
    #alloy-kc-fleet .message__sub {
      width: 100%;
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--color-text-70);
    }

    /* patterns box (749:3722) */
    #alloy-kc-fleet .patterns {
      width: 100%;
      border: 1px solid var(--color-border-10);
      border-radius: var(--radius-sml);
      display: flex;
      flex-direction: column;
      gap: var(--space-4x-sml);
      align-items: flex-start;
      padding: var(--space-2x-sml);
    }
    #alloy-kc-fleet .patterns__heading {
      width: 690px;
      max-width: 100%;
      font-weight: 500;
      font-size: var(--size-3x-sml);
      line-height: 18px; /* frame height; trim approximated */
      letter-spacing: -0.32px;
      color: var(--color-text-70);
    }
    #alloy-kc-fleet .patterns__list {
      width: 100%;
      border: 1px solid var(--color-border-10);
      border-radius: var(--radius-sml);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    #alloy-kc-fleet .patterns__row {
      width: 100%;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: var(--space-4x-sml) var(--space-2x-sml);
    }
    #alloy-kc-fleet .patterns__row--divider { border-bottom: 1px solid var(--color-border-10); }
    #alloy-kc-fleet .patterns__row-inner {
      flex: 1 0 0;
      min-width: 0;
      display: flex;
      align-items: center;
    }
    #alloy-kc-fleet .patterns__row-inner p {
      flex: 1 0 0;
      min-width: 0;
      font-weight: 400;
      font-size: 14px;
      line-height: normal;
      color: var(--color-text-50);
    }

    /* standalone list boxes (Marcus) + inline link */
    #alloy-kc-fleet .list-box {
      width: 100%;
      border: 1px solid var(--color-border-10);
      border-radius: var(--radius-sml);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    #alloy-kc-fleet .list-row {
      width: 100%;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: var(--space-4x-sml) var(--space-2x-sml);
    }
    #alloy-kc-fleet .list-row--divider { border-bottom: 1px solid var(--color-border-10); }
    #alloy-kc-fleet .list-row--col {
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      overflow: visible;
    }
    #alloy-kc-fleet .list-row__inner {
      flex: 1 0 0;
      min-width: 0;
      width: 100%;
      display: flex;
      align-items: center;
    }
    #alloy-kc-fleet .list-row__inner p {
      flex: 1 0 0;
      min-width: 0;
      font-weight: 400;
      font-size: 14px;
      line-height: normal;
      color: var(--color-text-50);
    }
    #alloy-kc-fleet .recal-line {
      display: flex;
      gap: var(--space-5x-sml);
      align-items: center;
      flex-wrap: wrap;
    }
    #alloy-kc-fleet .recal-line p {
      font-weight: 400;
      font-size: 14px;
      line-height: normal;
      color: var(--color-text-50);
      white-space: nowrap;
    }
    #alloy-kc-fleet .inline-link {
      display: inline-flex;
      gap: var(--spacings-2x-sml);
      align-items: center;
    }
    #alloy-kc-fleet .inline-link__text {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--text-inverse);
      white-space: nowrap;
    }
    #alloy-kc-fleet .box-text {
      width: 100%;
      font-weight: 400;
      font-size: 14px;
      line-height: normal;
      color: var(--color-text-50);
    }

    /* trailing paragraph (749:3734) */
    #alloy-kc-fleet .message__outro {
      width: 100%;
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--color-text-70);
    }

    /* PDF chip (749:3735) */
    #alloy-kc-fleet .pdf-chip {
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: var(--space-4x-sml) var(--space-2x-sml);
      border: 1px solid var(--color-border-20);
      border-radius: var(--radius-sml);
    }
    #alloy-kc-fleet .pdf-chip__inner {
      display: flex;
      gap: var(--spacings-2x-sml);
      align-items: center;
    }
    #alloy-kc-fleet .pdf-chip__name {
      font-weight: 400;
      font-size: var(--size-4x-sml);
      line-height: normal;
      color: var(--text-inverse);
      white-space: nowrap;
    }

    /* feedback icon group (749:3744) */
    #alloy-kc-fleet .icon-group {
      display: flex;
      gap: var(--spacings-x-sml);
      align-items: center;
    }

    /* ---- Comment section (749:3748) ---- */
    #alloy-kc-fleet .comment-section {
      width: 100%;
      background: var(--color-chat-bg);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 0 var(--space-x-lrg) var(--space-x-lrg);
    }
    #alloy-kc-fleet .comment-field {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--spacings-x-sml);
      align-items: flex-start;
    }
    #alloy-kc-fleet .comment-wrapper {
      width: 100%;
      background: var(--color-input-bg);
      border: 1px solid var(--color-border-10);
      border-radius: var(--radius-sml);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      overflow: hidden;
    }
    #alloy-kc-fleet .comment-bottom {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
      padding: var(--spacings-x-sml) var(--spacings-sml);
      border-bottom-left-radius: var(--radius-med);
      border-bottom-right-radius: var(--radius-med);
    }
    #alloy-kc-fleet .comment-placeholder {
      flex: 1 0 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-weight: 400;
      font-size: var(--size-3x-sml);
      line-height: 1.4;
      color: var(--color-text-70);
    }
    #alloy-kc-fleet .comment-icons {
      display: flex;
      gap: var(--spacings-x-sml);
      align-items: center;
      flex-shrink: 0;
    }
    #alloy-kc-fleet .send-btn {
      width: 28px;
      height: 28px;
      flex-shrink: 0;
      background: var(--background-accent);
      border: none;
      appearance: none;
      -webkit-appearance: none;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 0;
      cursor: pointer;
    }
    /* Icon/LH (749:3758) rotated -90deg, glyph inset to match Figma */
    #alloy-kc-fleet .send-btn__rot {
      position: relative;
      width: 14px;
      height: 14px;
      transform: rotate(-90deg);
    }
    #alloy-kc-fleet .send-btn__vec {
      position: absolute;
      top: 12.49%;
      right: 8.33%;
      bottom: 12.49%;
      left: 12.49%;
    }
    #alloy-kc-fleet .send-btn__bleed {
      position: absolute;
      top: -4.76%;
      right: -4.51%;
      bottom: -4.76%;
      left: -4.51%;
    }
    #alloy-kc-fleet .send-btn__bleed svg { display: block; width: 100%; height: 100%; }

    /* ---- Animation layer (does not alter the static design) ---- */
    #alloy-kc-fleet .anim {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }
    #alloy-kc-fleet .anim.show { opacity: 1; transform: translateY(0); }
    #alloy-kc-fleet .gone { display: none !important; }

    /* typing into the message bar */
    #alloy-kc-fleet .comment-placeholder .typed-line { display: none; align-items: center; }
    #alloy-kc-fleet .comment-placeholder.typing .ph-text { display: none; }
    #alloy-kc-fleet .comment-placeholder.typing .typed-line { display: flex; }
    #alloy-kc-fleet .typed { color: var(--text-inverse); white-space: pre-wrap; }
    #alloy-kc-fleet .caret {
      display: inline-block;
      width: 1.5px;
      height: 17px;
      background: var(--text-inverse);
      margin-left: 1px;
      animation: caret-blink 1s step-end infinite;
    }
    @keyframes caret-blink { 50% { opacity: 0; } }

    /* streaming text cursor (mimics live token output) */
    #alloy-kc-fleet .streaming::after {
      content: '';
      display: inline-block;
      width: 6px;
      height: 1.05em;
      background: currentColor;
      margin-left: 2px;
      transform: translateY(2px);
      animation: caret-blink 1s step-end infinite;
    }

    /* Alloy thinking indicator */
    #alloy-kc-fleet .thinking {
      display: flex;
      align-items: center;
      gap: 6px;
      height: 21.941px;
      padding-left: 2px;
    }
    #alloy-kc-fleet .thinking .dot {
      width: 6px;
      height: 6px;
      border-radius: var(--radius-full);
      background: rgba(255, 255, 255, 0.5);
      animation: dot-pulse 1.2s infinite ease-in-out;
    }
    #alloy-kc-fleet .thinking .dot:nth-child(2) { animation-delay: 0.18s; }
    #alloy-kc-fleet .thinking .dot:nth-child(3) { animation-delay: 0.36s; }
    @keyframes dot-pulse {
      0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
      30% { transform: translateY(-4px); opacity: 1; }
    }

.product-demo-host {
  width: 100%;
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .kc-chat-embed .reveal,
  .kc-chat-embed .reveal > .reveal-inner {
    transition: none !important;
  }

  .kc-chat-embed .caret,
  .kc-chat-embed .thinking .dot {
    animation: none !important;
  }
}