/* style.css - Multi-Theme, Responsive Edition */ /* Default theme (dark) is defined in :root. Other themes override these variables. */ /* The active theme is set by a class on the tag via JavaScript. */ :root { --primary-color: #ba3f1f; --secondary-color: #F2CC8F; --background-color: #121212; --text-color: #F4F1DE; --text-color-alt: #464540; --ghost-glow-color: #5fbde033; --input-background: rgba(45, 45, 45, 0.6); --control-background: rgba(55, 55, 55, 0.4); --message-user-bg: rgba(75, 80, 110, 0.5); --message-bot-bg: rgba(55, 55, 55, 0.4); --border-color: rgba(75, 80, 110, 0.2); --message-fade-color: rgba(24, 24, 24, 0.0); --success-color: #28a745; --error-color: #dc3545; } * { box-sizing: border-box; } body { background-color: var(--background-color); color: var(--text-color); font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 16px; transition: background-color 0.4s ease, color 0.4s ease; } h2 { font-family: 'Roboto Slab', serif; font-weight: 700; text-align: center; margin-bottom: 1rem; font-size: clamp(2.5rem, 5vw, 5.5rem); opacity: 0.9; background: linear-gradient(90deg, #ff3500, var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } a { color: var(--text-color); text-decoration: none; transition: color 0.3s ease; opacity: 0.8; } a:hover { color: var(--secondary-color); opacity: 1; } header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 1rem 5%; background-image: linear-gradient(to bottom, #1A1A1A 0%, #282828 100%); box-shadow: 0 0 20px var(--ghost-glow-color); position: sticky; top: 0; z-index: 1000; transition: background-image 0.4s ease, box-shadow 0.4s ease; } .logo-container { flex: 0 0 auto; } .logo { font-family: 'Roboto Slab', serif; font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 700; background: linear-gradient(90deg, #ff3500, var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.9; } .nav-links { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .nav-links a { color: var(--text-color); text-decoration: none; font-weight: 600; opacity: 0.8; transition: color 0.3s ease, opacity 0.3s ease, background-color 0.3s ease; font-size: 0.9rem; padding: 0.4rem 0.6rem; border-radius: 5px; } .nav-links a:hover { color: var(--secondary-color); opacity: 1; background-color: var(--control-background); } .chatbot-container.ghostly-theme, .container { max-width: 90%; /*margin: 2rem auto; padding: 1rem;*/ border-radius: 10px; box-shadow: 0 0 20px var(--ghost-glow-color); background-image: linear-gradient(to bottom, #1A1A1A 0%, #282828 100%); transition: background-image 0.4s ease, box-shadow 0.4s ease; } .chatbot-container.ghostly-theme { display: flex; flex-direction: column; min-height: 80vh; } .container { max-width: 60%; } .chat-input-area { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; background-color: var(--input-background); border-radius: 8px; transition: background-color 0.4s ease; } .chat-input-area textarea { background-color: var(--control-background); border: 1px solid var(--border-color); border-radius: 5px; color: var(--text-color); padding: 0.75rem; font-size: 1rem; resize: vertical; min-height: 60px; max-height: 150px; width: 100%; opacity: 0.9; } .chat-input-area button { background-color: var(--primary-color); color: var(--text-color); padding: 0.6rem 1rem; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; font-weight: 600; opacity: 0.9; } .chat-input-area button:hover { filter: brightness(1.2); } .ghost-chat-window { background-color: transparent; border: none; padding: 0; flex-grow: 1; overflow-y: auto; max-height: 120vh; } #chat-history { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; } .chat-entry { display: flex; flex-direction: column; gap: 0.2rem; } .chat-entry .sender { font-weight: 600; color: var(--primary-color); opacity: 0.8; font-size: 0.9rem; } .chat-entry .message-content { padding: 0.5rem 0.75rem; border-radius: 10px; word-wrap: break-word; opacity: 1; max-width: 100%; transition: background-color 0.4s ease; position: relative; } .user-message .message-content { background-color: var(--message-user-bg); color: var(--text-color); align-self: flex-end; } .bot-message .message-content { background-color: var(--message-bot-bg); color: var(--text-color); } .bot-message .message-content a { color: #ffd842 !important; opacity: 1 !important; } .message-content p { margin: 0 0 0.4rem 0; } .message-content strong { font-weight: 700; color: var(--secondary-color); } .message-content code { background-color: rgba(40, 40, 40, 0.6); color: var(--secondary-color); padding: 0.2rem 0.4rem; border-radius: 3px; } .message-content pre { background-color: rgba(40, 40, 40, 0.6); color: var(--secondary-color); padding: 0.5rem; border-radius: 5px; overflow-x: auto; } .message-content ul, .message-content ol { margin: 0.4rem 0 0.4rem 1rem; padding-left: 1rem; } .message-content li { margin-bottom: 0.2rem; } .bot-message .message-content h1, .bot-message .message-content h2 { font-family: 'Roboto Slab', serif; font-weight: 700; text-align: center; margin-bottom: 1rem; opacity: 0.9; background: linear-gradient(90deg, #ff3500, var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .bot-message .message-content h1 { font-size: clamp(1.5rem, 4vw, 3rem) !important; } .bot-message .message-content h2 { font-size: clamp(1.2rem, 3vw, 2rem) !important; } .chat-input-area button#clear-button { background-color: var(--ghost-glow-color) } .chat-input-area button#clear-button:hover { background-color: #777; } .error-message { color: var(--error-color); background-color: rgba(220, 53, 69, 0.1); border: 1px solid var(--error-color); padding: 0.5rem; border-radius: 5px; } .error-message a { color: var(--error-color) !important; font-weight: bold; text-decoration: underline; } @media (min-width: 768px) { .chatbot-container.ghostly-theme { max-width: 900px; } .chat-input-area { flex-direction: row; align-items: center; } .chat-input-area textarea { flex-grow: 1; } .user-message .message-content { margin-left: 20%; } } @media (max-width: 767px) { body { font-size: 14px; } .container, .chatbot-container.ghostly-theme { max-width: 95%; margin: 1rem auto; } .chatbot-container.ghostly-theme { min-height: 90vh; } .ghost-chat-window { max-height: 120vh; } .chat-entry .message-content { max-width: 99%; } .nav-links { margin-top: 0.5rem; gap: 0.75rem; } } .ghost-chat-window::-webkit-scrollbar { width: 4px; } .ghost-chat-window::-webkit-scrollbar-track { background: transparent; } .ghost-chat-window::-webkit-scrollbar-thumb { background: var(--ghost-glow-color); border-radius: 2px; } .ghost-chat-window::-webkit-scrollbar-thumb:hover { background: rgba(198, 97, 71, 0.4); } /* --- TOKEN, DASHBOARD, AND PAYMENT STYLES --- */ .token-balance-display { display: inline-flex; align-items: center; gap: 0.4rem; background-color: rgba(255, 255, 255, 0.1); padding: 0.4rem 0.8rem; border-radius: 20px; font-weight: 600; color: var(--secondary-color); } .token-balance-display .fa-coins { color: var(--secondary-color); } .dashboard-content { text-align: center; } .credit-balance-container { background-color: var(--input-background); padding: 1rem 2rem; border-radius: 8px; margin: 1.5rem 0; } .credit-balance-container p { margin: 0; font-size: 1.1rem; opacity: 0.8; } .credit-balance-container h1 { margin: 0.5rem 0 0 0; font-size: 3rem; color: var(--primary-color); font-family: 'Roboto Slab', serif; } .purchase-options form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; } .purchase-btn { background-color: var(--primary-color); color: var(--text-color); padding: 1rem; border: none; border-radius: 5px; cursor: pointer; transition: filter 0.2s ease; font-size: 1.1rem; font-weight: 600; width: 100%; } .purchase-btn:hover { filter: brightness(1.2); } .payment-message { padding: 1rem; border-radius: 5px; font-weight: 600; } .payment-message.success { background-color: rgba(40, 167, 69, 0.2); color: var(--success-color); border: 1px solid var(--success-color); } .payment-message.error { background-color: rgba(220, 53, 69, 0.2); color: var(--error-color); border: 1px solid var(--error-color); } /* --- THEME TOGGLE BUTTON & ADDITIONAL THEMES --- */ .theme-toggle { background: none; border: none; color: var(--text-color); cursor: pointer; font-size: 1.2rem; padding: 0.4rem; margin-left: 0.5rem; opacity: 0.8; transition: color 0.3s ease, opacity 0.3s ease; border-radius: 50%;} .theme-toggle:hover { color: var(--secondary-color); opacity: 1; background-color: var(--control-background); } /* 1. Light Theme (DEFAULT) */ html.light-mode { --primary-color: #d9534f; --secondary-color: #f0ad4e; --background-color: #f4f4f4; --text-color: #333333; --ghost-glow-color: rgba(0, 0, 0, 0.1); --input-background: #ffffff; --control-background: #fdfdfd; --message-user-bg: #dcedc8; --message-bot-bg: #e1f5fe; --border-color: #dddddd; --success-color: #1e7e34; --error-color: #c82333; } html.light-mode header { background-image: linear-gradient(to bottom, #ffffff 0%, #f1f1f1 100%); } html.light-mode .chatbot-container.ghostly-theme, html.light-mode .container { background-image: linear-gradient(to bottom, #ffffff 0%, #f9f9f9 100%); } html.light-mode h2, html.light-mode .logo, html.light-mode .bot-message .message-content h1, html.light-mode .bot-message .message-content h2 { background: linear-gradient(90deg, #d9534f, #5e2ca5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } html.light-mode .message-content code, html.light-mode .message-content pre { background-color: #f5f5f5; color: #c7254e; border: 1px solid #ddd; } html.light-mode .bot-message .message-content a { color: #0275d8 !important; } /* 2. Natural Theme */ html.natural-mode { --primary-color: #6A994E; --secondary-color: #A7C957; --background-color: #FBF7F0; --text-color: #3C2A21; --ghost-glow-color: rgba(106, 153, 78, 0.2); --input-background: #F5F1E9; --control-background: #FDFBF6; --message-user-bg: #E9F5DB; --message-bot-bg: #CFE1B9; --border-color: #D4CFC6; } html.natural-mode header { background-image: linear-gradient(to bottom, #f7f2e8 0%, #ede7da 100%); } html.natural-mode .chatbot-container.ghostly-theme, html.natural-mode .container { background-image: linear-gradient(to bottom, #f7f2e8 0%, #f1ebd8 100%); } html.natural-mode h2, html.natural-mode .logo, html.natural-mode .bot-message .message-content h1, html.natural-mode .bot-message .message-content h2 { background: linear-gradient(90deg, #6A994E, #386641); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } html.natural-mode .bot-message .message-content a { color: #386641 !important; } /* 3. Ocean Theme */ html.ocean-mode { --primary-color: #64bec2; --secondary-color: #66A5AD; --background-color: #E6F4F1; --text-color: #003B46; --text-color-alt:#04bedf ; --ghost-glow-color: rgba(7, 87, 91, 0.2); --input-background: #D7ECE7; --control-background: #EFF7F5; --message-user-bg: #C4DFE6; --message-bot-bg: #A3CED6; --border-color: #B2D4D9; } html.ocean-mode header { background-image: linear-gradient(to bottom, #e3f0ed 0%, #d8e8e5 100%); } html.ocean-mode .chatbot-container.ghostly-theme, html.ocean-mode .container { background-image: linear-gradient(to bottom, #e3f0ed 0%, #dcefe9 100%); } html.ocean-mode h2, html.ocean-mode .logo, html.ocean-mode .bot-message .message-content h1, html.ocean-mode .bot-message .message-content h2 { background: linear-gradient(90deg, #07575B, #00A8A8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } html.ocean-mode .bot-message .message-content a { color: #00A8A8 !important; } /* 4. Sunset Theme */ html.sunset-mode { --primary-color: #D94A5B; --secondary-color: #F4A663; --background-color: #2E1C2B; --text-color: #FDE8E9; --ghost-glow-color: rgba(217, 74, 91, 0.2); --input-background: rgba(66, 37, 62, 0.6); --control-background: rgba(76, 42, 69, 0.4); --message-user-bg: rgba(76, 42, 69, 0.7); --message-bot-bg: rgba(56, 32, 52, 0.6); --border-color: rgba(217, 74, 91, 0.2); } html.sunset-mode header { background-image: linear-gradient(to bottom, #3a2236 0%, #2e1c2b 100%); } html.sunset-mode .chatbot-container.ghostly-theme, html.sunset-mode .container { background-image: linear-gradient(to bottom, #3a2236 0%, #2e1c2b 100%); } html.sunset-mode h2, html.sunset-mode .logo, html.sunset-mode .bot-message .message-content h1, html.sunset-mode .bot-message .message-content h2 { background: linear-gradient(90deg, #FF8C61, #EE4D68); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } html.sunset-mode .bot-message .message-content a { color: #F4A663 !important; } /* --- Message Action Buttons --- */ .message-actions { position: absolute; top: 5px; right: 8px; display: flex; gap: 5px; opacity: 0; transition: opacity 0.2s ease-in-out; background-color: rgba(0, 0, 0, 0.1); padding: 3px 5px; border-radius: 5px; z-index: 10; } .bot-message .message-content:hover .message-actions { opacity: 1; } .action-btn { background: none; border: none; color: var(--text-color); cursor: pointer; font-size: 0.8rem; opacity: 0.7; transition: opacity 0.2s ease, color 0.2s ease; padding: 2px; } .action-btn:hover { opacity: 1; color: var(--secondary-color); } /* --- Agent Selector Dropdown --- */ .agent-selector-wrapper { position: relative; display: flex; align-items: center; } .agent-selector-dropdown { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--control-background); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 5px; padding: 0.4rem 2rem 0.4rem 0.6rem; /* Make space for the arrow */ font-weight: 600; font-size: 0.9rem; cursor: pointer; opacity: 0.8; transition: all 0.3s ease; } .agent-selector-dropdown:hover { opacity: 1; border-color: var(--secondary-color); background-color: var(--message-bot-bg); } .agent-selector-dropdown:focus { outline: none; box-shadow: 0 0 0 2px var(--secondary-color); } /* Custom dropdown arrow */ .agent-selector-wrapper::after { content: '\f078'; /* Font Awesome chevron-down icon */ font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.8rem; color: var(--text-color); opacity: 0.6; position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%); pointer-events: none; /* Allows clicks to pass through to the select element */ transition: opacity 0.3s ease; } .agent-selector-wrapper:hover::after { opacity: 1; } .login-container { display: flex; flex-direction: column; flex-wrap: wrap; max-width: 90%; margin: 2rem auto; padding: 1rem; border-radius: 10px; box-shadow: 0 0 20px var(--ghost-glow-color); background-image: linear-gradient(to bottom, #1A1A1A 0%, #282828 100%); transition: background-image 0.4s ease, box-shadow 0.4s ease; align-items: center; } .login-container input { line-height: 3em; border-radius: 20px; padding: 10px; padding-left: 20px; font-weight: 900; } .login-button { background-color: var(--primary-color); /*color: var(--text-color-alt);*/ color: var(--background-color); padding: 0.6rem 1rem; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; font-weight: 600; opacity: 0.9; font-size: x-large; margin: 10px; } .login-button:hover { filter: brightness(1.2); } .login-form { display: flex; flex-direction: column; align-items: center; }