/* ===================================================================== BetaChat β€” Theme v2 ("Stay close to your people") Loaded AFTER style.css. Dark-first design that mirrors the native app: deep teal-black surfaces, one mint accent, bold sans headings, pill controls, phone bottom-navigation. Light mode uses the same tokens. Selectors are prefixed with html[data-theme] so they win over the legacy rules without touching app.js. ===================================================================== */ /* ---------- 1. Tokens ---------- */ html[data-theme="dark"] { --t-bg: #0b1517; --t-bg-2: #0e1a1d; --t-surface: #111d20; --t-surface-2: #172629; --t-surface-3: #1e3034; --t-border: #1f3236; --t-border-soft: rgba(255,255,255,.06); --t-text: #eef6f3; --t-text-2: #93a9a5; --t-text-3: #839c9d; --t-accent: #30c29e; --t-accent-strong: #1fa886; --t-accent-ink: #062b22; --t-accent-soft: rgba(48,194,158,.14); --t-accent-glow: rgba(48,194,158,.32); --t-bubble-mine: #188067; --t-bubble-mine-text: #f4fffb; --t-bubble-theirs: #1a292c; --t-bubble-theirs-text: #e9f3f0; --t-danger: #f0716a; --t-danger-soft: rgba(240,113,106,.12); --t-warn: #f2b84b; --t-shadow: 0 18px 44px rgba(0,0,0,.45); --t-shadow-sm: 0 6px 18px rgba(0,0,0,.35); --t-tile: #16262a; --t-scroll: rgba(48,194,158,.28); /* legacy variables used by untouched components */ --bg: var(--t-bg); --surface: var(--t-surface); --surface-hover: var(--t-surface-3); --border-solid: var(--t-border); --green: var(--t-accent); --blue: #6fb7ff; --ink: var(--t-accent-ink); --ivory: var(--t-text); --muted: var(--t-text-2); --muted-dim: var(--t-text-3); --bubble-theirs: var(--t-bubble-theirs); --danger: var(--t-danger); --thread-gradient: linear-gradient(135deg, #2fc39d, #23a586); --sky: #2c8c86; --violet: #3b7f9a; --mint: var(--t-accent); color-scheme: dark; } html[data-theme="light"] { --t-bg: #f2f7f5; --t-bg-2: #eaf2ee; --t-surface: #ffffff; --t-surface-2: #eef4f1; --t-surface-3: #e1ece7; --t-border: #dbe6e1; --t-border-soft: rgba(19,48,42,.08); --t-text: #13302a; --t-text-2: #526b66; --t-text-3: #556b65; --t-accent: #177c65; --t-accent-strong: #167660; --t-accent-ink: #ffffff; --t-accent-soft: rgba(23,124,101,0.12); --t-accent-glow: rgba(23,124,101,0.28); --t-bubble-mine: #1a826a; --t-bubble-mine-text: #ffffff; --t-bubble-theirs: #ffffff; --t-bubble-theirs-text: #1f4a40; --t-danger: #c7322a; --t-danger-soft: rgba(217,83,76,.1); --t-warn: #d99a2b; --t-shadow: 0 18px 44px rgba(19,60,50,.16); --t-shadow-sm: 0 6px 18px rgba(19,60,50,.12); --t-tile: #13302a; --t-scroll: rgba(23,124,101,0.32); --bg: var(--t-bg); --surface: var(--t-surface); --surface-hover: var(--t-surface-3); --border-solid: var(--t-border); --green: var(--t-accent); --blue: #3d86d8; --ink: #ffffff; --ivory: var(--t-text); --muted: var(--t-text-2); --muted-dim: var(--t-text-3); --bubble-theirs: var(--t-bubble-theirs); --danger: var(--t-danger); --thread-gradient: linear-gradient(135deg, #22b391, #1a9a7d); --sky: #4b9fd6; --violet: #8a7be0; --mint: var(--t-accent); color-scheme: light; } /* ---------- 2. Base ---------- */ html[data-theme], html[data-theme] body { background: var(--t-bg); color: var(--t-text); font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif; } html[data-theme] ::selection { background: var(--t-accent-glow); } html[data-theme] .title, html[data-theme] .modal-title, html[data-theme] .chat-name, html[data-theme] .empty-title, html[data-theme] .profile-view-name, html[data-theme] .manage-users-titlebar h3, html[data-theme] .applock-brand, html[data-theme] .brand-lockup, html[data-theme] .auth-mobile-brand, html[data-theme] .auth-welcome h1 { font-family: 'Inter', system-ui, sans-serif; font-style: normal; letter-spacing: -.02em; color: var(--t-text); } html[data-theme] .title { font-weight: 700; } html[data-theme] .subtitle { color: var(--t-text-2); } /* ---------- 3. Logo mark: dark tile, serif B, mint bar on top ---------- */ html[data-theme] .logo, html[data-theme] #screen-login .logo, html[data-theme] .applock-brand .logo { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--t-tile); color: #fff; box-shadow: none; border-radius: 26%; font-family: 'Fraunces', Georgia, serif; font-weight: 600; } html[data-theme] .logo::after { display: none; } html[data-theme] .logo::before, html[data-theme] .logo-hero::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 14%; width: 46%; height: 8%; border-radius: 999px; background: var(--t-accent); } html[data-theme] .logo > span { display: block; margin-top: 14%; line-height: 1; } html[data-theme] .logo:not(.logo-hero) { line-height: 1; padding-top: .32em; } html[data-theme] .logo-hero { width: 112px; height: 112px; font-size: 62px; margin: 0 auto 20px; box-shadow: 0 20px 50px rgba(0,0,0,.35), 0 0 0 1px var(--t-border-soft); } html[data-theme="light"] .logo-hero { box-shadow: 0 20px 50px rgba(19,60,50,.22); } html[data-theme] .sidebar-topbar .title::before { content: 'B'; display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 10px; border-radius: 9px; background: var(--t-tile); color: #fff; font: 600 17px/1 'Fraunces', serif; vertical-align: -7px; box-shadow: inset 0 3px 0 0 var(--t-accent), 0 0 0 1px var(--t-border-soft); } /* ---------- 4. Splash ---------- */ html[data-theme] #screen-splash { background: radial-gradient(60% 40% at 50% 0%, rgba(48,194,158,.14), transparent 70%), var(--t-bg); } html[data-theme] .splash-box .title { font-size: 34px; font-weight: 800; margin: 2px 0 6px; } html[data-theme] .splash-tagline { color: var(--t-text-2); letter-spacing: .18em; font-size: 11px; margin: 0 0 34px; } html[data-theme] .loader { width: 40px; height: 40px; margin: 6px auto 0; background: none; animation: none; border-radius: 50%; border: 3px solid var(--t-surface-3); border-top-color: var(--t-accent); animation: t-spin .9s linear infinite; } html[data-theme] .loader::before { display: none; } @keyframes t-spin { to { transform: rotate(360deg); } } html[data-theme] .splash-loading-label { color: var(--t-text-2); margin-top: 14px; } html[data-theme] .splash-wave { height: 170px; } html[data-theme] .splash-wave svg path { fill: url(#none); fill: rgba(48,194,158,.16); } html[data-theme] .splash-wave::before { content: ""; position: absolute; inset: auto 0 0; height: 60%; background: linear-gradient(180deg, transparent, rgba(48,194,158,.10)); } html[data-theme] .splash-wave-caption { font-family: 'Caveat', 'Fraunces', cursive; font-size: 26px; font-weight: 500; color: var(--t-accent); transform: rotate(-4deg); margin-bottom: 30px; opacity: .95; } /* ---------- 5. Login ---------- */ html[data-theme] #screen-login.screen.centered { background: var(--t-bg); color: var(--t-text); } html[data-theme] #screen-login::before { background-image: radial-gradient(var(--t-border) 1px, transparent 1px); opacity: .55; mask-image: linear-gradient(90deg,#000,transparent 70%); } html[data-theme] .auth-orb-one { background: radial-gradient(circle, rgba(48,194,158,.32), rgba(48,194,158,0) 70%); opacity: 1; filter: blur(8px); width: 520px; height: 520px; top: -220px; left: -160px; } html[data-theme] .auth-orb-two { background: radial-gradient(circle, rgba(242,184,75,.16), rgba(242,184,75,0) 70%); opacity: 1; filter: blur(8px); width: 420px; height: 420px; } html[data-theme] .brand-lockup, html[data-theme] .auth-mobile-brand { color: var(--t-text); font-weight: 800; font-size: 22px; } html[data-theme] #screen-login .logo { width: 46px; height: 46px; font-size: 24px; border-radius: 13px; } html[data-theme] .eyebrow { color: var(--t-accent); } html[data-theme] .auth-welcome h1 { color: var(--t-text); font-weight: 800; letter-spacing: -.045em; } html[data-theme] .auth-welcome h1 em { color: var(--t-accent); font-style: italic; font-family: 'Fraunces', serif; font-weight: 500; } html[data-theme] .auth-welcome p, html[data-theme] .auth-trust { color: var(--t-text-2); } html[data-theme] .auth-trust-dot { background: var(--t-accent); box-shadow: 0 0 0 5px var(--t-accent-soft); } html[data-theme] .doodle { border-color: var(--t-border); background: var(--t-surface); box-shadow: 0 10px 24px rgba(0,0,0,.35); } html[data-theme="light"] .doodle { box-shadow: 0 10px 24px rgba(19,60,50,.14); } html[data-theme] .doodle-heart { color: #ef7a72; } html[data-theme] .doodle-star { color: #f2b84b; } html[data-theme] .doodle-smile { color: var(--t-accent); } html[data-theme] #screen-login .login-box { background: var(--t-surface); border: 1px solid var(--t-border); border-radius: 28px; box-shadow: var(--t-shadow); backdrop-filter: none; } html[data-theme] #screen-login .auth-card-heading .title { font-family: 'Inter', system-ui, sans-serif; color: var(--t-text); font-size: 28px; font-weight: 800; letter-spacing: -.03em; } html[data-theme] #screen-login .subtitle { color: var(--t-text-2); } html[data-theme] #screen-login .modal-tabs, html[data-theme] .modal-tabs { background: var(--t-surface-2) !important; border: 1px solid var(--t-border-soft) !important; border-radius: 999px; padding: 4px; gap: 4px; } html[data-theme] #modal-backdrop .modal-tabs { border-radius: 18px; } html[data-theme] .modal-tabs .tab-btn, html[data-theme] #screen-login .tab-btn { background: transparent !important; color: var(--t-text-2) !important; box-shadow: none !important; border-radius: 999px; padding: 10px 0; font-weight: 600; } html[data-theme] .modal-tabs .tab-btn.active, html[data-theme] #screen-login .tab-btn.active { background: var(--t-accent) !important; color: var(--t-accent-ink) !important; box-shadow: 0 6px 16px var(--t-accent-glow) !important; } html[data-theme] #screen-login .input, html[data-theme] .input { background: var(--t-surface-2); border: 1px solid var(--t-border); color: var(--t-text); border-radius: 14px; padding: 13px 14px; } html[data-theme] #screen-login .input::placeholder, html[data-theme] .input::placeholder { color: var(--t-text-3); } html[data-theme] #screen-login .input:focus, html[data-theme] .input:focus { border-color: var(--t-accent); box-shadow: 0 0 0 4px var(--t-accent-soft); } html[data-theme] .input-icon { stroke: var(--t-text-3); } html[data-theme] .password-toggle { color: var(--t-accent); } html[data-theme] .password-toggle:hover { background: var(--t-accent-soft); } html[data-theme] #screen-login .button, html[data-theme] .button { background: var(--t-accent); color: var(--t-accent-ink); border-radius: 14px; padding: 13px 16px; font-weight: 700; box-shadow: 0 8px 20px var(--t-accent-glow); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; } html[data-theme] #screen-login .button:hover, html[data-theme] .button:not(:disabled):hover { background: var(--t-accent); filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 10px 24px var(--t-accent-glow); } html[data-theme] #screen-login .button:active, html[data-theme] .button:active { transform: translateY(0); box-shadow: 0 4px 12px var(--t-accent-glow); } html[data-theme] #screen-login .button.ghost, html[data-theme] .button.ghost, html[data-theme] .modal .button.ghost { background: transparent !important; color: var(--t-text) !important; border: 1px solid var(--t-border) !important; box-shadow: none; font-weight: 600; } html[data-theme] #screen-login .button.ghost:hover, html[data-theme] .button.ghost:not(:disabled):hover, html[data-theme] .modal .button.ghost:hover { background: var(--t-surface-2) !important; transform: none; box-shadow: none; filter: none; } html[data-theme] .google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; } html[data-theme] .google-g { width: 18px; height: 18px; flex: 0 0 auto; } html[data-theme] #screen-login .auth-divider { color: var(--t-text-3); } html[data-theme] #screen-login .auth-divider::before, html[data-theme] #screen-login .auth-divider::after { border-color: var(--t-border); } html[data-theme] #screen-login .forgot-password-link a, html[data-theme] .forgot-password-link a { color: var(--t-accent); font-weight: 600; } html[data-theme] #screen-login .error, html[data-theme] .error { color: var(--t-danger); } html[data-theme] #screen-login .success, html[data-theme] .success { color: var(--t-accent); } html[data-theme] .auth-mobile-brand .logo { width: 44px; height: 44px; } @media (max-width: 780px) { html[data-theme] #screen-login.screen.centered { padding: 28px 18px 40px; } html[data-theme] .auth-mobile-brand { flex-direction: column; gap: 12px; margin: 10px 0 26px; font-size: 26px; } html[data-theme] #screen-login .auth-mobile-brand .logo { width: 72px; height: 72px; font-size: 38px; border-radius: 22px; } html[data-theme] .auth-mobile-brand::after { content: 'YOUR PEOPLE, ONE PLACE'; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; color: var(--t-text-2); margin-top: -6px; } html[data-theme] #screen-login .login-box { background: transparent; border: 0; box-shadow: none; padding: 0 4px; border-radius: 0; } html[data-theme] #screen-login .auth-card-heading { min-height: 0; margin-bottom: 18px; } html[data-theme] #screen-login .auth-card-heading .title { font-size: 24px; } } /* ---------- 6. App shell ---------- */ html[data-theme] .page { background: var(--t-bg); } html[data-theme] .sidebar { background: var(--t-surface); border-right: 1px solid var(--t-border); width: 360px; min-width: 320px; } html[data-theme] .sidebar-top { background: transparent; border-bottom: 0; padding: 18px 18px 6px; gap: 0; } html[data-theme] .sidebar-topbar { margin-bottom: 8px; } html[data-theme] .sidebar-topbar .title { color: var(--t-text); font-size: 22px; font-weight: 800; display: flex; align-items: center; } html[data-theme] .sidebar-topbar-actions { display: flex; align-items: center; gap: 6px; } html[data-theme] .sidebar-topbar-actions #avatar-me { width: 32px; height: 32px; font-size: 12px; margin: 0 4px; box-shadow: 0 0 0 2px var(--t-surface), 0 0 0 3.5px var(--t-accent); } html[data-theme] .sidebar-user { display: none; } html[data-theme] .icon-btn { background: transparent; border: 1px solid transparent; color: var(--t-text-2); border-radius: 12px; width: 36px; height: 36px; overflow: visible; } html[data-theme] .icon-btn:hover { background: var(--t-surface-3); color: var(--t-text); border-color: transparent; } html[data-theme] .icon-btn svg { width: 20px; height: 20px; } html[data-theme] #sidebar-menu-btn svg, html[data-theme] .dots-v { fill: currentColor; stroke: none; width: 20px; } html[data-theme] .chat-header-actions .icon-btn { background: transparent; border-color: transparent; color: var(--t-text-2); } html[data-theme] .chat-header-actions .icon-btn:hover { background: var(--t-surface-3); color: var(--t-text); } html[data-theme] #sidebar-search-btn { display: none; } html[data-theme] .chat-search-wrap { margin: 4px 18px 8px; padding: 0 12px; border: 1px solid var(--t-border); border-radius: 999px; background: var(--t-surface-2); color: var(--t-text-3); } html[data-theme] .chat-search-wrap:focus-within { border-color: var(--t-accent); box-shadow: 0 0 0 4px var(--t-accent-soft); } html[data-theme] .chat-search-wrap input { color: var(--t-text); padding: 10px 0; } html[data-theme] .chat-search-wrap input::placeholder { color: var(--t-text-3); } html[data-theme] .chat-search-wrap input:focus-visible, html[data-theme] .composer .input:focus-visible { outline: none; box-shadow: none; } html[data-theme] .chat-search-clear { background: var(--t-surface-3); color: var(--t-text-2); } /* filter chips */ html[data-theme] .chat-filters { display: flex; gap: 8px; padding: 4px 18px 10px; overflow-x: auto; scrollbar-width: none; } html[data-theme] .chat-filters::-webkit-scrollbar { display: none; } html[data-theme] .chip { flex: 0 0 auto; border: 1px solid var(--t-border); background: var(--t-surface-2); color: var(--t-text-2); border-radius: 999px; padding: 7px 14px; font: 600 12.5px/1 'Inter', sans-serif; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; } html[data-theme] .chip:hover { color: var(--t-text); border-color: var(--t-text-3); } html[data-theme] .chip.active { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-accent-ink); box-shadow: 0 6px 14px var(--t-accent-glow); } /* filtering is pure CSS on the data-kind attribute app.js stamps on each row */ html[data-theme] .sidebar[data-filter="dm"] .chat-row:not([data-kind="dm"]):not([data-kind="bot"]), html[data-theme] .sidebar[data-filter="group"] .chat-row:not([data-kind="group"]), html[data-theme] .sidebar[data-filter="stories"] .chat-list, html[data-theme] .sidebar[data-filter="stories"] .chat-list-heading, html[data-theme] .sidebar[data-filter="stories"] .sidebar-new { display: none; } html[data-theme] .chat-filter-empty { text-align: center; color: var(--t-text-3); font-size: 13px; padding: 36px 24px; line-height: 1.5; } html[data-theme] .chat-filter-empty strong { display: block; color: var(--t-text-2); font-size: 14px; margin-bottom: 4px; } /* stories */ html[data-theme] .stories-bar { background: transparent; border-bottom: 1px solid var(--t-border-soft); padding: 6px 18px 12px; gap: 14px; } html[data-theme] .story-item { width: 60px; } html[data-theme] .story-ring { width: 58px; height: 58px; padding: 2.5px; background: var(--t-surface-3); } html[data-theme] .story-ring.unseen { background: conic-gradient(from 200deg, var(--t-accent), #7fe0c4, var(--t-accent-strong), var(--t-accent)); } html[data-theme] .story-ring .avatar { border: 2.5px solid var(--t-surface); } html[data-theme] .story-item-label { color: var(--t-text-2); font-size: 11px; } html[data-theme] .story-add-plus { background: var(--t-accent); color: var(--t-accent-ink); border-color: var(--t-surface); } html[data-theme] .stories-empty-hint { color: var(--t-text-3); } html[data-theme] .sidebar[data-filter="stories"] .stories-bar { flex-wrap: wrap; overflow: visible; padding: 16px 18px; gap: 18px 14px; border-bottom: 0; justify-content: flex-start; } html[data-theme] .sidebar[data-filter="stories"] .story-item { width: 72px; } html[data-theme] .sidebar[data-filter="stories"] .story-ring { width: 70px; height: 70px; } html[data-theme] .sidebar[data-filter="stories"] .story-item-label { max-width: 72px; font-size: 12px; } /* new chat + list */ html[data-theme] .sidebar-new { padding: 6px 18px 4px; } html[data-theme] .sidebar-new .button { border-radius: 14px; min-height: 44px; box-shadow: none; } html[data-theme] .sidebar-new .button:active { transform: none; } html[data-theme] .chat-list-heading { color: var(--t-text-3); padding: 12px 20px 4px; } html[data-theme] .chat-list-heading span:last-child { background: var(--t-accent-soft); color: var(--t-accent); } html[data-theme] .chat-list { padding: 4px 10px 16px; } html[data-theme] .chat-list::before { display: none; } html[data-theme] .chat-row { gap: 13px; padding: 10px 10px; border-radius: 16px; margin-bottom: 2px; min-height: 68px; } html[data-theme] .chat-row:hover { background: var(--t-surface-2); } html[data-theme] .chat-row.active { background: var(--t-surface-3); box-shadow: inset 3px 0 0 var(--t-accent); } html[data-theme] .chat-row .avatar.large { width: 50px; height: 50px; font-size: 16px; box-shadow: none; } html[data-theme] .chat-row-name { color: var(--t-text); font-size: 15px; font-weight: 600; } html[data-theme] .chat-row-meta { color: var(--t-text-2); font-size: 13px; margin-top: 3px; max-width: none; } html[data-theme] .chat-row.active .chat-row-meta { color: var(--t-text-2); } html[data-theme] .chat-row-code { color: var(--t-text-3); } html[data-theme] .chat-row-trailing { min-width: 40px; padding: 4px 0; justify-content: space-between; } html[data-theme] .chat-row-time { color: var(--t-text-3); font-size: 11px; } html[data-theme] .chat-row-trailing .chat-row-unread-dot { width: 10px; height: 10px; background: var(--t-accent); box-shadow: 0 0 0 3px var(--t-accent-soft); } html[data-theme] .chat-row-request-badge { background: var(--t-accent); color: var(--t-accent-ink); } html[data-theme] .empty-list-msg, html[data-theme] .search-empty-list span { color: var(--t-text-3); } html[data-theme] .search-empty-list strong { color: var(--t-text-2); } html[data-theme] .avatar { color: #fff; box-shadow: none; } /* ---------- 7. Chat panel ---------- */ html[data-theme] .chat-panel { background: var(--t-bg); } html[data-theme] .empty-state { color: var(--t-text-2); } html[data-theme] .empty-state > div:not(.empty-icon) { color: var(--t-text-2); } html[data-theme] .empty-icon { background: var(--t-surface-2); color: var(--t-accent); border-radius: 24px; border: 1px solid var(--t-border); } html[data-theme] .empty-title { color: var(--t-text); font-size: 24px; font-weight: 800; } html[data-theme] .empty-copy { color: var(--t-text-2); } html[data-theme] .empty-state::after { display: none; } html[data-theme] .empty-suggestions { border-color: var(--t-border); } html[data-theme] .empty-suggestions > span { color: var(--t-text-3); } html[data-theme] .empty-suggestions button { background: var(--t-surface-2); border-color: var(--t-border); color: var(--t-text-2); } html[data-theme] .empty-suggestions button:hover { background: var(--t-surface-3); border-color: var(--t-accent); color: var(--t-text); } html[data-theme] .chat-header { background: var(--t-surface); border-bottom: 1px solid var(--t-border); padding: 12px 18px; gap: 12px; backdrop-filter: none; } html[data-theme] .chat-header > .avatar { width: 42px; height: 42px; box-shadow: none; } html[data-theme] .back-btn { color: var(--t-text); font-size: 30px; line-height: 1; width: 36px; height: 36px; display: none; align-items: center; justify-content: center; border-radius: 12px; } html[data-theme] .back-btn.show-mobile { display: none; } html[data-theme] .chat-name { color: var(--t-text); font-size: 16px; font-weight: 700; } html[data-theme] .chat-meta { color: var(--t-text-2); font-size: 12px; } html[data-theme] .chat-meta.typing { color: var(--t-accent); font-style: normal; font-weight: 600; } html[data-theme] .presence-dot { background: var(--t-text-3); } html[data-theme] .presence-dot.online { background: var(--t-accent); box-shadow: 0 0 0 3px var(--t-accent-soft); } html[data-theme] .messages { background-color: var(--t-bg); background-image: radial-gradient(var(--t-border-soft) 1px, transparent 1px); background-size: 22px 22px; padding: 22px 6%; gap: 6px; } html[data-theme] .date-divider { background: var(--t-surface-2); color: var(--t-text-2); font-weight: 600; border: 1px solid var(--t-border-soft); } html[data-theme] .system-msg-row { background: var(--t-surface-2); color: var(--t-text-2); } html[data-theme] .msg-row.theirs .msg-sender { color: var(--t-accent) !important; margin: 0 0 3px 6px; font-size: 12px; } html[data-theme] .chat-view.is-dm .msg-sender { display: none; } html[data-theme] .msg-bubble { display: flow-root; position: relative; padding: 9px 12px 8px; border-radius: 20px; font-size: 14.5px; line-height: 1.42; box-shadow: none; max-width: min(64vw, 520px); } html[data-theme] .msg-row.mine .msg-bubble, html[data-theme] .msg-bubble.mine { background: var(--t-bubble-mine); color: var(--t-bubble-mine-text); border-bottom-right-radius: 6px; border-top-right-radius: 20px; } html[data-theme] .msg-row.theirs .msg-bubble, html[data-theme] .msg-bubble.theirs { background: var(--t-bubble-theirs); color: var(--t-bubble-theirs-text); border: 1px solid var(--t-border-soft); border-bottom-left-radius: 6px; border-top-left-radius: 20px; } html[data-theme="light"] .msg-row.theirs .msg-bubble { border-color: var(--t-border); box-shadow: 0 2px 6px rgba(19,60,50,.06); } html[data-theme] .msg-row.grouped .msg-bubble.mine { border-top-right-radius: 8px; } html[data-theme] .msg-row.grouped .msg-bubble.theirs { border-top-left-radius: 8px; } html[data-theme] .msg-bubble.deleted { background: transparent; border: 1px dashed var(--t-border); color: var(--t-text-3); } /* timestamp lives inside the bubble (moved there by ui.js) β€” floats to the bottom-right like a real messenger */ html[data-theme] .msg-bubble .msg-time-row { float: right; margin: 7px -2px -2px 12px; line-height: 1; gap: 4px; } html[data-theme] .msg-bubble .msg-time { font-size: 10.5px; color: var(--t-text-3); margin: 0; } html[data-theme] .msg-bubble.mine .msg-time { color: rgba(255,255,255,.72); } html[data-theme] .msg-bubble .read-ticks { font-size: 12px; line-height: 1; } html[data-theme] .msg-bubble.mine .read-ticks { color: rgba(255,255,255,.62); } html[data-theme] .msg-bubble.mine .read-ticks.read { color: #a9f0ff; } html[data-theme] .msg-bubble .edited-tag, html[data-theme] .msg-bubble .forwarded-tag, html[data-theme] .msg-bubble .disappear-tag { font-size: 10px; color: inherit; opacity: .7; } html[data-theme] .msg-row > .msg-time-row .msg-time { color: var(--t-text-3); } html[data-theme] .msg-bubble.has-image { padding: 5px; } html[data-theme] .msg-bubble.has-image .msg-image { border-radius: 16px; } html[data-theme] .msg-bubble.has-image .msg-caption { padding: 8px 8px 4px; } html[data-theme] .msg-bubble.has-image:not(:has(.msg-caption)) .msg-time-row { position: absolute; right: 12px; bottom: 10px; margin: 0; padding: 3px 7px; border-radius: 999px; background: rgba(0,0,0,.45); backdrop-filter: blur(4px); } html[data-theme] .msg-bubble.has-image:not(:has(.msg-caption)) .msg-time, html[data-theme] .msg-bubble.has-image:not(:has(.msg-caption)) .read-ticks { color: #fff; } html[data-theme] .msg-quote { border-left-color: rgba(255,255,255,.55); background: rgba(0,0,0,.18); } html[data-theme] .msg-bubble.theirs .msg-quote { border-left-color: var(--t-accent); background: var(--t-surface-3); } html[data-theme] .msg-link-preview { background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.18); } html[data-theme] .msg-bubble.theirs .msg-link-preview { background: var(--t-surface-3); border-color: var(--t-border); } html[data-theme] .mention-token { color: var(--t-accent); } html[data-theme] .msg-bubble.mine .mention-token { color: #dffff5; } html[data-theme] .msg-file { background: rgba(0,0,0,.2); } html[data-theme] .reaction-pill { background: var(--t-surface-2) !important; border-color: var(--t-border) !important; color: var(--t-text) !important; } html[data-theme] .reaction-pill.mine { background: var(--t-accent-soft) !important; border-color: var(--t-accent) !important; } html[data-theme] .reaction-picker { background: var(--t-surface-2); border-color: var(--t-border); box-shadow: var(--t-shadow); } html[data-theme] .reaction-picker button:hover { background: var(--t-surface-3); } html[data-theme] .msg-actions { background: var(--t-surface-2); border-color: var(--t-border); box-shadow: var(--t-shadow-sm); backdrop-filter: none; } html[data-theme] .msg-action-btn { color: var(--t-text-2); } html[data-theme] .msg-action-btn:hover { background: var(--t-surface-3); color: var(--t-accent); } html[data-theme] .msg-action-btn svg { display: block; } html[data-theme] .msg-pin-btn.is-pinned { color: var(--t-accent); background: var(--t-surface-3); } html[data-theme] .msg-delete-btn:hover { background: var(--t-danger-soft); color: var(--t-danger); } html[data-theme] .search-no-results, html[data-theme] .empty-messages { background: var(--t-surface-2); color: var(--t-text-2); } /* composer: one pill with the actions inside and a round send button */ html[data-theme] .composer { margin: 0 18px 16px; padding: 6px 6px 6px 8px; gap: 2px; background: var(--t-surface-2); border: 1px solid var(--t-border); border-radius: 999px; box-shadow: none; align-items: center; } html[data-theme] .composer .input { order: 1; background: transparent; border: 0; box-shadow: none; padding: 11px 6px 11px 10px; margin: 0; color: var(--t-text); font-size: 15px; } html[data-theme] .composer .attach-btn { order: 2; width: 38px; height: 38px; border: 0; background: transparent; color: var(--t-text-2); border-radius: 50%; } html[data-theme] .composer .attach-btn:hover { background: var(--t-surface-3); color: var(--t-accent); } html[data-theme] .composer .attach-btn svg { width: 21px; height: 21px; } html[data-theme] .send-btn { order: 3; width: 42px; height: 42px; border-radius: 50%; background: var(--t-accent); color: var(--t-accent-ink); box-shadow: 0 6px 16px var(--t-accent-glow); font-size: 20px; margin-left: 4px; } html[data-theme] .send-btn:not(:disabled):hover { filter: brightness(1.06); box-shadow: 0 8px 20px var(--t-accent-glow); } html[data-theme] .draft-count { order: 1; position: static; align-self: flex-end; margin: 0 0 6px -2px; color: var(--t-warn); } html[data-theme] .composer:has(.draft-count:not(.hidden)) .input { padding-bottom: 11px; } html[data-theme] .send-status { color: var(--t-text-2); padding: 0 26px 6px; } html[data-theme] .send-status.success { color: var(--t-accent); } html[data-theme] .send-status.error { color: var(--t-danger); } html[data-theme] .jump-latest-btn { background: var(--t-surface-2); border-color: var(--t-border); color: var(--t-accent); box-shadow: var(--t-shadow-sm); } html[data-theme] .pinned-banner { margin: 10px 18px 0; background: var(--t-surface-2); border: 1px solid var(--t-border); border-radius: 14px; } html[data-theme] .pinned-banner-text { color: var(--t-text-2); } html[data-theme] .reply-preview-bar { margin: 0 18px; background: var(--t-surface-2); border: 1px solid var(--t-border); border-bottom: 0; border-radius: 18px 18px 0 0; } html[data-theme] .reply-preview-info { border-color: var(--t-accent); } html[data-theme] .reply-preview-sender { color: var(--t-accent); } html[data-theme] .reply-preview-text { color: var(--t-text-2); } html[data-theme] .mention-picker { background: var(--t-surface-2); border-color: var(--t-border); box-shadow: var(--t-shadow); } html[data-theme] .mention-picker button { color: var(--t-text); } html[data-theme] .mention-picker button:hover { background: var(--t-surface-3); } html[data-theme] .search-bar { background: var(--t-surface); border-color: var(--t-border); } html[data-theme] .msg-edit-input { background: var(--t-surface-2); color: var(--t-text); border-color: var(--t-border); } html[data-theme] .lightbox-backdrop { background: rgba(4,8,9,.94); } /* ---------- 8. Sheets / modals ---------- */ html[data-theme] .modal-backdrop { background: rgba(3,9,11,.66); backdrop-filter: blur(4px); } html[data-theme="light"] .modal-backdrop { background: rgba(19,48,42,.4); } html[data-theme] .modal, html[data-theme] .chat-settings-modal, html[data-theme] .confirm-modal { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; border-radius: 24px; box-shadow: var(--t-shadow); color: var(--t-text); } html[data-theme] .modal-header, html[data-theme] .chat-settings-summary { background: transparent; } html[data-theme] .modal-title { color: var(--t-text) !important; font-size: 20px; font-weight: 800; } html[data-theme] .modal h3 { color: var(--t-text); font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -.02em; margin-top: 0; } html[data-theme] .modal .subtitle { color: var(--t-text-2); } html[data-theme] .chat-settings-name { color: var(--t-text); font-weight: 700; } html[data-theme] .chat-settings-meta { color: var(--t-text-2); } html[data-theme] .chat-settings-summary .avatar { box-shadow: 0 0 0 3px var(--t-surface), 0 0 0 5px var(--t-accent); } html[data-theme] .chat-settings-list { border-color: var(--t-border-soft); } html[data-theme] .chat-settings-modal .chat-settings-list:not(:last-child) { border-bottom-color: var(--t-border-soft); } html[data-theme] .settings-section-label { color: var(--t-text-3); padding: 14px 22px 6px; } html[data-theme] .chat-settings-row { color: var(--t-text); font-size: 14.5px; font-weight: 500; min-height: 52px; } html[data-theme] .chat-settings-row:hover { background: var(--t-surface-2); } html[data-theme] .chat-settings-list .chat-settings-row .chat-settings-row-icon { width: 36px; height: 36px; border-radius: 12px; background: var(--t-surface-2); color: var(--t-accent); font-size: 17px; border: 1px solid var(--t-border-soft); } html[data-theme] .chat-settings-row-sub { color: var(--t-text-2); } html[data-theme] .chat-settings-row-arrow { color: var(--t-text-3); font-size: 20px; } html[data-theme] .chat-settings-row.danger { color: var(--t-danger); } html[data-theme] .chat-settings-list .chat-settings-row.danger .chat-settings-row-icon { background: var(--t-danger-soft); color: var(--t-danger); } html[data-theme] .settings-danger-zone { background: transparent; } html[data-theme] .settings-danger-zone .settings-section-label { color: var(--t-text-3); } /* settings profile card */ html[data-theme] .menu-profile-card { display: flex; flex-direction: column; align-items: center; gap: 4px; width: calc(100% - 36px); margin: 8px 18px 6px; padding: 20px 16px 18px; border: 1px solid var(--t-border); border-radius: 20px; background: linear-gradient(180deg, var(--t-surface-2), var(--t-surface)); color: var(--t-text); font-family: inherit; cursor: pointer; text-align: center; transition: border-color .15s ease, transform .15s ease; } html[data-theme] .menu-profile-card:hover { border-color: var(--t-accent); transform: translateY(-1px); } html[data-theme] .menu-profile-card .avatar { width: 84px; height: 84px; font-size: 28px; margin-bottom: 8px; box-shadow: 0 0 0 3px var(--t-surface), 0 0 0 5.5px var(--t-accent); } html[data-theme] .menu-profile-name { font-size: 18px; font-weight: 800; letter-spacing: -.02em; } html[data-theme] .menu-profile-handle { font-size: 13px; color: var(--t-text-2); } html[data-theme] .menu-profile-status { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--t-accent); } html[data-theme] .menu-profile-status .presence-dot { margin: 0; } /* generic controls inside sheets */ html[data-theme] .friend-add-row .input { background: var(--t-surface-2) !important; border-color: var(--t-border) !important; color: var(--t-text) !important; } html[data-theme] .friend-add-row .button { background: var(--t-accent) !important; color: var(--t-accent-ink); box-shadow: none; } html[data-theme] .friends-subtitle { color: var(--t-text-3) !important; } html[data-theme] .friend-row-empty, html[data-theme] .member-row-status { color: var(--t-text-2) !important; } html[data-theme] .member-row-name { color: var(--t-text); } html[data-theme] .member-row-actions button, html[data-theme] .friend-row-actions button, html[data-theme] .manageusers-row-actions button { border-color: var(--t-border); color: var(--t-text-2); background: var(--t-surface-2); border-radius: 999px; padding: 5px 10px; } html[data-theme] .member-row-actions button:hover, html[data-theme] .friend-row-actions button:hover, html[data-theme] .manageusers-row-actions button:hover { background: var(--t-surface-3); color: var(--t-text); } html[data-theme] .friend-row-actions button.accept-btn { border-color: var(--t-accent); color: var(--t-accent); background: var(--t-accent-soft); } html[data-theme] .friend-row-actions button.message-btn { border-color: var(--t-border); color: var(--t-text); } html[data-theme] .admin-badge { color: var(--t-accent); border-color: var(--t-accent); } html[data-theme] .badge-dot { background: var(--t-danger); border-color: var(--t-surface); } html[data-theme] .switch-slider { background: var(--t-surface-3); border-color: var(--t-border); } html[data-theme] .switch-slider::before { background: var(--t-text-2); } html[data-theme] .switch input:checked + .switch-slider { background: var(--t-accent); } html[data-theme] .switch input:checked + .switch-slider::before { background: var(--t-accent-ink); } html[data-theme] .app-lock-row { border-color: var(--t-border-soft); } html[data-theme] .app-lock-title { color: var(--t-text); } html[data-theme] .app-lock-subtitle { color: var(--t-text-2); } html[data-theme] .profile-avatar-row { background: var(--t-surface-2); border: 1px solid var(--t-border-soft); } html[data-theme] .profile-avatar-row .avatar { box-shadow: 0 0 0 3px var(--t-surface), 0 0 0 5px var(--t-accent); } html[data-theme] .profile-field-label { color: var(--t-text-2); } html[data-theme] .profile-username-lock { background: var(--t-surface-2); border-color: var(--t-border); color: var(--t-text-2); } html[data-theme] .profile-username-lock strong { color: var(--t-accent); } html[data-theme] .profile-hint { color: var(--t-text-3); } html[data-theme] .link-btn { color: var(--t-text-2); } html[data-theme] .link-btn:hover { color: var(--t-text); } html[data-theme] .profile-view-header { background: linear-gradient(180deg, var(--t-surface-2), var(--t-surface)); } html[data-theme] .profile-view-header::before { background: var(--t-accent-soft); } html[data-theme] .profile-view-header .avatar { box-shadow: 0 0 0 4px var(--t-surface), 0 0 0 6.5px var(--t-accent); } html[data-theme] .profile-view-name { color: var(--t-text); font-weight: 800; } html[data-theme] .profile-view-username { background: var(--t-accent-soft); color: var(--t-accent); font-family: 'Inter', sans-serif; font-weight: 600; } html[data-theme] .profile-view-status { color: var(--t-accent); } html[data-theme] .profile-view-bio { color: var(--t-text-2); } html[data-theme] .profile-view-stats { background: var(--t-surface-2); border-color: var(--t-border); } html[data-theme] .profile-view-stat-num { color: var(--t-text); } html[data-theme] .profile-view-stat-label { color: var(--t-text-3); } html[data-theme] .profile-view-actions .button:first-child { background: var(--t-accent); } html[data-theme] .profile-view-grid-item { background: var(--t-surface-2); } html[data-theme] .profile-view-grid-title { color: var(--t-text-3); } html[data-theme] .forward-copy { color: var(--t-text-2); } html[data-theme] .forward-chat-option { border-color: var(--t-border); color: var(--t-text); } html[data-theme] .forward-chat-option:hover { background: var(--t-surface-2); } html[data-theme] .forward-chat-option.selected { background: var(--t-accent-soft); border-color: var(--t-accent); } html[data-theme] .forward-option-avatar { background: var(--t-accent); color: var(--t-accent-ink); } html[data-theme] .forward-chat-option.selected .forward-option-check { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-accent-ink); } html[data-theme] .confirm-text { color: var(--t-text-2); } html[data-theme] .danger-button { background: var(--t-danger) !important; color: #fff; } html[data-theme] .disappearing-option { border-color: var(--t-border); color: var(--t-text); background: var(--t-surface-2); border-radius: 14px; } html[data-theme] .disappearing-option:hover { background: var(--t-surface-3); } html[data-theme] .disappearing-option.active { border-color: var(--t-accent); color: var(--t-accent); background: var(--t-accent-soft); } html[data-theme] .wallpaper-hint { color: var(--t-text-2); } html[data-theme] .wallpaper-preview { background-color: var(--t-bg); border-color: var(--t-border); } html[data-theme] .preview-bubble.theirs { background: var(--t-bubble-theirs); color: var(--t-bubble-theirs-text); } html[data-theme] .preview-bubble.mine { background: var(--t-bubble-mine); color: #fff; } html[data-theme] .wallpaper-swatch.selected { border-color: var(--t-accent); } html[data-theme] .wallpaper-swatch.theme-default { background: var(--t-bg); border-color: var(--t-border); } html[data-theme] .textstory-swatch.active { border-color: var(--t-text); } html[data-theme] .report-user-label { background: var(--t-danger-soft); color: var(--t-danger); } html[data-theme] .report-row { background: var(--t-surface-2); border-color: var(--t-border); } html[data-theme] .manageusers-row { border-color: var(--t-border-soft); } html[data-theme] .manageusers-status, html[data-theme] .manageusers-row-name { color: var(--t-text-2); } html[data-theme] .manageusers-row-name { color: var(--t-text); } html[data-theme] .manageusers-tag { border-color: var(--t-border); color: var(--t-text-2); } html[data-theme] .manageusers-close-float { background: var(--t-surface-2); border-color: var(--t-border); color: var(--t-text); } html[data-theme] .owner-dashboard { background: var(--t-surface-2); border-color: var(--t-border); } html[data-theme] .owner-dashboard-head, html[data-theme] .audit-head { color: var(--t-text); } html[data-theme] .owner-stats div { background: var(--t-surface); } html[data-theme] .owner-stats strong { color: var(--t-accent); } html[data-theme] .owner-stats span { color: var(--t-text-2); } html[data-theme] .owner-audit-list { border-color: var(--t-border); color: var(--t-text-2); } html[data-theme] .owner-audit-list strong { color: var(--t-text); } html[data-theme] .owner-audit-list div { border-color: var(--t-border-soft); } html[data-theme] .botrequest-preview { background: var(--t-surface-2); } html[data-theme] .botrequest-preview-line { color: var(--t-text-2); } html[data-theme] .botrequest-preview-line strong { color: var(--t-text); } html[data-theme] .textarea { padding-top: 12px; } html[data-theme] .lock-symbol { border-color: var(--t-accent-glow); background: var(--t-accent-soft); color: var(--t-accent); } html[data-theme] .applock-status { color: var(--t-text-2); } /* ---------- 9. Feedback ---------- */ html[data-theme] .app-toast { background: var(--t-surface-2); border-color: var(--t-border); color: var(--t-text); box-shadow: var(--t-shadow); backdrop-filter: none; } html[data-theme] .toast-mark { background: var(--t-accent-soft); color: var(--t-accent); } html[data-theme] .app-toast.error { border-color: rgba(240,113,106,.4); color: var(--t-text); } html[data-theme] .app-toast.error .toast-mark { background: var(--t-danger-soft); color: var(--t-danger); } html[data-theme] .connection-banner { background: var(--t-surface-2); border-color: rgba(242,184,75,.45); color: var(--t-text); } html[data-theme] .connection-banner-icon { background: rgba(242,184,75,.18); color: var(--t-warn); } html[data-theme] .connection-retry-btn { background: var(--t-warn); color: #2a1d05; } html[data-theme] .messages::-webkit-scrollbar-thumb, html[data-theme] .chat-list::-webkit-scrollbar-thumb, html[data-theme] .manageusers-list::-webkit-scrollbar-thumb { background: var(--t-scroll); } html[data-theme] :where(button,input,textarea,select,[tabindex]):focus-visible { outline: 3px solid var(--t-accent); outline-offset: 2px; box-shadow: 0 0 0 5px var(--t-accent-soft); } html[data-theme] .msg-row { animation-duration: .16s; } /* ---------- 10. Phone bottom navigation + compose button ---------- */ html[data-theme] .bottom-nav, html[data-theme] .fab { display: none; } @media (max-width: 720px) { html[data-theme] .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--t-surface) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--t-border); } html[data-theme] .bottom-nav.over-sheet { z-index: 30; } html[data-theme] .bottom-nav-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 4px 4px; border: 0; border-radius: 14px; background: transparent; color: var(--t-text-3); font: 600 10.5px/1 'Inter', sans-serif; letter-spacing: .01em; cursor: pointer; min-height: 52px; transition: color .15s ease, background .15s ease; } html[data-theme] .bottom-nav-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; } html[data-theme] .bottom-nav-btn.active { color: var(--t-accent); } html[data-theme] .bottom-nav-btn.active svg { transform: translateY(-1px); } html[data-theme] .bottom-nav-btn.active::before { content: ""; position: absolute; top: 2px; width: 44px; height: 30px; border-radius: 999px; background: var(--t-accent-soft); z-index: -1; } html[data-theme] .bottom-nav-btn:active { transform: scale(.96); } html[data-theme] .bottom-nav-badge { position: absolute; top: 6px; right: calc(50% - 16px); width: 10px; height: 10px; border-radius: 50%; background: var(--t-danger); border: 2px solid var(--t-surface); } html[data-theme] .fab { position: fixed; right: 18px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 6; display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 18px; background: var(--t-accent); color: var(--t-accent-ink); box-shadow: 0 12px 28px var(--t-accent-glow), 0 2px 6px rgba(0,0,0,.25); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } html[data-theme] .fab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } html[data-theme] .fab:active { transform: scale(.95); } /* hide the phone chrome while a conversation is open */ html[data-theme] .sidebar.hide-mobile ~ .bottom-nav, html[data-theme] .sidebar.hide-mobile ~ .fab { display: none; } /* phone layout of the list screen */ html[data-theme] .sidebar { width: 100%; min-width: 0; border-right: 0; padding-bottom: calc(66px + env(safe-area-inset-bottom)); } html[data-theme] .sidebar-top { padding: max(14px, env(safe-area-inset-top)) 16px 4px; } html[data-theme] .sidebar-topbar .title { font-size: 21px; } html[data-theme] #sidebar-search-btn { display: flex; } html[data-theme] .chat-search-wrap { display: none; margin: 4px 16px 8px; } html[data-theme] .chat-search-wrap.open, html[data-theme] .chat-search-wrap:has(input:not(:placeholder-shown)) { display: flex; } html[data-theme] .chat-search-wrap input { font-size: 16px; } html[data-theme] .chat-filters { padding: 6px 16px 10px; } html[data-theme] .stories-bar { padding: 4px 16px 12px; } html[data-theme] .sidebar-new, html[data-theme] .chat-list-heading { display: none; } html[data-theme] .chat-list { padding: 6px 8px 24px; } html[data-theme] .chat-row { padding: 10px 10px; min-height: 70px; border-radius: 16px; } html[data-theme] .chat-row .avatar.large { width: 52px; height: 52px; } /* conversation screen */ html[data-theme] .back-btn.show-mobile { display: flex; } html[data-theme] .chat-header { padding: max(10px, env(safe-area-inset-top)) 10px 10px 8px; gap: 8px; } html[data-theme] .chat-header > .avatar { width: 38px; height: 38px; } html[data-theme] .chat-name { font-size: 15.5px; } html[data-theme] .messages { padding: 14px 12px calc(96px + env(safe-area-inset-bottom)); } html[data-theme] .msg-bubble { max-width: 80vw; font-size: 15px; } html[data-theme] .composer { margin: 0; left: 8px; right: 8px; bottom: calc(var(--keyboard-offset, 0px) + 8px); padding-bottom: 6px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.35); } html[data-theme="light"] .composer { box-shadow: 0 10px 30px rgba(19,60,50,.16); } html[data-theme] .pinned-banner { margin: 8px 10px 0; } html[data-theme] .reply-preview-bar { margin: 0 8px; } html[data-theme] .jump-latest-btn { bottom: 84px; } /* sheets: settings + people sit under the bottom nav like real tabs */ html[data-theme] .modal { border-radius: 26px 26px 0 0; max-height: 88dvh; } html[data-theme] #modal-sidebar-menu-backdrop .modal, html[data-theme] #modal-friends-backdrop .modal { padding-bottom: calc(70px + env(safe-area-inset-bottom)); max-height: 92dvh; } html[data-theme] .menu-profile-card { margin-top: 4px; } html[data-theme] .modal-tabs .tab-btn { padding: 11px 0; } } @media (min-width: 721px) { html[data-theme] .chat-search-wrap { display: flex !important; } } /* ---------- 11. Light-mode touch-ups ---------- */ html[data-theme="light"] .sidebar-topbar-actions #avatar-me { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--t-accent); } html[data-theme="light"] .chip { background: #fff; } html[data-theme="light"] .chat-row:hover { background: var(--t-surface-2); } html[data-theme="light"] .messages { background-image: radial-gradient(rgba(19,48,42,.07) 1px, transparent 1px); } html[data-theme="light"] .composer { background: #fff; box-shadow: 0 8px 24px rgba(19,60,50,.08); } html[data-theme="light"] .bottom-nav { background: rgba(255,255,255,.94); } html[data-theme="light"] .msg-bubble.mine .msg-time { color: rgba(255,255,255,.8); } html[data-theme="light"] .logo, html[data-theme="light"] #screen-login .logo { color: #fff; } html[data-theme="light"] .sidebar-topbar .title::before { color: #fff; } /* Native app (Capacitor): Google OAuth can't run inside a WebView, hide the row. */ html.native-app #auth-google-row { display: none !important; } /* "Load earlier messages" (message pagination) */ .load-older-btn { display: block; margin: 8px auto 12px; padding: 6px 14px; font-size: 13px; border-radius: 999px; } /* Dialog stacking. Every backdrop shares z-index 10, so a dialog that is opened from another modal (e.g. "Remove friend?" from Friends, "Report user" from a profile) used to render *behind* it and could not be clicked. */ #modal-profileview-backdrop { z-index: 40; } #modal-report-backdrop { z-index: 50; } #modal-confirm-backdrop { z-index: 60; } /* Links inside message bubbles */ .msg-bubble .msg-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; } .msg-bubble.theirs .msg-link { color: var(--t-accent, #2FA98C); } /* In-app prompt dialog (replaces window.prompt) */ #modal-prompt-backdrop { z-index: 60; } #modal-prompt-backdrop .confirm-text { margin-bottom: 12px; } #modal-prompt-backdrop #prompt-input { width: 100%; box-sizing: border-box; } /* multi-line composer (round 4) */ html[data-theme] .composer { align-items: flex-end; border-radius: 24px; } html[data-theme] .composer textarea.input { resize: none; min-height: 38px; max-height: 138px; padding: 9px 6px 9px 10px; line-height: 20px; overflow-y: hidden; font-family: inherit; display: block; } html[data-theme] .composer .send-btn { margin-bottom: 0; } html[data-theme] .msg-bubble .msg-text, html[data-theme] .msg-caption { white-space: pre-wrap; overflow-wrap: anywhere; } /* phone fixes (round 5) */ /* The decorative blurred circles were positioned against the page, not the login screen, so they stuck out 85px past the right edge. Mobile browsers then zoomed the whole page out to fit β€” everything looked ~20% too small, and typing into a field made the browser zoom back in around it. */ html[data-theme] #screen-login.screen.centered { position: relative; overflow: hidden; } html[data-theme] .auth-orb { pointer-events: none; } /* iPhone Safari zooms the page when a focused field's text is smaller than 16px */ @media (pointer: coarse) { html[data-theme] .composer .input, html[data-theme] .input, html[data-theme] input.input, html[data-theme] textarea.input { font-size: 16px; } /* comfortable thumb targets */ html[data-theme] .msg-action-btn { width: 36px; height: 36px; } html[data-theme] .pinned-banner-unpin, html[data-theme] .password-toggle { padding: 8px 10px; min-height: 32px; } html[data-theme] .chip { min-height: 34px; } html[data-theme] #forgot-password-link { display: inline-block; padding: 8px 6px; } } /* ===================================================================== πŸŽ‰ Festive skins β€” a skin layered on top of dark or light (Settings β†’ Preferences β†’ Festive skin, or the owner switches one on for everyone / selected users from the Owner dashboard). Covers the πŸŽ‚ Birthday theme plus four seasonal skins: Eid, Pohela Boishakh, Victory Day and Winter. Pure CSS + a few emoji, no images to download; animations are transform/opacity only and switch off under prefers-reduced-motion. ===================================================================== */ html[data-theme="light"][data-skin="birthday"] { --t-bg: #fdf0ff; --t-bg-2: #fbdfff; --t-surface: #ffffff; --t-surface-2: #fbe6ff; --t-surface-3: #f6d6ff; --t-border: #ecc3f5; --t-border-soft: rgba(120,30,80,.08); --t-text: #2a0a24; --t-text-2: #7a4a70; --t-text-3: #79547f; --t-accent: #c01ab3; --t-accent-strong: #b919ad; --t-accent-ink: #ffffff; --t-accent-soft: rgba(192,26,179,0.14); --t-accent-glow: rgba(192,26,179,0.34); --t-bubble-mine: #cd17be; --t-bubble-mine-text: #ffffff; --t-bubble-theirs: #ffffff; --t-bubble-theirs-text: #3a1a33; --t-warn: #f0a531; --t-shadow: 0 18px 44px rgba(150,40,100,.16); --t-shadow-sm: 0 6px 18px rgba(150,40,100,.12); --t-tile: #2a0a24; --t-scroll: rgba(192,26,179,0.35); --party-stripe: linear-gradient(90deg, #e01fd0, #6fb7ff, #ffe74c, #7be0a4, #e01fd0); --party-grad: linear-gradient(135deg, #ff3df0 0%, #c04fff 50%, #4fc3ff 100%); --party-confetti-opacity: .55; --party-orb-1: #f0c2f2; --party-orb-2: #c9e0ff; } html[data-theme="dark"][data-skin="birthday"] { --t-bg: #180a20; --t-bg-2: #1d0e28; --t-surface: #22102e; --t-surface-2: #2c1640; --t-surface-3: #38204f; --t-border: #4a2a63; --t-border-soft: rgba(255,255,255,.07); --t-text: #fbeafc; --t-text-2: #c79fd8; --t-text-3: #a58db0; --t-accent: #ff3df0; --t-accent-strong: #e01fd0; --t-accent-ink: #26061f; --t-accent-soft: rgba(255,61,240,.16); --t-accent-glow: rgba(255,61,240,.36); --t-bubble-mine: #b71eaf; --t-bubble-mine-text: #ffe6fb; --t-bubble-theirs: #2b1c40; --t-bubble-theirs-text: #f1e6f7; --t-warn: #ffc24d; --t-tile: #2c1640; --t-scroll: rgba(255,61,240,.32); --party-stripe: linear-gradient(90deg, #ff3df0, #6fb7ff, #ffe74c, #7be0a4, #ff3df0); --party-grad: linear-gradient(135deg, #ff3df0 0%, #c04fff 50%, #4fc3ff 100%); --party-confetti-opacity: .35; --party-orb-1: #4a2a5a; --party-orb-2: #1a3a5a; } html[data-skin="birthday"] { --party-brand-suffix: " πŸŽ‚"; --party-icon-1: "🎈"; --party-icon-2: "πŸŽ‰"; --party-confetti: url("data:image/svg+xml;utf8,"); } /* ---- πŸŒ™ Eid (green & gold) ---- */ html[data-theme="light"][data-skin="eid"] { --t-bg: #f4fbf3; --t-bg-2: #eaf7e6; --t-surface: #ffffff; --t-surface-2: #eef9ec; --t-surface-3: #e1f3db; --t-border: #cdeac2; --t-border-soft: rgba(20,80,40,.08); --t-text: #173820; --t-text-2: #517059; --t-text-3: #517054; --t-accent: #1c8046; --t-accent-strong: #1a7842; --t-accent-ink: #ffffff; --t-accent-soft: rgba(28,128,70,0.14); --t-accent-glow: rgba(28,128,70,0.34); --t-bubble-mine: #1d8348; --t-bubble-mine-text: #ffffff; --t-bubble-theirs: #ffffff; --t-bubble-theirs-text: #173820; --t-warn: #d4a017; --t-shadow: 0 18px 44px rgba(20,80,40,.16); --t-shadow-sm: 0 6px 18px rgba(20,80,40,.12); --t-tile: #173820; --t-scroll: rgba(28,128,70,0.35); --party-stripe: linear-gradient(90deg, #1d8348, #d4af37, #f4e285, #1d8348); --party-grad: linear-gradient(135deg, #1d8348 0%, #2fa360 45%, #d4af37 100%); --party-confetti-opacity: .5; --party-orb-1: #bfe8c8; --party-orb-2: #f3dfa0; } html[data-theme="dark"][data-skin="eid"] { --t-bg: #0c1b12; --t-bg-2: #0f2116; --t-surface: #132b1c; --t-surface-2: #173524; --t-surface-3: #1d402c; --t-border: #2a4d35; --t-border-soft: rgba(255,255,255,.07); --t-text: #eafaf0; --t-text-2: #9fc3ab; --t-text-3: #92ac99; --t-accent: #35b56e; --t-accent-strong: #1d8348; --t-accent-ink: #06130b; --t-accent-soft: rgba(53,181,110,.16); --t-accent-glow: rgba(53,181,110,.34); --t-bubble-mine: #1f7a46; --t-bubble-mine-text: #f2fff6; --t-bubble-theirs: #1a3524; --t-bubble-theirs-text: #e9f8ee; --t-warn: #e8c158; --t-tile: #173524; --t-scroll: rgba(53,181,110,.32); --party-stripe: linear-gradient(90deg, #35b56e, #e8c158, #35b56e); --party-grad: linear-gradient(135deg, #1d8348 0%, #2b6b46 50%, #b9932f 100%); --party-confetti-opacity: .3; --party-orb-1: #1d4229; --party-orb-2: #4a3a1c; } html[data-skin="eid"] { --party-brand-suffix: " πŸŒ™"; --party-icon-1: "πŸͺ”"; --party-icon-2: "⭐"; --party-confetti: url("data:image/svg+xml;utf8,"); } /* ---- 🐐 Eid-ul-Adha (indigo & gold) ---- Deliberately not another green: the two Eids fall weeks apart and one must not look like a repeat of the other. Gold lives in the stripe and the orbs; the gradient stops are dark enough that the forced-white label on it stays readable (WCAG AA). */ html[data-theme="light"][data-skin="eid-adha"] { --t-bg: #f5f4ff; --t-bg-2: #edeaff; --t-surface: #ffffff; --t-surface-2: #f3f1ff; --t-surface-3: #e7e3ff; --t-border: #d5cffb; --t-border-soft: rgba(50,40,120,.08); --t-text: #1b1740; --t-text-2: #5a539b; --t-text-3: #6259af; --t-accent: #4b3fb8; --t-accent-strong: #3b2f9e; --t-accent-ink: #ffffff; --t-accent-soft: rgba(75,63,184,.14); --t-accent-glow: rgba(75,63,184,.34); --t-bubble-mine: #4b3fb8; --t-bubble-mine-text: #ffffff; --t-bubble-theirs: #ffffff; --t-bubble-theirs-text: #1b1740; --t-warn: #b8860b; --t-shadow: 0 18px 44px rgba(50,40,120,.16); --t-shadow-sm: 0 6px 18px rgba(50,40,120,.12); --t-tile: #1b1740; --t-scroll: rgba(75,63,184,.35); --party-stripe: linear-gradient(90deg, #3b2f9e, #d4af37, #f4e285, #3b2f9e); --party-grad: linear-gradient(135deg, #3b2f9e 0%, #5a49c9 45%, #8a6a12 100%); --party-confetti-opacity: .5; --party-orb-1: #d9d3ff; --party-orb-2: #f0dfa6; } html[data-theme="dark"][data-skin="eid-adha"] { --t-bg: #0f0e22; --t-bg-2: #131132; --t-surface: #181634; --t-surface-2: #1d1b40; --t-surface-3: #24224f; --t-border: #302d5e; --t-border-soft: rgba(255,255,255,.07); --t-text: #ece9ff; --t-text-2: #a49cd8; --t-text-3: #928cb9; --t-accent: #9b8cf5; --t-accent-strong: #4b3fb8; --t-accent-ink: #12102b; --t-accent-soft: rgba(155,140,245,.16); --t-accent-glow: rgba(155,140,245,.34); --t-bubble-mine: #463aa8; --t-bubble-mine-text: #f4f2ff; --t-bubble-theirs: #1b1940; --t-bubble-theirs-text: #eae7ff; --t-warn: #e8c158; --t-tile: #1d1b40; --t-scroll: rgba(155,140,245,.32); --party-stripe: linear-gradient(90deg, #9b8cf5, #e8c158, #9b8cf5); --party-grad: linear-gradient(135deg, #2f2580 0%, #4b3fb8 50%, #7d600f 100%); --party-confetti-opacity: .3; --party-orb-1: #262254; --party-orb-2: #4a3a1c; } html[data-skin="eid-adha"] { --party-brand-suffix: " 🐐"; --party-icon-1: "πŸ•Œ"; --party-icon-2: "✨"; --party-confetti: url("data:image/svg+xml;utf8,"); } /* ---- πŸͺ… Pohela Boishakh (red & white) ---- */ html[data-theme="light"][data-skin="pohela-boishakh"] { --t-bg: #fff6ee; --t-bg-2: #ffefe0; --t-surface: #ffffff; --t-surface-2: #fff1e6; --t-surface-3: #ffe6d2; --t-border: #f8d8bf; --t-border-soft: rgba(120,20,20,.08); --t-text: #3a1c0a; --t-text-2: #8f5b37; --t-text-3: #885e40; --t-accent: #cd380a; --t-accent-strong: #c23509; --t-accent-ink: #ffffff; --t-accent-soft: rgba(205,56,10,0.14); --t-accent-glow: rgba(205,56,10,0.3); --t-bubble-mine: #d53b0f; --t-bubble-mine-text: #ffffff; --t-bubble-theirs: #ffffff; --t-bubble-theirs-text: #3a1210; --t-warn: #f0a531; --t-shadow: 0 18px 44px rgba(150,30,30,.16); --t-shadow-sm: 0 6px 18px rgba(150,30,30,.12); --t-tile: #3a1c0a; --t-scroll: rgba(205,56,10,0.35); --party-stripe: linear-gradient(90deg, #ff8a3d, #ffb347, #f4511e, #ff8a3d); --party-grad: linear-gradient(135deg, #ff8a3d 0%, #ffb347 50%, #f4511e 100%); --party-confetti-opacity: .55; --party-orb-1: #ffe0b8; --party-orb-2: #ffd0a0; } html[data-theme="dark"][data-skin="pohela-boishakh"] { --t-bg: #1e1206; --t-bg-2: #241708; --t-surface: #2a1a0c; --t-surface-2: #341f0e; --t-surface-3: #402713; --t-border: #5a3a1e; --t-border-soft: rgba(255,255,255,.07); --t-text: #fff0e2; --t-text-2: #d8a878; --t-text-3: #b68f70; --t-accent: #ff8a3d; --t-accent-strong: #f4511e; --t-accent-ink: #2a1206; --t-accent-soft: rgba(255,138,61,.16); --t-accent-glow: rgba(255,138,61,.36); --t-bubble-mine: #af501d; --t-bubble-mine-text: #fff0e0; --t-bubble-theirs: #3a1c18; --t-bubble-theirs-text: #f8e3e0; --t-warn: #ffc24d; --t-tile: #341f0e; --t-scroll: rgba(255,138,61,.32); --party-stripe: linear-gradient(90deg, #ff8a3d, #ffb347, #f4511e, #ff8a3d); --party-grad: linear-gradient(135deg, #ff8a3d 0%, #ffb347 50%, #f4511e 100%); --party-confetti-opacity: .32; --party-orb-1: #4a2a14; --party-orb-2: #4a3a1c; } html[data-skin="pohela-boishakh"] { --party-brand-suffix: " πŸͺ…"; --party-icon-1: "🌺"; --party-icon-2: "🎊"; --party-confetti: url("data:image/svg+xml;utf8,"); } /* ---- 🌼 Pohela Falgun (Bengali spring β€” marigold & new leaf) ---- Bashonti yellow on the chrome (bright marigold chips/tabs with dark ink), deep marigold for the big colour fields (my bubbles, send button) so the cream text stays readable β€” every pairing here passes WCAG AA. */ html[data-theme="light"][data-skin="pohela-falgun"] { --t-bg: #fffaf0; --t-bg-2: #fff4e0; --t-surface: #ffffff; --t-surface-2: #fff6e7; --t-surface-3: #ffeed6; --t-border: #f2ddb8; --t-border-soft: rgba(120,80,10,.08); --t-text: #33240c; --t-text-2: #7a6234; --t-text-3: #7c6841; --t-accent: #9a660a; --t-accent-strong: #8f5f09; --t-accent-ink: #ffffff; --t-accent-soft: rgba(154,102,10,0.16); --t-accent-glow: rgba(154,102,10,0.38); --t-bubble-mine: #9f5f0c; --t-bubble-mine-text: #fff6e6; --t-bubble-theirs: #ffffff; --t-bubble-theirs-text: #33240c; --t-warn: #c96f14; --t-shadow: 0 18px 44px rgba(140,90,20,.16); --t-shadow-sm: 0 6px 18px rgba(140,90,20,.12); --t-tile: #33240c; --t-scroll: rgba(154,102,10,0.35); --party-stripe: linear-gradient(90deg, #f0a92b, #7fb069, #f7d06b, #e05a2b, #f0a92b); --party-grad: linear-gradient(135deg, #b06a12 0%, #8f5510 100%); --party-confetti-opacity: .5; --party-orb-1: #ffe6b8; --party-orb-2: #cfe6b8; } html[data-theme="dark"][data-skin="pohela-falgun"] { --t-bg: #1b150c; --t-bg-2: #20180d; --t-surface: #241b0f; --t-surface-2: #2c2113; --t-surface-3: #372a18; --t-border: #4a381e; --t-border-soft: rgba(255,255,255,.07); --t-text: #f7ecd6; --t-text-2: #c0ab86; --t-text-3: #a69472; --t-accent: #f2b23e; --t-accent-strong: #d99a22; --t-accent-ink: #241a08; --t-accent-soft: rgba(242,178,62,.16); --t-accent-glow: rgba(242,178,62,.34); --t-bubble-mine: #9c5a0d; --t-bubble-mine-text: #fff4e2; --t-bubble-theirs: #2c2113; --t-bubble-theirs-text: #f4ead6; --t-warn: #ffc24d; --t-tile: #2c2113; --t-scroll: rgba(242,178,62,.32); --party-stripe: linear-gradient(90deg, #f2b23e, #7fb069, #f2b23e); --party-grad: linear-gradient(135deg, #8f5510 0%, #6d3f06 100%); --party-confetti-opacity: .3; --party-orb-1: #4a3818; --party-orb-2: #2f4128; } html[data-skin="pohela-falgun"] { --party-brand-suffix: " 🌼"; --party-icon-1: "🌼"; --party-icon-2: "πŸ¦‹"; --party-confetti: url("data:image/svg+xml;utf8,"); } /* ---- πŸ•ŠοΈ Language Day (Amar Ekushey β€” 21 February) ---- Ink black, paper white and the Shaheed Minar red. Deliberately quieter than the other skins: a sparse dot pattern instead of confetti, no coloured stripe marquee, and app.js suppresses the confetti burst for this skin. */ html[data-theme="light"][data-skin="language-day"] { --t-bg: #f6f4f1; --t-bg-2: #efedea; --t-surface: #ffffff; --t-surface-2: #f1efeb; --t-surface-3: #e7e4df; --t-border: #dcd7d0; --t-border-soft: rgba(20,20,24,.08); --t-text: #141416; --t-text-2: #5f5c58; --t-text-3: #67635e; --t-accent: #1a1a1c; --t-accent-strong: #000000; --t-accent-ink: #ffffff; --t-accent-soft: rgba(20,20,24,.08); --t-accent-glow: rgba(179,38,30,.26); --t-bubble-mine: #b3261e; --t-bubble-mine-text: #ffffff; --t-bubble-theirs: #ffffff; --t-bubble-theirs-text: #141416; --t-warn: #a86500; --t-shadow: 0 18px 44px rgba(20,20,24,.16); --t-shadow-sm: 0 6px 18px rgba(20,20,24,.12); --t-tile: #141416; --t-scroll: rgba(179,38,30,.32); --party-stripe: linear-gradient(90deg, #111111, #ffffff, #b3261e, #ffffff, #111111); --party-grad: linear-gradient(135deg, #26262a 0%, #b3261e 100%); --party-confetti-opacity: .22; --party-orb-1: #dedbd5; --party-orb-2: #e8c9c6; } html[data-theme="dark"][data-skin="language-day"] { --t-bg: #151515; --t-bg-2: #191919; --t-surface: #1c1c1c; --t-surface-2: #232323; --t-surface-3: #2c2c2c; --t-border: #363636; --t-border-soft: rgba(255,255,255,.07); --t-text: #f2f0ec; --t-text-2: #b6b2ac; --t-text-3: #999691; --t-accent: #e8e4de; --t-accent-strong: #ffffff; --t-accent-ink: #16161a; --t-accent-soft: rgba(232,228,222,.14); --t-accent-glow: rgba(224,72,60,.30); --t-bubble-mine: #c0392b; --t-bubble-mine-text: #ffffff; --t-bubble-theirs: #242424; --t-bubble-theirs-text: #f0ede8; --t-warn: #e0a33c; --t-tile: #232323; --t-scroll: rgba(232,228,222,.22); --party-stripe: linear-gradient(90deg, #e8e4de, #b3261e, #e8e4de); --party-grad: linear-gradient(135deg, #8f2118 0%, #c0392b 100%); --party-confetti-opacity: .16; --party-orb-1: #2a2a2a; --party-orb-2: #3a2320; } html[data-skin="language-day"] { --party-brand-suffix: " πŸ•ŠοΈ"; --party-icon-1: "πŸ•ŠοΈ"; --party-icon-2: "🀍"; --party-confetti: url("data:image/svg+xml;utf8,"); } /* ---- πŸŽ–οΈ Victory Day (Bangladesh flag green & red) ---- */ html[data-theme="light"][data-skin="victory-day"] { --t-bg: #f4f7ec; --t-bg-2: #eef3df; --t-surface: #ffffff; --t-surface-2: #eff3e4; --t-surface-3: #e6edd4; --t-border: #d6e0b8; --t-border-soft: rgba(10,60,30,.08); --t-text: #20290f; --t-text-2: #5a6a3a; --t-text-3: #616a53; --t-accent: #517921; --t-accent-strong: #4d731f; --t-accent-ink: #ffffff; --t-accent-soft: rgba(81,121,33,0.14); --t-accent-glow: rgba(81,121,33,0.3); --t-bubble-mine: #4a6f1c; --t-bubble-mine-text: #ffffff; --t-bubble-theirs: #ffffff; --t-bubble-theirs-text: #102417; --t-warn: #f0a531; --t-shadow: 0 18px 44px rgba(0,60,40,.16); --t-shadow-sm: 0 6px 18px rgba(0,60,40,.12); --t-tile: #20290f; --t-scroll: rgba(81,121,33,0.35); --party-stripe: linear-gradient(90deg, #2f7d3f, #c8102e, #2f7d3f); --party-grad: linear-gradient(135deg, #2f7d3f 0%, #6f8a2f 50%, #c8102e 100%); --party-confetti-opacity: .5; --party-orb-1: #cfe0b0; --party-orb-2: #f0c0c8; } html[data-theme="dark"][data-skin="victory-day"] { --t-bg: #0a1408; --t-bg-2: #0d1a0a; --t-surface: #12200e; --t-surface-2: #17280f; --t-surface-3: #1e3314; --t-border: #2a4a1e; --t-border-soft: rgba(255,255,255,.07); --t-text: #eef6e2; --t-text-2: #9fb87f; --t-text-3: #88a06d; --t-accent: #7fae3f; --t-accent-strong: #5c8a26; --t-accent-ink: #10200a; --t-accent-soft: rgba(127,174,63,.16); --t-accent-glow: rgba(214,28,57,.42); --t-bubble-mine: #3f5f1f; --t-bubble-mine-text: #eaf5d8; --t-bubble-theirs: #132d1c; --t-bubble-theirs-text: #e4f6ea; --t-warn: #ffc24d; --t-tile: #17280f; --t-scroll: rgba(127,174,63,.32); --party-stripe: linear-gradient(90deg, #1e6b3a, #d61c39, #1e6b3a); --party-grad: linear-gradient(135deg, #1e6b3a 0%, #4a6b1f 50%, #d61c39 100%); --party-confetti-opacity: .3; --party-orb-1: #1d4229; --party-orb-2: #4a1c22; } html[data-skin="victory-day"] { --party-brand-suffix: " πŸŽ–οΈ"; --party-icon-1: "πŸ‡§πŸ‡©"; --party-icon-2: "πŸŽ–οΈ"; --party-confetti: url("data:image/svg+xml;utf8,"); } /* ---- πŸ‡§πŸ‡© Independence Day (crimson & green, 26 March) ---- Deliberately red-forward so it is not a copy of Victory Day's green-forward palette β€” the two national days are four months apart and should not look identical. */ html[data-theme="light"][data-skin="independence-day"] { --t-bg: #fff5f6; --t-bg-2: #ffe9ec; --t-surface: #ffffff; --t-surface-2: #fff0f2; --t-surface-3: #ffdfe4; --t-border: #f8ccd3; --t-border-soft: rgba(120,10,30,.08); --t-text: #3a0d16; --t-text-2: #8c4a58; --t-text-3: #8e5460; --t-accent: #c8102e; --t-accent-strong: #a50d26; --t-accent-ink: #ffffff; --t-accent-soft: rgba(200,16,46,.14); --t-accent-glow: rgba(200,16,46,.34); --t-bubble-mine: #c8102e; --t-bubble-mine-text: #ffffff; --t-bubble-theirs: #ffffff; --t-bubble-theirs-text: #3a0d16; --t-warn: #b8860b; --t-shadow: 0 18px 44px rgba(130,10,30,.16); --t-shadow-sm: 0 6px 18px rgba(130,10,30,.12); --t-tile: #3a0d16; --t-scroll: rgba(200,16,46,.35); --party-stripe: linear-gradient(90deg, #c8102e, #006a4e, #c8102e); --party-grad: linear-gradient(135deg, #a50d26 0%, #c8102e 45%, #006a4e 100%); --party-confetti-opacity: .5; --party-orb-1: #ffd3d9; --party-orb-2: #bfe0cf; } html[data-theme="dark"][data-skin="independence-day"] { --t-bg: #1d0b10; --t-bg-2: #251016; --t-surface: #2a1118; --t-surface-2: #34161f; --t-surface-3: #411b26; --t-border: #542430; --t-border-soft: rgba(255,255,255,.07); --t-text: #ffe9ec; --t-text-2: #d49aa4; --t-text-3: #af868f; --t-accent: #ff4d63; --t-accent-strong: #d61c39; --t-accent-ink: #28060d; --t-accent-soft: rgba(255,77,99,.16); --t-accent-glow: rgba(255,77,99,.34); --t-bubble-mine: #b81029; --t-bubble-mine-text: #fff1f3; --t-bubble-theirs: #2f141c; --t-bubble-theirs-text: #ffe9ec; --t-warn: #ffc24d; --t-tile: #34161f; --t-scroll: rgba(255,77,99,.32); --party-stripe: linear-gradient(90deg, #ff4d63, #1e9c6b, #ff4d63); --party-grad: linear-gradient(135deg, #8e0b20 0%, #b81029 50%, #00543e 100%); --party-confetti-opacity: .3; --party-orb-1: #43141d; --party-orb-2: #123022; } html[data-skin="independence-day"] { --party-brand-suffix: " πŸ‡§πŸ‡©"; --party-icon-1: "πŸ‡§πŸ‡©"; --party-icon-2: "🌺"; --party-confetti: url("data:image/svg+xml;utf8,"); } /* ---- ❄️ Winter (blue & white) ---- */ html[data-theme="light"][data-skin="winter"] { --t-bg: #f3f9ff; --t-bg-2: #e9f3fc; --t-surface: #ffffff; --t-surface-2: #edf6fd; --t-surface-3: #dcecf9; --t-border: #c9e1f6; --t-border-soft: rgba(10,50,90,.08); --t-text: #0f2438; --t-text-2: #526980; --t-text-3: #4f6982; --t-accent: #136be0; --t-accent-strong: #1164d3; --t-accent-ink: #ffffff; --t-accent-soft: rgba(19,107,224,0.14); --t-accent-glow: rgba(19,107,224,0.34); --t-bubble-mine: #1170e1; --t-bubble-mine-text: #ffffff; --t-bubble-theirs: #ffffff; --t-bubble-theirs-text: #0f2438; --t-warn: #f0a531; --t-shadow: 0 18px 44px rgba(20,60,110,.16); --t-shadow-sm: 0 6px 18px rgba(20,60,110,.12); --t-tile: #0f2438; --t-scroll: rgba(19,107,224,0.35); --party-stripe: linear-gradient(90deg, #2f80ed, #ffffff, #8fd3ff, #ffffff, #2f80ed); --party-grad: linear-gradient(135deg, #2f80ed 0%, #56ccf2 45%, #a8e6ff 100%); --party-confetti-opacity: .55; --party-orb-1: #cfe8ff; --party-orb-2: #eaf6ff; } html[data-theme="dark"][data-skin="winter"] { --t-bg: #0a1420; --t-bg-2: #0d1a28; --t-surface: #102033; --t-surface-2: #13263d; --t-surface-3: #182f49; --t-border: #234061; --t-border-soft: rgba(255,255,255,.07); --t-text: #eaf4ff; --t-text-2: #9db9d6; --t-text-3: #819bb7; --t-accent: #5aa9f5; --t-accent-strong: #2f80ed; --t-accent-ink: #06121e; --t-accent-soft: rgba(90,169,245,.16); --t-accent-glow: rgba(90,169,245,.34); --t-bubble-mine: #2d6ec2; --t-bubble-mine-text: #eef7ff; --t-bubble-theirs: #13263d; --t-bubble-theirs-text: #e4f0fb; --t-warn: #ffc24d; --t-tile: #13263d; --t-scroll: rgba(90,169,245,.32); --party-stripe: linear-gradient(90deg, #5aa9f5, #fff, #5aa9f5); --party-grad: linear-gradient(135deg, #1f4e8a 0%, #2d6bb0 50%, #4a9fd8 100%); --party-confetti-opacity: .35; --party-orb-1: #163249; --party-orb-2: #1d3a52; } html[data-skin="winter"] { --party-brand-suffix: " ❄️"; --party-icon-1: "❄️"; --party-icon-2: "β›„"; --party-confetti: url("data:image/svg+xml;utf8,"); } /* ---- πŸ’— Love (Valentine / β€œfor someone special”) ---- Rose and blush rather than the deep red of a generic Valentine template: the dark skin keeps the same rose so a phone in dark mode still reads as the same gift. Sent as a surprise by the owner (see loveGift/ in the rules and the β€œLove surprise” card in Owner dashboard β†’ Appearance). */ html[data-theme="light"][data-skin="love"] { --t-bg: #fff0f4; --t-bg-2: #ffe1ea; --t-surface: #fffafb; --t-surface-2: #fff0f5; --t-surface-3: #ffe2ec; --t-border: #f7c2d4; --t-border-soft: rgba(180,40,90,.10); --t-text: #3a1020; --t-text-2: #7c4457; --t-text-3: #8b5866; --t-accent: #cb2863; --t-accent-strong: #c42660; --t-accent-ink: #ffffff; --t-accent-soft: rgba(203,40,99,0.15); --t-accent-glow: rgba(203,40,99,0.34); --t-bubble-mine: #a11d51; --t-bubble-mine-text: #fff2f6; --t-bubble-theirs: #fffafb; --t-bubble-theirs-text: #3a1020; --t-warn: #a8531a; --t-shadow: 0 18px 44px rgba(190,35,95,.20); --t-shadow-sm: 0 6px 18px rgba(190,35,95,.14); --t-tile: #3a1020; --t-scroll: rgba(203,40,99,0.36); --party-stripe: linear-gradient(90deg, #d62f6b, #ffb0c8, #9c1a4c, #ff86ac, #d62f6b); --party-grad: linear-gradient(135deg, #ef4d84 0%, #cf2f68 48%, #8f1d4a 100%); --party-confetti-opacity: .6; --party-orb-1: #ffd0df; --party-orb-2: #ffe4ec; } html[data-theme="dark"][data-skin="love"] { --t-bg: #190b10; --t-bg-2: #1f1119; --t-surface: #26141c; --t-surface-2: #2e1a23; --t-surface-3: #3a2029; --t-border: #522a39; --t-border-soft: rgba(255,214,232,.08); --t-text: #ffe9ef; --t-text-2: #d3a6b4; --t-text-3: #aa8995; --t-accent: #ff80ab; --t-accent-strong: #ff5c93; --t-accent-ink: #2a0d18; --t-accent-soft: rgba(255,128,171,.17); --t-accent-glow: rgba(255,128,171,.36); --t-bubble-mine: #b82a5e; --t-bubble-mine-text: #ffe9ef; --t-bubble-theirs: #2e1a23; --t-bubble-theirs-text: #ffe9ef; --t-warn: #ffb3c1; --t-tile: #2e1a23; --t-scroll: rgba(255,128,171,.34); --party-stripe: linear-gradient(90deg, #ff80ab, #b82a5e, #ff9dc4); --party-grad: linear-gradient(135deg, #d63a6f 0%, #a11d51 58%, #7d1c3e 100%); --party-confetti-opacity: .34; --party-orb-1: #4a2233; --party-orb-2: #3a1f2b; } html[data-skin="love"] { --party-brand-suffix: " πŸ’—"; --party-icon-1: "πŸ’—"; --party-icon-2: "πŸ’ž"; --party-confetti: url("data:image/svg+xml;utf8,"); } /* ---- πŸ’— Love: the parts of the app that are not emoji ---- The icon swap in app.js handles everything that is a character; this is the rest β€” the four SVG nav icons, the send button and the message bubbles. All of it is scoped to [data-skin="love"], so turning the skin off restores the app exactly. */ html[data-skin="love"] .bottom-nav-btn svg { color: var(--t-accent); } html[data-skin="love"] .bottom-nav-btn.active svg { animation: love-nav-beat 2.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { html[data-skin="love"] .bottom-nav-btn.active svg { animation: none; } } @keyframes love-nav-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.14); } 24% { transform: scale(1); } } /* the send button becomes a letter, and gives a little beat */ html[data-skin="love"] #send-btn { color: var(--t-accent-ink); } html[data-skin="love"] #send-btn:not([disabled]) { animation: love-nav-beat 2.8s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { html[data-skin="love"] #send-btn:not([disabled]) { animation: none; } } /* your own messages carry a heart in the corner */ html[data-skin="love"] .msg-bubble.mine { position: relative; } html[data-skin="love"] .msg-bubble.mine::after { content: "πŸ’—"; position: absolute; right: -5px; bottom: -6px; font-size: 11px; line-height: 1; opacity: .85; pointer-events: none; } html[data-skin="love"] .msg-bubble.mine.deleted::after { content: none; } /* a slow heartbeat on the brand mark, so the app feels alive */ html[data-skin="love"] .brand-lockup::after, html[data-skin="love"] .auth-mobile-brand::before { filter: drop-shadow(0 0 6px var(--t-accent-glow)); } /* ---- πŸ’— love, extra romantic: their name in soft handwriting + a little heart, and gently floating hearts ---- */ .love-hearts { display: none; } html[data-skin="love"] #chat-name { font-family: 'Caveat', 'Segoe Script', 'Brush Script MT', cursive; font-size: 1.25em; font-weight: 600; line-height: 1.05; color: var(--t-accent); letter-spacing: 0; } html[data-skin="love"] #chat-name::after { content: " πŸ’—"; font-size: .7em; } html[data-skin="love"] .love-hearts { display: block; position: fixed; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; } html[data-skin="love"] .love-hearts span { position: absolute; bottom: -34px; left: 0; opacity: 0; will-change: transform, opacity; animation: love-drift linear infinite; } html[data-skin="love"] .love-hearts span:nth-child(1) { left: 6%; font-size: 17px; animation-duration: 15s; animation-delay: 0s; } html[data-skin="love"] .love-hearts span:nth-child(2) { left: 21%; font-size: 12px; animation-duration: 20s; animation-delay: -7s; } html[data-skin="love"] .love-hearts span:nth-child(3) { left: 44%; font-size: 14px; animation-duration: 23s; animation-delay: -13s; } html[data-skin="love"] .love-hearts span:nth-child(4) { left: 63%; font-size: 11px; animation-duration: 18s; animation-delay: -4s; } html[data-skin="love"] .love-hearts span:nth-child(5) { left: 80%; font-size: 19px; animation-duration: 25s; animation-delay: -10s; } html[data-skin="love"] .love-hearts span:nth-child(6) { left: 92%; font-size: 13px; animation-duration: 21s; animation-delay: -16s; } @keyframes love-drift { 0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); opacity: 0; } 10% { opacity: .14; } 50% { transform: translate3d(16px,-52vh,0) rotate(16deg) scale(1.06); } 90% { opacity: .10; } 100% { transform: translate3d(-12px,-114vh,0) rotate(-12deg) scale(1.12); opacity: 0; } } @media (prefers-reduced-motion: reduce) { html[data-skin="love"] .love-hearts { display: none; } } /* confetti sprinkled over the app background (tiny SVG, data URI) β€” same rules for any active skin */ html[data-skin] .page, html[data-skin] #screen-login.screen.centered { background-color: var(--t-bg); background-image: var(--party-confetti); background-size: 160px 160px; } html[data-skin] .page::before { content: none; } /* soften the pattern so text stays readable */ html[data-skin] .sidebar, html[data-skin] .chat-view, html[data-skin] .chat-header, html[data-skin] .modal, html[data-skin] .login-box { position: relative; } /* washed-out sprinkle behind the messages (a chat wallpaper set by the user still wins: it is an inline style) */ html[data-skin] .messages, html[data-skin] #messages { background-color: var(--t-bg); background-image: linear-gradient(color-mix(in srgb, var(--t-bg) 58%, transparent), color-mix(in srgb, var(--t-bg) 58%, transparent)), var(--party-confetti); background-size: auto, 160px 160px; background-position: 0 0; background-repeat: repeat; } /* festive stripe along the top of the sidebar and the chat header */ html[data-skin] .sidebar { background: var(--party-stripe) top / 100% 4px no-repeat, var(--t-surface); } html[data-skin] .chat-header { background: var(--party-stripe) top / 100% 4px no-repeat, var(--t-surface); } html[data-skin] .chat-view .chat-header { padding-top: calc(10px + 4px); } /* brand gets a skin-matching emoji; the empty state throws a little party */ html[data-skin] .sidebar-topbar .title::after, html[data-skin] .brand-lockup .brand-name::after, html[data-skin] .auth-mobile-brand > span::after { content: var(--party-brand-suffix); font-size: .9em; } html[data-skin] .empty-state .empty-icon { position: relative; } html[data-skin] .empty-state .empty-icon::before, html[data-skin] .empty-state .empty-icon::after { content: var(--party-icon-1); position: absolute; top: -8px; font-size: 30px; line-height: 1; animation: party-float 4.5s ease-in-out infinite; } html[data-skin] .empty-state .empty-icon::before { left: -46px; } html[data-skin] .empty-state .empty-icon::after { right: -46px; animation-delay: -2.2s; content: var(--party-icon-2); } @keyframes party-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-12px) rotate(5deg); } } /* gradient for my bubbles, the send button, primary buttons and the FAB */ html[data-skin] .msg-row.mine .msg-bubble, html[data-skin] .msg-bubble.mine { background: var(--party-grad); color: #fff; } html[data-skin] .send-btn, html[data-skin] .fab, html[data-skin] .button:not(.secondary):not(.ghost):not(.danger), html[data-skin] #screen-login .tab-btn.active, html[data-skin] .modal-tabs .tab-btn.active, html[data-skin] .bottom-nav-btn.active::before { background: var(--party-grad) !important; color: #fff !important; } html[data-skin] .bottom-nav-btn.active { color: var(--t-accent); } html[data-skin] .story-ring { background: var(--party-stripe); } html[data-skin] .avatar.small.clickable, html[data-skin] #avatar-me { box-shadow: 0 0 0 2px var(--t-surface), 0 0 0 4px var(--t-accent); } /* login screen: skin-matching orbs instead of mint */ html[data-skin] .auth-orb-one { background: var(--party-orb-1); } html[data-skin] .auth-orb-two { background: var(--party-orb-2); } /* settings row state */ html[data-skin="birthday"] #birthday-toggle-btn .chat-settings-row-sub { color: var(--t-accent); font-weight: 700; } html[data-skin]:not([data-skin="birthday"]) #festive-skin-toggle-btn .chat-settings-row-sub { color: var(--t-accent); font-weight: 700; } /* confetti burst layer (created by app.js) */ #confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9; overflow: hidden; } #confetti-layer i { position: absolute; top: -14px; display: block; opacity: .95; will-change: transform; animation: confetti-fall 3s linear forwards; } @keyframes confetti-fall { 0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate3d(var(--drift, 0px), 105vh, 0) rotate(var(--spin, 360deg)); opacity: .2; } } @media (prefers-reduced-motion: reduce) { #confetti-layer { display: none; } html[data-skin] .empty-state .empty-icon::before, html[data-skin] .empty-state .empty-icon::after { animation: none; } } /* same washed-out sprinkle behind the empty state / chat panel */ html[data-skin] .chat-panel { background-color: var(--t-bg); background-image: linear-gradient(color-mix(in srgb, var(--t-bg) 58%, transparent), color-mix(in srgb, var(--t-bg) 58%, transparent)), var(--party-confetti); background-size: auto, 160px 160px; } /* ---- πŸŽ‚ Birthday theme: owner controls (Owner dashboard) ---- */ .bday-admin { margin: 12px 0 14px; padding: 12px; border: 1px solid var(--t-border); border-radius: 14px; background: var(--t-surface); } .bday-admin .audit-head { margin: 0 0 10px; } .bday-admin-summary { font-size: 12px; font-weight: 700; color: var(--t-accent); } .bday-mode-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .bday-mode-btn { flex: 1 1 auto; min-height: 40px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--t-border); background: var(--t-surface-2); color: var(--t-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .bday-mode-btn[aria-checked="true"], .festive-mode-btn[aria-checked="true"], .festive-skin-choose-btn[aria-checked="true"] { background: var(--t-accent); border-color: var(--t-accent); color: #fff; } html[data-skin] .bday-mode-btn[aria-checked="true"], html[data-skin] .festive-mode-btn[aria-checked="true"], html[data-skin] .festive-skin-choose-btn[aria-checked="true"] { background: var(--party-grad); border-color: transparent; } .festive-skin-choose-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .festive-skin-choose-btn { flex: 1 1 auto; min-height: 40px; padding: 8px 10px; border-radius: 999px; border: 1px solid var(--t-border); background: var(--t-surface-2); color: var(--t-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; } .festive-mode-btn { flex: 1 1 auto; min-height: 40px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--t-border); background: var(--t-surface-2); color: var(--t-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .bday-selected-wrap { margin-bottom: 10px; } .bday-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .bday-chip { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; border-radius: 999px; border: 1px solid var(--t-border); background: var(--t-surface-2); color: var(--t-text); font-size: 12px; font-weight: 600; } .bday-chip button { border: 0; background: transparent; color: var(--t-text-2); font-size: 13px; line-height: 1; min-width: 28px; min-height: 28px; border-radius: 50%; cursor: pointer; padding: 0; } .bday-chip button:hover { background: var(--t-border-soft); color: var(--t-text); } .bday-chips-empty { font-size: 12px; color: var(--t-text-2); } .bday-add-row { display: flex; gap: 6px; align-items: stretch; } .bday-add-row .input { flex: 1 1 auto; min-width: 0; width: auto; margin: 0; } .bday-add-row .button { flex: 0 0 auto; width: auto; padding: 10px 16px; } .bday-optout { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--t-text); cursor: pointer; min-height: 32px; } .bday-optout input { width: 18px; height: 18px; accent-color: var(--t-accent); margin: 0; flex: 0 0 auto; } .bday-admin-hint { font-size: 11.5px; line-height: 1.45; color: var(--t-text-2); margin-top: 6px; } .manageusers-tag.bday { color: #ff4f9a; border-color: #ff4f9a; } .manageusers-tag.festive { color: var(--t-accent); border-color: var(--t-accent); } /* ---- πŸŽ‰ Festive skin: picker modal (Settings β†’ Festive skin) ---- */ .festive-skin-modal { padding: 0 22px 22px; display: flex; flex-direction: column; max-height: 86dvh; overflow: hidden; } .festive-skin-modal .modal-header { padding: 18px 0 12px; flex: 0 0 auto; } .skin-pick-list { display: flex; flex-direction: column; gap: 8px; } /* The list has grown (12 themes), so it must scroll inside the capped modal instead of pushing the header off-screen on a phone bottom-sheet. */ .festive-skin-modal .skin-pick-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 2px; } .skin-pick-btn { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--t-border); background: var(--t-surface-2); color: var(--t-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; } .skin-pick-btn[aria-checked="true"] { background: var(--t-accent-soft); border-color: var(--t-accent); color: var(--t-accent); } .skin-pick-emoji { font-size: 20px; flex: 0 0 auto; } .festive-skin-modal .bday-admin-hint { margin-top: 10px; } /* ---- 🎨 Custom accent colour: picker modal (Settings β†’ Accent colour) ---- */ .accent-modal { padding: 0 22px 22px; } .accent-modal .modal-header { padding: 18px 0 12px; } .accent-swatch-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; } .accent-swatch { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; border: 2px solid var(--t-border); cursor: pointer; padding: 0; background: var(--t-surface-2); } .accent-swatch.default-swatch { background: linear-gradient(135deg, #30c29e, #1fa888); } .accent-swatch-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 800; opacity: 0; text-shadow: 0 1px 3px rgba(0,0,0,.5); } .accent-swatch[aria-checked="true"] { border-color: var(--t-text); box-shadow: 0 0 0 2px var(--t-surface), 0 0 0 4px var(--t-accent); } .accent-swatch[aria-checked="true"] .accent-swatch-check { opacity: 1; } .accent-custom-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; color: var(--t-text); margin-bottom: 4px; } .accent-custom-row input[type="color"] { width: 44px; height: 32px; padding: 0; border: 1px solid var(--t-border); border-radius: 8px; background: none; cursor: pointer; } .accent-modal .bday-admin-hint { margin-top: 10px; } /* ---- πŸ”³ Invite link / profile QR codes ---- */ .qr-modal { position: relative; padding: 22px; max-width: 320px; text-align: center; } .qr-code-box { background: #fff; border-radius: 14px; padding: 16px; margin: 14px auto; width: fit-content; max-width: 100%; box-shadow: 0 2px 10px rgba(0,0,0,.08); } .qr-code-box svg { display: block; width: 220px; height: 220px; max-width: 100%; } .qr-link-text { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; color: var(--t-text-2); word-break: break-all; background: var(--t-surface-2); border-radius: 8px; padding: 8px 10px; margin-bottom: 14px; user-select: all; } /* ---- πŸ“² Install-app banner + instructions modal ---- */ .install-banner { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 0; } .install-banner.hidden { display: none; } .install-banner-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 9px 12px; border-radius: 14px; color: var(--t-accent-ink); background: linear-gradient(135deg, var(--t-accent) 0%, var(--t-accent-strong) 100%); box-shadow: 0 6px 18px var(--t-accent-glow); } .install-banner-icon { font-size: 20px; flex: 0 0 auto; } .install-banner-text { flex: 1 1 auto; min-width: 0; line-height: 1.3; font-size: 13px; font-weight: 600; } .install-banner-cta { flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 6px 12px; border: 0; border-radius: 999px; background: rgba(255,255,255,.3); color: inherit; cursor: pointer; white-space: nowrap; } .install-banner-cta:hover { filter: brightness(1.08); } .install-banner-dismiss { flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .75; cursor: pointer; font-size: 13px; line-height: 1; } .install-banner-dismiss:hover { opacity: 1; background: rgba(255,255,255,.18); } .install-modal { position: relative; padding: 22px; max-width: 360px; } .install-modal-body { margin: 14px 0 18px; } .install-steps { margin: 0 0 12px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--t-text); } .install-steps li::marker { color: var(--t-accent); font-weight: 700; } .install-step-icon { font-size: 14px; } .install-hint { font-size: 12px; color: var(--t-text-2); } /* ---- πŸ“£ Owner's pinned site-wide announcement banner ---- */ .announcement-banner { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 0; } .announcement-banner.hidden { display: none; } .announcement-banner-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 48px; padding: 9px 12px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #f0a93e 0%, #d97706 100%); box-shadow: 0 6px 18px rgba(217, 119, 6, .28); } .announcement-banner-icon { font-size: 20px; flex: 0 0 auto; } .announcement-banner-text { flex: 1 1 auto; min-width: 0; line-height: 1.35; font-size: 13px; font-weight: 600; white-space: pre-wrap; word-break: break-word; } .announcement-banner-dismiss { flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .8; cursor: pointer; font-size: 13px; line-height: 1; } .announcement-banner-dismiss:hover { opacity: 1; background: rgba(255,255,255,.18); } /* ---- πŸŽ‚ Birthday on autopilot ---- */ .birthday-banner { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 0; } .birthday-banner.hidden { display: none; } .birthday-banner-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 9px 12px; border: 0; border-radius: 14px; cursor: pointer; text-align: left; color: #fff; font: inherit; font-size: 13px; background: linear-gradient(135deg, #e0509a 0%, #c04fa6 50%, #7d5bd6 100%); box-shadow: 0 6px 18px rgba(224, 80, 154, .25); } .birthday-banner-row:hover { filter: brightness(1.05); } .birthday-banner-icon { font-size: 20px; flex: 0 0 auto; } .birthday-banner-text { flex: 1 1 auto; min-width: 0; line-height: 1.3; } .birthday-banner-text strong { font-weight: 800; } .birthday-banner-cta { flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.22); white-space: nowrap; } html[data-theme] .sidebar[data-filter="stories"] .birthday-banner { display: none; } .chat-row-bday { font-size: 13px; margin-left: 2px; } .chat-meta-bday { color: var(--t-accent); font-weight: 600; } .birthday-field { display: flex; gap: 8px; align-items: center; } .birthday-field .input { flex: 1 1 0; min-width: 0; width: auto; margin: 0; } .birthday-field select.input { appearance: auto; -webkit-appearance: menulist; padding-right: 8px; } .birthday-field .link-btn { flex: 0 0 auto; min-height: 32px; padding: 0 6px; } .birthday-hint { margin-top: 6px; } /* ---- round 9: cloud storage card in the owner dashboard ---- */ .media-admin .button { margin-top: 8px; } .media-admin .bday-admin-hint { margin-top: 0; } /* ---- πŸ“£ Owner's pinned announcement admin card ---- */ .announcement-textarea { width: 100%; margin: 10px 0 8px; resize: vertical; min-height: 54px; display: block; } .announcement-admin-actions { display: flex; gap: 8px; } .announcement-admin-actions .button { flex: 1 1 0; min-width: 0; margin-top: 0; } /* ---- πŸ•’ Scheduled broadcasts (Owner dashboard) ---- */ .broadcast-schedule-row { display: flex; gap: 6px; align-items: stretch; margin-top: 8px; } .broadcast-schedule-row .input { flex: 1 1 auto; min-width: 0; } .broadcast-schedule-row .button { flex: 0 0 auto; width: auto; padding: 0 14px; white-space: nowrap; } .scheduled-broadcasts-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .scheduled-broadcasts-empty { font-size: 12.5px; color: var(--t-text-3); padding: 6px 0; } .scheduled-broadcast-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--t-border); border-radius: 12px; background: var(--t-surface-2); } .scheduled-broadcast-text { font-size: 13px; color: var(--t-text); line-height: 1.4; white-space: pre-wrap; word-break: break-word; } .scheduled-broadcast-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .scheduled-broadcast-status { font-size: 11.5px; color: var(--t-text-2); } .scheduled-broadcast-status.status-sent { color: var(--t-accent); } .scheduled-broadcast-status.status-cancelled { text-decoration: line-through; } .send-status.sending { color: var(--t-accent); } /* ---- πŸ€– AI bot personality (Owner dashboard) ---- */ .botpersona-head { margin-top: 12px; } #botpersona-name-input { margin-bottom: 8px; } #botpersona-notes-input { width: 100%; margin: 0 0 8px; resize: vertical; min-height: 44px; display: block; } .botpersona-tone-btn, .botpersona-emoji-btn { flex: 1 1 auto; min-height: 40px; padding: 8px 10px; border-radius: 999px; border: 1px solid var(--t-border); background: var(--t-surface-2); color: var(--t-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; } .botpersona-tone-btn[aria-checked="true"], .botpersona-emoji-btn[aria-checked="true"] { background: var(--t-accent); border-color: var(--t-accent); color: #fff; } /* ===================================================================== πŸŽ‚ Birthdays this week (sidebar card, above Recent chats) Same seven-day window the birthday theme uses; names come from the profiles the app already has in memory. Hidden entirely when nobody has a birthday coming up β€” no empty card, no shimmer. ===================================================================== */ .birthday-week { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding: 8px 12px 0; font-size: 12.5px; line-height: 1.35; } .birthday-week.hidden { display: none; } .birthday-week-title { flex: 0 0 auto; font-weight: 700; color: var(--t-text-3); } .birthday-week-names { display: flex; flex-wrap: wrap; gap: 2px 10px; min-width: 0; } .birthday-week-name { border: 0; background: transparent; padding: 0; margin: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--t-accent); cursor: pointer; } .birthday-week-name em { font-style: normal; font-weight: 500; color: var(--t-text-3); } .birthday-week-name:hover, .birthday-week-name:focus-visible { text-decoration: underline; } .birthday-week-more { color: var(--t-text-3); } /* the Stories filter hides the birthday banner; the card follows it */ html[data-theme] .sidebar[data-filter="stories"] .birthday-week { display: none; } /* ===================================================================== πŸŽ‰ "N years on BetaChat" β€” the day you joined Same sidebar slot as the birthday banner, quieter: no call to action, it is a note to the person reading it. Colours come from the active skin, so it looks right under every theme. ===================================================================== */ .anniversary-banner { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 0; } .anniversary-banner.hidden { display: none; } .anniversary-banner-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 14px; background: color-mix(in srgb, var(--t-accent) 14%, var(--t-surface)); border: 1px solid color-mix(in srgb, var(--t-accent) 34%, transparent); } .anniversary-banner-icon { font-size: 20px; flex: 0 0 auto; } .anniversary-banner-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; } .anniversary-banner-text strong { font-size: 13px; font-weight: 700; color: var(--t-text); } .anniversary-banner-sub { font-size: 12px; color: var(--t-text-2); } html[data-theme] .sidebar[data-filter="stories"] .anniversary-banner { display: none; } /* ===================================================================== 🎀 Voice notes β€” the recording strip and the player in the bubble Colours come from the active skin, so a voice note looks right under every theme (birthday, festive, love) without its own rules. ===================================================================== */ .voice-strip { display: flex; align-items: center; gap: 8px; padding: 6px 8px 0; } .voice-strip.hidden { display: none; } .voice-dot { width: 9px; height: 9px; border-radius: 50%; background: #d2364a; flex: 0 0 auto; animation: voice-pulse 1.1s ease-in-out infinite; } .voice-time { font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 700; color: var(--t-text); min-width: 34px; } .voice-hint { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--t-text-2); } .voice-strip .button.small { padding: 4px 12px; font-size: 12px; } @keyframes voice-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .voice-dot { animation: none; } } .msg-audio { display: flex; align-items: center; gap: 9px; min-width: 168px; max-width: 100%; padding: 7px 11px; border: 1px solid var(--t-border); border-radius: 14px; background: color-mix(in srgb, var(--t-accent) 10%, transparent); color: inherit; font: inherit; cursor: pointer; } .msg-audio.playing { border-color: color-mix(in srgb, var(--t-accent) 55%, transparent); } .msg-audio-play { flex: 0 0 auto; font-size: 12px; line-height: 1; color: var(--t-accent); } .msg-audio-track { flex: 1 1 auto; height: 4px; min-width: 60px; border-radius: 999px; background: color-mix(in srgb, var(--t-text-3) 34%, transparent); overflow: hidden; } .msg-audio-fill { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--t-accent); transition: width .18s linear; } .msg-audio-time { flex: 0 0 auto; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--t-text-2); } .msg-audio-broken { font-size: 13px; color: var(--t-text-2); } @media (prefers-reduced-motion: reduce) { .msg-audio-fill { transition: none; } } /* While recording, the strip IS the composer: the message box, the attach buttons and the send arrow step aside, so the row reads as one thing β€” dot, clock, cancel, send. */ .composer.recording .attach-btn, .composer.recording #draft-input, .composer.recording #draft-count, .composer.recording #send-btn { display: none; } .composer.recording .voice-strip { flex: 1 1 auto; width: 100%; padding: 3px 4px 1px; } /* ===================================================================== v58 β€” new modern themes (Neon / Glass / Midnight) Same token contract as the festive skins above; each also gets its own send-sound in js/notify.js (THEME_TONES). ===================================================================== */ /* ---- ⚑ Neon (electric cyan + magenta) ---- */ html[data-theme="light"][data-skin="neon"] { --t-bg: #eef9ff; --t-bg-2: #e2f5ff; --t-surface: #ffffff; --t-surface-2: #f2fbff; --t-surface-3: #e6f6ff; --t-border: #cdeefb; --t-border-soft: rgba(0,120,200,.08); --t-text: #062a33; --t-text-2: #3a6a7a; --t-text-3: #53717f; --t-accent: #00779f; --t-accent-strong: #007198; --t-accent-ink: #ffffff; --t-accent-soft: rgba(0,119,159,0.14); --t-accent-glow: rgba(0,119,159,0.25); --t-bubble-mine: #007ca6; --t-bubble-mine-text: #ffffff; --t-bubble-theirs: #ffffff; --t-bubble-theirs-text: #062a33; --t-warn: #c98a00; --t-shadow: 0 18px 44px rgba(0,60,120,.16); --t-shadow-sm: 0 6px 18px rgba(0,60,120,.12); --t-tile: #062a33; --t-scroll: rgba(0,119,159,0.35); --party-stripe: linear-gradient(90deg, #00b8e0, #e040c8, #00b8e0); --party-grad: linear-gradient(135deg, #00b8e0 0%, #e040c8 100%); --party-confetti-opacity: .5; --party-orb-1: #bfeeff; --party-orb-2: #ffd0f2; } html[data-theme="dark"][data-skin="neon"] { --t-bg: #05070d; --t-bg-2: #090c16; --t-surface: #0b0f1c; --t-surface-2: #101528; --t-surface-3: #161c34; --t-border: #1b2340; --t-border-soft: rgba(0,229,255,.08); --t-text: #e6faff; --t-text-2: #7fd0e8; --t-text-3: #578fa8; --t-accent: #00e5ff; --t-accent-strong: #00b8d4; --t-accent-ink: #04121a; --t-accent-soft: rgba(0,229,255,.14); --t-accent-glow: rgba(255,0,229,.40); --t-bubble-mine: #0a5a66; --t-bubble-mine-text: #e6faff; --t-bubble-theirs: #101528; --t-bubble-theirs-text: #e6faff; --t-warn: #ffd23d; --t-shadow: 0 18px 44px rgba(0,0,0,.6); --t-shadow-sm: 0 6px 18px rgba(0,0,0,.5); --t-tile: #101528; --t-scroll: rgba(0,229,255,.35); --party-stripe: linear-gradient(90deg, #00e5ff, #ff00e5, #00e5ff); --party-grad: linear-gradient(135deg, #00e5ff 0%, #ff00e5 100%); --party-confetti-opacity: .4; --party-orb-1: #003a44; --party-orb-2: #3a0033; } html[data-skin="neon"] { --party-brand-suffix: " ⚑"; --party-icon-1: "πŸŽ›οΈ"; --party-icon-2: "✨"; --party-confetti: url("data:image/svg+xml;utf8,"); } /* ---- πŸͺ· Glass (frosted, glassmorphism) ---- */ html[data-theme="light"][data-skin="glass"] { --t-bg: #eef0f9; --t-bg-2: #e8eaf7; --t-surface: rgba(255,255,255,.72); --t-surface-2: rgba(255,255,255,.6); --t-surface-3: rgba(230,232,248,.9); --t-border: rgba(120,130,190,.22); --t-border-soft: rgba(90,100,160,.10); --t-text: #23283f; --t-text-2: #5a6080; --t-text-3: #5e6584; --t-accent: #4153ff; --t-accent-strong: #3e50fe; --t-accent-ink: #ffffff; --t-accent-soft: rgba(65,83,255,0.14); --t-accent-glow: rgba(65,83,255,0.3); --t-bubble-mine: #4f60ff; --t-bubble-mine-text: #ffffff; --t-bubble-theirs: rgba(255,255,255,.8); --t-bubble-theirs-text: #23283f; --t-warn: #c98a00; --t-shadow: 0 18px 44px rgba(60,70,140,.18); --t-shadow-sm: 0 6px 18px rgba(60,70,140,.12); --t-tile: #23283f; --t-scroll: rgba(65,83,255,0.35); --party-stripe: linear-gradient(90deg, #5b6bff, #a06bff, #6bc8ff, #5b6bff); --party-grad: linear-gradient(135deg, #5b6bff 0%, #a06bff 50%, #6bc8ff 100%); --party-confetti-opacity: .5; --party-orb-1: #dfe2ff; --party-orb-2: #d9c8ff; } html[data-theme="dark"][data-skin="glass"] { --t-bg: #101219; --t-bg-2: #141723; --t-surface: rgba(30,34,48,.72); --t-surface-2: rgba(38,42,60,.6); --t-surface-3: rgba(50,55,80,.8); --t-border: rgba(120,130,190,.20); --t-border-soft: rgba(150,160,220,.08); --t-text: #eef0fb; --t-text-2: #a8aec8; --t-text-3: #a0a4b5; --t-accent: #8b96ff; --t-accent-strong: #6b78f0; --t-accent-ink: #0e1018; --t-accent-soft: rgba(139,150,255,.16); --t-accent-glow: rgba(139,150,255,.32); --t-bubble-mine: #3a4488; --t-bubble-mine-text: #eef0fb; --t-bubble-theirs: rgba(38,42,60,.9); --t-bubble-theirs-text: #eef0fb; --t-warn: #e8c158; --t-shadow: 0 18px 44px rgba(0,0,0,.5); --t-shadow-sm: 0 6px 18px rgba(0,0,0,.4); --t-tile: #3a4488; --t-scroll: rgba(139,150,255,.35); --party-stripe: linear-gradient(90deg, #8b96ff, #c08bff, #7fd0ff, #8b96ff); --party-grad: linear-gradient(135deg, #6b78f0 0%, #a06bff 50%, #57b8e0 100%); --party-confetti-opacity: .4; --party-orb-1: #232a48; --party-orb-2: #322648; } html[data-skin="glass"] { --party-brand-suffix: " πŸͺ·"; --party-icon-1: "πŸͺŸ"; --party-icon-2: "✨"; --party-confetti: url("data:image/svg+xml;utf8,"); } /* ---- 🌌 Midnight (deep navy + gold) ---- */ html[data-theme="light"][data-skin="midnight"] { --t-bg: #f4f6fc; --t-bg-2: #eceffb; --t-surface: #ffffff; --t-surface-2: #f4f6fd; --t-surface-3: #e8ecfb; --t-border: #d3d9f0; --t-border-soft: rgba(60,70,140,.08); --t-text: #141a30; --t-text-2: #4a5378; --t-text-3: #5c6691; --t-accent: #8e6808; --t-accent-strong: #876307; --t-accent-ink: #ffffff; --t-accent-soft: rgba(142,104,8,0.14); --t-accent-glow: rgba(142,104,8,0.3); --t-bubble-mine: #956c08; --t-bubble-mine-text: #ffffff; --t-bubble-theirs: #ffffff; --t-bubble-theirs-text: #141a30; --t-warn: #c98a00; --t-shadow: 0 18px 44px rgba(40,50,110,.16); --t-shadow-sm: 0 6px 18px rgba(40,50,110,.12); --t-tile: #141a30; --t-scroll: rgba(142,104,8,0.35); --party-stripe: linear-gradient(90deg, #b8860b, #e8d9a0, #b8860b); --party-grad: linear-gradient(135deg, #23326b 0%, #3a2f6b 50%, #b8860b 100%); --party-confetti-opacity: .5; --party-orb-1: #dfe3f5; --party-orb-2: #f3e2b0; } html[data-theme="dark"][data-skin="midnight"] { --t-bg: #070b1a; --t-bg-2: #0a0f22; --t-surface: #10162e; --t-surface-2: #161e3c; --t-surface-3: #1c264c; --t-border: #24305c; --t-border-soft: rgba(245,197,66,.08); --t-text: #eef1fb; --t-text-2: #9aa5c8; --t-text-3: #8991b1; --t-accent: #f5c542; --t-accent-strong: #d4a017; --t-accent-ink: #1a1405; --t-accent-soft: rgba(245,197,66,.14); --t-accent-glow: rgba(245,197,66,.35); --t-bubble-mine: #1e2c58; --t-bubble-mine-text: #f5c542; --t-bubble-theirs: #161e3c; --t-bubble-theirs-text: #eef1fb; --t-warn: #f0a531; --t-shadow: 0 18px 44px rgba(0,0,0,.55); --t-shadow-sm: 0 6px 18px rgba(0,0,0,.45); --t-tile: #161e3c; --t-scroll: rgba(245,197,66,.32); --party-stripe: linear-gradient(90deg, #f5c542, #ffffff, #f5c542); --party-grad: linear-gradient(135deg, #1b2a5c 0%, #3a2f6b 50%, #f5c542 100%); --party-confetti-opacity: .4; --party-orb-1: #16234a; --party-orb-2: #3a2f14; } html[data-skin="midnight"] { --party-brand-suffix: " 🌌"; --party-icon-1: "πŸŒ™"; --party-icon-2: "⭐"; --party-confetti: url("data:image/svg+xml;utf8,"); }