body {
    font-family: 'Inter', sans-serif;
    transition: background-color 1.5s ease-in-out;
}
.controls button:disabled, .controls input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* Basic styling for rendered Markdown */
.markdown-content h1, .markdown-content h2, .markdown-content h3 { margin-top: 1rem; margin-bottom: 0.5rem; font-weight: 700; line-height: 1.25; }
.markdown-content h1 { font-size: 1.875rem; }
.markdown-content h2 { font-size: 1.5rem; }
.markdown-content h3 { font-size: 1.25rem; }
.markdown-content p { margin-bottom: 1rem; }
.markdown-content ul { list-style-type: disc; padding-left: 2rem; margin-bottom: 1rem; }
.markdown-content ol { list-style-type: decimal; padding-left: 2rem; margin-bottom: 1rem; }
.markdown-content li { margin-bottom: 0.25rem; }
.markdown-content blockquote { border-left: 4px solid #e5e7eb; padding-left: 1rem; color: #6b7280; margin-bottom: 1rem; }
.markdown-content code { background-color: #f3f4f6; padding: 0.125rem 0.25rem; border-radius: 0.25rem; font-family: monospace; }
.markdown-content pre { background-color: #f3f4f6; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin-bottom: 1rem; }

#analysis-container {
    transition: all 0.5s ease-in-out;
    opacity: 0;
    transform: translateY(20px);
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    border-width: 0;
}
#analysis-container.visible {
    opacity: 1;
    transform: translateY(0);
    max-height: 4000px; /* Increased to accommodate new chart */
    margin-top: 2rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-width: 1px;
}

/* Animated Background Styles */
@keyframes pulse-bg {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes blink {
    50% { opacity: 0; }
}
.blink-emoji {
    animation: blink 1.5s step-end infinite;
}

body.state-idle {
    background: linear-gradient(270deg, #ede9fe, #ddd6fe, #e9d5ff, #ede9fe);
    background-size: 600% 600%;
    animation: pulse-bg 20s ease infinite;
}
body.state-recording {
    background: linear-gradient(270deg, #fee2e2, #fef9c3, #dcfce7, #fee2e2);
    background-size: 600% 600%;
    animation: pulse-bg 10s ease infinite;
}
body.state-playing {
    background: linear-gradient(270deg, #bfdbfe, #a5b4fc, #93c5fd, #bfdbfe);
    background-size: 600% 600%;
    animation: pulse-bg 10s ease infinite;
}
body.state-analysis {
    background: linear-gradient(270deg, #ede9fe, #ddd6fe, #e9d5ff, #ede9fe);
    background-size: 600% 600%;
    animation: pulse-bg 15s ease infinite;
}
.metric-row {
    transition: background-color 0.3s ease-in-out;
    border-radius: 0.5rem;
}
@keyframes pulse-border {
    0% { border-color: #fca5a5; } /* red-300 */
    25% { border-color: #fde047; } /* yellow-300 */
    50% { border-color: #86efac; } /* green-300 */
    75% { border-color: #93c5fd; } /* blue-300 */
    100% { border-color: #fca5a5; } /* red-300 */
}
.recording-border {
    animation: pulse-border 4s ease infinite;
    border-width: 3px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
#encouragement-message {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
#encouragement-message.visible {
    opacity: 1;
}
@keyframes blink-cursor {
    from, to { border-color: transparent; }
    50% { border-color: #6b7280; } /* gray-500 */
}
.typing-cursor::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1.1em;
    margin-left: 0.25em;
    border-right: 2px solid #6b7280;
    animation: blink-cursor 1s step-end infinite;
    vertical-align: bottom;
}