/* Base layout */
html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
    font-size: ${fontSize}px;
    line-height: 1.6; 
    padding: 0; 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    overflow-y: auto; 
}

#conversation-container { 
    padding: 20px 10px; 
    min-height: 100%; 
}

/* Code blocks */
pre { 
    margin: 1em 0; 
    position: relative; 
    border-radius: 4px; 
    background-color: var(--code-block-bg); 
    overflow-x: auto; 
}

code { 
    font-family: 'JetBrains Mono', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 
    font-size: ${fontSize}px;
    white-space: pre-wrap; 
    word-break: break-word; 
}

.toolbar-container { 
    position: absolute; 
    top: 0; 
    right: 0; 
    padding: 5px; 
}

.copy-button { 
    background: var(--button-bg); 
    border: none; 
    border-radius: 4px; 
    color: var(--button-text-color); 
    cursor: pointer; 
    font-size: 0.8em; 
    padding: 4px; 
}

.copy-button:hover { 
    background: var(--button-hover-bg); 
}

/* Message styling */
.message-pair { 
    margin-bottom: 20px; 
    width: 100%; 
}

.user-message { 
    background-color: var(--user-msg-bg); 
    border-left: 4px solid var(--devoxx-orange); 
    padding: 10px 8px; 
    margin: 10px 0; 
    border-radius: 4px; 
    word-wrap: break-word; 
    overflow-wrap: break-word; 
    position: relative;
}

.assistant-message { 
    background-color: var(--assistant-msg-bg); 
    border-left: 4px solid var(--devoxx-blue); 
    padding: 10px 8px; 
    margin: 10px 0; 
    border-radius: 4px; 
    position: relative; 
    word-wrap: break-word; 
    overflow-wrap: break-word; 
}

.metadata-info { 
    font-size: ${metadataFontSize}px; 
    color: var(--metadata-color); 
    margin-bottom: 10px; 
    font-style: italic; 
}

.copy-response-button { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    background: var(--button-bg); 
    border: none; 
    border-radius: 4px; 
    color: var(--button-text-color); 
    cursor: pointer; 
    font-size: ${buttonFontSize}px; 
    padding: 4px; 
}

.copy-response-button:hover { 
    background: var(--button-hover-bg); 
}

.copy-user-message-button { 
    position: absolute; 
    top: 8px; 
    right: 8px; 
    background: var(--button-bg); 
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px; 
    color: var(--button-text-color); 
    cursor: pointer; 
    font-size: ${buttonFontSize}px; 
    padding: 4px; 
    z-index: 10;
    opacity: 0.9;
}

.copy-user-message-button:hover { 
    background: var(--button-hover-bg);
    opacity: 1;
}

.copy-button-flash {
    animation: flash 0.3s ease-in-out;
    background-color: var(--button-active-bg) !important;
}

@keyframes flash {
    0% { background-color: var(--button-bg); }
    50% { background-color: var(--button-active-bg); }
    100% { background-color: var(--button-active-bg); }
}

.copy-icon {
    width: 16px;
    height: 16px;
    display: block;
}

/* Dark theme support for copy icons */
@media (prefers-color-scheme: dark) {
    .copy-icon {
        content: url('/icons/copy_dark.svg');
    }
}

/* Typography */
a { 
    color: var(--link-color); 
    text-decoration: none; 
}

a:hover { 
    text-decoration: underline; 
}

h2 { 
    margin-top: 10px; 
    margin-bottom: 10px; 
    color: var(--header-color); 
    font-size: ${headerFontSize}px; 
}

ul { 
    padding-left: 20px; 
}

li { 
    margin-bottom: 8px; 
}

.feature-emoji { 
    margin-right: 5px; 
}

.feature-name { 
    font-weight: bold; 
}

.subtext { 
    font-size: ${subtextFontSize}px; 
    color: var(--subtext-color); 
    margin-top: 5px; 
}

/* Layout components */
.container { 
    width: 100%; 
    max-width: 800px; 
    margin: 0 auto; 
}

/* File references styling */
.file-references-container { 
    margin: 10px 0; 
    background-color: var(--file-refs-bg); 
    border-radius: 4px; 
    border-left: 4px solid var(--file-refs-border); 
}

.file-references-header { 
    padding: 10px 8px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
}

.file-references-header:hover { 
    background-color: var(--file-refs-header-hover-bg); 
}

.file-references-icon { 
    margin-right: 8px; 
}

.file-references-title { 
    flex-grow: 1; 
    font-weight: bold; 
}

.file-references-toggle { 
    margin-left: 8px; 
}

.file-references-content { 
    padding: 10px 8px; 
    border-top: 1px solid var(--file-refs-divider-color); 
}

.file-list { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
}

.file-item { 
    padding: 5px 0; 
}

.file-name { 
    font-weight: bold; 
    margin-right: 8px; 
}

.file-path { 
    color: var(--file-path-color); 
    font-style: italic; 
    font-size: ${filePathFontSize}px; 
    word-wrap: break-word; 
    overflow-wrap: break-word; 
}