/* components.css */

/* Adjusted search-area for better button alignment */
.search-area {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

#recipeQuery {
    flex-grow: 1;
    min-width: 200px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
}

/* Group search and voice buttons together */
.search-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

#results {
    border-top: 1px solid #eee;
    padding-top: 20px;
    overflow-x: hidden;
}

.recipe-card {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    word-wrap: break-word;
    box-sizing: border-box;
    overflow: hidden;
}

.recipe-card h2 {
    margin-top: 0;
    color: #4A7C9F;
    font-size: 20px;
}

.recipe-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    word-wrap: break-word;
}

/* Conversation Area */
.conversation-area {
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #fcfcfc;
    max-height: 450px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.conversation-turn {
    padding: 12px 18px;
    border-radius: 20px;
    max-width: 75%;
    word-wrap: break-word;
    line-height: 1.6;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.user-turn {
    background-color: #e0f7fa;
    align-self: flex-end;
    text-align: right;
    margin-left: auto;
}

.assistant-turn {
    background-color: #f0f0f0;
    align-self: flex-start;
    text-align: left;
    margin-right: auto;
}

.assistant-turn a {
    color: #4A7C9F;
    text-decoration: underline;
}

.error-turn {
    background-color: #ffe0e0;
    color: #c00;
}

/* Debug Info Area Container */
.debug-area {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin-top: 0;
    font-size: 0.85em;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

.debug-area pre {
    background-color: #e9e9e9;
    padding: 12px;
    border-radius: 5px;
    border: 1px dashed #ccc;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 250px;
    overflow-y: auto;
    box-sizing: border-box;
    font-size: 0.9em;
}

.debug-area h3, .debug-area h4 {
    color: #333;
    margin-top: 10px;
    margin-bottom: 5px;
}

.debug-area ul {
    list-style-type: disc;
    margin-left: 20px;
    padding-left: 0;
}

/* Style for the voice status indicator */
.voice-status {
    display: none;
    margin-left: 10px;
    padding: 5px 10px;
    border-radius: 4px;
    background-color: #e2e6ea;
    color: #333;
    font-size: 0.9em;
    vertical-align: middle;
    white-space: nowrap;
}

/* AI Voice Output Toggle */
.voice-output-control {
    margin-top: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95em;
    color: #555;
}

.voice-output-control input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Grouping for action buttons (Add New, Refresh) */
.action-buttons-group {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* Status message */
#refreshStatus {
    text-align: right;
    font-size: 0.85em;
    margin-top: 5px;
    height: 20px;
}

.placeholder-text {
    /* Ensures both lines of text are centered within the available space */
    text-align: center;
    /* Adjust font size and color if needed */
    font-size: 0.9em;
    color: #999;
    /* Add padding/margin as necessary for vertical spacing */
    padding: 10px 0;
}

/* In your CSS file */
.auth-username-display {
    /* Optional: Ensure text wrapping doesn't occur */
    white-space: nowrap;
    /* Optional: Ensure a minimum width even if the name is short */
    min-width: 80px;
    display: inline-block;
}

/* Ensure the username display area has a minimum width and is an inline-block for proper sizing */
#currentUsername {
    min-width: 80px; /* Adjust this value if needed, but 80px is usually enough for 'Account' */
    display: inline-block;
}