assets/app_styles.css

/* Add global page margins */
.gradio-container {
   padding-left: 12rem !important;
   padding-right: 12rem !important;
}

/* Context boxes styling - make them same size */
#basic_context_box,
#basic_sources_in_context_box {
    height: 400px !important;
}

#basic_context_box textarea {
    height: 370px !important;
    min-height: 370px !important;
    max-height: 370px !important;
    resize: none !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

/* HighlightedTextbox - clean approach */
#basic_sources_in_context_box {
    height: 400px !important;
    overflow: hidden !important;
}

/* Target multiple possible content containers */
#basic_sources_in_context_box > div:last-child,
#basic_sources_in_context_box .highlighted-textbox,
#basic_sources_in_context_box [data-testid="highlighted-textbox"],
#basic_sources_in_context_box .textbox {
    height: 370px !important;
    max-height: 370px !important;
    overflow-y: auto !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}

/* Response box - adjusted height to account for button with smaller spacing */
#basic_response_box {
    height: 415px !important;
    overflow: hidden !important;
}

/* Target the content area more specifically - fill entire space */
#basic_response_box > div:last-child,
#basic_response_box .highlighted-text,
#basic_response_box [data-testid="highlighted-text"] {
    height: 405px !important;
    max-height: 405px !important;
    overflow-y: auto !important;
    padding: 5px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Full response traceback button styling - smaller spacing and consistent font */
#basic_response_box + button,
button[value="🔍 Traceback Entire Response"] {
    margin: 5px 0 !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    font-size: var(--text-lg) !important;
    font-weight: var(--weight-semibold) !important;
}

/* Ensure the right column content fits properly with button */
.gradio-row.equal-height .gradio-column:last-child {
    padding-bottom: 0 !important;
}

/* Ensure consistent column heights */
.gradio-row.equal-height {
    display: flex !important;
    align-items: stretch !important;
}

.gradio-row.equal-height > .gradio-column {
    display: flex !important;
    flex-direction: column !important;
}

/* Lower section column height matching */
.gradio-row.equal-height .gradio-column {
    min-height: 450px !important;
    height: 450px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Lower left instruction box sizing */
.gradio-row.equal-height .gradio-column:first-child .gradio-textbox:first-child textarea {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    resize: none !important;
}

/* Lower left response input box sizing - increased to match right side */
.gradio-row.equal-height .gradio-column:first-child .gradio-textbox:last-child textarea {
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
    resize: none !important;
    overflow-y: auto !important;
}

/* Button spacing - reduced for better layout */
.gradio-row.equal-height .gradio-button {
    margin: 5px 0 !important;
    flex-shrink: 0 !important;
}

/* Fix tabs container height */
.gradio-tabs {
    height: 400px !important;
}

.gradio-tabitem {
    height: 370px !important;
}

/* Clean fallback rules */
.gradio-row.equal-height [class*="gradio-"] {
    box-sizing: border-box !important;
}

/* Ensure inner content fills containers properly */
#basic_response_box div,
#basic_sources_in_context_box div {
    height: inherit !important;
    margin: 0 !important;
}

/* Force full height on content elements */
#basic_response_box .highlighted-text > div,
#basic_sources_in_context_box .highlighted-textbox > div {
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove any default spacing on response box */
#basic_response_box .label-wrap {
    margin-bottom: 2px !important;
}

#basic_response_box .block {
    padding: 0 !important;
    margin: 0 !important;
}

.example-title {
    text-align: left !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
}

/* Custom app title styling with Monochrome theme colors */
.app-title {
    text-align: center !important;
    margin: 2rem 0 !important;
}

.app-title .highlight {
    background: #ff6b35 !important;
    color: white !important;
    padding: 2px 9px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 3rem !important;
    margin-right: 4px !important;
    display: inline-block !important;
}

.app-title .brand {
    color: #333333 !important;
    font-weight: 700 !important;
    font-size: 3rem !important;
    margin-right: 12px !important;
}

.app-title .subtitle {
    color: #666666 !important;
    font-weight: 400 !important;
    font-size: 1.6rem !important;
    display: block !important;
    margin-top: 12px !important;
}

/* Larger font for app description */
.app-description p {
    font-size: 1.25rem !important; /* Increased from default */
    color: #555555 !important;
    line-height: 1.6 !important;
}

.app-description-2 p {
    font-size: 1.25rem !important; /* Increased from default */
    color: #555555 !important;
    line-height: 1.6 !important;
}


/* Attribution highlighting styles - use Gradio theme colors */
.gradio-container .highlighted-text mark,
.gradio-container mark,
.highlighted-text mark,
mark {
    border-radius: 3px !important;
    padding: 1px 3px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    display: inline !important;
    line-height: inherit !important;
    border: none !important;
    box-decoration-break: clone !important;
    -webkit-box-decoration-break: clone !important;
}

/* Ensure highlighting works in response boxes */
.gradio-container #basic_response_box mark,
.gradio-container #basic_sources_box mark {
    font-family: inherit !important;
    font-size: inherit !important;
}

/* Set consistent height for both context boxes */
.gradio-container #basic_context_box,
.gradio-container #basic_sources_in_context_box {
    height: 500px !important;
}

/* Ensure the left textbox and its textarea respect the height constraint */
.gradio-container #basic_context_box {
    max-height: 500px !important;
}

.gradio-container #basic_context_box textarea {
    height: 460px !important;
    max-height: 460px !important;
    overflow-y: auto !important;
    resize: none !important;
}

/* Make highlighted context tab look exactly like regular context tab */
.gradio-container #basic_sources_in_context_box {
    background: var(--input-background-fill) !important;
    border: 1px solid var(--input-border-color) !important;
    border-radius: var(--input-radius) !important;
    color: var(--body-text-color) !important;
    font-family: var(--font) !important;
    font-size: var(--text-sm) !important;
    line-height: var(--line-sm) !important;
    padding: var(--input-padding) !important;
    height: 600px !important;
    overflow: hidden !important;
}

/* Set height for response box container */
.gradio-container #basic_response_box {
    height: 600px !important;
    overflow: hidden !important;
}

/* Apply scrolling only to the inner content areas */
.gradio-container #basic_sources_in_context_box .highlight,
.gradio-container #basic_sources_in_context_box > div > div {
    max-height: 600px !important;
    overflow-y: auto !important;
}

.gradio-container #basic_response_box .highlight,
.gradio-container #basic_response_box > div > div {
    max-height: 600px !important;
    overflow-y: auto !important;
}

/* Add a separator between the two context boxes */
#basic_context_box {
    border-right: 1px solid var(--border-color-primary) !important;
}

/* Ensure all text is visible with proper color */
.gradio-container #basic_sources_in_context_box,
.gradio-container #basic_sources_in_context_box * {
    color: var(--body-text-color) !important;
}

/* Keep highlighting functionality working */
.gradio-container #basic_sources_in_context_box mark {
    color: var(--body-text-color) !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    padding: 2px 4px !important;
    margin: 0 1px !important;
}



/* Only customize example buttons - let Gradio theme handle everything else */

/* Example buttons container */
.example-button-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 16px !important;
    margin: 0px 0 !important;
    padding: 0 !important;
}

/* Example button styling */
.example-button button,
button.example-button {
    width: 100% !important;
    height: 180px !important;
    border-radius: 8px !important;
    border: 0px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    overflow: hidden !important;
    box-shadow: none !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: white !important;
    text-align: center !important;
    padding: 20px !important;
    position: relative !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    text-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.7),
        1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* Light overlay for better image visibility - now uses ::after */
.example-button button::after,
button.example-button::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.1) !important;
    z-index: 1 !important;
    transition: background 0.2s ease !important;
    pointer-events: none !important;
}

/* Text content above overlay */
.example-button button span,
button.example-button span {
    position: relative !important;
    z-index: 3 !important;
    text-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.7),
        1px 1px 2px rgba(0, 0, 0, 0.8) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

/* Make sure button text itself is also above blur */
.example-button button,
button.example-button {
    z-index: 0 !important;
    position: relative !important;
}

.example-button button *,
button.example-button * {
    position: relative !important;
    z-index: 3 !important;
}

/* Hover effects */
.example-button button:hover,
button.example-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.example-button button:hover::after,
button.example-button:hover::after {
    background: rgba(0, 0, 0, 0.05) !important;
}

/* Specific button backgrounds with solid colors and textures */
.example-paper button, button.example-paper {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.example-paper button::before, button.example-paper::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        rgba(255,255,255,0.1) 2px,
        rgba(255,255,255,0.1) 4px
    ) !important;
    z-index: 1 !important;
}

.example-movie button, button.example-movie {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
}

.example-movie button::before, button.example-movie::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.15) 2px, transparent 2px),
                radial-gradient(circle at 80% 50%, rgba(255,255,255,0.15) 2px, transparent 2px) !important;
    background-size: 20px 20px !important;
    z-index: 1 !important;
}

.example-code button, button.example-code {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
}

.example-code button::before, button.example-code::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 8px,
        rgba(255,255,255,0.1) 8px,
        rgba(255,255,255,0.1) 10px
    ) !important;
    z-index: 1 !important;
}

.example-paper-alt button, button.example-paper-alt {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
}

.example-paper-alt button::before, button.example-paper-alt::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: repeating-conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(255,255,255,0.1) 30deg,
        transparent 60deg
    ) !important;
    background-size: 30px 30px !important;
    z-index: 1 !important;
}

.example-movie-alt button, button.example-movie-alt {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%) !important;
}

.example-movie-alt button::before, button.example-movie-alt::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 3px,
        rgba(255,255,255,0.15) 3px,
        rgba(255,255,255,0.15) 6px
    ) !important;
    z-index: 1 !important;
}

.example-code-alt button, button.example-code-alt {
    background: linear-gradient(135deg, #a8e6cf 0%, #ffd3a5 100%) !important;
}

.example-code-alt button::before, button.example-code-alt::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.12) 1px, transparent 1px),
                radial-gradient(circle at 75% 75%, rgba(255,255,255,0.12) 1px, transparent 1px) !important;
    background-size: 15px 15px !important;
    z-index: 1 !important;
}

/* Mobile responsiveness for example buttons and title */
@media (max-width: 768px) {
    .gradio-container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .example-button-container {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    .example-button button,
    button.example-button {
        height: 160px !important;
        font-size: 1.2rem !important;
        padding: 15px !important;
    }
    
    /* Mobile title sizing */
    .app-title .highlight,
    .app-title .brand {
        font-size: 2.2rem !important;
    }
    
    .app-title .subtitle {
        font-size: 1.4rem !important;
    }
}

/* Tablet responsiveness for example buttons only */
@media (max-width: 1024px) and (min-width: 769px) {
    .example-button-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}