body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background-color: #f4f4f4;
    color: #333;
}

h1, h2 {
    color: #555;
}

#controls button {
    padding: 10px 15px;
    margin: 5px;
    font-size: 1em;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    color: white;
    transition: background-color 0.2s ease;
}

#startButton {
    background-color: #28a745; /* Verde */
}
#startButton:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}
#startButton:hover:not(:disabled) {
    background-color: #218838;
}


#stopButton {
    background-color: #dc3545; /* Vermelho */
}
#stopButton:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}
#stopButton:hover:not(:disabled) {
    background-color: #c82333;
}


#status {
    margin-top: 20px;
    padding: 15px;
    background-color: #e9ecef;
    border-radius: 5px;
    min-width: 250px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

#status p {
    margin: 8px 0;
    display: flex;          /* Align items in volume rows */
    align-items: center;    /* Vertically center align meter and text */
    justify-content: center;/* Center content horizontally */
}

#status span {
    font-weight: bold;
    margin-left: 5px; /* Space between label and value */
}

#errorMessage {
    min-height: 1.2em; /* Reserve space for error message */
    margin-top: 10px;
}


meter {
    width: 100px;
    height: 15px;
    margin-left: 10px; /* Space between text and meter */
    vertical-align: middle; /* Better align with text */
}
/* Style the meter bar */
meter::-webkit-meter-bar {
    background: #ddd;
    border-radius: 3px;
}
meter::-webkit-meter-optimum-value {
    background: linear-gradient(to right, #f0ad4e, #5cb85c); /* Yellow to Green */
    border-radius: 3px;
}


 #transcript {
     margin-top: 20px;
     width: 80%;
     max-width: 600px;
     background-color: white;
     padding: 15px;
     border-radius: 5px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }

 #transcriptList {
     list-style: none;
     padding: 0;
     max-height: 300px;
     overflow-y: auto;
     margin: 0;
 }

 #transcriptList li {
     padding: 8px 5px;
     border-bottom: 1px solid #eee;
     line-height: 1.4;
 }
 #transcriptList li:last-child {
     border-bottom: none;
 }
 .user-message {
     color: #007bff; /* Blue */
     text-align: right;
     margin-left: 40px; /* Indent from left */
     font-style: italic;
 }
.agent-message {
     color: #28a745; /* Green */
     text-align: left;
     margin-right: 40px; /* Indent from right */
 }

 #config {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    width: 80%;
    max-width: 500px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

#config h2 {
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
    color: #495057;
}

#config div {
    margin-bottom: 10px;
    display: flex;
    align-items: center; /* Alinha label e input verticalmente */
}

#config label {
    display: inline-block; /* Ou 'block' se preferir acima do input */
    width: 120px; /* Ajuste conforme necessário */
    margin-right: 10px;
    font-weight: bold;
    color: #495057;
}

#config input[type="text"] {
    flex-grow: 1; /* Faz o input ocupar o espaço restante */
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.95em;
}