:root{--primary:#228B22;--primary-dark:#1a6b1a;--primary-light:#2ea82e;--bg-ai:#f5f7f6;--text-secondary:#666;--border:#e1e8e5;--shadow:0 2px 8px rgba(34,139,34,0.08);--shadow-lg:0 8px 24px rgba(34,139,34,0.12)}
body{overflow-x:hidden}
.ai-header{text-align:center;padding:20px 0;animation:fadeInDown 0.6s ease}
.ai-header h1{font-size:2.2em;color:var(--primary);margin-bottom:8px;font-weight:700}
.ai-header p{color:var(--text-secondary);font-size:1em}
.features-bar{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:15px 0 20px 0;animation:fadeIn 0.8s ease 0.2s both}
.feature-badge{background:white;padding:6px 14px;border-radius:20px;font-size:0.85em;color:var(--text-secondary);box-shadow:var(--shadow);display:flex;align-items:center;gap:6px;transition:all 0.3s ease}
.feature-badge:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);color:var(--primary)}
.feature-badge i{color:var(--primary);font-size:0.9em}
.chat-container{background:white;border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;animation:fadeInUp 0.6s ease 0.3s both;margin-bottom:20px}
.chat-messages{height:60vh;overflow-y:auto;padding:20px;scroll-behavior:smooth}
.message{margin-bottom:20px;animation:messageSlide 0.4s ease;opacity:0;animation-fill-mode:forwards}
@keyframes messageSlide{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.message-ai{display:flex;gap:10px;align-items:start}
.message-user{display:flex;gap:10px;align-items:start;flex-direction:row-reverse}
.avatar{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1em;box-shadow:var(--shadow)}
.avatar-ai{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);color:white}
.avatar-user{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white}
.message-content{max-width:85%;padding:14px 16px;border-radius:14px;position:relative;word-wrap:break-word;overflow-wrap:break-word}
.message-ai .message-content{background:var(--bg-ai);border-bottom-left-radius:4px}
.message-user .message-content{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);color:white;border-bottom-right-radius:4px}
.message-content p{margin:8px 0;line-height:1.6}
.message-content ul,.message-content ol{margin:8px 0;padding-left:24px;line-height:1.8}
.message-content li{margin:6px 0}
.message-content strong{display:inline-block;margin:12px 0 6px 0;font-size:1.05em}
.message-content hr{margin:16px 0;border:none;border-top:1px solid var(--border)}
mjx-container{display:block!important;overflow-x:auto;overflow-y:hidden;max-width:100%;margin:12px 0!important}
mjx-container[display="true"]{text-align:center}
.MathJax{font-size:1.2em!important;max-width:100%}
.MathJax_Display{overflow-x:auto;overflow-y:hidden}
.message-content pre{background:#282c34;padding:12px;border-radius:6px;overflow-x:auto;margin:10px 0;max-width:100%}
.message-content code{font-family:'Courier New',monospace;font-size:0.9em;word-break:break-all}
.message-actions{position:absolute;bottom:6px;right:6px;opacity:0;transition:opacity 0.2s}
.message-content:hover .message-actions{opacity:1}
.action-btn{background:rgba(255,255,255,0.9);border:none;width:26px;height:26px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all 0.2s}
.action-btn:hover{background:white;color:var(--primary);transform:scale(1.1)}
.typing-indicator{display:flex;gap:5px;padding:15px}
.typing-dot{width:7px;height:7px;background:var(--primary);border-radius:50%;animation:typing 1.4s infinite}
.typing-dot:nth-child(2){animation-delay:0.2s}
.typing-dot:nth-child(3){animation-delay:0.4s}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:0.7}30%{transform:translateY(-8px);opacity:1}}
.thinking-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(34,139,34,0.1);color:var(--primary);padding:4px 10px;border-radius:10px;font-size:0.8em;margin-top:6px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}}
.input-area{padding:16px 20px;background:white;border-top:1px solid var(--border)}
.upload-preview{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.preview-item{position:relative;background:var(--bg-ai);padding:6px 10px;border-radius:8px;display:flex;align-items:center;gap:6px;font-size:0.85em}
.preview-item img{max-height:50px;border-radius:4px}
.preview-remove{background:rgba(255,0,0,0.1);color:#d32f2f;border:none;width:18px;height:18px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.75em}
.input-wrapper{display:flex;gap:10px;align-items:flex-end}
.input-controls{display:flex;flex-direction:column;gap:6px}
.control-btn{background:var(--bg-ai);border:none;width:40px;height:40px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--primary);transition:all 0.3s}
.control-btn:hover{background:var(--primary);color:white;transform:scale(1.05)}
.control-btn input[type="file"]{display:none}
.input-field{flex:1;display:flex;align-items:center;background:var(--bg-ai);border-radius:14px;padding:10px 14px;border:2px solid transparent;transition:all 0.3s}
.input-field:focus-within{border-color:var(--primary);background:white;box-shadow:0 0 0 3px rgba(34,139,34,0.1)}
.input-field textarea{flex:1;border:none;outline:none;background:transparent;resize:none;font-size:0.95em;font-family:inherit;max-height:100px}
.input-field textarea::placeholder{color:var(--text-secondary)}
.send-btn{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);border:none;width:48px;height:48px;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:white;font-size:1.1em;transition:all 0.3s;box-shadow:var(--shadow)}
.send-btn:hover{transform:scale(1.05);box-shadow:var(--shadow-lg)}
.send-btn:disabled{opacity:0.5;cursor:not-allowed;transform:scale(1)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-15px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:768px){.ai-header h1{font-size:1.6em}.message-content{max-width:90%!important}.control-btn{width:36px;height:36px}.chat-messages{height:50vh}.MathJax{font-size:1.1em!important}mjx-container{font-size:0.95em!important}}
#MathJax_Message{display:none!important}
.MathJax_Processing{display:none!important}
/* Add these styles to your existing ai.css file */

/* Math rendering improvements */
.message-content mjx-container {
    display: block !important;
    margin: 16px 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
}

.message-content mjx-container[display="true"] {
    text-align: center;
}

.message-content mjx-container[jax="SVG"] {
    direction: ltr;
}

.message-content mjx-container svg {
    display: block;
    margin: 0 auto;
}

/* Inline math */
.message-content mjx-container:not([display="true"]) {
    display: inline-block !important;
    margin: 0 2px !important;
    vertical-align: middle;
}

/* Math in AI messages - cleaner background */
.message-ai .message-content mjx-container {
    background: transparent;
}

/* Math font scaling */
.MathJax {
    font-size: 1.1em !important;
}

/* Step-by-step math formatting */
.message-content strong + mjx-container {
    margin-top: 8px !important;
}

/* Code blocks (keep existing, enhance if needed) */
.message-content pre {
    background: #282c34;
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 10px 0;
}

.message-content code {
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.message-content pre code {
    background: transparent;
    padding: 0;
}

/* Lists in messages */
.message-content ul,
.message-content ol {
    margin: 8px 0;
    padding-left: 24px;
    line-height: 1.8;
}

.message-content li {
    margin: 6px 0;
}

/* Paragraph spacing */
.message-content p {
    margin: 8px 0;
    line-height: 1.6;
}

/* Headers in messages */
.message-content h1,
.message-content h2,
.message-content h3 {
    margin: 16px 0 8px 0;
    font-weight: 600;
}

/* Horizontal rules */
.message-content hr {
    margin: 16px 0;
    border: none;
    border-top: 1px solid var(--border);
}

/* Hide MathJax processing messages */
#MathJax_Message {
    display: none !important;
}

.MathJax_Processing {
    display: none !important;
}

/* Smooth rendering */
.message-text {
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}