/* Base bubble (optional shared styles) */
.chat-bubble {
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);
}

/* AI bubble container */
.chat-bubble--ai {
    text-align: left;
    background: var(--background); /* #e6f7f5;*/          /* light teal */
    color: #222222;
    padding: 10px 16px;
    border-radius: 15px;
    margin: 6px auto 6px 0;       /* left-aligned */
    max-width: min(78%, 900px);
    border-bottom-left-radius: 4px;
    line-height: 1.55;
    font-size: var(--chat-bubble-font-size, 13px);
}

/* Code block inside AI message */
.chat-code-block {
    text-align: left;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);
}

/* AI-specific code block look */
.chat-code-block--ai {
    background: var(--testit-gray); /*#e6f7f5*/
    font-family: 'Courier New', Courier, monospace;
    color: #222222;
    padding: 10px 14px;
    border-radius: 15px;
    margin: 6px auto 6px 0;       /* left-aligned */
    max-width: min(78%, 900px);
    border-bottom-left-radius: 4px;
    overflow-x: auto;
    font-size: var(--chat-code-font-size, 12px);
    line-height: 1.5;
}

/* Markdown text inside AI bubble */
.chat-markdown--ai {
    margin-bottom: 8px;
    font-size: var(--chat-bubble-font-size, 13px);
    line-height: 1.55;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Copy button */
.chat-bubble--has-copy {
    position: relative;
}

.chat-copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: transparent;
    border: none;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    line-height: 0;
}

.chat-copy-btn svg,
.chat-copy-btn path {
    fill: #b0bec5;
    transition: fill 0.15s;
}

.chat-bubble--has-copy:hover .chat-copy-btn {
    opacity: 1;
}

.chat-copy-btn:hover {
    background: var(--light-testit-blue, #e8edef);
}

.chat-copy-btn:hover svg,
.chat-copy-btn:hover path {
    fill: var(--testit-blue, #1A4C5C);
}

/* Override Bootstrap's pink code color */
.chat-bubble--ai code,
.chat-markdown--ai code {
    color: #1a3040;
    background: var(--light-testit-blue, #e8edef);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: var(--chat-code-font-size, 12px);
}

/* Fix nested list bullets */
.chat-markdown--ai ul,
.chat-markdown--ai ol {
    list-style-position: outside;
}
.chat-markdown--ai ul li {
    list-style-type: disc;
}
.chat-markdown--ai ol li {
    list-style-type: decimal;
}
.chat-markdown--ai ul ul li,
.chat-markdown--ai ol ul li {
    list-style-type: circle;
}

/* Normalize <p> margin from Bootstrap so streaming and final render match */
.chat-markdown--ai p {
    margin: 0 0 4px 0;
    line-height: 1.55;
}
.chat-markdown--ai p:last-child {
    margin-bottom: 0;
}
.chat-markdown--ai ul,
.chat-markdown--ai ol {
    margin: 0 0 4px 0;
    padding-left: 1.2em;
}
.chat-markdown--ai li {
    margin: 0;
    line-height: 1.55;
}
.chat-markdown--ai li > p {
    margin: 0;
}

.chat-markdown--ai h1,
.chat-markdown--ai h2,
.chat-markdown--ai h3,
.chat-markdown--ai h4,
.chat-markdown--ai h5,
.chat-markdown--ai h6 {
    line-height: 1.25;
    margin-top: 0.35em;
    margin-bottom: 0.45em;
}

.chat-markdown--ai h1 {
    font-size: 1.65em;
}

.chat-markdown--ai h2 {
    font-size: 1.45em;
}

.chat-markdown--ai h3 {
    font-size: 1.3em;
}

.chat-markdown--ai p,
.chat-markdown--ai li {
    font-size: 1em;
}

.chat-markdown--ai ul,
.chat-markdown--ai ol {
    padding-left: 1.2em;
    margin-bottom: 0.5em;
}

/* Normalize marked.js HTML output inside AI bubble (streaming) */
.chat-bubble--ai p {
    margin: 0 0 8px 0;
    white-space: pre-wrap;
    font-size: var(--chat-bubble-font-size, 13px);
    line-height: 1.55;
}
.chat-bubble--ai p:last-child {
    margin-bottom: 0;
}
.chat-bubble--ai pre {
    background: var(--testit-gray, #D9D9D9);
    font-family: 'Courier New', Courier, monospace;
    padding: 10px 14px;
    border-radius: 12px;
    overflow-x: auto;
    font-size: var(--chat-code-font-size, 12px);
    line-height: 1.5;
    margin: 6px 0;
    white-space: pre;
}
.chat-bubble--ai pre code {
    background: none;
    padding: 0;
    font-size: inherit;
}
.chat-bubble--ai code {
    background: var(--testit-gray, #D9D9D9);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: var(--chat-code-font-size, 12px);
}
.chat-bubble--ai ul,
.chat-bubble--ai ol {
    padding-left: 1.2em;
    margin: 0 0 8px 0;
}
.chat-bubble--ai li {
    font-size: var(--chat-bubble-font-size, 13px);
    line-height: 1.55;
}
.chat-bubble--ai h1, .chat-bubble--ai h2, .chat-bubble--ai h3,
.chat-bubble--ai h4, .chat-bubble--ai h5, .chat-bubble--ai h6 {
    line-height: 1.25;
    margin: 0.35em 0 0.45em 0;
}
.chat-bubble--ai blockquote {
    border-left: 3px solid var(--testit-gray, #D9D9D9);
    padding-left: 10px;
    margin: 6px 0;
    color: #555;
}
.chat-bubble--ai hr {
    border: 0;
    border-top: 1px solid #b8b8b8;
    margin: 8px 0;
}

/* Stream-specific spacing normalization to reduce visible jump vs final bubble */
.chat-bubble--streaming .chat-markdown--ai {
    margin-bottom: 0;
}
.chat-bubble--streaming p {
    margin: 0 0 4px 0;
}
.chat-bubble--streaming p:last-child {
    margin-bottom: 0;
}
.chat-bubble--streaming ul,
.chat-bubble--streaming ol {
    margin: 0 0 4px 0;
}
.chat-bubble--streaming li {
    margin: 0;
}

.stream-live-content p {
    margin: 0 0 4px 0;
    line-height: 1.55;
}
.stream-live-content p:last-child {
    margin-bottom: 0;
}
.stream-live-content ul,
.stream-live-content ol {
    margin: 0 0 4px 0;
    padding-left: 1.2em;
}
.stream-live-content li {
    margin: 0;
    line-height: 1.55;
}
.stream-live-content li > p {
    margin: 0;
}
.stream-live-content h1,
.stream-live-content h2,
.stream-live-content h3,
.stream-live-content h4,
.stream-live-content h5,
.stream-live-content h6 {
    margin: 0.2em 0 0.3em 0 !important;
    line-height: 1.2 !important;
}
.stream-live-content blockquote {
    margin: 4px 0 !important;
}
.stream-live-content pre {
    margin: 6px 0 !important;
}
.stream-live-content hr {
    border: 0 !important;
    border-top: 1px solid #b8b8b8 !important;
    margin: 6px 0 !important;
}