/* base.css - Base Styles and Variables */

/* Root Variables */
:root {
  /* Light theme variables */
  --bg-primary: #ffffff;
  --bg-container: #f0f8ff; /* Updated to Alice Blue for pastel theme */
  --bg-message-user: #add8e6; /* Light Blue */
  --bg-message-assistant: #e6ffe6; /* Light Green */
  --bg-message-tool: #ffe6e6; /* Light Red */
  --bg-message-other: #f4f4f4;
  --bg-blueprint: #fffaf0;
  --bg-debug: #f5f5f5;
  --text-primary: #333333; /* Dark Gray */
  --text-secondary: #666666; /* Medium Gray */
  --border-color: #d3d3d3; /* Light Gray */
  --button-primary: #87cefa; /* Light Sky Blue */
  --button-hover: #00bfff; /* Deep Sky Blue */
  --logout-button-bg: #87cefa; /* Light Sky Blue */
  --logout-button-hover: #00bfff; /* Deep Sky Blue */
  --logo-color: #87cefa; /* Light Sky Blue */
  --transition-duration: 0.3s;
}

/* Dark theme variables */
[data-theme-dark="true"] {
  --bg-primary: #1a1a1a;
  --bg-container: #2a2a2a;
  --bg-message-user: #333333;
  --bg-message-assistant: #3a3a3a;
  --bg-message-tool: #2f2f2f;
  --bg-message-other: #3a3a3a;
  --bg-blueprint: #2a2a2a;
  --bg-debug: #2a2a2a;
  --text-primary: #e4e4e4;
  --text-secondary: #bbbbbb;
  --border-color: #444444;
  --button-primary: #88c0d0;
  --button-hover: #81a1c1;
  --logout-button-bg: #88c0d0;
  --logout-button-hover: #81a1c1;
  --logo-color: #88c0d0;
}

/* Corporate theme variables */
[data-theme-color="corporate"] {
  --bg-primary: #2e2e2e;
  --bg-container: #3a3a3a;
  --bg-message-user: #4a4a4a;
  --bg-message-assistant: #555555;
  --bg-message-tool: #3a3a3a;
  --bg-message-other: #4a4a4a;
  --bg-blueprint: #3a3a3a;
  --bg-debug: #2e2e2e;
  --text-primary: #f0f0f0;
  --text-secondary: #cccccc;
  --border-color: #555555;
  --button-primary: #6c757d;
  --button-hover: #5a6268;
  --logout-button-bg: #6c757d;
  --logout-button-hover: #5a6268;
  --logo-color: #6c757d;
}

/* Reset and base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.container {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background-color: var(--bg-container);
  border-radius: 8px;
  overflow: hidden;
  transition: all var(--transition-duration) ease;
}

/* Sidebar Reveal Buttons */
.sidebar-reveal-btn {
    position: absolute;
    top: 20px;
    z-index: 1000;
    background-color: var(--button-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px; /* Adjusted size */
    height: 40px; /* Adjusted size */
    cursor: pointer;
    transition: background-color var(--transition-duration) ease;
    font-size: 1em; /* Adjusted font size */
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-hide-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--button-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 30px; /* Adjusted size */
    height: 30px; /* Adjusted size */
    cursor: pointer;
    transition: background-color var(--transition-duration) ease;
    font-size: 0.75em; /* Adjusted font size */
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Settings Sidebar (Right) */
.options-pane {
  background-color: var(--bg-debug);
  border: 2px solid var(--border-color); /* Thicker border */
  border-radius: 8px;
  padding: 15px;
  overflow-y: auto;
  flex: 1;
  position: relative;
}

/* Resizable Divider */
.resizable-divider {
    width: 5px;
    cursor: col-resize;
    background-color: transparent;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1001;
}

/* Ensure that the arrows inside the sidebar toggle buttons are centered */
.sidebar-reveal-btn::before,
.sidebar-hide-btn::before {
    content: attr(aria-label);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* New Chat Button Styles (if applicable) */
/*.new-chat-button {
    background-color: var(--button-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px; 
    height: 40px; 
    cursor: pointer;
    transition: background-color var(--transition-duration) ease;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.new-chat-button:hover {
    background-color: var(--button-hover);
}*/

/* Ensure the splash screen doesn't persist */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity var(--transition-duration) ease, visibility var(--transition-duration) ease;
}

.splash-screen.fade-out {
    opacity: 0;
    visibility: hidden;
}

/* Additional Styles for Buttons and Inputs */
.form-container {
    display: flex;
    align-items: center;
    padding: 10px;
    border-top: 2px solid var(--border-color); /* Thicker border */
    position: relative;
}

.input-button.upload-button {
    background-color: var(--button-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: background-color var(--transition-duration) ease;
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-button.upload-button:hover {
    background-color: var(--button-hover);
}

/* Adjust input field and buttons */
#userInput {
    flex: 1;
    padding: 10px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    font-size: 1em;
    margin: 0 10px;
}

#voiceRecordButton {
    background-color: var(--button-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: background-color var(--transition-duration) ease;
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
}

#voiceRecordButton:hover {
    background-color: var(--button-hover);
}

#submitButton {
    padding: 10px 20px;
    background-color: var(--button-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color var(--transition-duration) ease;
    font-size: 1em;
}

#submitButton:hover {
    background-color: var(--button-hover);
}

/* Debug Pane Styles */
.debug-pane {
  flex: 1;
  background-color: var(--bg-debug);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 15px;
  overflow-y: auto;
  display: none; /* Hidden by default */
  position: relative;
}

.debug-active-agent {
    margin-top: 10px;
    padding: 10px;
    background-color: var(--bg-container);
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-weight: bold;
}

/* Toggle Container */
.toggle-container {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Toggle Section */
.toggle-section {
  background-color: var(--bg-container);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--transition-duration) ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toggle-section:hover {
  background-color: var(--bg-message-other);
}

.toggle-section .toggle-title {
  font-size: 1.1em;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}

.toggle-section .toggle-content {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.toggle-section.active .toggle-content {
  display: flex;
}

/* Theme Dropdown */
.theme-dropdown {
  background-color: var(--bg-container);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-dropdown label {
  font-size: 1.1em;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
}

.theme-dropdown select {
  width: 100%;
  padding: 8px;
  border: 2px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: 1em;
  cursor: pointer;
}

/* Advanced Section */
.advanced-section {
  background-color: var(--bg-container);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.advanced-section h3 {
  font-size: 1em;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Logout Container */
.logout-container {
    padding-top: 10px;
    border-top: 2px solid var(--border-color);
    text-align: center;
    position: absolute;
    bottom: 20px;
    width: 90%;
}

/* Responsive Design for Very Small Screens */
@media (max-width: 600px) {
    .container {
        flex-direction: column;
        height: auto;
    }

    .chat-pane {
        /* margin: 0 0 20px 0; */
        flex: 2;
    }

    .side-panes {
        flex-direction: row;
        max-width: 100%;
        /* gap: 10px; */
    }

    /* Adjust toggle buttons position */
    .sidebar-reveal-btn {
        /* top: 20px;
        left: 20px; */
        right: auto;
    }

    /* Adjust theme toggle button for small screens */
    .theme-toggle {
        margin-bottom: 15px;
    }

    /* Adjust input buttons for small screens */
    .input-button.upload-button {
        width: 30px;
        height: 30px;
        position: absolute;
        left: 5px;
    }

    #voiceRecordButton {
        margin-left: 5px;
    }

    #submitButton {
        margin-left: 5px;
    }

    /* Hide pulsating loader and show text in mobile */
    #loadingIndicator .loader {
        display: none;
    }

    #loadingIndicator p {
        display: block;
        font-size: 1em;
        color: var(--text-primary);
    }

    /* Adjust Logout Container */
    .logout-container {
        bottom: 10px;
        width: 80%;
    }
}

/* Icon Styles */
.icon {
  font-size: 1.2em;
}

.message.tool {
    display: none !important;
}

.message.assistant:has(.message-text p:contains("No content")) {
    display: none !important;
}
