Update application/static/css/style.css

application/static/css/style.css

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