/* --- General Styles --- */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #eef2f7; /* Light blue-grey background */
    color: #333;
    display: flex;
    flex-direction: column; /* Stack children vertically */
    /* align-items: center; /* REMOVED - Allow content to start higher */
    min-height: 100vh;
    box-sizing: border-box;
}

#page-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center children horizontally */
    width: 100%;
    max-width: 850px; /* Match chat container max-width */
    margin: 0 auto; /* Center the wrapper */
    padding-top: 0;
    box-sizing: border-box;
}


h1 {
    text-align: center;
    color: #2c3e50; /* Darker blue */
    margin-top: 10px; /* Reduced top margin */
    margin-bottom: 25px; /* Slightly reduced bottom margin */
    font-weight: 600; /* Bolder font */
    font-size: 2.2rem; /* Slightly larger font size */
    letter-spacing: 1px; /* Add some letter spacing */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle shadow */
}

/* --- Chat Container --- */
#chat-container {
    width: 100%; /* Take full width of page-wrapper */
    max-width: 850px; /* Keep chat container width */
    background-color: #ffffff;
    border-radius: 16px; /* More rounded corners */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px); /* Adjust height based on viewport */
    max-height: 800px; /* Max height */
    overflow: hidden; /* Ensures children conform to border-radius */
    position: relative; /* Make chat-container the positioning context */
}

/* --- Chat Output Area --- */
#chat-output {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    padding-top: 85px; /* Increased padding to push messages further below info box */
    /* position: relative; /* No longer needed here */
    border-bottom: 1px solid #e0e0e0; /* Softer border */
    background-color: #f8f9fa; /* Very light grey */
}

/* Custom Scrollbar Styles */
#chat-output::-webkit-scrollbar {
    width: 8px;
}

#chat-output::-webkit-scrollbar-track {
    background: #eef2f7; /* Match body background */
    border-radius: 10px;
}

#chat-output::-webkit-scrollbar-thumb {
    background: #adb5bd; /* Muted grey */
    border-radius: 10px;
}

#chat-output::-webkit-scrollbar-thumb:hover {
    background: #6c757d; /* Darker grey on hover */
}


/* --- Info Box Styles (Inside Chat Container) --- */
#info-box {
    position: absolute; /* Position relative to chat-container */
    top: 15px; /* Space from top of chat-container */
    left: 15px; /* Space from left of chat-container */
    right: 15px; /* Add right padding */
    background-color: #e9ecef; /* Light grey */
    color: #495057; /* Darker grey text */
    border-radius: 8px; /* Slightly less rounded */
    padding: 8px 12px;
    max-width: calc(100% - 30px); /* Prevent overflow */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    font-size: 0.85rem; /* Smaller font */
    line-height: 1.4;
    display: flex;
    align-items: center; /* Center icon and text vertically */
    z-index: 10; /* Ensure it's above chat-output and voice-status-display */
}

#info-box .info-icon {
    font-size: 1rem;
    margin-right: 8px;
    color: #6c757d;
    flex-shrink: 0;
}


#info-box p {
    margin: 0;
}


/* --- Messages --- */
.message {
    margin-bottom: 12px;
    padding: 10px 15px;
    border-radius: 20px; /* Very rounded */
    max-width: 75%;
    word-wrap: break-word;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    /* Ensure messages don't overlap info box if absolutely positioned */
    position: relative;
    z-index: 1;
}

.user-message {
    background-color: #007bff; /* Primary blue */
    color: white;
    border-bottom-right-radius: 5px; /* Slightly less round on one corner */
    align-self: flex-end;
    margin-left: auto;
}

.bot-message {
    background-color: #e9ecef; /* Light grey */
    color: #343a40; /* Dark grey text */
    border-bottom-left-radius: 5px; /* Slightly less round on one corner */
    align-self: flex-start;
    margin-right: auto;
}

/* --- Input Area --- */
#input-area {
    display: flex;
    padding: 15px 20px;
    border-top: 1px solid #e0e0e0;
    background-color: #ffffff;
    align-items: center; /* Vertically align items */
    gap: 8px; /* Add gap between elements */
}

#language-select {
    padding: 8px 10px;
    border-radius: 15px;
    border: 1px solid #ced4da;
    background-color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    margin-left: 0; /* Remove default button margin */
    margin-right: 5px; /* Add some space before next button */
}

textarea#text-input {
    flex-grow: 1;
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 20px; /* Rounded input */
    margin-right: 10px;
    font-size: 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Match output font */
    resize: none !important; /* Prevent manual resizing (force) */
    overflow-y: auto; /* Allow vertical scrolling */
    max-height: 80px; /* Maximum height before scrolling */
    /* min-height: 40px; /* REMOVED - Prevent auto-resizing */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* REMOVED height transition */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    word-wrap: break-word; /* Enable word wrapping */
    overflow-wrap: break-word; /* Ensure long words break */
    min-width: 0; /* Allow the item to shrink below its content size */
}

/* Hide scrollbar for Chrome, Safari and Opera */
#text-input::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#text-input {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#text-input {
    -webkit-overflow-scrolling: touch;
    touch-action: auto;
}

#text-input:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* --- Buttons --- */
button {
    padding: 10px 18px; /* Slightly more padding */
    border: none;
    border-radius: 20px; /* Rounded buttons */
    cursor: pointer;
    background-color: #007bff; /* Primary blue */
    color: white;
    margin-left: 8px;
    font-size: 0.95rem;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease;
    /* white-space: nowrap; /* Prevent text wrapping */
}

button:hover {
    background-color: #0056b3; /* Darker blue */
    transform: translateY(-1px); /* Slight lift effect */
}
button:active {
     transform: translateY(0px); /* Press effect */
}
button:disabled {
    background-color: #adb5bd;
    cursor: not-allowed;
    transform: none;
}

/* Specific Button Styles */
#start-conversation-button {
    background-color: #28a745; /* Green */
}
#start-conversation-button:hover {
    background-color: #218838; /* Darker Green */
}
#start-conversation-button:disabled {
    background-color: #adb5bd !important; /* Match general disabled button color, force apply */
    color: #6c757d !important; /* Muted text color */
    opacity: 0.6 !important; /* Reduce opacity */
    cursor: not-allowed;
    transform: none;
}
#stop-conversation-button {
     background-color: #dc3545; /* Red */
}
#stop-conversation-button:hover {
     background-color: #c82333; /* Darker Red */
}
#back-to-text-button {
     background-color: #6c757d; /* Grey color */
}
#back-to-text-button:hover {
     background-color: #5a6268;
}


/* --- Typing Indicator (Text Mode) --- */
.typing-indicator {
    display: inline-flex; /* Use inline-flex to size naturally */
    align-items: flex-end; /* Align dots to bottom */
    padding: 8px 10px; /* Reduced padding */
    margin-bottom: 12px;
    background-color: #e9ecef; /* Match bot message background */
    border-radius: 15px; /* Make slightly less rounded than messages */
    border-bottom-left-radius: 5px;
    align-self: flex-start; /* Align like a bot message */
    /* max-width: 75px; /* Remove max-width */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.typing-indicator span {
    height: 8px;
    width: 8px;
    margin: 0 2px;
    background-color: #adb5bd; /* Muted dot color */
    border-radius: 50%;
    opacity: 0.4;
    animation: typing-dot-pulse 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) {
    animation-delay: 0s;
}
.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}
.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing-dot-pulse {
    0% { opacity: 0.4; transform: scale(1); }
    20% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 0.4; transform: scale(1); }
}


/* --- Status Indicator --- */
#status {
    margin-left: 15px;
    color: #6c757d; /* Medium grey */
    align-self: center;
    font-style: italic;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

/* --- Animations & States --- */
@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

#status.thinking,
#status.speaking {
    animation: pulse 1.5s infinite ease-in-out;
    font-weight: bold;
}

#status.speaking {
    color: #28a745; /* Green for speaking */
}

#status.thinking {
    color: #ffc107; /* Amber for thinking */
}

#status.error {
    color: #dc3545; /* Red for error */
    font-weight: bold;
    animation: none; /* Stop animation on error */
}


/* --- Voice Status Display Area --- */
#voice-status-display {
    flex-grow: 1; /* Take up the chat area space */
    display: flex;
    padding-top: 70px; /* Add padding to push icons below info box */
    justify-content: center;
    align-items: center;
    background-color: #f8f9fa; /* Match chat output background */
    overflow: hidden; /* Hide indicators by default */
}

#voice-status-display .indicator {
    display: none; /* Hide all indicators by default */
    font-size: 5rem; /* Large icons */
    color: #adb5bd; /* Muted color */
}

/* Style for the status text next to emojis */
#voice-status-display .status-text {
    font-weight: bold; /* Make text bolder */
    background-color: #e9ecef; /* Light grey background */
    color: #495057; /* Darker grey text */
    padding: 4px 8px; /* Add some padding */
    border-radius: 12px; /* Rounded corners */
    margin-left: 10px; /* Space from the emoji */
    font-size: 1rem; /* Adjust font size if needed */
    display: none; /* Hidden by default, shown by JS */
}

/* Show the active status text */
#voice-status-display.listening span#status-text-listening,
#voice-status-display.thinking span#status-text-thinking,
#voice-status-display.speaking span#status-text-speaking,
#voice-status-display.idle span#status-text-idle {
    display: inline-block; /* Show the text when active */
}



/* Animation for indicators */
@keyframes subtle-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 0.7; }
}

/* Show and animate the active indicator */
#voice-status-display.listening #indicator-listening,
#voice-status-display.thinking #indicator-thinking,
#voice-status-display.speaking #indicator-speaking {
    display: block;
    animation: subtle-pulse 2s infinite ease-in-out;
}
#voice-status-display.idle #indicator-idle { /* Static idle indicator */
     display: block;
     color: #28a745; /* Green */
     /* No animation for idle */
}

/* Specific colors for states */
#voice-status-display.listening #indicator-listening {
    color: #007bff; /* Blue */
}
#voice-status-display.thinking #indicator-thinking {
     color: #ffc107; /* Amber */
}
#voice-status-display.speaking #indicator-speaking {
     color: #28a745; /* Green */
}


/* --- UI State Management --- */

/* Default: Text Mode */
#voice-status-display, /* Hide voice status */
#start-conversation-button,
#stop-conversation-button,
#back-to-text-button,
#language-select { /* Hide language select */
    display: none;
}
#status { /* Also hide small status text by default */
     display: none;
}
#chat-output { /* Show chat output in text mode */
     display: block;
}
#info-box { /* Show info box in text mode */
    display: flex;
}
/* Text mode elements' visibility is handled by hiding voice-mode specific elements */
/* and ensuring #chat-output is visible (already done above) */


/* Voice Mode Idle (Ready to start conversation) */
body.voice-mode-idle #chat-output, /* Hide chat */
body.voice-mode-idle #text-input,
body.voice-mode-idle #send-button,
body.voice-mode-idle #enter-voice-mode-button,
body.voice-mode-idle #stop-conversation-button {
    display: none;
}
/* Keep language select visible */
body.voice-mode-idle #voice-status-display, /* Show voice status */
body.voice-mode-idle #start-conversation-button,
body.voice-mode-idle #back-to-text-button,
body.voice-mode-idle #language-select { /* Show language select */
    display: inline-block; /* Use inline-block for buttons/select */
}
body.voice-mode-idle #voice-status-display {
     display: flex; /* Override inline-block for the status display */
}
body.voice-mode-idle #input-area {
    justify-content: space-around;
    align-items: center;
}
body.voice-mode-idle #info-box { /* Show info box in voice idle */
    display: flex;
}
body.voice-mode-idle #status { /* Show small text status */
    display: inline-block;
    font-style: normal;
    color: #6c757d;
    animation: none; /* Ensure no animation */
}


/* Voice Mode Active (Conversation ongoing) */
body.voice-mode-active #chat-output, /* Hide chat */
body.voice-mode-active #text-input,
body.voice-mode-active #send-button,
body.voice-mode-active #enter-voice-mode-button,
body.voice-mode-active #start-conversation-button {
    display: none;
}
/* Keep language select visible */
/* Keep info-box visible in voice-active mode */
/* body.voice-mode-active #info-box { display: none; } */

body.voice-mode-active #voice-status-display, /* Show voice status */
body.voice-mode-active #stop-conversation-button,
body.voice-mode-active #back-to-text-button,
body.voice-mode-active #language-select, /* Show language select */
body.voice-mode-active #status { /* Small text status is managed by JS */
    display: inline-block; /* Use inline-block for buttons/select/status */
}
body.voice-mode-active #voice-status-display {
     display: flex; /* Override inline-block for the status display */
}
body.voice-mode-active #input-area {
    justify-content: space-around;
    align-items: center;
}

/* --- Responsive Design --- */
@media (max-width: 600px) {
    body {
        padding: 10px; /* Reduce padding on smaller screens */
    }

    h1 {
        font-size: 1.8rem; /* Reduce heading size */
        margin-bottom: 15px;
    }

    #chat-container {
        height: calc(100vh - 80px); /* Adjust height for smaller screens */
        max-height: unset; /* Remove max height constraint */
        border-radius: 8px; /* Less rounded corners */
    }

    #chat-output {
        padding: 15px;
        padding-top: 75px; /* Increased padding top for mobile */
    }

    #info-box {
        top: 10px;
        left: 10px;
        right: 10px; /* Add right padding for mobile */
        padding: 6px 10px;
        font-size: 0.8rem;
        max-width: calc(100% - 20px);
    }

    .message {
        margin-bottom: 8px;
        padding: 8px 12px;
        border-radius: 15px; /* Less rounded messages */
        max-width: 85%; /* Allow messages to take more width */
    }

    .user-message {
        border-bottom-right-radius: 3px;
    }

    .bot-message {
        border-bottom-left-radius: 3px;
    }

    #input-area {
        padding: 10px 15px;
        flex-direction: column; /* Stack input elements vertically */
        align-items: stretch; /* Stretch items to fill width */
        gap: 10px; /* Increase gap */
    }

    #language-select {
        width: 100%; /* Full width */
        margin-right: 0;
        margin-bottom: 5px; /* Space below select */
    }

    #text-input {
        margin-right: 0;
        width: 100%; /* Full width */
    }

    button {
        width: 100%; /* Full width */
        margin-left: 0;
        padding: 12px 18px; /* Adjust button padding */
    }

    #input-area button {
        margin-left: 0; /* Remove left margin for buttons in stacked layout */
    }

    .typing-indicator {
        padding: 6px 8px;
        margin-bottom: 8px;
        border-radius: 10px;
        border-bottom-left-radius: 3px;
    }

    .typing-indicator span {
        height: 6px;
        width: 6px;
        margin: 0 1px;
    }

    #status {
        margin-left: 0;
        text-align: center;
        width: 100%; /* Full width */
        margin-top: 5px; /* Space above status */
    }

    #voice-status-display {
        padding-top: 60px; /* Adjust padding top */
    }

    #voice-status-display .indicator {
        font-size: 3rem; /* Smaller icons */
    }
}

/* Hide Vapi's default button if it appears */
.vapi-button,
.vapi-call-button,
vapi-button, /* Target custom element if Vapi uses one */
vapi-call-button, /* Target custom element if Vapi uses one */
.vapi-root, /* Often a root element for Vapi's UI */
.vapi-container, /* Another common container class */
.vapi-widget { /* If it's a widget */
    display: none !important;
    visibility: hidden !important; /* More aggressive hiding */
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important; /* Prevent interaction */
}