/* General Styling */
:root {
    --primary-bg: #101012;
    --secondary-bg: #1c1c21;
    --accent-color: #4ecca3;
    --text-color: #e1e1e1;
    --user-bubble: #007bff;
    --ai-bubble: #3a3f47;
    --glow-color: rgba(78, 204, 163, 0.4);
}

body {
    margin: 0;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    background: radial-gradient(ellipse at center, #232328 0%, var(--primary-bg) 70%);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#app-container {
    width: 100%;
    max-width: 600px;
    height: 90vh;
    max-height: 800px;
    background-color: var(--secondary-bg);
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5), 0 0 15px var(--glow-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* --- Keyframe Animations --- */
@keyframes fadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
@keyframes fadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.98); visibility: hidden; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }
@keyframes blink { from, to { background-color: transparent; } 50% { background-color: var(--accent-color); } }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } }

/* Gate Styling */
#gate { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; height: 100%; text-align: center; animation: fadeIn 0.8s ease-in-out; }
.fade-out { animation: fadeOut 0.5s ease-in-out forwards; }
.shake { animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; }
#gate .logo { width: 100px; height: 100px; margin-bottom: 20px; filter: drop-shadow(0 0 10px var(--accent-color)); }
#gate h1 { margin: 0 0 10px 0; color: var(--accent-color); font-family: 'Orbitron', sans-serif; font-weight: 700; }
#gate p { margin-bottom: 20px; color: #a0a0a0; }
#gate-passphrase { width: 80%; padding: 12px; border: 1px solid #444; border-radius: 8px; background-color: var(--primary-bg); color: var(--text-color); font-size: 1rem; margin-bottom: 15px; transition: all 0.2s; }
#gate-passphrase:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 5px var(--glow-color); }
#gate-enter { width: 50%; padding: 12px; border: none; border-radius: 8px; background-color: var(--accent-color); color: var(--primary-bg); font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: background-color 0.2s; }
#gate-enter:hover { background-color: #5ffad4; }
.error-message { color: #ff4d4d; height: 20px; margin-top: 10px; }

/* Chat Styling */
#chat-container { display: flex; flex-direction: column; height: 100%; animation: fadeIn 0.5s ease-in-out; }
.chat-header { padding: 15px 20px; background-color: #222; border-bottom: 1px solid #333; text-align: center; }
.chat-header h2 { margin: 0; color: var(--accent-color); font-family: 'Orbitron', sans-serif; }
.chat-header p { margin: 0; font-size: 0.8rem; color: #00ff00; }
#chat-box { flex-grow: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
#chat-box::-webkit-scrollbar { width: 8px; }
#chat-box::-webkit-scrollbar-track { background: var(--secondary-bg); }
#chat-box::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
.message { padding: 12px 18px; border-radius: 20px; max-width: 80%; line-height: 1.5; word-wrap: break-word; animation: slideUp 0.4s ease-out; }
.user-message { background-color: var(--user-bubble); color: white; align-self: flex-end; border-bottom-right-radius: 5px; }
.ai-message { background-color: var(--ai-bubble); color: var(--text-color); align-self: flex-start; border-bottom-left-radius: 5px; }
.ai-message .cursor { display: inline-block; width: 10px; height: 1.2em; background-color: var(--accent-color); animation: blink 1s step-end infinite; }
.typing-indicator-container { height: 25px; padding-left: 25px; }
#typing-indicator span { height: 10px; width: 10px; background-color: #888; border-radius: 50%; display: inline-block; animation: bounce 1.4s infinite ease-in-out both; }
#typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
#typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
#chat-input-area { display: flex; padding: 15px; border-top: 1px solid #333; gap: 10px; }
#chat-input { flex-grow: 1; padding: 12px; border: 1px solid #444; border-radius: 20px; background-color: var(--primary-bg); color: var(--text-color); font-size: 1rem; }
#chat-send { padding: 0 20px; border: none; border-radius: 20px; background-color: var(--accent-color); color: var(--primary-bg); font-size: 1rem; font-weight: bold; cursor: pointer; transition: background-color 0.2s; }
#chat-send:hover { background-color: #5ffad4; }
.hidden { display: none !important; }