/*
 * KB AI Chatbot — shared design tokens + WordPress theme isolation.
 * Loaded before all plugin frontend styles. Scopes every plugin UI root.
 */
:root {
    --kb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --kb-radius-sm: 8px;
    --kb-radius-md: 12px;
    --kb-radius-lg: 16px;
    --kb-radius-xl: 20px;
    --kb-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
    --kb-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12);
    --kb-shadow-lg: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    --kb-transition: 0.2s ease;
}

/* All plugin UI roots — isolate from theme cascade */
#kb-chatbot-wrap,
#kb-chatbot-float-wrap,
#kb-voice-assistant-wrap,
#kb-voice-realtime-wrap,
.kb-ai-rs-wrap,
.kb-ai-rs-detail-wrap,
.kb-ai-re-wrap,
.kb-ai-re-detail-wrap {
    font-family: var(--kb-font) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    isolation: isolate;
    color: inherit;
}

#kb-chatbot-wrap *,
#kb-chatbot-wrap *::before,
#kb-chatbot-wrap *::after,
#kb-chatbot-float-wrap *,
#kb-chatbot-float-wrap *::before,
#kb-chatbot-float-wrap *::after,
#kb-voice-assistant-wrap *,
#kb-voice-assistant-wrap *::before,
#kb-voice-assistant-wrap *::after,
#kb-voice-realtime-wrap *,
#kb-voice-realtime-wrap *::before,
#kb-voice-realtime-wrap *::after,
.kb-ai-rs-wrap *,
.kb-ai-rs-wrap *::before,
.kb-ai-rs-wrap *::after,
.kb-ai-rs-detail-wrap *,
.kb-ai-rs-detail-wrap *::before,
.kb-ai-rs-detail-wrap *::after,
.kb-ai-re-wrap *,
.kb-ai-re-wrap *::before,
.kb-ai-re-wrap *::after,
.kb-ai-re-detail-wrap *,
.kb-ai-re-detail-wrap *::before,
.kb-ai-re-detail-wrap *::after {
    box-sizing: border-box !important;
}

/* Neutralize theme typography on native elements */
#kb-voice-assistant-wrap h1,
#kb-voice-assistant-wrap h2,
#kb-voice-assistant-wrap h3,
#kb-voice-assistant-wrap h4,
#kb-voice-assistant-wrap p,
#kb-voice-assistant-wrap label,
#kb-voice-assistant-wrap button,
#kb-voice-assistant-wrap input,
#kb-voice-assistant-wrap textarea,
#kb-voice-assistant-wrap a,
#kb-voice-realtime-wrap h1,
#kb-voice-realtime-wrap h2,
#kb-voice-realtime-wrap h3,
#kb-voice-realtime-wrap h4,
#kb-voice-realtime-wrap p,
#kb-voice-realtime-wrap label,
#kb-voice-realtime-wrap button,
#kb-voice-realtime-wrap input,
#kb-voice-realtime-wrap textarea,
#kb-voice-realtime-wrap a,
.kb-ai-rs-wrap h1,
.kb-ai-rs-wrap h2,
.kb-ai-rs-wrap h3,
.kb-ai-rs-wrap h4,
.kb-ai-rs-wrap p,
.kb-ai-rs-wrap label,
.kb-ai-rs-wrap button,
.kb-ai-rs-wrap input,
.kb-ai-rs-wrap textarea,
.kb-ai-rs-wrap select,
.kb-ai-rs-wrap a,
.kb-ai-rs-detail-wrap h1,
.kb-ai-rs-detail-wrap h2,
.kb-ai-rs-detail-wrap h3,
.kb-ai-rs-detail-wrap h4,
.kb-ai-rs-detail-wrap p,
.kb-ai-rs-detail-wrap label,
.kb-ai-rs-detail-wrap button,
.kb-ai-rs-detail-wrap input,
.kb-ai-rs-detail-wrap textarea,
.kb-ai-rs-detail-wrap select,
.kb-ai-rs-detail-wrap a,
.kb-ai-re-wrap h1,
.kb-ai-re-wrap h2,
.kb-ai-re-wrap h3,
.kb-ai-re-wrap h4,
.kb-ai-re-wrap p,
.kb-ai-re-wrap label,
.kb-ai-re-wrap button,
.kb-ai-re-wrap input,
.kb-ai-re-wrap textarea,
.kb-ai-re-wrap select,
.kb-ai-re-wrap a,
.kb-ai-re-detail-wrap h1,
.kb-ai-re-detail-wrap h2,
.kb-ai-re-detail-wrap h3,
.kb-ai-re-detail-wrap h4,
.kb-ai-re-detail-wrap p,
.kb-ai-re-detail-wrap label,
.kb-ai-re-detail-wrap button,
.kb-ai-re-detail-wrap input,
.kb-ai-re-detail-wrap textarea,
.kb-ai-re-detail-wrap select,
.kb-ai-re-detail-wrap a {
    font-family: inherit !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

#kb-voice-assistant-wrap button,
#kb-voice-assistant-wrap input,
#kb-voice-assistant-wrap textarea,
#kb-voice-assistant-wrap select,
#kb-voice-realtime-wrap button,
#kb-voice-realtime-wrap input,
#kb-voice-realtime-wrap textarea,
#kb-voice-realtime-wrap select,
.kb-ai-rs-wrap button,
.kb-ai-rs-wrap input,
.kb-ai-rs-wrap textarea,
.kb-ai-rs-wrap select,
.kb-ai-rs-detail-wrap button,
.kb-ai-rs-detail-wrap input,
.kb-ai-rs-detail-wrap textarea,
.kb-ai-rs-detail-wrap select,
.kb-ai-re-wrap button,
.kb-ai-re-wrap input,
.kb-ai-re-wrap textarea,
.kb-ai-re-wrap select,
.kb-ai-re-detail-wrap button,
.kb-ai-re-detail-wrap input,
.kb-ai-re-detail-wrap textarea,
.kb-ai-re-detail-wrap select {
    margin: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: none !important;
    text-shadow: none !important;
    float: none !important;
    vertical-align: baseline !important;
    line-height: normal !important;
}

#kb-voice-assistant-wrap p,
#kb-voice-realtime-wrap p,
.kb-ai-rs-wrap p,
.kb-ai-rs-detail-wrap p,
.kb-ai-re-wrap p,
.kb-ai-re-detail-wrap p {
    margin: 0 !important;
    padding: 0 !important;
}

#kb-voice-assistant-wrap h1,
#kb-voice-assistant-wrap h2,
#kb-voice-assistant-wrap h3,
#kb-voice-assistant-wrap h4,
#kb-voice-realtime-wrap h1,
#kb-voice-realtime-wrap h2,
#kb-voice-realtime-wrap h3,
#kb-voice-realtime-wrap h4,
.kb-ai-rs-wrap h1,
.kb-ai-rs-wrap h2,
.kb-ai-rs-wrap h3,
.kb-ai-rs-wrap h4,
.kb-ai-rs-detail-wrap h1,
.kb-ai-rs-detail-wrap h2,
.kb-ai-rs-detail-wrap h3,
.kb-ai-rs-detail-wrap h4,
.kb-ai-re-wrap h1,
.kb-ai-re-wrap h2,
.kb-ai-re-wrap h3,
.kb-ai-re-wrap h4,
.kb-ai-re-detail-wrap h1,
.kb-ai-re-detail-wrap h2,
.kb-ai-re-detail-wrap h3,
.kb-ai-re-detail-wrap h4 {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

#kb-voice-assistant-wrap a,
#kb-voice-realtime-wrap a,
.kb-ai-rs-wrap a,
.kb-ai-rs-detail-wrap a,
.kb-ai-re-wrap a,
.kb-ai-re-detail-wrap a {
    text-decoration: none !important;
}

#kb-voice-assistant-wrap img,
#kb-voice-assistant-wrap svg,
#kb-voice-realtime-wrap img,
#kb-voice-realtime-wrap svg,
.kb-ai-rs-wrap img,
.kb-ai-rs-wrap svg,
.kb-ai-rs-detail-wrap img,
.kb-ai-rs-detail-wrap svg,
.kb-ai-re-wrap img,
.kb-ai-re-wrap svg,
.kb-ai-re-detail-wrap img,
.kb-ai-re-detail-wrap svg {
    max-width: 100% !important;
    height: auto !important;
    vertical-align: middle !important;
}

/* Embedded chatbot in mode sidebars — responsive, not theme-width */
.kb-ai-rs-chatbot-box #kb-chatbot-wrap,
.kb-ai-re-chatbot-embed #kb-chatbot-wrap {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
}