/*
    Chat bubble styling -- the appearance of a transcript, independent of the page around it.

    Extracted from the inline <style> in Views/Shared/Chat.cshtml so the live chat and the
    manual's dialog-only view (Views/Screenshots/Dialog.cshtml) share one definition rather
    than drifting apart. Page chrome (input box, buttons, modals, recorder, viewer) stays
    inline in Chat.cshtml; only what renders a message lives here.

    Rules started byte-for-byte as they were inline; the panel/bubble geometry has since been
    tuned here. Do not restyle without checking the live chat page AND the screenshot views.
*/

p {
    white-space: pre-line;
}

br {
    content: "\A";
    white-space: pre;
}

/* Side gutter matches the 10px top margin, so the beige page shows an even
   frame around the panel instead of the old 2.5%-per-side inset. */
.container {
    border: 1px solid rgb(27,57,90);
    background-color: rgb(241, 241, 255);
    border-radius: 20px;
    padding: 10px;
    margin: 10px auto;
    max-width: calc(100% - 20px);
    width: 100%;
    box-sizing: border-box;
}

/* Bubbles are .container too, so they must opt out of the gutter above and
   run the full width of the panel's content box -- flush with the avatar art. */
.bot,
.user {
    margin: 10px 0;
    max-width: 100%;
    width: 100%;
    border-radius: 14px;
}

.bot {
    border-color: rgba(27, 57, 90, 0.45);
    text-align: left;
    background-color: rgb(241, 241, 241);
}

.user {
    border-color: rgba(27, 57, 90, 0.45);
    background-color: rgb(221, 221, 221);
    text-align: right;
}

.container::after {
    content: "";
    clear: both;
    display: table;
}

/* A bubble now shows a link's full address rather than the words "this link",
   and an unbroken URL is one long word: without this it runs off the bubble
   and takes the panel's horizontal scrollbar with it. */
.container p a {
    overflow-wrap: anywhere;
}

.container img {
    float: left;
    max-width: 64px;
    width: 100%;
    margin-right: 20px;
    border-radius: 6px;
    border: 1px solid rgb(27,57,90);
}

    .container img.right {
        float: right;
        margin-left: 20px;
        margin-right: 0;
    }

.time-right {
    float: right;
    color: rgb(170, 170, 170);
    font-size: 10px;
}

.time-left {
    float: left;
    color: rgb(153, 153, 153);
    font-size: 10px;
}

/* Blockquotes. Browser default is a bare 40px indent, which inside a bubble is
   indistinguishable from a list, so the quote gets a rule down its left edge.
   Nested quotes inherit it and step further in. */
blockquote {
    margin: 12px 0;
    padding: 2px 0 2px 12px;
    border-left: 3px solid rgba(27, 57, 90, 0.35);
    color: rgba(27, 57, 90, 0.85);
    font-style: italic;
}

blockquote p {
    margin: 6px 0;
}

/* Markdown table styling -- emitted by MarkdownConverter.ProcessTables as
   <table class="md-table">. Wide tables (sales reports run 8+ columns) scroll
   horizontally inside the bubble rather than forcing the panel wider, which is
   why the table is display:block. */
.md-table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    margin: 14px 0;
    border-collapse: collapse;
    font-size: 0.9em;
    white-space: nowrap;
}

.md-table th,
.md-table td {
    padding: 6px 12px;
    border: 1px solid rgba(27, 57, 90, 0.25);
    text-align: left;
}

.md-table th {
    background-color: rgba(27, 57, 90, 0.1);
    color: rgb(27, 57, 90);
    font-weight: bold;
    white-space: nowrap;
}

.md-table tbody tr:nth-child(even) {
    background-color: rgba(27, 57, 90, 0.035);
}

/* Code Block Styling */
.code-container {
    background-color: rgb(27, 57, 90);
    border-radius: 8px;
    margin: 16px 0;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(27, 57, 90, 0.3);
}

.code-header {
    background-color: rgba(0, 0, 0, 0.2);
    /* Horizontal padding tracks .code-block so the language label stays flush with
       the left edge of the code. */
    padding: 8px 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #DDD9CD;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.code-language {
    color: #DDD9CD;
    opacity: 0.8;
}

.code-block {
    background-color: rgb(27, 57, 90);
    color: #DDD9CD;
    font-family: 'Consolas', 'Monaco', 'Courier New', 'SF Mono', monospace;
    font-size: 14px;
    line-height: 1.5;
    padding: 11px;
    margin: 0;
    overflow-x: auto;
    white-space: pre;
    border: none;
    tab-size: 4;
}

/* Syntax highlighting colors */
.code-block .keyword {
    color: #7EC8E3; /* Light blue for keywords */
    font-weight: bold;
}

.code-block .string {
    color: #A8D08D; /* Light green for strings */
}

.code-block .comment {
    color: #9B9B9B; /* Gray for comments */
    font-style: italic;
}

.code-block .number {
    color: #FFCC66; /* Light yellow for numbers */
}

.code-block .attribute {
    color: #E6B3FF; /* Light purple for attributes */
}

/* Scrollbar styling for code blocks */
.code-block::-webkit-scrollbar {
    height: 8px;
}

.code-block::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.code-block::-webkit-scrollbar-thumb {
    background: rgba(221, 217, 205, 0.3);
    border-radius: 4px;
}

.code-block::-webkit-scrollbar-thumb:hover {
    background: rgba(221, 217, 205, 0.5);
}

/* Language-specific adjustments */
.code-block.language-json .string {
    color: #A8D08D;
}

.code-block.language-xml .keyword,
.code-block.language-html .keyword {
    color: #FF9999; /* Light red for XML/HTML tags */
}

.code-block.language-css .attribute {
    color: #FFB366; /* Light orange for CSS properties */
}

/* Inline code styling (for single backticks) */
code {
    background-color: rgba(27, 57, 90, 0.1);
    color: rgb(27, 57, 90);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', 'Courier New', 'SF Mono', monospace;
    font-size: 0.9em;
    border: 1px solid rgba(27, 57, 90, 0.2);
}

/* Audio Replay Icon Styling */
.audio-replay-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5,3 19,12 5,21 5,3"></polygon></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    margin-right: 8px;
    vertical-align: middle;
}

.audio-replay-icon[data-audio-url=""], .audio-replay-icon:not([data-audio-url]) {
    display: none !important;
}

.audio-replay-icon:hover {
    opacity: 1;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%234169E1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5,3 19,12 5,21 5,3"></polygon></svg>');
}

/* The .playing animation depends on @keyframes pulse, which Chat.cshtml defines inline.
   Static pages that only render a transcript never enter the playing state. */
.audio-replay-icon.playing {
    opacity: 1;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2300AA00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5,3 19,12 5,21 5,3"></polygon></svg>');
    animation: pulse 1s infinite;
}

/* Bot container positioning for replay icon */
.container.bot {
    position: relative;
}