botbook/src/custom.css

/* Custom CSS for General Bots Documentation */

/* ============================================
   BASIC Syntax Highlighting
   ============================================ */

/* BASIC code blocks - use ```basic or ```bas */
pre code.language-basic,
pre code.language-bas,
pre code.hljs.language-basic,
pre code.hljs.language-bas {
    color: #333;
}

/* Dark theme BASIC */
.ayu pre code.language-basic,
.ayu pre code.language-bas,
.coal pre code.language-basic,
.coal pre code.language-bas,
.navy pre code.language-basic,
.navy pre code.language-bas {
    color: #e6e6e6;
}

/* BASIC Keywords - TALK, HEAR, SET, GET, USE, etc. */
pre code.language-basic .hljs-keyword,
pre code.language-bas .hljs-keyword {
    color: #0033b3;
    font-weight: bold;
}

.ayu pre code.language-basic .hljs-keyword,
.coal pre code.language-basic .hljs-keyword,
.navy pre code.language-basic .hljs-keyword {
    color: #ff7b72;
    font-weight: bold;
}

/* BASIC Strings */
pre code.language-basic .hljs-string,
pre code.language-bas .hljs-string {
    color: #067d17;
}

.ayu pre code.language-basic .hljs-string,
.coal pre code.language-basic .hljs-string,
.navy pre code.language-basic .hljs-string {
    color: #a5d6ff;
}

/* BASIC Comments (REM or ') */
pre code.language-basic .hljs-comment,
pre code.language-bas .hljs-comment {
    color: #8c8c8c;
    font-style: italic;
}

/* BASIC Numbers */
pre code.language-basic .hljs-number,
pre code.language-bas .hljs-number {
    color: #1750eb;
}

.ayu pre code.language-basic .hljs-number,
.coal pre code.language-basic .hljs-number,
.navy pre code.language-basic .hljs-number {
    color: #79c0ff;
}

/* BASIC Built-in functions */
pre code.language-basic .hljs-built_in,
pre code.language-bas .hljs-built_in {
    color: #8250df;
}

/* BASIC Variables */
pre code.language-basic .hljs-variable,
pre code.language-bas .hljs-variable {
    color: #953800;
}

/* Custom BASIC keyword highlighting via regex patterns */
/* Primary keywords: TALK, HEAR, SET, GET */
pre code.language-basic,
pre code.language-bas {
    /* Highlight BASIC keywords that may not be recognized */
}

/* Standardized code block styling */
pre code {
    font-family: "JetBrains Mono", "Fira Code", "Source Code Pro", monospace;
    font-size: 0.9em;
    line-height: 1.5;
}

/* Code block container */
pre {
    border-radius: 6px;
    padding: 1em;
    overflow-x: auto;
}

/* Light theme code blocks */
.light pre,
.rust pre {
    background-color: #f6f8fa;
    border: 1px solid #d0d7de;
}

/* Dark theme code blocks */
.ayu pre,
.coal pre,
.navy pre {
    background-color: #161b22;
    border: 1px solid #30363d;
}

/* ============================================
   WhatsApp-style Chat CSS for Conversation Examples
   ============================================ */

/* Chat Container */
.wa-chat {
    background-color: #e5ddd5;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zM22.343 0L13.857 8.485 15.272 9.9l9.9-9.9h-2.83zM32 0l-3.486 3.485-1.414-1.414L30.172 0H32zM0 5.373l.828-.83 1.415 1.415L0 8.2V5.374zm0 5.656l.828-.829 5.657 5.657-1.414 1.414L0 11.03v2.828zm0 5.656l.828-.828 8.485 8.485-1.414 1.414L0 16.686v2.83zm0 5.657l.828-.828 11.314 11.314-1.414 1.414L0 22.343v2.83zM0 32l.828-.828 14.142 14.142-1.414 1.414L0 32.172V32z' fill='%23c5c5c5' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
    border-radius: 8px;
    padding: 20px 15px;
    margin: 20px 0;
    max-width: 600px;
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif;
    font-size: 14px;
}

/* Dark theme chat container */
.coal .wa-chat,
.navy .wa-chat,
.ayu .wa-chat {
    background-color: #0b141a;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zM22.343 0L13.857 8.485 15.272 9.9l9.9-9.9h-2.83zM32 0l-3.486 3.485-1.414-1.414L30.172 0H32zM0 5.373l.828-.83 1.415 1.415L0 8.2V5.374zm0 5.656l.828-.829 5.657 5.657-1.414 1.414L0 11.03v2.828zm0 5.656l.828-.828 8.485 8.485-1.414 1.414L0 16.686v2.83zm0 5.657l.828-.828 11.314 11.314-1.414 1.414L0 22.343v2.83zM0 32l.828-.828 14.142 14.142-1.414 1.414L0 32.172V32z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* Message Bubbles */
.wa-message {
    clear: both;
    margin-bottom: 10px;
    max-width: 85%;
}

.wa-message.user {
    float: right;
}

.wa-message.bot {
    float: left;
}

/* User Bubbles */
.wa-message.user .wa-bubble {
    background-color: #dcf8c6;
    border-radius: 8px 0 8px 8px;
    margin-left: 40px;
}

.coal .wa-message.user .wa-bubble,
.navy .wa-message.user .wa-bubble,
.ayu .wa-message.user .wa-bubble {
    background-color: #005c4b;
}

/* Bot Bubbles */
.wa-message.bot .wa-bubble {
    background-color: #ffffff;
    border-radius: 0 8px 8px 8px;
    margin-right: 40px;
}

.coal .wa-message.bot .wa-bubble,
.navy .wa-message.bot .wa-bubble,
.ayu .wa-message.bot .wa-bubble {
    background-color: #202c33;
}

/* Bubble Content */
.wa-bubble {
    padding: 8px 12px;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
}

.wa-bubble p {
    margin: 0 0 4px 0;
    line-height: 1.4;
    color: #303030;
}

.wa-bubble p:last-child {
    margin-bottom: 0;
}

.coal .wa-bubble p,
.navy .wa-bubble p,
.ayu .wa-bubble p {
    color: #e9edef;
}

/* Timestamp */
.wa-time {
    font-size: 11px;
    color: #8696a0;
    text-align: right;
    margin-top: 4px;
}

/* Clear float */
.wa-chat::after {
    content: "";
    display: table;
    clear: both;
}

/* ============================================
   SVG Text Rendering Fixes
   ============================================ */

/* CSS Custom Properties that can be injected into SVG documents */
:root {
    --svg-main-text-color: #1a1a1a;
    --svg-secondary-text-color: #666;
    --svg-arrow-color: #666;
}

/* Force black text in light/rust themes */
.light,
.rust {
    --svg-main-text-color: #1a1a1a !important;
    --svg-secondary-text-color: #666 !important;
    --svg-arrow-color: #666 !important;
}

/* Dark theme overrides */
.ayu,
.coal,
.navy,
.dark,
.theme--dark {
    --svg-main-text-color: #ffffff !important;
    --svg-secondary-text-color: #b0b0b0 !important;
    --svg-arrow-color: #b0b0b0 !important;
}

/* For inline SVGs - direct styling */
.light svg .main-text,
.rust svg .main-text {
    fill: #1a1a1a !important;
}

.light svg .secondary-text,
.rust svg .secondary-text {
    fill: #666 !important;
}

.light svg .arrow-head,
.rust svg .arrow-head {
    fill: #666 !important;
}

.light svg .arrow-line,
.rust svg .arrow-line {
    stroke: #666 !important;
}

/* Dark theme inline SVG overrides */
.ayu svg .main-text,
.coal svg .main-text,
.navy svg .main-text,
.dark svg .main-text,
.theme--dark svg .main-text {
    fill: #ffffff !important;
}

.ayu svg .secondary-text,
.coal svg .secondary-text,
.navy svg .secondary-text,
.dark svg .secondary-text,
.theme--dark svg .secondary-text {
    fill: #b0b0b0 !important;
}

.ayu svg .arrow-head,
.coal svg .arrow-head,
.navy svg .arrow-head,
.dark svg .arrow-head,
.theme--dark svg .arrow-head {
    fill: #b0b0b0 !important;
}

.ayu svg .arrow-line,
.coal svg .arrow-line,
.navy svg .arrow-line,
.dark svg .arrow-line,
.theme--dark svg .arrow-line {
    stroke: #b0b0b0 !important;
}

/* Object element styling for better SVG integration */
object[type="image/svg+xml"] {
    display: block;
    max-width: 100%;
    height: auto;
    pointer-events: none; /* Prevent interaction issues */
    background: transparent !important;
}

/* Ensure object fallback images are hidden when object loads */
object[type="image/svg+xml"] img {
    display: none;
}

/* Ensure SVG containers have transparent background */
.content object,
.content img[src$=".svg"] {
    background: transparent !important;
}

/* Remove any background from SVG wrappers */
.content > div:has(object[type="image/svg+xml"]) {
    background: transparent !important;
}

/* Fix for mdBook's content area */
.content object[type="image/svg+xml"] {
    margin: 1em 0;
    background-color: transparent !important;
}

/* Override any mdBook theme backgrounds for SVG areas */
.rust .content object[type="image/svg+xml"],
.light .content object[type="image/svg+xml"],
.coal .content object[type="image/svg+xml"],
.navy .content object[type="image/svg+xml"],
.ayu .content object[type="image/svg+xml"] {
    background-color: transparent !important;
}

/* Inject CSS variables into object document via JavaScript */
.light object[type="image/svg+xml"],
.rust object[type="image/svg+xml"] {
    color-scheme: light;
}

.ayu object[type="image/svg+xml"],
.coal object[type="image/svg+xml"],
.navy object[type="image/svg+xml"],
.dark object[type="image/svg+xml"] {
    color-scheme: dark;
}

/* Additional mdBook theme detection */
body:not([class*="theme"]) svg .main-text,
body:not([class*="ayu"]):not([class*="coal"]):not([class*="navy"])
    svg
    .main-text {
    fill: var(--svg-main-text-color, #1a1a1a) !important;
}

body:not([class*="theme"]) svg .secondary-text,
body:not([class*="ayu"]):not([class*="coal"]):not([class*="navy"])
    svg
    .secondary-text {
    fill: var(--svg-secondary-text-color, #666) !important;
}

body:not([class*="theme"]) svg .arrow-head,
body:not([class*="ayu"]):not([class*="coal"]):not([class*="navy"])
    svg
    .arrow-head {
    fill: var(--svg-arrow-color, #666) !important;
}

body:not([class*="theme"]) svg .arrow-line,
body:not([class*="ayu"]):not([class*="coal"]):not([class*="navy"])
    svg
    .arrow-line {
    stroke: var(--svg-arrow-color, #666) !important;
}

/* Print styles */
@media print {
    svg .main-text {
        fill: #1a1a1a !important;
    }

    svg .secondary-text {
        fill: #666 !important;
    }

    svg .arrow-head {
        fill: #666 !important;
    }

    svg .arrow-line {
        stroke: #666 !important;
    }
}

/* Accessibility improvements */
@media (prefers-contrast: high) {
    svg .main-text {
        fill: #000000 !important;
    }

    .dark svg .main-text,
    .ayu svg .main-text,
    .coal svg .main-text,
    .navy svg .main-text {
        fill: #ffffff !important;
    }
}

/* Custom scrollbar for SVG containers if needed */
object[type="image/svg+xml"]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

object[type="image/svg+xml"]::-webkit-scrollbar-track {
    background: transparent;
}

object[type="image/svg+xml"]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.dark object[type="image/svg+xml"]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}