custom_css.py

custom_css = """
/* ============================================
 MAIN LAYOUT AND CONTAINERS
 Purpose: Core layout structure with minimal spacing
 ============================================ */
/* Main container styling with blue border and rounded corners */
.container {
  border: 2px solid #2196F3;          /* Blue border with 2px thickness */
  border-radius: 10px;                /* Rounded corners */
  padding: 10px !important;            /* Inner spacing */
  margin: 2px auto !important;        /* Outer spacing and center alignment */
  background: white;                  /* White background */
  position: relative;                 /* For absolute positioning of children */
  width: 100% !important;            /* Full width */
  max-width: 1200px !important;      /* Maximum width constraint */
}

/* Section header label positioning and styling */
.container::before {
  position: absolute;                 /* Position independently */
  top: -18px;                        /* Negative top margin to overlap container border */
  left: 20px;                        /* Left offset */
  background: white;                 /* White background for text */
  padding: 0 2px;                   /* Horizontal padding*/
  color: #2196F3;                    /* Blue text color */
  font-weight: bold;                 /* Bold text */
  font-size: 1.2em;                  /* Larger text size */
}

/* ============================================
 TITLE SECTION
 Purpose: "Prompts on Chosen Model" header styling
 ============================================ */
/* Title container styling */
.title-container {
  width: fit-content !important;      /* Width based on content */
  margin: 0 auto !important;          /* Center alignment */
  margin-bottom: 30px !important; /* Adjust the value (30px) as needed */
  padding: 2px 40px !important;       /* Horizontal padding */
  border: 1px solid #0066cc !important; /* Blue border */
  border-radius: 10px !important;     /* Rounded corners */
  background-color: rgba(0, 102, 204, 0.05) !important; /* Light blue background */
}

/* Center align all text in title container */
.title-container * {
  text-align: center;                 /* Center text alignment */
  margin: 0 !important;               /* Remove margins */
  line-height: 1.2 !important;        /* Line height for readability */
}

/* Main title styling */
.title-container h1 {
  font-size: 28px !important;         /* Large font size */
  margin-bottom: 1px !important;      /* Small bottom margin */
}

/* Subtitle styling */
.title-container h3 {
  font-size: 18px !important;         /* Medium font size */
  margin-bottom: 1px !important;      /* Small bottom margin */
}

/* Paragraph text styling in title */
.title-container p {
  font-size: 14px !important;         /* Regular font size */
  margin-bottom: 1px !important;      /* Small bottom margin */
}

/* ============================================
 SECTION LABELS
 Purpose: Section header text content
 ============================================ */
/* Define text content for each section header */
.input-container::before { content: 'PROMPT ANALYSIS'; }
.analysis-container::before { content: 'PROMPT REFINEMENT'; }
.meta-container::before { content: 'REFINEMENT METHOD'; }
.model-container::before { content: 'PROMPTS APPLICATION'; }
.examples-container::before { content: 'EXAMPLES'; }

/* ============================================
 INPUT ELEMENTS
 Purpose: Textarea and input styling
 ============================================ */
/* Textarea styling */
.input-container textarea {
  resize: vertical !important;         /* Allow vertical resizing only */
  min-height: 100px !important;       /* Minimum height */
  max-height: 500px !important;       /* Maximum height */
  width: 100% !important;             /* Full width */
  border: 1px solid #ddd !important;  /* Light gray border */
  border-radius: 4px !important;      /* Rounded corners */
  padding: 2px !important;            /* Inner spacing */
  transition: all 0.3s ease !important; /* Smooth transitions */
}

/* Textarea focus state */
.input-container textarea:focus {
  border-color: #2196F3 !important;   /* Blue border when focused */
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1) !important; /* Subtle shadow */
}

/* ============================================
 RADIO BUTTONS
 Purpose: Selection options styling
 ============================================ */
/* Radio button group container */
.radio-group {
  background-color: rgba(0, 102, 204, 0.05) !important; /* Light blue background */
  padding: 10px !important;           /* Inner spacing */
  border-radius: 8px !important;      /* Rounded corners */
  border: 1px solid rgba(0, 102, 204, 0.1) !important; /* Light blue border */
  display: flex !important;           /* Flex layout */
  justify-content: center !important; /* Center items */
  flex-wrap: wrap !important;         /* Allow wrapping */
  gap: 8px !important;               /* Space between items */
  width: 100% !important;            /* Full width */
}

/* Radio button container */
.gradio-radio {
  display: flex !important;           /* Flex layout */
  justify-content: center !important; /* Center items */
  flex-wrap: wrap !important;         /* Allow wrapping */
  gap: 8px !important;               /* Space between items */
}

/* Radio button label styling */
.gradio-radio label {
  display: flex !important;           /* Flex layout */
  align-items: center !important;     /* Center vertically */
  padding: 6px 12px !important;       /* Inner spacing */
  border: 1px solid #ddd !important;  /* Light gray border */
  border-radius: 4px !important;      /* Rounded corners */
  cursor: pointer !important;         /* Pointer cursor */
  background: white !important;       /* White background */
  margin: 4px !important;            /* Outer spacing */
}

/* Selected radio button styling */
.gradio-radio input[type="radio"]:checked + label {
  background: rgba(0, 102, 204, 0.1) !important; /* Light blue background */
  border-color: #0066cc !important;   /* Blue border */
  color: #0066cc !important;          /* Blue text */
  font-weight: bold !important;       /* Bold text */
}

/* ============================================
 BUTTONS
 Purpose: Interactive button styling
 ============================================ */
/* Base button styling */
.gradio-button {
  background-color: white !important;  /* White background */
  color: #2196F3 !important;          /* Blue text */
  border: 2px solid #2196F3 !important; /* Blue border */
  border-radius: 4px !important;      /* Rounded corners */
  padding: 8px 16px !important;       /* Inner spacing */
  margin: 10px 0 !important;          /* Vertical margin */
  font-weight: bold !important;       /* Bold text */
  transition: all 0.3s ease !important; /* Smooth transitions */
}

/* Button hover state */
.gradio-button:hover {
  background-color: #2196F3 !important; /* Blue background on hover */
  color: white !important;             /* White text on hover */
  box-shadow: 0 2px 5px rgba(33, 150, 243, 0.3) !important; /* Shadow effect */
}

/* Highlighted button state */
.button-highlight {
  animation: pulse 2s infinite;        /* Pulsing animation */
  border-color: #ff9800 !important;    /* Orange border */
  border-width: 3px !important;        /* Thicker border */
  box-shadow: 0 0 10px rgba(255, 152, 0, 0.5) !important; /* Glow effect */
}

/* Pulsing animation keyframes */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4); }    /* Start state */
  70% { box-shadow: 0 0 0 10px rgba(255, 152, 0, 0); }  /* Mid state */
  100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); }    /* End state */
}

/* Waiting button state */
.button-waiting { 
  opacity: 0.6 !important;            /* Reduced opacity */
}

/* Completed button state */
.button-completed {
  border-color: #4CAF50 !important;    /* Green border */
  background-color: rgba(76, 175, 80, 0.1) !important; /* Light green background */
}

/* ============================================
 LAYOUT COMPONENTS
 Purpose: Basic layout element styling
 ============================================ */
/* Accordion styling */
.gradio-accordion {
  margin: 10px 0 !important;          /* Vertical margin */
  border: none !important;            /* Remove border */
}

/* Main container layout */
.gradio-container {
  display: flex !important;           /* Flex layout */
  flex-direction: column !important;  /* Stack vertically */
  align-items: center !important;     /* Center items */
  width: 100% !important;            /* Full width */
  max-width: 1200px !important;      /* Maximum width */
  margin: 2px auto !important;         /* Center horizontally */
}

/* Dropdown menu styling */
.gradio-dropdown {
  width: 100% !important;            /* Full width */
  max-width: 300px !important;       /* Maximum width */
}

/* JSON response container */
.full-response-json {
  margin-top: 20px !important;       /* Top margin */
  padding: 10px !important;          /* Inner spacing */
  background-color: rgba(0, 102, 204, 0.05) !important; /* Light blue background */
  border-radius: 8px !important;     /* Rounded corners */
}

/* ============================================
 COMPARISON COLUMNS
 Purpose: Side-by-side output display
 ============================================ */
/* Column container styling */
.comparison-column {
  border: 2px solid #2196F3 !important; /* Blue border */
  border-radius: 8px !important;      /* Rounded corners */
  padding: 4px !important;            /* Inner spacing */
  margin: 1px !important;             /* Minimal margin */
  background-color: white !important; /* White background */
  flex: 1 !important;                /* Equal width columns */
  min-width: 300px !important;       /* Minimum width */
  padding-right: 2px !important;      /* Add this to remove right padding */
  margin-right: 2px !important;       /* Add this to remove right margin */
}

/* Column header styling */
.comparison-column h3 {
  color: #2196F3 !important;          /* Blue text */
  border-bottom: 1px solid #e0e0e0 !important; /* Bottom border */
  padding-bottom: 2px !important;     /* Bottom padding */
  margin: 0 0 4px 0 !important;       /* Bottom margin */
  font-size: 16px !important;         /* Font size */
  text-align: center !important;      /* Center text */
}

/* Output area styling */
.comparison-output {
  min-height: 200px !important;       /* Minimum height */
  padding: 6px !important;            /* Inner spacing */
  background-color: #f8f9fa !important; /* Light gray background */
  border: 1px solid #dee2e6 !important; /* Gray border */
  border-radius: 4px !important;      /* Rounded corners */
  margin: 4px 0 !important;           /* Vertical margin */
  white-space: pre-wrap !important;   /* Preserve whitespace */
  word-wrap: break-word !important;   /* Break long words */
  font-family: monospace !important;  /* Monospace font */
  line-height: 1.5 !important;        /* Line height */
  overflow-y: auto !important;        /* Vertical scroll */
  width: 100% !important;            /* Full width */
  visibility: visible !important;     /* Always visible */
  opacity: 1 !important;             /* Full opacity */
  padding: 10px 3px !important;  /* 20px top/bottom, 30px left/right */
}

/* ============================================
 OUTPUT ROW
 Purpose: Layout for output display
 ============================================ */
/* Output row container */
.output-row {
  display: flex !important;           /* Flex layout */
  gap: 1mm !important;               /* Small gap between items */
  padding: 2mm !important;           /* Inner spacing */
  width: 100% !important;            /* Full width */
  flex-wrap: wrap !important;        /* Allow wrapping */
}

/* ============================================
 TABS
 Purpose: Tab navigation styling
 ============================================ */
/* Tab container */
.tabs {
  border: none !important;            /* Remove border */
  margin-top: 4px !important;         /* Top margin */
  width: 100% !important;            /* Full width */
}

/* Individual tab item */
.tabitem {
  padding: 4px !important;            /* Inner spacing */
  width: 100% !important;            /* Full width */
}

/* ============================================
 TEXT CONTENT
 Purpose: Text display formatting
 ============================================ */
/* Markdown text styling */
.markdown-text {
  color: #333333 !important;          /* Dark gray text */
  line-height: 1.6 !important;        /* Line height */
  font-size: 14px !important;         /* Font size */
  margin: 4px 4px !important;           /* Vertical margin */
  opacity: 1 !important;              /* Full opacity */
  visibility: visible !important;      /* Always visible */
  padding: 15px !important; 
}

/* Placeholder text for empty output */
.comparison-output:empty::before {
  content: 'Output will appear here' !important; /* Placeholder text */
  color: #666666 !important;          /* Gray text */
  font-style: italic !important;      /* Italic style */
}

/* ============================================
 BUTTON STATES
 Purpose: Button interaction styling
 ============================================ */
/* Default button state */
button {
  opacity: 1 !important;              /* Full opacity */
  pointer-events: auto !important;    /* Enable interactions */
}

/* Disabled button state */
button:disabled {
  opacity: 0.6 !important;            /* Reduced opacity */
  pointer-events: none !important;    /* Disable interactions */
}

/* ============================================
 VISIBILITY
 Purpose: Element display control
 ============================================ */
/* Output content visibility */
.output-content {
  opacity: 1 !important;              /* Full opacity */
  visibility: visible !important;      /* Always visible */
  display: block !important;          /* Block display */
}

/* Output container visibility */
.output-container {
  display: block !important;          /* Block display */
  visibility: visible !important;      /* Always visible */
  opacity: 1 !important;              /* Full opacity */
}

/* ============================================
 CODE BLOCKS
 Purpose: Code and pre-formatted text styling
 ============================================ */
/* Code block styling */
pre, code {
  background-color: #f8f9fa !important; /* Light gray background */
  border: 1px solid #dee2e6 !important; /* Gray border */
  border-radius: 4px !important;      /* Rounded corners */
  padding: 10px !important;           /* Inner spacing */
  margin: 5px 0 !important;           /* Vertical margin */
  white-space: pre-wrap !important;   /* Preserve whitespace */
  word-wrap: break-word !important;   /* Break long words */
  font-family: monospace !important;  /* Monospace font */
  line-height: 1.5 !important;        /* Line height */
  display: block !important;          /* Block display */
  width: 100% !important;            /* Full width */
}
"""