Create style.css

static/style.css

@@ -0,0 +1,103 @@
+/* ====== CSS Custom Properties (themes) ====== */
+: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; }
+}