:root {
    --bg-primary: #171717;
    --bg-secondary: #212121;
    --bg-tertiary: #303030;
    --bg-tertiary1: #2e2e2e;
    --bg-tertiary2: #353535;
    --bg-black: #000000;
    --border-color: #ffffff1a;
    --text-primary: #e0e0e0;
    --text-primary-white: #ffffff;
    --text-secondary: #a0a0a0;
    --text-tertiary: #d1d1d1;
    --accent-color: #2c3e50; /* A professional blue */
    --a-accent-color: #7ab7ff; /* A professional blue */
    --ah-accent-color: #5e83b3; /* A professional blue */
    --search-bg: #353d46;
    --search-bg-text: #99ceff;
    --search-bg-btn: #394a5b;
    --search-bg-btn-hover: #425365;
    --danger-color: #4d3334;
    --danger-color-text: #d28a8e;
    --accent-text-color: #82c9ff; /* A professional blue */
    --font-body: 'Poppins', sans-serif;
    --font-heading: 'Poppins', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    font-family:'Poppins', sans-serif;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-width: 0.5px !important;
}
:focus-visible {
  outline: 2px solid #4A90E2; /* light custom outline */
  outline-offset: 2px;
  border-radius: 6px;         /* adds radius if element has none */
}
::selection {
  color: black;
  background: white;
}
/* ========================================================================= */
/* ✨ THE DEFINITIVE FIX FOR ALL HORIZONTAL OVERFLOW BUGS ✨                  */
/* This prevents the entire page from ever scrolling sideways.              */
/* ========================================================================= */
html,
body {
    overflow-x: hidden;
}

body {
    font-family:'Poppins', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
}
/* ========================================================================= */
/* End of the fix.                                                           */
/* ========================================================================= */

/* --- Web Result Section Fade-In Animation --- */
.web-result-section {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInSection 0.5s ease-out forwards;
}

@keyframes fadeInSection {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Custom Scrollbar for Dark Theme - Auto Match BG */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent; /* Inherits background from the parent */
}

::-webkit-scrollbar-thumb {
    background: #333; /* Dark thumb */
    border-radius: 10px;
    border: 2px solid transparent; /* Makes thumb blend smoother */
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Firefox support */
* {
    scrollbar-width: thin;
    scrollbar-color: #333 transparent; /* Thumb | Track */
}


/* --- App Layout --- */
.app-layout {
    display: flex;
    height: 100vh;
}

/* --- Sidebar --- */
.sidebar {
    width: 260px;
    background-color: var(--bg-primary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: margin-left 0.3s ease-in-out;
}

.sidebar-header {
    padding: 1rem;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    
    display: flex;          /* changed from block to flex for icon + text */
    align-items: center;    /* vertical alignment */
    gap: 12px;              /* space between icon and text */
    margin-bottom: 1rem;
}

.sidebar-logo img {
    width: 40px;   /* icon width */
    height: 40px;  /* icon height */
}


.btn-new-chat {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    font-size: .9rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color .2s ease;
}

.btn-new-chat:hover {
    background-color: var(--text-primary);
    color: #000;
}

.btn-new-chat ion-icon {
    font-size: 1.2rem;
}

.chat-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: .5rem;
}

/* --- ✨ CHANGE: Z-index fix for dropdown --- */
.chat-list-item {
    position: relative; /* Make it a positioning context */
    display: flex; /* Use flexbox for layout */
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: 10px;
    margin-bottom: .25rem;
    cursor: pointer;
    transition: background-color .2s ease;
    color: var(--text-secondary);
    text-decoration: none;
}
.chat-list-item-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1; /* Allow text to take available space */
    padding-right: 10px; /* Space between text and button */
}
/* --- End Change --- */

.chat-list-item.active,
.chat-list-item:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* --- Chat List Item Actions --- */
.chat-item-actions {
    position: relative; /* Context for its own dropdown */
    flex-shrink: 0; /* Prevent button from shrinking */
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.chat-list-item:hover .chat-item-actions,
.chat-list-item.active .chat-item-actions {
    opacity: 1;
    visibility: visible;
}

.btn-ellipsis {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 17px;
    cursor: pointer;
    padding: 4px;
    border-radius: 35%;
    display: flex;
    align-items: center;
}

.btn-ellipsis:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.chat-actions-dropdown {
    position: absolute;
    right: -11px;
    top: 100%;
    margin-top: 7.5px;
    background-color: var(--bg-tertiary1);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    z-index: 101;
    min-width: 150px;
    opacity: 0;
    transform: scale(0.97) translateY(6px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    display: flex;
    flex-direction: column;
    padding: 0.2rem; /* Less outer spacing */
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

/* Show dropdown */
.chat-actions-dropdown.open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

/* All buttons styling */
.chat-action-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: none;
    background-color: transparent;
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 8px;
    position: relative; /* needed for pseudo-element */
}

/* Spacing and divider line between buttons */
.chat-action-button + .chat-action-button {
    margin-top: 6px; /* reduced vertical gap */
    position: relative;
}

.chat-action-button + .chat-action-button::before {
    content: "";
    position: absolute;
    top: -3.5px;         /* half of margin-top */
    left: 5px;        /* left padding of divider */
    right: 5px;       /* right padding of divider */
    height: 1px;
    background-color: var(--border-color);
    width: auto;       /* width set by left & right */
    border-radius: 25px;
}

/* Hover effect */
.chat-action-button:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* First button: slightly more rounded bottom */
.chat-action-button:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* Last button: slightly more rounded top */
.chat-action-button:last-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Delete or special button example */
.chat-action-button.delete:hover {
    background-color: var(--danger-color);
    color: var(--danger-color-text);
}


/* --- I replaced the old .sidebar-footer and .user-profile styles with these new ones. --- */

.sidebar-footer {
    padding: 0.75rem;
    border-top: 1px solid var(--border-color);
    position: relative; 
}

#user-profile-trigger {
    display: flex;
    align-items: center;
    gap: .75rem;
    overflow: hidden;
    padding: 0.5rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .2s ease;
}

#user-profile-trigger:hover {
    background-color: var(--bg-secondary);
}

#user-profile-trigger #user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--bg-tertiary);
    flex-shrink: 0;
}

#user-profile-trigger #user-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .9rem;
    flex-grow: 1;
}

.profile-ellipsis-icon {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-left: auto;
    flex-shrink: 0;
    transition: color .2s;
}

#user-profile-trigger:hover .profile-ellipsis-icon {
    color: var(--text-primary);
}

/* Hide the old, separate logout button */
#logout-btn {
    display: none;
}

/* --- New User Menu Styles --- */
.user-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0.75rem;
    right: 0.75rem;
    background-color: var(--bg-tertiary1);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    z-index: 102;
    box-shadow: 0 5px 20px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    
    opacity: 0;
    transform: scale(0.95) translateY(10px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform-origin: bottom center;
}

.user-menu.open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.user-menu-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
}

#user-menu-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.user-menu-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

#user-menu-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#user-menu-email {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-tertiary);
    font-size: 0.9rem;
    transition: background-color 0.2s, color 0.2s;
}

.user-menu-item:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.user-menu-item ion-icon {
    font-size: 1.2rem;
    color: var(--text-secondary);
    transition: color 0.2s;
}
.user-menu-item:hover ion-icon {
    color: var(--text-primary);
}

.user-menu-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}
.btn-user-menu-logout ion-icon{
    font-size: 1.2rem;
}
.btn-user-menu-logout {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.2s;
    padding: 0.2rem 0.2rem 0.1rem 0.090rem;
    margin-left: -0.1px;
}

.btn-user-menu-logout:hover {
    color: var(--danger-color-text);
}

.app-version {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.btn-icon {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: 35%;
    transition: background-color 0.2s, color 0.2s;
}

.btn-icon:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-icon ion-icon {
    font-size: 1.5rem;
}

/* --- Main Chat Area --- */
.chat-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-secondary);
    min-width: 0;
    position: relative; /* Context for new buttons */
}

.chat-header {
    display: none;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    z-index: 10;
    flex-shrink: 0;
}

.chat-header h2 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 500;
}
/* Placed after the .chat-header h2 rule in style.css */

/* --- Welcome Screen --- */
.chat-window.is-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 20px 20px;
}

.welcome-wrapper {
    text-align: center;
    padding: 2rem;
    max-width: 550px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem; /* Space between logo and text */
}

.welcome-message {
    line-height: 1.7;
}

/* Style for the single welcome paragraph */
.welcome-message p {
    font-size: 1.4rem; 
    color: var(--text-primary);
    font-weight: 400;
}

/* The animated "Machan AI" text inside the paragraph */
.animated-logo-text {
    font-weight: 500;
    display: inline-block; /* Important for gradient to apply correctly */
    background: linear-gradient( 120deg, #f0f0f0, #bfbfbf, #8c8c8c, #5a5a5a, #bfbfbf, #f0f0f0 );
    background-size: 300% 300%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 6s ease infinite;
    transition: none;
}

/* The rainbow version */
.animated-logo-text.rainbow-gradient {
    background: linear-gradient( 120deg, #ff0047 0%, #ff7f00 16.6%, #fffd00 33.3%, #00b140 50%, #004cff 66.6%, #6a00ff 83.3%, #d400ff 100% );
    background-size: 300% 300%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 6s ease infinite;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}

/* Keyframes for the animation */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.conversation-wrapper {
    position: relative; /* Added to be a positioning context for the scroll button */
    width: 100%;
    max-width: 840px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
}

#conversation-wrapper { /* Use the ID for specificity */
    /* This will animate the slide-down effect. */
    transition: padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.conversation-wrapper.is-loading {
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

.conversation-wrapper.is-empty-chat {
    justify-content: center;
    padding-bottom: 10vh; 
    background-color: var();
}

.conversation-wrapper.is-empty-chat .chat-window {
    flex-grow: 0;
    padding: 0;
    overflow: hidden;
}

/* Base rule for the welcome wrapper to set up its animation. */
.welcome-wrapper {
    /* These properties will be animated when the element disappears. */
    transition: opacity 0.3s ease-out, max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.conversation-wrapper.is-empty-chat .welcome-wrapper {
    /* This is the visible state of the welcome message. */
    opacity: 1;
    max-height: 200px; /* Give it space to be visible. */
    padding-bottom: 2rem;
    padding-top: 0;
}

.conversation-wrapper.is-empty-chat .chat-input-zone {
    flex-shrink: 0;
}

.conversation-wrapper.is-empty-chat .btn-scroll-bottom {
    display: none;
}
/* --- ✨ CHANGE: Centered & Dynamic Scroll Button --- */
.btn-scroll-bottom {
    position: absolute;
    /* The `bottom` value is now set by JavaScript */
    left: 50%; /* Center horizontally */
    z-index: 50;
    
    opacity: 0;
    /* Combine transforms for centering and animation */
    transform: translateX(-50%) translateY(10px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, bottom 0.2s ease-out; /* Add transition for bottom */
    
    /* Re-using styles from btn-icon */
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-scroll-bottom.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.btn-scroll-bottom:hover {
    background-color: var(--bg-tertiary1);
}

.btn-scroll-bottom ion-icon {
    font-size: 1.4rem;
}

.chat-window {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.chat-input-zone {
    flex-shrink: 0;
    padding: 1rem;
    width: 100%;
}

.chat-message {
    display: flex;
    flex-direction: column; /* CHANGE: Stack bubble and actions vertically */
    gap: 0.5rem; /* Reduced gap for a tighter look */
    max-width: 85%;
    min-width: 0;
}

.userchat {
    align-self: flex-end;
    align-items: flex-end;
}

.aichat {
    align-self: flex-start;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
}

.message-bubble {
    padding: 0.75rem 1.25rem;
    border-radius: 22px;
    line-height: 1.6;
    font-size: 1rem;
    width: fit-content; /* Let the bubble size to its content */
    max-width: 100%;
    /* width: 100%; */
    overflow-wrap: break-word;
    word-break: break-word;
}

.userchat .message-bubble {
    background-color: var(--bg-tertiary1);
    color: #fff;
    padding: 8px 13px !important;
}

.aichat .message-bubble {
    /* background-color: var(--bg-primary); */
    border-bottom-left-radius: 4px;
    padding: 0; /* Remove padding */
}


/* --- ✨ NEW: Message Action Buttons --- */
.message-actions {
    display: flex;
    align-items: center;
    gap: .25rem; /* Tighter gap for icon buttons */
    /* padding: 0 0.5rem; */
}

.userchat .message-actions {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.chat-message.userchat:hover .message-actions {
    opacity: 1;
}

.btn-message-action {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 28px;
    height: 28px;
    border-radius: 35%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-message-action:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-message-action ion-icon {
    font-size: 1.1rem;
}

/* ========================================================================= */
/* ✨ START OF THE STATIONARY COPY BUTTON FIX ✨                              */
/* ========================================================================= */

/* 1. The new wrapper: It becomes the positioning anchor. */
.code-block-wrapper {
    position: relative;
    margin: 0.5rem 0;
    /* Keeps the original spacing of the <pre> tag */
}

/* 2. The header containing the button is positioned absolutely to the wrapper. */
.code-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    /* We removed the 'border-bottom' from here... */
}

/* ...and replaced it with this pseudo-element to create the gaps. */
.code-header::after {
    content: ''; /* Pseudo-elements must have a content property */
    position: absolute;
    bottom: 0; /* Position it at the very bottom of the header */
    height: 1px; /* This is our border's thickness */
    background-color: var(--border-color); /* This is our border's color */

    /* THIS IS THE TRICK: Create the gaps on the left and right */
    left: 1rem;  /* The size of the gap on the left */
    right: 1rem; /* The size of the gap on the right */
}
.code-lang-name {
    font-family: "Google Sans Code", monospace;
    font-size: 0.75rem; /* Slightly smaller for a tag look */
    color: var(--text-tertiary);
    background-color: var(--bg-tertiary); /* Subtle background */
    padding: 0.2rem 0.6rem; /* Padding to create the pill shape */
    border-radius: 6px; /* Rounded corners for the tag */
    text-transform: uppercase; /* e.g., JAVASCRIPT */
    font-weight: 600;
    letter-spacing: 0.5px;
}

.copy-code-btn {
    background: #2a2a2a;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 4px 8px;
    font-size: .75rem;
    border-radius: 10px;
    cursor: pointer;
    opacity: 0.7;
    transition: all .2s;
}

.copy-code-btn:hover {
    opacity: 1;
    background-color: var(--bg-tertiary);
}

.copy-code-btn.copied {
    background-color: #28a745;
    color: #fff;
}
/* --- ✨ NEW: Simplified & Professional Table Styling --- */
.message-bubble .table-wrapper {
    position: relative; /* For positioning the copy button header */
    margin: 1rem 0;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: #171717; /* Same as pre background */
    overflow: hidden; 
}

/* Header for the copy button and table name */
.message-bubble .table-header {
    position: relative; /* Needed for positioning the ::after pseudo-element */
    display: flex;
    justify-content: space-between; /* Aligns items to left and right */
    align-items: center;
    padding: 0.5rem 1rem;
    /* border-bottom: 1px solid var(--border-color); <-- REMOVED THIS LINE */
    background-color: var(--bg-secondary);
}

/* --- THIS IS THE FIX --- */
/* Create the gapped border using a pseudo-element */
.message-bubble .table-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 1px;
    background-color: var(--border-color);
    /* Create the gaps on the left and right */
    left: 1rem;  /* 16px gap on the left */
    right: 1rem; /* 16px gap on the right */
}
.message-bubble .table-name {
    font-family: "Google Sans Code", monospace;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    background-color: var(--bg-tertiary);
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}
/* Container for the two copy buttons */
.message-bubble .table-header-actions {
    display: flex;
    align-items: center; /* This vertically centers the buttons and the separator */
    gap: 5px; /* This creates the space on BOTH sides of the separator */
}

/* Base style for both copy buttons */
.message-bubble .copy-table-btn {
    background: #2a2a2a;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 4px 10px;
    font-size: .75rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all .2s;
}

.message-bubble .copy-table-btn:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* --- THIS IS THE FIX --- */
/* Style for the new separator element we will create in JS */
.message-bubble .button-separator {
    width: 1px;
    height: 20px; /* Made the line "bit more big" as requested */
    background-color: var(--border-color);
}

/* Scrollable container for the table itself */
.message-bubble .table-scroll {
    overflow-x: auto; /* This is what enables the horizontal scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #555 var(--bg-secondary);
}

.message-bubble .table-scroll::-webkit-scrollbar {
    height: 8px;
}

.message-bubble .table-scroll::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.message-bubble .table-scroll::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 10px;
}

/* Core table styles */
.message-bubble table {
    border-collapse: collapse;
    font-size: 0.9em;
}

/* --- THIS IS THE FIX --- */
.message-bubble th,
.message-bubble td {
    padding: 10px 15px;
    text-align: left;
    white-space: nowrap; /* THIS IS THE KEY: It forces all content onto one line, preventing word breaks and triggering the scrollbar when content is wide. */
    border-right: 1px solid var(--border-color); /* Vertical division lines */
}

.message-bubble th:last-child,
.message-bubble td:last-child {
    border-right: none; /* Remove last vertical line */
}

.message-bubble thead tr {
    background-color: var(--bg-secondary);
}

.message-bubble th {
    font-weight: 600;
}

.message-bubble tbody tr {
    border-top: 1px solid var(--border-color); /* Horizontal division lines */
    transition: background-color 0.2s ease;
}

.message-bubble tbody tr:hover {
    background-color: var(--bg-tertiary); /* Subtle row hover effect */
}
.message-bubble pre,
.message-bubble pre * {
    font-family: "Google Sans Code", monospace !important;
}
.message-bubble pre {
    background-color: #171717;
    padding: 1.25rem;
    padding-bottom: 0;
    padding-top: 3rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow-x: auto;
    margin: 0.5rem 0;
}

.message-bubble pre code.hljs {
    background: none; /* Ensure no background is set on the <code> tag itself */
    padding: 0;       /* The <pre> tag handles all padding */
    padding-bottom: 1rem;
}
.message-bubble pre code {
    color: #D4D4D4; /* A comfortable off-white for default text */
    font-family: "Google Sans Code", monospace !important;
    font-size: 0.9rem;
    line-height: 1.6;
    white-space: pre;
}

/* Markdown and Content Formatting */
.message-bubble p,
.message-bubble ul,
.message-bubble ol {
    margin-bottom: 0.75rem;
}

/* --- ✨ THIS IS THE FIX ✨ --- */
/* Restores the standard indentation for lists that was removed by the global reset. */
/* --- ✨ THIS IS THE FIX ✨ --- */
/* Restores a more subtle indentation for lists that was removed by the global reset. */
.message-bubble ul,
.message-bubble ol {
    padding-left: 1.1rem;
}

.message-bubble :last-child {
    margin-bottom: 0;
}

.message-bubble a {
    color: var(--a-accent-color);
    text-decoration: none;
    transition: color 0.3s ease;
    border-bottom: 1px solid transparent;
}

.message-bubble a:hover {
    text-decoration: none;
    color: var(--ah-accent-color);
}

.broken-link {
    color: var(--text-color-light); /* Or any color that looks disabled */
    cursor: not-allowed;
    text-decoration: line-through;
}
 #confirm-modal {
    display: none; /* hidden by default */
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background:  #00000065;
    z-index: 9999;
    font-family: var(--font-body);
    color: var(--text-primary);
    align-items: center;
    justify-content: center;
  }

  /* Modal content */
  #confirm-modal .modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 25px;
    padding: 20px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 0 10px #00000010;
    text-align: center;
    opacity: 0;
    transform-origin: bottom center;
    animation-fill-mode: forwards;
    animation-duration: 0.35s; /* opening duration */
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Animation for modal pop in: zoom + slide up */
  #confirm-modal.show .modal-content {
    animation-name: popUpZoomIn;
  }

  /* Animation for modal pop out: zoom out + slide down */
  #confirm-modal.hide .modal-content {
    animation-name: popDownZoomOut;
    animation-duration: 0.22s; /* faster closing */
  }

  @keyframes popUpZoomIn {
    0% {
      opacity: 0;
      transform: translateY(40px) scale(0.7);
    }
    60% {
      opacity: 1;
      transform: translateY(-10px) scale(1.05);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes popDownZoomOut {
    0% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    100% {
      opacity: 0;
      transform: translateY(40px) scale(0.7);
    }
  }

  #confirm-modal .modal-content h2 {
    font-family: var(--font-heading);
    margin-bottom: 12px;
  }

  #confirm-modal .modal-content p {
    margin-bottom: 20px;
    color: var(--text-secondary);
    font-size: 1rem;
    word-break: break-word;
    cursor: pointer;
    user-select: text;
    border-radius: 15px;
    border: 1px solid transparent;
    padding: 10px;
    transition: color 0.3s ease, border 0.3s ease, background-color 0.3s ease;
  }
  #confirm-modal .modal-content p:hover {
    background-color: var(--bg-tertiary1);
    color: var(--text-tertiary);
    border: 1px solid var(--border-color);
  }

  /* Copy feedback toast */
  #copy-feedback {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 8px 16px;
    border-radius: 20px;
    font-family: var(--font-body);
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 10000;
  }
  #copy-feedback.show {
    opacity: 1;
    pointer-events: auto;
  }

  /* Buttons */
  #confirm-modal .modal-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  #confirm-modal button {
    padding: 10px 25px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 500;
    font-size: 1rem;
    font-family: var(--font-body);
    transition: background-color 0.3s ease;
  }

  #confirm-modal button.confirm {
    background-color: var(--text-primary);
    color: var(--bg-black);
  }

  #confirm-modal button.confirm:hover {
    background-color: var(--text-secondary);
  }

  #confirm-modal button.cancel {
    background-color: var(--danger-color);
    color: var(--danger-color-text);
  }

  #confirm-modal button.cancel:hover {
    background-color: #6a4445;
  }
  
.message-bubble code:not(pre > code) {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: "Google Sans Code", monospace;
    font-size: 0.9em;
}

.message-bubble pre code {
    font-size: 0.9rem;
}

.message-bubble img {
    max-width: 100%;
    border-radius: 20px;
    margin-top: 10px;
    border: 1px solid var(--border-color);
}

.image-container {
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: 75%;
}

.image-container::after {
    content: '';
    position: absolute;
    top: 10px; 
    left: 0;
    width: 100%;
    height: calc(100% - 10px); 
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.image-overlay {
    position: absolute;
    top: 10px; 
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0.75rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.btn-download-image {
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-download-icon-wrapper {
    border: 1px solid rgba(255, 255, 255, 0.2); /* Slightly more subtle border */
    width: 38px;
    height: 38px;
    border-radius: 35%;
    background: rgba(20, 20, 20, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease-out;
}

/* ✨ FIX 1: The icon has a default, dimmer color and a transition */
.btn-download-icon-wrapper ion-icon {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.8); /* Slightly transparent white */
    transition: color 0.2s ease-out; /* Animate only the color property */
}

.btn-download-image:hover .btn-download-icon-wrapper {
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* ✨ FIX 2: On hover, the icon becomes fully white */
.btn-download-image:hover ion-icon {
    color: #ffffff; /* Full, opaque white */
}

.image-container:hover::after,
.image-container:hover .image-overlay {
    opacity: 1;
}

.image-container:hover .btn-download-image {
    transform: translateY(0);
    opacity: 1;
}

.image-caption {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 5px;
    font-style: italic;
    text-align: start;
}

.attachments-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end; /* Aligns file pills to the right within this container */
  gap: 0.5rem;
}

/* This new rule constrains the container itself for user messages */
.userchat > .attachments-container {
    width: fit-content; /* This is the key: makes the container only as wide as its content needs to be. */
    max-width: 100%;    /* Ensures that even with 'fit-content', it won't exceed the parent's width. */
}
.attachment-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 6px 5px;
  background-color: #00000033;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  text-decoration: none !important;
  color: var(--text-tertiary);
  transition: background-color 0.2s ease;
  min-width: 120px; /* default min width on desktop */
  max-width: 100%; /* prevent overflow */
  box-sizing: border-box;
}

.attachment-item:hover {
  background-color: rgba(0,0,0,0.4);
}

.attachment-item ion-icon {
    font-size: 20px;                     /* 1.25rem ≈ 20px */
    color: var(--bg-black);
    flex-shrink: 0;
    display: inline-flex;                /* center the icon */
    align-items: center;
    justify-content: center;
    width: 28px;                         /* square size */
    height: 28px;                        /* same as width */
    background-color: var(--text-primary); /* background color */
    border-radius: 4px;                  /* optional rounding */
}


.attachment-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9rem;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease, text-decoration 0.3s ease;
  max-width: 250px;
  flex-shrink: 1;
}

.attachment-name:hover {
  color: #aad7ff;
  text-decoration: underline;
}

/* Mobile responsive tweak */
@media (max-width: 600px) {
  .attachment-item {
    min-width: 90px;  /* smaller min width on mobile */
    max-width: 45%;   /* allow 2 per row max */
  }
}


/* Input Zone styles */
.typing-indicator {
    padding: 0 1rem .5rem;
    display: flex;
    align-items: center;
    font-style: italic;
    color: var(--text-secondary);
    font-size: .9rem;
}

.typing-cursor {
    display: inline-block;
    width: 8px;
    height: 1em;
    background-color: var(--text-primary);
    margin-left: 5px;
    animation: blink 1s infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

.chat-input-area {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 25px;
    padding: .5rem;
    display: flex;
    flex-direction: column;
}

/* --- ✨ NEW: File Preview Styles --- */
.file-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 0.5rem 0.5rem;
    max-height: 110px; /* approx 3 rows */
    overflow-y: auto;
}

.file-preview-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 6px 5px;
    background-color: var(--bg-primary);      /* main bg color */
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 15px;
    color: var(--text-tertiary);
    text-decoration: none !important;
    transition: background-color 0.2s ease;
    min-width: 120px;
    max-width: 100%;
    box-sizing: border-box;
}

.file-preview-item ion-icon:not([name="close-circle"]) { 
    font-size: 20px;
    color: var(--bg-black);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: var(--text-primary);
    border-radius: 4px;
}
.file-preview-item .remove-file-btn ion-icon[name="close-circle"] {
    border-left: 1px solid var(--text-secondary); /* thin border line on the left */
    padding-left: 4px;           /* space between border and icon */
}
.remove-file-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 0.25rem;
    transition: color 0.2s ease;
}

.remove-file-btn:hover {
    color: var(--text-tertiary);
}


.input-container {
    display: flex;
    align-items: flex-end;
}

#chat-input {
    flex-grow: 1;
    background: 0 0;
    border: none;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: var(--font-body);
    resize: none;
    max-height: 200px;
    outline: 0;
    padding: .5rem;
    line-height: 1.5;
}

.btn-send {
    width: 35px;
    height: 35px;
    border-radius: 50px;
    font-size: 1.2rem;
    background-color: var(--text-primary);
    color: #000;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .2s ease; /* ✨ CHANGE: Smoother transitions */
}

/* ✨ NEW: Disabled state for the send button */
.btn-send.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ✨ NEW: Style for Cancel Edit Button ✨ */
.btn-cancel-edit {
    width: 35px;
    height: 35px;
    border-radius: 50px;
    font-size: 1.5rem;
    background-color: #4a4a4a;
    color: var(--text-secondary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color .2s ease;
}
.btn-cancel-edit:hover {
    background-color: #5f5f5f;
    color: var(--text-primary);
}

.btn-send:hover {
    background-color: #c9c9c9;
}

/* --- MODIFIED: Input Layout Rules --- */
.input-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: .5rem;
    padding: 0 .25rem;
}

.main-input-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* Removed .extra-actions and .btn-icon-action styles */


/* ========================================================================= */
/* ✨ NEW STYLES FOR POPOVER AND TOGGLE BUTTON ✨                             */
/* ========================================================================= */

.input-actions-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative; /* Anchor for the popover */
}

.btn-actions-toggle {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s, color 0.2s;
}

.btn-actions-toggle ion-icon {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.btn-actions-toggle.open ion-icon {
    transform: rotate(45deg);
}

.btn-actions-toggle:hover {
    background-color: rgba(255, 255, 255, 0.16);
    color: var(--text-primary);
}

.actions-popover {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    z-index: 99;
    background: var(--bg-tertiary1);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 6px; /* Increased padding for small inner spacing */
    opacity: 0;
    transform: scale(0.96) translateY(8px);
    pointer-events: none;
    transition: opacity 0.18s, transform 0.18s;
    transform-origin: bottom left;
    min-width: 170px;
}

.actions-popover.open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.popover-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 8px 10px;
    width: 100%;
    min-width: 200px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 0.95rem;
    font-family: inherit;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s, color 0.2s;
}

.popover-item:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.popover-item ion-icon {
    font-size: 1.2rem;
}

.popover-item#web-search-mode-btn.active-mode {
    background-color: var(--search-bg);
    color: var(--search-bg-text);
}

/* New Active Search Indicator Pill */
.active-mode-indicator {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 4px 4px 4px 10px;
    background-color: var(--search-bg);
    color: var(--search-bg-text);
    border-radius: 25px;
    font-size: 15px;
}
.active-mode-indicator:hover{
    background-color: var(--search-bg);
    color: var(--search-bg-text);
}
.btn-remove-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--search-bg-btn);
    border: none;
    color: var(--search-bg-text);
    margin-right: 1.5px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.btn-remove-indicator:hover {
    background: var(--search-bg-btn-hover);
    color: #99ceff;
}

.btn-remove-indicator ion-icon {
    font-size: 1rem;
}


/* ========================================================================= */
/* ✨ END OF NEW STYLES ✨                                                   */
/* ========================================================================= */

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: -260px;
        /* Hidden off-screen by default */
        top: 0;
        bottom: 0;
        z-index: 1000;
        height: 100%;
        transition: left 0.3s ease-in-out;
    }

    .sidebar.open {
        left: 0;
        /* Slides into view when 'open' class is added */
    }

    .chat-header {
        display: flex;
        /* The top bar with the hamburger menu is now visible */
    }

    .conversation-wrapper {
        max-width: 100%;
        /* The chat column takes full width on mobile */
    }

    .chat-window {
        padding: 1rem;
        /* Reduces padding on smaller screens */
    }

    .chat-input-zone {
        padding: 0.5rem;
        /* Reduces padding for the input area */
    }
}

#custom-tooltip {
    position: fixed;
    z-index: 9999;
    background-color: var(--bg-black);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-family: var(--font-body);
    max-width: 250px;
    text-align: center;
    line-height: 1.4;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s ease;
    
    pointer-events: none;
}

#custom-tooltip.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* --- The Arrow --- */
#custom-tooltip::before {
    content: '';
    position: absolute;
    left: var(--arrow-left, 50%); 
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background-color: var(--bg-black);
    border-radius: 3px;
    z-index: -1;
}

#custom-tooltip:not(.flipped)::before {
    top: calc(100% - 8px); 
}

#custom-tooltip.flipped::before {
    bottom: calc(100% - 8px);
}
/* --- ✨ NEW: Welcome Modal Styles (Final Responsive Version) ✨ --- */
.welcome-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000080;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem; /* Add padding for small/zoomed screens */
    opacity: 0;
    transition: opacity 0.25s ease;
}

.welcome-modal-overlay.visible {
    display: flex;
    opacity: 1;
}

.welcome-modal {
    display: flex;
    width: 100%;
    /* --- THIS IS THE FIX FOR ZOOMING --- */
    max-width: 700px;
    max-height: 90vh;  /* Max height relative to the viewport */
    min-height: 450px; /* Maintains a good shape */
    /* Removed the fixed height: 500px; */
    /* --- END FIX --- */
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    box-shadow: 0 20px 60px #00000030;
    overflow: hidden;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}

.welcome-modal-overlay.visible .welcome-modal {
    opacity: 1;
    transform: scale(1) translateY(0);
}
#confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    perspective: 1200px; 
}
blockquote {
  position: relative;
  padding: 1em; 
  margin: 1em 0;
}

blockquote::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #424242;
  border-radius: 50px ;
}
.confetti {
    position: absolute;
    transform-style: preserve-3d;
    will-change: transform;
}
.modal-image-side {
    flex: 0 0 300px;
    background-color: #000;
}


.modal-image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-content-side {
    flex-grow: 1;
    padding: 3rem;
    display: flex;
    flex-direction: column;
}

.modal-content-side h2 {
    font-size: 2rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.modal-content-side p {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 350px;
}

/* New footer to group credit and button */
.modal-footer {
    margin-top: auto; /* Pushes the entire footer to the bottom */
    justify-content: space-between; /* Aligns items to ends */
    align-items: flex-end; /* Aligns items to the bottom */
    padding-top: 1.5rem; /* Space above footer content */
}

.modal-credit-link {
    font-size: 0.85rem;
    margin-bottom: 10px;
    color: var(--text-secondary);
}

.modal-credit-link a {
    color: var(--text-tertiary);
    text-decoration: none;
    transition: color 0.2s;
}

.modal-credit-link a:hover {
    color: #fff;
}

/* --- Animated Button --- */
.btn-primary-modal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.75rem;
    background-color: var(--text-primary);
    color: #000;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-primary-modal .btn-text {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-primary-modal .btn-icon-wrapper {
    position: absolute;
    right: 0;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(10px);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-primary-modal .btn-icon-wrapper ion-icon {
    font-size: 1.2rem;
}

.btn-primary-modal:hover {
    background-color: #fff;
}

.btn-primary-modal:hover .btn-text {
    transform: translateX(-12px);
}

.btn-primary-modal:hover .btn-icon-wrapper {
    right: 1.25rem;
    opacity: 1;
    transform: translateX(0);
}
.btn-primary-modal:hover .btn-icon-wrapper {
    right: 1.25rem;
    opacity: 1;
    transform: translateX(0);
}

/* --- ✨ FINAL REVISION: Sources Section Styles --- */
.sources-container {
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sources-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    flex-shrink: 0;
}

.sources-favicon-bar {
    display: flex;
    cursor: pointer;
    background-color: var(--bg-tertiary1);
    padding: 5px;
    border-radius: 50px;
}

.favicon-wrapper {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--bg-tertiary); /* Use a subtle background */
    border: 2px solid var(--bg-secondary) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -10px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.sources-favicon-bar .favicon-wrapper:first-child {
    margin-left: 0;
}

.sources-favicon-bar:hover .favicon-wrapper {
    margin-left: -4px;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
/* Staggered transition for a fanning out effect */
.sources-favicon-bar:hover .favicon-wrapper:nth-child(2) { transition-delay: 0.03s; }
.sources-favicon-bar:hover .favicon-wrapper:nth-child(3) { transition-delay: 0.06s; }
.sources-favicon-bar:hover .favicon-wrapper:nth-child(4) { transition-delay: 0.09s; }
.sources-favicon-bar:hover .favicon-wrapper:nth-child(5) { transition-delay: 0.12s; }

/* THIS IS THE FIX: Ensures the image itself is treated as a block for centering */
.source-favicon-item {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-top: 0 !important;
}

/* THIS IS THE FIX: Styles for the fallback icon */
.favicon-wrapper ion-icon {
    font-size: 1.1rem; /* Slightly larger for better visibility */
    color: var(--text-tertiary);
}


/* --- ✨ REVISED: Source Details Modal Item Spacing --- */
.source-modal-item {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.source-modal-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* --- ✨ NEW: Source Details Modal (Right Sidebar) --- */
.source-details-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.source-details-overlay.visible {
    opacity: 1;
    visibility: visible;
}
.source-details-modal {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 400px;
    height: 100%;
    background-color: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    box-shadow: -10px 0 30px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.source-details-overlay.visible .source-details-modal {
    transform: translateX(0);
}
.source-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.source-modal-header h3 {
    font-size: 1.1rem;
    font-weight: 500;
}
.source-modal-content {
    padding: 1.5rem;
    overflow-y: auto;
    flex-grow: 1;
}
.source-modal-content h4 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}
.source-modal-content h4 a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}
.source-modal-content h4 a:hover {
    color: var(--a-accent-color);
}
.source-modal-link {
    font-size: 0.9rem;
    color: var(--a-accent-color);
    word-break: break-all;
    margin-bottom: 1rem;
}
.source-modal-snippet {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
@media (max-width: 768px) {
    .welcome-modal {
        width: 100%;
        min-height: auto; /* Height becomes automatic on mobile */
        height: auto;
        flex-direction: column;
    }
    .modal-image-side {
        display: none;
    }
    .modal-content-side {
        padding: 2.5rem 2rem;
    }
    .modal-footer {
        flex-direction: column;
        align-items: flex-start; /* Align left on mobile */
        gap: 1.5rem;
    }
    .source-details-modal {
        max-width: 90%;
    }
}


@media (max-width: 480px) {
    .source-details-modal {
        max-width: 100%;
        border-left: none;
    }
}

@media (max-width: 768px) {
    .welcome-modal {
        width: 100%;
        min-height: auto; /* Height becomes automatic on mobile */
        height: auto;
        flex-direction: column;
    }
    .modal-image-side {
        display: none;
    }
    .modal-content-side {
        padding: 2.5rem 2rem;
    }
    .modal-footer {
        flex-direction: column;
        align-items: flex-start; /* Align left on mobile */
        gap: 1.5rem;
    }
}
/* --- START OF REPLACEMENT FOR style.css --- */
/* (Add this to your style.css file) */

/* --- Status Indicator & Focus Mode --- */
.typing-indicator {
    display: flex;
    align-items: center;
    font-style: italic;
    color: var(--text-secondary);
    font-size: .9rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 1rem 0; /* No bottom padding when hidden */
    transition: all 0.3s ease-in-out;
}

.typing-indicator.visible {
    max-height: 40px;
    opacity: 1;
    padding: 0 1rem .5rem; /* Add padding back when visible */
}

/* Replaces the old blinking cursor with a subtle text pulse */
.typing-indicator.visible span {
    animation: text-pulse 1.8s infinite ease-in-out;
}

.typing-cursor {
    display: none; /* Hide old cursor */
}

@keyframes text-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* --- Chat Focus Mode --- */
.chat-window {
    transition: padding-top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-window.focus-mode-active {
    /* Creates a "stage" for the new messages by pushing old ones up */
    padding-top: 50vh;
}

.chat-window .chat-message {
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* By default in focus mode, all messages are faded out and moved up */
.chat-window.focus-mode-active .chat-message {
    opacity: 0;
    transform: translateY(-40px);
}

/* This rule overrides the above, keeping the last two items visible and in place */
/* These are the user's new prompt and the AI's new streaming response */
.chat-window.focus-mode-active .chat-message:nth-last-child(-n+2) {
    opacity: 1;
    transform: translateY(0);
}

/* --- Live Streaming Cursor --- */
.streaming-cursor {
    display: inline-block;
    width: 14px;          /* cursor width */
    height: 14px;         /* cursor height for circle */
    background-color: var(--text-primary-white);
    margin-left: 2px;
    border-radius: 50%;   /* circular shape */
    animation: blink 1s infinite;
    vertical-align: middle; /* centers it vertically with text */
}


@keyframes blink {
    50% { opacity: 0; }
}

/* --- END OF REPLACEMENT FOR style.css --- */
/* --- START OF REPLACEMENT/ADDITION FOR style.css --- */
/* (REMOVE the old .focus-mode-active styles and ADD these) */

.chat-message {
    /* Ensure a comprehensive transition is defined on the message element */
    transition: opacity 0.5s ease, transform 0.5s ease, max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.5s ease, margin-bottom 0.5s ease, padding-top 0.5s ease, padding-bottom 0.5s ease;
}

.chat-message.focus-hidden {
    opacity: 0;
    transform: translateY(-30px);
    max-height: 0px !important; /* Collapse the element's height */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
    pointer-events: none; /* Prevent interaction with hidden elements */
}

/* --- END OF REPLACEMENT FOR style.css --- */
/* --- START OF REPLACEMENT/ADDITION FOR style.css --- */
/* (REMOVE the old .image-loader-container styles and ADD these) */

/* The new class for the animated loader paragraph */
.animated-loader-text {
    /* Inherits all standard paragraph spacing from .message-bubble p */
    font-weight: 500;
    
    /* 1. The gradient background */
    background: linear-gradient(
        120deg,
        #444, #e0e0e0, #888, #e0e0e0, #444
    );
    background-size: 300% 300%;

    /* 2. Clip the background to the text shape */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /* 3. Apply the animation */
    animation: animated-gradient-text 4s ease infinite;
}

/* Keyframes for the shimmering gradient text animation */
@keyframes animated-gradient-text {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Style the blinking cursor when it's inside the animated loader text */
.animated-loader-text .streaming-cursor {
    background-color: var(--text-secondary); /* A solid color is needed for visibility */
    vertical-align: middle;
    margin-left: 5px;
}
/* In style.css */

/* --- Error Alert Box --- */
.error-alert {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #d738451a;
    border: 1px solid #d7384540;
    border-radius: 20px;
    padding: 10px 10px;
    width: 80%;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .error-alert {
        width: 100%;
    }
}
.error-alert-icon {
    flex-shrink: 0;
    color: #d73845;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-alert-text {
    flex-grow: 1;
    color: #d73845;
    font-size: 0.95rem;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-break: break-word;
}

.btn-error-retry {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-tertiary);
    font-size: 0.9rem;
    padding: 5px 12px;
    border-radius: 13px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.btn-error-retry:hover {
    background-color: var(--bg-tertiary1);
    color: var(--text-primary);
}

.btn-error-retry ion-icon {
    font-size: 1.1rem;
}
.web-answer-content p {
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem; /* Space between paragraphs */
}
.citation-badge {
    display: inline-block;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: 20px;
    padding: 1px 5px;
    font-size: 0.6em;
    font-weight: 400;
    margin: 0 2px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    vertical-align: middle;
    text-transform: capitalize;
}
.citation-badge:hover {
    background-color: var(--bg-tertiary2);
    color: var(--text-primary);
}
.key-facts-container {
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}
.key-facts-container h3 {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}
.key-facts-container ul {
    list-style-position: outside;
    padding-left: 1.2rem;
}
.key-facts-container li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.related-articles-header {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0.7rem 0 1rem 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.related-articles-grid {
    display: flex;             /* horizontal layout */
    gap: 1rem;
    overflow-x: auto;          /* horizontal scroll */
    overflow-y: hidden;
    scroll-behavior: smooth;
    background: #212121;       /* page background */
    padding-bottom: 1rem;      /* only bottom padding */
}

.related-articles-grid > * {
    flex: 0 0 260px;
    height: auto;
    background: #333;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: stretch; /* <<< THIS IS THE FIX */
    justify-content: flex-start;
    padding: 1rem;
    border-radius: 8px;
    box-sizing: border-box;
}
hr {
    height: 2px;                     /* Thickness of the line */
    background-color: var(--border-color); /* Line color */
    border-radius: 4px;              /* Rounded edges in px */
    margin: 20px 0;                  /* Spacing above and below */
    border: none;                     /* No border */
}


.article-card {
    background-color: var(--bg-tertiary);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: background-color 0.2s ease;
    padding: 0; /* remove padding completely */
    border: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color) !important;
}
.article-card:hover {
    background-color: var(--bg-tertiary1);
}

.card-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    background-color: var(--bg-tertiary);
    border-radius: 12px 12px 0 0; /* top corners rounded to match card */
    overflow: hidden;
}

.card-thumbnail img {
    width: 100%;
    height: 100%;
    border-radius: 0px;
    object-fit: cover;
    display: block;  /* removes inline spacing */
    margin: 0;       /* removes any default margin */
    padding: 0;      /* just in case */
    border: 0;       /* no border */
}

.card-content {
    padding: 0.75rem 0.40rem 0.25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.card-source {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}
.card-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.card-date {
    margin-top: auto;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
/* Add these styles to the end of style.css */

/* --- Header Profile Section --- */
.profile-section {
    position: relative;
    margin-left: 1.5rem;
}

.profile-menu-trigger {
    cursor: pointer;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    display: block;
}

/* --- START: Replace these styles in your index.html <style> block --- */

/* The main dropdown container with a more fluid animation */
.profile-dropdown {
    position: absolute;
    top: calc(100% + 15px);
    right: 0;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    z-index: 101;
    min-width: 240px; /* A bit wider for better spacing */
    padding: 0.5rem;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    
    /* Animation state */
    opacity: 0;
    transform: scale(0.95) translateY(10px);
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top right;
}

/* Toggled by JS to show the dropdown */
.profile-dropdown.open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

/* A subtle arrow pointing to the profile icon */
.profile-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 12px;
    width: 12px;
    height: 12px;
    background-color: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    transform: rotate(45deg);
}

/* The header inside the dropdown */
.profile-dropdown-header {
    position: relative; /* Needed for the separator line */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}
/* A modern, gapped separator line */
.profile-dropdown-header::after {
    content: '';
    position: absolute;
    bottom: -0.25rem; /* Position it in the middle of the margin */
    height: 1px;
    background-color: var(--border-color);
    left: 0.5rem;
    right: 0.5rem;
}

#dropdown-avatar { width: 40px; height: 40px; border-radius: 50%; }
.dropdown-user-info { overflow: hidden; }
#dropdown-username { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dropdown-email { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The individual menu items */
.profile-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s, color 0.2s;
}
.profile-dropdown-item:hover { background-color: var(--bg-secondary); }
.profile-dropdown-item.logout:hover { background-color: var(--danger-color); color: var(--danger-color-text); }
.profile-dropdown-item ion-icon { font-size: 1.2rem; color: var(--text-secondary); transition: color 0.2s; }
.profile-dropdown-item:hover ion-icon { color: var(--text-primary); }

/* --- ✨ THE STAGGERED ANIMATION MAGIC ✨ --- */
/* 1. Initially, all direct children of the dropdown are hidden and shifted */
.profile-dropdown > * {
    opacity: 0;
    transform: translateX(15px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 2. When the dropdown opens, animate them back to their final state */
.profile-dropdown.open > * {
    opacity: 1;
    transform: translateX(0);
}

/* 3. Apply a sequential delay to each child for the cascading effect */
.profile-dropdown.open > *:nth-child(1) { transition-delay: 0.1s; } /* Header */
.profile-dropdown.open > *:nth-child(2) { transition-delay: 0.15s; } /* My Profile */
.profile-dropdown.open > *:nth-child(3) { transition-delay: 0.2s; } /* Go to Chat */
.profile-dropdown.open > *:nth-child(4) { transition-delay: 0.25s; } /* Log Out */

/* --- END: Replacement CSS --- */

/* --- Mobile Header --- */
@media (max-width: 992px) {
    .header-nav a:not(.btn) {
        display: none; /* Hides Features, Principles, FAQ */
    }
    .header-nav {
        flex-grow: 1;
        justify-content: flex-end; /* Pushes profile to the right */
    }
    .header-content {
        padding: 12px 1rem;
    }
    #profile-section {
        margin-left: 0;
    }
}
/* --- FINAL REVISED: Thought Process Container --- */

.ai-response-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
}

.thought-process-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
}

/* ✨ FIX: Make the header text bold */
.thought-process-header span {
    font-weight: 600;
}

.thought-process-header .expand-icon {
    /* No margin-left: auto; keeps it next to the text */
    font-size: 1.2rem;
    color: var(--text-secondary);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.thought-process-container.expanded .expand-icon {
    transform: rotate(180deg);
}

.thought-process-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, margin-top 0.4s ease-in-out;
    position: relative;
    padding-left: 1.25rem;
    margin-top: 0;
}

.thought-process-container.expanded .thought-process-content {
    max-height: 99999px;
    margin-top: 1rem;
}

.thought-process-content::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--border-color);
    border-radius: 2px;
}

.thought-process-content p {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 0.95rem;
}

.thought-process-container + .message-bubble {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-top: 1.5rem;
}

/* --- ✨ NEW: Skeleton Loader for thinking state --- */
.skeleton-loader {
    display: inline-block;
    height: 1.2em;
    width: 120px;
    border-radius: 6px;
    background-color: var(--bg-tertiary);
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

#current-model-name {
    font-weight: 500;
    color: var(--text-tertiary);
    margin-left: 2px;
}

/* --- NEW: Generic Modal Overlay --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1500;
    display: flex; /* Use flex for centering */
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* --- NEW: Model Select Modal --- */
.model-select-modal {
    width: 100%;
    max-width: 550px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay.visible .model-select-modal {
    transform: scale(1);
}

.model-select-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.model-select-header h3 {
    font-size: 1.2rem;
    font-weight: 500;
}

.model-select-body {
    padding: 1.5rem 1.25rem;
    overflow-y: auto;
}

.model-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.model-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.model-item:hover {
    background-color: var(--bg-tertiary);
}

.model-item.selected {
    border-color: var(--a-accent-color);
    background-color: color-mix(in srgb, var(--a-accent-color) 10%, transparent);
}

.model-item .icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.model-item.selected .icon-wrapper {
    color: var(--a-accent-color);
}

.model-details h4 {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.model-details p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.model-tags {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.model-tag {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 20px;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}

.model-tag.default {
    background-color: color-mix(in srgb, var(--a-accent-color) 20%, transparent);
    color: var(--a-accent-color);
}

@media (max-width: 600px) {
    .model-select-modal {
        max-width: calc(100% - 2rem);
        max-height: 80vh;
    }
    .model-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .model-tags {
        margin-left: 0;
        margin-top: 0.75rem;
    }
}

.message-bubble .katex-display {
    text-align: left;
    padding: 0.8em 0; /* Add some vertical spacing to separate it from text */
    overflow-x: auto; /* Allow scrolling for very long equations */
    overflow-y: hidden;
}