/* Koard brand + interaction polish for the docs-chat widget. Kept separate from docs-chat-widget.css (a vendored bundle) so a widget refresh doesn't silently drop these overrides. Targets the .kdc-* "messenger" variant, which is the only one actually mounted by docs-chat-widget.js. Every selector is scoped under #koard-docs-chat-root (the widget's real mount point, per docs-chat-widget.js: r.id = "koard-docs-chat-root") so these rules out-specificity the vendored bundle's bare .kdc-* selectors regardless of which tag ends up earlier in . */ #koard-docs-chat-root { /* Declared on the true mount root, not .kdc-root: .kdc-launcher/.kdc-dock are siblings of .kdc-root (see docs-chat-widget.js), so a custom property scoped to .kdc-root never reaches them — that was the bug behind the launcher rendering with no fill. */ /* Sampled from koard-favicon.png so the widget accent matches the actual mark. */ --kdc-brand: #146301; --kdc-brand-hover: color-mix(in oklab, var(--kdc-brand) 85%, black); --kdc-brand-active: color-mix(in oklab, var(--kdc-brand) 70%, black); --kdc-brand-soft: color-mix(in oklab, var(--kdc-brand) 14%, white); } #koard-docs-chat-root .kdc-root { /* Redeclared here too: the vendored bundle sets --kdc-brand again directly on .kdc-root itself, which otherwise wins over the ancestor declaration above for everything inside the panel (header, avatar, message bubbles, submit button). */ --kdc-brand: #146301; --kdc-brand-hover: color-mix(in oklab, var(--kdc-brand) 85%, black); --kdc-brand-active: color-mix(in oklab, var(--kdc-brand) 70%, black); --kdc-brand-soft: color-mix(in oklab, var(--kdc-brand) 14%, white); width: 400px; height: 600px; max-width: calc(100vw - 32px); max-height: min(680px, 100vh - 112px); border-radius: 20px; box-shadow: 0 20px 48px -12px color-mix(in oklab, var(--kdc-brand) 35%, black); } #koard-docs-chat-root .kdc-header { background: var(--kdc-brand); } #koard-docs-chat-root .kdc-avatar { background-color: var(--kdc-brand); background-image: url("/koard-favicon.png"); background-size: cover; background-position: center; color: transparent; } #koard-docs-chat-root .kdc-message-user .kdc-message-content { border-radius: 16px 16px 4px; } #koard-docs-chat-root .kdc-message-assistant .kdc-message-content { border-radius: 16px 16px 16px 4px; } #koard-docs-chat-root .kdc-icon-button { transition: background-color 0.15s ease; } #koard-docs-chat-root .kdc-icon-button:hover { background: rgba(255, 255, 255, 0.14); } #koard-docs-chat-root .kdc-icon-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } #koard-docs-chat-root .kdc-conversation-scroll { transition: transform 0.15s ease, box-shadow 0.15s ease; } #koard-docs-chat-root .kdc-conversation-scroll:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18); } #koard-docs-chat-root .kdc-prompt-body { transition: border-color 0.15s ease, box-shadow 0.15s ease; } #koard-docs-chat-root .kdc-prompt-body:focus-within { border-color: var(--kdc-brand); box-shadow: 0 0 0 3px var(--kdc-brand-soft); } #koard-docs-chat-root .kdc-prompt-submit { transition: background-color 0.15s ease, transform 0.1s ease; } #koard-docs-chat-root .kdc-prompt-submit:not(:disabled):hover { background: var(--kdc-brand-hover); } #koard-docs-chat-root .kdc-prompt-submit:not(:disabled):active { background: var(--kdc-brand-active); transform: scale(0.96); } #koard-docs-chat-root .kdc-prompt-submit:focus-visible { outline: 2px solid var(--kdc-brand); outline-offset: 2px; } #koard-docs-chat-root .kdc-launcher { background: var(--kdc-brand); box-shadow: 0 10px 24px -4px color-mix(in oklab, var(--kdc-brand) 60%, transparent); transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } #koard-docs-chat-root .kdc-launcher:hover { background: var(--kdc-brand-hover); transform: translateY(-2px); box-shadow: 0 14px 30px -4px color-mix(in oklab, var(--kdc-brand) 65%, transparent); } #koard-docs-chat-root .kdc-launcher:active { transform: translateY(0) scale(0.95); } #koard-docs-chat-root .kdc-launcher:focus-visible { outline: 2px solid var(--kdc-brand); outline-offset: 3px; } @media (max-width: 480px) { #koard-docs-chat-root .kdc-root { width: calc(100vw - 24px); height: calc(100dvh - 96px); max-height: none; border-radius: 16px; } #koard-docs-chat-root .kdc-dock { bottom: 16px; right: 16px; } } body.dark-mode #koard-docs-chat-root .kdc-root { --kdc-ink: #e6e8ee; background: #16181f; border-color: #2a2d38; box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.55); } body.dark-mode #koard-docs-chat-root .kdc-conversation { background: #101218; } body.dark-mode #koard-docs-chat-root .kdc-message-assistant .kdc-message-content { background: #1c1f28; border-color: #2a2d38; } body.dark-mode #koard-docs-chat-root .kdc-prompt { background: #16181f; border-top-color: #2a2d38; } body.dark-mode #koard-docs-chat-root .kdc-prompt-body { background: #1c1f28; border-color: #2a2d38; } body.dark-mode #koard-docs-chat-root .kdc-conversation-scroll { background: #1c1f28; border-color: #2a2d38; color: #e6e8ee; }