:root {
  /* Make the loading cursor larger and a specific color (e.g., orange) */
  --loading-cursor-size: 1.5rem;
  --loading-cursor-color: #ff9800;
  /* Customize the animation (e.g., spin instead of pulse) */
  --loading-cursor-animation: spin 1.5s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Hide the main splash screen logo */
#welcome-screen img {
    display: none !important;
}

/* Hide the 'Chainlit' text and any residual branding */
#welcome-screen h1, #welcome-screen p {
    display: none !important;
}

/* Hide the 'Made with Chainlit' watermark at the bottom */
.watermark {
    display: none !important;
}

/* Reduce font size and padding of the Step headers */
.cl-step-header {
    font-size: 0.4rem !important;
    min-height: 15px !important;
    padding: 4px 8px !important;
}

/* Reduce the size of the Step icons */
.cl-step-icon {
    width: 8px !important;
    height: 8px !important;
}

/* User messages - making them slightly smaller and subtle */
.cl-user-message p {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5;
}

/* Assistant messages - making them larger for primary readability */
.cl-assistant-message p {
    font-size: 17px;
    font-weight: 450; /* Inter variable font supports fine-tuned weights */
    line-height: 1.6;
    color: var(--foreground);
}

/* Adjusting code blocks within agent responses */
.cl-assistant-message code {
    font-family: 'Inter', monospace;
    font-size: 0.9em;
}

/* --- Direct Green Tint for Thumbs Up Element --- */
[id*="feedback_up"], 
button[id$="feedback_up"] {
    background-color: rgba(34, 197, 94, 0.15) !important; /* Soft green backdrop */
    border: 1px solid #22c55e !important;              /* Crisp green border */
    color: #22c55e !important;                           /* Green text/shadow */
    filter: drop-shadow(0px 0px 2px rgba(34,197,94,0.4)) !important;
}

/* --- Direct Red Tint for Thumbs Down Element --- */
[id*="feedback_down"], 
button[id$="feedback_down"] {
    background-color: rgba(239, 68, 68, 0.15) !important; /* Soft red backdrop */
    border: 1px solid #ef4444 !important;               /* Crisp red border */
    color: #ef4444 !important;                            /* Red text/shadow */
    filter: drop-shadow(0px 0px 2px rgba(239,68,68,0.4)) !important;
}

/* --- Smooth Hover Transitions --- */
[id*="feedback_up"]:hover, [id*="feedback_down"]:hover {
    transform: scale(1.05) !important;
    transition: transform 0.2s ease-in-out !important;
}

/* 1. Target the Action List Container to make it full width */
div.cl-action-list {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
    padding: 10px 0 !important;
}

/* 2. Target the buttons using a 'Double Attribute' selector to beat MUI specificity */
button[id^="action-"][type="button"] {
    width: 100% !important;
    min-height: 48px !important;
    
    /* Background & Color */
    background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%) !important;
    color: #ffffff !important;
    
    /* Shape & Border */
    border: none !important;
    border-radius: 12px !important;
    
    /* Elevation / Appeal */
    font-weight: 600 !important;
    text-transform: none !important;
    box-shadow: 0 4px 10px rgba(26, 115, 232, 0.3) !important;
    
    /* Transitions */
    transition: all 0.2s ease-in-out !important;
}

/* 3. Force the hover state */
button[id^="action-"][type="button"]:hover {
    background: #0d47a1 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(26, 115, 232, 0.4) !important;
}

/* 4. Fix the label inside the button (sometimes MUI sets this to blue) */
button[id^="action-"] span {
    color: white !important;
}

/* 1. Target by the ID with extreme priority */
#new-chat-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    pointer-events: none !important;
}

/* 2. Target by the tooltip/aria-label (very stable in MUI) */
button[aria-label="New Chat"] {
    display: none !important;
}

/* 3. Target via the Header Toolbar hierarchy (The 'Brute Force' way) */
.MuiToolbar-root button#new-chat-button {
    display: none !important;
}

/* 4. If it's showing up in the sidebar/drawer too */
.cl-sidebar-new-chat {
    display: none !important;
}