/* ============================================================ Fast Shadow Chat — design system Cyber-tinted, calm, legible. Restraint over neon overload. ============================================================ */ /* Vazirmatn — self-hosted variable font (100–900) for crisp Persian (and Latin). */ @font-face { font-family: "Vazirmatn"; src: url("/fonts/Vazirmatn.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --bg: #0a0e14; --bg-2: #0d131c; --panel: #111a26; --panel-2: #16212f; --line: #1f2d3d; --line-2: #283a4f; --text: #e6edf3; --muted: #8aa0b6; --faint: #5f7388; --accent: #a674ff; /* purple */ --accent-2: #c77dff; /* orchid / light purple */ --violet: #7c5cff; --danger: #ff5d6c; --warn: #ffc15e; --ok: #38e08a; --radius: 14px; --radius-sm: 10px; --shadow: 0 10px 40px rgba(0,0,0,.45); --glow: 0 0 0 1px rgba(166,116,255,.25), 0 8px 30px rgba(166,116,255,.10); /* translucent "glass" surfaces (topbar / chat-head / mobile bar) — themed */ --glass: rgba(13,19,28,.8); --glass-2: rgba(13,19,28,.6); --glass-solid: rgba(13,19,28,.97); --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace; --ease-out: cubic-bezier(.16, 1, .3, 1); /* shared easing for transitions/animations below */ /* Motion scale (product register: motion conveys state, ~120–320ms). */ --dur-1: 120ms; /* instant feedback: press, toggle */ --dur-2: 200ms; /* state changes: hover, tab, badge */ --dur-3: 320ms; /* entrances: view switch, theme crossfade */ } /* ============================================================ THEMES — accent color (any mode) + light mode Applied via data-theme / data-accent on by /js/theme.js. ============================================================ */ [data-accent="purple"] { --accent:#a674ff; --accent-2:#c77dff; --violet:#7c5cff; } [data-accent="blue"] { --accent:#4f9dff; --accent-2:#78b4ff; --violet:#3b82f6; } [data-accent="teal"] { --accent:#2dd4bf; --accent-2:#5eead4; --violet:#14b8a6; } [data-accent="amber"] { --accent:#f5a623; --accent-2:#ffc15e; --violet:#e08e12; } [data-accent="rose"] { --accent:#ff5d8f; --accent-2:#ff8fb0; --violet:#ec4899; } [data-accent="cyan"] { --accent:#38bdf8; --accent-2:#67d3ff; --violet:#0ea5e9; } [data-theme="light"] { --bg: #f5f7fb; --bg-2: #eef2f8; --panel: #ffffff; --panel-2: #f3f6fb; --line: #dbe3ec; --line-2: #c6d2df; --text: #0f1c2b; --muted: #55697d; --faint: #7e90a4; --shadow: 0 10px 34px rgba(30,50,90,.14); --glow: 0 0 0 1px rgba(0,0,0,.05), 0 8px 26px rgba(0,0,0,.06); --glass: rgba(255,255,255,.82); --glass-2: rgba(255,255,255,.68); --glass-solid: rgba(255,255,255,.97); } /* Light mode: soften the body's purple ambient glows so the page reads clean. */ [data-theme="light"] body { background: radial-gradient(1100px 600px at 85% -10%, rgba(120,90,220,.06), transparent 60%), radial-gradient(900px 500px at 0% 110%, rgba(120,90,220,.05), transparent 55%), var(--bg); } /* ---- theme picker (topbar button + popover) ---- */ .theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; padding: 0; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; transition: .15s; } .theme-btn:hover { color: var(--accent); border-color: var(--accent); } .theme-menu { position: fixed; z-index: 80; min-width: 210px; padding: 10px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow); animation: modalPop .16s var(--ease-out); } .theme-menu .tm-row { display: flex; gap: 8px; } .theme-menu .tm-mode button { flex: 1; padding: 9px 8px; border-radius: 9px; cursor: pointer; font: inherit; font-weight: 600; font-size: 13px; border: 1px solid var(--line); background: var(--panel); color: var(--text); transition: .12s; } .theme-menu .tm-mode button.on { border-color: var(--accent); color: var(--accent); background: var(--panel-2); } .theme-menu .tm-label { font-size: 12px; color: var(--muted); margin: 12px 2px 8px; } .theme-menu .tm-accents { flex-wrap: wrap; gap: 10px; } .theme-menu .tm-swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0; background: var(--sw); border: 2px solid transparent; box-shadow: 0 0 0 1px var(--line-2); transition: .12s; } .theme-menu .tm-swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--sw); } /* ---- default-appearance picker in the admin Settings panel ---- */ .set-appearance { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 4px; } .set-mode { display: inline-flex; gap: 8px; } .set-mode button { padding: 9px 14px; border-radius: 9px; cursor: pointer; font: inherit; font-weight: 600; font-size: 13px; border: 1px solid var(--line); background: var(--panel); color: var(--text); transition: .12s; } .set-mode button.on { border-color: var(--accent); color: var(--accent); background: var(--panel-2); } .set-accents { display: inline-flex; gap: 10px; flex-wrap: wrap; } .set-swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0; background: var(--sw); border: 2px solid transparent; box-shadow: 0 0 0 1px var(--line-2); transition: .12s; } .set-swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--sw); } /* All motion below animates only opacity/transform (compositor-only, no layout cost) and stays under ~300ms, so it's cheap regardless of page weight. Users who've asked the OS for less motion get it instantly instead. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ============================================================ MOTION SYSTEM — state-conveying, not decorative. The reduced-motion block above zeroes all of this out; the extras below are additionally gated on no-preference for correctness. ============================================================ */ /* View switch: the newly-shown panel eases up + in. showView() adds .view-enter after clearing [hidden], so content is visible by default (no visibility gating) — the animation only enhances an already-shown view. */ @keyframes viewEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .view.view-enter, .chat-single.view-enter { animation: viewEnter var(--dur-3) var(--ease-out); } /* Smooth the active-state affordances (nav tabs, auth tabs, buy sub-tabs). */ .nav button, .tabs button, .subtabs button { transition: color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } /* Send button: confident press. */ .composer .send { transition: filter var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out); } .composer .send:active:not(:disabled) { transform: translateY(0) scale(.94); } /* Presence: the online dot breathes softly so "live" reads as alive. Online only. */ @keyframes presence { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } @media (prefers-reduced-motion: no-preference) { .chat-head .st .dot:not(.off), .conv-item .pdot.on { animation: presence 2.6s ease-in-out infinite; } } /* Theme crossfade: theme.js flags .theme-anim on for one frame-window during a mode/accent change, so the whole UI eases between palettes instead of snapping. Time-bounded (class is removed after the change), so there is no ongoing transition cost during normal interaction. */ @media (prefers-reduced-motion: no-preference) { html.theme-anim, html.theme-anim .topbar, html.theme-anim .lp-nav, html.theme-anim .conv-list, html.theme-anim .chat-head, html.theme-anim .composer { transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out) !important; } html.theme-anim body, html.theme-anim .card, html.theme-anim .panel, html.theme-anim .btn, html.theme-anim .input, html.theme-anim .bubble, html.theme-anim .badge, html.theme-anim .plan, html.theme-anim .row, html.theme-anim .stat, html.theme-anim .conv-item, html.theme-anim .lp-card, html.theme-anim .lp-motif-frame, html.theme-anim .modal, html.theme-anim .theme-btn, html.theme-anim .lang-btn, html.theme-anim .msgs, html.theme-anim .chat, html.theme-anim .view, html.theme-anim textarea, html.theme-anim select, html.theme-anim h1, html.theme-anim h2, html.theme-anim h3 { transition: background-color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out) !important; } } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { height: 100%; overflow-x: hidden; max-width: 100%; } body { margin: 0; font-family: var(--font); color: var(--text); background: radial-gradient(1100px 600px at 85% -10%, rgba(199,125,255,.10), transparent 60%), radial-gradient(900px 500px at 0% 110%, rgba(166,116,255,.08), transparent 55%), var(--bg); -webkit-font-smoothing: antialiased; line-height: 1.5; } /* faint grid overlay */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(120,160,200,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(120,160,200,.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 80%); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: rgba(166,116,255,.3); } /* scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 20px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: #34506b; background-clip: content-box; } /* ---------- typography helpers ---------- */ .mono { font-family: var(--mono); } .muted { color: var(--muted); } .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); } h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; } /* ---------- brand ---------- */ .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.01em; } .brand .logo { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #04110e; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 18px rgba(166,116,255,.35); } .brand .logo svg { width: 18px; height: 18px; } .brand b { font-weight: 750; } .brand .dim { color: var(--muted); font-weight: 600; } /* ---------- buttons ---------- */ .btn { --bw: 1px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: var(--radius-sm); border: var(--bw) solid var(--line-2); background: var(--panel-2); color: var(--text); cursor: pointer; transition: .16s ease; white-space: nowrap; } /* Hover tints toward the accent (theme- and accent-aware — no hardcoded color, so it works in light mode and with every accent). */ .btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel-2)); transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(.985); } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } .btn svg { width: 16px; height: 16px; } .btn-primary { border-color: transparent; color: #04110e; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 24%, transparent); } /* keep the accent gradient on hover (brighten it) instead of flipping to a fixed color */ .btn-primary:hover { background: linear-gradient(135deg, var(--accent), var(--accent-2)); filter: brightness(1.07); box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 36%, transparent); } .btn-ghost { background: transparent; border-color: var(--line); } .btn-ghost:hover { background: var(--panel); } .btn-danger { color: var(--danger); border-color: rgba(255,93,108,.4); background: rgba(255,93,108,.08); } .btn-danger:hover { background: rgba(255,93,108,.16); border-color: var(--danger); } .btn-ok { color: #04130c; border-color: transparent; background: linear-gradient(135deg, var(--ok), #2fd6c8); } .btn-ok:hover { filter: brightness(1.08); } .btn-sm { padding: 7px 12px; font-size: 13px; } .btn-block { width: 100%; } /* ---------- forms ---------- */ .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; } .field label { font-size: 12.5px; color: var(--muted); font-weight: 600; letter-spacing: .01em; } .input, textarea.input, select.input { font: inherit; color: var(--text); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px; width: 100%; transition: .15s ease; outline: none; } .input::placeholder { color: #4d647d; } .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); background: var(--bg); } textarea.input { resize: vertical; min-height: 84px; line-height: 1.5; } /* password show/hide toggle */ .pw-wrap { position: relative; display: block; } .pw-wrap .input { padding-inline-end: 44px; } .pw-toggle { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: var(--radius-sm); transition: color .15s ease, background .15s ease; } .pw-toggle:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent); } /* required-field marker: a red asterisk (no "required" label) */ .hint-req { color: var(--danger); font-weight: 700; } .pw-toggle:active { transform: translateY(-50%) scale(.9); } .pw-toggle svg { width: 18px; height: 18px; } /* keyboard-only focus ring — visible for tab users, hidden for mouse clicks */ :where(button, a, input, textarea, select, [tabindex], [role="button"]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } :where(.input, .btn):focus-visible { outline-offset: 3px; } /* tabular numbers: prices, stats, times, receipts stay column-aligned */ .plan .price .amt, .stat .v, .mono, .msg .time, .money, [data-tabular] { font-variant-numeric: tabular-nums; } /* ---------- cards / panels ---------- */ .card { background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .pad { padding: 22px; } /* ---------- badges / pills ---------- */ .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 650; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); background: var(--panel-2); } .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .badge-pending { color: var(--warn); border-color: rgba(255,193,94,.35); background: rgba(255,193,94,.08); } .badge-approved { color: var(--ok); border-color: rgba(56,224,138,.35); background: rgba(56,224,138,.08); } .badge-rejected { color: var(--danger); border-color: rgba(255,93,108,.35); background: rgba(255,93,108,.08); } .badge-accent { color: var(--accent); border-color: rgba(166,116,255,.35); background: rgba(166,116,255,.08); } .count-pill { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 700; color: #04110e; background: var(--accent); } /* ---------- toast ---------- */ #toasts { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: flex; flex-direction: column; gap: 10px; } .toast { background: var(--panel-2); border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: 10px; padding: 12px 16px; min-width: 240px; max-width: 360px; box-shadow: var(--shadow); animation: slidein .25s var(--ease-out); font-size: 14px; transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); } .toast.out { opacity: 0; transform: translateY(6px); } .toast.err { border-left-color: var(--danger); } .toast.ok { border-left-color: var(--ok); } @keyframes slidein { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } } /* ---------- avatar ---------- */ .avatar { width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #04110e; background: linear-gradient(135deg, var(--accent), var(--accent-2)); } .avatar svg { width: 18px; height: 18px; } .avatar.sm { width: 30px; height: 30px; font-size: 12px; border-radius: 9px; } .avatar.violet { background: linear-gradient(135deg, var(--violet), var(--accent-2)); } .avatar.muted { background: linear-gradient(135deg, #3a4d63, #2a3b4f); color: #cfe0f0; } .avatar.has-img { background: transparent; } .avatar.has-img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .empty { text-align: center; color: var(--muted); padding: 48px 20px; } .empty svg { width: 40px; height: 40px; opacity: .5; margin-bottom: 12px; } /* ============================================================ AUTH PAGE ============================================================ */ /* interactive constellation canvas — behind everything, pointer tracked on window */ #authBg { position: fixed; inset: 0; z-index: 0; pointer-events: none; width: 100%; height: 100%; } .auth-wrap { position: relative; z-index: 1; min-height: 100%; display: grid; grid-template-columns: 1.05fr .95fr; animation: fadeIn .35s var(--ease-out); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .auth-side { padding: 64px 56px 54px; display: flex; flex-direction: column; justify-content: flex-start; gap: 44px; border-right: 1px solid var(--line); /* translucent surfaces (color-mix … transparent) so the constellation shimmers through the pitch pane while the copy stays readable */ background: radial-gradient(600px 360px at 20% 20%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 82%, transparent), color-mix(in srgb, var(--bg) 72%, transparent)); backdrop-filter: blur(2px); } .auth-side .pitch { max-width: 460px; } .auth-side h1 { font-size: 40px; line-height: 1.1; margin: 18px 0 16px; letter-spacing: -.02em; } .auth-side h1 .grad { background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .auth-side p.lead { color: var(--muted); font-size: 16px; white-space: pre-wrap; } .auth-foot { color: var(--faint); font-size: 12.5px; font-family: var(--mono); margin-top: auto; padding-top: 24px; } .auth-main { display: grid; place-items: center; padding: 40px; } .auth-card { width: 100%; max-width: 400px; } /* big logo on the welcome (left) side — logo and wordmark are centered together as one unit */ .auth-brand { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; } .auth-wordmark { font-weight: 700; letter-spacing: -.01em; font-size: 17px; } .auth-wordmark .dim { color: var(--muted); font-weight: 600; } .auth-logo { display: flex; justify-content: center; width: 100%; } .auth-logo-img { max-height: 120px; max-width: 320px; object-fit: contain; } .auth-logo-badge { width: 124px; height: 124px; border-radius: 30px; display: grid; place-items: center; color: #04110e; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 16px 40px rgba(166,116,255,.45); } .auth-logo-badge svg { width: 66px; height: 66px; } /* custom logo inside the small corner badge */ .brand .logo.has-img { background: transparent; box-shadow: none; } .brand .logo.has-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; } /* logo editor in the settings panel */ .logo-edit { display: flex; gap: 14px; align-items: center; } .logo-preview { width: 66px; height: 66px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; color: var(--accent); } .logo-preview img { width: 100%; height: 100%; object-fit: contain; } .logo-preview svg { width: 32px; height: 32px; } .auth-card h2 { font-size: 23px; margin-bottom: 4px; } .auth-card .sub { color: var(--muted); font-size: 14px; margin-bottom: 24px; } .tabs { display: flex; gap: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin-bottom: 22px; } .tabs button { flex: 1; font: inherit; font-weight: 600; font-size: 14px; color: var(--muted); background: transparent; border: 0; border-radius: 9px; padding: 9px; cursor: pointer; transition: .15s; } .tabs button.active { color: var(--text); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2); } .form-err { display: none; margin: -4px 0 14px; padding: 10px 13px; font-size: 13px; color: var(--danger); background: rgba(255,93,108,.08); border: 1px solid rgba(255,93,108,.3); border-radius: 10px; } .form-err.show { display: block; } .form-err.ok { color: var(--ok); background: rgba(56,224,138,.08); border-color: rgba(56,224,138,.3); } .link-btn { display: block; width: 100%; margin-top: 14px; padding: 4px; background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; text-align: center; } .link-btn:hover { color: var(--accent); text-decoration: underline; } .helper { font-size: 12px; color: var(--faint); margin-top: 8px; } @media (max-width: 900px) { .auth-wrap { grid-template-columns: 1fr; } /* keep the logo on the welcome side as a compact top banner; hide the pitch text */ .auth-side { padding: 26px; border-inline-end: 0; border-bottom: 1px solid var(--line); } .auth-side .pitch, .auth-side .auth-foot { display: none; } .auth-brand { flex-direction: column; align-items: center; gap: 12px; width: 100%; } .auth-logo { justify-content: center; } .auth-logo-img { max-height: 92px; } .auth-logo-badge { width: 80px; height: 80px; border-radius: 20px; } .auth-logo-badge svg { width: 42px; height: 42px; } } /* ============================================================ APP SHELL (user + admin) ============================================================ */ /* min-height uses 100dvh (dynamic viewport) so the shell matches the chat's 100dvh sizing on mobile. With plain 100vh the shell counts the collapsed address-bar area and ends up taller than its content, leaving an empty strip below the composer. 100vh stays as a fallback for browsers without dvh. */ .shell { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } .topbar { height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 20; } .topbar .left { display: flex; align-items: center; gap: 22px; } /* Centered brand lockup (used on the user app's topbar) sits on top of the sticky bar via absolute positioning so it doesn't compete for flex space with the nav/who — always dead-center regardless of how wide either side is. */ .brand-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .nav { display: flex; gap: 4px; } /* hamburger + drawer backdrop: mobile-only (see the 760px breakpoint) */ .nav-burger { display: none; } .drawer-bg { position: fixed; inset: 0; z-index: 45; background: rgba(4,8,14,.55); backdrop-filter: blur(2px); } .nav button { font: inherit; font-weight: 600; font-size: 14px; color: var(--muted); background: transparent; border: 0; border-radius: 9px; padding: 8px 14px; cursor: pointer; transition: .15s; display: inline-flex; align-items: center; gap: 8px; } .nav button svg { width: 16px; height: 16px; } .nav button:hover { color: var(--text); background: var(--panel); } .nav button.active { color: var(--text); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2); } .topbar .right { display: flex; align-items: center; gap: 14px; } .who { display: flex; align-items: center; gap: 10px; position: relative; cursor: pointer; } .who .meta { text-align: right; line-height: 1.2; } .who .meta .n { font-weight: 650; font-size: 13.5px; } /* Profile dropdown — opens under the avatar on click (see whoBtn wiring in app/admin.js). */ .who-menu { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 30; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow); min-width: 180px; padding: 6px; display: flex; flex-direction: column; gap: 2px; animation: modalPop .16s var(--ease-out); } .who-menu button { font: inherit; font-weight: 600; font-size: 13.5px; color: var(--text); text-align: start; background: transparent; border: 0; border-radius: 8px; padding: 9px 11px; cursor: pointer; transition: .12s; display: flex; align-items: center; gap: 8px; } .who-menu button:hover { background: var(--panel); } .who-menu button svg { width: 15px; height: 15px; } .who .meta .r { font-size: 11px; color: var(--faint); font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; } .view { flex: 1; padding: 26px 22px 40px; max-width: 1180px; width: 100%; margin: 0 auto; } .view[hidden] { display: none; } .view-wide { max-width: none; } .view:not([hidden]) { animation: viewIn .26s var(--ease-out); } @keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .page-head { margin-bottom: 22px; } .page-head h2 { font-size: 24px; } .page-head p { color: var(--muted); margin: 6px 0 0; } /* ---------- settings: a section rail + one panel at a time. The old masonry showed all seven groups at once — a long, undifferentiated wall to scroll. A sticky left rail scopes the page to one concern (General, Access, Messages, …) while every field stays in the DOM, so a single Save still writes them all. On narrow screens the rail becomes a horizontal scroller of pills above the panel. ---------- */ .settings-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 24px; max-width: 1060px; margin: 0 auto; align-items: start; } .settings-nav { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); } .set-tab { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; text-align: start; color: var(--muted); transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); } .set-tab svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .8; } .set-tab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .set-tab:hover { background: var(--panel-2); color: var(--text); } .set-tab.on { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); } .set-tab.on svg { opacity: 1; } .set-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .settings-body { min-width: 0; } .set-panel { background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; } .set-head { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; } .set-head svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--accent); } .set-head h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; } .set-head .badge { margin-inline-start: auto; } .set-in { animation: setIn var(--dur-2) var(--ease-out); } @keyframes setIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } /* Sticky action bar so Save is always reachable on long panels. A gradient scrim fades the scrolling content out behind it instead of a hard edge. */ .settings-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 2px; } .settings-bar::before { content: ''; position: absolute; inset: 0 -30px; background: linear-gradient(180deg, transparent, var(--bg) 60%); z-index: -1; pointer-events: none; } .settings-bar .btn { min-width: 128px; justify-content: center; } .set-dirty { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--warn); } .set-dirty .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); } @media (max-width: 860px) { .settings-layout { grid-template-columns: 1fr; gap: 14px; } .settings-nav { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding: 6px; scrollbar-width: none; } .settings-nav::-webkit-scrollbar { display: none; } .set-tab { width: auto; white-space: nowrap; } } @media (prefers-reduced-motion: reduce) { .set-in { animation: none; } } /* advanced SMTP disclosure inside the mail card */ .mail-adv { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; } .mail-adv > summary { cursor: pointer; list-style: none; user-select: none; font-size: 13px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; } .mail-adv > summary::-webkit-details-marker { display: none; } .mail-adv > summary::before { content: '▸'; transition: transform .15s ease; } .mail-adv[open] > summary::before { transform: rotate(90deg); } .mail-adv > summary:hover { color: var(--text); } /* ---------- plans grid ---------- */ .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .plan { position: relative; padding: 26px 24px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), var(--bg-2)); display: flex; flex-direction: column; transition: .18s ease; } .plan:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow); } .plan.hl { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: var(--glow); } .plan .tag { position: absolute; top: -11px; right: 20px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; color: #04110e; background: linear-gradient(135deg, var(--accent), var(--accent-2)); } .plan h3 { font-size: 19px; } .plan .tagline { color: var(--muted); font-size: 13.5px; margin: 4px 0 16px; min-height: 20px; } .plan .price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 18px; } .plan .price .amt { font-size: 34px; font-weight: 750; letter-spacing: -.02em; } .plan .price .per { color: var(--muted); font-size: 13px; } .plan ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; flex: 1; } .plan ul li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text); } .plan ul li svg { width: 16px; height: 16px; color: var(--accent); flex: 0 0 auto; margin-top: 2px; } /* ---------- generic list rows ---------- */ .rows { display: flex; flex-direction: column; gap: 12px; } .row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); } .row .grow { flex: 1; min-width: 0; } .row .ttl { font-weight: 650; font-size: 14.5px; } .row .sub { color: var(--muted); font-size: 13px; margin-top: 2px; } .row .when { color: var(--faint); font-size: 12px; font-family: var(--mono); } /* ============================================================ CHAT ============================================================ */ .chat-layout { display: grid; grid-template-columns: 320px 1fr; gap: 0; height: calc(100vh - 62px); height: calc(100dvh - 62px); min-height: 0; } /* The chat view is a flex item (flex:1) that already fills the shell; make it a flex column so .chat grows to fill instead of relying on percentage height (which doesn't resolve against a flex-sized parent → composer floated mid-screen). Needs an explicit height (not just flex:1) — the shell is only min-height:100vh, so once messages overflow the viewport there's no bounded ancestor for .chat's height:100% to resolve against, .msgs stops clipping/scrolling internally, and the whole page scrolls instead — taking the owner's chat-head profile bar with it. Same fixed-height technique as .chat-layout keeps it pinned. 100dvh (with 100vh as a fallback for older browsers) instead of plain 100vh — mobile browsers size 100vh against the viewport with its chrome collapsed, so the real (chrome-visible) viewport is shorter, .chat-single overflows it, and the page-level scroll this fallback height was meant to prevent happens anyway. */ /* flex:none overrides the .view { flex:1 } above — otherwise flex-basis:0 + grow defeats this explicit height, the view expands to fit all messages, and the whole PAGE scrolls instead of #msgs (composer unpinned, can't land on newest). */ .chat-single { display: flex; flex-direction: column; flex: none; height: calc(100vh - 62px); height: calc(100dvh - 62px); min-height: 0; } /* The owner's avatar/name in the user's own chat header always stays on the physical left, regardless of language — same fixed-layout technique as .msgs. */ .chat-single .chat-head { direction: ltr; } html[lang="fa"] .chat-single .chat-head .nm, html[lang="fa"] .chat-single .chat-head .st { text-align: left; } .conv-list { border-right: 1px solid var(--line); background: var(--bg-2); display: flex; flex-direction: column; } .conv-list .head { padding: 16px 18px; border-bottom: 1px solid var(--line); } .conv-list .head h3 { font-size: 15px; } .conv-search { padding: 12px 14px; border-bottom: 1px solid var(--line); } .conv-scroll { overflow-y: auto; flex: 1; } .conv-item { display: flex; gap: 12px; align-items: center; padding: 13px 16px; cursor: pointer; border-left: 2px solid transparent; transition: .12s; position: relative; } /* ⋯ per-conversation menu (ban / delete chat) */ .conv-more { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: .12s; } .conv-item:hover .conv-more, .conv-item.active .conv-more { opacity: 1; } .conv-more:hover { background: var(--panel-2); color: var(--text); } .conv-more svg { width: 16px; height: 16px; } @media (hover: none) { .conv-more { opacity: .7; } } .conv-menu { position: absolute; top: 46px; inset-inline-end: 12px; z-index: 30; min-width: 170px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow); padding: 4px; display: flex; flex-direction: column; gap: 2px; animation: modalPop .14s var(--ease-out); } .conv-menu button { font: inherit; font-weight: 600; font-size: 13px; color: var(--text); white-space: nowrap; background: transparent; border: 0; border-radius: 7px; padding: 8px 10px; cursor: pointer; transition: .12s; display: flex; align-items: center; gap: 8px; text-align: start; } .conv-menu button:hover { background: var(--panel); } .conv-menu button.danger { color: var(--danger); } .conv-menu button svg { width: 14px; height: 14px; } .conv-item:hover { background: var(--panel); } .conv-item.active { background: var(--panel-2); border-left-color: var(--accent); } .conv-item .grow { flex: 1; min-width: 0; } .conv-item .nm { font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; gap: 8px; } /* live presence dot before each member's name */ .conv-item .pdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); margin-inline-end: 7px; vertical-align: middle; } .conv-item .pdot.on { background: var(--ok); box-shadow: 0 0 6px var(--ok); } .conv-item .nm .t { color: var(--faint); font-size: 11px; font-weight: 500; font-family: var(--mono); } .conv-item .pv { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; } .conv-item .pv.unread { color: var(--text); font-weight: 600; } .chat { display: flex; flex-direction: column; flex: 1 1 auto; height: 100%; min-height: 0; min-width: 0; position: relative; background: radial-gradient(700px 400px at 80% 0%, rgba(199,125,255,.05), transparent 60%), var(--bg); } /* As a grid item in .chat-layout (and a flex item in .chat-single), the default min-width:auto floors the chat pane at its content's min-content width, so on a narrow phone the pane grows past the viewport; under RTL that overflow spills left and drags the (left-aligned) received bubbles off-screen. min-width:0 lets the pane shrink to the column/viewport instead. */ .chat-single { min-width: 0; } /* Floating "jump to newest" pill — shown when scrolled up; badge counts new messages received meanwhile. Anchored to the chat area, just above the composer. */ #chatActive { position: relative; } .jump-new { position: absolute; inset-inline-end: 16px; bottom: 96px; z-index: 6; display: inline-flex; align-items: center; gap: 7px; height: 40px; min-width: 40px; padding: 0 12px; border-radius: 22px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line-2); box-shadow: var(--shadow); cursor: pointer; transition: border-color .15s, color .15s; animation: bubbleIn .18s var(--ease-out); } .jump-new:hover { border-color: var(--accent); color: var(--accent); } .jump-new .ic { display: inline-flex; } .jump-new .ic svg { width: 20px; height: 20px; } .jump-new .count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #04130f; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .chat-head { height: 64px; flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--line); background: var(--glass-2); backdrop-filter: blur(8px); /* Belt-and-suspenders alongside the .chat-single/.chat-layout fixed-height fix above — sticky keeps it pinned even if some ancestor's height math falls through (e.g. an in-page browser bar resize), same pattern as .topbar. top is offset by .topbar's own height (62px, also sticky) so this sticks just below it instead of colliding underneath it. */ position: sticky; top: 62px; z-index: 5; } .chat-head .grow { flex: 1; min-width: 0; } .chat-head .nm { font-weight: 650; font-size: 15px; } .chat-head .st { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; } .chat-head .st .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); } .chat-head .st .dot.off { background: var(--faint); box-shadow: none; } /* Returns to the conversation list on mobile, where it slides over the chat pane (see .conv-list in the 980px breakpoint below). Desktop always shows both panes side by side, so there's nothing to "go back" to. */ .back-btn { display: none; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; align-items: center; justify-content: center; transition: .15s; } .back-btn:hover { border-color: var(--accent); color: var(--accent); } .back-btn svg { width: 18px; height: 18px; } html[dir="rtl"] .back-btn svg { transform: scaleX(-1); } /* Bubble side (me = right, them = left) stays fixed regardless of UI language — forcing ltr here stops justify-content/logical properties from mirroring with dir="rtl". */ .msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px 22px 8px; display: flex; flex-direction: column; gap: 4px; direction: ltr; } .msg-day { align-self: center; font-size: 11px; color: var(--faint); font-family: var(--mono); margin: 14px 0 8px; text-transform: uppercase; letter-spacing: .1em; } .bubble-row { display: flex; margin-top: 2px; position: relative; } .bubble-row.me { justify-content: flex-end; } .bubble-row.msg-editing { opacity: .5; } /* Only newly-arrived messages pop in (see appendMessage's `animate` flag) — bulk history loads skip this so opening a long thread doesn't animate every bubble. */ .bubble-row.msg-pop { animation: bubbleIn .22s var(--ease-out); } @keyframes bubbleIn { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } } .bubble { max-width: min(560px, 74%); padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; position: relative; } .bubble-row.them .bubble { background: var(--panel-2); border: 1px solid var(--line); border-bottom-left-radius: 5px; } .bubble-row.me .bubble { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #04130f; border-bottom-right-radius: 5px; } .bubble .meta { display: block; font-size: 10.5px; margin-top: 5px; opacity: .65; font-family: var(--mono); } .bubble-row.them .bubble .meta { color: var(--faint); } .bubble .meta .edited { margin-inline-start: 5px; } /* delivery/read ticks on own messages: ✓ delivered (dim) → ✓✓ seen (full) */ .bubble .meta .ticks { display: inline-flex; vertical-align: -2px; margin-inline-start: 5px; opacity: .55; } .bubble .meta .ticks.seen { opacity: 1; } .bubble .meta .ticks svg { width: 14px; height: 14px; } /* Bubble layout is forced ltr (see .msgs); restore rtl just for Persian text content. */ html[lang="fa"] .bubble, html[lang="fa"] .msg-day { direction: rtl; } html[lang="fa"] .bubble .msg-text { text-align: right; } /* quoted reply preview shown inside a bubble */ .reply-quote { display: block; padding: 6px 10px; margin-bottom: 6px; border-radius: 8px; border-inline-start: 3px solid currentColor; background: rgba(0,0,0,.12); font-size: 12.5px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* click a bubble to open this tiny edit/reply menu, anchored to the row */ .msg-menu { position: absolute; top: -6px; z-index: 12; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow); padding: 4px; display: flex; gap: 2px; animation: modalPop .14s var(--ease-out); } .bubble-row.me .msg-menu { inset-inline-end: 0; transform: translateY(-100%); } .bubble-row.them .msg-menu { inset-inline-start: 0; transform: translateY(-100%); } .msg-menu button { font: inherit; font-weight: 600; font-size: 12.5px; color: var(--text); white-space: nowrap; background: transparent; border: 0; border-radius: 7px; padding: 7px 10px; cursor: pointer; transition: .12s; display: flex; align-items: center; gap: 6px; } .msg-menu button:hover { background: var(--panel); } .msg-menu button svg { width: 14px; height: 14px; } /* inline reply/edit buttons beside each bubble — revealed on hover (always visible on touch devices, where there is no hover). DOM order puts them on the bubble's inner side: before it on .me rows, after it on .them rows. */ .msg-actions { display: flex; gap: 4px; align-items: center; align-self: center; margin: 0 8px; flex: 0 0 auto; opacity: 0; transition: opacity .15s; } .bubble-row:hover .msg-actions, .bubble-row:focus-within .msg-actions { opacity: 1; } .msg-actions button { width: 28px; height: 28px; padding: 0; border-radius: 50%; cursor: pointer; border: 1px solid var(--line); background: var(--panel); color: var(--muted); display: flex; align-items: center; justify-content: center; transition: .15s; } .msg-actions button:hover { color: var(--accent); border-color: var(--accent); } .msg-actions button svg { width: 14px; height: 14px; } @media (hover: none) { .msg-actions { opacity: .8; } } /* reply/edit context bar above the composer */ .composer-context { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 10px; background: var(--panel); border: 1px solid var(--line); border-inline-start: 3px solid var(--accent); border-radius: 10px; font-size: 13px; } .composer-context .grow { min-width: 0; } .composer-context #ctxLabel { display: block; font-size: 12.5px; color: var(--accent); } .composer-context #ctxPreview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .composer-context button { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; background: var(--panel-2); color: var(--muted); display: grid; place-items: center; } .composer-context button:hover { color: var(--danger); } .typing { display: flex; gap: 8px; align-items: center; padding: 4px 22px 0; height: 22px; color: var(--muted); font-size: 12.5px; } .typing .dots { display: inline-flex; gap: 3px; } .typing .dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; } .typing .dots span:nth-child(2){ animation-delay: .2s; } .typing .dots span:nth-child(3){ animation-delay: .4s; } @keyframes blink { 0%,60%,100%{ opacity:.25 } 30%{ opacity:1 } } .composer { flex: 0 0 auto; padding: 14px 18px 18px; border-top: 1px solid var(--line); background: var(--bg-2); position: sticky; bottom: 0; z-index: 5; } /* Attach (left) → textarea → send (right) stays fixed regardless of language — only the textarea's own text direction follows the language (below). */ .composer .box { display: flex; gap: 10px; align-items: flex-end; direction: ltr; } .composer textarea { flex: 1; resize: none; font: inherit; font-size: 14.5px; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; max-height: 160px; min-height: 46px; line-height: 1.45; outline: none; transition: .15s; } .composer textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(166,116,255,.12); } html[lang="fa"] .composer textarea { direction: rtl; text-align: right; } .composer .send { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 13px; border: 0; cursor: pointer; display: grid; place-items: center; color: #04130f; background: linear-gradient(135deg, var(--accent), var(--accent-2)); transition: .15s; } .composer .send:hover { filter: brightness(1.1); transform: translateY(-1px); } .composer .send:disabled { opacity: .4; cursor: not-allowed; transform: none; } .composer .send svg { width: 19px; height: 19px; } .composer .hint { font-size: 11.5px; color: var(--faint); margin-top: 7px; padding-left: 4px; font-family: var(--mono); } .chat-empty { display: grid; place-items: center; height: 100%; text-align: center; color: var(--muted); } .chat-empty .ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin: 0 auto 14px; background: var(--panel-2); border: 1px solid var(--line); color: var(--accent); } .chat-empty .ic svg { width: 26px; height: 26px; } /* ---------- stats (admin) ---------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; } .stat { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); } .stat .k { font-size: 12px; color: var(--muted); font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; } .stat .v { font-size: 28px; font-weight: 750; letter-spacing: -.02em; margin-top: 6px; } .stat .v.accent { color: var(--accent); } /* ---------- modal ---------- */ .modal-bg { position: fixed; inset: 0; z-index: 90; background: rgba(4,8,12,.7); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; animation: fadeIn .16s var(--ease-out); } .modal { width: 100%; max-width: 440px; max-height: calc(100vh - 40px); overflow-y: auto; animation: modalPop .2s var(--ease-out); } @keyframes modalPop { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } } .check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); margin-bottom: 12px; cursor: pointer; user-select: none; } .check input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; flex: 0 0 auto; } .row-dim { opacity: .58; } .modal .pad { padding: 24px; } .modal h3 { font-size: 19px; margin-bottom: 6px; } .modal .sub { color: var(--muted); font-size: 14px; margin-bottom: 18px; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; } /* ---------- notice banners ---------- */ .notice { padding: 11px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.5; background: rgba(166,116,255,.08); border: 1px solid rgba(166,116,255,.3); color: var(--text); margin-bottom: 18px; white-space: pre-wrap; } .notice.warn { background: rgba(255,193,94,.08); border-color: rgba(255,193,94,.35); color: var(--warn); } .notice.ok { background: rgba(56,224,138,.08); border-color: rgba(56,224,138,.35); } /* ---------- divider / misc ---------- */ .divider { height: 1px; background: var(--line); margin: 18px 0; } .spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .stack { display: flex; flex-direction: column; gap: 4px; } .tagrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } @media (max-width: 980px) { .plans { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2, 1fr); } .chat-layout { grid-template-columns: 1fr; } .conv-list { position: fixed; inset: 62px 0 0 0; z-index: 15; width: 320px; max-width: 86%; transition: transform .2s; } .conv-list.hide { transform: translateX(-110%); } .back-btn { display: flex; } .settings-grid { column-count: 1; } /* The topbar nav becomes a hamburger-opened slide-in drawer below 980px — covers phones in BOTH orientations plus small tablets (a landscape phone is ~900px, well past the 760px phone breakpoint); a horizontal scroller of pills was too fiddly to swipe. The blur must go while the drawer exists: backdrop-filter makes the topbar the containing block for fixed descendants (Chrome), which would trap the drawer inside the 62px bar. A near-opaque background replaces it. */ .topbar { backdrop-filter: none; background: var(--glass-solid); } /* The sticky topbar (z-index:20) is its own stacking context, so the drawer nested inside it can never rise above the backdrop (z-index:45) on its own — that's what blurred the whole page and ate every tap. While the drawer is open, lift the entire topbar above the backdrop so the drawer shows and stays interactive; page content below the backdrop stays blurred/inert. */ body.drawer-open .topbar { z-index: 60; } .nav-burger { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; } .nav-burger svg { width: 19px; height: 19px; } .nav { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 50; width: min(280px, 78vw); flex-direction: column; gap: 6px; padding: 20px 14px 14px; overflow-y: auto; background: var(--bg-2); border-inline-end: 1px solid var(--line); transform: translateX(-108%); transition: transform .22s var(--ease-out); } html[dir="rtl"] .nav { transform: translateX(108%); } /* the rtl selector above is more specific than a lone .nav.open — spell out both open states so the drawer can actually slide in under dir="rtl" */ .nav.open, html[dir="rtl"] .nav.open { transform: none; box-shadow: var(--shadow); } .nav button { width: 100%; justify-content: flex-start; padding: 13px 14px; font-size: 14.5px; } } /* ---------- general phone/tablet layout (topbar, rows, modals) ---------- */ @media (max-width: 760px) { .topbar { padding: 0 12px; gap: 8px; } .topbar .left { gap: 10px; min-width: 0; flex: 1; } .brand { gap: 6px; min-width: 0; } .brand b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 38vw; } .brand .dim { display: none; } /* "Owner Console" label — the nav already makes context clear */ .topbar .right { gap: 8px; flex: 0 0 auto; } .who .meta { display: none; } /* keep just the avatar — name/role already shown elsewhere in-app */ .row { flex-wrap: wrap; } .row .tagrow { width: 100%; justify-content: flex-end; } .chat-head { padding: 0 14px; gap: 10px; } .modal-bg { padding: 12px; } .modal .pad { padding: 18px; } } @media (max-width: 480px) { .chat-head > .badge { display: none; } /* decorative reassurance pill — first to go when space is tight */ .stats { gap: 10px; } .stat { padding: 14px 16px; } .stat .v { font-size: 22px; } .plan { padding: 20px 18px; } } /* ============================================================ LANGUAGE SWITCH + RTL ============================================================ */ .lang-btn { position: fixed; top: 18px; inset-inline-end: 18px; z-index: 50; font-family: var(--mono); font-weight: 600; font-size: 12.5px; letter-spacing: .06em; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 15px; cursor: pointer; transition: .15s; } .lang-btn:hover { color: var(--text); border-color: var(--accent); transform: translateY(-1px); } .lang-btn.sm { position: static; padding: 7px 12px; font-size: 12px; } /* login page: theme + language controls grouped top-corner (RTL-aware) */ .auth-controls { position: fixed; top: 18px; inset-inline-end: 18px; z-index: 50; display: flex; gap: 8px; align-items: center; } /* Use logical properties so layout mirrors automatically under dir="rtl". */ .auth-side { border-inline-end: 1px solid var(--line); border-right: 0; } .conv-list { border-inline-end: 1px solid var(--line); border-right: 0; } .toast { border-inline-start: 3px solid var(--accent); border-left-width: 0; } .toast.err { border-inline-start-color: var(--danger); } .toast.ok { border-inline-start-color: var(--ok); } .conv-item { border-inline-start: 2px solid transparent; border-left: 0; } .conv-item.active { border-inline-start-color: var(--accent); } .composer .hint { padding-inline-start: 4px; padding-left: 0; } .who .meta { text-align: end; } #toasts { inset-inline-end: 18px; right: auto; } .plan .tag { inset-inline-end: 20px; right: auto; } /* ---------- Persian typography (Vazirmatn) ---------- */ html[lang="fa"] body { font-family: "Vazirmatn", "Segoe UI", "Tahoma", var(--font); line-height: 1.75; /* Persian script breathes better with more leading */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Even the "mono" bits use Vazirmatn in Persian (Persian digits/labels look right). */ html[lang="fa"] .mono, html[lang="fa"] .eyebrow, html[lang="fa"] .lang-btn, html[lang="fa"] .bubble .meta, html[lang="fa"] .conv-item .nm .t, html[lang="fa"] .row .when, html[lang="fa"] .stat .k, html[lang="fa"] .composer .hint, html[lang="fa"] .auth-foot, html[lang="fa"] .who .meta .r, html[lang="fa"] .msg-day { font-family: "Vazirmatn", "Segoe UI", "Tahoma", var(--mono); } /* letter-spacing severs Persian's connected letterforms — neutralise it everywhere it was applied for the Latin look, and relax the tight negative tracking on headings. */ html[lang="fa"] .eyebrow, html[lang="fa"] .who .meta .r, html[lang="fa"] .msg-day, html[lang="fa"] .stat .k, html[lang="fa"] .badge, html[lang="fa"] .lang-btn, html[lang="fa"] .nav button, html[lang="fa"] .conv-item .nm .t { letter-spacing: 0; } html[lang="fa"] h1, html[lang="fa"] h2, html[lang="fa"] h3, html[lang="fa"] .auth-side h1, html[lang="fa"] .plan .price .amt, html[lang="fa"] .stat .v, html[lang="fa"] .who .meta .n { letter-spacing: normal; } /* Persian headings carry weight well; nudge line-height tighter than body for big text. */ html[lang="fa"] h1, html[lang="fa"] .auth-side h1 { line-height: 1.35; } /* Slightly heavier base weight reads cleaner in Vazirmatn on dark UI. */ html[lang="fa"] .bubble, html[lang="fa"] .row .sub, html[lang="fa"] p.lead, html[lang="fa"] .page-head p { font-weight: 450; } /* Bubble side/tails are intentionally fixed (not mirrored) regardless of language — see .msgs above. */ html[dir="rtl"] .conv-list.hide { transform: translateX(110%); } /* ============================================================ IMAGE ATTACHMENTS ============================================================ */ .attach-btn { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 13px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: .15s; } .attach-btn:hover { color: var(--accent); border-color: var(--accent); } .attach-btn svg { width: 20px; height: 20px; } .attach-preview { padding-bottom: 10px; } .thumb { position: relative; display: inline-block; } .thumb img { height: 74px; width: auto; max-width: 170px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line-2); display: block; } .thumb.lg img { height: 120px; max-width: 240px; } .thumb-x { position: absolute; top: -8px; inset-inline-end: -8px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); cursor: pointer; font-size: 15px; line-height: 1; display: grid; place-items: center; padding: 0; } .thumb-x:hover { background: var(--danger); color: #fff; border-color: var(--danger); } /* in-message image */ .bubble .msg-text { white-space: pre-wrap; word-wrap: break-word; } .msg-img { max-width: 260px; max-height: 300px; width: auto; border-radius: 12px; display: block; cursor: zoom-in; } .msg-img + .msg-text { margin-top: 8px; } .bubble.img-only { background: transparent !important; border: 0 !important; padding: 0; } .bubble.img-only .meta { position: absolute; bottom: 8px; inset-inline-end: 10px; margin: 0; background: rgba(0,0,0,.55); color: #fff; padding: 1px 7px; border-radius: 8px; opacity: 1; } .bubble-row.me .bubble.img-only .meta { color: #fff; } /* receipt thumbnail in request/list rows */ .receipt-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 9px; border: 1px solid var(--line-2); cursor: zoom-in; flex: 0 0 auto; transition: .15s; } .receipt-thumb:hover { border-color: var(--accent); transform: translateY(-1px); } /* fullscreen lightbox */ .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(2,6,10,.92); display: grid; place-items: center; padding: 32px; cursor: zoom-out; animation: fadeIn .15s var(--ease-out); } .lightbox img { max-width: 92vw; max-height: 90vh; border-radius: 12px; box-shadow: var(--shadow); cursor: default; animation: modalPop .18s var(--ease-out); } .lb-close { position: fixed; top: 18px; inset-inline-end: 22px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; } .lb-close:hover { border-color: var(--accent); color: var(--accent); } /* ============================================================ PUBLIC MARKETING LANDING (/ when publicLanding is on) ============================================================ */ /* The app pages pin html/body to 100% height (chat layout). The landing is a normal long-scrolling document, so let it grow and scroll the window instead of trapping content inside a fixed-height body scroll container. */ html:has(.lp), body:has(.lp) { height: auto; min-height: 100%; overflow-y: visible; } .lp-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 26px; border-bottom: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(10px); } .lp-nav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); } .lp-nav .brand b { font-size: 17px; } .lp-actions { display: flex; align-items: center; gap: 10px; } .lp { max-width: 1080px; margin: 0 auto; padding: 0 22px 40px; } .lp-hero { text-align: center; padding: clamp(80px, 12vh, 132px) 0 clamp(52px, 8vh, 84px); } /* Bolder: the headline leads. Big, heavy, tight ink — contrast carries it, not colour. */ .lp-hero h1 { color: var(--text); font-size: clamp(2.4rem, 7vw, 4.5rem); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; margin: 18px 0 0; text-wrap: balance; } /* Emphasis is a single solid-accent phrase (no gradient text) — decisive, not decorative. */ .lp-hero .grad { color: var(--accent); } .lp-lead { color: var(--muted); font-size: clamp(16px, 2.3vw, 20px); max-width: 58ch; margin: 22px auto 0; line-height: 1.6; } .lp-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; } .lp-cta .btn { padding: 14px 28px; font-size: 15.5px; font-weight: 650; } .lp-badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; } .lp-section { padding: clamp(64px, 9vw, 108px) 0; } .lp-head { text-align: center; max-width: 680px; margin: 0 auto clamp(34px, 5vw, 52px); } .lp-head h2 { font-size: clamp(26px, 4.6vw, 44px); font-weight: 750; letter-spacing: -.028em; line-height: 1.1; margin-top: 10px; text-wrap: balance; } .lp-head .lp-lead { margin-top: 12px; } .lp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .lp-card { background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; } .lp-card .lp-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid var(--line-2); } .lp-card .lp-ic svg { width: 22px; height: 22px; } .lp-card h3 { font-size: 16.5px; margin-bottom: 7px; } .lp-card p { color: var(--muted); font-size: 14px; line-height: 1.65; } .lp-plans { max-width: 980px; margin: 0 auto; } .lp-empty { text-align: center; color: var(--muted); padding: 24px; } .lp-band { text-align: center; margin: 20px 0 10px; padding: 46px 24px; border-radius: 22px; border: 1px solid var(--line-2); background: radial-gradient(600px 240px at 50% -20%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--panel); } .lp-band h2 { font-size: clamp(24px, 4.5vw, 40px); font-weight: 750; margin-bottom: 22px; letter-spacing: -.028em; line-height: 1.1; text-wrap: balance; } .lp-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: 1080px; margin: 0 auto; padding: 24px 22px 40px; color: var(--faint); font-size: 13px; border-top: 1px solid var(--line); } .lp-footer a { color: var(--muted); text-decoration: none; } .lp-footer a:hover { color: var(--accent); } /* scroll-reveal: hidden until .in is added by the IntersectionObserver */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } @media (max-width: 860px) { .lp-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .lp-nav { padding: 10px 14px; } .lp-nav .brand b { font-size: 15px; } .lp-actions { gap: 7px; } .lp-grid { grid-template-columns: 1fr; } .lp-hero { padding: 60px 0 46px; } .lp-section { padding: 44px 0; } } /* ---------- landing editor: form + live preview iframe, icon picker ---------- */ .landing-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; } .le-form > .card { margin-bottom: 16px; } .le-preview { position: sticky; top: 82px; } .le-preview-head { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .le-frame-wrap { border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: var(--bg); height: calc(100vh - 170px); min-height: 460px; box-shadow: var(--shadow); } .le-frame-wrap iframe { width: 100%; height: 100%; border: 0; display: block; } .le-icons { display: flex; flex-wrap: wrap; gap: 6px; } .le-icon { width: 34px; height: 34px; padding: 0; border-radius: 9px; cursor: pointer; border: 1px solid var(--line); background: var(--panel); color: var(--muted); display: grid; place-items: center; transition: .12s; } .le-icon svg { width: 17px; height: 17px; } .le-icon:hover { border-color: var(--accent); color: var(--text); } .le-icon.on { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .le-icon-auto { width: auto; padding: 0 11px; font-size: 12px; font-weight: 600; } @media (max-width: 1024px) { .landing-editor { grid-template-columns: 1fr; } .le-preview { position: static; order: -1; } /* preview on top when stacked */ .le-frame-wrap { height: 62vh; } }