/* ====================================================================== PREMIUM MULTI-CHANNEL INBOX UI v2.0 — Production-Ready CSS ====================================================================== NASIL ENTEGRE EDERİM ===================== 1. Bu dosyayı projenizin CSS klasörüne kopyalayın (ör: /css/premium-inbox.css) 2. Mevcut eski CSS dosyanızı TAMAMEN bu dosya ile DEĞİŞTİRİN. Üzerine eklemeyin — bu dosya tüm stilleri içerir. 3. Her HTML sayfanızda içine ekleyin: 4. Sayfa class'ları zaten mevcut olmalı: - dashboard.html → - whatsapp.html → - instagram.html → - facebook.html → - mail.html → 5. Opsiyonel: body[data-channel="whatsapp"] gibi data attribute kullanıyorsanız, bu CSS onu da destekler (fallback olarak sayfa class'ına bakar). 6. HTML/JS dosyalarınızda HİÇBİR değişiklik gerekmez. Yapı: §1 Global tokens + reset §2 Buttons §3 App layout (sidebar, topbar, content, list, detail) §4 Components (thread item, bubble, reply, badges, dropdown, etc.) §5 Channel themes (WhatsApp, Instagram, Facebook/Messenger, Gmail) §6 Login page §7 Responsive (tablet + mobile) §8 Utilities & accessibility ====================================================================== */ /* ====================================================================== §1 GLOBAL DESIGN TOKENS + RESET ====================================================================== */ :root { /* ── Font stacks ── */ --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* ── App layout ── */ --sidebar-width: clamp(240px, 22vw, 300px); --list-width: clamp(300px, 26vw, 380px); --topbar-height: 60px; /* ── Fluid spacing scale ── */ --s1: clamp(6px, 0.5vw, 10px); --s2: clamp(10px, 0.8vw, 14px); --s3: clamp(14px, 1.1vw, 18px); --s4: clamp(18px, 1.4vw, 24px); --s5: clamp(24px, 2vw, 32px); /* ── Border radius ── */ --r8: 8px; --r10: 10px; --r12: 12px; --r14: 14px; --r16: 16px; --r18: 18px; --r20: 20px; /* ── Typography — never below 12px ── */ --fs12: clamp(12px, 0.22vw + 11px, 13px); --fs13: clamp(13px, 0.22vw + 12px, 14px); --fs14: clamp(14px, 0.25vw + 13px, 15px); --fs15: clamp(15px, 0.28vw + 14px, 16px); --fs16: clamp(16px, 0.32vw + 15px, 18px); --fs18: clamp(18px, 0.45vw + 16px, 20px); --fs20: clamp(20px, 0.5vw + 18px, 22px); /* ── Motion ── */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --t1: 120ms; --t2: 200ms; --t3: 280ms; /* ── Default palette (dark — dashboard / IG) ── */ --bg: #0b0d12; --bg-elevated: #12151c; --surface: rgba(255, 255, 255, 0.04); --surface-2: rgba(255, 255, 255, 0.065); --surface-3: rgba(255, 255, 255, 0.09); --card: rgba(255, 255, 255, 0.05); --border: rgba(255, 255, 255, 0.09); --border-2: rgba(255, 255, 255, 0.14); --text: rgba(255, 255, 255, 0.93); --text-strong: #ffffff; --muted: rgba(255, 255, 255, 0.60); --muted-2: rgba(255, 255, 255, 0.42); /* ── Semantic colours ── */ --primary: #22c55e; --primary-hover: #16a34a; --danger: #ef4444; --danger-hover: #dc2626; --waiting: #f59e0b; --replied: #22c55e; --failed: #ef4444; --info: #3b82f6; /* ── Shadows ── */ --sh1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.16); --sh2: 0 1px 3px rgba(0, 0, 0, 0.08), 0 16px 48px rgba(0, 0, 0, 0.24); --sh3: 0 2px 4px rgba(0, 0, 0, 0.10), 0 24px 64px rgba(0, 0, 0, 0.32); /* ── Focus ring ── */ --ring: 0 0 0 3px rgba(34, 197, 94, 0.28); --ring-offset: 0 0 0 2px var(--bg); /* ── Channel brand tokens ── */ /* WhatsApp */ --wa-green: #00a884; --wa-green-dark: #075e54; --wa-green-light: #25d366; --wa-bg: #efeae2; --wa-bg-pattern: #d9d2c5; --wa-panel: #111b21; --wa-panel-header: #202c33; --wa-in: #ffffff; --wa-out: #d9fdd3; --wa-tick: rgba(0, 0, 0, 0.45); --wa-text: #111b21; --wa-text-secondary: #667781; --wa-border: rgba(134, 150, 160, 0.15); --wa-hover: rgba(255, 255, 255, 0.06); --wa-selected: rgba(0, 168, 132, 0.12); /* Instagram */ --ig-bg: #000000; --ig-surface: #1a1a1a; --ig-surface-2: #262626; --ig-border: #363636; --ig-text: #f5f5f5; --ig-muted: #a8a8a8; --ig-in: #262626; --ig-out: linear-gradient(135deg, #5b51d8, #833ab4, #c13584, #e1306c, #fd1d1d); --ig-accent: #0095f6; --ig-gradient: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); /* Facebook Messenger */ --ms-bg: #f0f2f5; --ms-surface: #ffffff; --ms-border: rgba(0, 0, 0, 0.08); --ms-text: #050505; --ms-text-secondary: #65676b; --ms-in: #e4e6eb; --ms-out: linear-gradient(180deg, #00a2ff, #0078ff); --ms-out-solid: #0084ff; --ms-blue: #1877f2; --ms-hover: rgba(0, 0, 0, 0.04); --ms-selected: rgba(24, 119, 242, 0.10); /* Gmail */ --gm-bg: #f6f8fc; --gm-surface: #ffffff; --gm-card: #ffffff; --gm-border: rgba(0, 0, 0, 0.08); --gm-text: #1f1f1f; --gm-text-secondary: #5f6368; --gm-muted: rgba(15, 23, 42, 0.55); --gm-blue: #1a73e8; --gm-blue-hover: #1557b0; --gm-hover: rgba(0, 0, 0, 0.04); --gm-selected: rgba(26, 115, 232, 0.08); --gm-red: #d93025; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font); font-size: var(--fs14); background: var(--bg); color: var(--text); line-height: 1.55; min-height: 100vh; min-height: 100svh; min-height: 100dvh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } ::selection { background: rgba(34, 197, 94, 0.25); color: var(--text); } img, svg { display: block; max-width: 100%; } button, input, textarea, select { font: inherit; color: inherit; border: none; background: none; } a { color: inherit; text-decoration: none; } /* ── Focus visible — accessible & prominent ── */ :where(button, [role="button"], a, input, textarea, select):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: var(--ring); border-color: transparent; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* ── Scrollbar — universal thin style ── */ .message-list, .chat-messages, .channel-filters { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; } .message-list::-webkit-scrollbar, .chat-messages::-webkit-scrollbar, .channel-filters::-webkit-scrollbar { width: 8px; } .message-list::-webkit-scrollbar-track, .chat-messages::-webkit-scrollbar-track, .channel-filters::-webkit-scrollbar-track { background: transparent; } .message-list::-webkit-scrollbar-thumb, .chat-messages::-webkit-scrollbar-thumb, .channel-filters::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border: 2px solid transparent; background-clip: content-box; border-radius: 999px; min-height: 40px; } .message-list::-webkit-scrollbar-thumb:hover, .chat-messages::-webkit-scrollbar-thumb:hover, .channel-filters::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); border: 2px solid transparent; background-clip: content-box; } /* Light page scrollbar overrides */ .facebook-page .message-list, .facebook-page .chat-messages, .facebook-page .channel-filters, .mail-page .message-list, .mail-page .chat-messages, .mail-page .channel-filters { scrollbar-color: rgba(0, 0, 0, 0.15) transparent; } .facebook-page .message-list::-webkit-scrollbar-thumb, .facebook-page .chat-messages::-webkit-scrollbar-thumb, .facebook-page .channel-filters::-webkit-scrollbar-thumb, .mail-page .message-list::-webkit-scrollbar-thumb, .mail-page .chat-messages::-webkit-scrollbar-thumb, .mail-page .channel-filters::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); border: 2px solid transparent; background-clip: content-box; } .facebook-page .message-list::-webkit-scrollbar-thumb:hover, .facebook-page .chat-messages::-webkit-scrollbar-thumb:hover, .facebook-page .channel-filters::-webkit-scrollbar-thumb:hover, .mail-page .message-list::-webkit-scrollbar-thumb:hover, .mail-page .chat-messages::-webkit-scrollbar-thumb:hover, .mail-page .channel-filters::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.22); border: 2px solid transparent; background-clip: content-box; } /* WhatsApp panel scrollbar */ .whatsapp-page .message-list::-webkit-scrollbar-thumb, .whatsapp-page .channel-filters::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border: 2px solid transparent; background-clip: content-box; } .whatsapp-page .chat-messages::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.10); border: 2px solid transparent; background-clip: content-box; } /* ====================================================================== §2 BUTTONS ====================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1.1rem; border-radius: var(--r12); border: 1px solid transparent; font-size: var(--fs14); font-weight: 600; line-height: 1.4; cursor: pointer; user-select: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: background var(--t2) var(--ease), transform var(--t1) var(--ease), box-shadow var(--t2) var(--ease), border-color var(--t1) var(--ease), opacity var(--t1) var(--ease); } .btn:active:not(:disabled) { transform: translateY(1px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; pointer-events: none; } .btn-primary { width: 100%; color: #fff; background: var(--primary); box-shadow: 0 4px 14px rgba(34, 197, 94, 0.25); } .btn-primary:hover:not(:disabled) { background: var(--primary-hover); box-shadow: 0 6px 20px rgba(34, 197, 94, 0.30); } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); } .btn-secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-2); } .btn-danger { background: var(--danger); color: #fff; box-shadow: 0 4px 14px rgba(239, 68, 68, 0.20); } .btn-danger:hover:not(:disabled) { background: var(--danger-hover); box-shadow: 0 6px 20px rgba(239, 68, 68, 0.25); } .btn-icon { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r10); border: 1px solid transparent; background: transparent; color: var(--muted); flex-shrink: 0; transition: background var(--t1) var(--ease), border-color var(--t1) var(--ease), color var(--t1) var(--ease); } .btn-icon:hover { background: var(--surface); border-color: var(--border); color: var(--text); } /* Sidebar toggle / close / detail back */ .sidebar-toggle, .sidebar-close { display: none; } .sidebar-toggle::before { content: "☰"; font-size: 1.25rem; } .sidebar-close::before { content: "✕"; font-size: 1.15rem; } .detail-back::before { content: "←"; font-size: 1.15rem; } /* ====================================================================== §3 APP LAYOUT ====================================================================== */ /* ── Root app container ── */ .panel-page .app { display: flex; min-height: 100vh; min-height: 100svh; min-height: 100dvh; overflow: hidden; } /* ── Sidebar ── */ .sidebar { width: var(--sidebar-width); background: var(--bg-elevated); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; z-index: 10; } .sidebar-header { height: var(--topbar-height); padding: 0 var(--s3); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); flex-shrink: 0; } .sidebar-header h2 { font-size: var(--fs16); font-weight: 700; letter-spacing: -0.02em; color: var(--text); } .channel-filters { padding: var(--s2); display: flex; flex-direction: column; gap: 4px; overflow-y: auto; overflow-x: hidden; flex: 1; } .channel-btn { padding: 0.65rem 0.85rem; border-radius: var(--r10); border: 1px solid transparent; background: transparent; color: var(--text); text-align: left; font-size: var(--fs14); font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 0.6rem; transition: background var(--t1) var(--ease), border-color var(--t1) var(--ease), color var(--t1) var(--ease), transform var(--t1) var(--ease); } .channel-btn:hover { background: var(--surface); border-color: var(--border); } .channel-btn:active { transform: scale(0.98); } .channel-btn.active { background: var(--primary); color: #fff; border-color: transparent; font-weight: 600; box-shadow: 0 2px 8px rgba(34, 197, 94, 0.20); } .sidebar-footer { padding: var(--s3); border-top: 1px solid var(--border); flex-shrink: 0; } .sidebar-footer .btn { width: 100%; } /* ── Main area ── */ .main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; } /* ── Topbar ── */ .topbar { height: var(--topbar-height); padding: 0 var(--s3); background: var(--bg-elevated); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-shrink: 0; z-index: 5; } .topbar-brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: var(--fs15); letter-spacing: -0.01em; color: var(--text); flex-shrink: 0; } .brand-logo { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; } .topbar-stats { display: flex; gap: clamp(10px, 1.2vw, 20px); font-size: var(--fs13); color: var(--muted); flex-shrink: 0; } .topbar-stats strong { color: var(--text); font-weight: 700; } .stat-waiting strong { color: var(--waiting); } /* ── Content wrap (list + detail) ── */ .content-wrap { flex: 1; min-height: 0; display: flex; overflow: hidden; } /* ── Message list column ── */ .message-list-wrap { width: var(--list-width); min-width: 290px; border-right: 1px solid var(--border); background: rgba(255, 255, 255, 0.015); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; } .message-list { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; } /* ── Detail column ── */ .detail-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } /* ====================================================================== §4 COMPONENTS ====================================================================== */ /* ── Thread / message item ── */ .message-item { padding: var(--s3); border-bottom: 1px solid var(--border); display: flex; gap: 0.75rem; cursor: pointer; position: relative; transition: background var(--t1) var(--ease), border-left-color var(--t1) var(--ease); border-left: 3px solid transparent; } .message-item:hover { background: var(--surface); } .message-item:active { background: var(--surface-2); } .message-item.selected { background: var(--surface-2); border-left-color: var(--primary); } /* Unread indicator — bold sender + dot */ .message-item.unread .item-sender { font-weight: 900; } .message-item.unread::after { content: ""; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--primary); } .message-item .channel-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 1.1rem; border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .message-item .item-body { flex: 1; min-width: 0; } .message-item .item-sender { font-weight: 700; font-size: var(--fs15); letter-spacing: -0.01em; margin-bottom: 2px; color: var(--text); line-height: 1.35; } .message-item .item-preview { font-size: var(--fs13); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.45; } .message-item .item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; margin-top: 5px; font-size: var(--fs12); color: var(--muted-2); } /* ── Channel icon colours ── */ .channel-icon.whatsapp { background: rgba(0, 168, 132, 0.15); color: var(--wa-green); } .channel-icon.instagram { background: linear-gradient(135deg, rgba(228, 64, 95, 0.15), rgba(168, 85, 247, 0.15)); color: #e4405f; } .channel-icon.facebook { background: rgba(24, 119, 242, 0.12); color: var(--ms-blue); } .channel-icon.mail { background: rgba(107, 114, 128, 0.15); color: #9ca3af; } /* ── Status badges ── */ .status-badge { font-size: var(--fs12); padding: 0.2rem 0.55rem; border-radius: 999px; font-weight: 700; letter-spacing: 0.01em; border: 1px solid transparent; line-height: 1.4; } .status-badge.waiting { background: rgba(245, 158, 11, 0.14); color: var(--waiting); border-color: rgba(245, 158, 11, 0.20); } .status-badge.replied { background: rgba(34, 197, 94, 0.14); color: var(--replied); border-color: rgba(34, 197, 94, 0.20); } .status-badge.failed { background: rgba(239, 68, 68, 0.14); color: var(--failed); border-color: rgba(239, 68, 68, 0.20); } /* ── Empty & loading states ── */ .empty-state, .loading { padding: var(--s5); text-align: center; color: var(--muted); font-size: var(--fs15); line-height: 1.6; } .loading { display: none; } .loading.visible { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); } /* Simple loading spinner */ .loading.visible::before { content: ""; width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .empty-state.hidden { display: none; } /* ── Detail placeholder ── */ .detail-placeholder { flex: 1; display: grid; place-items: center; padding: var(--s5); color: var(--muted); font-size: var(--fs15); } .detail-placeholder.hidden { display: none; } .detail-placeholder-inner { max-width: 380px; padding: var(--s5) var(--s4); border-radius: var(--r20); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh1); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s2); } .detail-placeholder-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; margin-bottom: 4px; } .detail-placeholder-title { font-size: var(--fs16); font-weight: 700; letter-spacing: -0.01em; color: var(--text); } .detail-placeholder-text { font-size: var(--fs14); color: var(--muted); line-height: 1.55; } /* Placeholder icon per channel */ .whatsapp-page .detail-placeholder-icon { background: rgba(0, 168, 132, 0.14); color: var(--wa-green); } .instagram-page .detail-placeholder-icon { background: linear-gradient(135deg, rgba(255, 45, 85, 0.20), rgba(168, 85, 247, 0.20), rgba(59, 130, 246, 0.15)); color: #fff; } .facebook-page .detail-placeholder-icon { background: rgba(24, 119, 242, 0.12); color: var(--ms-blue); } .mail-page .detail-placeholder-icon { background: rgba(26, 115, 232, 0.10); color: var(--gm-blue); } .dashboard-page .detail-placeholder-icon { background: rgba(148, 163, 184, 0.14); color: var(--muted); } /* ── Detail view ── */ .detail-view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .detail-view.hidden { display: none; } /* ── Detail header ── */ .detail-header { padding: 0 var(--s3); height: var(--topbar-height); display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--border); background: var(--bg-elevated); flex-shrink: 0; z-index: 4; } .detail-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .detail-sender { font-weight: 800; font-size: var(--fs15); letter-spacing: -0.01em; color: var(--text); line-height: 1.3; display: flex; align-items: center; gap: 4px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .detail-sender svg { flex-shrink: 0; opacity: 0.4; transition: opacity 0.2s; } .detail-sender:hover svg { opacity: 0.8; } /* ── Name Edit Modal ── */ .name-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; animation: fadeIn 0.15s ease; } .name-modal { background: var(--bg-elevated, #1e1e2e); border: 1px solid var(--border, #333); border-radius: 12px; padding: 24px; width: 90%; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); } .name-modal-title { font-size: 1rem; font-weight: 700; color: var(--text, #fff); margin-bottom: 16px; } .name-modal-input { width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border, #444); background: var(--bg-primary, #111); color: var(--text, #fff); font-size: 0.95rem; outline: none; box-sizing: border-box; transition: border-color 0.2s; } .name-modal-input:focus { border-color: var(--accent, #7c3aed); } .name-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; } .name-modal-btn { padding: 8px 20px; border-radius: 8px; border: none; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s; } .name-modal-cancel { background: var(--border, #333); color: var(--text, #fff); } .name-modal-save { background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; } .name-modal-btn:hover { opacity: 0.85; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .detail-channel { font-size: var(--fs12); color: var(--muted); line-height: 1.3; } /* ── Chat container ── */ .chat-container { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .chat-messages { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--s4) var(--s4) var(--s2) var(--s4); display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; } /* ── Message bubbles ── */ .bubble { max-width: min(680px, 82%); padding: 10px 14px; font-size: var(--fs14); line-height: 1.5; word-break: break-word; border-radius: var(--r18); position: relative; } .bubble.incoming { margin-left: 0 !important; margin-right: auto !important; background: var(--surface-2); color: var(--text); border-bottom-left-radius: var(--r8); } .bubble.outgoing { margin-left: auto !important; margin-right: 0 !important; background: var(--primary); color: #fff; border-bottom-right-radius: var(--r8); } .bubble-time { font-size: var(--fs12); margin-top: 4px; opacity: 0.65; line-height: 1.3; } /* ── Reply section ── */ .reply-section { padding: var(--s2) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--bg-elevated); flex-shrink: 0; z-index: 3; } .reply-section textarea { width: 100%; min-height: 80px; max-height: 200px; resize: vertical; padding: 12px 14px; border-radius: var(--r14); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: var(--fs14); line-height: 1.5; transition: border-color var(--t1) var(--ease), box-shadow var(--t1) var(--ease), background var(--t1) var(--ease); } .reply-section textarea::placeholder { color: var(--muted); } .reply-section textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); background: var(--surface-2); } .reply-actions { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); } .reply-actions-buttons { display: flex; align-items: center; gap: 8px; } /* ── Dropdown ── */ .message-actions-dropdown { position: relative; } .message-actions-dropdown.hidden { display: none; } .btn-more { font-size: 1.2rem; padding: 0.5rem; } .dropdown-menu { position: absolute; bottom: calc(100% + 6px); left: 0; min-width: 180px; border-radius: var(--r12); border: 1px solid var(--border); background: var(--bg-elevated); box-shadow: var(--sh2); padding: 4px 0; z-index: 50; backdrop-filter: blur(12px); } .dropdown-menu.hidden { display: none; } .dropdown-item { width: 100%; background: none; border: none; color: var(--text); text-align: left; padding: 9px 14px; font-size: var(--fs14); cursor: pointer; transition: background var(--t1) var(--ease); line-height: 1.45; } .dropdown-item:hover:not(:disabled) { background: var(--surface); } .dropdown-item:disabled { opacity: 0.4; cursor: not-allowed; } /* ── Feedback ── */ .feedback { font-size: var(--fs13); min-height: 1.25rem; line-height: 1.4; } .feedback.success { color: var(--replied); } .feedback.error { color: var(--danger); } /* ── Sidebar overlay (mobile drawer) ── */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.50); z-index: 99; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .sidebar-overlay.visible { display: block; } /* ====================================================================== §5 CHANNEL THEMES ====================================================================== */ /* ───────────────────────────────────── 5A WHATSAPP WEB ───────────────────────────────────── */ .whatsapp-page { background: var(--wa-bg); color: var(--wa-text); } /* Topbar */ .whatsapp-topbar { background: var(--wa-green-dark); border-bottom-color: rgba(0, 0, 0, 0.15); } .whatsapp-topbar .topbar-brand span, .whatsapp-topbar .topbar-stats { color: rgba(255, 255, 255, 0.95); } .whatsapp-topbar .topbar-stats strong { color: #fff; } /* Sidebar */ .whatsapp-page .sidebar { background: var(--wa-panel); border-right-color: var(--wa-border); } .whatsapp-page .sidebar-header { background: var(--wa-panel-header); border-bottom-color: var(--wa-border); } .whatsapp-page .sidebar-header h2 { color: rgba(255, 255, 255, 0.92); } .whatsapp-page .channel-btn { color: rgba(255, 255, 255, 0.85); } .whatsapp-page .channel-btn:hover { background: var(--wa-hover); border-color: transparent; } .whatsapp-page .channel-btn.active { background: var(--wa-green); color: #fff; box-shadow: 0 2px 8px rgba(0, 168, 132, 0.25); } .whatsapp-page .sidebar-footer { border-top-color: var(--wa-border); } /* Message list */ .whatsapp-page .message-list-wrap { background: var(--wa-panel); border-right-color: var(--wa-border); } .whatsapp-page .message-item { border-bottom-color: rgba(255, 255, 255, 0.06); border-left-color: transparent; } .whatsapp-page .message-item:hover { background: var(--wa-hover); } .whatsapp-page .message-item.selected { background: var(--wa-selected); border-left-color: var(--wa-green); } .whatsapp-page .message-item .item-sender { color: rgba(255, 255, 255, 0.92); } .whatsapp-page .message-item .item-preview { color: var(--wa-text-secondary); } .whatsapp-page .message-item .item-meta { color: rgba(255, 255, 255, 0.45); } .whatsapp-page .message-item.unread::after { background: var(--wa-green-light); } /* Detail header */ .whatsapp-page .detail-header { background: var(--wa-panel-header); border-bottom-color: var(--wa-border); } .whatsapp-page .detail-sender { color: rgba(255, 255, 255, 0.92); } .whatsapp-page .detail-channel { color: var(--wa-text-secondary); } /* Chat area — WhatsApp doodle pattern */ .chat-container.theme-whatsapp, .chat-container.theme-whatsapp .chat-messages { background: var(--wa-bg) !important; } .chat-container.theme-whatsapp { background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='p' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='2' cy='2' r='0.8' fill='%23c8bfb0' opacity='0.3'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='200' height='200' fill='url(%23p)'/%3E%3C/svg%3E") !important; } /* Bubbles */ .theme-whatsapp .bubble { border-radius: var(--r12); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); font-size: var(--fs14); } .theme-whatsapp .bubble.incoming { background: var(--wa-in); color: var(--wa-text) !important; border-top-left-radius: 4px; border: none; } .theme-whatsapp .bubble.outgoing { background: var(--wa-out); color: var(--wa-text) !important; border-top-right-radius: 4px; border: none; } .theme-whatsapp .bubble-time { color: var(--wa-tick); text-align: right; font-size: 11px; } /* Reply section */ .whatsapp-page .reply-section { background: var(--wa-panel); border-top-color: var(--wa-border); } .whatsapp-page .reply-section textarea { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.92); border-radius: 21px; min-height: 42px; padding: 10px 16px; } .whatsapp-page .reply-section textarea::placeholder { color: rgba(255, 255, 255, 0.45); } .whatsapp-page .reply-section textarea:focus { border-color: var(--wa-green); box-shadow: 0 0 0 3px rgba(0, 168, 132, 0.18); } /* Buttons */ .whatsapp-page .btn-primary { background: var(--wa-green); box-shadow: 0 4px 14px rgba(0, 168, 132, 0.25); } .whatsapp-page .btn-primary:hover:not(:disabled) { background: #009677; } .whatsapp-page .btn-secondary { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.88); } /* Dropdown */ .whatsapp-page .dropdown-menu { background: var(--wa-panel-header); border-color: var(--wa-border); } .whatsapp-page .dropdown-item { color: rgba(255, 255, 255, 0.88); } .whatsapp-page .dropdown-item:hover:not(:disabled) { background: var(--wa-hover); } /* Placeholder */ .whatsapp-page .detail-placeholder-inner { background: rgba(255, 255, 255, 0.06); border-color: var(--wa-border); } .whatsapp-page .detail-placeholder-title { color: rgba(255, 255, 255, 0.88); } .whatsapp-page .detail-placeholder-text { color: var(--wa-text-secondary); } /* ───────────────────────────────────── 5B INSTAGRAM DM ───────────────────────────────────── */ .instagram-page { background: var(--ig-bg); color: var(--ig-text); } /* Topbar */ .instagram-topbar { background: var(--ig-bg); border-bottom-color: var(--ig-border); } .instagram-topbar .topbar-brand span, .instagram-topbar .topbar-stats { color: var(--ig-text); } .instagram-topbar .topbar-stats strong { color: #fff; } /* Sidebar */ .instagram-page .sidebar { background: var(--ig-bg); border-right-color: var(--ig-border); } .instagram-page .sidebar-header { border-bottom-color: var(--ig-border); } .instagram-page .sidebar-header h2 { color: var(--ig-text); } .instagram-page .channel-btn { color: var(--ig-text); } .instagram-page .channel-btn:hover { background: var(--ig-surface); border-color: transparent; } .instagram-page .channel-btn.active { background: var(--ig-surface-2); color: #fff; border-color: var(--ig-border); } .instagram-page .sidebar-footer { border-top-color: var(--ig-border); } /* Message list */ .instagram-page .message-list-wrap { background: var(--ig-bg); border-right-color: var(--ig-border); } .instagram-page .message-item { border-bottom-color: rgba(255, 255, 255, 0.06); border-left-color: transparent; } .instagram-page .message-item:hover { background: var(--ig-surface); } .instagram-page .message-item.selected { background: rgba(255, 255, 255, 0.08); border-left-color: var(--ig-accent); } .instagram-page .message-item .item-sender { color: var(--ig-text); } .instagram-page .message-item .item-preview { color: var(--ig-muted); } .instagram-page .message-item .item-meta { color: rgba(255, 255, 255, 0.38); } .instagram-page .message-item .channel-icon { border-radius: 50%; } /* Detail header */ .instagram-page .detail-header { background: var(--ig-bg); border-bottom-color: var(--ig-border); } .instagram-page .detail-sender { color: var(--ig-text); } .instagram-page .detail-channel { color: var(--ig-muted); } /* Chat area */ .chat-container.theme-instagram { background: radial-gradient(circle at 10% 15%, rgba(255, 45, 85, 0.06), transparent 40%), radial-gradient(circle at 90% 25%, rgba(168, 85, 247, 0.08), transparent 40%), radial-gradient(circle at 60% 80%, rgba(59, 130, 246, 0.06), transparent 45%), var(--ig-bg); } /* Bubbles */ .theme-instagram .bubble { border-radius: 22px; font-size: var(--fs14); } .theme-instagram .bubble.incoming { background: var(--ig-surface-2); color: var(--ig-text); border: 1px solid var(--ig-border); border-bottom-left-radius: 6px; } .theme-instagram .bubble.outgoing { background: var(--ig-out); color: #fff; border: none; border-bottom-right-radius: 6px; box-shadow: 0 4px 16px rgba(131, 58, 180, 0.25); } .theme-instagram .bubble-time { color: var(--ig-muted); } /* Reply section */ .instagram-page .reply-section { background: var(--ig-bg); border-top-color: var(--ig-border); } .instagram-page .reply-section textarea { background: var(--ig-surface); border-color: var(--ig-border); color: var(--ig-text); border-radius: 22px; min-height: 44px; padding: 10px 16px; } .instagram-page .reply-section textarea::placeholder { color: var(--ig-muted); } .instagram-page .reply-section textarea:focus { border-color: var(--ig-accent); box-shadow: 0 0 0 3px rgba(0, 149, 246, 0.18); } /* Buttons */ .instagram-page .btn-primary { background: var(--ig-accent); box-shadow: 0 4px 14px rgba(0, 149, 246, 0.25); } .instagram-page .btn-primary:hover:not(:disabled) { background: #1877f2; } .instagram-page .btn-secondary { background: var(--ig-surface); border-color: var(--ig-border); color: var(--ig-text); } /* Dropdown */ .instagram-page .dropdown-menu { background: var(--ig-surface-2); border-color: var(--ig-border); } .instagram-page .dropdown-item { color: var(--ig-text); } .instagram-page .dropdown-item:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); } /* Placeholder */ .instagram-page .detail-placeholder-inner { background: var(--ig-surface); border-color: var(--ig-border); } .instagram-page .detail-placeholder-title { color: var(--ig-text); } .instagram-page .detail-placeholder-text { color: var(--ig-muted); } /* ───────────────────────────────────── 5C FACEBOOK MESSENGER ───────────────────────────────────── */ .facebook-page { background: var(--ms-bg); color: var(--ms-text); } /* Topbar */ .facebook-topbar { background: var(--ms-blue); border-bottom-color: rgba(0, 0, 0, 0.12); } .facebook-topbar .topbar-brand span, .facebook-topbar .topbar-stats { color: #fff; } .facebook-topbar .topbar-stats strong { color: #fff; } /* Sidebar */ .facebook-page .sidebar { background: var(--ms-surface); border-right-color: var(--ms-border); } .facebook-page .sidebar-header { border-bottom-color: var(--ms-border); } .facebook-page .sidebar-header h2 { color: var(--ms-text); } .facebook-page .channel-btn { color: var(--ms-text); border-radius: var(--r10); } .facebook-page .channel-btn:hover { background: var(--ms-hover); border-color: transparent; } .facebook-page .channel-btn.active { background: var(--ms-selected); color: var(--ms-blue); border-color: transparent; font-weight: 600; } .facebook-page .sidebar-footer { border-top-color: var(--ms-border); } /* Message list */ .facebook-page .message-list-wrap { background: var(--ms-surface); border-right-color: var(--ms-border); } .facebook-page .message-item { border-bottom-color: rgba(0, 0, 0, 0.05); border-left-color: transparent; } .facebook-page .message-item:hover { background: var(--ms-hover); } .facebook-page .message-item.selected { background: var(--ms-selected); border-left-color: var(--ms-blue); } .facebook-page .message-item .item-sender { color: var(--ms-text); } .facebook-page .message-item .item-preview { color: var(--ms-text-secondary); } .facebook-page .message-item .item-meta { color: rgba(0, 0, 0, 0.40); } .facebook-page .message-item.unread::after { background: var(--ms-blue); } .facebook-page .message-item .channel-icon { border-color: var(--ms-border); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } /* Detail header */ .facebook-page .detail-header { background: var(--ms-surface); border-bottom-color: var(--ms-border); } .facebook-page .detail-sender { color: var(--ms-text); } .facebook-page .detail-channel { color: var(--ms-text-secondary); } /* Chat area */ .chat-container.theme-facebook { background: var(--ms-bg); } /* Bubbles — Messenger style rounded */ .theme-facebook .bubble { border-radius: 20px; font-size: var(--fs14); } .theme-facebook .bubble.incoming { background: var(--ms-in); color: var(--ms-text); border: none; border-bottom-left-radius: 6px; } .theme-facebook .bubble.outgoing { background: var(--ms-out); color: #fff; border: none; border-bottom-right-radius: 6px; box-shadow: 0 2px 8px rgba(0, 132, 255, 0.20); } .theme-facebook .bubble-time { color: var(--ms-text-secondary); } /* Reply section */ .facebook-page .reply-section { background: var(--ms-surface); border-top-color: var(--ms-border); } .facebook-page .reply-section textarea { background: var(--ms-bg); border-color: var(--ms-border); color: var(--ms-text); border-radius: 20px; min-height: 42px; padding: 10px 16px; } .facebook-page .reply-section textarea::placeholder { color: var(--ms-text-secondary); } .facebook-page .reply-section textarea:focus { border-color: var(--ms-blue); box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.15); } /* Buttons */ .facebook-page .btn-primary { background: var(--ms-out-solid); box-shadow: 0 4px 14px rgba(0, 132, 255, 0.25); } .facebook-page .btn-primary:hover:not(:disabled) { background: #0070e0; } .facebook-page .btn-secondary { background: var(--ms-bg); border-color: var(--ms-border); color: var(--ms-text); } .facebook-page .btn-secondary:hover:not(:disabled) { background: rgba(0, 0, 0, 0.06); } /* Dropdown */ .facebook-page .dropdown-menu { background: var(--ms-surface); border-color: var(--ms-border); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); } .facebook-page .dropdown-item { color: var(--ms-text); } .facebook-page .dropdown-item:hover:not(:disabled) { background: var(--ms-hover); } /* Placeholder */ .facebook-page .detail-placeholder-inner { background: var(--ms-surface); border-color: var(--ms-border); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } .facebook-page .detail-placeholder-title { color: var(--ms-text); } .facebook-page .detail-placeholder-text { color: var(--ms-text-secondary); } /* Focus ring override for light theme */ .facebook-page :where(button, [role="button"], a, input, textarea, select):focus-visible { outline-color: var(--ms-blue); box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.20); } /* ───────────────────────────────────── 5D GMAIL ───────────────────────────────────── */ .mail-page { background: var(--gm-bg); color: var(--gm-text); } /* Topbar */ .mail-topbar { background: var(--gm-surface); border-bottom-color: var(--gm-border); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .mail-topbar .topbar-brand span { color: var(--gm-text); } .mail-topbar .topbar-stats { color: var(--gm-text-secondary); } .mail-topbar .topbar-stats strong { color: var(--gm-text); } /* Sidebar */ .mail-page .sidebar { background: var(--gm-surface); border-right-color: var(--gm-border); } .mail-page .sidebar-header { border-bottom-color: var(--gm-border); } .mail-page .sidebar-header h2 { color: var(--gm-text); } .mail-page .channel-btn { color: var(--gm-text); border-radius: 0 16px 16px 0; padding-left: 24px; } .mail-page .channel-btn:hover { background: var(--gm-hover); border-color: transparent; } .mail-page .channel-btn.active { background: rgba(26, 115, 232, 0.12); color: var(--gm-blue); border-color: transparent; font-weight: 700; } .mail-page .sidebar-footer { border-top-color: var(--gm-border); } /* Message list */ .mail-page .message-list-wrap { background: var(--gm-surface); border-right-color: var(--gm-border); } .mail-page .message-item { border-bottom-color: rgba(0, 0, 0, 0.05); border-left-color: transparent; } .mail-page .message-item:hover { background: var(--gm-hover); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.04); } .mail-page .message-item.selected { background: var(--gm-selected); border-left-color: var(--gm-blue); } .mail-page .message-item .item-sender { color: var(--gm-text); } .mail-page .message-item .item-preview { color: var(--gm-text-secondary); } .mail-page .message-item .item-meta { color: var(--gm-muted); } .mail-page .message-item.unread::after { background: var(--gm-blue); } .mail-page .message-item .channel-icon { border-color: var(--gm-border); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } /* Detail header */ .mail-page .detail-header { background: var(--gm-surface); border-bottom-color: var(--gm-border); } .mail-page .detail-sender { color: var(--gm-text); } .mail-page .detail-channel { color: var(--gm-text-secondary); } /* Chat area — Gmail thread style */ .chat-container.theme-mail { background: var(--gm-bg); } /* Thread header (Gmail-specific) */ .theme-mail .thread-header { background: var(--gm-surface); border: 1px solid var(--gm-border); border-radius: var(--r12); padding: var(--s3); margin: var(--s3) var(--s4) 0 var(--s4); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); color: var(--gm-text); font-size: var(--fs14); } /* Bubbles — Gmail card style */ .theme-mail .bubble { border-radius: var(--r12); font-size: var(--fs14); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .theme-mail .bubble.incoming { background: var(--gm-surface); color: var(--gm-text); border: 1px solid var(--gm-border); } .theme-mail .bubble.outgoing { background: rgba(26, 115, 232, 0.08); color: var(--gm-text); border: 1px solid rgba(26, 115, 232, 0.15); } .theme-mail .bubble-time { color: var(--gm-text-secondary); } /* Reply section */ .mail-page .reply-section { background: var(--gm-surface); border-top-color: var(--gm-border); } .mail-page .reply-section textarea { background: var(--gm-bg); border-color: var(--gm-border); color: var(--gm-text); border-radius: var(--r10); } .mail-page .reply-section textarea::placeholder { color: var(--gm-text-secondary); } .mail-page .reply-section textarea:focus { border-color: var(--gm-blue); box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15); } /* Buttons */ .mail-page .btn-primary { background: var(--gm-blue); box-shadow: 0 1px 3px rgba(26, 115, 232, 0.30); border-radius: var(--r20); font-weight: 600; } .mail-page .btn-primary:hover:not(:disabled) { background: var(--gm-blue-hover); box-shadow: 0 2px 6px rgba(26, 115, 232, 0.35); } .mail-page .btn-secondary { background: var(--gm-bg); border-color: var(--gm-border); color: var(--gm-text); border-radius: var(--r20); } .mail-page .btn-secondary:hover:not(:disabled) { background: rgba(0, 0, 0, 0.04); } /* Dropdown */ .mail-page .dropdown-menu { background: var(--gm-surface); border-color: var(--gm-border); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10); border-radius: var(--r8); } .mail-page .dropdown-item { color: var(--gm-text); } .mail-page .dropdown-item:hover:not(:disabled) { background: var(--gm-hover); } /* Placeholder */ .mail-page .detail-placeholder-inner { background: var(--gm-surface); border-color: var(--gm-border); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); } .mail-page .detail-placeholder-title { color: var(--gm-text); } .mail-page .detail-placeholder-text { color: var(--gm-text-secondary); } /* Focus ring override for Gmail */ .mail-page :where(button, [role="button"], a, input, textarea, select):focus-visible { outline-color: var(--gm-blue); box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.18); } /* ====================================================================== §6 LOGIN PAGE ====================================================================== */ .login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100svh; padding: var(--s4); --login-input-text: var(--text); --login-input-bg: rgba(255, 255, 255, 0.05); --login-input-border: var(--border); --login-placeholder: var(--muted); } .login-card { width: 100%; max-width: 400px; padding: var(--s5) var(--s4); border-radius: var(--r20); background: var(--card); border: 1px solid var(--border); box-shadow: var(--sh2); } .login-card h1 { font-size: var(--fs20); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 4px; color: var(--text); } .login-subtitle { font-size: var(--fs14); color: var(--muted); margin-bottom: var(--s4); line-height: 1.5; } .login-form { display: flex; flex-direction: column; gap: var(--s2); } .login-form label { font-size: var(--fs13); font-weight: 600; color: var(--text); } .login-form input { color: var(--login-input-text) !important; -webkit-text-fill-color: var(--login-input-text) !important; caret-color: var(--login-input-text) !important; background: var(--login-input-bg) !important; border-radius: var(--r12); border: 1px solid var(--login-input-border) !important; padding: 0.75rem 0.9rem; font-size: var(--fs14); line-height: 1.5; transition: border-color var(--t1) var(--ease), box-shadow var(--t1) var(--ease); } .login-form input::placeholder { color: var(--login-placeholder) !important; } .login-form input:focus { outline: none; border-color: var(--primary) !important; box-shadow: var(--ring); } .login-form input:-webkit-autofill { -webkit-text-fill-color: var(--login-input-text) !important; box-shadow: 0 0 0px 1000px var(--bg-elevated) inset !important; } .error-msg { min-height: 1.25rem; font-size: var(--fs13); color: var(--danger); margin-top: 4px; line-height: 1.4; } /* Light-page login overrides */ .facebook-page .login-page, .mail-page .login-page { --login-input-text: rgba(15, 23, 42, 0.92); --login-input-bg: rgba(15, 23, 42, 0.03); --login-input-border: rgba(15, 23, 42, 0.12); --login-placeholder: rgba(15, 23, 42, 0.45); } .facebook-page .login-card, .mail-page .login-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); } .facebook-page .login-card h1, .mail-page .login-card h1 { color: rgba(15, 23, 42, 0.92); } .facebook-page .login-subtitle, .mail-page .login-subtitle { color: rgba(15, 23, 42, 0.55); } .facebook-page .login-form label, .mail-page .login-form label { color: rgba(15, 23, 42, 0.80); } .facebook-page .login-form input:-webkit-autofill, .mail-page .login-form input:-webkit-autofill { -webkit-text-fill-color: rgba(15, 23, 42, 0.92) !important; box-shadow: 0 0 0px 1000px #ffffff inset !important; } /* WhatsApp login */ .whatsapp-page .login-card { background: var(--wa-panel); border-color: var(--wa-border); } .whatsapp-page .login-card h1 { color: rgba(255, 255, 255, 0.92); } .whatsapp-page .login-subtitle { color: var(--wa-text-secondary); } .whatsapp-page .login-form label { color: rgba(255, 255, 255, 0.80); } /* Instagram login */ .instagram-page .login-card { background: var(--ig-surface); border-color: var(--ig-border); } /* ====================================================================== §7 RESPONSIVE ====================================================================== */ /* ── Tablet ── */ @media (max-width: 1024px) { :root { --topbar-height: 56px; } .message-list-wrap { min-width: 260px; } } /* ── Mobile ── */ @media (max-width: 768px) { /* Sidebar becomes a drawer */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; width: min(85vw, 320px); transform: translateX(-102%); transition: transform var(--t3) var(--ease); box-shadow: var(--sh3); } .sidebar.open { transform: translateX(0); } .sidebar-toggle, .sidebar-close { display: inline-flex; } /* Stack list + detail vertically */ .content-wrap { flex-direction: column; } .message-list-wrap { width: 100%; min-width: 0; border-right: none; border-bottom: 1px solid var(--border); max-height: 44svh; flex-shrink: 0; } .detail-wrap { flex: 1; min-height: 56svh; } /* When detail is visible, hide list */ .content-wrap.detail-visible .message-list-wrap { display: none; } .content-wrap.detail-visible .detail-wrap { min-height: 0; flex: 1; } /* Reply section always visible at bottom */ .reply-section { position: sticky; bottom: 0; z-index: 10; } } /* ── Small phone ── */ @media (max-width: 480px) { .topbar { padding: 0 var(--s2); } .topbar-stats { flex-direction: column; gap: 2px; align-items: flex-end; font-size: var(--fs12); } .chat-messages { padding: var(--s3) var(--s2) var(--s2) var(--s2); gap: 6px; } .reply-section { padding: var(--s2) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom)); } .reply-section textarea { min-height: 60px; } .reply-actions { flex-direction: column; align-items: stretch; gap: 6px; } .reply-actions-buttons { width: 100%; justify-content: flex-end; } .bubble { max-width: 90%; padding: 8px 12px; } .message-item { padding: var(--s2); } .detail-header { padding: 0 var(--s2); } } /* ====================================================================== §8 UTILITIES & ACCESSIBILITY ====================================================================== */ /* Hide "All" channel button on channel-specific pages */ body[data-hide-all="1"] .channel-btn[data-channel="all"] { display: none !important; } /* Theme routing via data attribute (fallback) */ body[data-channel="whatsapp"] { background: var(--wa-bg); color: var(--wa-text); } body[data-channel="instagram"] { background: var(--ig-bg); color: var(--ig-text); } body[data-channel="facebook"] { background: var(--ms-bg); color: var(--ms-text); } body[data-channel="mail"] { background: var(--gm-bg); color: var(--gm-text); } /* Ensure no horizontal overflow anywhere */ html, body { overflow-x: hidden; } /* Minimum touch target size */ @media (pointer: coarse) { .btn, .btn-icon, .channel-btn, .message-item, .dropdown-item { min-height: 44px; } } /* High contrast mode support */ @media (forced-colors: active) { .btn-primary, .btn-danger { border: 2px solid ButtonText; } .status-badge { border: 1px solid; } .message-item.selected { border-left: 3px solid Highlight; } } /* Print — hide interactive elements */ @media print { .sidebar, .reply-section, .topbar, .sidebar-overlay { display: none !important; } .content-wrap { display: block; } .message-list-wrap { width: 100%; border: none; } }