@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap");

/* Variables for dark theme (Gemini-like) */
:root {
    --bg-color: #131314; /* Very dark background */
    --main-bg-color: #1e1f20; /* Main content background */
    --border-color: #3c4043; /* Subtle border color */
    --text-color: #e8eaed; /* Light text for dark mode */
    --text-secondary-color: #9aa0a6; /* Softer gray secondary text */
    --brand-color: #8ab4f8; /* Google-esque blue accent */
    --icon-color: #bdc1c6; /* Light gray icons */
    --hover-color: #2f3032; /* Subtle hover effect */
    --active-chat-bg: #2f3032; /* Active chat background */
    --active-chat-text-color: #e8eaed; /* Active chat text color */
    --chat-gradient-color-1: rgba(30, 31, 32, 0); /* Gradient start for chat scroll */
    --chat-gradient-color-2: #1e1f20; /* Gradient end for chat scroll */

    /* Variables for error messages (Dark Mode) */
    --error-bg-color: #3b1c1c;
    --error-text-color: #ff9191;
    --error-border-color: #ff9191;
}

/* Variables for light theme (Gemini-like) */
.light_mode {
    --bg-color: #f8f9fa; /* Very light background */
    --main-bg-color: #ffffff; /* Pure white main content background */
    --border-color: #dadce0; /* Light border color */
    --text-color: #202124; /* Dark text for light mode */
    --text-secondary-color: #5f6368; /* Medium gray secondary text */
    --brand-color: #1a73e8; /* Vibrant Google blue accent */
    --icon-color: #70757a; /* Medium gray icons */
    --hover-color: #e8eaed; /* Very light hover effect */
    --active-chat-bg: #e8eaed; /* Active chat background */
    --active-chat-text-color: #202124; /* Active chat text color */
    --chat-gradient-color-1: rgba(255, 255, 255, 0); /* Gradient start for chat scroll */
    --chat-gradient-color-2: #ffffff; /* Gradient end for chat scroll */

    /* Variables for error messages (Light Mode) */
    --error-bg-color: #fce8e6;
    --error-text-color: #c5221f;
    --error-border-color: #c5221f;
}

/* Base styles */
html {
    height: 100%; /* Ensure html takes full height */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Open Sans", sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    height: 100%; /* Changed from 100vh to 100% for mobile compatibility */
    overflow: hidden; /* Hide main scrollbar */
}

.container {
    display: flex;
    width: 100%;
    height: 100%;
}

/* Sidebar styles (Default for desktop) */
.sidebar {
    width: 260px; /* Default desktop width */
    min-width: 200px;
    max-width: 400px;
    background-color: var(--main-bg-color);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    position: relative;
}

.sidebar__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
}

.sidebar__logo img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* Add or update for logo text styling */
.gemini-sidebar__logo-text {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brand-color);
  margin-left: 12px;
  letter-spacing: 0.04em;
  user-select: none;
  text-shadow: 0 1px 8px rgba(138,180,248,0.12);
  display: inline-block;
  vertical-align: middle;
}

.sidebar__search {
    display: flex;
    align-items: center;
    background-color: var(--main-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 30px; /* Changed from 24px to 30px for a pill shape */
    padding: 0.5rem;
    margin-bottom: 1rem;
}

.sidebar__search-input {
    display: flex;
    align-items: center;
    width: 100%;
}

.sidebar__search-button {
    background: none;
    border: none;
    color: var(--icon-color);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 30px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.sidebar__search-button:hover {
    background-color: var(--hover-color);
    color: var(--text-color);
}

.sidebar__search-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--main-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 30px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 10;
}

.sidebar__search-results-list {
    list-style: none;
    padding: 0.5rem;
    margin: 0;
}

.sidebar__search input {
    flex-grow: 1;
    background: none;
    border: none;
    color: var(--text-color);
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1rem;
    font-family: inherit;
    outline: none;
}

/* Style for the COL AI text in the sidebar */
.sidebar__logo-text {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-color);
    text-align: center;
    padding: 0.5rem 0.5rem 1rem;
    text-shadow: 0 0 5px rgba(138, 180, 248, 0.3);
}
.light_mode .sidebar__logo-text {
    text-shadow: 0 0 5px rgba(26, 115, 232, 0.2);
}

.sidebar__header {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.sidebar__new-chat {
    width: 100%;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 30px;
    color: var(--text-color);
    padding: 0.75rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.sidebar__new-chat:hover {
    background-color: var(--hover-color);
}

.sidebar__new-chat i {
    font-size: 1.25rem;
    color: var(--icon-color);
}

.sidebar__chats {
    flex-grow: 1;
    padding-top: 0.5rem;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sidebar__chats::-webkit-scrollbar {
    display: none;
}

.sidebar__chat-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.5rem;
    border-radius: 30px;
    margin-bottom: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
    padding-right: 2.5rem; /* Space for buttons */
}

.sidebar__chat-item:hover {
    background-color: var(--hover-color);
}

.sidebar__chat-item.active {
    background-color: var(--active-chat-bg);
    color: var(--active-chat-text-color);
}

.sidebar__chat-item i {
    font-size: 1.25rem;
    color: var(--icon-color);
}

.sidebar__chat-item.active i {
    color: var(--active-chat-text-color);
}

.sidebar__chat-item-title {
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 2.5rem;
}

.sidebar__chat-delete {
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--icon-color);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 30px;
  z-index: 1;
  display: none; /* Hide by default */
}

.gemini-sidebar__chat-item:hover .sidebar__chat-delete {
  display: block; /* Show on hover */
}

/* Add to your CSS for chat rename icon and input */
.gemini-sidebar__chat-item {
  position: relative;
}

.gemini-sidebar__chat-rename {
  position: absolute;
  right: 2.2rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--icon-color);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 30px;
  z-index: 1;
  display: none;
  box-shadow: none;
}

/* Show pencil on hover */
.gemini-sidebar__chat-item:hover .gemini-sidebar__chat-rename {
  display: block;
}

/* All sidebar chat buttons: blue on hover */
.gemini-sidebar__chat-rename:hover,
.sidebar__chat-delete:hover {
  background: none;
  color: var(--brand-color);
}

/* Hide both buttons while editing chat name */
.gemini-sidebar__chat-item.editing .gemini-sidebar__chat-rename,
.gemini-sidebar__chat-item.editing .sidebar__chat-delete {
  display: none !important;
}

.sidebar__footer {
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.sidebar__footer-button {
    width: 100%;
    background: none;
    border: none;
    color: var(--text-color);
    padding: 0.75rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.0rem;
    cursor: pointer;
    border-radius: 30px;
    transition: background-color 0.2s ease;
}

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

.sidebar__footer-button i {
    font-size: 1.25rem;
    color: var(--icon-color);
}

/* Gemini-style Sidebar using root color variables */
.gemini-sidebar {
    width: 280px;
    background: var(--main-bg-color);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    box-shadow: 1px 0 8px 0 rgba(0,0,0,0.03);
    min-height: 100vh;
}

.gemini-sidebar__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 8px;
}

.gemini-sidebar__logo-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.gemini-sidebar__new-chat {
    margin: 16px 16px 8px 16px;
    padding: 10px 18px;
    background: var(--hover-color);
    color: var(--brand-color);
    border: none;
    border-radius: 30px;
    font-weight: 500;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.gemini-sidebar__new-chat:hover {
    background: var(--brand-color);
    color: #fff;
}

/* New Chat Circle Button */
.gemini-sidebar__new-chat-circle {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 30px;
  background: var(--hover-color);
  color: var(--brand-color);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  box-shadow: none;
  padding: 0;
}
.gemini-sidebar__new-chat-circle:hover {
  background: var(--brand-color);
  color: #fff;
}

/* Search box next to new chat button */
.gemini-sidebar__search {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  background: var(--main-bg-color);
  border: 1px solid var(--border-color);
  border-radius: 30px;
  padding: 0 10px;
  height: 44px;
  margin-left: 0;
  box-sizing: border-box;
}
.gemini-sidebar__search-input {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text-color);
  font-size: 1rem;
  outline: none;
  padding: 0 8px;
  height: 40px;
  box-sizing: border-box;
}
.gemini-sidebar__search-btn {
  background: none;
  border: none;
  color: var(--icon-color);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 30px;
  transition: background 0.18s, color 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Make sure the header doesn't overflow the sidebar */
.gemini-sidebar__header {
  max-width: 100%;
  overflow: hidden;
}

/* Optional: On very small sidebars, shrink search input font */
@media (max-width: 400px) {
  .gemini-sidebar__search-input {
    font-size: 0.95rem;
  }
}

.gemini-sidebar__chats {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px;
    margin-bottom: 8px;
}

.gemini-sidebar__chat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 30px;
    color: var(--text-color);
    text-decoration: none;
    font-size: 15px;
    margin-bottom: 4px;
    transition: background 0.18s, color 0.18s;
    position: relative;
    padding-right: 2.5rem; /* Space for buttons */
}
.gemini-sidebar__chat-item:hover,
.gemini-sidebar__chat-item.active {
    background: var(--hover-color);
    color: var(--brand-color);
}

.gemini-sidebar__footer {
  display: flex;
  align-items: center;
  padding: 12px 0 12px 16px;
  border-top: 1px solid var(--border-color);
  background: var(--main-bg-color);
}

.gemini-sidebar__footer-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--icon-color);
  font-size: 18px;
  padding: 8px 16px 8px 8px;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  min-width: 0;
  min-height: 0;
  justify-content: flex-start;
}

.gemini-sidebar__footer-btn:hover {
  background: var(--hover-color);
  color: var(--brand-color);
}

.gemini-sidebar__footer-btn i {
  font-size: 22px;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Main chat area styles */
.chat-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--main-bg-color);
    position: relative;
    overflow: hidden;
}

.chats {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 1rem 0;
    scroll-behavior: smooth;
    padding-bottom: 120px;
    display: flex; /* Makes .chats a flex container */
    flex-direction: column; /* Stacks messages vertically */
    /* REMOVED: align-items: flex-start;  - relying on margin:auto on children */
}

/* Base message container adjustments */
.message {
    margin-bottom: 0.75rem; /* Spacing between message rows/bubbles */
    /* Using margin-bottom for spacing between message rows, and margin:auto for side alignment */
    padding: 0 1rem; /* Horizontal padding for the entire message row */
    display: flex; /* Makes direct children (avatar, bubble, icon) flex items */
    gap: 10px; /* Space between avatar/icon and message bubble - adjusted to 10px from 1rem */
    align-items: flex-end; /* Aligns avatar and bubble to their bottoms */
    width: 100%; /* Ensure message row spans full width */
    max-width: 75%; /* ADDED: Limits the width of the message bubble */
}

.message:last-child {
    margin-bottom: 0; /* No margin after the last message */
}

/* Adjust avatar size and position */
.message__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0; /* Prevent shrinking */
}

/* The actual chat bubble for text content */
.message__bubble {
    /* max-width: 70%; MOVED to .message */
    padding: 0.75rem 1rem; /* Padding inside the bubble */
    border-radius: 30px; /* Default rounded corners for bubbles */
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    flex-shrink: 1;
    /* IMPORTANT: No flex-grow: 1 here. This allows the parent .message to justify its content. */
}

/* Styles for outgoing (user) messages */
.message--outgoing {
    flex-direction: row-reverse; /* Puts bubble on the right of icon/avatar */
    align-self: flex-end; /* Pushes the entire message div to the right within its parent */
    margin-left: auto; /* ADDED: Pushes the entire block to the right */
    /* REMOVED: justify-content: flex-end; */
}

.message--outgoing .message__bubble {
    background-color: #2f3032; /* User-requested color for outgoing (dark mode) */
    color: var(--text-color); /* Explicitly set text color for outgoing */
    border-radius: 30px 30px 2px 30px; /* Chat bubble shape (top-left, top-right, bottom-right, bottom-left) */
}
.light_mode .message--outgoing .message__bubble {
    background-color: #E6EEF5; /* A light blue/gray for light mode outgoing bubbles */
    color: var(--text-color); /* Explicitly set text color for outgoing in light mode */
}

/* Styles for incoming (AI) messages */
.message--incoming {
    flex-direction: row; /* Default: avatar on the left, bubble on the right of avatar */
    align-self: flex-start; /* Pushes the entire message div to the left within its parent */
    margin-right: auto; /* ADDED: Pushes the entire block to the left */
    /* REMOVED: justify-content: flex-start; */
}

.message--incoming .message__bubble {
    background-color: var(--main-bg-color); /* AI bubble color */
    color: var(--text-color); /* AI text color */
    border-radius: 30px 30px 30px 2px; /* Chat bubble shape (top-left, top-right, bottom-left, bottom-right) */
}


.fade-in-word {
    opacity: 0;
    animation: fadeIn 0.3s forwards;
    display: inline-block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.message--incoming .message__loading-indicator {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: var(--text-color);
    animation: blink 1s infinite steps(1);
    margin-left: 10px;
    vertical-align: middle;
}

.message--incoming .message__loading-indicator.hide {
    display: none;
}

@keyframes blink {
    0%, 25% { /* First dot appears */
        box-shadow: 7px 0 0 var(--text-color), 14px 0 0 transparent;
    }
    50%, 75% { /* Second dot appears */
        box-shadow: 7px 0 0 var(--text-color), 14px 0 0 var(--text-color);
    }
    100% { /* All dots are visible, then loops */
        box-shadow: 7px 0 0 var(--text-color), 14px 0 0 var(--text-color);
    }
}


/* Adjust message__icon (copy button) positioning */
.message__icon {
    font-size: 1rem;
    padding: 0.2rem;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px; /* Slight rounding for hover effect */
    transition: all 0.2s ease;
    flex-shrink: 0; /* Prevent from shrinking within .message flex */
    align-self: flex-end; /* ADDED: Align icon to the bottom of the bubble */
}

.message__icon:hover {
    background-color: rgba(0,0,0,0.2);
    color: var(--text-color);
}

.message--outgoing .message__icon {
    margin-right: 5px; /* Adjusted from 0.5rem to 5px */
    margin-left: 0; /* Ensures no conflicting left margin */
}

.message--incoming .message__icon {
    margin-left: 5px; /* Adjusted from 0.5rem to 5px */
    margin-right: 0; /* Ensures no conflicting right margin */
}

.message__icon.hide {
    display: none;
}

/* Error message styling adjustments */
.message--error {
    flex-direction: row; /* Error messages should always align left by default */
    justify-content: center; /* Center the error message bubble itself within the row */
    align-items: center; /* Align content vertically within the error row */
    margin-left: 0;
    margin-right: 0;
    padding: 0 1rem;
}
.message--error .message__avatar {
    display: none;
}
.message--error .message__bubble { /* Apply error styles to the bubble itself */
    background-color: var(--error-bg-color);
    color: var(--error-text-color);
    border: 1px solid var(--error-border-color);
    border-radius: 30px; /* Standard rounded corners for error box, overrides bubble radius */
    padding: 1rem;
    max-width: 90%; /* Allow error message to be wider */
    display: block; /* Override flex if it was a flex container before */
}
.message--error .message__text {
    color: inherit;
}
.message--error .message__loading-indicator,
.message--error .message__icon {
    display: none;
}


/* Code block styling */
.message__text pre {
    background-color: #282c34;
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    position: relative;
    margin-top: 1rem;
    font-size: 0.9em;
}

.message__text pre code {
    color: #abb2bf;
    display: block;
    white-space: pre-wrap;
    word-break: break-all;
}

.code__language-label {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    color: #9da5b4;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.2rem 0.5rem;
    border-radius: 30px;
}

.code__copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 6.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #abb2bf;
    padding: 0.3rem 0.6rem;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.code__copy-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Suggests styles */
.suggests {
    position: sticky;
    bottom: 120px;
    left: 0;
    width: 100%;
    padding: 1rem;
    text-align: center;
    background: linear-gradient(
        to top,
        var(--chat-gradient-color-2) 65%,
        var(--chat-gradient-color-1)
    );
    z-index: 5;
    pointer-events: none;
}

.suggests h2 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    pointer-events: auto;
    color: var(--text-secondary-color);
}

.suggests__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    max-width: 800px;
    margin: 0 auto;
}

.suggests__item {
    background-color: var(--main-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 30px;
    padding: 1rem;
    width: calc(50% - 0.5rem);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    pointer-events: auto;
}

.suggests__item:hover {
    background-color: var(--hover-color);
    border-color: var(--brand-color);
}

.suggests__item-icon {
    font-size: 1.5rem;
    color: var(--icon-color);
    margin-bottom: 0.5rem;
}

.suggests__item-text {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-color);
}

/* Prompt styles */
.prompt {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    background-color: var(--main-bg-color);
    border-top: 1px solid var(--border-color);
    z-index: 10;
}

.prompt__form {
    max-width: 800px;
    margin: 0 auto;
}

.prompt__input-wrapper {
    display: flex;
    align-items: center;
    background-color: var(--main-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 30px; /* MODIFIED: Changed from 24px to 30px for a pill shape */
    padding: 0.5rem;
    position: relative;
}

.prompt__form-input {
    flex-grow: 1;
    background: none;
    border: none;
    color: var(--text-color);
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1rem;
    font-family: inherit;
    resize: none;
    height: 44px; /* Fixed height for single line (matches buttons) */
    min-height: 44px; /* Ensures it doesn't shrink below this */
    max-height: 200px;
    overflow-y: hidden; /* Default to hidden; JS will manage */
    outline: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    line-height: 26px; /* Your desired line height */
    box-sizing: border-box; /* Crucial for height calculation consistency */
}

.prompt__form-input::-webkit-scrollbar {
    display: none;
}

.prompt__form-input::placeholder {
    color: var(--text-secondary-color);
}

.prompt__form-button {
    background: transparent;
    border: none;
    color: var(--icon-color);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 30px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
/* Add specific margin for the delete button only */
#deleteButton {
    margin-left: 0.5rem;
}


.prompt__form-button:hover {
    background-color: var(--hover-color);
    color: var(--text-color);
    opacity: 1;
}

.prompt__form-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background-color: transparent;
    color: var(--text-secondary-color);
}

.prompt__disclaim {
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    text-align: center;
    margin-top: 0.75rem;
}

/* Hide mobile menu toggle on desktop by default */
.mobile-menu-toggle {
    display: none;
}

/* Resize Handle Styles (Desktop Only) */
.resize-handle {
    width: 6px;
    cursor: ew-resize;
    background-color: var(--border-color);
    flex-shrink: 0;
    transition: background-color 0.2s ease;
    z-index: 15;
}

.resize-handle:hover {
    background-color: var(--brand-color);
}

/* Global style to prevent text selection during resizing */
body.resizing {
    user-select: none;
    cursor: ew-resize;
}

/* --- NEW STYLES FOR BUTTON WRAPPER AND OVERLAPPING --- */
.send-stop-button-wrapper {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.send-stop-button-wrapper #sendButton,
.send-stop-button-wrapper #stopButton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-left: 0;
}


/* Responsive adjustments for mobile view (max-width: 768px) */
@media (max-width: 768px) {
    /* Prevent main body from scrolling when sidebar is open */
    body.sidebar-open {
        overflow: hidden;
    }

    /* Sidebar mobile default state (hidden) */
    .sidebar {
        position: fixed;
        left: -100vw;
        top: 0;
        height: 100vh;
        width: 100vw;
        min-width: unset;
        max-width: unset;
        opacity: 0;
        pointer-events: none;
        transition: left 0.3s ease-in-out, opacity 0.3s ease-in-out;
        z-index: 9999;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
        display: flex;
        flex-direction: column;
        overflow-y: hidden;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .sidebar::-webkit-scrollbar {
        display: none;
    }

    /* Sidebar mobile open state (full screen) */
    body.sidebar-open .sidebar {
        left: 0;
        opacity: 1;
        pointer-events: auto;
        overflow-y: auto;
        z-index: 9999;
    }

    /* CRITICAL: Prevent static sidebar elements from shrinking on mobile */
    .sidebar__logo-text,
    .sidebar__header,
    .sidebar__footer {
        flex-shrink: 0;
    }

    /* Ensure sidebar__chats behaves correctly within the mobile sidebar */
    .sidebar__chats {
        flex-grow: 1;
        overflow-y: auto;
        min-height: 0;
    }

    /* Hide the resize handle on mobile */
    .resize-handle {
        display: none;
    }

    /* Adjust main chat area for mobile to make space for the menu button */
    .chat-main {
        width: 100%;
        padding-top: 60px;
        flex-grow: 1;
        overflow-y: auto;
        position: relative;
    }

    /* Reset chats padding as chat-main now has it */
    .chats {
        padding-top: 0; /* This keeps the top padding handled by chat-main */
        /* padding-bottom: 120px; <--- This value is still active from global rules, no need to override. */
    }

    /* Show and style the mobile menu toggle button */
    /* Styling for the hamburger lines */
.mobile-menu-toggle {
    /* Ensure the button itself is a flex container for its children */
    display: flex;
    flex-direction: column; /* Stack the bars vertically */
    justify-content: center; /* Center them vertically in the button */
    align-items: center; /* Center them horizontally in the button */
    width: 44px; /* Give the button a fixed size for consistent appearance */
    height: 44px; /* Give the button a fixed size for consistent appearance */
    background-color: transparent; /* Or any default background for the button */
    border: none; /* Remove default button border */
    padding: 0; /* Remove default button padding */
    position: fixed; /* Position the button */
    top: 10px; /* Adjust as needed */
    left: 10px; /* Adjust as needed */
    z-index: 10000;
    border-radius: 35px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.3s ease-in-out;
}

.mobile-menu-toggle .hamburger-bar {
    display: block; /* Make sure each span is a block-level element */
    width: 24px; /* Width of each bar */
    height: 2px; /* Height of each bar */
    background-color: var(--icon-color); /* Color of the bars */
    border-radius: 35px;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    position: relative;
    transform-origin: center; /* Important for rotation */
}

/* Add vertical spacing between the bars */
.mobile-menu-toggle .hamburger-bar:nth-child(2) {
    margin: 5px 0; /* 5px top and bottom margin for the middle bar */
}

/* Animation to 'X' when sidebar is open */
body.sidebar-open .mobile-menu-toggle {
    transform: rotate(360deg); /* Optional: Rotate the entire button */
    background-color: var(--brand-color); /* Optional: Change button background */
    border-color: var(--brand-color); /* Optional: Change button border */
}

body.sidebar-open .mobile-menu-toggle .hamburger-bar {
    background-color: var(--text-color); /* Change bar color when open */
}

body.sidebar-open .mobile-menu-toggle .hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg); /* Top bar rotates and moves down */
}

body.sidebar-open .mobile-menu-toggle .hamburger-bar:nth-child(2) {
    opacity: 0; /* Middle bar fades out */
}

body.sidebar-open .mobile-menu-toggle .hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg); /* Bottom bar rotates and moves up */
}

    /* Container should flow column for mobile */
    .container {
        flex-direction: column;
    }
    .suggests {
        bottom: 90px;
    }
    .suggests__item {
        width: 100%;
    }
}

/* Hide sidebar version pill by default */
.sidebar-version-label {
    display: none;
    margin: 24px auto 8px auto;
    background: #222;
    color: #fff;
    border-radius: 999px;
    padding: 6px 18px;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    cursor: pointer;
    width: fit-content;
}

/* On mobile, show sidebar version pill when sidebar is open, hide floating pill */
@media (max-width: 600px) {
  .sidebar-version-label {
    display: block;
  }
  .version-label--bottomright {
    display: none !important;
  }
}

/* --- CUSTOM MODAL STYLES (existing) --- */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.custom-modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.custom-modal-content {
    background-color: var(--main-bg-color);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    max-width: 400px;
    width: 90%;
    text-align: center;
    color: var(--text-color);
    transform: translateY(0);
    transition: transform 0.3s ease;
}

.custom-modal-overlay.hidden .custom-modal-content {
    transform: translateY(-20px);
}

.custom-modal-content p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.custom-modal-buttons {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.modal-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 30px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.modal-btn.cancel-btn {
    background-color: var(--hover-color);
    color: var(--text-color);
}

.modal-btn.cancel-btn:hover {
    background-color: var(--border-color);
}

.modal-btn.confirm-btn {
    background-color: var(--brand-color);
    color: white;
}
.light_mode .modal-btn.confirm-btn {
    color: white;
}

.modal-btn.confirm-btn:hover {
    opacity: 0.9;
}

/* Modal open/close animation */
.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(.4,0,.2,1);
}
.modal:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}
.modal__content {
  background: #23272e;
  border-radius: 18px;
  padding: 2.5em 2em 2em 2em;
  max-width: 400px;
  width: 90vw;
  margin: 0 auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  text-align: left;
  position: relative;
}

/* Changelog title */
#changelogModal h2 {
  text-align: center;
  margin-bottom: 1.5em;
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Changelog list */
.changelog-list {
  margin: 0 0 2.5em 0;
  padding: 0 0 0 1.2em;
  text-align: left;
  list-style: disc;
}
.changelog-list li {
  margin-bottom: 1em;
  font-size: 1.08em;
  line-height: 1.6;
}

/* Close button: blue, thick pill, full width */
#closeChangelogBtn {
  display: block;
  width: 100%;
  margin: 2em 0 0 0;
  padding: 0.75em 0;
  background: var(--brand-color, #2563eb);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 1.08em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s, padding 0.18s;
  box-shadow: none;
  letter-spacing: 0.01em;
}

#closeChangelogBtn:hover {
  background: #1a73e8; /* Slightly darker blue */
  border-radius: 999px;
  padding: 0.85em 0;
}
.version-label {
    display: inline-block;
    background: #222;
    color: #fff;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.95em;
    font-weight: 500;
    position: fixed;
    bottom: 20px;
    right: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    cursor: pointer;
    white-space: nowrap;
    min-width: 0;
    width: auto;
    line-height: 1.3;
}

.version-label--bottom {
    position: fixed;
    top: unset;
    right: 8px;
    left: unset;
    bottom: 8px;
    transform: none;
    width: auto;
    background: #222;
    color: #fff;
    padding: 6px 16px;
    border-radius: 16px;
    font-size: 1rem;
    z-index: 1000;
    opacity: 0.95;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    pointer-events: none;
    letter-spacing: 0.04em;
    user-select: none;
    text-align: center;
}

/* Default: bottom right */
.version-label--bottomright {
    position: fixed;
    bottom: 18px;
    right: 24px;
    background: #222;
    color: #fff;
    padding: 6px 16px;
    border-radius: 16px;
    font-size: 1rem;
    z-index: 1000;
    opacity: 0.95;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    pointer-events: auto;
    letter-spacing: 0.04em;
    user-select: none;
    text-align: center;
    cursor: pointer;
    transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
}
.version-label--bottomright:hover {
    background: #444;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    transform: scale(1.06);
}

/* On mobile: top right */
@media (max-width: 600px) {
  .version-label--bottomright {
    top: 18px;
    bottom: auto;
    right: 16px;
    left: auto;
    z-index: 2001;
  }
}

.hidden-visibility {
  display: none !important;
}