/* MOMU — "Doyat" theme (দোয়াত, ink-pot). Warm ink-on-paper: coffee-toned near-black ink in dark mode, rice-paper warmth in light mode, one marigold accent (a Bangla festival color, used sparingly — never as a wash or gradient background). Type: Bricolage Grotesque for display, Hind Siliguri for text (renders Bangla + Latin). */ :root { --font-display: "Bricolage Grotesque", "Hind Siliguri", "Noto Sans Bengali", system-ui, sans-serif; --font-text: "Hind Siliguri", "Noto Sans Bengali", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius-s: 9px; --radius-m: 14px; --radius-l: 20px; --sidebar-w: 288px; --fs: 16px; --density: 1; --lh: 1.55; } :root[data-fs="small"] { --fs: 13.5px; } :root[data-fs="large"] { --fs: 19px; } :root[data-density="compact"] { --density: .5; --lh: 1.38; } /* Accent hue (--h). Every surface is a low-saturation tint of it, so the theme stays neutral instead of washing the whole screen in one colour. */ :root, :root[data-accent="amber"] { --h: 38; --s: 78%; } :root[data-accent="orange"] { --h: 24; --s: 82%; } :root[data-accent="yellow"] { --h: 50; --s: 80%; } :root[data-accent="lime"] { --h: 86; --s: 55%; } :root[data-accent="green"] { --h: 148; --s: 55%; } :root[data-accent="teal"] { --h: 174; --s: 60%; } :root[data-accent="cyan"] { --h: 190; --s: 70%; } :root[data-accent="blue"] { --h: 214; --s: 80%; } :root[data-accent="indigo"] { --h: 236; --s: 70%; } :root[data-accent="violet"] { --h: 266; --s: 70%; } :root[data-accent="fuchsia"] { --h: 300; --s: 65%; } :root[data-accent="pink"] { --h: 330; --s: 70%; } :root[data-accent="red"] { --h: 4; --s: 72%; } :root[data-accent="white"] { --h: 0; --s: 0%; } /* no colour at all — see the neutral palettes below */ :root[data-theme="dark"] { --bg: hsl(var(--h) 10% 8%); --surface: hsl(var(--h) 10% 11%); --surface-2: hsl(var(--h) 9% 15%); --surface-3: hsl(var(--h) 8% 20%); --line: hsl(var(--h) 8% 24%); --text: hsl(var(--h) 20% 94%); --muted: hsl(var(--h) 8% 66%); --brand: hsl(var(--h) var(--s) 62%); --brand-strong: hsl(var(--h) var(--s) 70%); --on-brand: hsl(var(--h) 60% 8%); --brand-soft: hsl(var(--h) var(--s) 62% / .15); --danger: #E4574A; --danger-soft: rgba(228,87,74,.13); --ok: #6FB77E; --warn: #D9824A; --shadow: 0 10px 30px rgba(0,0,0,.45); --rule: rgba(255,255,255,.04); color-scheme: dark; } :root[data-theme="light"] { --bg: hsl(var(--h) 30% 97%); --surface: #FFFFFF; --surface-2: hsl(var(--h) 25% 94%); --surface-3: hsl(var(--h) 22% 89%); --line: hsl(var(--h) 18% 83%); --text: hsl(var(--h) 30% 12%); --muted: hsl(var(--h) 10% 40%); --brand: hsl(var(--h) var(--s) 38%); --brand-strong: hsl(var(--h) var(--s) 31%); --on-brand: #FFFFFF; --brand-soft: hsl(var(--h) var(--s) 38% / .11); --danger: #C23B2E; --danger-soft: rgba(194,59,46,.09); --ok: #2F7A3D; --warn: #B15A20; --shadow: 0 10px 30px rgba(20,20,30,.12); --rule: rgba(0,0,0,.04); color-scheme: light; } /* White accent: no tint anywhere, so the app feels like plain white. White → dark: soft neutral greys with WHITE buttons · light: pure white page with near-black buttons. */ :root[data-accent="white"][data-theme="dark"] { --bg: #121212; --surface: #181818; --surface-2: #202020; --surface-3: #2a2a2a; --line: #333333; --text: #FFFFFF; --muted: #A8A8A8; --brand: #FFFFFF; --brand-strong: #E6E6E6; --on-brand: #000000; --brand-soft: rgba(255,255,255,.12); } :root[data-accent="white"][data-theme="light"] { --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F5F5F5; --surface-3: #EBEBEB; --line: #DEDEDE; --text: #111111; --muted: #6B6B6B; --brand: #2B2B2B; --brand-strong: #111111; --on-brand: #FFFFFF; --brand-soft: rgba(0,0,0,.07); } /* Accent picker in Settings */ .swatches { display: flex; gap: 8px; flex-wrap: wrap; } .swatch { width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: hsl(var(--sw) 70% 52%); } .swatch[aria-pressed="true"] { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg) inset; } /* The global button:hover / :active / :focus background stays "stuck" after a tap on a phone and, on the already-selected swatch, painted it grey/black (looked like a bug). A swatch always keeps its own colour. */ .swatch:active, .swatch:focus, .swatch[aria-pressed="true"] { background: hsl(var(--sw) 70% 52%); } :where(html[data-input="mouse"]) .swatch:hover, :where(html[data-input="mouse"]) .swatch[aria-pressed="true"]:hover { background: hsl(var(--sw) 70% 52%); } /* The two neutral swatches: a real white and a real black dot (with a hairline so white shows on a white page). */ .swatch[data-accent="white"], .swatch[data-accent="white"]:active, .swatch[data-accent="white"]:focus, .swatch[data-accent="white"][aria-pressed="true"] { background: #FFFFFF; box-shadow: 0 0 0 1px #8a8a8a inset; } :where(html[data-input="mouse"]) .swatch[data-accent="white"]:hover { background: #FFFFFF; box-shadow: 0 0 0 1px #8a8a8a inset; } .msg.user { align-items: flex-start; gap: 6px; } /* Copy / Share / Edit for a message you sent (see enableUserActions in chat.js). Desktop: icons sit BELOW the bubble and fade in while the pointer is anywhere over the message's whole row (the row height is always reserved, so nothing jumps). Phones / touch: no icons at all — hold the message to get the same actions in a menu. */ .user-actions { display: flex; gap: 2px; justify-content: flex-end; margin-top: 4px; height: 30px; color: var(--muted); opacity: 0; transition: opacity .12s; } .msg.user:focus-within .user-actions { opacity: 1; } :where(html[data-input="mouse"]) .msg.user:hover .user-actions { opacity: 1; } .user-actions button { border: none; background: transparent; color: inherit; width: 30px; min-height: 30px; padding: 0; display: inline-grid; place-items: center; border-radius: 8px; } :where(html[data-input="mouse"]) .user-actions button:hover { background: var(--surface-2); color: var(--text); } .user-actions button svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .user-menu { min-width: 170px; } .msg.momu.regenerating .content { opacity: .5; transition: opacity .15s; } /* touch behaviour (was a media query; now follows html[data-input], see theme-init.js) */ html[data-input="touch"] .user-actions { display: none; } html[data-input="touch"] .msg.user.has-actions .stack { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } html[data-input="touch"] .msg img, html[data-input="touch"] .msg-images img, html[data-input="touch"] .attach-thumb img { -webkit-touch-callout: none; -webkit-user-drag: none; } html[data-input="touch"] .msg-actions .regen { display: none; } /* Read aloud lives ONLY in the reply's "..." menu, on every device (phone, PC, Windows app). The button itself stays in the page, hidden, so js/speak.js can still follow it (Stop state, "reply left the page" check). */ .msg-actions .speak { display: none !important; } .edit-box { width: min(86%, 620px); display: flex; flex-direction: column; gap: 8px; } .edit-box textarea { min-height: 70px; } .edit-box .row { display: flex; gap: 8px; justify-content: flex-end; } /* Editing a message that has pictures/files: those stay put (read-only) above the editable textarea, with a small note explaining why they can't be touched here. */ .edit-box .edit-attachments { display: flex; flex-direction: column; gap: 6px; opacity: .85; } .edit-box .edit-attachments .msg-images img, .edit-box .edit-attachments .msg-files .file-chip { cursor: default; } .edit-lock-note { margin: 0; font-size: .78rem; color: var(--muted); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; font-size: var(--fs); } /* No pinch-zoom and no double-tap zoom anywhere in the app (the viewport tag says the same; this covers browsers that ignore it). pan-x/pan-y keep normal scrolling. The camera's own picture viewer sets touch-action: none on itself and handles its pinch in code, so it is unaffected. */ html { touch-action: pan-x pan-y; } html, body { height: 100%; background: var(--bg); } /* Pages with a sticky top bar (Settings, Admin, Devices): a sticky header can only stay on screen inside its parent. With the body fixed at 100% height that parent ended after one screen, so on a phone the bar scrolled away with the content. These pages let the body grow with its content instead, so the bar stays visible whether you scroll down or not. (The class is added by common.js for browsers without :has.) */ body:has(> .page-bar), body:has(> .admin-bar), body.has-sticky-bar { height: auto; min-height: 100%; } /* The chat screen is exactly one window tall and scrolls inside its own panels (chat list, messages). The page itself must never scroll: selecting text makes browser extensions (Grammarly and similar) and the browser's own selection handles drop small elements just past the bottom edge, and on a page that was merely 100% tall that grew a second, page-level scrollbar next to the real one. */ html.chat-page, html.chat-page body { overflow: hidden; overscroll-behavior: none; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-text); font-size: 1rem; line-height: var(--lh); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--brand); } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0; letter-spacing: -.02em; font-weight: 700; } ::selection { background: var(--brand-soft); } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Controls ---------- */ button { font: inherit; font-size: .9rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px 14px; min-height: 38px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s, border-color .15s, opacity .15s; } :where(html[data-input="mouse"]) button:hover { background: var(--surface-3); } button:disabled { opacity: .5; cursor: not-allowed; } button.primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); font-weight: 600; } :where(html[data-input="mouse"]) button.primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); } button.ghost { background: transparent; border-color: transparent; } :where(html[data-input="mouse"]) button.ghost:hover { background: var(--surface-2); } button.danger { color: var(--danger); background: transparent; border-color: var(--danger-soft); } :where(html[data-input="mouse"]) button.danger:hover { background: var(--danger-soft); } button.small { min-height: 30px; padding: 4px 10px; font-size: .82rem; } button.icon { width: 40px; padding: 0; display: inline-grid; place-items: center; } button svg, .icon-svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } input, textarea, select { font: inherit; font-size: 1rem; /* 16px min stops iOS zooming on focus */ color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; width: 100%; min-height: 42px; } textarea { resize: vertical; } input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } input:disabled, textarea:disabled, select:disabled { opacity: .55; cursor: not-allowed; } label { font-size: .88rem; color: var(--muted); } .field { display: flex; flex-direction: column; gap: 6px; } .field > small { color: var(--muted); font-size: .8rem; } /* Themed scrollbars — matches the surface/line palette instead of the OS default */ * { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; border: 2px solid var(--bg); background-clip: padding-box; } :where(html[data-input="mouse"]) ::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; } .segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; flex-wrap: wrap; } .segmented button { border: none; background: transparent; border-radius: 9px; min-height: 32px; padding: 4px 12px; } .segmented button[aria-pressed="true"], .segmented button[aria-pressed="true"]:hover { background: var(--brand); color: var(--on-brand); font-weight: 600; } .switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: none; } .switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; } .switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line); transition: background .15s; } .switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: transform .18s, background .15s; } .switch input:checked + span { background: var(--brand); border-color: var(--brand); } .switch input:checked + span::after { transform: translateX(18px); background: var(--on-brand); } .switch input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; } .pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 999px; font-size: .75rem; background: var(--surface-3); color: var(--muted); white-space: nowrap; } .pill.brand { background: var(--brand-soft); color: var(--brand); } .pill.ok { background: rgba(35,168,90,.14); color: var(--ok); } .pill.warn { background: rgba(228,185,92,.16); color: var(--warn); } .pill.bad { background: var(--danger-soft); color: var(--danger); } .logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--text); text-decoration: none; } .logo img { width: 30px; height: 30px; display: block; } #toasts { position: fixed; z-index: 200; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; width: min(92vw, 420px); pointer-events: none; } .toast { pointer-events: auto; background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-size: .9rem; box-shadow: var(--shadow); transition: opacity .3s, transform .3s; display: flex; align-items: center; gap: 8px; } .toast.error { background: var(--danger); color: #fff; } .toast.out { opacity: 0; transform: translateY(6px); } .toast-text { flex: 1; } /* The little "×2", "×3…" counter that appears when the same toast repeats instead of a new bubble stacking underneath it — see toast() in common.js. */ .toast-count { flex: none; font-size: .74rem; font-weight: 700; background: rgba(255,255,255,.22); padding: 1px 7px; border-radius: 999px; } /* ---------- Auth page (unified "Log in or sign up") ---------- */ .auth-page { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); background: var(--bg); } /* Left: a quiet ruled page with a small chat that plays once (public/js/hero-demo.js). Every colour comes from the same theme variables as the login form on the right (--surface, --text, --muted, --brand, --on-brand, --line), so it follows light/dark and the accent colour. Only transform/opacity animate. */ .auth-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; min-height: 0; padding: clamp(24px, 4vw, 52px) clamp(28px, 4.5vw, 64px) clamp(24px, 4.5vh, 48px); background: var(--surface); color: var(--text); box-shadow: inset -1px 0 0 var(--line); } /* ruled paper */ .auth-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule) 31px 32px); background-position: 0 -1px; } .hero-logo { align-self: flex-start; font-size: 1.1rem; letter-spacing: .02em; animation: fadeUp .7s ease both; } .hero-stage { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 4vh, 40px); padding: clamp(14px, 2.5vh, 28px) 0 0; } .hero-copy { margin: 0; max-width: none; } .hero-title { font-size: clamp(2.1rem, 3.3vw, 3.4rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 700; text-wrap: balance; animation: fadeUp .8s .12s cubic-bezier(.2,.7,.2,1) both; } .hero-title span { display: block; } .hero-title span + span { color: var(--brand); } .hero-sub { margin: 16px 0 0; max-width: 34rem; color: var(--muted); font-size: 1.02rem; line-height: 1.65; animation: fadeUp .8s .24s cubic-bezier(.2,.7,.2,1) both; } /* The chat preview is a self-contained window: it has a fixed, comfortable height, so the left side is always filled and never half empty. */ .hc-chat { position: relative; flex: none; width: 100%; height: clamp(380px, 54vh, 540px); display: flex; flex-direction: column; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 34px 60px -40px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.06); overflow: hidden; animation: fadeUp .9s .4s ease both; } .hc-chat-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: .92rem; } .hc-chat-head img { width: 24px; height: 24px; border-radius: 8px; } .hc-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--muted); } .hc-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: blink 2.2s ease-in-out infinite; } .hc-chat-thread { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; padding: 0 16px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px); mask-image: linear-gradient(to bottom, transparent 0, #000 36px); } .hc-chat-in { position: absolute; left: 16px; right: 16px; bottom: 0; display: flex; flex-direction: column; gap: 14px; padding: 0 0 12px; will-change: transform; transition: opacity .45s ease; } .hc-chat-in.out { opacity: 0; } .hc-empty { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 8px; padding: 0 12%; transition: opacity .4s ease; } .hc-empty span { padding: 6px 13px; border-radius: 999px; border: 1px dashed var(--line); color: var(--muted); font-size: .82rem; } .hc-chat.has-msgs .hc-empty { opacity: 0; } .hc-msg { display: flex; opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .38s ease, transform .45s cubic-bezier(.2,.8,.2,1); } .hc-msg.in { opacity: 1; transform: none; } .hc-msg.user { align-self: flex-end; max-width: 88%; transform-origin: 100% 100%; } .hc-msg.ai { align-self: flex-start; max-width: 96%; gap: 10px; align-items: flex-start; transform-origin: 0 100%; } .hc-msg-av { flex: none; width: 28px; height: 28px; border-radius: 9px; margin-top: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.18); } .hc-msg-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; } .hc-bubble { padding: 10px 16px; font-family: var(--font-text); font-size: .98rem; line-height: 1.6; overflow-wrap: anywhere; } .hc-msg.user .hc-bubble { background: var(--brand); color: var(--on-brand); font-weight: 500; border-radius: 18px 18px 6px 18px; box-shadow: 0 8px 16px -12px var(--brand); } .hc-msg.ai .hc-bubble { background: var(--surface-2); color: var(--text); border-radius: 6px 18px 18px 18px; border: 1px solid var(--line); min-height: 44px; } .hc-bubble.hide { display: none; } .hc-text { white-space: pre-wrap; } .hc-typing { display: none; gap: 5px; align-items: center; height: 24px; } .hc-typing.on { display: inline-flex; } .hc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: bounce 1s ease-in-out infinite; } .hc-typing i:nth-child(2) { animation-delay: .15s; } .hc-typing i:nth-child(3) { animation-delay: .3s; } .hc-stream-caret { display: none; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--brand); animation: blink .9s steps(1) infinite; } .hc-stream-caret.on { display: inline-block; } .hc-msg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: .74rem; color: var(--muted); background: var(--surface); opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; } .hc-msg-chip.in { opacity: 1; transform: none; } .hc-msg-chip svg { width: 12px; height: 12px; color: var(--brand); flex: none; } .hc-tags { display: flex; flex-wrap: wrap; gap: 6px; } /* attachments (picture / file) inside the sent message and inside the message box */ .hc-att { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; padding: 5px 12px 5px 5px; border-radius: 12px; background: rgba(255,255,255,.18); font-size: .82rem; font-weight: 600; } .hc-att svg { flex: none; width: 30px; height: 37px; border-radius: 6px; display: block; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .hc-att small { display: block; font-weight: 500; opacity: .8; font-size: .72rem; } .hc-comp-attach { display: none; flex: none; align-items: center; gap: 8px; max-width: 46%; padding: 4px 10px 4px 4px; margin-left: -8px; border-radius: 12px; background: var(--surface-3); font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: fadeUp .35s ease both; } .hc-comp-attach.on { display: inline-flex; } .hc-comp-attach svg { flex: none; width: 24px; height: 30px; border-radius: 5px; } /* "what MOMU is doing" rows: reading a picture / file, searching the web, then the sources it used */ .hc-tools { display: flex; flex-direction: column; gap: 7px; } .hc-tool { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; } .hc-tool.in { opacity: 1; transform: none; } .hc-tool .hc-spin { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--brand); animation: spin .8s linear infinite; } .hc-tool.done .hc-spin { animation: none; border: 0; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 80% no-repeat; } .hc-tool b { color: var(--text); font-weight: 600; } .hc-srcs { display: flex; flex-wrap: wrap; gap: 6px; } .hc-src { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: .76rem; color: var(--text); opacity: 0; transform: translateY(4px) scale(.96); transition: opacity .35s ease, transform .35s ease; } .hc-src.in { opacity: 1; transform: none; } .hc-src i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .66rem; font-weight: 700; color: #fff; background: var(--brand); text-transform: uppercase; } .hc-chat-composer { flex: none; display: flex; align-items: center; gap: 10px; min-height: 56px; margin: 0 12px 12px; padding: 0 10px 0 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 24px -18px rgba(0,0,0,.3); transition: border-color .25s ease, box-shadow .25s ease; } .hc-chat-composer.active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 10px 24px -18px rgba(0,0,0,.3); } .hc-comp-field { flex: 1; min-width: 0; display: flex; align-items: center; font-family: var(--font-text); font-size: 1rem; white-space: nowrap; overflow: hidden; } .hc-comp-ph { color: var(--muted); opacity: .85; } .hc-chat-composer.active .hc-comp-ph, .hc-chat-composer.has-text .hc-comp-ph { display: none; } .hc-comp-caret { display: none; width: 2px; height: 1.15em; margin-left: 1px; background: var(--brand); animation: blink .9s steps(1) infinite; } .hc-chat-composer.active .hc-comp-caret { display: inline-block; } .hc-comp-send { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--surface-3); color: var(--muted); transition: background .25s ease, color .25s ease, transform .16s ease; } .hc-comp-send.ready { background: var(--brand); color: var(--on-brand); } .hc-comp-send.press { transform: scale(.86); } @keyframes spin { to { transform: rotate(360deg); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes bounce { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } } @keyframes blink { 50% { opacity: 0; } } /* shorter screens: tighten the headline so the chat keeps room */ @media (max-height: 800px) { .hero-title { font-size: clamp(1.9rem, 2.9vw, 2.8rem); } .hero-sub { margin-top: 10px; font-size: .94rem; line-height: 1.55; } .hc-chat { height: clamp(340px, 54vh, 450px); } } @media (max-height: 720px) { .hero-sub { display: none; } .hero-stage { gap: 18px; } .hc-chat { height: clamp(320px, 58vh, 420px); } } /* Right: one calm column. Inputs/buttons follow the site theme (light or dark). */ .auth-panel { display: flex; align-items: center; justify-content: center; padding: max(28px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom)); } .auth-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 18px; } .mobile-logo { display: none; align-self: center; font-size: 1.35rem; } .mobile-tag { display: none; } .auth-view { display: flex; flex-direction: column; gap: 16px; animation: fadeUp .45s cubic-bezier(.2,.7,.2,1) both; } .auth-view.hidden { display: none; } .auth-title { font-family: var(--font-display); font-weight: 600; font-size: 1.85rem; letter-spacing: -.02em; text-align: center; margin: 0 0 6px; } .auth-card form { display: flex; flex-direction: column; gap: 12px; } .auth-card .field > small { margin: 2px 4px 0; } .auth-card input:not(.visually-hidden) { width: 100%; box-sizing: border-box; min-height: 54px; padding: 0 18px; border-radius: 16px; font-size: max(16px, 1rem); border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 1rem; font-family: inherit; transition: border-color .15s, box-shadow .15s; } .auth-card input::placeholder { color: var(--muted); opacity: .85; } .auth-card input:not(.visually-hidden):focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); } .auth-card .pw-wrap > input { padding-right: 52px; } .auth-card .otp-input { text-align: center; letter-spacing: .6em; padding-left: calc(18px + .6em); font-size: 1.35rem; font-weight: 700; } .auth-card .error-msg { color: var(--danger); font-size: .9rem; min-height: 0; text-align: center; } .auth-card .error-msg:empty { display: none; } /* Continue + Continue with Google: always the accent colour (--brand / --on-brand), on every device and theme. */ .auth-card button.primary, .auth-card .g-btn, .auth-card .g-btn:focus, .auth-card .g-btn:active { width: 100%; min-height: 54px; border-radius: 16px; font-size: 1rem; font-weight: 600; letter-spacing: .005em; background: var(--brand); color: var(--on-brand); border: 1px solid var(--brand); box-shadow: 0 1px 2px rgba(0,0,0,.14); transition: background .15s, border-color .15s, transform .1s, box-shadow .15s, opacity .15s; } .auth-card button.primary { margin-top: 2px; } .auth-card .g-btn { gap: 12px; } .auth-card button.primary:active, .auth-card .g-btn:active { transform: scale(.985); } .auth-card button.primary:disabled { opacity: .55; cursor: default; box-shadow: none; } .auth-card button.primary:focus-visible, .auth-card .g-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* Continue gets a slightly deeper accent on hover; "Continue with Google" has no hover effect at all. */ :where(html[data-input="mouse"]) .auth-card button.primary:hover:not(:disabled) { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--on-brand); } .auth-card .g-btn-icon { width: 28px; height: 28px; border-radius: 9px; background: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 1px 2px rgba(0,0,0,.18); } .auth-card .g-btn-icon svg { width: 18px; height: 18px; } .auth-divider { margin: 2px 0; font-size: .75rem; letter-spacing: .12em; } .auth-divider.hidden { display: none; } .auth-lede { text-align: center; margin: 0; } .auth-switch { text-align: center; color: var(--muted); font-size: .92rem; margin: 0; } .auth-switch button { background: none; border: none; color: var(--brand); padding: 4px 2px; min-height: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-family: inherit; font-size: inherit; } .auth-forgot { text-align: left; margin: -2px 0 0 4px; } .auth-legal { margin: 6px 0 0; text-align: center; color: var(--muted); font-size: .8rem; line-height: 1.55; } .auth-card .auth-legal a { color: var(--text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; padding: 2px 1px; } .auth-help { font-size: .85rem; line-height: 1.5; } .auth-help.hidden { display: none; } .auth-help a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 4px 2px; } .auth-note { margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(228,185,92,.13); color: var(--warn); font-size: .88rem; text-align: center; } .email-chip { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; padding: 0 16px 0 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: 1rem; cursor: pointer; text-align: left; transition: border-color .15s; } .email-chip:hover { border-color: var(--muted); background: var(--surface-2); } .email-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .email-chip-edit { flex: none; color: var(--brand); font-weight: 600; font-size: .9rem; } .auth-card .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; opacity: 0; pointer-events: none; } /* Desktop: no box — the form sits straight on the page background, centred in the right half. */ @media (min-width: 901px) { .auth-panel { padding: 40px 32px; } .auth-card { max-width: 400px; padding: 0; gap: 0; background: none; border: 0; border-radius: 0; box-shadow: none; } .auth-card .auth-title { font-size: 2rem; margin-bottom: 14px; } .auth-view { gap: 14px; } } /* Phone / tablet: no hero. First screen = brand centred in the open space, everything you tap anchored at the bottom (like ChatGPT). Later steps (password, create account, codes…) put a small logo on top and the form right under it. */ @media (max-width: 900px) { .auth-page { grid-template-columns: 1fr; } .auth-hero { display: none; } .auth-panel { align-items: stretch; padding: calc(env(safe-area-inset-top, 0px) + 28px) 22px calc(env(safe-area-inset-bottom, 0px) + 24px); } .auth-card { max-width: 460px; margin: 0 auto; flex: 1 1 auto; gap: 0; } .mobile-logo { display: inline-flex; align-self: center; margin: 5vh 0 30px; font-size: 1.3rem; } .auth-card .auth-title { font-size: 1.75rem; margin-bottom: 8px; } .auth-view { gap: 14px; } .auth-page[data-view="start"] .mobile-logo { flex: 1 1 auto; flex-direction: column; justify-content: center; gap: 18px; margin: 0; min-height: 120px; font-size: 2.1rem; letter-spacing: .02em; pointer-events: none; } .auth-page[data-view="start"] .mobile-logo img { width: 84px; height: 84px; border-radius: 24px; box-shadow: 0 2px 8px rgba(0,0,0,.16); } .auth-page[data-view="start"] .mobile-tag { display: block; max-width: 18rem; margin: -4px auto 0; text-align: center; font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; letter-spacing: 0; color: var(--muted); line-height: 1.35; } .auth-page[data-view="start"] #start-view { padding-top: 12px; } .auth-page[data-view="start"] .auth-title { font-size: 1.45rem; margin-bottom: 4px; } } @media (max-width: 900px) and (max-height: 640px) { .auth-page[data-view="start"] .mobile-logo img { width: 56px; height: 56px; border-radius: 17px; } .auth-page[data-view="start"] .mobile-logo { font-size: 1.6rem; gap: 12px; } } @media (prefers-reduced-motion: reduce) { .auth-hero, .auth-hero *, .auth-hero *::before, .auth-hero *::after, .auth-view, .auth-view > * { animation: none !important; transition: none !important; } } /* ---------- Login polish: soft accent glow behind the form, nicer fields/buttons, gentle staggered entrance ---------- */ .auth-panel { position: relative; isolation: isolate; } /* (the soft accent glow behind the form was removed — the login page is a clean flat surface) */ .auth-panel::before { content: none; } .auth-sub { margin: -4px 0 10px; text-align: center; color: var(--muted); font-size: .96rem; line-height: 1.5; } .auth-card .auth-title { color: var(--text); } .auth-card input:not(.visually-hidden) { box-shadow: none; } .auth-card input:not(.visually-hidden):hover:not(:focus) { border-color: color-mix(in srgb, var(--brand) 38%, var(--line)); } .auth-card button.primary, .auth-card .g-btn { background-image: none; box-shadow: 0 1px 2px rgba(0,0,0,.14); } .auth-card .g-btn-icon { box-shadow: none; } .auth-divider { color: var(--muted); } .auth-view > * { animation: fadeUp .5s cubic-bezier(.2,.7,.2,1) both; } .auth-view > :nth-child(2) { animation-delay: .04s; } .auth-view > :nth-child(3) { animation-delay: .08s; } .auth-view > :nth-child(4) { animation-delay: .12s; } .auth-view > :nth-child(5) { animation-delay: .16s; } .auth-view > :nth-child(n+6) { animation-delay: .2s; } @media (max-width: 900px) { .auth-sub { display: none; } /* Steps 2+ (password, create account, codes…): logo + form sit together in the vertical middle, a touch above centre. */ .auth-page:not([data-view="start"]) .auth-card { justify-content: center; } .auth-page:not([data-view="start"]) .mobile-logo { margin: 0 0 26px; } .auth-page:not([data-view="start"]) .auth-panel { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 9vh); } } /* ---------- Chat shell ---------- */ .app { display: flex; height: 100vh; height: 100dvh; height: calc(var(--app-vh, 1vh) * 100); overflow: hidden; } .sidebar { width: var(--sidebar-w); flex: none; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 14px 12px 12px; gap: 10px; transition: width .2s ease, padding .2s ease, opacity .15s ease; position: relative; } .sidebar.resizing { transition: none; } /* Drag handle for the desktop-only resizable sidebar (see the drag logic in chat.js). Sits half on/half off the existing border so it's easy to grab without adding a visible strip. */ .sidebar-resize-handle { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 5; background: transparent; touch-action: none; } .sidebar-resize-handle::after { content: ""; position: absolute; top: 0; right: 2px; width: 2px; height: 100%; background: transparent; transition: background .15s ease; } .sidebar-resize-handle.dragging::after, .sidebar-resize-handle:focus-visible::after { background: var(--brand); opacity: .6; } :where(html[data-input="mouse"]) .sidebar-resize-handle:hover::after { background: var(--brand); opacity: .6; } .sidebar-resize-handle:focus-visible { outline: none; } /* Invisible grab strip on the window's left edge, shown only while the desktop sidebar is collapsed: the cursor becomes the resize arrows and dragging right reopens the sidebar (see chat.js). */ .sidebar-reopen-handle { display: none; } /* Desktop: the sidebar keeps its chosen width whatever the window size. When the window is too narrow for both, the page scrolls sideways (the sidebar stays pinned to the left) instead of the sidebar closing itself. */ /* [wide layout: every computer, any window width] */ :where(html[data-layout="wide"]) .app { overflow: hidden; } :where(html[data-layout="wide"]) .main { min-width: 0; } :where(html[data-layout="wide"]) .sidebar { position: sticky; left: 0; z-index: 20; } /* [wide layout: every computer, any window width] */ :where(html[data-layout="wide"]) .app.sidebar-collapsed .sidebar-reopen-handle { display: block; position: fixed; top: 0; left: 0; width: 8px; height: 100%; cursor: col-resize; z-index: 55; background: transparent; } body.sidebar-resizing, body.sidebar-resizing * { cursor: col-resize !important; user-select: none !important; } .sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 4px; } .sidebar-head-actions { display: flex; align-items: center; gap: 2px; } .sidebar-head a.logo { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; border-radius: 10px; padding: 2px 4px; margin-left: -4px; -webkit-tap-highlight-color: transparent; } .sidebar-head a.logo, .sidebar-head a.logo:hover, .sidebar-head a.logo:active, .sidebar-head a.logo:focus, .sidebar-head a.logo:focus-visible { background: transparent; outline: none; box-shadow: none; } /* The two top-level sidebar actions ("New chat" and "Projects") — plain nav rows, same size and weight as any other nav entry, not a big standalone pill button. */ .sidebar-nav { display: flex; flex-direction: column; gap: 1px; } .nav-item { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 10px; background: transparent; border: none; color: var(--text); font-size: .93rem; font-weight: 500; cursor: pointer; text-align: left; } :where(html[data-input="mouse"]) .nav-item:hover { background: var(--surface-2); } .nav-item.active { background: var(--surface-2); font-weight: 600; } .nav-item svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .chat-search { position: relative; } .chat-search input { padding-left: 36px; min-height: 40px; background: var(--surface-2); } .chat-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; pointer-events: none; } .chat-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; margin: 0 -4px; padding: 0 4px; overscroll-behavior: contain; } .chat-group { font-size: .78rem; color: var(--muted); padding: 12px 8px 4px; } /* Marks the first group heading of a new sidebar section (Pinned / a project / the plain date-grouped chats) so the sections read as visually separate blocks, not one long list — set via chat-group-sep in chat.js, only on the group that starts a new section. */ .chat-group.chat-group-sep { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 14px; } /* A project's own name heading the chats inside it — this is a title the person chose, not a date label like "Today"/"Yesterday", so it gets real weight instead of the tiny muted .chat-group style above. */ .chat-group.chat-group-project { font-size: .95rem; font-weight: 700; color: var(--text); padding: 14px 8px 6px; display: flex; align-items: center; gap: 6px; } .chat-group.chat-group-project svg { width: 15px; height: 15px; flex: none; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .chat-group-project .proj-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-group-project .proj-menu-btn { opacity: 0; border: none; background: transparent; color: var(--muted); min-height: 26px; width: 26px; padding: 0; display: grid; place-items: center; border-radius: 7px; flex: none; } .chat-group-project .proj-menu-btn[aria-expanded="true"] { opacity: 1; } :where(html[data-input="mouse"]) .chat-group-project:hover .proj-menu-btn { opacity: 1; } .chat-group-project .proj-menu-btn svg { width: 15px; height: 15px; } .chat-group-project .proj-menu-btn[aria-expanded="true"] { color: var(--text); background: var(--surface-3); } :where(html[data-input="mouse"]) .chat-group-project .proj-menu-btn:hover { color: var(--text); background: var(--surface-3); } .chat-group-empty { color: var(--muted); font-size: .82rem; padding: 2px 10px 10px 30px; } .chat-item { display: flex; align-items: center; gap: 4px; padding: 0 4px 0 10px; border-radius: 10px; cursor: pointer; min-height: 42px; } .chat-item.active { background: var(--surface-2); } :where(html[data-input="mouse"]) .chat-item:hover { background: var(--surface-2); } .chat-item.active { box-shadow: inset 3px 0 0 var(--brand); } .chat-item .title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .93rem; } /* A chat that belongs to a project: the project's name, small and faded, right after the title. */ .chat-item .chat-project-tag { flex: 0 1 auto; min-width: 0; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; color: var(--muted); opacity: .8; margin-left: 4px; } .chat-item .pin-btn { margin-left: auto; } .chat-item .row-btn { flex: none; box-sizing: border-box; opacity: 0; border: none; background: transparent; color: var(--muted); min-height: 32px; height: 32px; min-width: 32px; width: 32px; padding: 0; display: grid; place-items: center; border-radius: 8px; } /* flex:none → a long title / project tag can never squeeze the pin and "..." buttons: same place and same hover size on every row */ .chat-item.active .row-btn, .chat-item:focus-within .row-btn { opacity: 1; } :where(html[data-input="mouse"]) .chat-item:hover .row-btn { opacity: 1; } :where(html[data-input="mouse"]) .chat-item .row-btn:hover { color: var(--danger); background: var(--danger-soft); } :where(html[data-input="mouse"]) .chat-item .row-btn.pin-btn:hover { color: var(--brand); background: var(--brand-soft); } /* Per-chat reply status in the sidebar: spinner while MOMU is still answering, blue dot once a reply is waiting. */ .chat-item .chat-status, .pj-chat-row .chat-status { flex: none; margin-left: auto; margin-right: 6px; width: 14px; height: 14px; display: inline-block; } .chat-item .chat-status + .pin-btn { margin-left: 0; } .chat-item .chat-status.is-working, .pj-chat-row .chat-status.is-working { border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--brand); animation: chat-status-spin .8s linear infinite; box-sizing: border-box; } .chat-item .chat-status.is-unread, .pj-chat-row .chat-status.is-unread { width: 8px; height: 8px; margin-left: auto; margin-right: 10px; border-radius: 50%; background: #3b82f6; } /* While MOMU is answering in a chat, its row shows ONLY the spinner, at the far right where the pin / "..." buttons normally sit. */ .chat-item.is-busy .row-btn, .chat-item.is-busy.pinned .row-btn { display: none; } .chat-item.is-busy .chat-status.is-working { margin-left: auto; margin-right: 9px; } .pj-chat-row.is-busy .pj-chat-menu { visibility: hidden; pointer-events: none; } .chat-item.is-busy { -webkit-touch-callout: none; } @keyframes chat-status-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .chat-item .chat-status.is-working { animation-duration: 2s; } } /* "Reply ready" notice for a chat you're not looking at. Click it to open that chat; it fades on its own. */ #reply-notices { position: fixed; top: calc(max(0px, env(safe-area-inset-top)) + 62px); right: 14px; z-index: 300; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 28px)); pointer-events: none; } .reply-notice { pointer-events: auto; text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); cursor: pointer; min-height: 0; animation: reply-notice-in .22s ease; transition: opacity .2s ease, transform .2s ease; } .reply-notice strong { font-size: .93rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reply-notice span { font-size: .86rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reply-notice.out { opacity: 0; transform: translateY(-6px); } :where(html[data-input="mouse"]) .reply-notice:hover { background: var(--surface-2); } @keyframes reply-notice-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* [compact layout: phones only] */ :where(html[data-layout="compact"]) #reply-notices { top: calc(max(0px, env(safe-area-inset-top)) + 62px); right: 50%; transform: translateX(50%); } /* just under the top bar, so the menu / title / incognito buttons stay tappable */ .chat-item.pinned .pin-btn { opacity: 1; color: var(--brand); } .chat-item.pinned .pin-btn svg, .chat-item.pinned .pin-btn:hover svg { fill: currentColor; } .chat-empty { color: var(--muted); font-size: .9rem; padding: 14px 8px; } .sidebar-foot { border-top: 1px solid var(--line); padding-top: 10px; display: flex; align-items: center; gap: 10px; } .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; flex: none; text-transform: uppercase; background-size: cover; background-position: center; } .avatar.has-pic { color: transparent; } .avatar-lg { width: 72px; height: 72px; font-size: 1.6rem; } .avatar-picker { display: flex; align-items: center; gap: 16px; padding: 4px 0; } .avatar-picker-actions { display: flex; flex-direction: column; gap: 8px; } .avatar-picker-actions button { width: fit-content; } .who { min-width: 0; flex: 1; line-height: 1.25; } .who b { display: block; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .who span { font-size: .78rem; color: var(--muted); } /* Desktop: the avatar + name button that opens the account dropdown (Settings/Admin/Log out — see openAccountMenu in chat.js). Plain flex row, no button chrome, so it still looks like the old static avatar+name — just with a hover state and a click target now. */ .profile-trigger { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; border: none; background: transparent; padding: 6px; margin: -6px; border-radius: var(--radius-s); text-align: left; cursor: pointer; } .profile-trigger[aria-expanded="true"] { background: var(--surface-2); } :where(html[data-input="mouse"]) .profile-trigger:hover { background: var(--surface-2); } /* Desktop keeps only the profile trigger down here — Admin/Settings move into the dropdown it opens, so the standalone icon row is hidden. The mobile media query below brings it back. */ .foot-actions { display: none; gap: 2px; } .foot-actions button, .foot-actions a { color: var(--muted); } .foot-actions a.icon { display: inline-grid; place-items: center; width: 40px; min-height: 38px; border-radius: var(--radius-s); } :where(html[data-input="mouse"]) .foot-actions a.icon:hover { background: var(--surface-2); color: var(--text); } .main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; } /* Plain chats (and the new-chat screen) get a transparent header — no bar, no border — with each action floating as its own circle (see the icon rules below). Only a chat that lives in a project keeps the boxed look, since it has a project name + chat title to sit on top of; .in-project is toggled in chat.js (updateChatHeader). */ .topbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; min-height: 56px; border-bottom: 1px solid transparent; background: transparent; } .topbar .menu-btn { display: none; } .topbar #expand-sidebar-btn { display: none; } /* Sidebar toggle (hamburger / expand) is always its own circle, on mobile and desktop, in a project chat or not — this one doesn't change with .in-project. */ .topbar .menu-btn, .topbar #expand-sidebar-btn { border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); } :where(html[data-input="mouse"]) .topbar .menu-btn:hover, :where(html[data-input="mouse"]) .topbar #expand-sidebar-btn:hover { background: var(--surface-3); } /* Bolder two-bar glyph instead of a thin three-line hamburger. */ .topbar .menu-btn svg { stroke-width: 2.75; } /* Non-project chats: New chat / Share / "..." / incognito each become their own floating circle (matching the sidebar toggle) instead of sitting on a shared bar. A project chat's topbar is untouched — those keep the original pill-style Share-with-label button. */ .topbar #chat-new-btn, .topbar #chat-more-btn, .topbar #incognito-btn, .topbar button.topbar-share { border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); width: 40px; padding: 0; justify-content: center; } :where(html[data-input="mouse"]) .topbar #chat-new-btn:hover, :where(html[data-input="mouse"]) .topbar #chat-more-btn:hover, :where(html[data-input="mouse"]) .topbar #incognito-btn:hover, :where(html[data-input="mouse"]) .topbar button.topbar-share:hover { background: var(--surface-3); } .topbar button.topbar-share span { display: none; } .topbar #incognito-btn.on { background: var(--brand-soft); } /* A chat inside a project has the very same floating topbar as a plain chat. Only differences: its project name floats as a clickable pill (see .crumb-project below), and it shows no chat name and no Share button (Share stays in the "..." menu). */ /* (Share now shows in project chats too: computers keep the Share circle, phones swap New chat for Share — see updateChatHeader.) */ /* Desktop sidebar collapse: the header's own toggle hides the sidebar entirely and the topbar's twin icon (hidden the rest of the time) takes its place to bring it back. Scoped to desktop widths only — otherwise this (higher-specificity) rule beats the mobile overlay's own .sidebar rule below and leaves the hamburger menu opening a sidebar that's stuck at width:0/opacity:0/pointer-events:none. */ /* [wide layout: every computer, any window width] */ :where(html[data-layout="wide"]) .app.sidebar-collapsed .sidebar { width: 0; min-width: 0; padding: 0; border-right: 0; opacity: 0; overflow: hidden; pointer-events: none; } .app.sidebar-collapsed .topbar #expand-sidebar-btn { display: inline-grid; } .topbar .chat-title { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: none; background: transparent; text-align: left; padding: 6px 8px; border-radius: 8px; } :where(html[data-input="mouse"]) .topbar .chat-title:hover { background: var(--surface-2); } /* A chat outside any project shows no name up top at all (kept in the layout via visibility, not display, so the project crumb/Share/"..." on the right don't shift) — see updateChatHeader in chat.js. A chat that lives in a project still shows its name, same as always. */ .topbar .chat-title.title-hidden { visibility: hidden; } /* Non-project chats (a plain chat, and the blank new-chat screen) go further: the topbar is taken out of document flow entirely and floats over the thread instead of reserving its own row, so the message list gets the full viewport height and starts right at the top of the screen, same as the reference layout. A chat that lives in a project (.in-project) and the Projects browsing pages (.view-page) are untouched — both keep the topbar as a normal, in-flow bar exactly as before, with the same icons/Share/"..." behaviour unchanged either way. */ .main:not(.view-page) .topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 6; pointer-events: none; } .main:not(.view-page) .topbar > * { pointer-events: auto; } /* Padding on the scrollable thread itself, not reserved layout space — it scrolls out of the way immediately, so the extra viewport height above is still gained; it just keeps the very first message from rendering directly under the floating icons. */ .main:not(.view-page) .topbar ~ .scroller .thread { padding-top: calc(56px + 24px * var(--density)); } .banner { display: flex; align-items: center; gap: 10px; padding: 9px 16px; background: var(--brand-soft); font-size: .9rem; border-bottom: 1px solid var(--line); } .banner span { flex: 1; } .banner button { min-height: 28px; padding: 0 8px; } .banner.warn { background: rgba(228,185,92,.16); border-bottom-color: var(--warn); } .banner.warn span { color: var(--warn); font-weight: 600; } .banner button { flex: none; cursor: pointer; } /* Notice banner (maintenance / admin announcement) in a plain or new chat. Those chats have a floating, transparent topbar (menu / new chat / "..." / incognito circles) that sits ON TOP of the page, so an in-flow banner used to slide underneath those circles and its text and ✕ got covered. Here the banner is pushed down by exactly the topbar's height, so it always sits BELOW the icons, and it keeps its ✕ so people can close it. The buttons themselves are not touched. A chat inside a project keeps its normal in-flow topbar, so it needs none of this. */ :root { --floating-topbar-h: 56px; } .main:not(.view-page) .topbar ~ .banner:not(.hidden) { margin: var(--floating-topbar-h) 14px 0; border: 1px solid var(--line); border-radius: 12px; position: relative; z-index: 5; } .main:not(.view-page) .topbar ~ .banner.warn:not(.hidden) { border-color: var(--warn); } /* the banner already clears the icons, so the thread only needs a small gap under it */ .main:not(.view-page) .topbar ~ .banner:not(.hidden) ~ .scroller .thread { padding-top: calc(12px * var(--density)); } /* maintenance mode: chat box switched off (non-admins) */ .composer.maintenance-off { opacity: .65; background: var(--surface-2, var(--surface)); } .composer.maintenance-off textarea, .composer.maintenance-off button { cursor: not-allowed; } .composer.maintenance-off textarea { height: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .composer.maintenance-off textarea::placeholder { color: var(--warn); opacity: 1; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .95rem; } .scroller { flex: 1; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; } .thread { width: 100%; max-width: 800px; margin: 0 auto; padding: calc(24px * var(--density)) 18px 12px; display: flex; flex-direction: column; gap: calc(22px * var(--density)); } .jump { position: absolute; right: 22px; bottom: 132px; z-index: 5; box-shadow: var(--shadow); border-radius: 999px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; } .jump.hidden { display: none; } .welcome { margin: auto; padding: 6vh 0 2vh; max-width: 640px; } .welcome h2 { font-size: clamp(1.7rem,4.6vw,2.4rem); } .welcome .bn { font-size: 1.1rem; color: var(--muted); margin: 8px 0 28px; line-height: 1.5; } .suggestions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } .suggestion { text-align: left; padding: 15px 16px; border-radius: var(--radius-m); background: var(--surface); min-height: 0; line-height: 1.4; border: 1px solid var(--line); transition: border-color .15s, background .15s, transform .15s; } .suggestion b { display: block; font-weight: 600; margin-bottom: 3px; } .suggestion span { color: var(--muted); font-size: .85rem; } :where(html[data-input="mouse"]) .suggestion:hover { border-color: var(--brand); background: var(--surface-2); transform: translateY(-1px); } .msg { display: flex; gap: calc(12px * var(--density)); max-width: 100%; } .msg.user { justify-content: flex-end; } .msg .bubble { max-width: min(86%, 620px); padding: calc(10px * var(--density)) 15px; border-radius: 17px 17px 4px 17px; background: var(--brand-soft); border: 1px solid var(--brand-soft); white-space: pre-wrap; overflow-wrap: anywhere; } /* User bubbles can now hold rendered bold, italic and code markup (see addUserMessage in chat.js), not just a plain text node. Browsers give

/