/* CSS for Demo Box 1 */
.demo-box-content {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
    padding: 8px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    box-sizing: border-box;
    overflow: hidden; /* Prevent double scrollbars on the main container */
}

/* Base style for all log entries */
.log-entry {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #333333;
    opacity: 0;
    animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Style for the labels */
.log-label {
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* Colors */
.user-query .log-label, .user-query { color: #FF6600; }
.thinking .log-label { color: #666666; }
.toolCall .log-label { color: #0066CC; }
.toolResult .log-label { color: #00A86B; }
.final-report .log-label { color: #FF6600; font-size: 16px; }

/* Pre blocks */
pre {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 13px;
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    padding: 12px;
    white-space: pre-wrap;
    word-break: break-all;
    color: #333333;
    margin: 0;
}

/* Distinct styling for tools */
.toolCall pre { background: #E6F2FF; border: 1px solid #99CCFF; border-left: 3px solid #0066CC; }
.toolResult pre { background: #E6F9F0; border: 1px solid #80D4AA; border-left: 3px solid #00A86B; }
.thinking pre { background: #F5F5F5; border: 1px solid #CCCCCC; border-left: 3px solid #666666; }

/* Typing cursor */
.typing::after {
    content: '█';
    animation: blink 1s step-end infinite;
    color: #FF6600;
    margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

/* User query box - Locked to top */
.user-query {
    background: #FFF5ED;
    border: 1px solid #FFCC99;
    border-radius: 8px;
    padding: 16px;
    font-weight: 500;
    flex-shrink: 0; /* Never shrink */
    margin-bottom: 16px; /* Space below it */
}

.user-query p { margin: 0; color: #1a1a1a; }

/* Log list - Takes available space */
.log-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    
    /* Flex magic: Grow to fill space, shrink if needed, but never smaller than 150px */
    flex-grow: 1;
    flex-shrink: 1;
    min-height: 150px; 
    
    overflow-y: auto;
    overflow-x: hidden;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* Scrollbar styling */
.log-list::-webkit-scrollbar, .final-report::-webkit-scrollbar { width: 8px; }
.log-list::-webkit-scrollbar-track, .final-report::-webkit-scrollbar-track { background: #F5F5F5; border-radius: 4px; }
.log-list::-webkit-scrollbar-thumb, .final-report::-webkit-scrollbar-thumb { background: #CCCCCC; border-radius: 4px; }

.log-list .log-entry {
    font-size: 13px;
    padding-left: 12px;
    border-left: 2px solid #E0E0E0;
    margin-bottom: 12px;
}

.log-list .toolCall, .log-list .toolResult { border-left: none; padding-left: 0; }

/* Final Report - Sticks to bottom, allows growth */
.final-report {
    background: #FFFFFF;
    border: 2px solid #E0E0E0;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05); /* Shadow pointing up to separate from logs */
    
    /* Flex magic: Start natural size, shrink if needed, max 70% of screen */
    flex-shrink: 0; 
    max-height: 70%;
    overflow-y: auto;
}

.final-report .report-content { display: none; }
.final-report h3 { font-size: 20px; font-weight: 700; color: #1a1a1a; margin: 0 0 12px 0; }
.final-report p, .final-report ul { font-size: 15px; color: #333333; margin-bottom: 16px; line-height: 1.6; }
.final-report strong { color: #1a1a1a; font-weight: 600; }
.final-report ul { list-style: none; padding-left: 0; }
.final-report li { position: relative; padding-left: 24px; margin-bottom: 8px; }
.final-report li::before { content: '•'; color: #FF6600; position: absolute; left: 0; top: 0; font-weight: 700; }

.email-draft {
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 16px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
}
.email-draft p { margin-bottom: 12px; }