Update application/static/css/style.css

application/static/css/style.css

@@ -1,35 +1,39 @@
-/* Enhanced Base Styles & Variables */
+/* Base Styles & Reset */
 :root {
     --primary-color: #7710ee;
-    --primary-gradient: linear-gradient(45deg, #7710ee, #b44dff);
-    --primary-light: rgba(119, 16, 238, 0.15);
-    --background-dark: #0a0a16;
-    --background-light: #12121f;
+    --primary-light: rgba(119, 16, 238, 0.55);
+    --background-dark: rgb(2,2,8);
+    --background-light: rgb(5,5,20);
     --text-primary: #e1e1e1;
-    --text-secondary: #9ca3af;
+    --text-secondary: #b4b4b4;
     --surface-1: rgba(40, 40, 60, 0.6);
     --surface-2: rgba(50, 50, 70, 0.4);
     --surface-3: rgba(60, 60, 80, 0.4);
     --border-color: rgba(255, 255, 255, 0.07);
     --shadow-color: rgba(0, 0, 0, 0.2);
-    --blur-strength: 20px;
-    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-    --transition-standard: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    --font-family: 'Plus Jakarta Sans', sans-serif;
+    --transition-standard: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* Enhanced Scrollbar */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Scrollbar Styling */
 ::-webkit-scrollbar {
-    width: 6px;
+    width: 8px;
 }
 
 ::-webkit-scrollbar-track {
-    background: transparent;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.1);
-    border-radius: 3px;
+    border-radius: 10px;
+    border: 2px solid rgba(255, 255, 255, 0.05);
 }
 
 ::-webkit-scrollbar-thumb:hover {
@@ -37,33 +41,29 @@
 }
 
 /* Base Layout */
-body {
-    font-family: var(--font-family);
-    background: radial-gradient(circle at top right, var(--background-light), var(--background-dark));
+html, body {
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+    font-family: 'Inter', sans-serif;
+    background: linear-gradient(135deg, var(--background-dark) 0%, var(--background-light) 100%);
     color: var(--text-primary);
     line-height: 1.6;
-    overflow: hidden;
 }
 
-/* Enhanced Navigation */
+/* Navigation Styles */
 .nav-container {
     position: fixed;
     top: 0;
     width: 100%;
     height: 60px;
-    z-index: 1000;
-}
-
-.nav-blur {
-    position: absolute;
-    inset: 0;
     background: rgba(10, 10, 20, 0.7);
-    backdrop-filter: blur(var(--blur-strength));
+    backdrop-filter: blur(10px);
     border-bottom: 1px solid var(--border-color);
+    z-index: 1000;
 }
 
 .nav-content {
-    position: relative;
     max-width: 1400px;
     margin: 0 auto;
     height: 100%;
@@ -73,144 +73,191 @@ body {
     padding: 0 20px;
 }
 
-/* Enhanced Brand */
-.brand {
+.nav-left, .nav-right {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 20px;
 }
 
-.brand-icon {
-    position: relative;
-    width: 32px;
-    height: 32px;
-    border-radius: 8px;
-    background: var(--primary-gradient);
-    overflow: hidden;
+.brand {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
 }
 
-.brand-animate {
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-    animation: shine 3s infinite;
+.brand-text {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 600;
+    font-size: 1.25rem;
+    background: linear-gradient(45deg, #7710ee, #b44dff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 
-/* Enhanced Message Bubbles */
-.message-group {
+.brand-version {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+}
+
+/* Hamburger Menu */
+.hamburger {
     display: flex;
-    gap: 16px;
-    margin-bottom: 24px;
-    opacity: 0;
-    transform: translateY(20px);
-    animation: messageAppear 0.5s forwards;
+    flex-direction: column;
+    gap: 6px;
+    cursor: pointer;
+    padding: 8px;
 }
 
-.avatar {
-    position: relative;
-    width: 40px;
-    height: 40px;
-    flex-shrink: 0;
+.line1, .line2 {
+    height: 2px;
+    transition: var(--transition-standard);
 }
 
-.avatar-img {
-    width: 100%;
-    height: 100%;
-    border-radius: 12px;
-    background: var(--primary-gradient);
+.line1 {
+    width: 24px;
+    background: linear-gradient(90deg, #7710ee, #b44dff);
+}
+
+.line2 {
+    width: 16px;
+    background: linear-gradient(90deg, #7710ee, #b44dff);
+}
+
+.hamburger:hover .line1 {
+    transform: translateX(-4px);
+}
+
+.hamburger:hover .line2 {
+    transform: translateX(4px);
+}
+
+/* Sidebar Menu */
+.menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 0;
+    background: rgba(20, 20, 30, 0.95);
+    backdrop-filter: blur(15px);
+    border-right: 1px solid var(--border-color);
+    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 900;
     display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 600;
-    font-size: 14px;
-    color: white;
+    flex-direction: column;
 }
 
-.avatar-status {
-    position: absolute;
-    bottom: -2px;
-    right: -2px;
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background: #10b981;
-    border: 2px solid var(--background-dark);
+.menu.open {
+    width: 300px;
 }
 
-.message {
-    position: relative;
-    max-width: 70%;
-    padding: 16px;
-    border-radius: 16px;
+.menu-header {
+    padding: 80px 20px 20px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.new-chat {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
     background: var(--surface-1);
     border: 1px solid var(--border-color);
-    backdrop-filter: blur(var(--blur-strength));
+    border-radius: 8px;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: var(--transition-standard);
 }
 
-.ai-message {
-    border-top-left-radius: 4px;
+.new-chat:hover {
+    background: var(--surface-2);
+    transform: translateY(-2px);
 }
 
-.user-message {
-    border-top-right-radius: 4px;
-    background: var(--surface-2);
+.menu-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
 }
 
-.message-content {
-    color: var(--text-primary);
-    font-size: 15px;
-    line-height: 1.6;
+.chats-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
 }
 
-.message-actions {
-    position: absolute;
-    right: -60px;
-    top: 50%;
-    transform: translateY(-50%);
+.chats-title {
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-secondary);
+}
+
+.prev-chats-cont {
     display: flex;
     flex-direction: column;
     gap: 8px;
-    opacity: 0;
+}
+
+.chat-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    border-radius: 8px;
+    cursor: pointer;
     transition: var(--transition-standard);
 }
 
-.message:hover .message-actions {
-    opacity: 1;
+.chat-item:hover {
+    background: var(--surface-1);
 }
 
-.action-btn {
-    width: 32px;
-    height: 32px;
-    border-radius: 8px;
-    background: var(--surface-2);
+/* Main Container */
+.container {
+    margin-top: 60px;
+    height: calc(100vh - 60px);
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+}
+
+.messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+/* Message Styles */
+.message {
+    max-width: 80%;
+    padding: 16px;
+    border-radius: 12px;
     border: 1px solid var(--border-color);
-    color: var(--text-secondary);
-    cursor: pointer;
-    transition: var(--transition-standard);
+    backdrop-filter: blur(10px);
 }
 
-.action-btn:hover {
-    background: var(--surface-3);
-    color: var(--text-primary);
-    transform: translateY(-2px);
+.user-message {
+    margin-left: auto;
+    background: var(--surface-2);
+}
+
+.ai-message {
+    margin-right: auto;
+    background: var(--surface-1);
 }
 
-/* Enhanced Input Area */
+/* Input Area */
 .input-container {
-    position: relative;
     margin-top: auto;
     padding: 20px;
 }
 
-.input-blur {
-    position: absolute;
-    inset: 0;
-    background: rgba(10, 10, 20, 0.7);
-    backdrop-filter: blur(var(--blur-strength));
-}
-
 .inputs {
-    position: relative;
     display: flex;
     align-items: center;
     gap: 12px;
@@ -218,387 +265,294 @@ body {
     background: var(--surface-2);
     border: 1px solid var(--border-color);
     border-radius: 16px;
-}
-
-.text-box-container {
-    position: relative;
-    flex: 1;
-    display: flex;
-    align-items: center;
-}
-
+    backdrop-filter: blur(10px);
+/* Input Area (continued) */
 .text-box {
-    width: 100%;
+    flex: 1;
     background: none;
     border: none;
     outline: none;
     color: var(--text-primary);
-    font-family: var(--font-family);
-    font-size: 15px;
+    font-family: 'Inter', sans-serif;
+    font-size: 1rem;
     line-height: 1.5;
     max-height: 200px;
     resize: none;
     padding: 8px;
 }
 
-.text-box-actions {
-    display: flex;
-    gap: 8px;
-    padding-right: 8px;
-}
-
-/* Enhanced Animations */
-@keyframes messageAppear {
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes shine {
-    from {
-        transform: translateX(-100%);
-    }
-    to {
-        transform: translateX(100%);
-    }
+.text-box::placeholder {
+    color: var(--text-secondary);
 }
 
-@keyframes pulse {
-    0% {
-        transform: scale(1);
-    }
-    50% {
-        transform: scale(1.05);
-    }
-    100% {
-        transform: scale(1);
-    }
-}
-/* Enhanced Button Styles */
 .web-search,
 .send-btn {
-    position: relative;
-    width: 40px;
-    height: 40px;
-    border-radius: 12px;
-    background: var(--surface-1);
-    border: 1px solid var(--border-color);
+    background: none;
+    border: none;
     color: var(--text-secondary);
+    font-size: 1.2rem;
     cursor: pointer;
+    padding: 8px;
+    border-radius: 8px;
     transition: var(--transition-standard);
-    overflow: hidden;
 }
 
 .web-search:hover,
 .send-btn:hover {
     color: var(--text-primary);
-    transform: translateY(-2px);
+    background: var(--surface-1);
 }
 
-.button-ripple {
-    position: absolute;
-    inset: 0;
-    background: radial-gradient(circle, var(--primary-light) 0%, transparent 70%);
+.input-footer {
+    text-align: center;
+    margin-top: 8px;
+}
+
+.input-info {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+}
+
+/* Modal Styles */
+.modal,
+.settings-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(5px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1100;
     opacity: 0;
-    transform: scale(0);
+    visibility: hidden;
     transition: var(--transition-standard);
 }
 
-.web-search:hover .button-ripple,
-.send-btn:hover .button-ripple {
+.modal.show,
+.settings-modal.show {
     opacity: 1;
-    transform: scale(2);
+    visibility: visible;
 }
 
-/* Enhanced Typing Indicator */
-.typing-indicator {
-    display: none;
-    gap: 4px;
-    padding: 8px 16px;
+.modal-content,
+.settings-content {
     background: var(--surface-1);
     border: 1px solid var(--border-color);
-    border-radius: 20px;
-    position: absolute;
-    bottom: 100%;
-    left: 76px;
-    margin-bottom: 8px;
-}
-
-.typing-indicator.active {
-    display: flex;
+    border-radius: 16px;
+    width: 90%;
+    max-width: 500px;
+    padding: 24px;
+    position: relative;
+    transform: translateY(20px);
+    transition: var(--transition-standard);
 }
 
-.typing-indicator span {
-    width: 8px;
-    height: 8px;
-    background: var(--text-secondary);
-    border-radius: 50%;
-    animation: typing 1s infinite;
+.modal.show .modal-content,
+.settings-modal.show .settings-content {
+    transform: translateY(0);
 }
 
-.typing-indicator span:nth-child(2) {
-    animation-delay: 0.2s;
+.modal-header,
+.settings-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
 }
 
-.typing-indicator span:nth-child(3) {
-    animation-delay: 0.4s;
+.modal-header h2,
+.settings-header h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--text-primary);
 }
 
-@keyframes typing {
-    0%, 100% {
-        transform: translateY(0);
-    }
-    50% {
-        transform: translateY(-4px);
-    }
+.close-modal,
+.close-settings {
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 1.2rem;
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 8px;
+    transition: var(--transition-standard);
 }
 
-/* Enhanced Model Selector */
-.model-selector {
-    position: relative;
-    width: 200px;
+.close-modal:hover,
+.close-settings:hover {
+    color: var(--text-primary);
+    background: var(--surface-2);
 }
 
-.models {
-    width: 100%;
-    padding: 10px 16px;
-    background: var(--surface-1);
-    border: 1px solid var(--border-color);
-    border-radius: 12px;
-    color: var(--text-primary);
-    font-family: var(--font-family);
-    font-size: 14px;
-    cursor: pointer;
-    transition: var(--transition-standard);
-    appearance: none;
+.modal-body {
+    margin-bottom: 24px;
 }
 
-.model-indicator {
-    position: absolute;
-    right: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: #10b981;
-    animation: pulse 2s infinite;
+.feature-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 16px;
+    margin-top: 20px;
 }
 
-/* Enhanced Menu Items */
-.chat-item {
+.feature-item {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    gap: 12px;
-    padding: 12px;
+    gap: 8px;
+    padding: 16px;
+    background: var(--surface-2);
+    border: 1px solid var(--border-color);
     border-radius: 12px;
-    cursor: pointer;
-    transition: var(--transition-standard);
-    border: 1px solid transparent;
+    text-align: center;
 }
 
-.chat-item:hover {
-    background: var(--surface-1);
-    border-color: var(--border-color);
-    transform: translateX(4px);
+.feature-item i {
+    font-size: 1.5rem;
+    color: var(--primary-color);
 }
 
-.chat-icon {
-    width: 32px;
-    height: 32px;
-    border-radius: 8px;
-    background: var(--surface-2);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--text-secondary);
+/* Settings Styles */
+.settings-section {
+    margin-bottom: 24px;
 }
 
-/* Code Block Styling */
-.code-block {
-    position: relative;
-    margin: 16px 0;
-    background: var(--surface-1);
-    border-radius: 12px;
-    border: 1px solid var(--border-color);
-    overflow: hidden;
+.settings-section h3 {
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+    margin-bottom: 16px;
 }
 
-.code-header {
+.setting-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 8px 16px;
-    background: var(--surface-2);
+    padding: 12px 0;
     border-bottom: 1px solid var(--border-color);
 }
 
-.code-language {
-    font-size: 13px;
-    color: var(--text-secondary);
-}
-
-.code-copy {
-    padding: 4px 8px;
-    border-radius: 6px;
-    background: var(--surface-3);
-    border: none;
-    color: var(--text-secondary);
+.theme-select,
+.font-select {
+    background: var(--surface-2);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    color: var(--text-primary);
+    padding: 8px 12px;
     cursor: pointer;
     transition: var(--transition-standard);
 }
 
-.code-copy:hover {
-    color: var(--text-primary);
-    background: var(--surface-1);
-}
-
-.code-content {
-    padding: 16px;
-    overflow-x: auto;
+.theme-select:hover,
+.font-select:hover {
+    background: var(--surface-3);
 }
 
-/* Enhanced Modal Animations */
-.modal,
-.settings-modal {
-    animation: modalFadeIn 0.3s forwards;
+/* Button Styles */
+.start-btn,
+.discord-btn {
+    width: 100%;
+    padding: 12px 24px;
+    background: linear-gradient(45deg, var(--primary-color), #b44dff);
+    border: none;
+    border-radius: 8px;
+    color: white;
+    font-weight: 500;
+    cursor: pointer;
+    transition: var(--transition-standard);
 }
 
-.modal-content,
-.settings-content {
-    animation: modalSlideUp 0.3s forwards;
+.start-btn:hover,
+.discord-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(119, 16, 238, 0.3);
 }
 
-@keyframes modalFadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
+/* Responsive Design */
+@media screen and (max-width: 768px) {
+    .menu.open {
+        width: 100%;
     }
-}
 
-@keyframes modalSlideUp {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
+    .container {
+        padding: 10px;
     }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* Message Markdown Styling */
-.message-content pre {
-    margin: 16px 0;
-    white-space: pre-wrap;
-}
-
-.message-content p {
-    margin-bottom: 12px;
-}
-
-.message-content a {
-    color: var(--primary-color);
-    text-decoration: none;
-    border-bottom: 1px dashed currentColor;
-}
 
-.message-content img {
-    max-width: 100%;
-    border-radius: 8px;
-    margin: 16px 0;
-}
+    .messages {
+        padding: 10px;
+    }
 
-/* Responsive Enhancements */
-@media screen and (max-width: 768px) {
     .message {
-        max-width: 85%;
+        max-width: 90%;
     }
 
-    .message-actions {
-        position: relative;
-        right: 0;
-        top: 0;
-        transform: none;
-        flex-direction: row;
-        justify-content: flex-end;
-        margin-top: 8px;
+    .input-container {
+        padding: 10px;
     }
 
-    .model-selector {
-        width: 150px;
+    .inputs {
+        padding: 8px 16px;
     }
 
-    .brand-text {
-        display: none;
+    .feature-list {
+        grid-template-columns: 1fr;
     }
 }
 
-/* Dark Mode Transitions */
+/* Dark/Light Theme Transitions */
 .theme-transition {
-    transition: background-color 0.5s ease,
-                color 0.5s ease,
-                border-color 0.5s ease;
+    transition: background-color 0.3s ease,
+                color 0.3s ease,
+                border-color 0.3s ease,
+                box-shadow 0.3s ease;
 }
 
-/* Loading States */
-.loading {
-    position: relative;
-    overflow: hidden;
+/* Animation Classes */
+.fade-in {
+    animation: fadeIn 0.3s ease forwards;
 }
 
-.loading::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(90deg, 
-        transparent, 
-        rgba(255, 255, 255, 0.05), 
-        transparent
-    );
-    animation: loading 1.5s infinite;
+.slide-up {
+    animation: slideUp 0.3s ease forwards;
 }
 
-@keyframes loading {
+@keyframes fadeIn {
     from {
-        transform: translateX(-100%);
+        opacity: 0;
     }
     to {
-        transform: translateX(100%);
+        opacity: 1;
     }
 }
 
-/* Message Grouping */
-.message-group + .message-group {
-    margin-top: 24px;
-}
-
-.message + .message {
-    margin-top: 8px;
-}
-
-/* System Message Styling */
-.system-message {
-    text-align: center;
-    padding: 8px 16px;
-    background: var(--surface-1);
-    border-radius: 20px;
-    font-size: 13px;
-    color: var(--text-secondary);
-    margin: 16px 0;
-    animation: systemMessage 0.3s forwards;
-}
-
-@keyframes systemMessage {
+@keyframes slideUp {
     from {
+        transform: translateY(20px);
         opacity: 0;
-        transform: translateY(-10px);
     }
     to {
-        opacity: 1;
         transform: translateY(0);
+        opacity: 1;
     }
+}
+
+/* Utility Classes */
+.hidden {
+    display: none !important;
+}
+
+.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }