/* AI CHATBOT - EXPERT WEB TOOLS */

@font-face { font-family: 'Inter';       src: url('/fonts/inter-v20-latin-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Orbitron';    src: url('/fonts/orbitron-v35-latin-700.woff2')  format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Roboto Mono'; src: url('/fonts/roboto-mono-v31-latin-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
    --bg-main:          #0a0a0f;
    --primary-accent:   #3b82f6;
    --secondary-accent: #8b5cf6;
    --text-main:        #ffffff;
    --text-muted:       #94a3b8;
    --card-bg:          rgba(25, 25, 35, 0.6);
    --card-border:      rgba(255, 255, 255, 0.08);
    --input-bg:         rgba(0, 0, 0, 0.3);
    --user-msg-bg:      #3b82f6;
    --user-msg-text:    #ffffff;
    --ai-msg-bg:        rgba(25, 25, 35, 0.9);
    --link-color:       #60a5fa;
    --font-heading:     'Orbitron', sans-serif;
    --font-body:        'Inter', sans-serif;
    --font-code:        'Roboto Mono', monospace;
}

html.light-theme {
    --bg-main:          #f8fafc;
    --primary-accent:   #2563eb;
    --secondary-accent: #7c3aed;
    --text-main:        #0f172a;
    --text-muted:       #475569;
    --card-bg:          #ffffff;
    --card-border:      #e2e8f0;
    --input-bg:         #ffffff;
    --user-msg-bg:      #2563eb;
    --user-msg-text:    #ffffff;
    --ai-msg-bg:        #f8fafc;
    --link-color:       #2563eb;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; max-width: 100%; transition: background-color 0.2s ease; }

body { 
    background-color: var(--bg-main);
    color: var(--text-main); font-family: var(--font-body); 
    min-height: 100vh; display: flex; flex-direction: column; 
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.mobile-only { display: none; }

.background-glow { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at center, rgba(139, 92, 246, 0.08) 0%, rgba(10, 10, 15, 0) 50%); z-index: -1; pointer-events: none; transition: background 0.3s ease; }
html.light-theme .background-glow { background: radial-gradient(circle at center, rgba(139, 92, 246, 0.03) 0%, rgba(255, 255, 255, 0) 50%); }

.noscript-warning, .error-msg { color: #ef4444; font-size: 0.95rem; line-height: 1.5; }
.noscript-warning { background: #ef4444; color: #fff; padding: 15px; text-align: center; border-radius: 8px; margin-bottom: 20px; }

/* Header */
.tool-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 5%; max-width: 1400px; margin: 0 auto; width: 100%; z-index: 1000; position: relative; }
.back-btn { color: var(--text-muted); text-decoration: none; display: flex; align-items: center; gap: 8px; transition: color 0.3s; padding: 4px 8px; border-radius: 6px; }
.back-btn:hover { color: var(--primary-accent); }
.back-btn:focus-visible { outline: 2px solid var(--primary-accent); }
.logo { font-family: var(--font-heading); font-size: 1.2rem; }
.logo span { color: var(--secondary-accent); }

.header-actions { display: flex; gap: 10px; align-items: center; }

.theme-toggle-btn { 
    background: transparent; border: none; cursor: pointer; color: var(--text-muted); 
    font-size: 1.25rem; display: flex; align-items: center; justify-content: center; 
    padding: 6px; border-radius: 50%; transition: color 0.2s; 
    width: 36px; height: 36px; flex-shrink: 0;
}
.theme-toggle-btn:hover { color: var(--primary-accent); }

.icon-btn { background: transparent; border: 1px solid var(--card-border); color: var(--text-muted); padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 6px; }
.icon-btn:hover { color: var(--text-main); border-color: var(--text-main); }
.cmd-trigger span { font-size: 0.8rem; font-family: var(--font-code); background: rgba(128,128,128,0.2); padding: 2px 6px; border-radius: 4px; }

/* Main Layout */
.main-content { flex-grow: 1; padding: 0 5% 2rem 5%; max-width: 1400px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; min-width: 0; }
.tool-intro { text-align: center; margin-bottom: 2rem; }
.tool-intro h1 { font-family: var(--font-heading); font-size: 2rem; margin-bottom: 0.5rem; }
.tool-intro p { color: var(--text-muted); }

.tool-layout { display: grid; grid-template-columns: 300px 1fr; gap: 1.5rem; height: calc(100vh - 250px); min-height: 600px; min-width: 0; }

/* Sidebar */
.sidebar { display: flex; flex-direction: column; gap: 1.5rem; overflow-y: auto; padding-right: 5px; min-width: 0; }
.sidebar-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--card-border); padding-bottom: 10px; margin-bottom: 10px; }
.sidebar-header h3 { font-family: var(--font-heading); font-size: 1.1rem; margin: 0; }

.sidebar-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 1.5rem; }
.sidebar-card h3 { font-family: var(--font-heading); font-size: 0.9rem; margin-bottom: 1rem; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }

select, textarea { width: 100%; background: var(--input-bg); border: 1px solid var(--card-border); color: var(--text-main); padding: 10px; border-radius: 8px; font-family: var(--font-body); font-size: 0.9rem; outline: none; transition: border-color 0.2s; }
select { cursor: pointer; }
select option { background-color: var(--bg-main); color: var(--text-main); }
textarea:focus, select:focus { border-color: var(--primary-accent); }
textarea:focus-visible, select:focus-visible { outline: 2px solid var(--primary-accent); outline-offset: 2px; }

#tool-input { resize: vertical; min-height: 80px; margin-bottom: 10px; }

.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool-btn { background: transparent; border: 1px solid var(--card-border); color: var(--text-muted); padding: 8px; border-radius: 6px; cursor: pointer; font-size: 0.8rem; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.tool-btn:hover { background: rgba(139, 92, 246, 0.05); color: var(--text-main); border-color: var(--text-muted); }
.tool-btn:focus-visible { outline: 2px solid var(--primary-accent); }
.tool-btn i { font-size: 1.2rem; color: var(--secondary-accent); }

.action-card { display: flex; flex-direction: column; gap: 10px; }
.clear-btn, .secondary-btn, .primary-btn { width: 100%; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; border: none; }
.clear-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }
.clear-btn:hover { background: rgba(239, 68, 68, 0.2); }
.clear-btn:focus-visible { outline: 2px solid #ef4444; }
.secondary-btn { background: transparent; color: var(--text-muted); border: 1px solid var(--card-border); }
.secondary-btn:hover { color: var(--text-main); border-color: var(--text-main); }
.primary-btn { background: var(--primary-accent); color: #fff; }
.primary-btn:hover { background: #2563eb; }

/* Chat Interface */
.chat-interface { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; min-width: 0; position: relative; }
.chat-window { flex-grow: 1; padding: 1.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1.5rem; scroll-behavior: smooth; overscroll-behavior: contain; }

/* Drag & Drop Overlay */
.drag-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10,10,15,0.85); z-index: 9999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); border: 4px dashed var(--primary-accent); }
.drag-overlay.hidden { display: none !important; }
.drag-content { text-align: center; color: #fff; }
.drag-content i { font-size: 4rem; color: var(--primary-accent); margin-bottom: 1rem; animation: bounce 2s infinite; }
.drag-content h2 { font-family: var(--font-heading); font-size: 2rem; margin-bottom: 0.5rem; }

/* Prompts */
.prompt-starters-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; text-align: center; animation: fadeIn 0.5s ease; padding: 2rem 0; }
.prompt-starters-wrapper h2 { font-family: var(--font-heading); color: var(--text-muted); margin-bottom: 1.5rem; font-size: 1.4rem; }
.prompt-starters { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; max-width: 600px; }
.prompt-pill { background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); color: var(--text-main); padding: 12px 20px; border-radius: 20px; cursor: pointer; font-size: 0.95rem; transition: all 0.2s; font-family: var(--font-body); }
.prompt-pill:hover { background: var(--primary-accent); color: #fff; transform: translateY(-2px); }

/* Messages */
.message { display: flex; gap: 15px; max-width: 90%; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.avatar { width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ai-message { align-self: flex-start; }
.ai-message .avatar { background: var(--card-border); color: var(--secondary-accent); }
.ai-message .message-content { background: var(--ai-msg-bg); border: 1px solid var(--card-border); border-radius: 0 12px 12px 12px; }
.user-message { align-self: flex-end; flex-direction: row-reverse; }
.user-message .avatar { background: var(--primary-accent); color: #fff; }
.user-message .message-content { background: var(--user-msg-bg); color: var(--user-msg-text); border-radius: 12px 0 12px 12px; }

.message-content { padding: 12px 16px; font-size: 0.95rem; line-height: 1.6; min-width: 0; word-wrap: break-word; overflow-wrap: break-word; width: 100%; color: var(--text-main); }
.message-content p { margin-bottom: 10px; }
.message-content p:last-child { margin-bottom: 0; }
.message-content ul, .message-content ol { padding-left: 20px; margin-bottom: 10px; }
.message-content table { border-collapse: collapse; width: 100%; margin-bottom: 10px; overflow-x: auto; display: block; }
.message-content th, .message-content td { border: 1px solid var(--card-border); padding: 8px; text-align: left; }

/* Enhanced Message Copy Action (Phase 2) */
.msg-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.copy-msg-btn { background: transparent; border: none; color: var(--text-muted); cursor: pointer; transition: color 0.2s; display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-family: var(--font-body); padding: 4px 8px; border-radius: 4px; }
.copy-msg-btn:hover { color: var(--text-main); background: rgba(255, 255, 255, 0.05); }

/* Code Blocks & Diff Integration */
.code-block-wrapper { margin: 10px 0; border: 1px solid var(--card-border); border-radius: 8px; overflow: hidden; background: #0d0d12; width: 100%; }
.code-header { display: flex; justify-content: space-between; align-items: center; background: rgba(255, 255, 255, 0.05); padding: 6px 12px; font-family: var(--font-code); font-size: 0.8rem; color: #94a3b8; }
.code-header-actions { display: flex; gap: 10px; }
.code-lang { text-transform: uppercase; }
.copy-code-btn, .view-diff-btn { background: transparent; border: none; color: #94a3b8; cursor: pointer; transition: color 0.2s; display: flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: 0.8rem; padding: 2px 4px; border-radius: 4px; }
.copy-code-btn:hover { color: #fff; }
.view-diff-btn { color: var(--secondary-accent); }
.view-diff-btn:hover { color: #fff; }
.message-content pre { margin: 0; padding: 12px; overflow-x: auto; max-width: 100%; }
.message-content code { font-family: var(--font-code); font-size: 0.9rem; white-space: pre; }
.message-content p code, .message-content li code { background: rgba(128, 128, 128, 0.2); padding: 2px 6px; border-radius: 4px; color: var(--secondary-accent); white-space: pre-wrap; word-wrap: break-word; }

/* Smart Router Chips */
.smart-router-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); color: var(--primary-accent); padding: 6px 12px; border-radius: 16px; text-decoration: none; font-size: 0.85rem; font-weight: 600; margin-top: 10px; transition: all 0.2s; }
.smart-router-chip:hover { background: var(--primary-accent); color: #fff; }
.smart-chips-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Typing Indicator */
.typing-indicator { padding: 10px 1.5rem; font-size: 0.8rem; color: var(--text-muted); font-style: italic; display: none; }
.typing-indicator.visible { display: block; }
.typing-indicator span { display: inline-block; width: 6px; height: 6px; background: var(--text-muted); border-radius: 50%; margin-right: 3px; animation: bounce 1.2s infinite; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }

/* Input Area */
.chat-input-area { padding: 1rem; border-top: 1px solid var(--card-border); background: var(--card-bg); position: relative; z-index: 10; }
.input-wrapper { display: flex; gap: 10px; align-items: flex-end; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--card-border); border-radius: 20px; padding: 6px 6px 6px 16px; transition: border-color 0.2s; }
.input-wrapper:focus-within { border-color: var(--primary-accent); background: rgba(255, 255, 255, 0.08); }
html.light-theme .input-wrapper { background: #ffffff; border-color: #cbd5e1; }
html.light-theme .input-wrapper:focus-within { border-color: var(--primary-accent); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

#chat-input { 
    flex-grow: 1; background: transparent; border: none; 
    color: var(--text-main); outline: none; font-size: 1rem; 
    resize: none; overflow-y: hidden; min-height: 24px; max-height: 150px; 
    line-height: 1.5; font-family: var(--font-body); margin: 6px 0;
}

.input-actions { display: flex; gap: 8px; flex-shrink: 0; }
#send-btn, #stop-btn { width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; font-size: 1rem; transition: transform 0.2s, background 0.2s, color 0.2s; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
#send-btn { background: var(--primary-accent); }
#send-btn:hover:not(:disabled) { transform: scale(1.05); }
#send-btn:disabled { background: transparent; color: var(--text-muted); cursor: not-allowed; transform: none; }
#stop-btn { background: #ef4444; }
#stop-btn:hover { background: #dc2626; transform: scale(1.05); }

/* Command Palette */
.cmd-palette { margin: auto; padding: 0; border: none; border-radius: 12px; background: transparent; overflow: hidden; width: 90%; max-width: 600px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); backdrop-filter: blur(10px); }
.cmd-palette::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); }
.cmd-palette-content { background: var(--bg-main); border: 1px solid var(--card-border); border-radius: 12px; display: flex; flex-direction: column; max-height: 70vh; }
.cmd-search-header { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--card-border); }
.cmd-search-header i { color: var(--primary-accent); font-size: 1.1rem; }
.cmd-search-header input { flex-grow: 1; background: transparent; border: none; color: var(--text-main); font-size: 1.1rem; outline: none; font-family: var(--font-body); }
.cmd-esc { font-family: var(--font-code); font-size: 0.75rem; color: var(--text-muted); background: var(--input-bg); padding: 2px 6px; border-radius: 4px; }
.cmd-results { list-style: none; overflow-y: auto; padding: 10px 0; }
.cmd-results li { padding: 12px 20px; color: var(--text-muted); font-size: 0.95rem; display: flex; align-items: center; gap: 12px; cursor: pointer; border-left: 3px solid transparent; }
.cmd-results li i { color: var(--secondary-accent); width: 20px; text-align: center; }
.cmd-results li[aria-selected="true"], .cmd-results li:hover { background: rgba(59,130,246,0.1); color: var(--text-main); border-left-color: var(--primary-accent); }
.cmd-cat { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; padding: 8px 20px; color: #64748b; font-weight: 600; }

/* Modals & Toasts */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 1000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.modal-content { background: var(--bg-main); border: 1px solid var(--card-border); padding: 2rem; border-radius: 12px; width: 90%; max-width: 400px; text-align: center; }
.modal-content h3 { margin-bottom: 1rem; font-family: var(--font-heading); color: var(--text-main); }
.modal-actions { margin-top: 1.5rem; display: flex; gap: 10px; justify-content: center; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #1e1e24; border: 1px solid var(--primary-accent); color: #fff; padding: 10px 20px; border-radius: 8px; z-index: 2000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); transition: opacity 0.3s; font-size: 0.9rem; pointer-events: none; white-space: normal; max-width: 90vw; text-align: center; }
html.light-theme .toast { background: #ffffff; color: #0f172a; border-color: var(--primary-accent); }
.hidden { display: none !important; }
.mt-sm { margin-top: 0.5rem; }

/* SEO / Typography Section */
.info-section { margin-top: 4rem; padding: 0 1rem; width: 100%; }
.faq-container { margin-top: 2rem; max-width: 800px; margin: 0 auto; }
.faq-container h3 { font-family: var(--font-heading); color: var(--text-main); margin: 1.5rem 0 1rem; font-size: 1.5rem; text-align: center; }
.faq-container h4 { color: var(--secondary-accent); font-size: 1.05rem; margin-bottom: 0.5rem; margin-top: 1.5rem; }
.faq-container p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1rem; line-height: 1.6; }

footer { text-align: center; padding: 3rem 0; color: var(--text-muted); font-size: 0.9rem; border-top: 1px solid var(--card-border); margin-top: 3rem; }
footer a { color: var(--link-color); text-decoration: none; }

/* Sidebar Overlay for Mobile */
.sidebar-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 1999; backdrop-filter: blur(2px);
    transition: opacity 0.3s;
}

/* =========================================================================
   MOBILE UI 
   ========================================================================= */

@media (max-width: 800px) {
    .mobile-only { display: flex; }
    .hide-mobile { display: none; }

    html { 
        height: -webkit-fill-available; 
    }
    body {
        min-height: 100dvh !important;
        min-height: -webkit-fill-available !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        width: 100vw !important;
        margin: 0;
        padding: 0;
        overflow: hidden !important; 
        display: flex; 
        flex-direction: column; 
    }

    .tool-header { 
        padding: 1rem; 
        flex-shrink: 0; 
        background: var(--bg-main); 
        z-index: 1000; 
        border-bottom: 1px solid var(--card-border); 
    }

    .main-content { 
        padding: 0; 
        flex: 1; 
        min-height: 0; 
        display: flex; 
        flex-direction: column; 
    }
    
    .tool-intro, .info-section, footer { display: none; }

    .tool-layout { 
        display: flex; 
        flex-direction: column; 
        flex: 1; 
        min-height: 0; 
        gap: 0; 
    }

    .chat-interface { 
        flex: 1; 
        min-height: 0;
        border: none; 
        border-radius: 0; 
        background: transparent; 
        display: flex; 
        flex-direction: column; 
    }
    
    .chat-window { 
        padding: 1rem; 
        flex: 1; 
        overflow-y: auto; 
        -webkit-overflow-scrolling: touch;
    }
    
    .message { max-width: 100%; }
    
    .chat-input-area { 
        background: var(--bg-main); 
        border-top: 1px solid var(--card-border); 
        padding: 12px 1rem calc(16px + env(safe-area-inset-bottom, 0px)) !important; 
        flex-shrink: 0; 
        position: sticky;
        bottom: 0;
        z-index: 1000;
    }
    
    @media (display-mode: standalone) {
        .chat-input-area {
            padding-bottom: calc(16px + max(32px, env(safe-area-inset-bottom))) !important;
        }
    }
    
    html.light-theme .chat-input-area {
        background: #f8fafc;
        box-shadow: 0 -4px 15px rgba(0,0,0,0.05);
    }
    
    .input-wrapper { border-radius: 24px; padding: 4px 6px 4px 16px; }

    .sidebar {
        position: fixed; top: 0; right: -100%; width: 280px; height: 100%;
        z-index: 2000; background: var(--bg-main); transition: right 0.3s ease;
        padding: 1.5rem; overflow-y: auto; border-left: 1px solid var(--card-border);
    }
    .sidebar.open { right: 0; }
    .sidebar-card { padding: 1rem; background: transparent; border: none; border-bottom: 1px solid var(--card-border); border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }