/* static/style.css */

/* --- Custom Scrollbar Styles --- */
::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-track {
    background: var(--color-secondary-bg); /* Using theme variable */
  }
  ::-webkit-scrollbar-thumb {
    background: var(--color-border-gray); /* Using theme variable */
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #6a7488; /* Keeping original hover for thumb for now, or you can add a variable for it */
  }
  
  /* --- Message Fade-in Animation --- */
  .message-fade-in {
    animation: fadeIn 0.3s ease-out;
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* --- Textarea Specific Styles --- */
  textarea {
    min-height: 100px; /* Base height for textareas */
    resize: vertical; /* Allow vertical resizing only */
    overflow-y: auto; /* Ensure scrollbar appears */
  }
  
  /* --- Base Theme Colors (Variables) --- */
  /* Modify these values to change your entire theme */
  :root {
    --color-primary-bg: #1a202c; /* Dark blue-gray for body/main container */
    --color-secondary-bg: #2d3748; /* Slightly lighter dark blue-gray for cards/panels/sidebar */
    --color-tertiary-bg: #4a5568; /* Even lighter dark gray for inputs/chat bubbles */
  
    --color-text-light: #e2e8f0; /* Light text for dark backgrounds */
    --color-text-muted: #a0aec0; /* Muted text (e.g., placeholders, secondary info) */
    --color-text-highlight: #4299e1; /* Primary blue accent for headings/links */
  
    --color-accent-blue: #4299e1; /* Main blue for buttons/active states */
    --color-accent-blue-hover: #3182ce; /* Darker blue for button hover */
  
    --color-border-gray: #4a5568; /* Standard border color */
    --color-border-dark: #2d3748; /* Darker border for separators */
  
    --color-flash-success: #22c55e; /* Green for success messages */
    --color-flash-danger: #ef4444; /* Red for error messages */
    --color-flash-info: #4299e1; /* Blue for general info messages (if you add them) */
  }
  
  /* --- Global Body & Text Styles (Apply broadly) --- */
  body {
    background-color: var(--color-primary-bg);
    color: var(--color-text-light);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
      "Noto Color Emoji";
  }
  
  /* --- Theme Utility Classes --- */
  
  /* Backgrounds */
  .theme-bg-primary {
    background-color: var(--color-primary-bg);
  }
  
  .theme-bg-secondary {
    background-color: var(--color-secondary-bg);
  }
  
  .theme-bg-tertiary {
    background-color: var(--color-tertiary-bg);
  }
  
  /* Text Colors */
  .theme-text-light {
    color: var(--color-text-light);
  }
  
  .theme-text-muted {
    color: var(--color-text-muted);
  }
  
  .theme-text-highlight {
    color: var(--color-text-highlight);
  }
  
  /* Buttons */
  .theme-button-primary {
    background-color: var(--color-accent-blue);
    color: white; /* Always white text for primary button */
    /* Replicate Tailwind's default button padding/border-radius if not set elsewhere */
    padding-top: 0.75rem; /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
    padding-left: 1rem; /* px-4 for smaller buttons, px-6 for larger ones */
    padding-right: 1rem; /* px-4 */
    border-radius: 0.5rem; /* rounded-lg */
    transition: background-color 0.3s ease;
  }
  
  .theme-button-primary:hover {
    background-color: var(--color-accent-blue-hover);
  }
  
  .theme-button-secondary {
    background-color: var(--color-secondary-bg);
    color: var(--color-text-light);
    transition: background-color 0.3s ease;
  }
  
  .theme-button-secondary:hover {
    background-color: var(--color-tertiary-bg);
  }
  
  .theme-button-danger {
    background-color: var(--color-flash-danger);
    color: white;
    transition: background-color 0.3s ease;
  }
  
  .theme-button-danger:hover {
    background-color: #dc2626; /* Slightly darker red */
  }
  
  
  /* Borders */
  .theme-border {
    border: 1px solid var(--color-border-gray);
  }
  
  .theme-border-dark {
    border-color: var(--color-border-dark);
  }
  
  /* Form Elements (Inputs, Textareas) */
  .theme-input-field {
    background-color: var(--color-tertiary-bg);
    color: var(--color-text-light);
    border: 1px solid var(--color-border-gray);
    /* Ensure focus ring matches your theme */
    outline: none;
  }
  
  .theme-input-field:focus {
    border-color: var(--color-accent-blue); /* blue-500 */
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.5); /* blue-500 ring */
  }
  
  .theme-placeholder::placeholder {
      color: var(--color-text-muted);
  }
  
  
  /* Flash Messages */
  .flash-success {
    background-color: var(--color-flash-success);
    color: white;
    /* Adjust padding and border-radius to match your design */
    padding: 0.75rem; /* p-3 */
    border-radius: 0.5rem; /* rounded-lg */
  }
  
  .flash-danger {
    background-color: var(--color-flash-danger);
    color: white;
    padding: 0.75rem; /* p-3 */
    border-radius: 0.5rem; /* rounded-lg */
  }
  
  .flash-info {
    background-color: var(--color-flash-info);
    color: white;
    padding: 0.75rem;
    border-radius: 0.5rem;
  }