/* =============================================================================
   OMNIVERSE DEMO APPLICATION STYLES
   =============================================================================
   This CSS file contains all the styling for the Omniverse demo application.
   The design mimics a desktop application with a fixed header and window controls.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   CUSTOM SCROLLBAR STYLING
   -----------------------------------------------------------------------------
   Thin, dark theme scrollbars with square edges matching project theme */
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
	width: 6px;                            /* Thin scrollbar width */
	height: 6px;                           /* Thin horizontal scrollbar height */
}

::-webkit-scrollbar-track {
	background: #2a2a2a;                   /* Dark track background */
	border-radius: 0;                      /* Square corners, no curves */
}

::-webkit-scrollbar-thumb {
	background: #555;                      /* Dark gray scrollbar thumb */
	border-radius: 0;                      /* Square corners, no curves */
	border: none;                          /* No border around thumb */
}

::-webkit-scrollbar-thumb:hover {
	background: #666;                      /* Slightly lighter on hover */
}

::-webkit-scrollbar-corner {
	background: #2a2a2a;                   /* Dark corner where scrollbars meet */
}

/* Remove scrollbar arrows (up/down buttons) */
::-webkit-scrollbar-button {
	display: none;                         /* Hide arrow buttons completely */
}

/* Firefox scrollbar styling */
* {
	scrollbar-width: thin;                 /* Thin scrollbar in Firefox */
	scrollbar-color: #555 #2a2a2a;        /* Thumb color, track color */
}

/* -----------------------------------------------------------------------------
   GLOBAL BODY STYLES
   -----------------------------------------------------------------------------
   Sets up the main page layout and appearance */
/* -----------------------------------------------------------------------------
   GLOBAL BODY STYLES
   -----------------------------------------------------------------------------
   Sets up the main page layout and appearance - MOVED TO BOTTOM AFTER COMMAND LINE SECTION */

/* -----------------------------------------------------------------------------
   BLACK TOP BAR
   -----------------------------------------------------------------------------
   Thin black bar above the header for additional visual separation */
.black {
    background-color: #000000;        /* Pure black color */
    position: fixed;                  /* Fixed positioning to stay at top */
    top: 0;                          /* Position at very top of viewport */
    left: 0;                         /* Position at very left of viewport */
    width: 100%;                     /* Span the full width of the browser window */
    height: 3px;                     /* Thin 3px height */
    z-index: 1001;                   /* Higher z-index than header to stay above it */
}

/* -----------------------------------------------------------------------------
   MAIN HEADER BAR
   -----------------------------------------------------------------------------
   Creates a fixed header bar at the top of the application, similar to desktop apps */
header {
    background-color: #1e1e1e;        /* Darker grey than body (creates visual hierarchy) */
    position: fixed;                  /* Keeps header at top of screen when scrolling */
    top: 3px;                        /* Position below the black bar (3px from top) */
    left: 0;                         /* Position at very left of viewport */
    width: 100%;                     /* Span the full width of the browser window */
    height: 35px;                    /* Fixed height for consistent appearance */
    display: flex;                   /* Use flexbox for easy alignment of child elements */
    align-items: center;             /* Vertically center all items in the header */
    justify-content: flex-start;     /* Align items to the left, we'll position user account manually */
    padding: 0 0 0 10px;            /* Reduced left padding to move logo/text more to the left */
    box-sizing: border-box;          /* Include padding in width calculation */
    z-index: 1000;                   /* High z-index ensures header stays above other content */
}

/* -----------------------------------------------------------------------------
   HEADER LEFT SECTION (LOGO + BRAND)
   -----------------------------------------------------------------------------
   Container for the logo and application name on the left side of header */
.header-left {
    display: flex;                   /* Flexbox layout for logo and text */
    align-items: center;             /* Vertically center logo and brand text */
}

/* Make logo and brand text clearly clickable */
.header-left .logo,
.header-left .brand-text {
    cursor: pointer;
}

/* -----------------------------------------------------------------------------
   MENU BAR (SECOND HEADER)
   -----------------------------------------------------------------------------
   Fixed menu bar below the main header with navigation options */
.menu-bar {
    background-color: #2a2a2a;        /* Slightly lighter than main header for distinction */
    position: fixed;                  /* Fixed positioning like the main header */
    top: 38px;                       /* Position below main header (3px black + 35px header) */
    left: 0;                         /* Position at very left of viewport */
    width: 100%;                     /* Span the full width of the browser window */
    height: 27px;                    /* Menu bar height */
    z-index: 999;                    /* Lower than main header but above content */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Subtle shadow for separation */
}

.menu-list {
    list-style: none;                /* Remove bullet points */
    margin: 0;                       /* Remove default margins */
    padding: 0;                      /* Remove default padding */
    display: flex;                   /* Horizontal layout for menu items */
    height: 100%;                    /* Full height of menu bar */
}

.menu-list li {
    display: flex;                   /* Flexbox for centering menu items */
    align-items: center;             /* Vertically center menu text */
}

.menu-item {
    font-weight: lighter;
    color: #ffffff;                  /* White text color */
    text-decoration: none;           /* Remove underline from links */
    padding: 3px 15px 0 15px;                 /* Horizontal padding for clickable area */
    font-size: 12px;                 /* Small font size for menu items */
    height: 100%;                    /* Full height for larger click area */
    display: flex;                   /* Flexbox for centering text */
    align-items: center;             /* Vertically center text */
    transition: background-color 0.2s ease; /* Smooth hover transition */
}

.menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Light hover effect */
}

/* -----------------------------------------------------------------------------
   FUNCTION DISPLAY HEADER
   -----------------------------------------------------------------------------
   Header that shows executed functions in light grey bubbles */
.function-display {
    /* Now part of the left column flow (no fixed positioning) */
    height: 50px;                   /* Height for exactly 2 lines of text */
    background-color: #000000;      /* Black background for function display */
    border-bottom: 1px solid #333;  /* Subtle border at bottom */
    padding: 8px 15px 8px 50px;     /* Padding with extra left space for toggle button */
    box-sizing: border-box;         /* Include padding in height */
    overflow-y: auto;               /* Enable vertical scrolling for history */
    overflow-x: hidden;             /* Hide horizontal overflow */
    display: flex;                  /* Flexbox for proper scrolling */
    flex-direction: column;         /* Column direction for stacking */
    transition: height 0.3s ease;   /* Smooth height transition */
}

.function-display.collapsed {
    display: none;                 /* Remove from flow completely */
    height: 0;                     /* No height */
    padding: 0;                    /* No padding */
    border: 0;                     /* No border */
}

.function-display.expanded {
    height: 200px;                  /* Expanded height for about 10 lines */
}

.history-toggle-btn {
    position: fixed;                /* Keep fixed for now; can be moved inside function-display later */
    left: 8px;                      /* Position on the left side */
    top: 78px;                      /* Top button position (68px + 10px) */
    transform: none;                /* Remove centering transform */
    width: 30px;                    /* Button width */
    height: 15px;                   /* Half the original height */
    background-color: #404040;      /* Dark grey background */
    border: 1px solid #555555;      /* Subtle border */
    border-radius: 4px;             /* Slightly rounded corners */
    color: #ffffff;                 /* White arrow color */
    font-size: 10px;                /* Smaller arrow size */
    cursor: pointer;                /* Hand cursor on hover */
    display: flex;                  /* Flexbox for centering arrow */
    align-items: center;            /* Center arrow vertically */
    justify-content: center;        /* Center arrow horizontally */
    transition: background-color 0.2s ease, top 0.3s ease; /* Smooth transitions */
    z-index: 999;                   /* Above function bubbles */
    pointer-events: auto;           /* Ensure button receives click events */
}

.history-collapse-btn {
    position: fixed;                /* Keep fixed for now; can be moved inside function-display later */
    left: 8px;                      /* Position on the left side (same as toggle) */
    top: 95px;                      /* Bottom button position (78px + 15px + 2px gap) */
    transform: none;                /* Remove centering transform */
    width: 30px;                    /* Button width */
    height: 15px;                   /* Half the original height */
    background-color: #404040;      /* Dark grey background */
    border: 1px solid #555555;      /* Subtle border */
    border-radius: 4px;             /* Slightly rounded corners */
    color: #ffffff;                 /* White minus color */
    font-size: 10px;                /* Smaller minus size */
    font-weight: bold;              /* Bold minus symbol */
    cursor: pointer;                /* Hand cursor on hover */
    display: flex;                  /* Flexbox for centering minus */
    align-items: center;            /* Center minus vertically */
    justify-content: center;        /* Center minus horizontally */
    transition: background-color 0.2s ease, top 0.3s ease; /* Smooth transitions */
    z-index: 999;                   /* Above function bubbles */
    pointer-events: auto;           /* Ensure button receives click events */
}

.history-toggle-btn:hover {
    background-color: #505050;      /* Lighter grey on hover */
}

.history-collapse-btn:hover {
    background-color: #505050;      /* Lighter grey on hover */
}

.history-toggle-btn span {
    transition: transform 0.2s ease; /* Smooth arrow rotation */
}

/* Window dropdown styles */
.menu-item-with-dropdown {
    position: relative;             /* For dropdown positioning */
}

.window-dropdown {
    position: absolute;             /* Absolute positioning */
    top: 100%;                      /* Below the menu item */
    left: 0;                        /* Align with left edge */
    background-color: #2a2a2a;      /* Dark background */
    border: 1px solid #555555;      /* Border */
    border-radius: 4px;             /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Shadow */
    min-width: 180px;               /* Minimum width */
    z-index: 1003;                  /* Above everything */
    display: none;                  /* Hidden by default */
}

.window-dropdown.show {
    display: block;                 /* Show when active */
}

.window-dropdown-item {
    padding: 8px 12px;              /* Padding */
    font-size: 12px;                /* Font size */
    color: #ffffff;                 /* White text */
    cursor: pointer;                /* Pointer cursor */
    border-bottom: 1px solid #404040; /* Separator */
}

.window-dropdown-item:last-child {
    border-bottom: none;            /* Remove border from last item */
}

.window-dropdown-item:hover {
    background-color: #404040;      /* Hover effect */
}

.function-bubbles {
    display: flex;                  /* Vertical layout for command entries */
    flex-direction: column;         /* Stack items vertically */
    gap: 8px;                       /* Space between command history entries */
    min-height: 100%;               /* Minimum height to fill container */
    padding-bottom: 0px;            /* No bottom padding for minimal buffer space */
    overflow-y: visible;            /* Allow content to overflow and be scrollable */
}

.command-history-entry {
    display: flex;                  /* Vertical layout for lines within an entry */
    flex-direction: column;         /* Stack lines vertically */
    gap: 4px;                       /* Gap between bubble and lines */
    border-bottom: 1px solid #333;  /* Subtle separator between entries */
    padding-bottom: 2px;            /* Reduced padding below each entry */
    margin-bottom: 2px;             /* Reduced margin below each entry */
}

.command-history-entry:last-child {
    border-bottom: none;            /* Remove border from last entry */
    margin-bottom: 0;               /* Remove margin from last entry */
    padding-bottom: 0;              /* Remove padding from last entry */
}

.command-bubble {
    background-color: transparent;  /* Remove bubble background */
    color: #76B900;                 /* NVIDIA green text color */
    padding: 0;                     /* Remove bubble padding */
    border-radius: 0;               /* Remove rounded corners */
    font-size: 11px;                /* Match other command line text size */
    white-space: nowrap;            /* Prevent text wrapping */
    width: fit-content;             /* Size to content */
    align-self: flex-start;         /* Align text to the left */
    margin-left: 8px;               /* Match indentation of other command line text */
}

.function-line {
    font-size: 11px;                /* Slightly smaller font for prompt/result lines */
    color: #cccccc;                 /* Lighter grey text for prompts */
    line-height: 1.2;               /* Compact line height */
    margin: 0;                      /* No margins */
    padding: 1px 0;                 /* Small vertical padding */
    margin-left: 8px;               /* Indent prompt lines slightly */
}

.function-bubble {
    background-color: #404040;      /* Light grey background for bubbles */
    color: #ffffff;                 /* White text */
    padding: 4px 12px;              /* Padding inside bubbles */
    border-radius: 12px;            /* Rounded bubble shape */
    font-size: 12px;                /* Small font size */
    white-space: nowrap;            /* Prevent text wrapping */
    min-width: fit-content;         /* Size to content */
}

.command-entry {
    display: flex;                  /* Flexbox for command and prompt layout */
    flex-direction: column;         /* Stack command and prompt vertically */
    gap: 4px;                       /* Small gap between command and prompt */
}

.command-bubble {
    background-color: transparent;  /* Remove bubble background */
    color: #76B900;                 /* NVIDIA green text color */
    padding: 0;                     /* Remove bubble padding */
    border-radius: 0;               /* Remove rounded corners */
    font-size: 11px;                /* Match other command line text size */
    white-space: nowrap;            /* Prevent text wrapping */
    width: fit-content;             /* Size to content */
    margin-left: 8px;               /* Match indentation of other command line text */
}

.command-prompt {
    font-size: 11px;                /* Smaller font for prompt text */
    color: #cccccc;                 /* Lighter grey color */
    margin-left: 8px;               /* Indent prompt slightly */
}

.prompt-line {
    margin: 1px 0;                  /* Small margin between prompt lines */
}

/* -----------------------------------------------------------------------------
   COMMAND LINE INTERFACE
   -----------------------------------------------------------------------------
   Black command line with 'Command:' label and input field */
.command-line-container {
    /* Now part of the left column flow (no fixed positioning) */
    height: 35px;                   /* Height for command line */
    background-color: #000000;      /* Pure black background */
    display: flex;                  /* Flexbox for label and input */
    align-items: center;            /* Center content vertically */
    padding: 0 15px;                /* Horizontal padding */
    box-sizing: border-box;         /* Include padding in height */
}

/* .command-line-container.expanded no longer needed when in-flow */

.show-history-btn {
    background-color: #404040;      /* Dark grey background */
    border: 1px solid #555555;      /* Subtle border */
    border-radius: 4px;             /* Slightly rounded corners */
    color: #ffffff;                 /* White arrow color */
    font-size: 12px;                /* Arrow size */
    cursor: pointer;                /* Hand cursor on hover */
    display: flex;                  /* Flexbox for centering arrow */
    align-items: center;            /* Center arrow vertically */
    justify-content: center;        /* Center arrow horizontally */
    width: 25px;                    /* Button width */
    height: 20px;                   /* Button height */
    margin-right: 8px;              /* Space between button and "Command:" label */
    transition: background-color 0.2s ease; /* Smooth hover transition */
    flex-shrink: 0;                 /* Prevent button from shrinking */
}

.show-history-btn:hover {
    background-color: #505050;      /* Lighter grey on hover */
}

.command-label {
    color: #ffffff;                 /* White text for 'Command:' */
    font-size: 12px;                /* Medium font size */
    margin-right: 10px;             /* Space between label and input */
    white-space: nowrap;            /* Prevent label from wrapping */
}

.command-input {
    flex: 1;                        /* Take remaining space */
    background: transparent;        /* Transparent background */
    border: none;                   /* No border */
    color: #ffffff;                 /* White text */
    font-size: 14px;                /* Match label font size */
    font-family: 'Courier New', monospace; /* Monospace font for command line feel */
    outline: none;                  /* Remove focus outline */
    padding: 0;                     /* No padding */
}

.command-input::placeholder {
    color: #666666;                 /* Dark grey placeholder text */
}

/* Update body to use flexbox layout */
body {
    background-color: #2c2c2c;        /* Dark grey background for the main content area */
    margin: 0;                        /* Remove default browser margins */
    padding: 0;                       /* Remove default browser padding */
    font-family: Arial, sans-serif;   /* Set default font for the entire application */
    color: #ffffff;                   /* White text color for good contrast against dark background */
    height: 100vh;                    /* Full viewport height */
    overflow: hidden;                 /* Prevent scrolling */
    display: flex;                    /* Use flexbox */
    flex-direction: column;           /* Stack vertically */
}

/* Main content area that grows between headers and footer */
.main-layout {
    flex: 1;                          /* Take remaining space */
    display: flex;                    /* Horizontal layout */
    overflow: hidden;                 /* Prevent overflow */
    padding-top: 68px;                /* Offset for black bar + header + menu */
    padding-bottom: 25px;             /* Offset for fixed footer */
}

/* Remove expanded body rules as we're using flexbox now */

/* -----------------------------------------------------------------------------
   FOOTER BAR
   -----------------------------------------------------------------------------
   Fixed footer bar at the bottom with same styling as main header */
.footer-bar {
    background-color: #1e1e1e;        /* Same color as main header */
    position: fixed;                  /* Fixed positioning at bottom */
    bottom: 0;                        /* Position at very bottom of viewport */
    left: 0;                         /* Position at very left of viewport */
    width: 100%;                     /* Span the full width of the browser window */
    height: 25px;                    /* Reduced height from 35px to 25px */
    display: flex;                   /* Use flexbox for easy alignment of child elements */
    align-items: center;             /* Vertically center all items in the footer */
    justify-content: center;         /* Center content horizontally */
    padding: 0 15px;                 /* Horizontal padding */
    box-sizing: border-box;          /* Include padding in width calculation */
    z-index: 1000;                   /* High z-index ensures footer stays above other content */
}

/* -----------------------------------------------------------------------------
   OMNIVERSE LOGO
   -----------------------------------------------------------------------------
   Styling for the Omniverse logo image in the header */
.logo {
    width: 24px;                     /* Fixed width for consistent logo size */
    height: 24px;                    /* Fixed height for consistent logo size */
    margin-right: 10px;              /* Space between logo and brand text */
    object-fit: contain;             /* Scale logo to fit within dimensions while maintaining aspect ratio */
}

/* -----------------------------------------------------------------------------
   BRAND TEXT ("omniverse")
   -----------------------------------------------------------------------------
   Styling for the application name text next to the logo */
.brand-text {
    font-size: 14px;                 /* Medium size text for brand name */
    font-family: Arial; 
    font-weight: 250;                /* Thin/Light weight (numeric for broad support) */
    color: #ffffff;                  /* White text color for visibility on dark header */
    margin: 0;                       /* Remove default heading margins */
}

/* -----------------------------------------------------------------------------
   USER ACCOUNT SECTION
   -----------------------------------------------------------------------------
   User icon and account dropdown in the header */
.user-account {
    display: flex;                   /* Flexbox layout for user icon and dropdown */
    align-items: center;             /* Vertically center user elements */
    position: absolute;              /* Absolute positioning for precise placement */
    right: 158px;                    /* Position from right edge (138px for 3 buttons + 20px margin) */
    margin-right: 0;                 /* Remove margin since we're using absolute positioning */
}

.user-icon {
    width: 20px;                     /* User icon size */
    height: 20px;                    /* User icon size */
    margin-right: 8px;               /* Space between icon and dropdown */
    border-radius: 50%;              /* Round user icon */
}

.account-dropdown {
    position: relative;              /* For dropdown menu positioning */
}

.account-selector {
    background-color: #404040;       /* Light grey background */
    color: #ffffff;                  /* White text */
    padding: 4px 8px;                /* Padding for comfortable clicking */
    font-size: 12px;                 /* Small font size */
    border-radius: 3px;              /* Slightly rounded corners */
    cursor: pointer;                 /* Pointer cursor to indicate clickable */
    display: flex;                   /* Flexbox for text and arrow */
    align-items: center;             /* Center align items */
    user-select: none;               /* Prevent text selection */
}

.account-selector:hover {
    background-color: #505050;       /* Slightly lighter on hover */
}

.selected-email {
    margin-right: 6px;               /* Space between email and arrow */
}

.dropdown-arrow {
    font-size: 10px;                 /* Small arrow size */
    transition: transform 0.2s ease; /* Smooth rotation transition */
}

.dropdown-menu {
    position: absolute;              /* Absolute positioning relative to account-dropdown */
    top: 100%;                       /* Position below the selector */
    right: 0;                        /* Align with right edge of selector */
    background-color: #2a2a2a;       /* Dark background for dropdown */
    border: 1px solid #555555;       /* Subtle border */
    border-radius: 4px;              /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Shadow for depth */
    min-width: 200px;                /* Minimum width for dropdown */
    max-width: 350px;                /* Maximum width to prevent excessive growth */
    width: max-content;              /* Width adjusts to content but respects max-width */
    z-index: 1002;                   /* High z-index to appear above everything */
    display: none;                   /* Hidden by default */
}

.dropdown-menu.show {
    display: block;                  /* Show when .show class is added */
}

.dropdown-item {
    padding: 8px 12px;               /* Padding for dropdown items */
    font-size: 12px;                 /* Small font size */
    color: #ffffff;                  /* White text */
    cursor: pointer;                 /* Pointer cursor */
    border-bottom: 1px solid #404040; /* Subtle separator between items */
}

.dropdown-item:last-child {
    border-bottom: none;             /* Remove border from last item */
}

.dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Light hover effect */
}

.account-item {
    font-weight: normal;             /* Normal font weight for email addresses */
}

.action-item {
    font-weight: bold;               /* Bold font weight for action items */
    color: #cccccc;                  /* Slightly dimmer color for actions */
}

.dropdown-divider {
    height: 1px;                     /* Thin divider line */
    background-color: #555555;       /* Grey divider color */
    margin: 4px 0;                   /* Vertical spacing around divider */
}

/* -----------------------------------------------------------------------------
   WINDOW CONTROLS CONTAINER
   -----------------------------------------------------------------------------
   Container for the three window control buttons on the right side of header */
.window-controls {
    display: flex;                   /* Flexbox layout for control buttons */
    height: 100%;                    /* Full height of header for larger click area */
    position: absolute;              /* Absolute positioning to place at right edge */
    right: 0;                        /* Position at the very right edge */
    font-weight: bold;
}

/* -----------------------------------------------------------------------------
   INDIVIDUAL WINDOW CONTROL BUTTONS
   -----------------------------------------------------------------------------
   Base styling for minimize, maximize/restore, and close buttons */
.control-btn {
    width: 46px;                     /* Standard Windows control button width */
    height: 100%;                    /* Full header height for easy clicking */
    border: none;                    /* No border for clean appearance */
    background: transparent;         /* Transparent background by default */
    color: #ffffff;                  /* White icon color */
    font-size: 18px;                 /* Larger font size for better visibility */
    cursor: pointer;                 /* Hand cursor on hover to indicate clickable */
    display: flex;                   /* Flexbox for centering the icon */
    align-items: center;             /* Vertically center the icon */
    justify-content: center;         /* Horizontally center the icon */
    transition: background-color 0.2s ease; /* Smooth color transition on hover */
}

/* -----------------------------------------------------------------------------
   WINDOW CONTROL BUTTON HOVER EFFECTS
   -----------------------------------------------------------------------------
   Different hover colors for each type of control button */

/* General hover effect for all control buttons */
.control-btn:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Light grey hover effect */
}

/* Minimize button hover effect */
.minimize-btn:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Light grey hover effect */
}

/* Maximize/Restore button hover effect */
.maximize-btn:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Light grey hover effect */
}

/* Close button hover effect (distinctive red color) */
.close-btn:hover {
    background-color: #e81123;       /* Windows-standard red color for close button */
}

/* Control individual button icon sizes */
.minimize-btn {
    font-size: 17px;    /* Adjust this value for minimize button */
}

.maximize-btn {
    font-size: 17px;    /* Adjust this value for maximize/restore button */
    transform: translateY(-2px); /* Move the restore icon up slightly for better alignment */
}

.close-btn {
    font-size: 19px;    /* Adjust this value for close button */
    transform: translateY(-1.5px); /* Move the restore icon up slightly for better alignment */

}

/* -----------------------------------------------------------------------------
   WINDOW CONTROL BUTTON ICONS
   -----------------------------------------------------------------------------
   Styling for the actual icon characters (−, ⧉, ×) inside the buttons */
.control-btn span {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Windows-standard font for authentic look */
    font-weight: bold;               /* Bold font weight for more prominent icons */
    line-height: 1;                  /* Tight line height to prevent vertical spacing issues */
}

/* -----------------------------------------------------------------------------
   ADD ACCOUNT FORM STYLES
   -----------------------------------------------------------------------------
   Styling for the expanded add account form in the dropdown */
.add-account-form {
    padding: 15px;                   /* Increased padding for larger form area */
    background-color: #2a2a2a;       /* Slightly lighter background for form area */
    border-radius: 4px;              /* Rounded corners */
    margin: 4px 0;                   /* Vertical spacing */
    min-height: 120px;               /* Minimum height to contain form elements properly */
}

.form-email {
    color: #ffffff;                  /* White text for email */
    font-weight: bold;               /* Bold email text */
    font-size: 15px;                 /* Larger font for prominence */
    margin-bottom: 8px;              /* Space below email */
    text-align: center;              /* Center the email */
}

.form-title {
    color: #cccccc;                  /* Light grey text for subtitle */
    font-weight: normal;             /* Normal font weight */
    margin-bottom: 12px;             /* Increased space below title */
    font-size: 11px;                 /* Smaller font size */
    text-align: center;              /* Center the title */
}

.form-message {
    color: #cccccc;                  /* Light grey for message */
    font-size: 11px;                 /* Smaller font for message */
    margin-bottom: 15px;             /* Increased space below message */
    line-height: 1.3;                /* Better line spacing */
}

.form-input {
    width: 100%;                     /* Full width inputs */
    padding: 8px 10px;               /* Increased inner padding */
    margin-bottom: 12px;             /* Increased space between inputs */
    background-color: #1a1a1a;       /* Dark input background */
    border: 1px solid #555555;       /* Grey border */
    border-radius: 3px;              /* Slightly rounded corners */
    color: #ffffff;                  /* White text */
    font-size: 12px;                 /* Readable font size */
    box-sizing: border-box;          /* Include padding in width */
}

.form-input:focus {
    outline: none;                   /* Remove default outline */
    border-color: #0078d4;           /* Blue border on focus */
    background-color: #202020;       /* Slightly lighter background on focus */
}

.form-input::placeholder {
    color: #888888;                  /* Grey placeholder text */
}

.code-inputs {
    display: flex;                   /* Horizontal layout for code inputs */
    gap: 8px;                        /* Increased space between code boxes */
    margin-bottom: 15px;             /* Increased space below code inputs */
    justify-content: center;         /* Center the code inputs */
}

.code-input {
    width: 32px;                     /* Slightly larger code input boxes */
    height: 32px;                    /* Slightly larger code input boxes */
    text-align: center;              /* Center the text/number */
    background-color: #1a1a1a;       /* Dark input background */
    border: 1px solid #555555;       /* Grey border */
    border-radius: 3px;              /* Slightly rounded corners */
    color: #ffffff;                  /* White text */
    font-size: 14px;                 /* Larger font for code */
    font-weight: bold;               /* Bold code text */
    box-sizing: border-box;          /* Include padding in dimensions */
}

.code-input:focus {
    outline: none;                   /* Remove default outline */
    border-color: #0078d4;           /* Blue border on focus */
    background-color: #202020;       /* Slightly lighter background on focus */
}

.form-next-btn {
    background-color: #0078d4;       /* Blue button background */
    color: #ffffff;                  /* White text */
    border: none;                    /* No border */
    padding: 8px 15px;               /* Button padding */
    border-radius: 3px;              /* Rounded corners */
    cursor: pointer;                 /* Hand cursor */
    font-size: 12px;                 /* Button font size */
    font-weight: bold;               /* Bold button text */
    margin-top: 8px;                 /* Space above button */
    display: block;                  /* Block element for proper positioning */
}

.form-next-btn:hover {
    background-color: #106ebe;       /* Darker blue on hover */
}

.form-next-btn:active {
    background-color: #005a9e;       /* Even darker blue when clicked */
}

/* -----------------------------------------------------------------------------
   MAIN CONTENT AREA
   -----------------------------------------------------------------------------
   Main content area between command line and footer */
.main-content {
    background-color: #555555;       /* Darker shade of grey background */
    flex: 1;                         /* Take remaining space in workspace container */
    padding: 0;                      /* No padding to allow iframe to fill completely */
    box-sizing: border-box;          /* Include padding in dimensions */
    overflow: hidden;                /* Prevent scrolling */
    display: flex;                   /* Row layout to include sidebar + content */
}

/* Iframe styling to fill the main content area completely */
.main-content iframe {
    width: 100%;                     /* Full width of container */
    height: 100%;                    /* Full height of container */
    border: none;                    /* Remove default iframe border */
    background-color: transparent;   /* Transparent background */
    display: block;                  /* Block display to remove any gaps */
}

/* Project Manager Sidebar */
.project-manager-container {
    width: 160px;                    /* Initial sidebar width */
    flex: 0 0 auto;                  /* Allow width to be controlled via inline style */
    background: transparent;         /* Replaced red background with transparent */
    /* Mirror agent's 2px separator: create gap between Explorer and handle */
    border-right: 2px solid #333;    /* Separator line matching agent side */
    min-width: 100px;                /* Updated minimum */
    max-width: 20vw;                 /* Responsive maximum based on viewport width */
}

/* Content Pane next to the sidebar */
.content-pane {
    flex: 1;                         /* Take remaining space */
    min-width: 0;                    /* Allow flex item to shrink content width */
    overflow: hidden;                /* No scrollbars here; let iframe manage its own */
    position: relative;              /* For absolutely positioned overlay */
    display: flex;                   /* Flex container for header and content */
    flex-direction: column;          /* Stack header above content */
}

/* Tabs Header inside content pane */
.content-tabs-header {
    height: 27px;                    /* Adjusted from 25px to 27px */
    background-color: #2a2a2a;       /* Same as Navigation Menu Bar */
    border-bottom: 1px solid #555;   /* Subtle border */
    flex-shrink: 0;                  /* Don't shrink when space is tight */
    display: flex;                   /* Flex container for tabs */
    align-items: center;             /* Center content vertically */
    padding: 0 8px 0 1px;            /* 1px left offset, 8px right padding */
    gap: 4px;                        /* Small gap between nav buttons and scroll */
}

/* Tabs scroll wrapper takes remaining width and clips overflow */
.content-tabs-scroll {
    flex: 1 1 auto;
    overflow: hidden;
}

/* Inner list lays out the tabs */
.content-tabs-list {
    display: flex;
    align-items: center;
    white-space: nowrap;
    width: 100%;                     /* Default: force children to shrink-to-fit */
}

/* Individual Tab Styling */
.content-tab {
    height: 23px;                    /* Adjusted from 21px to 23px to match header height */
    padding: 0 8px;                  /* Reduced padding for better icon fit */
    background-color: #1a1a1a;       /* Dark background for inactive tabs */
    color: #cccccc;                  /* Light grey text for inactive tabs */
    border: 1px solid #444;          /* Subtle border */
    border-bottom: none;             /* No bottom border to connect with header border */
    display: flex;                   /* Flex container for text centering */
    align-items: center;             /* Center text vertically */
    font-size: 11px;                 /* Small font size */
    font-weight: normal;             /* Normal font weight (not bold) */
    font-style: italic;              /* Italic text style */
    cursor: pointer;                 /* Pointer cursor on hover */
    user-select: none;               /* Prevent text selection */
    margin-right: 2px;               /* Small gap between tabs */
    border-radius: 3px 3px 0 0;      /* Rounded top corners only */
    min-width: 60px;                 /* Don’t shrink to nothing */
    flex: 0 1 auto;                  /* Allow shrinking to fit in non-scroll mode */
    overflow: hidden;                /* Hide overflow content */
    white-space: nowrap;             /* Prevent text wrapping */
}

/* Tab Icon Styling */
.tab-icon {
    width: 16px;                     /* Fixed icon width */
    height: 16px;                    /* Fixed icon height */
    margin-right: 6px;               /* Space between icon and text */
    flex-shrink: 0;                  /* Don't shrink the icon */
    display: flex;                   /* Center emoji icons */
    align-items: center;             /* Center vertically */
    justify-content: center;         /* Center horizontally */
    font-size: 10px;                 /* Smaller font for emoji icons */
}

/* Tab Icon Image Styling */
.tab-icon img {
    width: 100%;                     /* Fill icon container */
    height: 100%;                    /* Fill icon container */
    object-fit: contain;             /* Maintain aspect ratio */
}

/* Tab Text Styling */
.tab-text {
    flex: 1;                         /* Take remaining space */
    overflow: hidden;                /* Hide overflow text */
    text-overflow: ellipsis;         /* Show ... for long text */
}

/* Home tab special styling - no icon needed */
.content-tab.home-tab .tab-icon { display: none; }

/* Make Home tab size to its text only (no stretching) */
.content-tab.home-tab {
    flex: 0 0 auto;          /* Do not grow or shrink; width based on content */
    min-width: 0;            /* Allow narrower than global min-width */
}
.content-tab.home-tab .tab-text {
    flex: 0 0 auto;          /* Prevent the text from expanding inside the tab */
}

/* Tabs navigation buttons */
.tabs-nav-btn {
    display: none;                   /* Shown via JS when needed */
    width: 20px;
    height: 20px;
    background: #1a1a1a;
    color: #cccccc;
    border: 1px solid #444;
    border-radius: 2px;
    align-items: center;
    justify-content: center;
    line-height: 18px;
    cursor: pointer;
    user-select: none;
}
.tabs-nav-btn:hover { background: #222; color: #fff; }
.tabs-nav-btn.disabled { opacity: 0.4; pointer-events: none; }

/* Scroll mode switches list to natural width (no shrink), enabling scrolling */
.content-tabs-header.tabs-scroll-mode .content-tabs-list { width: auto; }
.content-tabs-header.tabs-scroll-mode .content-tab { flex: 0 0 auto; }

/* Active Tab Styling */
.content-tab.active {
    background-color: #2c2c2c;       /* Slightly lighter background */
    color: #ffffff;                  /* White text for active tab */
    border-color: #76B900;           /* NVIDIA green border for active tab */
    border-bottom: 1px solid #2c2c2c; /* Bottom border matches background to "connect" */
    position: relative;              /* For z-index stacking */
    z-index: 1;                      /* Above other tabs */
}

/* Tab Hover Effect (for inactive tabs) */
.content-tab:not(.active):hover {
    background-color: #222222;       /* Slightly lighter on hover */
    color: #ffffff;                  /* White text on hover */
}

/* Tab Close Button */
.tab-close-btn {
    margin-left: 8px;
    font-size: 14px;
    line-height: 1;
    color: #888888;
    cursor: pointer;
    opacity: 1;
    transition: color 0.2s;
}

.tab-close-btn:hover {
    color: #ffffff;
}

/* Active tab close button styling */
.content-tab.active .tab-close-btn {
    color: #cccccc;
}

.content-tab.active .tab-close-btn:hover {
    color: #ffffff;
}

/* Overlay above the content iframe */
.content-modal-overlay {
    position: absolute;
    inset: 0;
    display: none;                   /* Hidden by default */
    align-items: center;             /* Center modal vertically */
    justify-content: center;         /* Center modal horizontally */
    z-index: 5;                      /* Above iframe within content pane */
    pointer-events: none;            /* Don’t block clicks when hidden */
}

.content-modal-overlay.show {
    display: flex;                   /* Show and center */
    pointer-events: auto;            /* Capture clicks when visible */
    background: rgba(0,0,0,0.35);    /* Dim backdrop */
}

.content-modal {
    width: 50vw;                     /* Increased width; aspect-ratio preserves height proportion */
    aspect-ratio: 16 / 10;           /* Maintain 16:10 ratio */
    background: #222;                /* Visible rectangle placeholder */
    border: 1px solid #76B900;       /* Match Agent chat input border thickness */
    border-radius: 8px;              /* Nice corners */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Keep depth without extra green ring */
    overflow: hidden;                /* Clip inner iframe to rounded corners */
    background-clip: padding-box;    /* Prevent background bleeding into border */
}

/* ===================================================================
   APPS LOADING MODAL
   ================================================================= */

.apps-loading-overlay {
    position: absolute;
    inset: 0;
    display: none;                   /* Hidden by default */
    align-items: center;             /* Center modal vertically */
    justify-content: center;         /* Center modal horizontally */
    z-index: 10;                     /* Above other modals */
    pointer-events: none;            /* Don't block clicks when hidden */
}

.apps-loading-overlay.show {
    display: flex;                   /* Show and center */
    pointer-events: auto;            /* Capture clicks when visible */
    background: rgba(0,0,0,0.7);     /* Darker backdrop than popup */
}

.apps-loading-modal {
    width: 35vw;                     /* Same as original modal */
    aspect-ratio: 16 / 10;           /* Maintain 16:10 ratio */
    background: #2c2c2c;             /* Modal background */
    border: 1px solid #76B900;       /* Green border */
    border-radius: 8px;              /* Rounded corners */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); /* Shadow */
    overflow: hidden;                /* Clip content to rounded corners */
    display: flex;
    flex-direction: column;
}

.apps-modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.apps-modal-body {
    flex: 1;
    padding: 0;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
}

.apps-modal-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    border-radius: 0;
}

.apps-modal-footer {
    border-top: 1px solid #404040;
    padding: 8px 16px 6px 16px;
    background-color: #252525;
    border-radius: 0 0 8px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
}

.apps-modal-app-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.apps-modal-app-icon {
    font-size: 12px;
    line-height: 1;
    margin: 0;
}

.apps-modal-app-name {
    font-size: 11px;
    color: #ffffff;
    font-weight: normal;
    margin: 0;
}

.apps-modal-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.apps-modal-loading-text {
    font-size: 11px;
    color: #76B900;
    font-weight: normal;
}

.apps-modal-button {
    padding: 4px 12px;
    border: 1px solid #333;
    border-radius: 4px;
    font-size: 11px;
    font-weight: normal;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 60px;
    height: 22px;
    background-color: #1a1a1a;
    color: #f0f0f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.apps-modal-button.open {
    background-color: #1a1a1a;
    border: 1px solid #76B900;
    color: #76B900;
}

.apps-modal-button.open:hover {
    background-color: #333333;
}

.apps-modal-button.cancel:hover {
    background-color: rgba(255,255,255,0.06);
}

.apps-modal-button:focus {
    outline: 1px solid #76B900;
    outline-offset: 1px;
}

.apps-modal-button.open:focus {
    outline: none;
}

/* Vertical resize handle between sidebar and content */
.project-resize-handle {
    width: 6px;                      /* Slightly smaller handle */
    cursor: col-resize;              /* Column resize cursor */
    background-color: #666;          /* Visible grey */
    flex: 0 0 6px;                   /* Fixed width */
    transition: background-color 0.2s ease;
    /* No borders here; separators come from adjacent panels for consistency */
    position: relative;              /* For center reopen button */
    z-index: 1500;                   /* Sit above adjacent iframes for clickability */
    touch-action: none;              /* Prevent touch gestures from stealing pointer events */
}

.project-resize-handle:hover,
.project-resize-handle.dragging {
    background-color: #4a90e2;      /* Blue when active */
}

/* Reopen buttons inside handles (hidden by default, show in collapsed state) */
.project-resize-handle .reopen-btn,
.chatbot-resize-handle .reopen-btn {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;                     /* Square button */
    height: 20px;
    border-radius: 4px;              /* Square with slight radius */
    border: 1px solid #444;
    background: #2a2a2a;
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    display: inline-flex;            /* Perfect centering */
    align-items: center;
    justify-content: center;
    line-height: 1;                 /* Remove baseline bias */
    pointer-events: none;            /* Do not block dragging unless collapsed */
}

.project-resize-handle .reopen-btn svg,
.chatbot-resize-handle .reopen-btn svg { display: block; width: 12px; height: 12px; }

.reopen-left { left: 50%; }
.reopen-right { left: 50%; }

.reopen-btn:hover { background: #3a3a3a; }

/* Collapsed states */
.explorer-collapsed .project-manager-container { display: none; }
.explorer-collapsed #projectResizeHandle .reopen-btn { display: block !important; pointer-events: auto; }
.explorer-collapsed #projectResizeHandle {
    width: 12px;                    /* Narrower collapsed rectangle */
    flex: 0 0 12px;
    display: flex;                   /* Center child horizontally & vertically */
    align-items: center;
    justify-content: center;
}
.explorer-collapsed #projectResizeHandle .reopen-btn {
    position: static;
    transform: none;
    margin: 0;                      /* No extra offsets */
    width: 9px;                     /* Half the width */
    height: 36px;                   /* Double the height */
}
.explorer-collapsed #projectResizeHandle .reopen-btn svg { width: 8px; height: 20px; }

.agent-collapsed .chatbot-container { display: none; }
.agent-collapsed #chatResizeHandle .reopen-btn { display: block !important; pointer-events: auto; }
.agent-collapsed #chatResizeHandle {
    width: 12px;                    /* Narrower collapsed rectangle */
    flex: 0 0 12px;
    display: flex;                   /* Center child horizontally & vertically */
    align-items: center;
    justify-content: center;
}
.agent-collapsed #chatResizeHandle .reopen-btn {
    position: static;
    transform: none;
    margin: 0;                      /* No extra offsets */
    width: 9px;                     /* Half the width */
    height: 36px;                   /* Double the height */
}
.agent-collapsed #chatResizeHandle .reopen-btn svg { width: 8px; height: 20px; }

/* When history is expanded, adjust main content position */
/* Removed absolute positioning adjustments; main content flows naturally */

/* -----------------------------------------------------------------------------
   HOME PAGE CONTENT
   -----------------------------------------------------------------------------
   Main content area styling for the home page with logo grid */
.home-content {
    max-width: 1200px;               /* Maximum width for large screens */
    margin: 0 auto;                  /* Center the content */
    padding: 20px;                   /* Reduced padding around the content */
    height: calc(100vh - 178px);     /* Exact height: viewport - headers - footer */
    overflow: hidden;                /* Prevent scrolling within content */
    display: flex;                   /* Flexbox for centering */
    align-items: center;             /* Center content vertically */
    justify-content: center;         /* Center content horizontally */
}

.logo-grid {
    display: flex;                   /* Flexbox for grid layout */
    flex-direction: column;          /* Stack rows vertically */
    gap: 20px;                       /* Reduced space between rows */
    align-items: center;             /* Center the grid */
    width: 100%;                     /* Full width */
    height: 100%;                    /* Full height of container */
    justify-content: center;         /* Center vertically */
}

.logo-row {
    display: flex;                   /* Flexbox for horizontal layout */
    gap: 30px;                       /* Reduced space between logo items */
    justify-content: center;         /* Center the items in each row */
    flex-wrap: wrap;                 /* Allow wrapping on smaller screens */
}

.logo-item {
    display: flex;                   /* Flexbox for vertical layout */
    flex-direction: column;          /* Stack logo, name, and description */
    align-items: center;             /* Center align all content */
    text-align: center;              /* Center text alignment */
    background-color: #333333;       /* Dark background for each item */
    border-radius: 12px;             /* Rounded corners */
    padding: 20px 15px;              /* Reduced padding inside each item */
    width: 240px;                    /* Reduced width for better fit */
    height: 160px;                   /* Fixed height instead of min-height */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
    cursor: pointer;                 /* Pointer cursor to indicate clickable */
    border: 1px solid #404040;       /* Subtle border */
    flex-shrink: 0;                  /* Prevent shrinking */
}

.logo-item:hover {
    transform: translateY(-5px);     /* Slight lift effect on hover */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); /* Enhanced shadow on hover */
    background-color: #3a3a3a;       /* Slightly lighter background on hover */
}

.app-logo {
    margin-bottom: 10px;             /* Reduced space below the logo */
    display: flex;                   /* Flexbox for centering */
    align-items: center;             /* Center vertically */
    justify-content: center;         /* Center horizontally */
    width: 60px;                     /* Reduced width for logo container */
    height: 60px;                    /* Reduced height for logo container */
    background-color: #404040;       /* Background for logo area */
    border-radius: 8px;              /* Smaller rounded logo container */
    margin: 0 auto 10px auto;        /* Center the logo container */
}

.app-icon {
    width: 40px;                     /* Reduced logo icon size */
    height: 40px;                    /* Reduced logo icon size */
    object-fit: contain;             /* Scale to fit without distortion */
    filter: brightness(1.1);        /* Slightly brighten the icons */
}

.app-name {
    font-size: 16px;                 /* Reduced font for app names */
    font-weight: bold;               /* Bold app names */
    color: #ffffff;                  /* White text */
    margin-bottom: 6px;              /* Reduced space below app name */
    line-height: 1.1;                /* Tighter line height */
}

.app-description {
    font-size: 11px;                 /* Smaller font for descriptions */
    color: #cccccc;                  /* Light grey text */
    line-height: 1.3;                /* Good line spacing for readability */
    max-width: 200px;                /* Reduced text width for better fit */
    overflow: hidden;                /* Hide overflow text */
    display: -webkit-box;            /* Enable text clamping */
    -webkit-line-clamp: 3;           /* Limit to 3 lines */
    line-clamp: 3;                   /* Standard property for compatibility */
    -webkit-box-orient: vertical;    /* Vertical orientation for clamping */
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .logo-row {
        flex-direction: column;      /* Stack items vertically on small screens */
        gap: 20px;                   /* Reduced gap for mobile */
    }
    
    .logo-item {
        width: 100%;                 /* Full width on mobile */
        max-width: 300px;            /* Maximum width to prevent too wide items */
    }
    
    .home-content {
        padding: 20px 15px;          /* Reduced padding on mobile */
    }
}

@media (max-width: 480px) {
    .app-name {
        font-size: 16px;             /* Smaller font on very small screens */
    }
    
    .app-description {
        font-size: 12px;             /* Smaller description text */
    }
    
    .logo-item {
        padding: 20px 15px;          /* Reduced padding on very small screens */
        min-height: 180px;           /* Reduced minimum height */
    }
}

/* Responsive adjustments for main content when chatbot width changes */
@media (max-width: 1200px) {
    .main-content {
        right: 300px;
    }
}

@media (max-width: 1000px) {
    .main-content {
        right: 280px;
    }
}

/* -----------------------------------------------------------------------------
   WORKSPACE CONTAINER
   ----------------------------------------------------------------------------- */
.workspace-container {
    flex: 1;                         /* Take remaining space */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* -----------------------------------------------------------------------------
   CHATBOT RESIZE HANDLE
   ----------------------------------------------------------------------------- */
.chatbot-resize-handle {
    width: 6px;                      /* Slightly smaller handle */
    background-color: #666666;      /* Gray background for visibility */
    cursor: col-resize;              /* Resize cursor */
    transition: background-color 0.2s ease;
    flex-shrink: 0;                  /* Don't shrink */
    /* Keep separator on chatbot container (2px) to match Explorer side */
    position: relative;              /* For center reopen button */
    z-index: 2;                      /* Sit above adjacent iframes for clickability */
    touch-action: none;              /* Prevent touch gestures from stealing pointer events */
}

.chatbot-resize-handle:hover {
    background-color: #4a90e2;      /* Blue on hover */
}

/* -----------------------------------------------------------------------------
   CHATBOT CONTAINER
   ----------------------------------------------------------------------------- */
.chatbot-container {
    width: 18vw;                     /* Initial width set to 20% of viewport width */
    background-color: green;         /* Green background for visibility */
    border-left: 2px solid #333;    /* Border to separate from workspace */
    flex-shrink: 0;                  /* Don't shrink */
    will-change: width;              /* Hint browser for smoother resizing */
    min-width: 300px;                /* Prevent too-thin panel */
    max-width: 50vw;                 /* Prevent too-wide panel */
    overflow: hidden;                /* Prevent internal overflow from creating side scroll */
}

/* Ensure the PM iframe fills the sidebar */
.project-manager-container iframe#pmFrame {
    width: 100%;
    height: 100%;
    display: block;
    background: transparent;
    border: none;
}

/* -----------------------------------------------------------------------------
   CHATBOT PARENT HEADER (ABOVE AGENT IFRAME)
   ----------------------------------------------------------------------------- */
.chatbot-header {
    height: 24px;
    background-color: #2a2a2a;      /* Match Navigation/Menu bar */
    border-bottom: 1px solid #555;  /* Subtle separator */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;                 /* Horizontal padding */
}

.chatbot-header-title {
    font-size: 11px;
    color: #b0b0b0;                 /* Muted label if needed */
}

.chatbot-collapse-btn {
    background: transparent;
    color: #b0b0b0;
    border: 1px solid #444;
    border-radius: 4px;
    width: 18px;
    height: 18px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.chatbot-collapse-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }