Update static/style.css

static/style.css

@@ -113,6 +113,51 @@
     --shadow-xl: 0 20px 25px rgba(0,0,0,0.5);
 }
 
+/* ---- Midnight Theme ---- */
+[data-theme="midnight"] {
+    --primary:#A78BFA; --primary-hover:#8B5CF6; --primary-light:#33245E; --primary-dark:#7C3AED;
+    --bg:#0B0B14; --bg-secondary:#171725; --bg-tertiary:#262639; --bg-elevated:#171725;
+    --text:#F5F3FF; --text-secondary:#C4B5FD; --text-tertiary:#8A8AA0; --text-inverse:#0B0B14;
+    --border:#373349; --border-light:#23202F;
+    --bubble-self:#8B5CF6; --bubble-self-text:#FFFFFF; --bubble-other:#262639; --bubble-other-text:#F5F3FF;
+    --tick-read:#DDD6FE; --header-bg:#171725; --header-border:#373349;
+    --input-bg:#262639; --input-border:#3F3C4A; --input-text:#F5F3FF; --input-placeholder:#A1A1AA;
+    --success:#34D399; --warning:#FBBF24; --error:#FB7185; --info:#60A5FA; --sidebar-bg:#12101D;
+    --shadow-xs:0 1px 2px rgba(0,0,0,.4); --shadow-sm:0 1px 3px rgba(0,0,0,.5);
+    --shadow-md:0 4px 6px rgba(0,0,0,.5); --shadow-lg:0 10px 15px rgba(0,0,0,.5);
+    --shadow-xl:0 20px 25px rgba(0,0,0,.5);
+}
+
+/* ---- Ocean Theme ---- */
+[data-theme="ocean"] {
+    --primary:#2DD4BF; --primary-hover:#14B8A6; --primary-light:#0F3E3A; --primary-dark:#0F766E;
+    --bg:#0B1220; --bg-secondary:#102A37; --bg-tertiary:#16414C; --bg-elevated:#102A37;
+    --text:#ECFEFF; --text-secondary:#99D8E8; --text-tertiary:#5F8C9B; --text-inverse:#0B1220;
+    --border:#1E4A55; --border-light:#142E38;
+    --bubble-self:#0D9488; --bubble-self-text:#FFFFFF; --bubble-other:#16414C; --bubble-other-text:#ECFEFF;
+    --tick-read:#A7F3D0; --header-bg:#102A37; --header-border:#1E4A55;
+    --input-bg:#16414C; --input-border:#27616E; --input-text:#ECFEFF; --input-placeholder:#5F8C9B;
+    --success:#2DD4BF; --warning:#FBBF24; --error:#FB7185; --info:#38BDF8; --sidebar-bg:#0B1522;
+    --shadow-xs:0 1px 2px rgba(0,0,0,.4); --shadow-sm:0 1px 3px rgba(0,0,0,.5);
+    --shadow-md:0 4px 6px rgba(0,0,0,.5); --shadow-lg:0 10px 15px rgba(0,0,0,.5);
+    --shadow-xl:0 20px 25px rgba(0,0,0,.5);
+}
+
+/* ---- Sunset Theme ---- */
+[data-theme="sunset"] {
+    --primary:#FB7185; --primary-hover:#F43F5E; --primary-light:#5F1E2E; --primary-dark:#BE123C;
+    --bg:#1A1412; --bg-secondary:#271D1A; --bg-tertiary:#3B2522; --bg-elevated:#271D1A;
+    --text:#FFF7ED; --text-secondary:#D6ACA2; --text-tertiary:#A78B7A; --text-inverse:#1A1412;
+    --border:#4A2E2A; --border-light:#2D201D;
+    --bubble-self:#F97316; --bubble-self-text:#FFFFFF; --bubble-other:#3B2522; --bubble-other-text:#FFF7ED;
+    --tick-read:#FED7AA; --header-bg:#271D1A; --header-border:#4A2E2A;
+    --input-bg:#3B2522; --input-border:#5A3A34; --input-text:#FFF7ED; --input-placeholder:#A78B7A;
+    --success:#34D399; --warning:#FACC15; --error:#F87171; --info:#60A5FA; --sidebar-bg:#1C1613;
+    --shadow-xs:0 1px 2px rgba(0,0,0,.4); --shadow-sm:0 1px 3px rgba(0,0,0,.5);
+    --shadow-md:0 4px 6px rgba(0,0,0,.5); --shadow-lg:0 10px 15px rgba(0,0,0,.5);
+    --shadow-xl:0 20px 25px rgba(0,0,0,.5);
+}
+
 /* ---- Reset ---- */
 *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
 
@@ -1265,6 +1310,22 @@ img.js-zoom { cursor: zoom-in; }
 .theme-preview-custom .theme-preview-message.self  { background:#F9FAFB; }
 .theme-preview-custom .theme-preview-message.other { background:rgba(255,255,255,0.4); }
 
+/* Midnight preview */
+.theme-preview-midnight { background:#0B0B14; }
+.theme-preview-midnight .theme-preview-header { background:#171725; }
+.theme-preview-midnight .theme-preview-message.self  { background:#8B5CF6; }
+.theme-preview-midnight .theme-preview-message.other { background:#262639; }
+/* Ocean preview */
+.theme-preview-ocean { background:#0B1220; }
+.theme-preview-ocean .theme-preview-header { background:#102A37; }
+.theme-preview-ocean .theme-preview-message.self  { background:#0D9488; }
+.theme-preview-ocean .theme-preview-message.other { background:#16414C; }
+/* Sunset preview */
+.theme-preview-sunset { background:#1A1412; }
+.theme-preview-sunset .theme-preview-header { background:#271D1A; }
+.theme-preview-sunset .theme-preview-message.self  { background:#F97316; }
+.theme-preview-sunset .theme-preview-message.other { background:#3B2522; }
+
 .custom-theme-section {
     margin-top:0.75rem; padding:1rem;
     background:var(--bg-secondary);
@@ -1610,4 +1671,213 @@ img.js-zoom { cursor: zoom-in; }
 /* Desktop hover affordance */
 @media (hover: none) {
     .message-actions { opacity: 1; pointer-events: auto; }
-}
+}
+
+/* ============================================================
+   Social feed page (Twitter/X-like)
+   ============================================================ */
+#social-screen.active { display:flex; background: var(--bg); }
+.social-app {
+    width:100%; height:100%;
+    display:flex; flex-direction:column;
+    background: var(--bg); color: var(--text);
+}
+.social-topbar {
+    display:flex; align-items:center; gap:.65rem;
+    padding:.55rem 1rem; min-height:60px;
+    background: var(--header-bg); border-bottom:1px solid var(--header-border);
+    position:relative; z-index:10;
+}
+.social-topbar-title { min-width:0; }
+.social-topbar-title strong { display:block; font-size:1.05rem; }
+.social-topbar-title span { display:block; color:var(--text-secondary); font-size:.78rem; }
+.social-topbar-search {
+    flex:1; max-width:520px; margin-left:auto;
+    display:flex; align-items:center; gap:.5rem;
+    background:var(--input-bg); border:1px solid var(--input-border);
+    border-radius:var(--radius-full); padding:.4rem .8rem;
+}
+.social-topbar-search i { color:var(--text-tertiary); }
+.social-topbar-search input {
+    flex:1; min-width:0; border:none; outline:none; background:transparent;
+    color:var(--input-text); font:inherit;
+}
+.social-topbar-search input::placeholder { color:var(--input-placeholder); }
+.social-body {
+    flex:1; min-height:0;
+    display:grid; grid-template-columns:240px minmax(0,1fr) 290px;
+    max-width:1400px; width:100%; margin:0 auto;
+    border-left:1px solid var(--border); border-right:1px solid var(--border);
+}
+.social-nav {
+    border-right:1px solid var(--border);
+    padding:1rem .8rem; display:flex; flex-direction:column; gap:.65rem;
+    overflow-y:auto;
+}
+.social-nav-user { display:flex; align-items:center; gap:.65rem; padding:.35rem; }
+.social-nav-userinfo { min-width:0; display:flex; flex-direction:column; }
+.social-nav-userinfo span { font-size:.78rem; }
+.social-nav-avatar .social-avatar-initial,
+.social-nav-avatar img { width:42px; height:42px; }
+.social-nav-links { display:flex; flex-direction:column; gap:.25rem; }
+.social-nav-link {
+    display:flex; align-items:center; gap:.75rem;
+    padding:.65rem .8rem; border-radius:var(--radius-md);
+    background:transparent; border:none; color:var(--text);
+    font-weight:600; text-align:left; cursor:pointer; transition:background var(--transition-fast);
+}
+.social-nav-link:hover { background:var(--bg-tertiary); }
+.social-nav-link.active { color:var(--primary); background:var(--primary-light); }
+.social-nav-link i { width:22px; text-align:center; }
+.social-nav-link .badge { margin-left:auto; }
+.social-compose-btn { margin-top:.25rem; }
+.social-nav-footer { margin-top:auto; padding-top:1rem; border-top:1px solid var(--border-light); }
+
+.social-main {
+    min-width:0; min-height:0; overflow-y:auto;
+    border-right:1px solid var(--border);
+}
+.social-compose {
+    display:flex; gap:.75rem; padding:1rem;
+    background:var(--bg-elevated); border-bottom:1px solid var(--border-light);
+}
+.social-compose .user-avatar,
+.social-post > .social-avatar,
+.social-notification > .social-avatar,
+.social-user-card .user-avatar { flex:none; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:50%; background:var(--bg-tertiary); }
+.social-compose .user-avatar { width:42px; height:42px; }
+.social-compose .user-avatar img, .social-post > .social-avatar img, .social-notification > .social-avatar img, .social-user-card .user-avatar img { width:100%; height:100%; object-fit:cover; }
+.social-compose-main { flex:1; min-width:0; }
+.social-post-input {
+    width:100%; resize:vertical; border:none; outline:none; background:transparent;
+    color:var(--text); font:inherit; font-size:1.05rem; min-height:44px;
+}
+.social-post-input::placeholder { color:var(--text-tertiary); }
+.social-compose-tools { display:flex; align-items:center; gap:.5rem; margin-top:.6rem; }
+.social-compose-tools .btn-icon { display:inline-flex; }
+.social-post-count { font-size:.72rem; color:var(--text-tertiary); margin-left:auto; }
+.social-media-preview { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.5rem; margin-top:.6rem; }
+.social-media-preview-item { position:relative; aspect-ratio:1; border-radius:var(--radius-md); overflow:hidden; background:var(--bg-tertiary); }
+.social-media-preview-item img, .social-media-preview-item video { width:100%; height:100%; object-fit:cover; }
+.social-media-preview-item button { position:absolute; top:4px; right:4px; background:rgba(0,0,0,.55); color:#fff; border-radius:50%; }
+
+.social-feed { min-height:200px; padding-bottom:2rem; }
+.social-post {
+    display:flex; gap:.75rem; padding:1rem;
+    border-bottom:1px solid var(--border-light);
+    transition:background var(--transition-fast);
+}
+.social-post:hover { background:var(--bg-secondary); }
+.social-post > .social-avatar { width:44px; height:44px; }
+.social-post-main { flex:1; min-width:0; }
+.social-repost-label { color:var(--text-secondary); font-size:.75rem; margin-bottom:.35rem; }
+.social-post-head { display:flex; align-items:baseline; gap:.35rem; min-width:0; flex-wrap:wrap; }
+.social-profile-link { color:inherit; text-decoration:none; min-width:0; display:flex; gap:.35rem; align-items:baseline; }
+.social-profile-link strong { color:var(--text); }
+.social-profile-link:hover strong { text-decoration:underline; }
+.social-username { color:var(--text-secondary); font-size:.82rem; }
+.social-dot, .social-time, .social-edited { color:var(--text-tertiary); font-size:.78rem; }
+.social-post-body { white-space:pre-wrap; overflow-wrap:anywhere; padding:.35rem 0 .15rem; }
+.social-hashtag { color:var(--primary); text-decoration:none; }
+.social-hashtag:hover, .social-mention:hover { text-decoration:underline; }
+.social-mention { color:var(--primary); text-decoration:none; }
+.social-post-media { margin:.4rem 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.5rem; }
+.social-post-media .social-media-item { border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border); background:var(--bg-tertiary); }
+.social-media-item img, .social-media-item video { width:100%; max-height:420px; object-fit:contain; display:block; }
+.social-media-item.img { grid-column:span 1; }
+.social-file { display:flex; align-items:center; gap:.5rem; padding:.8rem; color:var(--text); text-decoration:none; }
+.social-quote { margin:.4rem 0 .2rem; padding:.65rem .8rem; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--bg-secondary); }
+.social-quote .social-post-body { font-size:.9rem; }
+.social-post-actions { display:flex; align-items:center; gap:.3rem; margin-top:.45rem; }
+.sp-action {
+    display:inline-flex; align-items:center; gap:.4rem;
+    background:transparent; border:none; cursor:pointer;
+    color:var(--text-secondary); font-size:.8rem; padding:.35rem .5rem;
+    border-radius:var(--radius-full); transition:background var(--transition-fast), color var(--transition-fast);
+}
+.sp-action:hover { background:var(--bg-tertiary); color:var(--primary); }
+.sp-action.active { color:var(--primary); }
+.sp-action.danger:hover { color:var(--error); background:rgba(239,68,68,.1); }
+
+.social-avatar-initial {
+    display:flex; align-items:center; justify-content:center;
+    width:44px; height:44px; border-radius:50%; font-weight:700; color:#fff;
+}
+.social-avatar-initial.avatar-c0{background:#2563EB}.social-avatar-initial.avatar-c1{background:#8B5CF6}.social-avatar-initial.avatar-c2{background:#DB2777}.social-avatar-initial.avatar-c3{background:#059669}.social-avatar-initial.avatar-c4{background:#D97706}.social-avatar-initial.avatar-c5{background:#0891B2}
+
+.social-feed-empty { text-align:center; padding:3rem 1rem; color:var(--text-secondary); }
+.social-feed-empty i { font-size:2.4rem; color:var(--primary-light); display:block; margin-bottom:.6rem; }
+.social-feed-empty h3 { margin:.2rem 0; color:var(--text); }
+.social-loading { display:flex; justify-content:center; padding:1rem; }
+.social-loading.hidden { display:none; }
+
+.social-rail { padding:1rem; overflow-y:auto; display:flex; flex-direction:column; gap:1rem; }
+.social-card { background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1rem; }
+.social-card h3 { margin:0 0 .7rem; font-size:.95rem; display:flex; align-items:center; gap:.45rem; }
+.social-trending-list, .social-suggest-list { display:flex; flex-direction:column; gap:.2rem; }
+.social-trend-item { display:flex; flex-direction:column; gap:.15rem; background:transparent; border:none; text-align:left; padding:.55rem .6rem; border-radius:var(--radius-md); color:var(--text); cursor:pointer; }
+.social-trend-item:hover { background:var(--bg-tertiary); }
+.social-trend-rank { font-size:.72rem; color:var(--text-tertiary); }
+.social-trend-item span:nth-child(2) { font-weight:700; }
+.social-trend-count { font-size:.72rem; color:var(--text-secondary); }
+.social-user-card { display:flex; align-items:center; gap:.6rem; padding:.5rem .35rem; border-radius:var(--radius-md); }
+.social-user-card:hover { background:var(--bg-tertiary); }
+.social-user-card .user-avatar { width:38px; height:38px; }
+.social-user-card .user-avatar .social-avatar-initial { width:38px; height:38px; font-size:.85rem; }
+.social-user-info { flex:1; min-width:0; display:flex; flex-direction:column; }
+.social-user-info strong { font-size:.88rem; }
+.social-user-info span { font-size:.74rem; color:var(--text-secondary); }
+.social-follow-btn.following { background:transparent; border:1px solid var(--border); color:var(--text); }
+
+.social-profile-card { display:flex; gap:1rem; padding:1.25rem; border-bottom:1px solid var(--border-light); }
+.social-profile-avatar { flex:none; width:86px; height:86px; border-radius:50%; background:var(--bg-tertiary); overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:2rem; }
+.social-profile-avatar img { width:100%; height:100%; object-fit:cover; }
+.social-profile-info { flex:1; min-width:0; }
+.social-profile-name { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
+.social-profile-name h2 { margin:0; font-size:1.2rem; }
+.social-profile-bio { margin:.5rem 0; }
+.social-profile-meta { display:flex; gap:1rem; flex-wrap:wrap; color:var(--text-secondary); font-size:.85rem; }
+.social-profile-meta a { color:var(--text-secondary); text-decoration:none; }
+.social-profile-meta a:hover { text-decoration:underline; }
+.social-profile-stats { display:flex; gap:1.1rem; margin-top:.65rem; font-size:.88rem; color:var(--text-secondary); }
+.social-profile-stats strong { color:var(--text); }
+.social-search-users h3, .social-search-posts h3 { margin:1rem .9rem .4rem; }
+.social-search-users .social-user-card { padding:.5rem .9rem; }
+
+.social-notification { display:flex; gap:.75rem; padding:1rem; border-bottom:1px solid var(--border-light); cursor:pointer; }
+.social-notification:hover { background:var(--bg-secondary); }
+.social-notification > .social-avatar { width:40px; height:40px; }
+.social-notification-body { font-size:.92rem; }
+.social-reply-context { background:var(--bg-secondary); border:1px solid var(--border-light); border-radius:var(--radius-md); padding:.55rem .7rem; margin-bottom:.7rem; font-size:.85rem; }
+.social-reply-context strong { color:var(--primary); }
+
+
+@media (max-width:1050px) {
+    .social-body { grid-template-columns:220px minmax(0,1fr); }
+    .social-rail { display:none; }
+}
+@media (max-width:760px) {
+    .social-body { grid-template-columns:1fr; }
+    .social-nav { display:none; }
+    .social-topbar { padding:.5rem; }
+    .social-topbar-title span { display:none; }
+    .social-post { padding:.75rem .6rem; }
+    .social-profile-card { flex-direction:column; }
+}
+
+/* Social upload progress */
+.social-upload-progress { display:flex; flex-direction:column; gap:.25rem; margin-top:.5rem; }
+.social-upload-progress.hidden { display:none; }
+.social-progress-track { width:100%; height:6px; border-radius:var(--radius-full); background:var(--bg-tertiary); overflow:hidden; }
+.social-progress-fill { height:100%; width:0; background:var(--primary); border-radius:var(--radius-full); transition:width var(--transition-fast); }
+.social-upload-progress span { font-size:.72rem; color:var(--text-secondary); }
+
+/* Social compact feed */
+.social-feed-compact .social-post { padding:.55rem .75rem; }
+.social-feed-compact .social-post-body { font-size:.9rem; }
+.social-feed-compact .social-post-media { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
+.social-feed-compact .social-post-actions { margin-top:.2rem; }
+
+/* Social settings */
+#social-settings-modal .modal-body { max-height:60vh; overflow-y:auto; }
+#social-settings-modal select.form-input { appearance:auto; }