/* chat-bot-styles.css */

h1.title {
    display: none !important; /* Oculta el elemento H1 con la clase 'title' */
}

html, body {
    height: auto;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
    /* Ensure these background styles only apply to index.qmd if needed */
    background-image:
      url("images/Background.jpg"); /* <- Adjust path if necessary */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #042847;
}

/* El contenedor principal de tu chat en chat-bot.qmd */
#chat-app {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    border: 1px solid #000000;
    border-radius: 8px;
    overflow: hidden; /* Changed from visible to hidden, which is more typical for a bordered container */
    box-sizing: border-box;
    background-color: #0b1a2e; /* Use the same dark background as sidebar for consistency */
    color: #e0e0e0; /* Light text color for the dark background */
    height: 80vh; /* Give it a defined height to make flex-grow work */
}

#chat-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Styles for the Recent Chats Panel */
#recent-chats-panel {
    flex-grow: 1; /* Allow it to take up available space in #chat-app */
    overflow-y: auto; /* Add scroll if content overflows */
    padding: 10px;
    display: none; /* Initially hidden, will be shown by JS */
    flex-direction: column; /* Arrange content vertically */
    /* Add any other necessary styling, e.g., background, border */
    background-color: #0b1a2e; /* Match chat-app background */
}

#recent-chats-panel h5 {
    color: #58AEF9; /* Title color */
    margin-bottom: 10px;
}

#recent-chats-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#recent-chats-panel li {
    padding: 10px;
    border-bottom: 1px solid #3a4a61; /* Slightly lighter border than background */
    cursor: pointer;
    color: #e0e0e0; /* Light text color */
    background-color: #112742; /* Slightly different background for list items */
    margin-bottom: 5px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

#recent-chats-panel li:hover {
    background-color: #1c3a5f; /* Darker background on hover */
}


.input-area {
    display: flex;
    align-items: center;
    padding: 10px;
    border-top: 1px solid #58AEF9;
    flex-shrink: 0;
    background-color: #112742; /* Darker background for input area */
}

#user-input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #58AEF9;
    border-radius: 5px;
    margin-right: 10px;
    font-size: 1rem;
    box-sizing: border-box;
    background-color: #0b1a2e; /* Match chat-app background */
    color: #e0e0e0; /* Light text color */
}

#user-input::placeholder {
    color: #aaa; /* Placeholder text color */
    opacity: 0.7;
}

#send-button {
    padding: 10px 15px;
    border: none;
    background-color: #58AEF9;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
}

#send-button:hover {
    background-color: #7ac5ff; /* Lighter blue on hover */
}

#send-button:disabled {
    background-color: #3a4a61; /* Darker, disabled look */
    cursor: not-allowed;
}

.message {
    margin-bottom: 10px;
    padding: 10px 15px;
    border-radius: 15px;
    max-width: 85%;
    word-wrap: break-word;
    line-height: 1.5;
}

.user-message {
    background-color: #58AEF9; /* Blue */
    color: #0b1a2e; /* Dark blue text */
    margin-left: auto;
    align-self: flex-end;
}

.bot-message {
    background-color: #1c3a5f; /* Darker blue */
    color: #e0e0e0; /* Light text */
    margin-right: auto;
    align-self: flex-start;
    border: 1px solid #3a4a61; /* Border matching darker background */
}

.bot-message i.fas.fa-robot {
    margin-right: 8px;
    opacity: 0.8;
}

.typing-indicator {
    font-style: italic;
    color: #aaa;
    padding: 10px;
    height: 25px;
    box-sizing: border-box;
    display: none;
    flex-shrink: 0;
    text-align: center;
}

.quarto-footer {
    flex-shrink: 0;
    padding: 20px;
    text-align: center;
    /* Consider adding background and color if needed */
}


/* Styles for icon buttons with text on hover */
/* Scoped to #chat-app to avoid conflicts if these classes are used elsewhere */

#chat-app .icon-with-text { /* Scoped to #chat-app */
    position: relative; 
    display: inline-flex; 
    align-items: center;
}

#chat-app .icon-with-text button { /* Style for buttons inside .icon-with-text */
    transition: color 0.2s ease; 
}

#chat-app .icon-with-text button:hover {
    color: #ffffff !important; /* Make icon brighter on hover */
}

#chat-app .icon-text {
    display: none; 
    position: absolute;
    bottom: 100%; /* Position above the icon */
    left: 50%;
    /* transform: translateX(-50%) translateY(-5px); Temporarily remove transform for debugging text rendering */
    transform: translateX(-50%); /* Keep X centering, remove Y shift for now */
    margin-bottom: 5px; /* Add margin instead of Y transform for spacing */
    
    background-color: rgba(0, 0, 0, 0.9); /* Dark, slightly transparent background like sidebar */
    color: #FFFFFF !important; /* Explicit white text, forced */
    
    padding: 4px 8px; 
    border-radius: 4px; 
    white-space: nowrap; 
    font-size: 0.8em; /* Slightly larger than original sidebar example for visibility */
    font-weight: normal; /* Reset from previous bold debugging */
    line-height: 1.3; /* Normal line height */
    
    z-index: 1051; /* Match sidebar's successful z-index */
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    text-align: center;
    
    /* Ensure text is not being hidden by other means */
    opacity: 1 !important;
    text-indent: 0 !important;
    font-variant: normal !important;
    text-transform: none !important;
    overflow: visible !important; /* Ensure text isn't clipped within the span */
    height: auto !important; /* Ensure span has height for its content */
    min-width: auto; /* Reset min-width from previous debug */
}

#chat-app .icon-with-text:hover .icon-text {
    display: block !important; 
    opacity: 1 !important; 
}