import gradio as gr

# Custom CSS with Fireworks AI purple palette
CUSTOM_CSS = """
    /* Professional container with subtle purple gradient */
    .gradio-container {
        font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
        background: linear-gradient(135deg, #FAFBFC 0%, #F3F0FF 100%);
    }

    /* Clean chat messages */
    .chat-message {
        border-radius: 12px;
        padding: 16px;
        margin: 8px 0;
        background: white;
        box-shadow: 0 1px 3px rgba(103, 32, 255, 0.08);
        border: 1px solid #E6EAF4;
        transition: all 0.2s ease;
    }

    .chat-message:hover {
        box-shadow: 0 4px 12px rgba(103, 32, 255, 0.12);
    }

    /* Professional function calls with purple accent */
    .function-call {
        background: linear-gradient(to right, #F3F0FF, #FFFFFF);
        border-left: 3px solid #6720FF;
        padding: 16px;
        margin: 12px 0;
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(103, 32, 255, 0.06);
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.9em;
        color: #0F172A;
    }

    /* Sleek meetings panel */
    .meetings-container {
        background: white;
        border-radius: 16px;
        padding: 24px;
        box-shadow: 0 4px 6px rgba(103, 32, 255, 0.08);
        border: 1px solid #E6EAF4;
    }

    /* Modern accordion with purple accents */
    .meeting-details {
        border: 1px solid #E6EAF4;
        border-radius: 10px;
        background: #FFFFFF;
        margin: 10px 0;
        transition: all 0.25s ease;
        overflow: hidden;
    }

    .meeting-details:hover {
        box-shadow: 0 4px 12px rgba(103, 32, 255, 0.1);
        border-color: #C4B5FD;
    }

    .meeting-details[open] {
        border-color: #6720FF;
        box-shadow: 0 4px 12px rgba(103, 32, 255, 0.15);
    }

    /* Clean summary styling with purple */
    .meeting-summary {
        font-weight: 600;
        color: #0F172A;
        padding: 14px 18px;
        cursor: pointer;
        background: linear-gradient(90deg, transparent 0%, #F3F0FF 100%);
        transition: background 0.2s ease;
    }

    .meeting-summary:hover {
        background: linear-gradient(90deg, #F3F0FF 0%, #EDE9FE 100%);
    }

    /* Meeting content styling */
    .meeting-content {
        padding: 16px 18px;
        color: #64748B;
        border-top: 1px solid #E6EAF4;
        background: #FAFBFC;
    }

    /* Professional content cards */
    .content-card {
        background: white;
        border-radius: 16px;
        padding: 28px;
        box-shadow: 0 4px 6px rgba(103, 32, 255, 0.06);
        border: 1px solid #E6EAF4;
    }

    /* Purple accent links */
    a {
        color: #6720FF;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    a:hover {
        color: #7B2FFF;
        text-decoration: underline;
    }

    /* Custom scrollbar with purple */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: #F3F0FF;
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb {
        background: #C4B5FD;
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #A78BFA;
    }

    /* Search box styling */
    .search-box {
        border: 2px solid #E6EAF4;
        border-radius: 10px;
        transition: all 0.2s ease;
    }

    .search-box:focus {
        border-color: #6720FF;
        box-shadow: 0 0 0 3px rgba(103, 32, 255, 0.1);
    }

    /* Header styling */
    .header-title {
        background: linear-gradient(135deg, #6720FF 0%, #8B5CF6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 700;
    }

    /* Chat window styling - readable font size */
    .chat-window {
        font-size: 0.95em !important;
    }

    .chat-window .message {
        font-size: 0.95em !important;
    }

    .chat-window .message-content {
        font-size: 0.95em !important;
        line-height: 1.6;
    }

    /* Readable text in chat messages */
    .chat-window p {
        font-size: 0.95em !important;
    }

    .chat-window code {
        font-size: 0.9em !important;
    }

    .chat-window pre {
        font-size: 0.9em !important;
    }

    /* Slightly smaller tool calling cards */
    .chat-window .tool-call {
        font-size: 0.92em !important;
    }

    .chat-window table {
        font-size: 0.92em !important;
    }

    .chat-window th,
    .chat-window td {
        font-size: 0.92em !important;
        padding: 6px 10px !important;
    }

    /* Proportional headings in chat */
    .chat-window h1 {
        font-size: 1.5em !important;
    }

    .chat-window h2 {
        font-size: 1.3em !important;
    }

    .chat-window h3 {
        font-size: 1.15em !important;
    }

    .chat-window h4,
    .chat-window h5,
    .chat-window h6 {
        font-size: 1em !important;
    }

    /* List items */
    .chat-window ul,
    .chat-window ol {
        font-size: 0.95em !important;
    }

    .chat-window li {
        font-size: 0.95em !important;
    }

    /* Compact header spacing */
    .compact-header {
        margin-bottom: 8px !important;
        padding: 8px 0 !important;
    }

    .compact-input {
        margin-bottom: 4px !important;
    }

    .compact-input label {
        font-size: 0.9em !important;
        margin-bottom: 4px !important;
    }

    /* Compact example questions */
    .compact-examples {
        margin: 8px 0 12px 0 !important;
        gap: 6px !important;
    }

    .compact-examples button {
        font-size: 0.85em !important;
        padding: 6px 10px !important;
        min-height: 32px !important;
    }
"""

# Create custom Fireworks AI-inspired theme
GRADIO_THEME = gr.themes.Base(
    primary_hue=gr.themes.colors.purple,
    secondary_hue=gr.themes.colors.violet,
    neutral_hue=gr.themes.colors.slate,
    spacing_size=gr.themes.sizes.spacing_lg,
    radius_size=gr.themes.sizes.radius_md,
    text_size=gr.themes.sizes.text_md,
    font=[gr.themes.GoogleFont('Inter'), 'ui-sans-serif', 'system-ui', 'sans-serif'],
    font_mono=[gr.themes.GoogleFont('JetBrains Mono'), 'monospace']
).set(
    # Primary button styling (Fireworks AI purple)
    button_primary_background_fill='#6720FF',
    button_primary_background_fill_hover='#7B2FFF',
    button_primary_text_color='#FFFFFF',

    # Secondary button styling
    button_secondary_background_fill='#F3F0FF',
    button_secondary_background_fill_hover='#EDE9FE',
    button_secondary_text_color='#6720FF',

    # Interactive elements
    slider_color='#6720FF',

    # Links
    link_text_color='#6720FF',
    link_text_color_hover='#7B2FFF',
    link_text_color_visited='#8B5CF6',

    # Backgrounds
    body_background_fill='#FAFBFC',
    block_background_fill='#FFFFFF',
    input_background_fill='#FFFFFF',

    # Borders
    border_color_primary='#E6EAF4',
)