/* ============================================
   REASONING TOGGLE - SMOOTH ANIMATION
   ============================================ */

.reasoning-content {
    font-size: 14px !important;
    font-style: italic;
    color: #6b7280;
    border-left: 3px solid #e5e7eb;
    padding-left: 12px;
    margin-top: 8px;
    margin-bottom: 8px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
}

details[open] .reasoning-content {
    max-height: 5000px;
    opacity: 1;
    padding-top: 8px;
    padding-bottom: 8px;
}

details summary {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
    font-size: 14px;
}

details summary:hover {
    color: #1f4788;
}

/* ============================================
   SOURCES TOGGLE - AUTO-COLLAPSE STYLING
   ============================================ */

.sources-toggle {
    margin-top: 16px;
    border-top: 1px solid #e5e7eb;
    padding-top: 12px;
    margin-left: -20px;
}

.sources-toggle summary {
    font-weight: 600;
    color: #374151;
    padding: 8px 0;
    cursor: pointer;
}

.sources-toggle[open] summary {
    margin-bottom: 12px;
}

/* ============================================
   LOADING ANIMATIONS
   ============================================ */

@keyframes smoothSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes breathing {
    0%, 100% { 
        transform: scale(1); 
        opacity: 1;
        filter: brightness(1);
    }
    50% { 
        transform: scale(1.35); 
        opacity: 0.6;
        filter: brightness(1.2);
    }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes glow {
    0%, 100% { 
        filter: drop-shadow(0 0 2px rgba(31, 71, 136, 0.3));
        transform: scale(1);
    }
    50% { 
        filter: drop-shadow(0 0 12px rgba(31, 71, 136, 0.8));
        transform: scale(1.05);
    }
}

@keyframes wave {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    10% { transform: scale(1.1); }
    20% { transform: scale(1); }
    30% { transform: scale(1.1); }
    40%, 100% { transform: scale(1); }
}

@keyframes fadePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@keyframes spinGlow {
    0% { 
        transform: rotate(0deg); 
        filter: drop-shadow(0 0 3px rgba(31, 71, 136, 0.5));
    }
    50% { 
        filter: drop-shadow(0 0 10px rgba(31, 71, 136, 0.9));
    }
    100% { 
        transform: rotate(360deg); 
        filter: drop-shadow(0 0 3px rgba(31, 71, 136, 0.5));
    }
}

@keyframes spinPulse {
    0% { transform: rotate(0deg) scale(1); opacity: 1; }
    25% { transform: rotate(90deg) scale(0.9); opacity: 0.6; }
    50% { transform: rotate(180deg) scale(1); opacity: 1; }
    75% { transform: rotate(270deg) scale(0.9); opacity: 0.6; }
    100% { transform: rotate(360deg) scale(1); opacity: 1; }
}

ol.my-3.ml-3.list-decimal.pl-2.\[\&\>li\]\:mt-1 {
    font-size: 14px;
    color: #0a4f76;
}

/* ============================================
   PREPROCESSING NOTICE STYLING
   ============================================ */

.preprocessing-notice {
    background: #d0ffda;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.9em;
    color: #484848 !important;
  }

.preprocessing-notice strong {
    color: #ffffff !important;
    font-weight: 600;
}

.dark .preprocessing-notice {
    background: linear-gradient(135deg, #4c51bf 0%, #5a3e7d 100%);
    border-left-color: #4c51bf;
    box-shadow: 0 2px 8px rgba(76, 81, 191, 0.3);
}

/* ============================================
   RESPONSE BODY STYLING - FONT SIZES
   ============================================ */

.response-body {
    display: block;
    width: 100%;
    font-size: 15px !important;
}

/* Welcome message font size */
.message-content p,
.step .message-content {
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* User messages font size */
.step[data-step-type="user_message"] .message-content,
.step[data-step-type="user_message"] p {
    font-size: 15px !important;
}

/* Assistant messages font size */
.step[data-step-type="assistant_message"] .message-content,
.step[data-step-type="assistant_message"] p {
    font-size: 15px !important;
}

/* All messages - global override */
div[class*="message"] p,
div[class*="step"] p,
.ai-message p,
.user-message p {
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* Bullet lists in messages */
div[class*="message"] ul li,
div[class*="message"] ol li {
    font-size: 15px !important;
}

/* Headers in messages (keep slightly larger) */
div[class*="message"] h1 { font-size: 20px !important; }
div[class*="message"] h2 { font-size: 18px !important; }
div[class*="message"] h3 { font-size: 16px !important; }

/* ============================================
   CHAT INPUT BOX - FONT SIZE
   ============================================ */

div#chat-input {
    font-size: 15px;
}