Spaces:
Running
Running
File size: 4,800 Bytes
19ecfb2 306469e 19ecfb2 c948b81 |
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 |
/* --- Aetheris: The Organic Mind --- */
/* Inspired by nature, glass, nebulas, and soft light. */
:root {
--eth-purple: #b19cd9;
--eth-light: #e6e6fa;
--eth-dark: #0f0a14;
--eth-glass: rgba(255, 255, 255, 0.05);
}
body.aetheris-theme {
background-color: var(--eth-dark);
/* Soft Nebula Gradient */
background-image:
radial-gradient(circle at 10% 20%, rgba(80, 50, 120, 0.15) 0%, transparent 40%),
radial-gradient(circle at 90% 80%, rgba(40, 80, 120, 0.15) 0%, transparent 40%);
font-family: var(--font-ui);
}
.aetheris-theme .navbar {
background: rgba(15, 10, 20, 0.6);
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.chat-wrapper {
max-width: 800px; /* Narrower for intimacy */
margin: 0 auto;
padding-top: var(--nav-height);
height: 100vh;
display: flex;
flex-direction: column;
}
/* Disclaimer */
.disclaimer-banner {
background: rgba(255, 165, 0, 0.1);
border: 1px solid rgba(255, 165, 0, 0.3);
color: #ffd8a8;
padding: 0.75rem;
margin: 1rem 1rem 0 1rem;
border-radius: 8px;
text-align: center;
font-size: 0.9rem;
backdrop-filter: blur(5px);
animation: fadeIn 1s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Messages */
.message-list {
flex: 1;
overflow-y: auto;
padding: 2rem 1rem;
}
.message-row {
display: flex;
gap: 1.5rem;
margin-bottom: 3rem;
align-items: flex-start;
}
.message-row.user { flex-direction: row-reverse; }
.avatar {
width: 42px;
height: 42px;
border-radius: 50%; /* Circles for organic feel */
background-size: cover;
background-position: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
flex-shrink: 0;
}
.avatar.bot { background-image: url('/static/assets/Aetheris_logo.png'); background-color: #fff; }
.avatar.user { background: linear-gradient(135deg, #444, #222); color: #fff; display: flex; align-items: center; justify-content: center;}
.bubble {
font-family: var(--font-ui);
line-height: 1.8;
font-size: 1rem;
color: #e0e0e0;
}
.message-row.user .bubble {
background: var(--eth-glass);
padding: 1rem 1.5rem;
border-radius: 18px 18px 4px 18px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.1);
}
.message-row.bot .bubble {
/* No bubble for bot, just text floating like thought */
padding-top: 0.5rem;
}
/* Input Area - Floating Capsule */
.input-area {
padding: 2rem;
display: flex;
justify-content: center;
}
.input-container {
width: 100%;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 32px;
padding: 0.8rem 1.5rem;
display: flex;
align-items: center;
backdrop-filter: blur(20px);
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
transition: transform 0.2s, background 0.2s;
}
.input-container:focus-within {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255,255,255,0.15);
}
textarea {
width: 100%;
background: transparent;
border: none;
color: #fff;
font-size: 1rem;
padding: 0.2rem;
resize: none;
outline: none;
font-family: var(--font-ui);
}
textarea::placeholder { color: rgba(255,255,255,0.3); }
.btn-send {
background: var(--eth-light);
color: var(--eth-dark);
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin-left: 0.5rem;
transition: transform 0.2s;
}
.btn-send:hover { transform: scale(1.1); }
/* Markdown Overrides */
.prose strong { color: var(--eth-purple); font-weight: 600; }
.prose em { font-family: var(--font-display); font-size: 1.05em; color: #fff; }
/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
.chat-wrapper {
padding-top: var(--nav-height);
height: 100vh;
/* Ensure input area stays visible with virtual keyboard if possible,
though specific viewport unit hacks might be needed for iOS */
}
.message-list {
padding: 1rem 0.5rem;
}
.message-row {
gap: 0.8rem;
margin-bottom: 1.5rem;
}
.avatar {
width: 32px;
height: 32px;
}
.bubble {
font-size: 0.95rem;
line-height: 1.6;
}
.message-row.user .bubble {
padding: 0.8rem 1rem;
border-radius: 14px 14px 2px 14px;
}
.input-area {
padding: 1rem;
}
.input-container {
padding: 0.5rem 1rem;
border-radius: 24px;
}
.btn-send {
width: 32px;
height: 32px;
}
} |