/* !important is deliberate: confirmed with a real browser measurement that plenty of elements this toggles (.user-chip, .rail-btn, etc.) set their own `display` too - same specificity (one class each) means whichever rule is declared LATER in this file wins on a tie, so without this, "hidden" silently didn't hide anything on any element whose own base class happened to be declared after this one. A utility named "hidden" must always actually hide, full stop. */ .hidden { display: none !important; } /* ============================================================ THEME TOKENS Six themes total: light/dark, each with 3 selectable color variants (Mint/Ocean/Sunset) - picked from the theme button in the rail (and the login page's corner button). Every theme is glass: translucent surfaces + backdrop-filter blur (see "GLASS" further down) over a softly glowing gradient painted on , in both light and dark. Everything downstream reads only these variables, so a card, button or badge never needs its own theme-specific rule. `--accent-rgb`/`--info-rgb`/`--danger-rgb` are the same colors as --amber/--cyan/--red as bare "r, g, b" triplets, for spots that need a translucent tint of them (rgba(var(--accent-rgb), 0.15) etc.) rather than the solid color. `data-theme` + `data-variant` are set on by an inline script in (before first paint, so there's no flash) and again on pick by wireThemePicker() in app.js/login.js - see the theme button's popover menu. ============================================================ */ /* Bare fallback (no attributes yet, or JS disabled + light OS pref): light + Mint. */ :root { --bg: #F3F3F0; --surface: rgba(255,255,255,0.55); --surface-alt: rgba(255,255,255,0.75); --border: rgba(15,15,20,0.10); --text: #16171B; --text-muted: #5B5D68; --amber: #0E8F6E; --cyan: #2F80ED; --red: #E5484D; --on-accent: #FFFFFF; --shadow-rgb: 30, 30, 40; --accent-rgb: 14, 143, 110; --info-rgb: 47, 128, 237; --danger-rgb: 229, 72, 77; --glow1: rgba(14,143,110,0.16); --glow2: rgba(47,128,237,0.12); --glow3: rgba(168,92,246,0.10); --c-facebook: #4267B2; --c-instagram: #E1306C; --c-linkedin: #0A66C2; --c-reddit: #FF4500; --c-telegram: #29A9EA; --c-pinterest: #E60023; --c-tiktok: #69C9D0; --c-snapchat: #D8CC00; --c-messenger: #00B2FF; --mono: 'JetBrains Mono', monospace; --sans: 'Inter', -apple-system, sans-serif; color-scheme: light; } /* No-JS fallback: honor system preference when the inline theme script hasn't run (JS disabled) - dark + Mint, since variant choice itself needs JS. Once the script runs it always sets explicit data-theme/data-variant, and the six combo blocks below win over this. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #121316; --surface: rgba(255,255,255,0.06); --surface-alt: rgba(255,255,255,0.10); --border: rgba(255,255,255,0.14); --text: #F1F1F3; --text-muted: #ABABB6; --amber: #1FD68F; --cyan: #5B9DF9; --red: #F2555A; --on-accent: #06251A; --shadow-rgb: 0, 0, 0; --accent-rgb: 31, 214, 143; --info-rgb: 91, 157, 249; --danger-rgb: 242, 85, 90; --glow1: rgba(31,214,143,0.22); --glow2: rgba(91,157,249,0.16); --glow3: rgba(168,92,246,0.14); color-scheme: dark; } } /* ---- Light · Mint (default) ---- */ :root[data-theme="light"][data-variant="mint"] { --bg: #F3F3F0; --surface: rgba(255,255,255,0.55); --surface-alt: rgba(255,255,255,0.75); --border: rgba(15,15,20,0.10); --text: #16171B; --text-muted: #5B5D68; --amber: #0E8F6E; --cyan: #2F80ED; --red: #E5484D; --on-accent: #FFFFFF; --shadow-rgb: 30, 30, 40; --accent-rgb: 14, 143, 110; --info-rgb: 47, 128, 237; --danger-rgb: 229, 72, 77; --glow1: rgba(14,143,110,0.16); --glow2: rgba(47,128,237,0.12); --glow3: rgba(168,92,246,0.10); color-scheme: light; } /* ---- Light · Ocean ---- */ :root[data-theme="light"][data-variant="ocean"] { --bg: #F0F4F9; --surface: rgba(255,255,255,0.55); --surface-alt: rgba(255,255,255,0.75); --border: rgba(15,20,35,0.10); --text: #101825; --text-muted: #57607A; --amber: #2166D6; --cyan: #0E8F6E; --red: #E5484D; --on-accent: #FFFFFF; --shadow-rgb: 15, 30, 55; --accent-rgb: 33, 102, 214; --info-rgb: 14, 143, 110; --danger-rgb: 229, 72, 77; --glow1: rgba(33,102,214,0.20); --glow2: rgba(14,143,110,0.12); --glow3: rgba(120,90,255,0.14); color-scheme: light; } /* ---- Light · Sunset ---- */ :root[data-theme="light"][data-variant="sunset"] { --bg: #FBF3EE; --surface: rgba(255,255,255,0.55); --surface-alt: rgba(255,255,255,0.78); --border: rgba(50,25,10,0.10); --text: #241A14; --text-muted: #7A6A5E; --amber: #C05A3A; --cyan: #2F8F86; --red: #D0453F; --on-accent: #FFFFFF; --shadow-rgb: 60, 32, 20; --accent-rgb: 192, 90, 58; --info-rgb: 47, 143, 134; --danger-rgb: 208, 69, 63; --glow1: rgba(192,90,58,0.20); --glow2: rgba(255,130,150,0.13); --glow3: rgba(255,190,90,0.16); color-scheme: light; } /* ---- Dark · Mint (default) ---- */ :root[data-theme="dark"][data-variant="mint"] { --bg: #121316; --surface: rgba(255,255,255,0.06); --surface-alt: rgba(255,255,255,0.10); --border: rgba(255,255,255,0.14); --text: #F1F1F3; --text-muted: #ABABB6; --amber: #1FD68F; --cyan: #5B9DF9; --red: #F2555A; --on-accent: #06251A; --shadow-rgb: 0, 0, 0; --accent-rgb: 31, 214, 143; --info-rgb: 91, 157, 249; --danger-rgb: 242, 85, 90; --glow1: rgba(31,214,143,0.22); --glow2: rgba(91,157,249,0.16); --glow3: rgba(168,92,246,0.14); color-scheme: dark; } /* ---- Dark · Ocean ---- */ :root[data-theme="dark"][data-variant="ocean"] { --bg: #0E1420; --surface: rgba(255,255,255,0.06); --surface-alt: rgba(255,255,255,0.10); --border: rgba(255,255,255,0.14); --text: #EAF0FA; --text-muted: #9FB0C8; --amber: #5B9DF9; --cyan: #3FD6C8; --red: #F2555A; --on-accent: #031224; --shadow-rgb: 0, 0, 0; --accent-rgb: 91, 157, 249; --info-rgb: 63, 214, 200; --danger-rgb: 242, 85, 90; --glow1: rgba(91,157,249,0.24); --glow2: rgba(63,214,200,0.16); --glow3: rgba(120,90,255,0.16); color-scheme: dark; } /* ---- Dark · Sunset ---- */ :root[data-theme="dark"][data-variant="sunset"] { --bg: #1A1210; --surface: rgba(255,255,255,0.07); --surface-alt: rgba(255,255,255,0.11); --border: rgba(255,255,255,0.15); --text: #F7ECE6; --text-muted: #C2A99B; --amber: #FF9466; --cyan: #5B9DF9; --red: #F2555A; --on-accent: #2B1006; --shadow-rgb: 0, 0, 0; --accent-rgb: 255, 148, 102; --info-rgb: 91, 157, 249; --danger-rgb: 242, 85, 90; --glow1: rgba(255,148,102,0.26); --glow2: rgba(255,110,140,0.16); --glow3: rgba(255,200,90,0.14); color-scheme: dark; } /* The glow this glass blurs: fixed, soft color blobs behind everything, in both light and dark - flat color behind frosted glass has nothing to blur and just looks like plain boxes; this is what actually makes the blur visible, in whichever theme/variant is active. */ :root[data-theme="light"] body, :root[data-theme="dark"] body { background: radial-gradient(ellipse 900px 600px at 12% -10%, var(--glow1), transparent 60%), radial-gradient(ellipse 800px 700px at 105% 5%, var(--glow2), transparent 60%), radial-gradient(ellipse 900px 700px at 40% 115%, var(--glow3), transparent 60%), var(--bg); background-attachment: fixed; } * { box-sizing: border-box; } /* Low-specificity safety net - any more specific sizing elsewhere (the many explicit img/video rules throughout this file) still wins, this only catches whatever wasn't given its own size and would otherwise overflow its container on a narrow screen. */ img, video { max-width: 100%; } /* The page itself must never scroll sideways - a wide table/canvas/ code block should scroll within its own box (most already do via .table-wrap) rather than blowing out the whole layout on mobile. */ /* overflow-y is set explicitly alongside overflow-x here on purpose: per the CSS overflow spec, setting only ONE axis to non-"visible" forces the OTHER axis's computed value from "visible" to "auto" too - without this, body silently became its own scroll container (instead of the real viewport), which broke .rail's `position: sticky` on desktop (it scrolled away with the page instead of staying pinned). Explicitly "visible" here keeps the viewport itself as the one scroller. */ html, body { max-width: 100%; overflow-x: clip; } .modal-overlay { position: fixed; inset: 0; z-index: 5000; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.hidden { display: none; } .modal-card { max-width: 440px; width: 100%; margin-bottom: 0; } .intro-overlay { position: fixed; inset: 0; z-index: 9999; background: radial-gradient(ellipse 900px 600px at 15% -10%, var(--glow1), transparent 60%), radial-gradient(ellipse 900px 700px at 105% 10%, var(--glow2), transparent 60%), radial-gradient(ellipse 900px 700px at 45% 115%, var(--glow3), transparent 60%), var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; animation: introEnter 0.5s ease both; } .intro-overlay.fade-out { animation: introFadeOut 0.5s ease forwards; } @keyframes introEnter { from { opacity: 0; } } @keyframes introFadeOut { to { opacity: 0; visibility: hidden; } } /* The mark's own gentle breathing scale reads as "quietly alive" rather than a static box, without anything distracting or slow to load. */ .intro-mark-wrap { position: relative; width: 108px; height: 108px; display: flex; align-items: center; justify-content: center; } .intro-mark { position: relative; font-family: var(--sans); font-weight: 800; font-size: 42px; letter-spacing: 2px; color: var(--amber); background: var(--bg); border: 2px solid var(--amber); border-radius: 16px; width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; animation: introPulse 1.6s ease-in-out infinite; box-shadow: 0 0 0 rgba(var(--accent-rgb), 0.4); } @keyframes introPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.35); } 50% { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(var(--accent-rgb), 0); } } /* The wordmark reveal: a wipe sweeps left-to-right like the classic "logo drawn on by a line" intro, but the wipe's leading edge is a wave - built as a clip-path polygon whose front-edge points ripple (travel down the letterforms) as the whole front also sweeps right, instead of one rigid straight/diagonal edge translating across. */ .intro-wordmark { position: relative; } .intro-wordmark-text { display: inline-block; font-family: var(--sans); font-weight: 800; font-size: clamp(40px, 9vw, 60px); letter-spacing: 0.5px; line-height: 1; background: linear-gradient(90deg, var(--amber), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-clip-path: polygon(0% 0%, -28% 0%, -23.8% 8.3%, -20.6% 16.7%, -19.1% 25%, -19.6% 33.3%, -22% 41.7%, -25.8% 50%, -30.2% 58.3%, -34% 66.7%, -36.4% 75%, -36.9% 83.3%, -35.4% 91.7%, -32.2% 100%, 0% 100%); clip-path: polygon(0% 0%, -28% 0%, -23.8% 8.3%, -20.6% 16.7%, -19.1% 25%, -19.6% 33.3%, -22% 41.7%, -25.8% 50%, -30.2% 58.3%, -34% 66.7%, -36.4% 75%, -36.9% 83.3%, -35.4% 91.7%, -32.2% 100%, 0% 100%); animation: introWordReveal 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.25s both; } @keyframes introWordReveal { 0% { clip-path: polygon(0% 0%, -28% 0%, -23.8% 8.3%, -20.6% 16.7%, -19.1% 25%, -19.6% 33.3%, -22% 41.7%, -25.8% 50%, -30.2% 58.3%, -34% 66.7%, -36.4% 75%, -36.9% 83.3%, -35.4% 91.7%, -32.2% 100%, 0% 100%); } 20% { clip-path: polygon(0% 0%, 12.6% 0%, 12.9% 8.3%, 11.2% 16.7%, 7.8% 25%, 3.6% 33.3%, -0.6% 41.7%, -3.6% 50%, -5% 58.3%, -4.3% 66.7%, -1.6% 75%, 2.3% 83.3%, 6.6% 91.7%, 10.3% 100%, 0% 100%); } 40% { clip-path: polygon(0% 0%, 41.3% 0%, 37.3% 8.3%, 33% 16.7%, 29.4% 25%, 27.3% 33.3%, 27.2% 41.7%, 29.1% 50%, 32.6% 58.3%, 36.9% 66.7%, 40.9% 75%, 43.9% 83.3%, 45% 91.7%, 44.1% 100%, 0% 100%); } 60% { clip-path: polygon(0% 0%, 62.7% 0%, 59.9% 8.3%, 59% 16.7%, 60.1% 25%, 63.1% 33.3%, 67.1% 41.7%, 71.4% 50%, 74.9% 58.3%, 76.8% 66.7%, 76.7% 75%, 74.6% 83.3%, 71% 91.7%, 66.7% 100%, 0% 100%); } 80% { clip-path: polygon(0% 0%, 91.4% 0%, 93.7% 8.3%, 97.4% 16.7%, 101.7% 25%, 105.6% 33.3%, 108.3% 41.7%, 109% 50%, 107.6% 58.3%, 104.6% 66.7%, 100.4% 75%, 96.2% 83.3%, 92.8% 91.7%, 91.1% 100%, 0% 100%); } 100% { clip-path: polygon(0% 0%, 132% 0%, 136.2% 8.3%, 139.4% 16.7%, 140.9% 25%, 140.4% 33.3%, 138% 41.7%, 134.2% 50%, 129.8% 58.3%, 126% 66.7%, 123.6% 75%, 123.1% 83.3%, 124.6% 91.7%, 127.8% 100%, 0% 100%); } } .intro-bar { width: 160px; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; } .intro-bar-fill { height: 100%; width: 40%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--amber), var(--cyan), transparent); animation: introBarSweep 1.1s ease-in-out infinite; } @keyframes introBarSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } } *, *::before, *::after { transition: background-color 0.2s cubic-bezier(0.4,0,0.2,1), border-color 0.2s cubic-bezier(0.4,0,0.2,1), color 0.2s cubic-bezier(0.4,0,0.2,1), transform 0.25s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s ease, box-shadow 0.25s ease; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(10px) scale(0.995); } to { opacity: 1; transform: translateY(0) scale(1); } } .view:not(.hidden) { animation: fadeSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .view { position: relative; } /* A tier-gated (or, logged-out, everything-but-Assistant) page: the real content stays in the DOM underneath but this covers it entirely - see renderLockedView()/isViewLocked() in app.js. */ .locked-overlay { position: absolute; inset: 0; z-index: 5; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 24px; } .locked-card { max-width: 420px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 28px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); } .locked-chain { font-size: 34px; line-height: 1; } .locked-card h2 { margin: 0; font-size: 18px; color: var(--text); } .locked-card p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; } /* Small lock badge on a rail button whose page is currently locked - a dimmer icon plus a tiny 🔒 in the corner, so it's obvious before you even click which tabs are reachable right now. */ .rail-btn.locked .rail-icon { opacity: 0.45; } .rail-btn.locked { position: relative; } .rail-btn.locked::after { content: '🔒'; position: absolute; left: 22px; top: 6px; font-size: 9px; line-height: 1; } .deck { display: grid; grid-template-columns: 68px 1fr; min-height: 100vh; transition: grid-template-columns 0.28s cubic-bezier(0.4, 0, 0.2, 1); } /* .rail-open (added on load by wireMobileNav() in app.js, so the rail starts pinned open rather than requiring a first hover) makes the desktop rail expand exactly like :hover already does - removed again the moment the mouse actually leaves it, handing off to plain :hover from then on. */ .deck:has(.rail:hover), .deck:has(.rail.rail-open) { grid-template-columns: 224px 1fr; } /* --- Rail (sidebar) --- */ .rail { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 20px 10px; position: sticky; top: 0; height: 100vh; width: 68px; overflow: hidden; transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1); z-index: 10; } .rail:hover, .rail.rail-open { width: 224px; } .rail-brand { display: flex; align-items: baseline; gap: 8px; padding: 4px 6px 24px; white-space: nowrap; } .rail-brand-mark { font-family: var(--sans); font-weight: 700; color: var(--amber); font-size: 16px; letter-spacing: 1px; } .rail-brand-text { font-family: var(--sans); font-size: 11px; letter-spacing: 2px; color: var(--text-muted); opacity: 0; transition: opacity 0.2s ease 0.05s; } .rail:hover .rail-brand-text, .rail.rail-open .rail-brand-text { opacity: 1; } .rail-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; /* The nav list keeps growing as tabs get added - without its own scroll, .rail's overflow:hidden (needed for the width-collapse animation) just clips whatever doesn't fit off the bottom on a shorter viewport, silently hiding Settings/Theme/the status dot with no way to reach them. This keeps those pinned and reachable no matter how tall the nav list gets. */ overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: thin; } .rail-btn { display: flex; align-items: center; gap: 12px; text-align: left; background: none; border: none; color: var(--text-muted); padding: 10px; border-radius: 10px; font-family: var(--sans); font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap; width: 100%; } .rail-icon { width: 19px; height: 19px; flex-shrink: 0; } .rail-label { opacity: 0; transform: translateX(-4px); transition: opacity 0.18s ease, transform 0.18s ease; } .rail:hover .rail-label, .rail.rail-open .rail-label { opacity: 1; transform: translateX(0); } .rail-btn:hover { background: var(--surface-alt); color: var(--text); } .rail-btn.active { background: rgba(var(--accent-rgb), 0.10); color: var(--amber); font-weight: 600; } :root[data-theme="dark"] .rail-btn.active { background: rgba(var(--accent-rgb), 0.16); } .rail-btn.active .rail-icon { color: var(--amber); } .rail-settings { margin-top: auto; border-top: 1px solid var(--border); padding-top: 14px; margin-bottom: 8px; } /* Theme button - a plain rail-btn with two swappable icons; only the one matching the current data-theme is shown. Clicking it opens .theme-picker-menu (6 swatches: light/dark × Mint/Ocean/Sunset) - see wireThemePicker() in app.js/login.js and the no-flash inline script in . */ .rail-theme-toggle .icon-sun { display: none; } .rail-theme-toggle .icon-moon { display: inline-flex; } :root[data-theme="dark"] .rail-theme-toggle .icon-sun { display: inline-flex; } :root[data-theme="dark"] .rail-theme-toggle .icon-moon { display: none; } .theme-picker { position: relative; } /* Positioned via JS (fixed, coordinates from the button's own getBoundingClientRect) rather than plain absolute - the rail has overflow:hidden for its collapse/expand animation and would otherwise clip a popover trying to open from inside it. */ .theme-picker-menu { position: fixed; z-index: 6000; width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px; display: flex; gap: 10px; backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 16px 40px rgba(var(--shadow-rgb), 0.30); } .theme-picker-menu.hidden { display: none; } .theme-picker-group { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .theme-picker-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); padding: 4px 8px 2px; } .theme-swatch { display: flex; align-items: center; gap: 8px; background: none; border: 1px solid transparent; border-radius: 8px; padding: 7px 8px; font-family: var(--sans); font-size: 12.5px; color: var(--text); cursor: pointer; text-align: left; } .theme-swatch:hover { background: var(--surface-alt); } .theme-swatch.active { border-color: var(--amber); background: rgba(var(--accent-rgb), 0.10); font-weight: 600; } .theme-swatch-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); } .rail-status { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 10.5px; color: var(--text-muted); padding: 8px 10px 4px; white-space: nowrap; } .rail-status .rail-label { font-size: 10px; } .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(var(--info-rgb), 0.6); animation: pulse 2s infinite; flex-shrink: 0; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--info-rgb), 0.5); } 70% { box-shadow: 0 0 0 6px rgba(var(--info-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--info-rgb), 0); } } /* --- Main --- */ .main { padding: 0 36px 60px; max-width: 1100px; /* .main is the grid's second (1fr) column, next to the rail - without this it just sits flush against the rail with all the leftover space on a wide screen piling up on the right, instead of the content column sitting centered in the middle of that space. */ margin: 0 auto; } .topbar { padding: 20px 0 4px; display: flex; flex-direction: column; gap: 12px; position: relative; } /* Right-side stack: login/account chip on top, the platform-strip legend underneath it, then the Post Now quick-launch button underneath that - replaces the old lone-absolutely-positioned .user-chip; the stack itself now owns that same top-right slot. */ .topbar-stack { position: absolute; top: 20px; right: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: min(340px, 60vw); } .user-chip { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 5px 6px 5px 5px; } .user-chip-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--amber); color: var(--on-accent); font-family: var(--sans); font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: center; text-transform: uppercase; flex-shrink: 0; } .user-chip-email { font-size: 12.5px; color: var(--text-muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-chip-logout { background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-muted); font-family: var(--sans); font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 16px; cursor: pointer; } .user-chip-logout:hover { color: var(--red); border-color: var(--red); } @media (max-width: 800px) { .topbar-stack { position: static; margin-top: 8px; align-items: flex-start; max-width: 100%; } .user-chip { width: fit-content; } .user-chip-email { max-width: 120px; } } .guest-chip { padding: 6px 8px 6px 14px; gap: 10px; } .guest-chip .hint-text { white-space: nowrap; } .guest-chip .btn-primary { white-space: nowrap; text-decoration: none; } @media (max-width: 720px) { .guest-chip { width: fit-content; flex-wrap: wrap; } } @media (max-width: 480px) { .guest-chip .hint-text { display: none; } } .category-strip { display: inline-flex; gap: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 3px; width: fit-content; } .cat-btn { background: none; border: none; color: var(--text-muted); font-family: var(--sans); font-size: 12.5px; font-weight: 600; padding: 6px 16px; border-radius: 20px; cursor: pointer; } .cat-btn:hover { color: var(--text); } .cat-btn.active { background: var(--amber); color: var(--on-accent); } .platform-strip { display: flex; gap: 8px; flex-wrap: wrap; } /* Inside .topbar-stack (below the login chip) the strip is right-aligned and narrower, so it reads as one column with the chip/button above and below it rather than a wide row. */ .topbar-stack .platform-strip { justify-content: flex-end; } .post-now-topbtn { white-space: nowrap; } .platform-chip { font-family: var(--sans); font-size: 11px; padding: 5px 10px; border-radius: 20px; border: 1px solid var(--border); display: flex; align-items: center; gap: 6px; color: var(--text-muted); } .platform-chip:hover { border-color: var(--platform-color, var(--border)); transform: translateY(-1px); } .platform-chip .dot { width: 7px; height: 7px; border-radius: 50%; } .platform-chip.unsupported { opacity: 0.55; border-style: dashed; } .view-head { padding: 28px 0 20px; } .view-head h1 { font-size: 22px; margin: 0 0 6px; letter-spacing: -0.3px; } .view-head p { color: var(--text-muted); margin: 0; max-width: 640px; line-height: 1.5; } .view.hidden { display: none; } /* --- Cards --- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(var(--shadow-rgb),0.06); } .form-card { display: flex; flex-direction: column; gap: 14px; } .form-row { display: flex; gap: 14px; flex-wrap: wrap; } .form-row label { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-muted); font-weight: 500; } .checkbox-label { flex-direction: row !important; align-items: center; gap: 8px !important; align-self: flex-end; padding-bottom: 9px; cursor: pointer; } .checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--amber); cursor: pointer; } .hint-text { font-size: 11.5px; color: var(--text-muted); margin: -4px 0 0; font-family: var(--sans); } input, select, textarea { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 9px; padding: 9px 10px; color: var(--text); font-family: var(--sans); font-size: 13.5px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(var(--shadow-rgb), 0.06); } /* A native popup has its OWN opaque backdrop - not this page's --bg - so a near-transparent white tint on top of THAT just read as plain white with near-white (--text) text on it, unreadable. --bg is the one fully opaque color in the theme. */ background: var(--bg); color: var(--text); } .btn-primary { align-self: flex-start; background: var(--amber); color: var(--on-accent); border: none; padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer; } .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.25); } .btn-primary:active { transform: translateY(0); } .btn-primary:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; } .btn-ghost { align-self: flex-start; background: none; border: 1px solid var(--border); color: var(--text); padding: 8px 14px; border-radius: 10px; font-size: 12.5px; cursor: pointer; } .btn-ghost:hover { border-color: var(--amber); color: var(--amber); transform: translateY(-1px); } .btn-small { padding: 6px 12px; font-size: 12px; } .btn-danger { align-self: flex-start; background: none; border: 1px solid var(--red); color: var(--red); padding: 8px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; } .btn-danger:hover { background: rgba(var(--danger-rgb), 0.1); } .btn-danger:disabled { opacity: 0.6; cursor: default; } .danger-zone { border-color: rgba(var(--danger-rgb), 0.4) !important; } .form-msg { font-family: var(--sans); font-size: 12px; } .form-msg.error { color: var(--red); } .form-msg.ok { color: var(--cyan); } /* --- Grids / entity cards --- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .entity-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--platform-color, var(--amber)); border-radius: 8px; padding: 14px 16px; } .entity-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(var(--shadow-rgb),0.16); border-color: var(--platform-color, var(--border)); } .entity-card .ec-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .entity-card .ec-platform { font-family: var(--sans); font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--platform-color, var(--amber)); } .entity-card .ec-label { font-weight: 600; font-size: 14px; margin-bottom: 4px; } .entity-card .ec-sub { font-family: var(--sans); font-size: 11.5px; color: var(--text-muted); } .ec-actions { display: flex; gap: 12px; align-items: center; } .ec-delete, .ec-edit { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 12px; } .ec-delete:hover { color: var(--red); } .ec-edit:hover { color: var(--amber); } /* --- Accounts: platform overview / drill-down --- */ .platform-tile { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--platform-color, var(--amber)); border-radius: 8px; padding: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; } .platform-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(var(--shadow-rgb),0.16); border-color: var(--platform-color, var(--border)); } .platform-tile .pt-name { font-weight: 700; font-size: 15px; color: var(--platform-color, var(--text)); } .platform-tile .pt-count { font-family: var(--sans); font-size: 11.5px; color: var(--text-muted); } .entity-card.compact { padding: 10px 14px; cursor: pointer; } .entity-card.compact .ec-label { margin-bottom: 2px; } .entity-card.compact.selectable { position: relative; padding-left: 38px; } .entity-card.compact.selectable .ec-select-checkbox { position: absolute; left: 12px; top: 14px; width: 16px; height: 16px; cursor: pointer; } #accountsBulkBar:not(:empty) { display: flex; align-items: center; gap: 10px; margin: -6px 0 14px; font-size: 12.5px; color: var(--text-muted); } .entity-card.compact .ec-json { font-family: var(--mono); font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .accounts-breadcrumb { display: flex; align-items: center; gap: 8px; margin: -6px 0 14px; font-size: 12.5px; color: var(--text-muted); } .accounts-breadcrumb .bc-back { background: none; border: 1px solid var(--border); color: var(--text); padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; } .accounts-breadcrumb .bc-back:hover { border-color: var(--amber); color: var(--amber); } .account-detail-card { border-left-width: 4px; } .account-detail-card .adc-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13px; } .account-detail-card .adc-row:last-of-type { border-bottom: none; } .account-detail-card .adc-row span:first-child { color: var(--text-muted); } .account-detail-card .adc-json { font-family: var(--mono); font-size: 12px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 6px; padding: 10px; margin-top: 8px; white-space: pre-wrap; word-break: break-all; } .account-detail-card .ec-actions { margin-top: 14px; gap: 16px; } /* --- Account containers (grouped, same-platform, max 4, shared proxy identity) - see renderContainers() in app.js. --- */ .container-modal-card { max-width: 640px; } #containersPanel:not(:empty) { margin-bottom: 18px; } .containers-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .containers-head h3 { font-size: 13px; margin: 0; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .containers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 4px; } .container-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--platform-color, var(--cyan)); border-radius: 8px; padding: 14px 16px; } .container-card .cc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; } .container-card .cc-name { font-weight: 700; font-size: 14px; } .container-card .cc-actions { display: flex; gap: 10px; flex-shrink: 0; } .cc-identity { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--sans); font-size: 11px; color: var(--text-muted); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--border); } .cc-identity b { color: var(--text); font-weight: 600; } .cc-identity .cc-ip-unverified { color: var(--amber); } .cc-identity .cc-no-proxy { font-style: italic; } .cc-slots { display: flex; flex-direction: column; gap: 6px; } .cc-slot { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font-size: 12.5px; } .cc-slot.empty { color: var(--text-muted); font-style: italic; border-style: dashed; } .cc-slot-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 12px; flex-shrink: 0; } .cc-slot-remove:hover { color: var(--red); } .cc-slots-count { font-family: var(--sans); font-size: 10.5px; color: var(--text-muted); margin-top: 8px; text-align: right; } /* Container health / bandwidth / shadowban-safety indicators. */ .health-badge { display: inline-block; font-family: var(--sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 4px; } .health-badge.health-healthy { background: rgba(var(--info-rgb), 0.15); color: var(--cyan); } .health-badge.health-no-proxy { background: rgba(136,146,160,0.15); color: var(--text-muted); } .health-badge.health-bad { background: rgba(var(--danger-rgb), 0.15); color: var(--red); } .cc-bandwidth { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-family: var(--sans); font-size: 10.5px; color: var(--text-muted); } .cc-bandwidth-bar { flex: 1; height: 6px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; } .cc-bandwidth-fill { height: 100%; background: var(--cyan); } .cc-bandwidth-fill.over { background: var(--red); } .cc-rotate-warning { color: var(--red); margin: 6px 0; } .origin-badge .ob-rotation, .origin-badge .ob-pacing { color: var(--amber); } /* Origin badge (Content page log table + account slot rows) - which container/IP/region a post actually went out on. */ .origin-badge { display: flex; flex-direction: column; gap: 2px; font-family: var(--sans); font-size: 11px; } .origin-badge .ob-container { color: var(--cyan); } .origin-badge .ob-ip { color: var(--text); } .origin-badge .ob-region { color: var(--text-muted); } .origin-badge.none { color: var(--text-muted); font-style: italic; } /* Unassigned account cards get a small dropdown to join a container. */ .ec-container-picker { margin-top: 8px; } .ec-container-picker select { width: 100%; font-size: 11.5px; padding: 6px 8px; } /* --- Profile tab: bio + profile picture per account (see loadProfilePage()/saveProfileCard() in app.js). --- */ .profile-account-card { display: flex; flex-direction: column; gap: 10px; } .profile-pic-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .profile-pic-preview { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--surface-alt); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; } .profile-pic-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .profile-pic-placeholder { font-family: var(--sans); font-weight: 700; font-size: 18px; color: var(--platform-color, var(--amber)); } .profile-pic-browse { display: inline-flex; align-items: center; cursor: pointer; } /* --- Accounts: "Connect an account" (OAuth) card --- */ #oauthConnectCard { border-color: rgba(var(--accent-rgb), 0.35); } .card-title:has(.card-title-tag) { display: flex; align-items: center; } .card-title-tag { margin-left: auto; font-family: var(--sans); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--on-accent); background: var(--cyan); padding: 3px 9px; border-radius: 20px; } .connect-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } .connect-tile { display: flex; align-items: center; gap: 10px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 13px; } .connect-tile::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--platform-color, var(--amber)); flex-shrink: 0; } .connect-tile:hover { border-color: var(--platform-color, var(--amber)); color: var(--platform-color, var(--text)); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(var(--shadow-rgb),0.16); } .connect-tile:active { transform: translateY(0); } /* --- Integrations gallery --- */ .integration-tile { border-left: 3px solid var(--platform-color, var(--amber)); margin-bottom: 0; } .integration-tile-own { border: 1px solid var(--platform-color, var(--amber)); border-left-width: 3px; box-shadow: 0 2px 14px rgba(var(--shadow-rgb),0.1); } .integration-connected-row { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; } .integration-action-panel { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .integration-action-panel select, .integration-action-panel textarea { width: 100%; font-family: var(--mono, monospace); font-size: 12px; } .integration-apikey-form { display: flex; flex-direction: column; gap: 6px; } /* A plain divider between the two ways to add an account, so it reads as "pick one path" instead of two unrelated forms stacked on the page. */ .or-divider { display: flex; align-items: center; gap: 10px; margin: -8px 0 4px; color: var(--text-muted); font-family: var(--sans); font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.5px; } .or-divider::before, .or-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* --- Accounts: manual-add card, collapsed by default. Native
markers are replaced with a chevron that matches the rest of the UI. --- */ .manual-account-details > summary, .advanced-details > summary { cursor: pointer; list-style: none; } .manual-account-details > summary::-webkit-details-marker, .advanced-details > summary::-webkit-details-marker { display: none; } .manual-account-summary { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; user-select: none; } .manual-account-summary::after { content: '▸'; margin-left: auto; color: var(--text-muted); font-size: 12px; transition: transform 0.2s ease; } .manual-account-details[open] .manual-account-summary::after { transform: rotate(90deg); } /* Nested "bulk add" disclosure inside the manual form - visually a step down from the card-level ones above, so the hierarchy stays obvious. */ .advanced-details { display: flex; flex-direction: column; gap: 10px; border: 1px dashed var(--border); border-radius: 8px; padding: 10px 12px; background: var(--surface-alt); } .advanced-details summary { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); font-weight: 600; } .advanced-details summary::before { content: '▸'; display: inline-block; font-size: 10px; transition: transform 0.2s ease; } .advanced-details[open] summary::before { transform: rotate(90deg); } .advanced-details[open] summary { margin-bottom: 2px; } .slots-builder { display: flex; flex-direction: column; gap: 8px; } .slot-row { display: flex; gap: 8px; align-items: center; } .slot-row select, .slot-row input[type="time"] { padding: 7px 8px; font-size: 13px; } .slot-remove { background: none; border: none; color: var(--red); cursor: pointer; font-size: 16px; } .card-title { font-weight: 700; font-size: 14px; margin: -4px 0 2px; color: var(--text); } .image-list-builder { display: flex; flex-direction: column; gap: 8px; } .image-row { display: flex; gap: 8px; align-items: center; } .image-row input { flex: 1; } /* --- Insights --- */ .chart-card { padding: 20px 24px; } /* Small, scannable cards in a responsive grid (same shape as the Accounts/Schedules grids) instead of one full-width stacked list - each card's collapsed head already carries the at-a-glance numbers (posted/failed/last synced), not just platform+followers, so the overview alone is useful before ever clicking to expand. */ .insight-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; align-items: start; } .insight-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--platform-color, var(--amber)); border-radius: 12px; overflow: hidden; } .insight-card-head { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; cursor: pointer; } .insight-card-head .ich-top { display: flex; align-items: center; gap: 8px; } .insight-card-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--platform-color); flex-shrink: 0; } .insight-card-head .ich-platform { font-family: var(--sans); font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; } .insight-card-head .ich-caret { margin-left: auto; color: var(--text-muted); font-size: 11px; transition: transform 0.2s ease; } .insight-card.expanded .ich-caret { transform: rotate(180deg); } .insight-card-head .ich-label { font-weight: 600; font-size: 14.5px; } .insight-card-head .ich-followers { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--platform-color); } .insight-card-head .ich-quickstats { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--text-muted); border-top: 1px dashed var(--border); padding-top: 8px; } .insight-card-body { border-top: 1px solid var(--border); padding: 14px 16px 16px; display: none; } .insight-card.expanded .insight-card-body { display: block; } /* One clean grid of labeled tiles instead of a loose flex-wrap row of bare numbers with nothing separating one stat from the next. */ .insight-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; } .insight-stat { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; display: flex; flex-direction: column; gap: 3px; } .insight-stat .is-label { font-size: 10.5px; color: var(--text-muted); line-height: 1.3; } .insight-stat b { color: var(--text); font-size: 17px; line-height: 1.1; } /* --- Table --- */ .table-wrap { overflow-x: auto; } .log-table { width: 100%; border-collapse: collapse; font-size: 13px; } .log-table th { text-align: left; font-family: var(--sans); font-size: 10.5px; text-transform: uppercase; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border); } .log-table td { padding: 10px 10px; border-bottom: 1px solid var(--border); vertical-align: top; } .post-insights-row td { background: var(--surface-alt); } .post-insight-chips { display: flex; flex-wrap: wrap; gap: 8px; } .post-insight-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; font-size: 12px; color: var(--text-muted); } .post-insight-chip b { color: var(--text); font-family: var(--sans); } .status-pill { font-family: var(--sans); font-size: 10.5px; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; } .status-posted { background: rgba(var(--info-rgb), 0.12); color: var(--cyan); } .status-pending { background: rgba(var(--accent-rgb), 0.12); color: var(--amber); } .status-failed { background: rgba(var(--danger-rgb), 0.12); color: var(--red); } .cat-badge { font-family: var(--sans); font-size: 9.5px; text-transform: uppercase; padding: 1px 7px; border-radius: 10px; letter-spacing: 0.5px; vertical-align: middle; } .cat-badge.cat-funny { background: rgba(var(--accent-rgb), 0.15); color: var(--amber); } .cat-badge.cat-official { background: rgba(var(--info-rgb), 0.15); color: var(--cyan); } .insights-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .suggest-block { width: 100%; border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; } .suggest-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .auto-apply-toggle { padding-bottom: 0; align-self: center; font-size: 11px; } .suggest-result:not(:empty) { margin-top: 10px; } .suggestion-box { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; max-width: 420px; } .suggestion-slots { font-family: var(--sans); font-size: 12.5px; color: var(--text); } .suggestion-reason { font-size: 12px; color: var(--text-muted); line-height: 1.4; } /* Mobile-only hamburger toggle (opens the rail drawer below) and its backdrop - both hidden entirely on desktop where the rail is always visible and hover-expands instead. See wireMobileNav() in app.js. */ .mobile-nav-toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; } .mobile-nav-toggle svg { width: 19px; height: 19px; } .rail-backdrop { display: none; position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, 0.45); } .rail-backdrop.hidden { display: none !important; } /* Chat-history toggle sits in the same spot the hamburger does, but (unlike the hamburger, mobile-only) works at every width - chat history is useful on desktop too. */ .chat-drawer-toggle { display: flex !important; } .chat-drawer-toggle.active { color: var(--amber); border-color: var(--amber); } /* --- Post Now quick-launch drawer: unfolds in from the LEFT edge --- */ .post-now-backdrop { position: fixed; inset: 0; z-index: 3900; background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .post-now-backdrop.open { opacity: 1; pointer-events: auto; } .post-now-drawer { position: fixed; left: 0; top: 0; height: 100vh; width: min(460px, 92vw); z-index: 3901; background: var(--bg); border-right: 1px solid var(--border); box-shadow: 16px 0 48px rgba(var(--shadow-rgb), 0.30); display: flex; flex-direction: column; overflow: hidden; /* "Unfold from the left": the panel both slides in AND grows from a sliver (scaleX from a left-anchored origin), rather than a plain translate - reads like a card unfolding open, not just sliding over. */ transform: translateX(-100%) scaleX(0.85); transform-origin: left center; opacity: 0; transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease; pointer-events: none; } .post-now-drawer.open { transform: translateX(0) scaleX(1); opacity: 1; pointer-events: auto; } .post-now-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .post-now-drawer-title { font-family: var(--sans); font-weight: 700; font-size: 15px; } .post-now-drawer-close { background: none; border: none; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 8px; } .post-now-drawer-close:hover { background: var(--surface-alt); color: var(--text); } .post-now-drawer-body { flex: 1; overflow-y: auto; padding: 18px; } /* The form itself moves in here (see wirePostNowDrawer() in app.js) - it already has its own .card styling, so drop the drawer's own inherited spacing/border where it'd double up. */ .post-now-drawer-body .form-card { border: none; box-shadow: none; padding: 0; margin: 0; } @media (max-width: 520px) { .post-now-drawer { width: 100vw; } } /* --- Assistant chat-history drawer: slides in from the RIGHT --- */ .chat-drawer-backdrop { position: fixed; inset: 0; z-index: 3900; background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .chat-drawer-backdrop.open { opacity: 1; pointer-events: auto; } .chat-drawer { position: fixed; right: 0; top: 0; height: 100vh; width: min(340px, 88vw); z-index: 3901; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -16px 0 48px rgba(var(--shadow-rgb), 0.30); display: flex; flex-direction: column; padding: 16px; gap: 10px; transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .chat-drawer.open { transform: translateX(0); pointer-events: auto; } .chat-drawer-head { display: flex; align-items: center; justify-content: space-between; } .chat-drawer-title { font-family: var(--sans); font-weight: 700; font-size: 15px; } .chat-drawer-close { background: none; border: none; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 8px; } .chat-drawer-close:hover { background: var(--surface-alt); color: var(--text); } .chat-drawer-new { width: 100%; } .chat-drawer-search { width: 100%; font-family: var(--sans); font-size: 13px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); } .chat-drawer-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; min-height: 0; scrollbar-width: thin; } .chat-drawer-empty { padding: 8px 2px; } .chat-thread-item { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; } .chat-thread-item:hover { background: var(--surface-alt); } .chat-thread-item.active { background: rgba(var(--accent-rgb), 0.10); border-color: rgba(var(--accent-rgb), 0.25); } .chat-thread-main { flex: 1; min-width: 0; } .chat-thread-title { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-thread-preview { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .chat-thread-delete { background: none; border: none; color: var(--text-muted); font-size: 15px; line-height: 1; cursor: pointer; padding: 3px 5px; border-radius: 6px; flex-shrink: 0; opacity: 0; } .chat-thread-item:hover .chat-thread-delete { opacity: 1; } .chat-thread-delete:hover { color: var(--red); background: var(--surface-alt); } .chat-drawer-storage { padding-top: 4px; border-top: 1px solid var(--border); } @media (max-width: 800px) { .mobile-nav-toggle { display: flex; } .rail-backdrop:not(.hidden) { display: block; } .deck, .deck:has(.rail:hover) { grid-template-columns: 1fr; } .deck { display: block; } /* .rail becomes position:fixed below - a grid column for it would just leave a dead gap */ /* The rail itself: fully off-canvas at rest (not even a collapsed icon strip) - only .mobile-nav-toggle (the hamburger) shows - and slides in as a full labeled drawer over the page when opened, exactly the ChatGPT/Claude mobile pattern this was asked to match. Sliding via transform (not width) keeps the whole rail, including its labels, laid out at its final open size the entire time, so nothing has to fade/reflow into place after the slide-in the way a width-collapse would. */ .rail { position: fixed; left: 0; top: 0; height: 100vh; width: min(248px, 78vw); flex-direction: column; overflow: hidden; z-index: 50; padding: 16px 8px; transform: translateX(-100%); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease; box-shadow: none; } .rail:hover { transform: translateX(-100%); } /* desktop-only hover-expand doesn't apply here - .rail-open (tap-driven) is what opens it */ .rail.rail-open { transform: translateX(0); box-shadow: 12px 0 40px rgba(var(--shadow-rgb), 0.35); } .rail .rail-label, .rail .rail-brand-text { opacity: 1; transform: none; } /* fully off-canvas at rest anyway - no need for the old collapsed-icon fade-in trick once it slides open */ .rail-nav { flex-direction: column; overflow-y: auto; overflow-x: hidden; } .rail-settings { margin-top: auto; border-top: 1px solid var(--border); padding-top: 14px; } .rail-status { display: none; } /* still no room for it even opened - not worth showing partially */ /* The rail no longer reserves any permanent space (it's fully off-canvas at rest) - content uses the full width, and the drawer opens as an overlay on top of it via .rail's own fixed positioning + z-index instead of pushing it over. */ .main { margin: 0; padding: 0 16px 40px; max-width: 100%; } /* The menu + chat-history buttons sit beside the category toggle on one row instead of .topbar's desktop column stack putting them on separate lines - the login chip/platform legend/Post Now stack (.topbar-stack, switched to static positioning above) still gets its own line below. */ .topbar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; } .topbar-stack { flex-basis: 100%; } /* Platform legend: no room for a whole wrapped row of chips on a phone - collapses to a single box that cycles through every platform's name one at a time (wirePlatformStripRotator() in app.js toggles which chip carries .active), its border/text tinted with that platform's own color via --platform-color (set per chip above). */ .topbar-stack .platform-strip { display: block; width: 100%; min-height: 28px; } .topbar-stack .platform-strip .platform-chip { display: none; width: 100%; box-sizing: border-box; justify-content: center; } .topbar-stack .platform-strip .platform-chip.active { display: flex; border-color: var(--platform-color, var(--border)); color: var(--platform-color, var(--text)); animation: fadeSlideIn 0.3s ease; } .topbar-stack .platform-strip .platform-chip.active .dot { background: var(--platform-color, var(--text-muted)) !important; } /* Assistant: a real full-height chat screen instead of a boxed-in 520px-tall widget on a page - the log fills most of the viewport and the composer sits right under it, the same shape as Claude/ ChatGPT's own mobile chat rather than a form element that happens to hold messages. */ #view-assistant .view-head { padding: 16px 0 12px; } #view-assistant:not(.assistant-floating) .assistant-card { padding: 12px 10px 10px; } #view-assistant:not(.assistant-floating) .assistant-chat { max-height: none; height: calc(100vh - 340px); min-height: 260px; } #view-assistant:not(.assistant-floating) .assistant-layout.is-empty .assistant-card { min-height: 50vh; } } @media (max-width: 480px) { /* Same idea as the 800px breakpoint, just tighter for a phone-width screen: bigger tap targets matter more than fitting more on screen, and a couple of newer components (theme picker, media library) need their own adjustments to stay usable this narrow. */ .view-head h1 { font-size: 19px; } .assistant-home-mark { width: 40px; height: 40px; } .assistant-home-title { font-size: 21px; } .assistant-home-sub { font-size: 12.5px; } #view-assistant:not(.assistant-floating) .assistant-layout.is-empty .assistant-card { padding: 32px 16px; } .theme-picker-menu { width: min(220px, calc(100vw - 24px)); } .media-library-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); } .modal-card { padding: 16px; } .card { padding: 16px; } } /* --- Engagement --- */ .engagement-card { display: flex; flex-direction: column; gap: 8px; } .draft-text { width: 100%; min-height: 60px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-family: var(--sans); font-size: 13px; padding: 8px; resize: vertical; } .draft-text:focus { outline: none; border-color: var(--amber); } .draft-text:disabled { opacity: 0.7; } .eng-actions { display: flex; gap: 8px; } .status-pill.status-drafted, .status-pill.status-rejected { background: rgba(136,146,160,0.15); color: var(--text-muted); } .account-picker { position:relative; } .account-picker-button { width:100%; text-align:left; } .account-picker-menu { position:absolute; z-index:50; left:0; right:0; top:calc(100% + 6px); background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px; max-height:260px; overflow:auto; box-shadow: 0 16px 40px rgba(var(--shadow-rgb),0.18); } .account-picker-menu label { display:flex; gap:8px; align-items:center; padding:8px; border-radius:8px; } .account-picker-menu label:hover { background:var(--surface-alt); } #oauthPickerList label { display:flex; gap:8px; align-items:center; padding:8px; border-radius:8px; } #oauthPickerList label:hover { background:var(--surface-alt); } .preview-panel { margin-top:10px; display:grid; gap:10px; } .preview-summary { font-size:12.5px; font-weight:600; color:var(--text); background:var(--surface-alt); border:1px solid var(--border); border-radius:10px; padding:8px 12px; } .preview-panel video,.preview-panel img { width:min(100%,420px); max-height:640px; object-fit:contain; border-radius:10px; background:#000; } .preview-item { padding:10px; border:1px solid var(--border); border-radius:12px; } /* Shared media-library picker modal (see openMediaLibraryPicker in app.js) - a grid of thumbnails from every past upload. */ .media-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: 360px; overflow-y: auto; margin: 4px 0 14px; } .media-library-item { aspect-ratio: 1; padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface-alt); cursor: pointer; } .media-library-item:hover { border-color: var(--amber); } .media-library-item img, .media-library-item video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } /* AI Video gallery */ .ai-video-card { display: flex; flex-direction: column; gap: 8px; } .ai-video-thumb { width: 100%; max-height: 160px; object-fit: cover; border-radius: 8px; } /* Media Library page - dedicated gallery of every upload (see #view-medialibrary) */ .medialib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 10px 0 18px; } .medialib-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-alt); overflow: hidden; padding-bottom: 8px; } .medialib-thumb-wrap { aspect-ratio: 1; background: var(--surface); } .medialib-thumb-wrap img, .medialib-thumb-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; } .medialib-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 8px; } .medialib-actions { display: flex; gap: 6px; padding: 0 8px; flex-wrap: wrap; } .medialib-actions .btn-ghost, .medialib-actions .btn-primary { flex: 1; } .medialib-browse-label { cursor: pointer; } /* A styled stand-in for the browser's own unstyled "Choose Files / No file chosen" native file input - same btn-ghost look as every other button in the app, wrapping a visually-hidden real (still fully keyboard/screen-reader accessible - a