body {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.controls {
    display: flex;
    gap: 10px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    min-width: 180px;
    text-align: center;
}

#startButton {
    background-color: #4CAF50;
    color: white;
    border: none;
}

#stopButton {
    background-color: #f44336;
    color: white;
    border: none;
    display: none;
}

.status {
    font-style: italic;
    color: #666;
    margin-bottom: 20px;
}

.results-container {
    display: flex;
    flex-direction: column; /* Normal column order */
    gap: 20px;
}

.final-results {
    min-height: 100px;
    padding: 15px;
    font-size: 24px; /* Match partial results font size */
    background-color: transparent; /* Remove background */
    border: none; /* Remove any borders */
    text-transform: lowercase; /* Keep lowercase conversion */
    display: flex;
    flex-direction: column-reverse;
}

.partial-results {
    min-height: 120px;
    padding: 15px;
    background-color: transparent; /* Keep transparent background */
    border: none; /* Keep no borders */
    font-size: 24px; /* Keep larger font */
    text-transform: lowercase; /* Keep lowercase conversion */
    color: #8B0000; /* Dark red color to emphasize importance */
    overflow: hidden; /* Prevent overflow */
}

.partial-result {
    color: #8B0000; /* Dark red color for better visibility */
    font-style: normal; /* Keep normal font style */
}

.final-result {
    color: #000;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    padding: 6px;
    background: #2196f32e;
}

.answer-result {
    background: #4caf501c;
}

.timestamp {
    min-width: 90px;
    color: #666;
    margin-right: 10px;
    font-size: 16px; /* Slightly smaller than the text */
}

.session-separator {
    border-top: 1px dashed #999;
    margin: 20px 0;
    padding-top: 10px;
    color: #666;
    font-style: italic;
    font-size: 14px;
}

.download-btn {
    background-color: #2196F3;
    color: white;
    border: none;
    display: none;
}

.buttonOn {
    min-width: 0;
    width: 60px;
    background-color: #4CAF50;
    color: #fff; /* Dark red color to emphasize importance */
    border: none;
}

.buttonOff {
    min-width: 0;
    width: 60px;
    background-color: #f44336;
    color: #fff; /* Dark red color to emphasize importance */
    border: none;
}

#soundOnButton,
#soundOffButton,
#micOnButton,
#micOffButton {
    display: none;
}

.flags {
    width: min-content;
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: space-between;
    justify-content: center;
    align-items: stretch;
    flex-shrink: 1;
}

.flag-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.flag-name {
    font-style: italic;
    color: #666;
}

.flag-state.state-on {
    color: #4CAF50;
}
.flag-state.state-off {
    color:  #f44336;
}