/* Basic Reset & Font */
body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: transparent; /* Transparent background for iframe embedding */
    display: flex; /* Use flexbox for centering content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    min-height: 100vh; /* Ensure it takes full viewport height for centering */
    padding: 0;
    box-sizing: border-box;
    overflow: hidden; /* Prevent scrollbars */
}

/* Screen reader only class for accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Main App Container - The "Long Thin Bar" */
.app-container {
    background-color: #ffffff;
    padding: 8px 12px; /* Reduced padding for a very thin bar look */
    border-radius: 10px; /* Slightly less rounded for a sharper, sleeker feel */
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08); /* Even softer, more subtle shadow */
    width: 90%; /* Responsive width, but still wide */
    max-width: 800px; /* Max width for a long bar */
    box-sizing: border-box;
    display: flex; /* Flex container for direct children */
    align-items: center; /* Vertically align items in the center */
    min-height: 50px; /* Minimum height for the bar */
    gap: 10px; /* Space between elements */
    /* KEY CHANGE: Use space-between to push elements to the ends and distribute remaining space */
    justify-content: space-between;
    flex-wrap: wrap; /* Allow wrapping on very small screens */
}

/* Input field will take available space */
input[type="text"] {
    flex-grow: 1; /* Allow input to grow and take available space */
    /* KEY CHANGE: Ensure min-width is small enough to allow growth, but not too small */
    min-width: 150px; /* Adjusted min-width to allow more growth */
    height: 34px; /* Fixed low height */
    padding: 6px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 7px;
    font-size: 0.9em;
    color: #333;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    line-height: 1.5;
    background-color: #f9f9f9;
}
input[type="text"]:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
    background-color: #ffffff;
}

/* Listen Button */
button {
    background: linear-gradient(145deg, #007bff, #0056b3);
    color: white;
    width: 90px; /* Slightly increased width for the button */
    height: 34px; /* Match height of other elements */
    border: none;
    border-radius: 7px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    box-shadow: 0 3px 8px rgba(0, 123, 255, 0.2);
    flex-shrink: 0; /* Prevent button from shrinking */
}
button:hover {
    background: linear-gradient(145deg, #0056b3, #003f80);
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(0, 123, 255, 0.3);
}
button:disabled {
    background: #cccccc;
    cursor: not-allowed;
    transform: translateY(0);
    box-shadow: none;
}

/* Loading Spinner within button */
.loading-spinner {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 0.8s linear infinite;
    display: none;
}
button.loading #buttonText {
    display: none;
}
button.loading .loading-spinner {
    display: block;
}

/* Voice Select Dropdown */
select {
    width: 160px; /* Fixed width for select */
    height: 34px; /* Match height of other elements */
    padding: 0 10px;
    padding-right: 28px; /* Space for custom arrow */
    border: 1px solid #e0e0e0;
    border-radius: 7px;
    font-size: 0.9em;
    color: #333;
    background-color: #f9f9f9;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2C114.7L159.2%2C242.5c-4.5%2C4.5-10.6%2C6.7-16.7%2C6.7s-12.2-2.2-16.7-6.7L5.4%2C114.7c-9-9-9-23.5%2C0-32.5s23.5-9%2C32.5%2C0l118.3%2C118.3L254.5%2C82.2c9-9%2C23.5-9%2C32.5%2C0S296%2C105.7%2C287%2C114.7z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 9px auto;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0; /* Prevent select from shrinking */
}
select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
    background-color: #ffffff;
}

/* Message Display - Positioned below the bar */
.message {
    margin-top: 6px;
    font-size: 0.8em;
    color: #d9534f;
    min-height: 12px;
    text-align: left;
    width: 100%; /* Ensure it spans the full width of the container */
    box-sizing: border-box;
    padding-left: 5px;
    /* KEY CHANGE: Force message to next line and take full width */
    flex-basis: 100%; /* Make it take full width in flex container */
    order: 2; /* Ensure it appears after the main input/button/select line */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
    .app-container {
        flex-direction: column; /* Stack elements vertically */
        align-items: stretch; /* Stretch to fill width */
        padding: 10px;
        min-height: auto; /* Auto height when stacked */
        gap: 8px; /* Slightly reduced gap when stacked */
    }
    input[type="text"], button, select {
        width: 100%; /* Full width when stacked */
        margin-right: 0; /* Remove any lingering right margin */
    }
    /* Adjust order for smaller screens if needed, though default order is usually fine when stacked */
    input[type="text"] { order: 1; }
    button { order: 2; }
    select { order: 3; }
    .message { order: 4; }
}

/* Even smaller screens if needed, further adjustments */
@media (max-width: 400px) {
    /* No additional changes needed here if 600px breakpoint handles stacking well */
}