banko-ai-assistant 1.0.0__py3-none-any.whl → 1.0.1__py3-none-any.whl

banko_ai/static/css/style.css

@@ -0,0 +1,1274 @@
+/* Modern Cockroach Labs-inspired styling for Banko AI Assistant */
+
+/* Base styles */
+* {
+    font-family: 'Inter', system-ui, sans-serif;
+}
+
+body {
+    background-color: #F8FAFC;
+    color: #1E293B;
+    margin: 0;
+    padding: 0;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #F1F5F9;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #CBD5E1;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #94A3B8;
+}
+
+/* Layout */
+.chat-container {
+    display: flex;
+    height: 100vh;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Sidebar */
+.sidebar {
+    width: 288px;
+    background-color: #FFFFFF;
+    border-right: 1px solid #E2E8F0;
+    display: flex;
+    flex-direction: column;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 50;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+}
+
+.sidebar.hidden {
+    transform: translateX(-100%);
+}
+
+.sidebar.visible {
+    transform: translateX(0);
+}
+
+.sidebar-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid #E2E8F0;
+    background: linear-gradient(135deg, #6933FF 0%, #8B5CF6 100%);
+}
+
+.sidebar-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #FFFFFF;
+    margin: 0;
+}
+
+.sidebar-subtitle {
+    font-size: 0.875rem;
+    color: rgba(255, 255, 255, 0.9);
+    margin: 0.25rem 0 0 0;
+}
+
+.sidebar-nav {
+    flex: 1;
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.sidebar-nav .space-y-2 {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.sidebar-item {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    color: #1E293B;
+    text-decoration: none;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    font-weight: 500;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.sidebar-item:hover {
+    background-color: #EEF2FF;
+    transform: translateX(8px) scale(1.02);
+    box-shadow: 0 4px 12px rgba(105, 51, 255, 0.1);
+}
+
+.sidebar-item.active {
+    background-color: #6933FF;
+    color: white;
+    box-shadow: 0 4px 12px rgba(105, 51, 255, 0.3);
+}
+
+.sidebar-item i {
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-right: 0.75rem;
+    color: inherit;
+    flex-shrink: 0;
+}
+
+.sidebar-item span {
+    flex: 1;
+    white-space: nowrap;
+}
+
+.sidebar-footer {
+    padding: 1.5rem;
+    border-top: 1px solid #E2E8F0;
+    font-size: 0.75rem;
+    color: #64748B;
+    background-color: #F8FAFC;
+}
+
+/* Main content */
+.main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background-color: #F8FAFC;
+    transition: margin-left 0.3s ease;
+}
+
+.main-content.with-sidebar {
+    margin-left: 18rem; /* 288px */
+}
+
+.main-content.without-sidebar {
+    margin-left: 0;
+}
+
+/* Main content should take remaining space in flexbox */
+#main-content {
+    margin-left: 0;
+}
+
+/* Header */
+.header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 1.5rem 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    min-height: 88px; /* Match sidebar header height */
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+.sidebar-toggle {
+    display: none;
+    background-color: #FFFFFF;
+    border: 1px solid #E2E8F0;
+    color: #1E293B;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.sidebar-toggle:hover {
+    background-color: #F8FAFC;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+
+.header-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #1E293B;
+    margin: 0;
+}
+
+.provider-badges {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin: 0; /* Remove margin-top to align with header */
+}
+
+.provider-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    border: 1px solid;
+    height: 2rem;
+}
+
+.badge-ai {
+    background-color: #DBEAFE;
+    color: #1E40AF;
+    border-color: #93C5FD;
+}
+
+.badge-db {
+    background-color: #DCFCE7;
+    color: #166534;
+    border-color: #86EFAC;
+}
+
+.provider-badge img {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+    flex-shrink: 0;
+}
+
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.control-button {
+    background-color: #FFFFFF;
+    border: 1px solid #E2E8F0;
+    color: #1E293B;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.control-button:hover {
+    background-color: #F8FAFC;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+
+.profile-pic {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 2px solid #E2E8F0;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.profile-pic img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* Database operations panel */
+.db-panel {
+    background-color: #F8FAFC;
+    border-bottom: 1px solid #E2E8F0;
+    padding: 1.5rem;
+    display: none;
+}
+
+.db-panel.visible {
+    display: block;
+}
+
+.db-panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+}
+
+.db-panel-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: #1E293B;
+    margin: 0;
+}
+
+.db-panel-close {
+    color: #64748B;
+    cursor: pointer;
+    transition: color 0.2s ease;
+    font-size: 1.125rem;
+}
+
+.db-panel-close:hover {
+    color: #1E293B;
+}
+
+.db-operations {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    font-size: 0.875rem;
+}
+
+.db-operation {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    transition: all 0.3s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.db-operation.info {
+    background-color: #DBEAFE;
+    color: #1E40AF;
+    border-left: 4px solid #3B82F6;
+}
+
+.db-operation.success {
+    background-color: #DCFCE7;
+    color: #166534;
+    border-left: 4px solid #22C55E;
+}
+
+.db-operation.warning {
+    background-color: #FEF3C7;
+    color: #92400E;
+    border-left: 4px solid #F59E0B;
+}
+
+.db-operation.error {
+    background-color: #FEE2E2;
+    color: #991B1B;
+    border-left: 4px solid #EF4444;
+}
+
+.operation-timestamp {
+    font-size: 0.75rem;
+    color: #6B7280;
+    font-family: monospace;
+}
+
+.operation-step {
+    font-weight: 600;
+}
+
+.operation-description {
+    flex: 1;
+}
+
+/* Chat messages */
+.chat-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    min-height: 400px;
+    max-height: calc(100vh - 300px);
+}
+
+.message {
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+    animation: messageSlideIn 0.3s ease-out;
+    margin-bottom: 1.5rem;
+}
+
+.message.user {
+    justify-content: flex-end;
+}
+
+.message.assistant {
+    justify-content: flex-start;
+}
+
+.message-container {
+    position: relative;
+    margin-bottom: 1.5rem;
+}
+
+.message-container:hover .copy-button {
+    opacity: 1;
+}
+
+.message-avatar {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: white;
+    font-size: 0.875rem;
+    font-weight: 500;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.message-avatar.user {
+    background-color: #6933FF;
+}
+
+.message-avatar.assistant {
+    background-color: #6933FF;
+}
+
+.message-bubble {
+    max-width: 64rem;
+    padding: 1.5rem;
+    border-radius: 1.25rem;
+    word-wrap: break-word;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+}
+
+.message-bubble::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.3), transparent);
+}
+
+.message-bubble.user {
+    background-color: #6933FF;
+    color: white;
+    margin-left: auto;
+}
+
+.message-bubble.assistant {
+    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
+    color: #1E293B;
+    border: 1px solid #e2e8f0;
+}
+
+.message-bubble:hover {
+    transform: translateY(-4px) scale(1.005);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+}
+
+.message-content {
+    line-height: 1.7;
+}
+
+/* Copy button styling */
+.copy-button {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    background-color: #F3F4F6;
+    color: #6B7280;
+    border: 1px solid #E5E7EB;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    opacity: 0;
+    z-index: 10;
+    width: 2rem;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.copy-button:hover {
+    background-color: #E5E7EB;
+    color: #374151;
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.copy-button.copied {
+    background-color: #DCFCE7;
+    color: #166534;
+    border-color: #22C55E;
+}
+
+.copy-button i {
+    font-size: 0.875rem;
+}
+
+/* Chat messages section */
+#chat-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1.5rem;
+    space-y: 1.5rem;
+    background-color: #FFFFFF;
+    scroll-behavior: smooth;
+}
+
+#chat-container::-webkit-scrollbar {
+    width: 8px;
+}
+
+#chat-container::-webkit-scrollbar-track {
+    background: #F1F5F9;
+    border-radius: 4px;
+}
+
+#chat-container::-webkit-scrollbar-thumb {
+    background: #CBD5E1;
+    border-radius: 4px;
+}
+
+#chat-container::-webkit-scrollbar-thumb:hover {
+    background: #94A3B8;
+}
+
+/* Loading dots animation (ChatGPT-style) */
+.loading-dots {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 1rem 0;
+    min-height: 2rem;
+}
+
+.loading-dots .dot {
+    width: 0.6rem;
+    height: 0.6rem;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #6933FF, #8B5CF6);
+    animation: loadingDot 1.4s infinite ease-in-out;
+    box-shadow: 0 2px 8px rgba(105, 51, 255, 0.3);
+}
+
+.loading-dots .dot:nth-child(1) {
+    animation-delay: -0.32s;
+}
+
+.loading-dots .dot:nth-child(2) {
+    animation-delay: -0.16s;
+}
+
+.loading-dots .dot:nth-child(3) {
+    animation-delay: 0s;
+}
+
+@keyframes loadingDot {
+    0%, 80%, 100% {
+        transform: scale(0.6) translateY(0);
+        opacity: 0.4;
+        box-shadow: 0 2px 8px rgba(105, 51, 255, 0.1);
+    }
+    40% {
+        transform: scale(1.2) translateY(-4px);
+        opacity: 1;
+        box-shadow: 0 8px 20px rgba(105, 51, 255, 0.4);
+    }
+}
+
+.loading-dots .dot {
+    width: 0.6rem;
+    height: 0.6rem;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #6933FF, #8B5CF6);
+    animation: loadingDot 1.4s infinite ease-in-out;
+    box-shadow: 0 2px 8px rgba(105, 51, 255, 0.3);
+}
+
+.loading-dots .dot:nth-child(1) {
+    animation-delay: -0.32s;
+}
+
+.loading-dots .dot:nth-child(2) {
+    animation-delay: -0.16s;
+}
+
+.loading-dots .dot:nth-child(3) {
+    animation-delay: 0s;
+}
+
+@keyframes loadingDot {
+    0%, 80%, 100% {
+        transform: scale(0.6) translateY(0);
+        opacity: 0.4;
+        box-shadow: 0 2px 8px rgba(105, 51, 255, 0.1);
+    }
+    40% {
+        transform: scale(1.2) translateY(-4px);
+        opacity: 1;
+        box-shadow: 0 8px 20px rgba(105, 51, 255, 0.4);
+    }
+}
+
+/* Markdown content styling */
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3 {
+    font-weight: 600;
+    margin: 1rem 0 0.75rem 0;
+    color: #1E293B;
+}
+
+.markdown-content h1 {
+    font-size: 1.25rem;
+}
+
+.markdown-content h2 {
+    font-size: 1.125rem;
+}
+
+.markdown-content h3 {
+    font-size: 1rem;
+}
+
+.markdown-content p {
+    margin: 0.75rem 0;
+    color: #374151;
+}
+
+.markdown-content ul,
+.markdown-content ol {
+    margin: 0.75rem 0;
+    padding-left: 1.5rem;
+}
+
+.markdown-content li {
+    margin: 0.375rem 0;
+    color: #374151;
+}
+
+.markdown-content code {
+    background-color: #F3F4F6;
+    padding: 0.125rem 0.25rem;
+    border-radius: 0.25rem;
+    font-family: monospace;
+    font-size: 0.875em;
+    color: #1F2937;
+}
+
+.markdown-content pre {
+    background-color: #F3F4F6;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    overflow-x: auto;
+    margin: 1rem 0;
+    border: 1px solid #E5E7EB;
+}
+
+.markdown-content pre code {
+    background: none;
+    padding: 0;
+}
+
+.markdown-content table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 1rem 0;
+    border: 1px solid #E5E7EB;
+    border-radius: 0.5rem;
+    overflow: hidden;
+}
+
+.markdown-content th,
+.markdown-content td {
+    border: 1px solid #E5E7EB;
+    padding: 0.75rem;
+    text-align: left;
+}
+
+.markdown-content th {
+    background-color: #F9FAFB;
+    font-weight: 600;
+    color: #374151;
+}
+
+.markdown-content blockquote {
+    border-left: 4px solid #6933FF;
+    margin: 1rem 0;
+    padding-left: 1rem;
+    color: #6B7280;
+    font-style: italic;
+}
+
+/* Input area */
+.input-area {
+    position: sticky;
+    bottom: 0;
+    background: white;
+    border-top: 1px solid #e5e7eb;
+    padding: 1rem;
+    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.05);
+    width: 100%;
+    z-index: 10;
+}
+
+.input-form {
+    max-width: 100%;
+    margin: 0 auto;
+    width: 100%;
+    padding: 0 1rem;
+}
+
+.input-container {
+    background: white;
+    border: 1px solid #d1d5db;
+    border-radius: 1.5rem;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    transition: all 0.2s ease;
+}
+
+.input-container:focus-within {
+    border-color: #10b981;
+    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
+}
+
+.input-wrapper {
+    display: flex;
+    align-items: center;
+    position: relative;
+    min-height: 3.5rem;
+}
+
+.input-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    flex-shrink: 0;
+}
+
+.input-modern {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    padding: 1rem 1.5rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    resize: none;
+    font-family: inherit;
+    color: #374151;
+    min-height: 3rem;
+    max-height: 200px;
+    overflow-y: auto;
+    box-sizing: border-box;
+}
+
+.input-modern::placeholder {
+    color: #9ca3af;
+}
+
+/* Modern Control Buttons */
+.control-btn {
+    width: 2.5rem;
+    height: 2.5rem;
+    border: none;
+    background: #f3f4f6;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #6b7280;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+}
+
+.control-btn:hover {
+    background: #e5e7eb;
+    color: #6933FF;
+    transform: scale(1.1);
+    box-shadow: 0 8px 20px rgba(105, 51, 255, 0.2);
+}
+
+.control-btn:active {
+    transform: scale(0.95);
+}
+
+.control-btn.active {
+    background: #10b981;
+    color: white;
+}
+
+.send-btn {
+    width: 2.5rem;
+    height: 2.5rem;
+    border: none;
+    background: #10b981;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+}
+
+.send-btn:hover {
+    background: #059669;
+    transform: scale(1.05);
+}
+
+.send-btn:disabled {
+    background: #d1d5db;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.language-select {
+    border: none;
+    background: #f3f4f6;
+    border-radius: 1rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    color: #374151;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.language-select:hover {
+    background: #e5e7eb;
+}
+
+.audio-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+/* Voice toggle states */
+#voice-toggle.btn-secondary {
+    background: #10b981;
+    color: white;
+    border-color: #10b981;
+}
+
+#voice-toggle.bg-red-600 {
+    background: #dc2626 !important;
+    color: white !important;
+    border-color: #dc2626 !important;
+}
+
+#voice-toggle:hover.bg-red-600 {
+    background: #b91c1c !important;
+}
+
+/* Recording pulse animation */
+.recording-pulse {
+    animation: pulse-red 1.5s infinite;
+}
+
+@keyframes pulse-red {
+    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
+    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
+}
+
+.voice-input-btn {
+    position: absolute;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: #FFFFFF;
+    border: 1px solid #E2E8F0;
+    color: #1E293B;
+    padding: 0.75rem;
+    border-radius: 0.75rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    z-index: 10;
+    width: 2.5rem;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Fix audio controls positioning */
+.audio-control {
+    padding: 0.75rem;
+    border-radius: 0.75rem;
+    background-color: #FFFFFF;
+    border: 1px solid #E2E8F0;
+    color: #1E293B;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    width: 2.5rem;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.voice-input-btn:hover {
+    background-color: #F8FAFC;
+    transform: translateY(-50%) scale(1.05);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.audio-control:hover {
+    background-color: #F8FAFC;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.language-selector:hover {
+    background-color: #F8FAFC;
+    border-color: #CBD5E1;
+    transform: translateY(-1px);
+}
+
+.voice-input-btn.recording {
+    background-color: #EF4444;
+    color: white;
+    animation: recordingPulse 1.5s infinite;
+}
+
+.voice-input-btn.active {
+    background-color: #6933FF;
+    color: white;
+    border-color: #6933FF;
+}
+
+.audio-controls {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-left: 1rem;
+    flex-shrink: 0;
+}
+
+/* Audio controls */
+.audio-control {
+    padding: 0.75rem;
+    border-radius: 0.75rem;
+    background-color: #FFFFFF;
+    border: 1px solid #E2E8F0;
+    color: #1E293B;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    width: 2.75rem;
+    height: 2.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+
+
+.audio-control.active {
+    @apply bg-cockroach-primary text-white border-cockroach-primary;
+}
+
+/* Language selector */
+.language-selector {
+    background-color: #FFFFFF;
+    border: 1px solid #E2E8F0;
+    border-radius: 0.75rem;
+    padding: 0.75rem 1rem;
+    color: #1E293B;
+    font-size: 0.875rem;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    min-width: 4rem;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.language-selector:focus {
+    outline: none;
+    border-color: #6933FF;
+    box-shadow: 0 0 0 3px rgba(105, 51, 255, 0.1);
+}
+
+.send-button {
+    background-color: #6933FF;
+    color: white;
+    border: none;
+    padding: 1rem 1.5rem;
+    border-radius: 0.5rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1.125rem;
+    box-shadow: 0 4px 12px rgba(105, 51, 255, 0.3);
+}
+
+.send-button:hover {
+    background-color: #5B21B6;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(105, 51, 255, 0.4);
+}
+
+/* Animations */
+@keyframes messageSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes recordingPulse {
+    0%, 100% {
+        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
+    }
+    50% {
+        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
+    }
+}
+
+/* Mobile overlay */
+.mobile-overlay {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 40;
+    display: none;
+}
+
+.mobile-overlay.visible {
+    display: block;
+}
+
+/* Responsive design */
+@media (max-width: 1024px) {
+    .sidebar {
+        position: fixed;
+        left: 0;
+        top: 0;
+        height: 100vh;
+        z-index: 50;
+    }
+    
+    .sidebar-toggle {
+        display: block;
+    }
+    
+    .main-content {
+        margin-left: 0 !important;
+    }
+}
+
+@media (max-width: 768px) {
+    .header {
+        padding: 1rem;
+    }
+    
+    .header-title {
+        font-size: 1.25rem;
+    }
+    
+    .provider-badges {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+    
+    .input-area {
+        padding: 1rem;
+    }
+    
+    .input-container {
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+    
+    .audio-controls {
+        justify-content: center;
+    }
+    
+    .chat-container {
+        padding: 1rem;
+        gap: 1rem;
+    }
+    
+    .message {
+        gap: 0.75rem;
+    }
+    
+    .message-bubble {
+        padding: 1rem;
+    }
+    
+    .sidebar-nav {
+        padding: 1rem;
+    }
+    
+    .sidebar-item {
+        padding: 0.5rem 0.75rem;
+    }
+    
+    .copy-button {
+        top: 0.5rem;
+        right: 0.5rem;
+        width: 1.75rem;
+        height: 1.75rem;
+    }
+}
+
+/* Utility classes */
+.hidden {
+    display: none !important;
+}
+
+/* Ensure loading message is hidden by default */
+#loading-message.hidden {
+    display: none !important;
+}
+
+/* Force loading message to be visible when not hidden */
+#loading-message:not(.hidden) {
+    display: block !important;
+}
+
+.visible {
+    display: block !important;
+}
+
+/* Focus states for accessibility */
+button:focus,
+input:focus,
+select:focus {
+    outline: 2px solid #6933FF;
+    outline-offset: 2px;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+    .message-bubble.user {
+        background-color: #5B21B6;
+    }
+    
+    .message-bubble.assistant {
+        background-color: #F1F5F9;
+        border-color: #475569;
+    }
+    
+    .sidebar-item.active {
+        background-color: #5B21B6;
+    }
+}
+
+/* Modern button styles */
+.btn-modern {
+    padding: 0.875rem 1.75rem;
+    border-radius: 1rem;
+    font-weight: 600;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+    border: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    text-decoration: none;
+    font-size: 0.875rem;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+}
+
+
+
+.btn-modern::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s;
+}
+
+.btn-modern:hover::before {
+    left: 100%;
+}
+
+.btn-modern:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #6933FF 0%, #8B5CF6 100%);
+    color: white;
+}
+
+.btn-primary:hover {
+    background: linear-gradient(135deg, #5B21B6 0%, #7C3AED 100%);
+}
+
+.btn-secondary {
+    background: #FFFFFF;
+    color: #1E293B;
+    border: 2px solid #E2E8F0;
+}
+
+.btn-secondary:hover {
+    background: #F8FAFC;
+    border-color: #CBD5E1;
+}
+
+/* Enhanced input focus states */
+.message-input:focus {
+    outline: none;
+    border-color: #6933FF;
+    box-shadow: 0 0 0 4px rgba(105, 51, 255, 0.15);
+    transform: translateY(-2px);
+}
+
+/* Modern card shadows */
+.message-bubble {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+    transition: all 0.3s ease;
+}
+
+.message-bubble:hover {
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+    transform: translateY(-1px);
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+  }
+