/* ================================
   GLASSMORPHISM CSS - glass.css
   A complete glassmorphism design system
   ================================ */

/* CSS Variables for Glass Effects */
:root {
    /* Glass Colors */
    --border-color: rgba(255, 255, 255, 0.18);
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-bg-strong: rgba(255, 255, 255, 0.12);
    --glass-bg-stronger: rgba(255, 255, 255, 0.16);
    --glass-bg-stronger-yet: rgba(255, 255, 255, 0.25);
    --glass-bg-even-stronger: rgba(255, 255, 255, 0.33);
    --glass-bg-frosted: rgba(255, 255, 255, 0.8);
    --glass-bg-tinted: rgba(0, 0, 0, 0.66);
    --glass-bg-blue-tinted: rgba(62, 139, 198, 0.16);

    /* Dropdown */
    --backdrop-blur-strong: 24px;
    --shadow-dropdown: 0 12px 40px rgba(31, 38, 135, 0.4);
    --glass-bg-menu: rgba(255, 255, 255, 0.95);
        
    /* Glass Shadows */
    --shadow-light: 0 8px 16px rgba(31, 38, 135, 0.37);
    --shadow-glass: 0 8px 32px rgba(31, 38, 135, 0.37);
    --shadow-glass-strong: 0 15px 35px rgba(31, 38, 135, 0.5);
    --shadow-input: 0 8px 8px rgba(0, 0, 0, 0.37);
    
    /* Blur Effects */
    --backdrop-blur: 16px;
    
    /* Primary Color & Glow */
    --primary-color: rgb(140, 198, 62);
    --primary-glow: rgba(140, 198, 62, 0.4);
    --tertairy:#004c0c; 
}

/* Dark Theme Glass Variables */
[data-bs-theme="dark"] {
    --primary-color: #a6e350;
    --primary-glow: rgba(166, 227, 80, 0.4);
    --border-color: rgba(255, 255, 255, 0.12);
    --glass-bg: rgba(0, 0, 0, 0.12);
    --glass-bg-strong: rgba(0, 0, 0, 0.18);
    --glass-bg-stronger: rgba(0, 0, 0, 0.25);
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.75);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-glass-strong: 0 15px 35px rgba(0, 0, 0, 0.6);
    --shadow-dropdown: 0 12px 40px rgba(0, 0, 0, 0.6);
    --glass-bg-menu: rgba(0, 0, 0, 0.85);
}

/* ================================
   BASE GLASS CLASSES
   ================================ */

/* Basic Glass Effect */
.nav-tabs,
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--backdrop-blur));
    -webkit-backdrop-filter: blur(var(--backdrop-blur));
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-glass);
}

/* Strong Glass Effect */
.output-document-item,
.glass-strong{
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--backdrop-blur));
    -webkit-backdrop-filter: blur(var(--backdrop-blur));
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-glass-strong);
}

.tooltip .arrow {opacity: 0.4;}

.tooltip .arrow,
.tooltip .tooltip-inner {
    background: var(--glass-bg-tinted);
    backdrop-filter: blur(var(--backdrop-blur));
    -webkit-backdrop-filter: blur(var(--backdrop-blur));
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-glass-strong);
}

[data-bs-theme="dark"] .tooltip .arrow,
[data-bs-theme="dark"] .tooltip .tooltip-inner
{
    background: var(--glass-bg-frosted);
}

/* Strong Glass Effect */
.output-document-item{box-shadow: var(--shadow-light);}

/* Stronger Glass Effect */
.tool-container,
.--secondary,
.result-container,
/* .form-control,
.form-select, */
.glass-stronger {
    background: var(--glass-bg-stronger);
    backdrop-filter: blur(var(--backdrop-blur));
    -webkit-backdrop-filter: blur(var(--backdrop-blur));
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-glass-strong);
}
.ai-model-selector .form-select,
.assistant-item .form-control
{
    box-shadow: none;

}
.--secondary:hover,
.result-container:hover {
    background: rgba(255,255,255,0.8);
}

[data-bs-theme="dark"] .--secondary:hover,
[data-bs-theme="dark"] .result-container:hover {
    background: rgba(52, 58, 64, 0.8);
}

/* Frosted Glass Effect */
.dropdown-menu,
.glass-frosted {
    background: var(--glass-bg-frosted);
    backdrop-filter: blur(var(--backdrop-blur));
    -webkit-backdrop-filter: blur(var(--backdrop-blur));
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-glass-strong);
}
/* Tinted Glass Effect */
[data-bs-theme="dark"] .result-container,
.output-document-item.assistant-document-item,
.glass-tinted {
    background: var(--glass-bg-tinted);
    backdrop-filter: blur(var(--backdrop-blur));
    -webkit-backdrop-filter: blur(var(--backdrop-blur));
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-glass-strong);
}
.output-document-item.assistant-document-item
{
    background: var(--glass-bg-frosted);
}

.output-document-item.assistant-document-item
{
    color: var(--primary);
}

.output-document-item.assistant-document-item .form-control
{
    box-shadow: inset rgba(31, 38, 135, 0.3) 0px 3px 5px 0px;
}

.panel-resize-handle::before {
    background-color:  0 8px 32px rgba(31, 38, 135, 0.37);
    background-image: linear-gradient(45deg,  0 8px 32px rgba(31, 38, 135, 0.6)50%,  0 8px 32px rgba(31, 38, 135, 0.27) 50%);
  }

/* ================================
   ANIMATED GRADIENT BACKGROUNDS
   ================================ */

/* Light Theme Gradient Background */
body {
    background: linear-gradient(135deg, 
    rgba(255, 239, 243, 0.5) 0%,   /* Very pale rose */
    rgba(213, 233, 250, 0.5) 20%,  /* Very pale lavender */
    rgba(255, 255, 236, 0.5) 40%,  /* Almost white peach */
    rgba(227, 227, 255, 0.5) 60%,  /* Very pale sky blue */
    rgba(207, 248, 228, 0.5) 80%,  /* Very pale mint */
    rgba(233, 208, 246, 0.5) 100%  /* Very pale lavender */
    );
    background-size: 400% 400%;
    /* animation: gradientShift 15s ease infinite; */
    color: var(--text-primary);
}

/* Dark Theme Gradient Background */
[data-bs-theme="dark"] body {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #533483 75%, #e94057 100%);
    background-size: 400% 400%;
    animation: none;
}

/* Dark Theme Gradient Background */
[data-bs-theme="dark"] .dropdown-menu  {
    background-color: var(--glass-bg-tinted);
}


/* Gradient Animation */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ================================
   GLASS COMPONENT STYLING
   ================================ */

/* Navigation Items with Glass Effects */
.nav-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    transition: all 0.3s ease;
    /* color: var(--text-secondary); */
}

/* Thread Items with Glass Effects */
.thread-item {
    border-radius: 10px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.thread-item:hover {
    background: var(--glass-bg);
    /* border: 1px solid var(--border-color); */
    transform: translateX(4px);
    box-shadow: var(--shadow-glass);
}

/* Active Thread with Glass Glow */
.active-thread {
    background: var(--glass-bg-strong);
    /* border: 1px solid var(--primary-color); */
    font-weight: 500;
    box-shadow: 0 0 20px var(--primary-glow);
}

/* Input Items with Glass Effects */
.input-item {
    border-radius: 12px;
    transition: all 0.3s ease;
    color: var(--text-secondary);
}

.input-item:hover {
    color: var(--primary-color);
    background: var(--glass-bg);
    /* border: 1px solid var(--border-color); */
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--shadow-glass);
}

/* Sidebar Toggle with Glass Effects */
.sidebar-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px var(--primary-glow);
}

/* ================================
   GLASS FORM ELEMENTS
   ================================ */

/* Glass Input Box */
.input-box {
    border-radius: 16px;
    transition: all 0.3s ease;
}

.input-box:hover {
    box-shadow: var(--shadow-glass-strong);
    transform: translateY(-2px);
}

/* Expandable Textarea */
.expandable-textarea {
    color: var(--text-primary);
    border-radius: 12px;
}

.expandable-textarea::placeholder {
    color: var(--text-secondary);
}

/* Consolidated glass.css nav-tabs rule */
.nav-tabs {
    border-radius: 0 0 16px 16px;
}

/* Glass Send Button */
.btn {
    background:  linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 50%); /* 40% translucent, colorless background */
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.12); /* Adjusted to be colorless and translucent */
    transition: all 0.3s ease;
}

[data-bs-theme="dark"] #theme-toggle a,
[data-bs-theme="dark"] .btn-outline-dark,
[data-bs-theme="dark"] .nav-tabs .nav-link
{
    color: rgba(255, 255, 255, .6);
}

[data-bs-theme="dark"] #theme-toggle a.pt-1:hover
{
    color: var(--primary-color);
}

[data-bs-theme="dark"] .btn-outline-secondary {color: white;}
button.result-icon {
    background:  linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 50%); /* 40% translucent, colorless background */
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.12); /* Adjusted to be colorless and translucent */
    transition: all 0.3s ease;
}

button.result-icon:hover 
{
    background:linear-gradient(135deg, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, 0.0) 50%);
    background-color: var(--primary-color);
    color: #ffffff;
}
.send-button {
    background: linear-gradient(135deg, var(--primary-color) 0%, #7cb72d 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 25px rgba(140, 198, 62, 0.3);
    transition: all 0.3s ease;
}

.send-button:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(140, 198, 62, 0.5);
}

/* ================================
   GLASS CHAT TOOLS
   ================================ */
   

/* Chat Tool Items */
.chat-tool {
    border-radius: 10px;
    position: relative;
    /* overflow: hidden; */
    transition: all 0.3s ease;
    color: var(--text-secondary);
}

.chat-tool:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
}

/* ================================
   GLASS MESSAGE COMPONENTS
   ================================ */

/* Human Message with Glass Gradient */
.message-human {
    background: linear-gradient(135deg, var(--primary-color) 0%, #7cb72d 100%);
    color: white;
    box-shadow: 0 8px 25px rgba(140, 198, 62, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Message Animation */
.message {
    animation: messageSlideIn 0.4s ease-out;
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================
   GLASS DOCUMENT COMPONENTS
   ================================ */

/* Output Document Items */
.output-document-item {
    border-radius: 12px;
    transition: all 0.3s ease;
    animation: documentSlideIn 0.4s ease-out;
}

.output-document-item:hover {
    box-shadow: var(--shadow-glass-strong);
}

@keyframes documentSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Document Trigger */
.document-trigger {
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.document-trigger:hover {
    background: var(--glass-bg);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glass);
}

.document-trigger i {
    color: var(--primary-color);
}

#message-list
{
    visibility: visible;
    /* overflow-y: auto; */
}
/* ================================
   GLASS BUTTON COMPONENTS
   ================================ */

/* Glass Button Actions */
.btn {
    transition: all 0.3s ease;
}

.btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px var(--primary-glow);
}

/* Panel Minimize Button */
.panel-minimize {
    border-radius: 50%;
    transition: all 0.3s ease;
    color: var(--text-secondary);
}

.panel-minimize:hover {
    background: var(--glass-bg);
    color: var(--primary-color);
    transform: scale(1.1);
}

/* Panel Toggle Button */
.panel-toggle-button {
    border-radius: 50%;
    transition: all 0.3s ease;
    color: white;
}

.panel-toggle-button:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 35px var(--primary-glow);
}

/* ================================
   GLASS DROPDOWN COMPONENTS
   ================================ */

/* Dropdown Menus */
.dropdown-menu {
    border-radius: 12px;
    border: 1px solid var(--border-color);
    /* animation: menuSlideIn 0.3s ease-out; */ /* Removed animation to prevent conflict with base theme */
}

.dropdown-item {
    color: var(--text-secondary);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.dropdown-item:hover {
    background: var(--glass-bg);
    color: var(--primary-color);
    transform: translateX(4px);
}

/* Menu Animation */
@keyframes menuSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================
   GLASS FORM CONTROLS
   ================================ */

/* Form Check Input with Glow */
.form-check-input {
    border-color: var(--primary-color) !important;
}
.form-check-input:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 15px var(--primary-glow);
}

.form-check-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem var(--primary-glow);
}

/* Primary Button with Glass Effect */
.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    background: linear-gradient(135deg, var(--primary-color) 0%, #7cb72d 100%);
    border-color: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--primary-glow);
}

/* ================================
   GLASS MODAL COMPONENTS
   ================================ */

/* Modal Content */
.modal-content {
    border-radius: 16px;
    background: var(--glass-bg-even-stronger);
    backdrop-filter: blur(var(--backdrop-blur));
    -webkit-backdrop-filter: blur(var(--backdrop-blur));
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-glass);
}

[data-bs-theme="dark"] .modal-content {
    background: var(--glass-bg-tinted);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
    border-radius: 16px 16px 0 0;
}

.modal-title
{
    text-shadow: -1 -1 0 1 rgba(255, 255, 255, 0.75);
}

.modal-footer {
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 16px 16px;
}

.modal-content .btn-outline-primary {
    color: var(--tertiary); 
    border-color: var(--tertiary);
    
}

.modal-content .nav-link {
    color: var(--tertairy);
  }

[data-bs-theme="dark"]  .modal-content .nav-link {
      color: #cecece;  }

/* ================================
   GLASS SCROLLBARS
   ================================ */

/* Custom Glass Scrollbars */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--glass-bg-strong);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--glass-bg-stronger);
}

.thread-list::-webkit-scrollbar {
    width: 6px;
}

.thread-list::-webkit-scrollbar-thumb {
    background: var(--glass-bg-strong);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

/* ================================
   GLASS OVERLAYS
   ================================ */

/* Document Overlay */
.document-overlay {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
}

/* ================================
   GLASS ANIMATIONS
   ================================ */

/* Glass Appear Animation */
.glass, .glass-strong, .glass-stronger {
    animation: glassAppear 0.6s ease-out;
}

@keyframes glassAppear {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ================================
   GLASS SPECIAL EFFECTS
   ================================ */

/* Logo Glow Effect */
#ws-status.good .symbol {
    fill: var(--primary-color) !important;
    filter: drop-shadow(0 0 8px var(--primary-glow));
}

/* Text Color Overrides */
.logotype {
    fill: var(--text-primary);
}

/* ================================
   Form overrides
   ================================ */

   .form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-select ~ label::after 
    {
        background-color: transparent !important;
    }


/* ================================
   RESPONSIVE GLASS ADJUSTMENTS
   ================================ */

@media (max-width: 768px) {
    /* Reduce blur for performance on mobile */
    :root {
        --backdrop-blur: 8px;
    }
    
    /* Simplify glass effects on mobile */
    .glass, .glass-strong, .glass-stronger {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

@media print {
    .assistant-message,
    .user-message
    {
        box-shadow: none;
    }
}




/* ================================
   Worklings Additions to be sanitized
   ================================ */

   .tab-pane .content-area
   {
     padding: 2rem;
     padding-bottom: 180px;
   }
   
 /* Top Accordion Banner with Glassmorphism */
   .top-banner {
       background: var(--glass-bg-stronger);
       /* backdrop-filter: blur(var(--backdrop-blur));
       -webkit-backdrop-filter: blur(var(--backdrop-blur)); */
       border-bottom: 1px solid var(--border-color);
       box-shadow: var(--shadow-glass);
   }
   
   .accordion-button {
       background: var(--glass-bg);
       backdrop-filter: blur(var(--backdrop-blur));
       -webkit-backdrop-filter: blur(var(--backdrop-blur));
       border: 1px solid var(--border-color);
       padding: 1rem 1.5rem;
       font-weight: 500;
       box-shadow: none;
       color: var(--text-primary);
       transition: all 0.3s ease;
   }
   
   .accordion-button:not(.collapsed) {
       background: var(--glass-bg-strong);
       backdrop-filter: blur(var(--backdrop-blur));
       -webkit-backdrop-filter: blur(var(--backdrop-blur));
       color: var(--primary-color);
       box-shadow: var(--shadow-glass);
       border: 1px solid var(--primary-color);
   }
   
   .accordion-button:focus {
       box-shadow: 0 0 0 0.25rem var(--primary-glow);
       border-color: var(--primary-color);
   }
   
   .accordion-button:hover {
       background: var(--glass-bg-strong);
       backdrop-filter: blur(var(--backdrop-blur));
       -webkit-backdrop-filter: blur(var(--backdrop-blur));
       transform: translateY(-1px);
   }
   
   .accordion-body {
       padding: 0;
       background: var(--glass-bg-stronger);
       backdrop-filter: blur(var(--backdrop-blur));
       -webkit-backdrop-filter: blur(var(--backdrop-blur));
       border-top: 1px solid var(--border-color);
       border-left: 1px solid var(--border-color);
       border-right: 1px solid var(--border-color);
       border-bottom: 1px solid var(--border-color);
   }
     /* Tab Section */
 
     /* #worklingTabs position/z-index removed — managed by app.css */
 
 
   .nav-tabs .nav-link {
       border: none;
       border-radius: 0;
       color: var(--text-muted);
       font-weight: 400;
       font-size: 0.9rem;
       padding: .25rem .5rem;
       margin-right: 1rem;
       transition: all 0.3s ease;
   }
/* Tab layout now managed by app.css — glass.css provides only visual styling */
#worklingTabContent
{
margin-top: 50px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    #mobile-nav
    {
        height: 60px;
    }
    #worklingTabContent
    {
        margin-top: 0;
    }
    .nav-tabs {
        flex-direction: column; /* Stack tabs vertically */
        display: none;
    }
    .nav-tabs .nav-link {
        padding: 15px; /* Adjust padding as required for touch targets */
        margin-bottom: 0; /* Remove bottom of default horizontal border */
    }
}
 
   .nav-tabs .nav-link:hover {
       border-color: transparent;
       color: var(--primary);
   }
 
   .nav-tabs .nav-link.active {
     background: transparent;
       color: var(--primary);
       border-color: var(--border-color) var(--border-color) white;
       /* border-top: 2px solid var(--primary); */
   }
 
   .nav-tabs .nav-link i {
       margin-right: 0.5rem;
   }
 
   /* Profile Card Styling with Glass Effects */
   .profile-image {
       width: 60px;
       height: 60px;
       border-radius: 50%;
       object-fit: cover;
       border: 2px solid var(--border-color);
       box-shadow: var(--shadow-light);
   }
   
   .stars {
       color: #fbbf24;
       filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.3));
   }
   
   .skill-badge {
       font-size: 0.75rem;
       margin-right: 0.5rem;
       margin-bottom: 0.5rem;
       background: var(--glass-bg-stronger);
       backdrop-filter: blur(var(--backdrop-blur));
       -webkit-backdrop-filter: blur(var(--backdrop-blur));
       color: var(--primary-color);
       border: 1px solid var(--primary-color);
       padding: 0.25rem 0.5rem;
       border-radius: 8px;
       transition: all 0.3s ease;
       box-shadow: var(--shadow-light);
   }
   
   .skill-badge:hover {
       background: var(--primary-color);
       color: white;
       transform: translateY(-1px);
       box-shadow: 0 4px 12px var(--primary-glow);
   }
   
   .online-indicator {
       width: 10px;
       height: 10px;
       background-color: var(--primary-color);
       border-radius: 50%;
       display: inline-block;
       margin-right: 0.5rem;
       box-shadow: 0 0 8px var(--primary-glow);
       animation: pulse 2s infinite;
   }
   
   @keyframes pulse {
       0% { box-shadow: 0 0 8px var(--primary-glow); }
       50% { box-shadow: 0 0 16px var(--primary-glow); }
       100% { box-shadow: 0 0 8px var(--primary-glow); }
   }
   
   .required-tools .tool-item {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 0.5rem 0;
       border-bottom: 1px solid var(--border-color);
       color: var(--text-primary);
       transition: all 0.3s ease;
   }
   
   .required-tools .tool-item:hover {
       background: var(--glass-bg);
       backdrop-filter: blur(var(--backdrop-blur));
       -webkit-backdrop-filter: blur(var(--backdrop-blur));
       padding-left: 0.5rem;
       padding-right: 0.5rem;
       border-radius: 6px;
       transform: translateX(4px);
   }
   
   .tool-item:last-child {
       border-bottom: none;
   }
   
   .tool-status {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       display: inline-block;
       box-shadow: 0 0 4px rgba(0,0,0,0.3);
   }
   
   .tool-status.available {
       background-color: var(--primary-color);
       box-shadow: 0 0 8px var(--primary-glow);
   }
   
   .tool-status.unavailable {
       background-color: #ef4444;
       box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
   }
   
   /* Main Content */
   .main-content {
       display: flex;
       flex-direction: column;
   }
   
   .compact-banner-content {
       display: flex;
       align-items: center;
       gap: 1rem;
   }
   
   .compact-info {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       color: var(--text-primary);
   }
   
   .banner-stats {
       display: flex;
       gap: 2rem;
       margin-left: auto;
       margin-right: 70px;
   }
   
   .stat-item {
       text-align: center;
       padding: 0.5rem;
       border-radius: 8px;
       background: var(--glass-bg);
       backdrop-filter: blur(var(--backdrop-blur));
       -webkit-backdrop-filter: blur(var(--backdrop-blur));
       border: 1px solid var(--border-color);
       transition: all 0.3s ease;
       min-width: 60px;
   }
   
   .stat-item:hover {
       background: var(--glass-bg-strong);
       transform: translateY(-2px);
       box-shadow: var(--shadow-light);
   }
   
   .stat-value {
       font-weight: 600;
       color: var(--primary-color);
       text-shadow: 0 0 8px var(--primary-glow);
   }
   
   .stat-label {
       font-size: 0.8rem;
       color: var(--text-secondary);
   }
 
   #workling-chat-header {
       width: 40px;
       padding: 5px;
       margin-left: 24px;
       margin-right: 24px;
       border-radius: 50%;
       border: 2px outset solid var(--border-color);
   }
 
   #workling-chat-header.accordion-button img
   {
     opacity: 0;
     transition: 0.3s ease all;
   }
 
   #workling-chat-header.accordion-button.collapsed img
   {
     opacity: 1;
   }
   
   /* Dark Mode Specific Overrides */
   [data-bs-theme="dark"] .top-banner {
       background: var(--glass-bg-tinted);
       box-shadow: var(--shadow-dropdown);
   }
   
   [data-bs-theme="dark"] .accordion-button {
       background: var(--glass-bg-strong);
       color: var(--text-primary);
   }
   
   [data-bs-theme="dark"] .accordion-button:not(.collapsed) {
       background: var(--glass-bg-stronger);
       color: var(--primary-color);
       box-shadow: var(--shadow-glass-strong);
   }
   
   [data-bs-theme="dark"] .accordion-body {
       background: var(--glass-bg-tinted);
       border-color: var(--border-color);
   }
   
   [data-bs-theme="dark"] .skill-badge {
       background: var(--glass-bg-stronger);
       border-color: var(--primary-color);
       color: var(--primary-color);
   }
   
   [data-bs-theme="dark"] .skill-badge:hover {
       background: var(--primary-color);
       color: var(--tertairy);
   }
   
   [data-bs-theme="dark"] .required-tools .tool-item {
       color: var(--text-primary);
       border-bottom-color: var(--border-color);
   }
   
   [data-bs-theme="dark"] .required-tools .tool-item:hover {
       background: var(--glass-bg-strong);
   }
   
   [data-bs-theme="dark"] .compact-info {
       color: var(--text-primary);
   }
   
   [data-bs-theme="dark"] .stat-item {
       background: var(--glass-bg-strong);
       border-color: var(--border-color);
   }
   
   [data-bs-theme="dark"] .stat-item:hover {
       background: var(--glass-bg-stronger);
       box-shadow: var(--shadow-glass);
   }
   
   [data-bs-theme="dark"] .stat-label {
       color: var(--text-secondary);
   }
   
   /* Additional Glassmorphism Effects */
   .accordion-item {
       border: none;
       border-radius: 0;
       /* overflow: hidden; */
   }
   
   [data-bs-theme="dark"] .accordion-button::after {
       filter: brightness(0) saturate(100%) invert(100%);
   }
   
   /* Animation for accordion expand/collapse */
   .accordion-collapse {
       transition: all 0.3s ease;
   }
   
   .accordion-body .container-fluid {
       animation: fadeInUp 0.4s ease-out;
   }
   
   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(10px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   /* Enhanced glassmorphism for profile section */
   .profile-details-container {
       background: var(--glass-bg);
       /* backdrop-filter: blur(var(--backdrop-blur));
       -webkit-backdrop-filter: blur(var(--backdrop-blur)); */
       border-radius: 12px;
       padding: 1rem;
       border: 1px solid var(--border-color);
       margin: 0.5rem;
   }
   
   [data-bs-theme="dark"] .profile-details-container {
       background: var(--glass-bg-strong);
   }


/* Normalize chat layout for print to remove left offsets/clipping */
/* Are we really here? */

@media print {
    /* Ensure wrappers don’t push left/right */
    #message-list,
    .message-list,
    .chat-container,
    #messages,
    .container,
    .nav-tabs,
    .main-content
 {
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      text-align: left !important; /* undo text-center */
    }
  
    /* Remove the 5% left offset and any bubble width constraints */
    .chat-message,
    .assistant-message,
    .user-message,
    .nav-tabs {
      margin: 0 0 1rem 0 !important;  /* kills margin-left: 5% */
      padding-left: 0 !important;
      padding-right: 0 !important;
      width: 100% !important;
      break-inside: avoid-page !important;
      page-break-inside: avoid !important;
    }
  
    /* Let message content use full width */
    .chat-message .message-content,
    .markdown.message-content {
      width: auto !important;
      max-width: 100% !important;
    }
  
    /* Also reset any viewport-capped containers so they don’t crop */
    html, body,
    .app-container,
    .main-content,
    #tab-wrapper,
    .tab-content,
    .tab-pane {
      height: auto !important;
      max-height: none !important;
      overflow: visible !important;
    }
  }