Update static/style.css

static/style.css

@@ -1,103 +1,1051 @@
-/* ====== CSS Custom Properties (themes) ====== */
+/* =============================================
+   InfinityChat - Professional Design System
+   ============================================= */
+
+/* CSS Variables - Theme System */
 :root {
-    --bg-primary: #fff;
-    --bg-secondary: #f0f0f0;
-    --text-primary: #000;
-    --text-secondary: #666;
-    --bubble-self: #25D366;
-    --bubble-other: #E5E5EA;
-    --bubble-text-self: #000;
-    --bubble-text-other: #000;
-    --header-bg: #128C7E;
-    --header-text: #fff;
-    --input-bg: #fff;
-    --input-border: #ccc;
-    --shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.theme-dark {
-    --bg-primary: #121212;
-    --bg-secondary: #1e1e1e;
-    --text-primary: #fff;
-    --text-secondary: #aaa;
-    --bubble-self: #056162;
-    --bubble-other: #262D31;
-    --bubble-text-self: #fff;
-    --bubble-text-other: #fff;
-    --header-bg: #1e1e1e;
-    --input-bg: #2a2f32;
-    --input-border: #333;
-}
-
-.theme-custom {
-    /* values set via JavaScript */
-}
-
-* { margin:0; padding:0; box-sizing:border-box; }
-body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg-primary); color: var(--text-primary); height:100vh; overflow:hidden; }
-
-/* ====== Layout ====== */
-#app { height:100%; }
-.screen { display:flex; flex-direction:column; height:100%; }
-.hidden { display:none!important; }
-
-/* ====== Auth ====== */
-.auth-container { max-width:400px; margin:auto; padding:2rem; text-align:center; }
-.auth-container h1 { margin-bottom:2rem; color:var(--header-bg); }
-.auth-tabs { display:flex; margin-bottom:1rem; border-bottom:2px solid var(--input-border); }
-.tab { flex:1; padding:0.75rem; background:none; border:none; color:var(--text-secondary); font-weight:500; cursor:pointer; }
-.tab.active { color:var(--header-bg); border-bottom:3px solid var(--header-bg); }
-#auth-form input { width:100%; margin:0.5rem 0; padding:0.75rem; border:1px solid var(--input-border); border-radius:8px; background:var(--input-bg); color:var(--text-primary); }
-#auth-form button { width:100%; padding:0.75rem; background:var(--header-bg); color:var(--header-text); border:none; border-radius:8px; font-size:1rem; margin-top:1rem; cursor:pointer; }
-.error-msg { color:red; margin-top:1rem; }
-
-/* ====== Chat header ====== */
-.chat-header { display:flex; align-items:center; justify-content:space-between; padding:0.75rem 1rem; background:var(--header-bg); color:var(--header-text); min-height:60px; }
-.icon-btn { background:none; border:none; color:inherit; font-size:1.5rem; cursor:pointer; padding:0.25rem; }
-
-/* ====== Typing ====== */
-#typing-indicator { height:24px; font-size:0.85rem; padding:0 1rem; color:var(--text-secondary); background:var(--bg-secondary); display:flex; align-items:center; }
-
-/* ====== Messages ====== */
-#messages-container { flex:1; overflow-y:auto; padding:1rem; background:var(--bg-primary); }
-#messages-list { display:flex; flex-direction:column; gap:0.25rem; }
-.message-bubble { max-width:80%; margin-bottom:0.25rem; }
-.message-self { align-self:flex-end; background:var(--bubble-self); color:var(--bubble-text-self); border-radius:18px 18px 0 18px; padding:0.6rem 1rem; }
-.message-other { align-self:flex-start; background:var(--bubble-other); color:var(--bubble-text-other); border-radius:18px 18px 18px 0; padding:0.6rem 1rem; }
-.message-info { display:flex; justify-content:space-between; font-size:0.7rem; opacity:0.8; margin-bottom:0.1rem; }
-.message-actions { display:flex; gap:0.25rem; margin-top:0.25rem; font-size:0.8rem; }
-.reply-indicator { font-size:0.8rem; padding:0.2rem 0.5rem; background:rgba(0,0,0,0.1); border-radius:8px; margin-bottom:0.25rem; }
-.edited-label { font-style:italic; opacity:0.7; font-size:0.75rem; }
-.deleted-bubble { opacity:0.6; font-style:italic; }
-.attachment img, .attachment video { max-width:100%; max-height:300px; border-radius:8px; margin-top:0.5rem; }
-.attachment audio { width:100%; margin-top:0.5rem; }
-.attachment .file-preview { display:flex; align-items:center; gap:0.5rem; background:rgba(0,0,0,0.05); padding:0.5rem; border-radius:8px; cursor:pointer; }
-/* Read receipts (ticks) */
-.read-status { display:inline-block; margin-left:0.2rem; font-size:0.7rem; }
-.read-status.double-check { color:var(--header-bg); }
-.read-status.single-check { color:var(--text-secondary); }
-
-/* ====== Reply preview ====== */
-#reply-preview { background:var(--bg-secondary); padding:0.5rem 1rem; display:flex; align-items:center; justify-content:space-between; }
-
-/* ====== Compose ====== */
-.compose-area { display:flex; align-items:center; padding:0.5rem; background:var(--input-bg); border-top:1px solid var(--input-border); }
-.compose-area textarea { flex:1; resize:none; border:1px solid var(--input-border); border-radius:20px; padding:0.6rem 1rem; background:var(--bg-primary); color:var(--text-primary); outline:none; font-family:inherit; }
-#send-btn { background:var(--header-bg); color:white; border:none; border-radius:50%; width:40px; height:40px; font-size:1.2rem; margin-left:0.5rem; cursor:pointer; }
-#upload-progress { padding:0.5rem; background:var(--bg-secondary); display:flex; align-items:center; gap:0.5rem; }
-
-/* ====== Settings modal ====== */
-.modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; z-index:1000; }
-.modal-content { background:var(--bg-primary); padding:2rem; border-radius:12px; width:90%; max-width:400px; }
-.setting-group { margin-bottom:1rem; }
-.setting-group label { display:block; margin-bottom:0.25rem; font-weight:500; }
-.setting-group input[type="text"], .setting-group select { width:100%; padding:0.5rem; border:1px solid var(--input-border); border-radius:6px; background:var(--input-bg); color:var(--text-primary); }
-.avatar-preview { width:60px; height:60px; border-radius:50%; object-fit:cover; display:block; margin-top:0.5rem; }
-.modal-actions { display:flex; justify-content:flex-end; gap:0.5rem; margin-top:1rem; }
-.modal-actions button { padding:0.5rem 1rem; border:none; border-radius:6px; background:var(--header-bg); color:white; cursor:pointer; }
-#load-more { text-align:center; margin:1rem; }
-
-@media (min-width:768px) {
-    .message-bubble { max-width:60%; }
-    .compose-area { padding:0.75rem 1rem; }
+    /* Base Colors */
+    --color-primary: #2563EB;
+    --color-primary-dark: #1D4ED8;
+    --color-primary-light: #DBEAFE;
+    
+    --color-bg: #FFFFFF;
+    --color-bg-secondary: #F9FAFB;
+    --color-bg-tertiary: #F3F4F6;
+    
+    --color-text: #111827;
+    --color-text-secondary: #6B7280;
+    --color-text-tertiary: #9CA3AF;
+    
+    --color-border: #E5E7EB;
+    --color-border-light: #F3F4F6;
+    
+    /* Bubble Colors */
+    --bubble-self: var(--color-primary);
+    --bubble-self-text: #FFFFFF;
+    --bubble-other: var(--color-bg-tertiary);
+    --bubble-other-text: var(--color-text);
+    
+    /* Header */
+    --header-bg: var(--color-bg);
+    --header-border: var(--color-border);
+    
+    /* Input */
+    --input-bg: var(--color-bg-tertiary);
+    --input-border: var(--color-border);
+    --input-focus: var(--color-primary);
+    
+    /* Shadows */
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
+    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+    
+    /* Typography */
+    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+    --font-mono: 'SF Mono', 'Fira Code', monospace;
+    
+    /* Spacing */
+    --space-xs: 0.25rem;
+    --space-sm: 0.5rem;
+    --space-md: 1rem;
+    --space-lg: 1.5rem;
+    --space-xl: 2rem;
+    
+    /* Border Radius */
+    --radius-sm: 6px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-full: 9999px;
+    
+    /* Transitions */
+    --transition-fast: 150ms ease;
+    --transition-normal: 250ms ease;
+}
+
+/* Dark Theme */
+[data-theme="dark"] {
+    --color-primary: #60A5FA;
+    --color-primary-dark: #3B82F6;
+    --color-primary-light: #1E3A5F;
+    
+    --color-bg: #111827;
+    --color-bg-secondary: #1F2937;
+    --color-bg-tertiary: #374151;
+    
+    --color-text: #F9FAFB;
+    --color-text-secondary: #9CA3AF;
+    --color-text-tertiary: #6B7280;
+    
+    --color-border: #374151;
+    --color-border-light: #1F2937;
+    
+    --bubble-self: var(--color-primary);
+    --bubble-self-text: #111827;
+    --bubble-other: var(--color-bg-tertiary);
+    --bubble-other-text: var(--color-text);
+    
+    --header-bg: var(--color-bg-secondary);
+    --header-border: var(--color-border);
+    
+    --input-bg: var(--color-bg-tertiary);
+    --input-border: var(--color-border);
+    
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
+}
+
+/* Custom Theme */
+[data-theme="custom"] {
+    /* Values set by JavaScript */
+}
+
+/* =============================================
+   Reset & Base Styles
+   ============================================= */
+*, *::before, *::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 16px;
+    -webkit-text-size-adjust: 100%;
+}
+
+body {
+    font-family: var(--font-sans);
+    background: var(--color-bg);
+    color: var(--color-text);
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+}
+
+/* =============================================
+   Buttons
+   ============================================= */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.625rem 1.25rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    border: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    text-decoration: none;
+    gap: var(--space-sm);
+}
+
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.btn-primary {
+    background: var(--color-primary);
+    color: white;
+    box-shadow: var(--shadow-sm);
+}
+
+.btn-primary:hover:not(:disabled) {
+    background: var(--color-primary-dark);
+    box-shadow: var(--shadow-md);
+    transform: translateY(-1px);
+}
+
+.btn-secondary {
+    background: var(--color-bg-secondary);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+}
+
+.btn-secondary:hover:not(:disabled) {
+    background: var(--color-bg-tertiary);
+}
+
+/* =============================================
+   Forms & Inputs
+   ============================================= */
+.input-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+    margin-bottom: var(--space-md);
+}
+
+.input-group label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-text);
+}
+
+.input {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    font-size: 0.9375rem;
+    font-family: inherit;
+    color: var(--color-text);
+    background: var(--input-bg);
+    border: 1px solid var(--input-border);
+    border-radius: var(--radius-md);
+    outline: none;
+    transition: all var(--transition-fast);
+}
+
+.input:focus {
+    border-color: var(--input-focus);
+    box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+
+.input::placeholder {
+    color: var(--color-text-tertiary);
+}
+
+select.input {
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 1rem center;
+    padding-right: 2.5rem;
+    cursor: pointer;
+}
+
+/* =============================================
+   Auth Screen
+   ============================================= */
+#auth-screen {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg) 100%);
+    padding: var(--space-xl);
+}
+
+.auth-container {
+    width: 100%;
+    max-width: 420px;
+    background: var(--color-bg);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-lg);
+    padding: var(--space-xl);
+    position: relative;
+    z-index: 1;
+}
+
+.auth-logo {
+    text-align: center;
+    margin-bottom: var(--space-xl);
+}
+
+.auth-logo svg {
+    color: var(--color-primary);
+    margin-bottom: var(--space-sm);
+}
+
+.auth-logo h1 {
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: var(--color-text);
+    margin-bottom: var(--space-xs);
+}
+
+.auth-subtitle {
+    font-size: 0.875rem;
+    color: var(--color-text-secondary);
+}
+
+.auth-tabs {
+    display: flex;
+    gap: var(--space-xs);
+    margin-bottom: var(--space-xl);
+    background: var(--color-bg-tertiary);
+    padding: var(--space-xs);
+    border-radius: var(--radius-md);
+}
+
+.auth-tab {
+    flex: 1;
+    padding: var(--space-sm) var(--space-md);
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-text-secondary);
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.auth-tab.active {
+    background: var(--color-bg);
+    color: var(--color-text);
+    box-shadow: var(--shadow-sm);
+}
+
+.auth-form {
+    display: none;
+}
+
+.auth-form.active {
+    display: block;
+}
+
+.auth-form .btn {
+    width: 100%;
+    margin-top: var(--space-md);
+}
+
+.error-message {
+    margin-top: var(--space-md);
+    padding: var(--space-sm) var(--space-md);
+    background: #FEF2F2;
+    color: #DC2626;
+    border: 1px solid #FCA5A5;
+    border-radius: var(--radius-md);
+    font-size: 0.875rem;
+    display: none;
+}
+
+.error-message:not(:empty) {
+    display: block;
+}
+
+/* =============================================
+   Chat Screen
+   ============================================= */
+#chat-screen {
+    display: none;
+    height: 100vh;
+    flex-direction: column;
+}
+
+#chat-screen.active {
+    display: flex;
+}
+
+/* Header */
+.chat-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-md) var(--space-lg);
+    background: var(--header-bg);
+    border-bottom: 1px solid var(--header-border);
+    min-height: 64px;
+    flex-shrink: 0;
+}
+
+.header-center {
+    text-align: center;
+}
+
+.chat-title {
+    font-size: 1.0625rem;
+    font-weight: 600;
+    line-height: 1.3;
+}
+
+.online-count {
+    font-size: 0.75rem;
+    color: var(--color-text-secondary);
+}
+
+.icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-md);
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.icon-btn:hover {
+    background: var(--color-bg-tertiary);
+    color: var(--color-text);
+}
+
+/* Typing Indicator */
+.typing-indicator {
+    height: 28px;
+    display: flex;
+    align-items: center;
+    padding: 0 var(--space-lg);
+    font-size: 0.8125rem;
+    color: var(--color-text-secondary);
+    background: var(--color-bg);
+    border-bottom: 1px solid var(--color-border-light);
+    flex-shrink: 0;
+}
+
+/* Messages Container */
+.messages-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space-md);
+    background: var(--color-bg);
+    display: flex;
+    flex-direction: column;
+}
+
+.messages-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+    padding-bottom: var(--space-md);
+}
+
+.load-more {
+    text-align: center;
+    padding: var(--space-md);
+}
+
+.load-more .btn {
+    font-size: 0.8125rem;
+    padding: var(--space-sm) var(--space-md);
+}
+
+/* Message Bubbles */
+.message-bubble {
+    max-width: 75%;
+    margin-bottom: var(--space-xs);
+    animation: messageSlideIn 0.3s ease;
+}
+
+@keyframes messageSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.message-self {
+    align-self: flex-end;
+}
+
+.message-other {
+    align-self: flex-start;
+}
+
+.message-content {
+    position: relative;
+    padding: 0.625rem 1rem;
+    border-radius: var(--radius-lg);
+    word-wrap: break-word;
+    white-space: pre-wrap;
+}
+
+.message-self .message-content {
+    background: var(--bubble-self);
+    color: var(--bubble-self-text);
+    border-bottom-right-radius: var(--radius-sm);
+}
+
+.message-other .message-content {
+    background: var(--bubble-other);
+    color: var(--bubble-other-text);
+    border-bottom-left-radius: var(--radius-sm);
+}
+
+.message-info {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    margin-bottom: var(--space-xs);
+    font-size: 0.75rem;
+}
+
+.message-self .message-info {
+    justify-content: flex-end;
+}
+
+.sender-name {
+    font-weight: 600;
+    color: var(--color-primary);
+}
+
+.message-other .sender-name {
+    color: var(--color-text);
+}
+
+.timestamp {
+    color: var(--color-text-tertiary);
+    font-size: 0.6875rem;
+}
+
+.message-text {
+    font-size: 0.9375rem;
+    line-height: 1.5;
+}
+
+.message-status {
+    display: inline-flex;
+    align-items: center;
+    margin-left: var(--space-xs);
+    font-size: 0.75rem;
+    color: var(--color-text-tertiary);
+}
+
+.message-status.read {
+    color: var(--color-primary);
+}
+
+.message-actions {
+    display: flex;
+    gap: var(--space-xs);
+    margin-top: var(--space-xs);
+    opacity: 0;
+    transition: opacity var(--transition-fast);
+}
+
+.message-bubble:hover .message-actions {
+    opacity: 1;
+}
+
+.message-actions button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    background: var(--color-bg-secondary);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    font-size: 0.75rem;
+    transition: all var(--transition-fast);
+}
+
+.message-actions button:hover {
+    background: var(--color-bg-tertiary);
+    color: var(--color-text);
+}
+
+/* Reply Indicator */
+.reply-indicator {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-xs) var(--space-sm);
+    margin-bottom: var(--space-xs);
+    font-size: 0.8125rem;
+    color: var(--color-text-secondary);
+    background: var(--color-bg-tertiary);
+    border-radius: var(--radius-sm);
+    border-left: 3px solid var(--color-primary);
+}
+
+.reply-arrow {
+    font-size: 0.75rem;
+    line-height: 1;
+}
+
+/* Attachments */
+.attachment {
+    margin-top: var(--space-sm);
+}
+
+.attachment img {
+    max-width: 100%;
+    max-height: 300px;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: transform var(--transition-fast);
+}
+
+.attachment img:hover {
+    transform: scale(1.02);
+}
+
+.attachment video {
+    max-width: 100%;
+    max-height: 300px;
+    border-radius: var(--radius-md);
+}
+
+.attachment audio {
+    width: 100%;
+    margin-top: var(--space-xs);
+}
+
+.attachment .file-preview {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-sm) var(--space-md);
+    background: var(--color-bg-secondary);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.attachment .file-preview:hover {
+    background: var(--color-bg-tertiary);
+    border-color: var(--color-primary);
+}
+
+.file-icon {
+    font-size: 1.25rem;
+    line-height: 1;
+}
+
+.file-name {
+    font-size: 0.875rem;
+    color: var(--color-primary);
+    text-decoration: underline;
+}
+
+.edited-label {
+    font-size: 0.75rem;
+    font-style: italic;
+    opacity: 0.7;
+    margin-left: var(--space-xs);
+}
+
+.deleted-message {
+    font-style: italic;
+    color: var(--color-text-tertiary);
+    padding: 0.5rem 1rem;
+}
+
+/* =============================================
+   Reply Preview
+   ============================================= */
+.reply-preview {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-sm) var(--space-lg);
+    background: var(--color-bg-secondary);
+    border-top: 1px solid var(--color-border);
+    flex-shrink: 0;
+}
+
+.reply-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+    flex: 1;
+    min-width: 0;
+}
+
+.reply-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--color-primary);
+}
+
+.reply-text {
+    font-size: 0.8125rem;
+    color: var(--color-text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.cancel-reply {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-sm);
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: all var(--transition-fast);
+}
+
+.cancel-reply:hover {
+    background: var(--color-bg-tertiary);
+    color: var(--color-text);
+}
+
+/* =============================================
+   Compose Area
+   ============================================= */
+.compose-container {
+    flex-shrink: 0;
+    border-top: 1px solid var(--color-border);
+    background: var(--color-bg);
+}
+
+.compose-form {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--space-sm);
+    padding: var(--space-sm) var(--space-md);
+}
+
+.attach-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-full);
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: all var(--transition-fast);
+}
+
+.attach-btn:hover {
+    background: var(--color-bg-tertiary);
+    color: var(--color-text);
+}
+
+.message-input {
+    flex: 1;
+    resize: none;
+    padding: 0.625rem 1rem;
+    font-size: 0.9375rem;
+    font-family: inherit;
+    color: var(--color-text);
+    background: var(--input-bg);
+    border: 1px solid var(--input-border);
+    border-radius: var(--radius-xl);
+    outline: none;
+    min-height: 40px;
+    max-height: 120px;
+    transition: all var(--transition-fast);
+    line-height: 1.5;
+}
+
+.message-input:focus {
+    border-color: var(--input-focus);
+    box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+
+.message-input::placeholder {
+    color: var(--color-text-tertiary);
+}
+
+.send-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background: var(--color-primary);
+    border: none;
+    border-radius: var(--radius-full);
+    color: white;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: all var(--transition-fast);
+    box-shadow: var(--shadow-sm);
+}
+
+.send-btn:hover:not(:disabled) {
+    background: var(--color-primary-dark);
+    box-shadow: var(--shadow-md);
+    transform: scale(1.05);
+}
+
+.send-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Upload Progress */
+.upload-progress {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-sm) var(--space-md);
+    background: var(--color-bg-secondary);
+}
+
+.upload-progress.hidden {
+    display: none;
+}
+
+.progress-bar {
+    flex: 1;
+    height: 4px;
+    background: var(--color-bg-tertiary);
+    border-radius: var(--radius-full);
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background: var(--color-primary);
+    border-radius: var(--radius-full);
+    transition: width var(--transition-normal);
+}
+
+.upload-filename {
+    font-size: 0.8125rem;
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* =============================================
+   Modal
+   ============================================= */
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: var(--space-md);
+}
+
+.modal.hidden {
+    display: none;
+}
+
+.modal-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+}
+
+.modal-content {
+    position: relative;
+    width: 100%;
+    max-width: 480px;
+    max-height: 85vh;
+    background: var(--color-bg);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-lg);
+    overflow: hidden;
+    animation: modalSlideIn 0.2s ease;
+}
+
+@keyframes modalSlideIn {
+    from {
+        opacity: 0;
+        transform: scale(0.95) translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-lg);
+    border-bottom: 1px solid var(--color-border);
+}
+
+.modal-header h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.modal-body {
+    padding: var(--space-lg);
+    overflow-y: auto;
+    max-height: calc(85vh - 140px);
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: var(--space-md) var(--space-lg);
+    border-top: 1px solid var(--color-border);
+    background: var(--color-bg-secondary);
+}
+
+.setting-section {
+    margin-bottom: var(--space-xl);
+}
+
+.setting-section:last-child {
+    margin-bottom: 0;
+}
+
+.setting-section h3 {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--color-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: var(--space-md);
+    padding-bottom: var(--space-sm);
+    border-bottom: 1px solid var(--color-border-light);
+}
+
+.setting-item {
+    margin-bottom: var(--space-md);
+}
+
+.setting-item label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    margin-bottom: var(--space-xs);
+    color: var(--color-text);
+}
+
+.color-input-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+}
+
+.color-input-wrapper input[type="color"] {
+    width: 40px;
+    height: 40px;
+    padding: 2px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    background: none;
+}
+
+.color-input-wrapper input[type="color"]::-webkit-color-swatch-wrapper {
+    padding: 0;
+}
+
+.color-input-wrapper input[type="color"]::-webkit-color-swatch {
+    border: none;
+    border-radius: var(--radius-sm);
+}
+
+.avatar-upload {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+}
+
+.avatar-preview {
+    width: 64px;
+    height: 64px;
+    border-radius: var(--radius-full);
+    object-fit: cover;
+    border: 2px solid var(--color-border);
+}
+
+.avatar-preview:not([style*="display: block"]) {
+    display: none;
+}
+
+.custom-theme {
+    padding: var(--space-md);
+    background: var(--color-bg-secondary);
+    border-radius: var(--radius-md);
+    margin-top: var(--space-sm);
+}
+
+/* =============================================
+   Utility Classes
+   ============================================= */
+.hidden {
+    display: none !important;
+}
+
+.screen {
+    display: none;
+    height: 100vh;
+}
+
+.screen.active {
+    display: flex;
+}
+
+/* =============================================
+   Scrollbar Styles
+   ============================================= */
+.messages-container::-webkit-scrollbar {
+    width: 6px;
+}
+
+.messages-container::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.messages-container::-webkit-scrollbar-thumb {
+    background: var(--color-border);
+    border-radius: var(--radius-full);
+}
+
+.messages-container::-webkit-scrollbar-thumb:hover {
+    background: var(--color-text-tertiary);
+}
+
+/* =============================================
+   Responsive Design
+   ============================================= */
+@media (max-width: 640px) {
+    .auth-container {
+        padding: var(--space-lg);
+        border-radius: var(--radius-lg);
+    }
+    
+    .chat-header {
+        padding: var(--space-sm) var(--space-md);
+    }
+    
+    .message-bubble {
+        max-width: 85%;
+    }
+    
+    .modal {
+        padding: 0;
+    }
+    
+    .modal-content {
+        max-height: 100vh;
+        border-radius: 0;
+    }
+    
+    .modal-body {
+        max-height: calc(100vh - 140px);
+    }
+}
+
+@media (min-width: 768px) {
+    .message-bubble {
+        max-width: 65%;
+    }
+    
+    .compose-form {
+        padding: var(--space-sm) var(--space-lg);
+    }
+}
+
+@media (min-width: 1024px) {
+    .message-bubble {
+        max-width: 55%;
+    }
 }