style.css

/* ==========================================================================
   1. GLOBAL & LAYOUT STYLES
   ========================================================================== */

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Main application container styling */
.gradio-container {
    border-radius: 15px;
    padding: 10px 20px; 
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); 
    margin: 10px;
}
.column-container {
    border-radius: 15px;
    padding: 15px; 
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); 
    margin: auto;    
}

.action-console-col {
    padding: 10px !important;
    border-color: var(--border-color-primary) !important;
    border-width: 1px !important;
    border-radius: 8px;
    margin-top: 10px;
}
.chatbot-container .message-row{
    max-width: calc(100% - var(--spacing-sm) * 6) !important;
}
.chatbot-container pre code {
    text-wrap: auto !important;
}
/* 2. Media Query for larger screens (desktops) */
@media (min-width: 1281px) {
    .gradio-container {        
        padding: 10px 370px;
        max-width: 2400px;
    }
}

/* Text shadow for main headings for better readability */
.gradio-container h1 {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Utility class to make elements fill their container's width */
/* .fillable {
    width: 100% !important;
    max-width: unset !important; 
} */
#trace-log {
    height: 200px !important;
    overflow-y: auto !important;
    background-color: var(--background-fill-primary);
    border: 1px solid var(--border-color-primary);
    border-radius: 8px;
    padding: 10px;
}
.fillable .sidebar-parent {
    padding-left: 10px !important;
    padding-right: 10px !important;
}


/* ==========================================================================
   2. CUSTOM SCROLLBAR STYLES (GLOBAL & SIDEBAR)
   ========================================================================== */

/* --- For WebKit browsers (Chrome, Safari, Edge, etc.) --- */
.sidebar-content::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: transparent;
}

.sidebar-content::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}

.sidebar-content::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background-color: rgba(136, 136, 136, 0.4);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.sidebar-content::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background-color: rgba(136, 136, 136, 0.7);
}

/* --- For Firefox --- */
.sidebar-content,
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(136, 136, 136, 0.7) transparent;
}


/* ==========================================================================
   3. SIDEBAR STYLES
   ========================================================================== */

.sidebar {
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Overrides for the content padding inside the sidebar */
.sidebar .sidebar-content {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Centers text within Markdown blocks inside the sidebar */
/* .sidebar .sidebar-content .column .block div .prose {
    text-align: center;
} */

/* Stylish override for the sidebar toggle button */
.sidebar .toggle-button {    
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600)) !important;
    border: none;
    padding: 12px 18px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    /* border-radius: 5px; */
    position: absolute;
    top: 50%;        
    right: -28px !important;
    left: auto !important;
    transform: unset !important;   
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0 !important
}

.sidebar.right .toggle-button {
    left: -28px !important;
    right: auto !important; 
    transform: rotate(180deg) !important;
}

.sidebar.open .chevron-left {
    transform: rotate(-135deg);
}

.bottom-bar .toggle-bottom-button {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600)) !important;
}
   
.toggle-button:hover {
    transform: scale(1.05);
} 
.bottom-bar .toggle-bottom-button .chevron {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom-bar .toggle-bottom-button .chevron-arrow {    
    position: relative !important;
    top: auto !important;
    left: auto !important;        
    width: 10px !important;
    height: 10px !important;
    border-bottom: 2px solid var(--body-text-color) !important;
    border-right: 2px solid var(--body-text-color) !important;    
    transform: rotate(-135deg) translateY(2px);
    margin-bottom: -4px;
}
.bottom-bar.open .chevron-arrow {
    transform: rotate(45deg) translateY(-2px) !important;
}

/* ==========================================================================
   5. COMPONENT-SPECIFIC STYLES & OVERRIDES
   ========================================================================== */

/* Custom styling for the cancel button */
#cancel-button { /* Corrected the typo from 'cancell' to 'cancel' */
    background: linear-gradient(120deg, var(--neutral-500) 0%, var(--neutral-600) 60%, var(--neutral-700) 100%) !important;
}
.custom-dropdown .wrap-inner input {
    padding-right: 22px;
}

#pagination-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 8px !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    border: none !important;
}

.pagination-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    line-height: 1 !important;
    border-radius: 4px !important;
    flex-grow: 0 !important;
    box-shadow: none !important;
}

#page_label {
    flex: 0 0 auto !important;
    width: auto !important;
    display: inline-block !important;
    margin: 0 8px !important;
    font-size: 11px !important;
    font-family: monospace !important;
    white-space: nowrap !important;
    color: var(--body-text-color-subdued);
}

#page_label p {
    margin: 0 !important;
    padding: 0 !important;
    display: inline !important;
}
#chat-examples  {
    max-height: 300px;
    overflow: auto !important;
}