@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');

/* --- Global CSS Variables for Theming --- */
html {
    /* Light Mode Defaults */
    --page-bg: #fff; /* Pure white background for light mode */
    --text-color: #050505;
    --dark-element-bg: #f0f0f0; /* Lighter background for elements in light mode */
    --dark-element-text: #050505;
    --user-message-bg: #e0e0e0;
    --secondary-text-color: #6a6a6a;
    --border-color: #ccc;
    --button-hover-bg: #e5e5e5;

    /* Sidebar specific light mode colors (clean, light aesthetic) */
    --sidebar-bg: #ffffff; /* White background for sidebar in light mode */
    --sidebar-text-color: #333; /* Darker gray for text */
    --sidebar-border-color: #e5e7eb; /* Lighter border */
    --sidebar-hover-bg: #f3f4f6; /* Subtle hover for menu items */
    --sidebar-active-item-bg: #e0e0e0; /* Slightly grey for active item */
    --sidebar-button-bg: #e0e0e0; /* Light gray for "New Chat" button */
    --sidebar-button-text: #050505; /* Dark text for "New Chat" button */

    --page-bg-image-light: none; /* No pattern for pure white light mode */
    --page-bg-image-dark: none; /* No pattern for pure black dark mode */
}

/* Dark Mode Overrides */
html.dark-mode {
    --page-bg: #000; /* Pure black background for dark mode */
    --text-color: #e8e8e8;
    --dark-element-bg: #1c1c1c;
    --dark-element-text: #e8e8e8;
    --user-message-bg: #333;
    --secondary-text-color: #8a8a8a;
    --border-color: #3a3a3a;
    --button-hover-bg: #333;

    /* Sidebar specific dark mode colors (matching reference image) */
    --sidebar-bg: #000; /* Pure black background for sidebar in dark mode */
    --sidebar-text-color: #e5e5e5;
    --sidebar-border-color: #3a3a3a; /* Darker border, adjusted for pure black bg */
    --sidebar-hover-bg: #1a1a1a; /* Slightly lighter hover for menu items */
    --sidebar-active-item-bg: #2a2a2a; /* Darker grey for active item */
    --sidebar-button-bg: #3a3a3a; /* Darker gray for "New Chat" button */
    --sidebar-button-text: #e5e5e5; /* Light text for "New Chat" button */
}

body {
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    background-color: var(--page-bg); /* Use dynamic background color */
    background-image: var(--page-bg-image); /* Default theme background image, controlled by JS */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color:var(--text-color);
    margin:0;
    padding-bottom:0;
    transition: background-color 0.5s ease, color 0.5s ease, background-image 0.5s ease;
    overflow: hidden; /* Prevent scroll on initial screen */
}
        
/* Initial intro section background (should follow theme) */
#initial-intro {
    background-color: var(--page-bg); /* Will take theme's background color */
    background-image: var(--page-bg-image); /* Will take body's background image (custom or none) */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--text-color);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 1;
    pointer-events: none;
}
#initial-intro.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
#initial-intro h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    pointer-events: none;
}
#initial-intro p {
    font-size: 1.1rem;
    max-width: 600px;
    line-height: 1.6;
    margin-bottom: 30px;
    pointer-events: none;
}
/* Removed #get-plus-button CSS */

/* Ensure body.chat-active only controls scrolling and padding */
body.chat-active {
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 200px;
}

#chat-box{
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:15px;
    width:100%;
    max-width:750px;
    margin:0 auto;
    opacity: 0;
    transition: opacity 0.5s ease;
    position: relative;
    z-index: 0;
    height: calc(100vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
}
body.chat-active #chat-box {
    opacity: 1;
    z-index: 1;
}
.user-message-wrapper{display:flex;justify-content:flex-end;width:100%}
.user-message{
    background-color:var(--user-message-bg);
    color:var(--dark-element-text);
    border-radius:20px;
    padding:12px 18px;
    max-width:70%;
    font-weight:500
}
.bot-message-wrapper{
    color: var(--dark-element-text);
    border-radius:14px;
    padding:20px;
    width:100%;
    box-shadow: none;
    align-self:flex-start;
    border: 1px solid var(--border-color); /* Subtle border for definition */
    
    /* Transparent, glass-like effect */
    background-color: rgba(0, 0, 0, 0.2); /* Dark mode initial transparency */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease; /* For theme changes */
}
/* Light mode override for bot message transparency */
html.light-mode .bot-message-wrapper {
    background-color: rgba(255, 255, 255, 0.4); /* Light mode transparency */
}

#chat-input-area{
    position:fixed;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    width:90%;
    max-width:750px;
    z-index:100;
}
#copy-tooltip{position:fixed;top:20px;left:50%;transform:translateX(-50%);background-color:var(--dark-element-bg);color:var(--dark-element-text);padding:8px 16px;border-radius:8px;font-size:.9rem;z-index:1000;opacity:0;transition:opacity .3s ease;pointer-events:none}
#copy-tooltip.show{opacity:1}.bot-message-content{line-height:1.7;font-size:1rem;margin-bottom:20px;min-height:20px;white-space:pre-wrap;}.bot-message-actions{display:flex;align-items:center;gap:15px;border-top:1px solid var(--border-color);padding-top:15px;display:none;}.action-button{background:0 0;border:none;color:var(--secondary-text-color);cursor:pointer;display:flex;align-items:center;gap:8px;font-size:.85rem;padding:5px;transition:color .2s}.action-button:hover{color:var(--dark-element-text)}.action-button i{font-size:1.1em}

/* Input area styling for initial transparent state */
.chat-input-area-content{
    background-color: rgba(28, 28, 28, 0.6); /* Default dark transparent */
    border-radius:20px;
    padding:10px;
    box-shadow:0 8px 30px rgba(0,0,0,.2);
    display:flex;
    flex-direction:column;
    gap:8px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}
/* Light mode transparent input area */
html.light-mode .chat-input-area-content {
    background-color: rgba(240, 240, 240, 0.6);
    color: var(--text-color);
}
/* Opaque input area when chat is active, based on theme */
body.chat-active .chat-input-area-content {
    background-color: var(--dark-element-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#top-input-row{display:flex;align-items:center;gap:8px}
#user-input{flex-grow:1;background:0 0;border:none;resize:none;font-size:1rem;line-height:1.5;color:var(--dark-element-text);outline:0;font-family:inherit}
#user-input::placeholder{color:var(--secondary-text-color)}.input-icon-button{background:0 0;border:none;color:var(--secondary-text-color);font-size:1.2rem;cursor:pointer;padding:8px;transition:color .2s}.input-icon-button:hover{color:var(--dark-element-text)}#send-button{background-color:#333;color:var(--dark-element-text);border-radius:50%;width:32px;height:32px;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:background-color .2s}#send-button:hover{background-color:#444}#send-button i{font-size:.9rem}#bottom-buttons-row{display:flex;align-items:center;gap:12px;padding:0 5px}.bottom-button{background:0 0;border:none;color:var(--secondary-text-color);font-size:.85rem;cursor:pointer;display:flex;align-items:center;gap:6px}.bottom-button:hover{color:var(--dark-element-text)}.disabled{pointer-events:none;opacity:.5}.typing-cursor{display:inline-block;width:8px;height:1rem;background-color:#e8e8e8;animation:blink 1s step-end infinite}@keyframes blink{50%{background-color:transparent}}

/* New styles for code blocks */
.bot-message-content pre {
    background-color: #2d2d2d;
    color: #f8f8f2;
    padding: 15px;
    border-radius: 8px;
    overflow-x: auto;
    position: relative;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 0.9em;
    margin-top: 10px;
    margin-bottom: 10px;
    white-space: pre-wrap;
    word-break: break-all;
    direction: ltr;
    text-align: left;
}

.bot-message-content pre code {
    display: block;
    padding-right: 40px;
}

.copy-code-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 0.8em;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.bot-message-content pre:hover .copy-code-button {
    opacity: 1;
}

/* New styles for search results (links, titles, snippets) */
.search-result {
    margin-bottom: 15px;
    padding: 10px;
    border-left: 3px solid #6a5acd;
    background-color: rgba(28, 28, 28, 0.8);
    border-radius: 8px;
    word-break: break-word;
}

/* Adjust search result background for light mode */
html.light-mode .search-result {
    background-color: rgba(240, 240, 240, 0.8);
}

.search-result h3 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.search-result a {
    color: #8ab4f8;
    text-decoration: none;
    font-weight: 500;
}
.search-result a:hover {
    text-decoration: underline;
}
.search-result p {
    font-size: 0.85rem;
    color: var(--secondary-text-color);
    margin: 0;
}

/* --- Sidebar Styles --- */
:root {
    --sidebar-width-desktop: 260px;
    --sidebar-width-mobile: 80vw;
}

/* Applying widths based on screen size */
#ai-sidebar {
    width: var(--sidebar-width-desktop);
}
@media (max-width: 768px) {
    #ai-sidebar {
        width: var(--sidebar-width-mobile);
    }
}
@media (max-width: 480px) {
    #ai-sidebar {
        width: var(--sidebar-width-mobile);
    }
}

/* Ensure box-sizing is global for consistency */
html, body, #ai-sidebar, .sidebar-header, .sidebar-menu-container, .sidebar-footer,
.sidebar-header a, .sidebar-menu li a, .sidebar-profile-link, .dark-mode-button {
    box-sizing: border-box;
}

/* Body variables are inherited, but sidebar uses its own for more control */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- Main Toggle Button (When Sidebar is Closed) --- */
#sidebar-toggle-closed {
    position: fixed;
    top: 15px;
    left: -200px; /* Initially hidden */
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: transparent;
    color: var(--sidebar-text-color);
    border: 1px solid var(--sidebar-border-color);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s;
    opacity: 0;
}
#sidebar-toggle-closed.visible {
    left: 15px;
    opacity: 1;
}
#sidebar-toggle-closed .icon {
    width: 20px;
    height: 20px;
}

/* --- Sidebar Container --- */
#ai-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    background-color: var(--sidebar-bg); /* Use sidebar-specific background */
    border-right: 1px solid var(--sidebar-border-color);
    z-index: 1010;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding-bottom: 75px; 
}
#ai-sidebar.open {
    transform: translateX(0);
}

/* --- Sidebar Overlay (for closing on click outside) --- */
#sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1009;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s;
}
#sidebar-overlay.visible {
    opacity: 1;
    visibility: visible;
}


/* --- Sidebar Header (Logo and Close Button) --- */
.sidebar-header {
    padding: 15px;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 65px; 
    border-bottom: 1px solid var(--sidebar-border-color); /* Separator line */
    padding-bottom: 10px; /* Adjusted padding */
}

/* Qubot AI Logo Styling (like ChatGPT logo in reference image) */
.sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center; /* Center the SVG */
    width: 36px; /* Size similar to the image */
    height: 36px;
    border-radius: 50%; /* If you want a circle background */
    background-color: transparent; /* No specific background by default */
    margin-left: 10px; /* Space from edge in RTL */
}

.qubit-logo-svg {
    width: 100%;
    height: 100%;
    color: var(--sidebar-text-color); /* Icon color matches sidebar text */
}

/* Close button for sidebar */
#sidebar-close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sidebar-bg);
    color: var(--sidebar-text-color);
    border: 1px solid var(--sidebar-border-color);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: background-color 0.3s, color 0.3s;
}

#sidebar-close-button:hover {
    background-color: var(--sidebar-hover-bg);
    color: var(--sidebar-text-color);
    opacity: 1;
}
@media (max-width: 768px) {
    #sidebar-close-button {
        display: block;
    }
}


/* --- Navigation Menu Container --- */
.sidebar-menu-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px; /* Adjusted padding for cleaner look */
    flex-basis: 0;
    min-height: 0;
}
.sidebar-menu-container::-webkit-scrollbar { width: 4px; }
.sidebar-menu-container::-webkit-scrollbar-track { background: transparent; }
.sidebar-menu-container::-webkit-scrollbar-thumb { background: #555; border-radius: 2px; }

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar-menu li {
    margin-bottom: 0px; /* Reduced margin-bottom for closer items */
}
.sidebar-menu li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--sidebar-text-color);
    padding: 10px 12px; /* Adjusted padding */
    border-radius: 6px; /* Slightly less rounded for a sleek look */
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
    font-size: 0.95rem; /* Slightly smaller font for compactness */
    direction: ltr; /* Ensure LTR layout for icon on left, text on right */
    flex-direction: row; /* Explicitly set flex direction to row */
}
.sidebar-menu li a:hover {
    background-color: var(--sidebar-hover-bg);
}

/* "دردشة جديدة" button styling (now a regular menu item, like the pencil icon in the image) */
#new-chat-button-sidebar {
    background-color: transparent; /* No special background */
    color: var(--sidebar-text-color);
    font-weight: 500;
    border: none; /* No border for a clean look */
    text-align: left;
    justify-content: flex-start; /* Icon on the left, text on the right */
}
#new-chat-button-sidebar:hover {
    background-color: var(--sidebar-hover-bg);
    color: var(--sidebar-text-color);
}
#new-chat-button-sidebar i.menu-icon {
    font-size: 1.1em;
    margin-left: 0; /* No margin on the left */
    margin-right: 10px; /* Space between icon and text */
    opacity: 1;
}

/* Menu Icons - Adjusted for RTL and consistent spacing */
.menu-icon {
    font-size: 18px; 
    width: 24px;   
    text-align: center;
    margin-left: 0; /* No margin on the left */
    margin-right: 15px; /* Space from text in LTR */
    opacity: 0.9;
}

/* Removed styles for .menu-separator and .menu-category-header */

/* Delete Account button styling (moved to kebab menu) */
.kebab-menu-item.delete-option {
    color: #fff; /* Red color for delete action */
    direction: ltr; /* Keep LTR for layout */
    justify-content: flex-start; /* Icon on the left, text on the right */
}
.kebab-menu-item.delete-option:hover {
    background-color: rgba(220, 53, 69, 0.1); 
}
.kebab-menu-item .menu-icon {
    margin-left: 0; /* No margin on the left */
    margin-right: 15px; /* Space from text in LTR */
}


/* --- Sidebar Footer (User Profile & Dark Mode Toggle) --- */
.sidebar-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 15px;
    border-top: 1px solid var(--sidebar-border-color);
    background-color: var(--sidebar-bg); /* Use sidebar background for footer */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px; /* Gap between profile, kebab, and dark mode toggle */
}

/* New wrapper for profile link and kebab menu */
.sidebar-profile-and-options {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Allows it to take available space */
    position: relative; /* For absolute positioning of dropdown */
    min-height: 40px; /* Ensure consistent height */
    justify-content: space-between; /* To push kebab menu to the right */
}

.sidebar-profile-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-grow: 1;
    text-decoration: none;
    color: var(--sidebar-text-color);
    padding: 5px;
    border-radius: 8px;
    transition: background-color 0.2s;
    min-height: 40px; 
    cursor: pointer; /* Indicate it's clickable */
}
.sidebar-profile-link:hover {
    background-color: var(--sidebar-hover-bg);
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: transparent; 
    color: var(--sidebar-text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
    flex-shrink: 0;
    overflow: hidden;
}
.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.user-avatar span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.user-avatar svg {
    width: 100%;
    height: 100%;
    padding: 18%; 
    box-sizing: border-box;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    background-color: transparent; 
}

.user-details {
    flex-grow: 1;
    overflow: hidden;
    margin-right: 10px; /* Space between text and kebab menu */
}
.user-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--sidebar-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-email {
    display: block;
    font-size: 0.75rem;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dark-mode-button {
    background: none;
    border: none;
    color: var(--sidebar-text-color);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dark-mode-button:hover {
    background-color: var(--sidebar-hover-bg);
}

/* --- Kebab Menu Styles --- */
.kebab-menu-wrapper {
    position: relative;
    /* Aligns the kebab button to the right of user details within the flex container */
    margin-left: auto; 
}

.kebab-menu-button {
    background: none;
    border: none;
    color: var(--secondary-text-color);
    cursor: pointer;
    font-size: 1rem; /* Smaller icon */
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}
.kebab-menu-button:hover {
    background-color: var(--sidebar-hover-bg);
    color: var(--sidebar-text-color);
}

.kebab-dropdown-menu {
    position: absolute;
    bottom: calc(100% + 5px); /* Position above the button, with a small gap */
    left: 0; /* Align to the left of its parent, making it expand right in RTL */
    min-width: 180px;
    background-color: var(--sidebar-bg);
    border: 1px solid var(--sidebar-border-color);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    list-style: none;
    padding: 8px 0;
    margin: 0;
    z-index: 1020; /* Above other sidebar elements */
    display: none; /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.kebab-dropdown-menu.visible {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.kebab-dropdown-menu li {
    margin-bottom: 0; /* No margin between dropdown items */
}

.kebab-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    color: var(--sidebar-text-color);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
    direction: ltr; /* Ensure LTR layout */
}
.kebab-menu-item:hover {
    background-color: var(--sidebar-hover-bg);
    color: var(--sidebar-text-color);
}