/* --- Base & Variables --- */
*{margin:0;padding:0;box-sizing:border-box}

:root {
    /* These variables will be updated by JS */
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1f;
    --bg-tertiary: #25252a;
    --bg-quaternary: #2f2f35;
    
    /* Text & Accents */
    --text-primary: #ffffff;
    --text-secondary: #d4d4d8;
    --text-tertiary: #a1a1aa;
    --border-primary: #27272a;
    --border-secondary: #3f3f46;
    --accent-primary: #00b8d4;
    --accent-success: #00ff88;
    
    /* Spacing & Radius */
    --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px;
    --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
    --transition-fast: 0.15s ease; --transition-normal: 0.25s ease;
}

body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    padding-top: 120px;
    overflow-x: hidden;
    /* Smooth transition for theme switching */
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* --- Layer 1: ThreeJS Particles (Deepest) --- */
#bg-canvas {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.4; pointer-events: none;}

/* --- Layer 2: WhatsApp-Style Food Pattern (Middle) --- */
.background-pattern {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
    opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20 L25 35 L15 35 Z M22 35 L22 45' stroke='%23ffffff' stroke-width='2' fill='none'/%3E%3Ccircle cx='70' cy='25' r='8' stroke='%23ffffff' stroke-width='2' fill='none'/%3E%3Cpath d='M65 70 Q75 60 85 70 T105 70' stroke='%23ffffff' stroke-width='2' fill='none'/%3E%3Crect x='20' y='70' width='15' height='10' stroke='%23ffffff' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-size: 80px 80px;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 100%);
}

.coming-soon-banner{position:fixed;top:0;left:0;right:0;background:linear-gradient(135deg,var(--accent-primary) 0,var(--accent-success) 100%);color:#0a1a1f;padding:16px var(--spacing-lg);text-align:center;font-weight:700;font-size:14px;letter-spacing:1px;text-transform:uppercase;z-index:1000;box-shadow:0 4px 20px rgba(0,212,255,.6);border-bottom:2px solid rgba(0,0,0,.1)}.container{max-width:600px;width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xl);position:relative;z-index: 2;}
.logo-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.logo-img{width:80px;height:80px;border-radius:var(--radius-lg);animation:logoFloat 3s ease-in-out infinite}@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}.logo-text{font-size:36px;font-weight:700;color:var(--text-primary);letter-spacing:-.5px;text-align:center}

/* Unified Button */
.unified-btn { background: linear-gradient(135deg,var(--accent-primary) 0,var(--accent-success) 100%); color: #0a1a1f; border: none; border-radius: var(--radius-lg); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-normal); box-shadow: 0 3px 8px rgba(0,212,255,.3); font-weight: 700; }
.unified-btn:hover:not(:disabled) { transform: scale(1.05) translateY(-2px); box-shadow: 0 6px 14px rgba(0,212,255,.5); filter: brightness(1.1); }
.unified-btn:active:not(:disabled) { transform: scale(1.0) translateY(0); }
.unified-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.subscribe-area { width: 100%; max-width: 500px; display: flex; gap: 10px; flex-direction: column; margin-bottom: 20px; }
.sub-input-group { display: flex; gap: 8px; }
.sub-input { flex: 1; background: var(--bg-tertiary); border: 1px solid var(--border-secondary); padding: 12px 16px; border-radius: var(--radius-lg); color: white; outline: none; transition: all 0.3s; }
.sub-input:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 2px rgba(0, 184, 212, 0.2); }
.sub-btn { padding: 0 24px; height: 48px; font-size: 14px; white-space: nowrap; }
.sub-message { font-size: 13px; text-align: center; height: 20px; margin-top: 5px; }
.sub-message.success { color: var(--accent-success); }
.sub-message.error { color: #ff4d4d; }

/* Chat Interface - Background uses bg-secondary which we will update in JS */
.chat-interface{width:100%;max-width:500px;background:var(--bg-secondary); backdrop-filter: blur(10px); border:1px solid var(--border-primary);border-radius:var(--radius-xl);padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md); transition: background 0.5s ease;}

.input-wrapper{display:flex;align-items:flex-end;gap:var(--spacing-md);background:var(--bg-tertiary);border:2px solid var(--border-secondary);border-radius:var(--radius-xl);padding:var(--spacing-md);transition:all var(--transition-normal);box-shadow:0 2px 8px rgba(0,0,0,.2)}.input-wrapper:focus-within{border-color:var(--accent-success);box-shadow:0 0 0 3px rgba(0,255,136,.2),0 4px 12px rgba(0,255,136,.1);background:var(--bg-quaternary)}.chat-input{flex:1;background:0 0;color:var(--text-primary);border:none;outline:0;font-size:15px;line-height:1.6;resize:none;min-height:24px;max-height:120px;font-family:inherit;padding:8px 0}.chat-input::placeholder{color:var(--text-tertiary);font-style:italic}.chat-input:disabled{opacity:.5;cursor:not-allowed}.send-btn{width: 42px; height: 42px; flex-shrink: 0;}.send-btn i{font-size:18px;}

.message-area{display:flex;flex-direction:column;gap:var(--spacing-md);max-height:5000px;}.typing-indicator{display:none;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-md);padding:var(--spacing-xl) var(--spacing-lg);background:var(--bg-secondary);border:2px solid var(--border-secondary);border-radius:var(--radius-xl);box-shadow:0 8px 32px rgba(0,0,0,.3);min-width:280px}.typing-indicator.show{display:flex}.typing-text{font-size:16px;color:var(--text-secondary);font-weight:500;letter-spacing:.5px}.typing-dots{display:flex;gap:8px;align-items:center;margin-top:8px}.typing-dot{width:10px;height:10px;background:linear-gradient(135deg,var(--accent-primary) 0,var(--accent-success) 100%);border-radius:50%;animation:typingBounce 1.4s ease-in-out infinite both;box-shadow:0 0 8px rgba(0,212,255,.5);will-change:transform,opacity}.typing-dot:nth-child(1){animation-delay:-.32s}.typing-dot:nth-child(2){animation-delay:-.16s}@keyframes typingBounce{0%,100%,80%{transform:scale3d(.8,.8,1) translate3d(0,0,0);opacity:.5}40%{transform:scale3d(1.3,1.3,1) translate3d(0,-8px,0);opacity:1}}

.message-bubbles{display:flex;flex-direction:column;gap:var(--spacing-md); max-height: 400px; overflow-y: auto; padding-right: 5px;}
.message-bubbles::-webkit-scrollbar { width: 4px; }
.message-bubbles::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: 4px; }

.message-bubble{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--spacing-md) var(--spacing-lg);color:var(--text-primary);line-height:1.6;font-size:15px;position:relative;animation: popUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; opacity: 0; transform: translateY(10px);} @keyframes popUp { to { opacity: 1; transform: translateY(0); } }
.message-bubble strong{color:var(--text-primary);font-weight:600;background:linear-gradient(135deg,var(--accent-primary) 0,var(--accent-success) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Bubble Visualizer */
.bubble-visualizer { width: 100%; height: 80px; margin-top: 8px; border-radius: 6px; overflow: hidden; opacity: 0; transition: opacity 0.5s; pointer-events: none; }
.bubble-visualizer.active { opacity: 1; }

/* Suggestion Chips */
.suggestions-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.suggestion-chip {
    background: var(--bg-quaternary); border: 1px solid var(--border-secondary); color: var(--accent-primary);
    padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; cursor: pointer;
    transition: all 0.2s ease; animation: fadeInChip 0.5s ease forwards; opacity: 0; transform: translateY(5px);
}
.suggestion-chip:hover { background: var(--accent-primary); color: #000; border-color: var(--accent-primary); transform: translateY(-2px); }
@keyframes fadeInChip { to { opacity: 1; transform: translateY(0); } }

/* Theme Controls */
.theme-controls { display: flex; justify-content: center; margin-top: 10px; }
.theme-btn {
    background: rgba(255,255,255,0.05); border: 1px solid var(--border-secondary); color: var(--text-tertiary);
    font-size: 12px; padding: 8px 16px; border-radius: 20px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.3s ease;
    user-select: none;
}
.theme-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); border-color: var(--text-secondary); }
.theme-btn:active { transform: scale(0.95); }

.footer{margin-top:var(--spacing-xl);padding-top:var(--spacing-lg);border-top:1px solid var(--border-primary);text-align:center;font-size:12px;color:var(--text-tertiary);line-height:1.8}.footer p{margin:4px 0}.footer a{color:var(--accent-success);text-decoration:none;font-weight:600;transition:color var(--transition-fast)}.footer a:hover{color:var(--accent-primary)}.footer-separator{margin:0 8px;color:var(--border-secondary)}

/* Intro Animation Overlay */
#intro-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--bg-primary); z-index: 9999; display: none; align-items: center; justify-content: center; }
#intro-logo { width: 100px; height: 100px; }
.run-intro-animation { animation: introSequence 3s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; }
@keyframes introSequence { 0% { transform: scale(0.1) rotate(0deg); opacity: 0; } 30% { transform: scale(3.5) rotate(0deg); opacity: 1; } 60% { transform: scale(3.5) rotate(360deg); } 90% { transform: scale(1) rotate(360deg); opacity: 1; } 100% { transform: scale(1) rotate(360deg); opacity: 0; pointer-events: none; } }

@media (max-width:768px){body{padding-top:100px}.coming-soon-banner{font-size:12px;padding:12px var(--spacing-md);letter-spacing:1.5px}.logo-text{font-size:28px}.container{gap:var(--spacing-lg)}.chat-interface{padding:var(--spacing-md)}.sub-input-group{flex-direction: column;}.sub-btn{width: 100%;}}