File size: 7,752 Bytes
26929e9 8885e24 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 | /* --- Global Setup & Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Outlined');
:root {
--primary-color: #3B5998;
--background-color: #121212;
--card-bg-color: #1E1E1E;
--border-color: #2C2C2C;
--user-msg-bg: #3B5998;
--bot-msg-bg: #2A2A2A;
--text-color: #EAEAEA;
--text-muted: #8E8E93;
}
body {
font-family: 'Inter', sans-serif;
margin: 0;
background: var(--background-color) url('https://miro.medium.com/v2/resize:fit:1400/1*ADTdNBw3fFnGFeg81UBKjw.gif') no-repeat center center fixed;
background-size: cover;
color: var(--text-color);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden; /* Prevent body scroll */
}
/* --- Main Layout --- */
.chat-window {
width: 100%;
max-width: 800px;
height: 100%; /* Full height on mobile */
background: var(--card-bg-color);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
border: 1px solid var(--border-color);
display: flex; /* FIX: Use flexbox for layout */
flex-direction: column; /* FIX: Stack children vertically */
transition: all 0.3s ease;
overflow: hidden; /* FIX: Prevent internal content from spilling out */
}
@media (min-width: 800px) {
.chat-window {
height: 90vh;
border-radius: 9px;
}
}
/* --- Home Screen / Initial View --- */
.home-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 40px;
flex-grow: 1; /* Takes up available space */
}
.home-screen.hidden, .chat-view.hidden {
display: none;
}
.home-screen h1 { font-size: 2.5rem; margin-bottom: 8px; }
.home-screen p { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 40px; }
.suggestion-cards { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; }
.suggestion-card {
background: var(--bot-msg-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 20px;
width: 180px;
text-align: left;
cursor: pointer;
transition: all 0.2s ease;
}
.suggestion-card:hover { transform: translateY(-5px); border-color: var(--primary-color); }
.suggestion-card .material-icons-outlined { font-size: 2rem; color: var(--primary-color); margin-bottom: 10px; }
.suggestion-card h3 { margin: 0; font-size: 1rem; }
/* --- FIX: Chat View Layout --- */
.chat-view {
flex-grow: 1; /* Takes all available vertical space */
display: flex;
flex-direction: column;
overflow: hidden; /* Important for containing the scrolling area */
}
.chat-container {
flex-grow: 1; /* Allows this to fill space */
padding: 20px;
overflow-y: auto; /* Enables scrolling for messages */
display: flex;
flex-direction: column;
gap: 15px;
/* FIX: Add padding at the bottom to ensure the last message isn't hidden by the input area */
padding-bottom: 30px;
}
/* --- Chat Messages --- */
.chat-message {
padding: 12px 18px;
max-width: 80%;
word-wrap: break-word;
opacity: 0;
transform: translateY(10px);
animation: slide-fade-in 0.3s ease forwards;
}
@keyframes slide-fade-in {
to { opacity: 1; transform: translateY(0); }
}
.user-message {
background-color: var(--user-msg-bg);
color: white;
align-self: flex-end;
border-radius: 12px 12px 4px 12px;
}
.bot-message {
background-color: var(--bot-msg-bg);
color: var(--text-color);
align-self: flex-start;
border: 1px solid var(--border-color);
border-radius: 12px 12px 12px 4px;
}
.bot-message.error { background-color: rgba(217, 48, 37, 0.2); border-color: #D93025; }
.bot-message.thinking::after { content: '▋'; animation: blink 1s infinite; display: inline-block; margin-left: 5px; }
@keyframes blink { 50% { opacity: 0; } }
/* Markdown Styles */
.bot-message h1, .bot-message h2, .bot-message h3 { margin-top: 0.5em; margin-bottom: 0.5em; }
.bot-message p { margin: 0.5em 0; }
.bot-message ul, .bot-message ol { padding-left: 20px; }
.bot-message li { margin-bottom: 0.25em; }
.bot-message a { color: var(--primary-color); text-decoration: none; }
.bot-message a:hover { text-decoration: underline; }
.bot-message code { background-color: #111; padding: 2px 5px; border-radius: 4px; font-family: 'Courier New', Courier, monospace; }
.bot-message pre { background-color: #0d0d0d; padding: 15px; border-radius: 8px; overflow-x: auto; white-space: pre-wrap; border: 1px solid var(--border-color); }
.bot-message pre code { background-color: transparent; padding: 0; }
/* --- Input Area --- */
.input-area {
/* FIX: No sticky positioning needed here with the new flexbox structure */
/* It will naturally sit at the bottom */
padding: 10px 15px;
border-top: 1px solid var(--border-color);
background-color: var(--card-bg-color);
flex-shrink: 0; /* Prevents the input area from shrinking */
}
#chat-form { display: flex; flex-direction: column; gap: 10px; }
/* Attachment Preview Chip */
#attachment-preview {
display: inline-flex; /* Use inline-flex to be compact */
align-items: center;
gap: 8px;
background: var(--bot-msg-bg);
border: 1px solid var(--border-color);
padding: 5px 10px;
border-radius: 20px;
max-width: fit-content;
animation: scale-in 0.2s ease;
}
@keyframes scale-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
#attachment-preview .filename { font-size: 0.9rem; }
#remove-attachment-btn { cursor: pointer; display: flex; align-items: center; }
/* Input Controls & Bar */
.input-controls { display: flex; justify-content: flex-end; align-items: center; padding: 0 5px; }
.search-toggle-container { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); }
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 22px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--primary-color); }
input:checked + .slider:before { transform: translateX(18px); }
.input-bar { display: flex; align-items: flex-end; gap: 10px; }
#prompt-input {
flex-grow: 1;
background: transparent;
border: 1px solid var(--border-color);
border-radius: 20px;
padding: 10px 15px;
font-size: 1rem;
color: var(--text-color);
resize: none;
max-height: 120px; /* Limit growth */
overflow-y: auto; /* Add scroll if it gets too big */
transition: border-color 0.2s, box-shadow 0.2s;
}
#prompt-input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(59, 89, 152, 0.3);
}
.icon-btn {
border: none;
background: none;
padding: 8px;
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
transition: all 0.2s ease;
flex-shrink: 0; /* Prevent icons from shrinking */
}
.icon-btn:hover { color: var(--text-color); background-color: rgba(255, 255, 255, 0.1); }
.icon-btn:disabled { cursor: not-allowed; opacity: 0.4; pointer-events: none; background: none !important; }
#send-btn { background-color: var(--primary-color); color: white; }
#send-btn:hover { background-color: #4a69ad; } |