/* * Gabbie — SCANOSS's collaboration app. * * The palette is the mascot's, exactly as supplied: * outline #24193A · skin #F5B98F · nose #E8A278 · hair #4A3128 * beard #8A5A44 · mouth #3B2038 · hat & shoes #F2822E · trousers #3E56C4 * eye/teeth/bubble #FFFCF5 · backdrop #2A3358 → #0E1425 * * Structure follows Donkie (panels, pills, sticky header, gradient accents) so * the two SCANOSS tools feel related — but Gabbie is warmer and rounder, * because it has to invite people to talk rather than to work a queue. * * TWO DELIBERATE RULES * * 1. ORANGE IS THE ACTION COLOUR, BLUE IS THE PERSON COLOUR. * Every button that sends, saves or shares is hat-orange. Every avatar, * mention and presence dot lives in the blue/violet family. So "what can I * press" and "who is this" never compete for the same signal, which is what * makes a dense chat scannable. * * 2. MY MESSAGES ARE BLUE, EVERYONE ELSE'S ARE NEUTRAL. * Not orange. Orange bubbles would make every message look like a button in * peripheral vision, and in a chat the eye is mostly in peripheral vision. * * MOBILE IS THE PRIMARY LAYOUT, not a fallback. The single column is the base * stylesheet and the two-pane desktop layout is what the media query adds — so * a phone never downloads or computes a desktop layout it then overrides. This * is the opposite of how desktop-first CSS ages. */ :root { /* The percentage on an OKR card. Purple because that is what BambooHR uses for it, and this panel is read side by side with theirs. `:root` is the DARK palette in this file, so this is the value that has to carry on a dark ground; the light override is with the rest of them further down. */ --accent-okr: #a78bfa; /* The words a reply quoted, marked in the original (::highlight(reply-quote) below). A theme token, like every colour here; the light theme's is lighter, so the text under it stays readable on white. */ --quote-mark: rgba(242, 130, 46, 0.45); /* ---- Brand, straight from the mascot ---- */ --outline: #24193a; --skin: #f5b98f; --nose: #e8a278; --hair: #4a3128; --beard: #8a5a44; --mouth: #3b2038; --orange: #f2822e; --blue: #3e56c4; --cream: #fffcf5; /* ---- Derived, for states the palette does not name ---- */ --orange-bright: #ff9c4f; --orange-deep: #d96a1c; --blue-bright: #5f74dd; --blue-soft: #8b9bf0; /* ---- Dark surfaces, from the mascot's backdrop gradient ---- */ --bg: #14102b; --bg-far: #0e1425; --bg-near: #2a3358; --panel: rgba(255, 255, 255, 0.045); /* The shade --panel resolves to over --bg, but OPAQUE. Anything that floats above the page — menus, the emoji bar, the forward sheet — needs this: a 4% white wash lets a chat thread read straight through it, which is illegible. Keep in step with --bg and --panel if either changes. (Donkie's lesson.) */ --panel-solid: #1e1a35; --panel-raised: #262143; --panel-border: rgba(139, 155, 240, 0.15); --panel-hover: rgba(255, 255, 255, 0.08); /* ---- RECESSED SURFACES: a quoted reply, an attachment row, a code block. * * These were written as `rgba(0, 0, 0, 0.2)` and similar, straight into the * rules — which is correct on a near-black page and is a GREY SLAB on a white * one. In light mode a fifth of black over white is #cccccc, so every reply * quote and every shared file in a chat came out grey: "in light mode, the * chats are still grey, and hard to read". * * A recess is not "darker", it is "away from the reader" — which means darker * over a dark page and LIGHTER over a light one. Hence a variable per depth * rather than a colour per rule. * * The three depths replace five hand-written alphas (0.20, 0.22, 0.24, 0.28, * 0.32) that differed by amounts nobody could see. */ --sunk: rgba(0, 0, 0, 0.22); --sunk-firm: rgba(0, 0, 0, 0.32); --sunk-hover: rgba(0, 0, 0, 0.34); /* THE CHAT LIST'S COLUMN. Its own shade rather than --panel: the list is a region of the app and not a card on top of it, and it wants to read as slightly set back from the thread beside it. */ --rail: rgba(14, 20, 37, 0.4); --text: #f0eef9; --text-dim: #c8c3e0; /* The brand's lavender, for a label that names a category. */ --violet: #a9b4f5; --muted: #948eb4; --grad-warm: linear-gradient(103deg, var(--orange) 0%, #ff9c4f 100%); --grad-cool: linear-gradient(103deg, var(--blue) 0%, #6f83e8 100%); --grad-brand: linear-gradient(103deg, var(--blue) 0%, var(--orange) 135%); --ok: #35c88a; --warn: #e8a33d; --bad: #e4574d; /* Chat bubbles want a bigger radius than panels: roundness reads as conversation, squareness reads as a form. */ --radius: 16px; --radius-sm: 10px; --radius-bubble: 20px; --shadow: 0 10px 30px rgba(4, 2, 14, 0.45); /* The frosted bars — header, composer, day dividers. Tokens rather than literals because each one assumed a dark page behind it. */ --glass: rgba(20, 16, 43, 0.86); --glass-soft: rgba(20, 16, 43, 0.72); --glass-firm: rgba(20, 16, 43, 0.9); --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* The header height, as a variable because three sticky things and one scroll container all have to agree about it. Hard-coded in four places is how a layout drifts by two pixels on one page. */ --header-h: 56px; --composer-h: 64px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* HIDDEN MEANS HIDDEN. The browser's own rule is `[hidden] { display: none }` — an unqualified attribute selector, which ANY class rule outweighs. So `el.hidden = true` on something carrying `.btn` (display: inline-flex) or `.panel` did nothing at all, and the element stayed on screen. That is how "Save quote" broke: it used to be removed from the page and is now hidden and reshown to stop it flickering during a drag — except it never actually hid, so the button sat floating wherever it was last put. Three places had already worked around this locally. One rule instead. */ [hidden] { display: none !important; } html { /* Stops iOS Safari zooming the whole page when a text input is focused, and stops the rubber-band scroll revealing white behind the app. */ -webkit-text-size-adjust: 100%; background: var(--bg); } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; /* 100dvh, not 100vh: on iOS Safari 100vh is the height WITHOUT the browser chrome, so a full-height chat put its composer permanently under the address bar. dvh is the one that accounts for it. */ min-height: 100dvh; overscroll-behavior-y: none; } /* THE SHELL IS THE VIEWPORT, so the document itself never scrolls. * * On iOS the virtual keyboard does not shrink the layout viewport — only the * visual one — so `body` stayed a full 100dvh tall while `.app` shrank to * `--app-height`. The document was then taller than what could be seen, iOS * scrolled it to bring the focused box into view, and two things followed at * once: the thread header slid up under the status bar, and the composer rose * off the keyboard leaving a band of dead space under it. Reported as "all * kinds of glitches ... and then all kinds of spaces in the bottom". * * `overflow: hidden` on both html and body is what makes those impossible: if * the document cannot scroll, nothing can scroll it. The shell inside is * already sized to the visual viewport and its panes do their own scrolling. * * ONLY WHERE THERE IS A SHELL. Signed-out pages are ordinary documents and * must keep scrolling — they are `.app-plain`, and `data-shell` is absent. */ html:has(> body[data-shell]), body[data-shell] { height: 100%; overflow: hidden; } /* The ambient glow, in the mascot's own backdrop gradient. Fixed, so it does not move when a long thread scrolls. */ .bg-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(58% 46% at 14% 0%, rgba(62, 86, 196, 0.30), transparent 70%), radial-gradient(50% 40% at 88% 6%, rgba(139, 155, 240, 0.14), transparent 70%), radial-gradient(46% 52% at 52% 110%, rgba(242, 130, 46, 0.11), transparent 70%), linear-gradient(170deg, var(--bg-near) 0%, var(--bg) 42%, var(--bg-far) 100%); } a { color: var(--blue-soft); text-decoration: none; } a:hover { color: var(--orange-bright); } /* Links inside AUTHORED text are underlined; links in the chrome are not. A colour change alone is enough on a button or a menu row, where the shape already says "this does something". In a paragraph it is not: a pasted URL now renders as a link, and it has to look like one at a glance rather than on hover. `from-font` so the line clears descenders instead of striking through every g and y. */ .msg-text a, .prose a, .bubble a:not(.attach):not(.ticket-card):not(.quoted) { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: from-font; /* A pasted URL can be longer than the bubble. Breaking anywhere is ugly on a word and correct on a URL, and only URLs get this long. */ overflow-wrap: anywhere; } .msg-text a:hover, .prose a:hover { text-decoration-color: var(--orange-bright); } h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 0.5em; } h1 { font-size: 1.55rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.02rem; } p { margin: 0 0 0.8em; } .muted { color: var(--muted); } .small { font-size: 0.82rem; } .tiny { font-size: 0.74rem; } .mono { font-family: var(--mono); font-size: 0.9em; } .nowrap { white-space: nowrap; } .hidden { display: none !important; } .grow { flex: 1; } .right { margin-left: auto; } .center { text-align: center; } .stack { display: flex; flex-direction: column; gap: 12px; } .row { display: flex; align-items: center; gap: 10px; } .wrap { flex-wrap: wrap; } .grad-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Anything focused by keyboard gets a visible ring. Set once, globally: a chat app is used one-handed and half-looking, and an invisible focus is an accessibility failure that also makes it feel broken. */ :focus-visible { outline: 2px solid var(--orange-bright); outline-offset: 2px; } /* ============================================================ app shell */ /* The whole app is one grid: header, body, and on desktop a sidebar column. Grid rather than flex because the body must be exactly the remaining height for the thread to scroll INSIDE it rather than scrolling the page — which is what keeps the composer pinned on a phone. */ /* ---- HOW MUCH OF THE SCREEN IS NOT OURS ------------------------------- * * Reported from the app on a short phone: "the top bar and part of the * bottom including part of the type box run off the screen." * * TWO DIFFERENT MECHANISMS, and they must not both apply at once. * * In a BROWSER — Safari on a notched iPhone, Chrome on Android — the page is * laid out under the notch and the home indicator, and `env(safe-area-inset-*)` * is what says how far. That is what these tokens are by default. * * In the ANDROID APP the window is edge-to-edge whether it asks to be or not * (anything targeting SDK 35+), so the WebView fills the screen INCLUDING the * strips behind the status bar and the navigation bar — and a WebView reports * `env(safe-area-inset-*)` for a display CUTOUT only, never for the system * bars. So the header sat behind the clock and the composer behind the * navigation bar, which on a tall screen looks like a tight margin and on a * short one loses the top bar and half the type box. * * The shell now hands the WebView a box that is already inside the bars * (GabbieActivity.keepOurselvesInsideTheBars), so here the insets are ZERO: * adding them again would count the same strip twice and leave a dead band at * each end. One mechanism per shell, never both. */ :root { --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom); } body.shell-apk { --safe-top: 0px; --safe-bottom: 0px; } .app { display: grid; /* THE HEADER'S ROW HAS TO BE AS TALL AS THE HEADER ACTUALLY IS. * * .site-header is `var(--header-h) + var(--safe-top)` tall, because * it has to clear the notch — but this row was only `var(--header-h)`. So the * header was taller than the box it lives in and, with z-index 40, painted * over the row below it. In a browser var(--safe-top) is 0 and * nothing showed; in a home-screen PWA on an iPhone it is around fifty * pixels, which is the whole of .sidebar-head — so the search bar was not * partly covered, it was entirely underneath the header and did not appear at * all. * * Reported as "search bar is hidden in iOS PWA", and it was every phone with * a notch: the wordmark and the new-chat button were under there too. */ grid-template-rows: calc(var(--header-h) + var(--safe-top)) 1fr; /* ONE COLUMN, AND IT MAY BE NARROWER THAN ITS CONTENTS. A grid's implicit column is `auto`, which means MAX-CONTENT — so the whole shell grew to fit its widest descendant. With a long group name in the thread header, "Gabbie Feedback (Issues, Features,etc)", the shell came out wider than the phone: the name was pushed off to the right, the header's own buttons went with it, and what was left on screen was an avatar and no name. Which is exactly the report — "I don't see which group/person I am chatting with" — and why it looked fine for a short name and broken for a long one. */ grid-template-columns: minmax(0, 1fr); /* THREE DECLARATIONS FOR ONE HEIGHT, IN ORDER OF HOW MUCH THEY KNOW. A browser takes the last one it understands and ignores the rest. `dvh` needs Chromium 108. Older engines — and Julian's Huawei is one, its WebView reports Chromium 101 — DROP a declaration whose unit they do not know, so `height: 100dvh` alone left this element with no height at all: it grew to the height of the whole thread, the document became the scroller, and the chat name scrolled off the top with everything else. Which is exactly how it was reported: "I don't have the name of the chat". 100vh is the floor every engine has understood for a decade. --app-height is app.js's measurement of visualViewport, which is the only figure that is right when a keyboard or a browser toolbar is in the way. */ height: 100vh; height: 100dvh; height: var(--app-height, 100dvh); max-height: 100vh; max-height: 100dvh; max-height: var(--app-height, 100dvh); overflow: hidden; } /* * The signed-out pages — sign in, the password door, two-factor — are ORDINARY * SCROLLING PAGES, not the app shell. * * They must opt out of the grid above, and this is why: `.app` declares two rows * and the first is the header's height. Signed in, that row holds the header. * Signed out there is no header, so the page content landed in a 56px-tall row * with `overflow: hidden` on the container — which showed the top tenth of the * sign-in page and clipped the rest, with the form's own scroll trapped inside * that sliver. It is the kind of bug that is invisible to any check made while * logged in. * * Fixed by making these pages plain block flow, which is what they always * should have been: they have no panes to keep in sync and nothing to pin. */ .app-plain { display: block; height: auto; max-height: none; min-height: 100dvh; overflow: visible; } .app-plain .page { /* `overflow: visible`, overriding the app shell's `overflow-y: auto`, so the BODY scrolls and not a box inside it. A nested scroller on a phone is what produces "I can scroll a little inside this small area" — the browser's own momentum scrolling, the address-bar collapse and the keyboard avoidance all work on the document, not on a div. */ overflow: visible; min-height: 100dvh; padding-top: calc(24px + var(--safe-top)); padding-bottom: calc(32px + var(--safe-bottom)); } .site-header { grid-row: 1; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid var(--panel-border); background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); z-index: 40; /* The notch and the home indicator. Without this the header sits under the status bar in a home-screen PWA on an iPhone. */ padding-top: var(--safe-top); height: calc(var(--header-h) + var(--safe-top)); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: var(--bg); } } /* THE ANDROID APP, MAXIMISED ON A BIG SCREEN. * * Android's desktop windowing draws a caption bar OVER the app once the window * is maximised — and only then. Unlike a phone's notch it is not reported * through var(--safe-top), so the header had nothing to clear and sat * underneath the window controls. * * THE FIX IS A SMALLER BOX, NOT MORE PADDING INSIDE THE SAME ONE. The first * attempt padded the header and left `.app` at 100dvh, which cleared the top * and left the bottom 32px — the composer — hanging below the visible area. * The window is genuinely shorter than the viewport claims, so the shell has to * be shorter too: offset from the top by the caption, and take that height back * off the total. * * `.maximised` is set by app.js, which is the only thing that can tell — * "maximised" is not a media query. Without it this used to fire on any wide * window, which put the same dead space above the header when the app was * merely large. * * --caption-h is a guess, because nothing reports the real height. One number to * change, and max() means a platform that DOES report an inset still wins. */ /* THE MEASURED HEIGHT WINS OVER 100dvh IN THE INSTALLED APP. 100dvh is meant to be the visible viewport and in a browser it is. In the Android app it came out taller than the screen, so the composer — the last thing in the shell — sat below the fold, and the only way to reach it was to scroll the PAGE rather than the thread. Scrolling the thread to its bottom, which is what opening a chat does, could never help. app.js measures visualViewport and publishes it here. */ /* Now folded into `.app` itself, which every browser needs and not only the installed shells — see the three height declarations there. */ /* And nothing outside the shell may scroll: with the height right there is nothing below the fold to reach, so a page scroll could only hide the composer again. */ body.shell-apk, body.shell-pwa { overflow: hidden; } body.shell-apk.maximised { --caption-h: 32px; /* THE BOTTOM IS THE CAPTION AGAIN, PLUS A HAIR. Working back from what was actually observed: with only 5px here, the sidebar's own badge sat almost entirely below the screen — about a caption's worth. That is the tell. The window is not merely overlaid at the top, it is the caption's height SHORTER than 100dvh overall, so reserving that height at the top without also taking it off the bottom overhangs by exactly one caption bar. The extra 5px is the gap that was asked for on top of that. */ --window-bottom: calc(var(--caption-h) + 5px); } /* PINNED, NOT MEASURED. The arithmetic version — margin-top plus a calc() height — kept leaving the page a couple of dozen pixels scrollable, because the margin adds to the document's height while the shell is trying to BE the document's height. Every combination of those two numbers is a chance to be wrong by their difference. `position: fixed` with all four edges takes the shell out of flow entirely, so it cannot make the document taller than the window and there is nothing to scroll. The edges say where it sits; no height is computed at all. */ body.shell-apk.maximised .app { position: fixed; height: auto; max-height: none; top: max(var(--safe-top), var(--caption-h)); left: 0; right: 0; bottom: var(--window-bottom); height: auto; max-height: none; } /* And nothing behind it may scroll either. */ body.shell-apk.maximised, body.shell-apk.maximised > html { overflow: hidden; } /* The header's own notch padding would now double-count what .app already offset, so it goes back to a plain bar. */ body.shell-apk.maximised .site-header { padding-top: 0; height: var(--header-h); } /* And the row shrinks with it. `.app` already offsets past the caption from the top, so leaving the row at header+inset would open a gap under the header exactly as tall as a notch the window does not have. */ body.shell-apk.maximised .app { grid-template-rows: var(--header-h) 1fr; } body.shell-apk.maximised .flashes { top: calc(var(--header-h) + max(var(--safe-top), var(--caption-h)) + 10px); } .brand { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 650; } .brand:hover { color: var(--text); } .brand img { display: block; height: 30px; width: 30px; } .brand-name { font-size: 1.08rem; letter-spacing: -0.02em; } .brand .sub { color: var(--muted); font-size: 0.72rem; font-weight: 400; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--text-dim); cursor: pointer; font-size: 1.05rem; position: relative; /* No transition on transform: a tap highlight that animates feels laggy on a phone, where the whole point is that it responds instantly. */ transition: background .12s ease, color .12s ease; } .icon-btn:hover { background: var(--panel-hover); color: var(--text); } .icon-btn.on { color: var(--orange); } .dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); border: 2px solid var(--bg); } .count { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--orange); color: #2a1400; font-size: 0.66rem; font-weight: 800; line-height: 17px; text-align: center; border: 2px solid var(--bg); } .app-body { grid-row: 2; display: grid; /* minmax(0, 1fr) AND NOT 1fr. `1fr` is shorthand for minmax(auto, 1fr), and that `auto` minimum is the item's MIN-CONTENT width — so a column that is meant to be "whatever is left" silently grows to fit its widest child instead. Measured on a 393px screen: the search page's column came out 917px wide and everything in it was clipped at the right edge, chips and sentences both. Nothing overflowed the document, so there was no scrollbar to hint at it — the text was simply cut off. */ grid-template-columns: minmax(0, 1fr); min-height: 0; /* lets the children scroll instead of the grid growing */ overflow: hidden; } /* ---- the sidebar ---- */ .sidebar { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--panel-border); background: var(--rail); } .sidebar-head { padding: 10px 12px 6px; display: flex; align-items: center; gap: 8px; } .sidebar-list { overflow-y: auto; padding: 4px 8px 16px; flex: 1; -webkit-overflow-scrolling: touch; } .sidebar-foot { padding: 8px 10px calc(8px + var(--safe-bottom)); border-top: 1px solid var(--panel-border); display: flex; gap: 6px; align-items: center; } .conv { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 13px; color: var(--text-dim); margin-bottom: 2px; position: relative; } .conv:hover { background: var(--panel-hover); color: var(--text); } .conv.active { background: rgba(62, 86, 196, 0.22); color: var(--text); } .conv.active::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--orange); } .conv-main { min-width: 0; flex: 1; } .conv-title { display: block; font-weight: 600; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conv-sub { display: block; color: var(--muted); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conv.unread .conv-title { color: var(--cream); font-weight: 700; } /* An unread row's preview is the thing being previewed, so it is not dimmed to the same grey as a member count. Not full white either — the title is still what you scan for. */ .conv.unread .conv-sub { color: var(--text-dim); } .conv-badge { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--orange); color: #2a1400; font-size: 0.7rem; font-weight: 800; line-height: 20px; text-align: center; } /* AN AGENT'S "SOMETHING NEW". A dot and not a pill: the transcript grew, which is one fact, and there is no count to put in a number. Sized and placed like the badge it stands in for so a list of both does not wobble. */ /* THE ROBOT IN A ROW. The same drawing the header used to carry, sized to the small avatar it stands in for and drawn in the text colour rather than its own, so a list of people, groups and agents keeps one weight. */ .avatar.bot { display: inline-flex; align-items: center; justify-content: center; } .avatar.bot svg { width: 60%; height: 60%; opacity: .85; } .conv-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--blue); align-self: center; margin-right: 2px; } .conv-mute { color: var(--muted); font-size: 0.8rem; } /* ---- avatars ---- */ /* Initials on a derived colour, not an uploaded photo. Nobody uploads one, and a grid of grey silhouettes is worse than a grid of distinct colours. */ .avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 12px; font-size: 0.76rem; font-weight: 750; letter-spacing: 0.02em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); position: relative; overflow: visible; } .avatar.sm { width: 28px; height: 28px; border-radius: 9px; font-size: 0.66rem; } .avatar.lg { width: 52px; height: 52px; border-radius: 17px; font-size: 1.05rem; } .avatar .presence { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--muted); border: 2.5px solid var(--bg); } .avatar .presence.online { background: var(--ok); } /* A group's avatar is its emoji on a neutral tile — an emoji on a coloured one fights with it, and a group has no initials worth reading. */ .avatar.group { background: var(--panel-raised); font-size: 1.05rem; text-shadow: none; } /* The outgoing thread while the next one loads. Switching chats is a full page * load; this covers the gap between the click and the new thread, so a click * that is being acted on does not look like one that was ignored. * * Opacity and nothing else: no spinner, no skeleton. The thread is about to be * replaced wholesale, and a placeholder that flashes for 200ms reads as a * fault. Pointer events go too, so a second impatient click cannot start a * second navigation. * * .28s out, and no transition back — `leaving` is only ever removed by the * back button, where the page should simply be there. */ .thread.leaving { opacity: 0.38; transition: opacity 0.28s ease-out; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .thread.leaving { transition: none; } } /* ============================================================ the thread */ .thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; } .thread-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 52px; border-bottom: 1px solid var(--panel-border); background: var(--glass-soft); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 20; } /* A long group name shortens rather than pushing the header's buttons off the right of a phone. (.app is minmax(0,1fr) so the shell no longer grows to fit it, but the name still has to give way to the icons beside it.) */ .thread-title { font-weight: 700; font-size: 0.98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .thread-sub { color: var(--muted); font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Nothing to say below the name — no topic, not a direct message — leaves the header one line tall rather than one line plus an empty strip. */ .thread-sub:empty { display: none; } /* THE scroll container. Everything else in the app is fixed height, so this is the only thing that scrolls — which is what lets the composer stay put. */ .messages { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 12px 8px; -webkit-overflow-scrolling: touch; /* Anchoring keeps the reader's place when messages are prepended by the scroll-back. Without it, loading older messages jumps the view. */ overflow-anchor: auto; /* And reaching either end does not pass the scroll on to the page, which would drag the header — and the chat's name with it — off the top. */ overscroll-behavior: contain; /* NO scroll-behavior: smooth HERE. It used to be, and it was the cause of a bug that looked like three different ones. `scrollTo({behavior: "auto"})` does not mean "jump" — it means "do whatever the CSS says", so with smooth set every programmatic scroll animated. Opening a chat therefore travelled visibly from the top of the thread to the bottom, taking longer the longer the history, and for the whole of that journey the composer was off-screen — which is precisely how it was reported: the text box hidden until you scrolled manually. Smooth is now asked for explicitly, in the one place it belongs: a new message arriving while you are already at the bottom. */ } /* ---- OPENING A CHAT ---- * * "would it be possible for the chat feed to show up with a quick/short slide * to left animation? That would improve the look and feel" * * The feed only — not the header, not the sidebar, not the composer: those are * the frame and they do not move between one chat and the next, so moving them * would say the whole app had been replaced rather than the conversation in it. * * 200ms and a dozen pixels. Long enough to read as deliberate, short enough * that somebody clicking down a list of chats is never waiting for it — and it * covers the last of the settling (a late image, a swapped font) with movement * that was going to happen anyway, which is the other half of what was asked * for here. * * transform and opacity ONLY, so it is composited and never reflows the thread * it is animating. `backwards` so the first frame applies before it starts, * rather than a flash of the finished position. */ @media (prefers-reduced-motion: no-preference) { .messages { animation: feed-in 0.2s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; } } @keyframes feed-in { from { opacity: 0.35; transform: translate3d(16px, 0, 0); } to { opacity: 1; transform: none; } } @keyframes feed-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(-16px, 0, 0); } } /* ---- SWITCHING CHATS ON A BIG SCREEN ---- * * "in a large screen the whole screen flickers before switching chats. i think * it is because of the drawing of the chat list?" * * Close: it is the drawing of EVERYTHING. Opening a chat is a real navigation * — deliberately, because the alternative is a router and a decade of subtle * back-button bugs (see the note in app.js) — so the browser tears down one * document and builds another. It holds the old picture while it can, and at * ~130ms of server render plus 275KB of HTML on a wide screen it runs out of * patience and paints a blank frame first. The sidebar is identical either * side of that blank frame, which is what makes it read as a flicker rather * than as a page load. * * A CROSS-DOCUMENT VIEW TRANSITION is the browser's own answer: it keeps the * old rendering on screen, renders the new one behind it, and animates between * the two — so there is no blank frame to see. The feed gets a name of its own * and slides; everything else cross-fades, and since the header, the sidebar * and the composer are the same on both sides, cross-fading them is invisible. * * WIDE SCREENS ONLY. On a phone the list and the thread are the same document * with one of them hidden by app.js after it loads, and transitioning between * two snapshots taken either side of that is a way to make a pop visible that * currently is not. */ /* AT THE TOP LEVEL, NOT INSIDE A MEDIA QUERY. * * It was nested in `@media (min-width: 900px)` to keep phones out of it, and * the result was the slide disappearing everywhere: browsers do not all honour * @view-transition inside a conditional rule, so the transition never started * — while the @supports rule below had already switched off the page's own * animation on the grounds that the transition would be doing it. Neither ran. * * So: every width opts in, and the phone concern is handled where it belongs, * by what the animation does rather than by whether it exists. */ @view-transition { navigation: auto; } .messages { view-transition-name: feed; } /* THE PARTS THAT DO NOT CHANGE MUST NOT BE ANIMATED AS IF THEY HAD. * * "sometimes the list of chats flickers when switching groups." * * It does, and this is why: everything without a name of its own is one * snapshot called `root`, and switching chats cross-fades that whole snapshot * — including a sidebar and a header that are IDENTICAL either side. Fading a * picture of the list into an identical picture of the list is exactly what a * flicker looks like, and it happened on every navigation. * * Naming them takes them out of `root` and gives each its own pair, and * `animation: none` on both halves leaves the new one painted at once. What is * actually different — the highlighted row, a badge — simply appears, which is * what it would have done on a plain page load. */ .sidebar { view-transition-name: chat-list; } .site-header { view-transition-name: shell-header; } ::view-transition-old(chat-list), ::view-transition-new(chat-list), ::view-transition-old(shell-header), ::view-transition-new(shell-header) { animation: none; mix-blend-mode: normal; } @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.18s; } ::view-transition-old(feed) { animation: feed-out 0.2s cubic-bezier(0.22, 0.61, 0.36, 1) both; } ::view-transition-new(feed) { animation: feed-in 0.2s cubic-bezier(0.22, 0.61, 0.36, 1) both; } } /* AND THEN NOT TWICE. Where the browser runs the transition it is doing the slide, so the page's own copy must not also play as the new document loads. `at-rule(@view-transition)` and not `(view-transition-name: none)`: the property has been supported since long before CROSS-DOCUMENT transitions were, and asking the wrong question is what left a browser with the property and without the transition showing no animation at all. A browser too old to understand this test simply keeps the page's own slide, which is the right answer for it. */ @supports at-rule(@view-transition) { .messages { animation: none; } /* EXCEPT WHEN THE BROWSER SKIPPED IT, which it does more often than the * feature's existence suggests. * * "still flickers ... when I switch chats, but only sometimes. Maybe 1 out * of 5 times." * * A cross-document transition is not a promise. The browser drops it when * the outgoing page is still running one (switching chats twice quickly), * when the new document takes too long to reach its first paint, and in * several other cases it does not report. Every one of those left this app * with NO animation at all — because the rule above had already switched * off the page's own slide on the grounds that the transition would be * doing it. A skipped transition therefore showed the raw navigation, which * is the flicker, and it was intermittent because skipping is. * * app.js asks, on `pagereveal`, whether a transition is actually running * and marks the document when it is not — before the first paint, which is * the only moment this can be decided. See theSkippedTransition. */ :root.no-vt .messages { animation: feed-in 0.2s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; } } /* Somebody who asked for less motion still gets the transition — it is what stops the blank frame — but instantly, with nothing sliding or fading. */ @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } .day-line { display: flex; align-items: center; gap: 10px; margin: 18px 2px 12px; color: var(--muted); font-size: 0.72rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; } .day-line::before, .day-line::after { content: ""; height: 1px; flex: 1; background: var(--panel-border); } .msg { display: flex; gap: 9px; margin-bottom: 3px; position: relative; } /* SWIPE TO REPLY OR FORWARD (swipeToAct in app.js, Mariano 2026-10-19). On a touch screen the browser keeps the vertical scroll and hands sideways moves to the script; things that scroll sideways themselves keep theirs. */ @media (hover: none) { .msg { touch-action: pan-y; } .msg pre, .msg table, .msg .table-wrap { touch-action: auto; } } .swipe-sign { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; pointer-events: none; background: var(--panel-raised); border: 1px solid var(--panel-border); color: var(--muted); font-size: 1rem; opacity: .6; transition: opacity .12s ease, color .12s ease; } .swipe-sign.left { left: 6px; } .swipe-sign.right { right: 6px; } .swipe-sign.ready { opacity: 1; color: var(--text); border-color: var(--orange); } /* Consecutive messages from one person collapse: no repeated avatar, no repeated name, tighter spacing. This is most of what makes a thread readable rather than a list of cards. */ .msg.same { margin-top: 0; } .msg.same .avatar { visibility: hidden; height: 0; } .msg.same .msg-meta { display: none; } /* …EXCEPT WHERE THE READING STOPPED: the first of a run of your own messages whose read state differs from the one above shows its ticks again, and only its ticks (markTickTurns in app.js — Charles, 2026-10-20). */ .msg.same.tick-turn .msg-meta { display: flex; } .msg.same.tick-turn .msg-meta > :not(.ticks) { display: none; } .msg.gap { margin-top: 14px; } .msg-col { min-width: 0; max-width: min(680px, 84%); } /* A sticker is the message. No fill, no border, no padding — a bubble drawn behind a transparent picture is a grey rectangle with a frog in it. */ .sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; max-height: 46vh; overflow-y: auto; padding: 2px; } .sticker-grid button { border: 0; background: var(--panel); border-radius: 12px; padding: 6px; cursor: pointer; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } .sticker-grid button:hover { background: var(--panel-hover); } .sticker-grid img { max-width: 100%; max-height: 100%; display: block; } .sticker-tab { font-size: 0.78rem; } /* A cell on the management page: the picture, with a remove button that only appears on hover so a grid of ninety-seven is not a grid of crosses. */ .sticker-cell { position: relative; display: flex; align-items: center; justify-content: center; padding: 6px; border-radius: 12px; background: var(--panel); } .sticker-cell img { max-width: 100%; max-height: 100%; display: block; } .sticker-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: var(--bad); color: #fff; font-size: 0.8rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s ease; } .sticker-cell:hover .sticker-x, .sticker-x:focus-visible { opacity: 1; } .bubble.bare { background: none !important; border: 0; padding: 0; box-shadow: none; } .msg.mine .sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; max-height: 46vh; overflow-y: auto; padding: 2px; } .sticker-grid button { border: 0; background: var(--panel); border-radius: 12px; padding: 6px; cursor: pointer; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } .sticker-grid button:hover { background: var(--panel-hover); } .sticker-grid img { max-width: 100%; max-height: 100%; display: block; } .sticker-tab { font-size: 0.78rem; } /* A cell on the management page: the picture, with a remove button that only appears on hover so a grid of ninety-seven is not a grid of crosses. */ .sticker-cell { position: relative; display: flex; align-items: center; justify-content: center; padding: 6px; border-radius: 12px; background: var(--panel); } .sticker-cell img { max-width: 100%; max-height: 100%; display: block; } .sticker-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: var(--bad); color: #fff; font-size: 0.8rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s ease; } .sticker-cell:hover .sticker-x, .sticker-x:focus-visible { opacity: 1; } .bubble.bare { background: none !important; } .sticker-img { display: block; /* Same reason as .attach-img above: `width: auto` would cancel the width the markup supplies as a presentational hint, and a sticker narrower than the ceiling would then reserve 148px and shrink to its real width on arrival. */ height: auto; max-width: 148px; max-height: 148px; /* Bigger than an emoji and smaller than an attachment: a sticker is meant to be seen at a glance and not to push the conversation off the screen. */ } /* The bubble and the ⋮ that acts on it, side by side. In its own row because a column is as wide as its widest child, and for a short message that is the meta line rather than the bubble — which is how the ⋮ ended up a long way from the message, further the shorter the message was. */ .bubble-row { display: flex; align-items: center; gap: 2px; min-width: 0; } .msg.mine .bubble-row { flex-direction: row-reverse; } .msg-meta { display: flex; align-items: baseline; gap: 7px; margin: 0 0 3px 3px; font-size: 0.78rem; } .msg-author { font-weight: 700; color: var(--text); } .msg-time { color: var(--muted); font-size: 0.72rem; } .bubble { background: var(--panel-solid); border: 1px solid var(--panel-border); border-radius: var(--radius-bubble); border-top-left-radius: 6px; padding: 8px 13px; overflow-wrap: anywhere; /* a pasted 400-character URL must not widen the layout */ } .bubble > :first-child { margin-top: 0; } .bubble > :last-child { margin-bottom: 0; } .bubble pre { background: var(--sunk-firm); border-radius: var(--radius-sm); padding: 10px 12px; overflow-x: auto; font-size: 0.84rem; margin: 8px -4px; } .bubble code { font-family: var(--mono); font-size: 0.88em; } .bubble :not(pre) > code { background: var(--sunk-firm); padding: 1px 5px; border-radius: 5px; } .bubble table { border-collapse: collapse; font-size: 0.86rem; display: block; overflow-x: auto; } .bubble th, .bubble td { border: 1px solid var(--panel-border); padding: 5px 9px; } .bubble blockquote { margin: 6px 0; padding: 2px 0 2px 11px; border-left: 3px solid var(--blue); color: var(--text-dim); } .bubble img { max-width: 100%; border-radius: var(--radius-sm); } /* Mine: blue, right-aligned, mirrored corner. Not orange — see the header comment. */ .msg.mine { flex-direction: row-reverse; } .msg.mine .msg-col { margin-left: auto; } .msg.mine .msg-meta { flex-direction: row-reverse; margin-right: 3px; margin-left: 0; } .msg.mine .bubble { background: linear-gradient(160deg, rgba(62, 86, 196, 0.38), rgba(62, 86, 196, 0.22)); border-color: rgba(95, 116, 221, 0.4); border-top-left-radius: var(--radius-bubble); border-top-right-radius: 6px; } .msg.mine .avatar { display: none; } /* A system message is not a bubble. It is a line of narration, centred and quiet, so it never looks like something a colleague said. */ .msg.system { justify-content: center; margin: 12px 0; } .msg.system .sys { color: var(--muted); font-size: 0.78rem; text-align: center; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 999px; padding: 4px 14px; max-width: 90%; } /* The welcome, in everybody's My Stuff. A bubble rather than the narration pill a system message gets: it is seven paragraphs of markdown, and the pill is sized for "Ana added Ben". Marked with the person-blue rather than the action orange, because it is Gabbie talking, not something to press. */ .msg.welcome .bubble { border-left: 3px solid var(--blue-bright); background: linear-gradient(100deg, rgba(62, 86, 196, 0.14), var(--panel-solid) 62%); } /* No tools and no selection. There is nothing to reply to, forward or react to. The template does not render them either — this is the belt to that braces, because a stray ⋮ on a message with no actions is a dead end. */ .msg.welcome .msg-tools, .msg.welcome .msg-more { display: none !important; } .msg.welcome.selected .bubble { box-shadow: none; } /* A Donkie notification, though, IS a card: it carries a link somebody should act on, so it gets weight the narration lines do not. */ .msg.donkie .bubble { border-left: 3px solid var(--orange); background: linear-gradient(100deg, rgba(242, 130, 46, 0.13), var(--panel-solid) 60%); } .msg-deleted { color: var(--muted); font-style: italic; font-size: 0.85rem; border: 1px dashed var(--panel-border); border-radius: 14px; padding: 5px 12px; } /* ---- voice notes ---- */ /* * THE WAVEFORM IS A PROGRESS INDICATOR, NOT A PLAYER. * * There is no play button anywhere, and no route on the server that returns the * audio: a recording is an input to transcription and is deleted as soon as * whisper is done with it. What this shows is that something was said and is * being read — so it animates while that is true, and is replaced by the words * when it is not. * * That is why the motion is a SWEEP rather than the bouncing bars a player uses. * Bouncing bars mean "this is playing" in every app anybody has used, and would * be an invitation to press something that does not exist. A sweep travelling * left to right reads as being scanned. */ .voice { display: flex; align-items: center; gap: 10px; padding: 3px 0 1px; min-width: 170px; } .wave { display: flex; align-items: center; gap: 2px; height: 20px; flex: 1; min-width: 0; } .wave i { display: block; flex: 1; min-width: 2px; max-width: 3px; border-radius: 2px; background: var(--blue-soft); opacity: 0.35; height: 30%; } .msg.mine .wave i { background: var(--cream); opacity: 0.3; } /* Heights that read as speech rather than as a sine wave. */ .wave i:nth-child(3n) { height: 78%; } .wave i:nth-child(3n+1) { height: 42%; } .wave i:nth-child(4n) { height: 96%; } .wave i:nth-child(5n) { height: 26%; } .wave i:nth-child(7n) { height: 66%; } /* The sweep. Each bar brightens in turn, so a band of light travels across the waveform — the same gesture as a scanner, and nothing like a play head. */ .voice.analysing .wave i { animation: scan 1.8s ease-in-out infinite; } @keyframes scan { 0%, 70%, 100% { opacity: 0.3; transform: scaleY(0.8); } 35% { opacity: 1; transform: scaleY(1.15); } } .voice.analysing .wave i:nth-child(1) { animation-delay: 0s; } .voice.analysing .wave i:nth-child(2) { animation-delay: .045s; } .voice.analysing .wave i:nth-child(3) { animation-delay: .09s; } .voice.analysing .wave i:nth-child(4) { animation-delay: .135s; } .voice.analysing .wave i:nth-child(5) { animation-delay: .18s; } .voice.analysing .wave i:nth-child(6) { animation-delay: .225s; } .voice.analysing .wave i:nth-child(7) { animation-delay: .27s; } .voice.analysing .wave i:nth-child(8) { animation-delay: .315s; } .voice.analysing .wave i:nth-child(9) { animation-delay: .36s; } .voice.analysing .wave i:nth-child(10) { animation-delay: .405s; } .voice.analysing .wave i:nth-child(11) { animation-delay: .45s; } .voice.analysing .wave i:nth-child(12) { animation-delay: .495s; } .voice.analysing .wave i:nth-child(13) { animation-delay: .54s; } .voice.analysing .wave i:nth-child(14) { animation-delay: .585s; } .voice.analysing .wave i:nth-child(15) { animation-delay: .63s; } .voice.analysing .wave i:nth-child(16) { animation-delay: .675s; } .voice.analysing .wave i:nth-child(17) { animation-delay: .72s; } .voice.analysing .wave i:nth-child(18) { animation-delay: .765s; } .voice.analysing .wave i:nth-child(19) { animation-delay: .81s; } .voice.analysing .wave i:nth-child(20) { animation-delay: .855s; } .voice.analysing .wave i:nth-child(21) { animation-delay: .9s; } .voice.analysing .wave i:nth-child(22) { animation-delay: .945s; } .voice.analysing .wave i:nth-child(23) { animation-delay: .99s; } .voice.analysing .wave i:nth-child(24) { animation-delay: 1.035s; } .voice.analysing .wave i:nth-child(25) { animation-delay: 1.08s; } .voice.analysing .wave i:nth-child(26) { animation-delay: 1.125s; } .voice.analysing .wave i:nth-child(27) { animation-delay: 1.17s; } .voice.analysing .wave i:nth-child(28) { animation-delay: 1.215s; } /* Somebody who has asked for less motion still needs to know it is working, so the bars stay lit rather than stopping dead. */ @media (prefers-reduced-motion: reduce) { .voice.analysing .wave i { animation: none; opacity: 0.75; } } .voice-time { flex: 0 0 auto; font-size: 0.76rem; color: var(--muted); font-variant-numeric: tabular-nums; } .msg.mine .voice-time { color: rgba(255, 252, 245, 0.7); } .msg-text.transcribing { color: var(--muted); font-size: 0.84rem; font-style: italic; } /* The editor, IN PLACE OF THE TEXT rather than in place of the message. It sits where .msg-text sat — above the picture, the poll or the file the bubble also holds, all of which stay on screen while a caption is retyped. See startEdit: replacing the whole bubble is what made an image vanish when its text was edited. */ .msg-edit { margin-bottom: 6px; } /* The provenance pill on a transcribed message. A miniature of the analysing waveform, so the two read as one thing at two stages — and STATIC, because the animated version means "working" and a pulsing one would look like a player. */ .voice-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px 1px 5px; border-radius: 999px; background: rgba(139, 155, 240, 0.14); border: 1px solid rgba(139, 155, 240, 0.22); vertical-align: middle; line-height: 1; cursor: default; } .msg.mine .voice-pill { background: rgba(255, 252, 245, 0.13); border-color: rgba(255, 252, 245, 0.2); } .voice-pill .vp-time { font-size: 0.66rem; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .msg.mine .voice-pill .vp-time { color: rgba(255, 252, 245, 0.72); } /* The miniature waveform. Its own heights rather than the big one's nth-child rules, which are tuned for 24-28 bars and would collapse to noise at seven. */ .wave.mini { height: 10px; gap: 1.5px; flex: 0 0 auto; width: 20px; } .wave.mini i { min-width: 1.5px; max-width: 2px; border-radius: 1px; opacity: 0.75; } .wave.mini i:nth-child(1) { height: 35%; } .wave.mini i:nth-child(2) { height: 70%; } .wave.mini i:nth-child(3) { height: 100%; } .wave.mini i:nth-child(4) { height: 55%; } .wave.mini i:nth-child(5) { height: 90%; } .wave.mini i:nth-child(6) { height: 45%; } .wave.mini i:nth-child(7) { height: 25%; } /* Never animated, whatever the surrounding state says. */ .voice-pill .wave.mini i { animation: none !important; } /* Visible to a screen reader, to nobody else. The pill is a picture, and "transcribed from a voice note" is the thing it is a picture of. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- recording ---- */ /* Replaces the composer row while recording. Replaces rather than sits beside: there is nothing else to do while recording, and a live countdown next to a text box invites typing into a field that is about to be ignored. */ .recorder { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 21px; background: rgba(228, 87, 77, 0.12); border: 1px solid rgba(228, 87, 77, 0.4); } .rec-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--bad); flex: 0 0 auto; animation: rec 1.3s ease-in-out infinite; } @keyframes rec { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } /* The countdown. Tabular so it does not jiggle as the digits change, and it turns amber then red as it runs out — the clip is not lost at zero, it is sent and a new one starts, but people should see it coming. */ .rec-count { font-family: var(--mono); font-size: 1.02rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); flex: 0 0 auto; min-width: 2.4em; } .rec-count.warn { color: var(--warn); } .rec-count.soon { color: var(--bad); } .rec-label { flex: 1; min-width: 0; color: var(--text-dim); font-size: 0.86rem; } .rec-live { display: flex; align-items: center; gap: 2px; height: 20px; flex: 0 0 70px; } .rec-live i { flex: 1; background: var(--bad); border-radius: 1px; height: 20%; opacity: .8; } /* The queue banner: how many notes are waiting, and — when sending has stopped — the way to start it again. */ .voice-queue { display: flex; align-items: center; gap: 10px; margin: 0 0 7px; padding: 7px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--panel-border); font-size: 0.83rem; color: var(--text-dim); } .voice-queue.stuck { background: rgba(228, 87, 77, 0.13); border-color: rgba(228, 87, 77, 0.45); color: #ffd0cc; } /* ---- delivery ticks ---- */ /* * Three states on your own messages: a clock while the server has not confirmed * it, one tick once it has, two once somebody else has read it. * * The colour only changes on the LAST step. A tick that recolours on delivery * would make "the server has it" look like an achievement, when the thing * anybody actually watches for is whether it was read. */ .ticks { font-size: 0.76rem; line-height: 1; color: var(--muted); letter-spacing: -0.32em; /* the two checks overlap, as they do everywhere else */ padding-right: 0.32em; white-space: nowrap; } .ticks.seen { color: var(--blue-soft); } .ticks.pending { letter-spacing: normal; padding-right: 0; opacity: 0.7; } /* A message that has not reached the server yet. Dimmed rather than greyed out: it is going to send, and making it look broken while it does is worse than saying nothing. */ /* ---- ON ITS WAY ---------------------------------------------------------- * * "the message that hasn't been delivered yet could have some sort of * animation that it is on its way. Perhaps some gradient scan of some sort * going back and forth" * * A light sweeping across the bubble and back, over a bubble that is already * dimmed. Not a spinner: a spinner says "the app is busy", and this says "this * message is not there yet", which is about the message and is what somebody * is looking at the bubble to find out. It stops the moment the real message * replaces it, because the real one has no .pending. * * `background-size` on a gradient the width of the bubble and a translate on a * pseudo-element — no layout, no repaint of the text, and it costs nothing on * a phone. */ .msg.pending .bubble { opacity: 0.62; position: relative; overflow: hidden; } .msg.pending .bubble::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.16) 50%, transparent 80%); transform: translateX(-100%); animation: onitsway 1.8s ease-in-out infinite alternate; } @keyframes onitsway { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* A LIGHT SWEEP OVER A PALE BUBBLE IS INVISIBLE. In light mode the same gesture has to be a shadow rather than a highlight. Dark is the base here — this file's :root IS the dark palette and light is the explicit choice, so this is the one override. */ :root[data-theme="light"] .msg.pending .bubble::after { background: linear-gradient(100deg, transparent 20%, rgba(20, 16, 43, 0.10) 50%, transparent 80%); } /* ---- how far the upload has got ---- * * "when uploading images, or any other file, we need some sort of progress * indication as images sometimes get stuck there and the user doesn't know * what is going on until sent" * * Two states, because the wait has two halves and only one of them has a * number: the bytes going up (a percentage) and the server reading them * (`.working`, which is a stripe travelling rather than a bar filling). A bar * frozen at 100% is exactly what "stuck" looks like, so it never sits there. */ .up { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .up-track { flex: 1; height: 4px; border-radius: 3px; overflow: hidden; background: rgba(139, 155, 240, 0.22); } .up-fill { height: 100%; width: 0; border-radius: 3px; background: var(--orange); transition: width 0.18s ease-out; } .up-label { font-family: var(--mono); font-size: 0.66rem; color: var(--text-dim); min-width: 5.5em; text-align: right; font-variant-numeric: tabular-nums; } .up.working .up-fill { width: 100% !important; background: linear-gradient(90deg, transparent, var(--orange), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: upworking 1.1s linear infinite; } @keyframes upworking { from { background-position: -40% 0; } to { background-position: 140% 0; } } /* Nothing has moved for eight seconds. Amber, not red: it is slow, and it may yet arrive. */ .up.slow .up-label { color: var(--orange-bright); } @media (prefers-reduced-motion: reduce) { /* SAY THE SAME THING WITHOUT MOVING. Somebody who has asked for less motion still needs to know the message has not gone yet. */ .msg.pending .bubble::after { animation: none; transform: none; background: none; } .msg.pending .bubble { opacity: 0.5; } .up.working .up-fill { animation: none; background: var(--orange); opacity: 0.55; } } .msg.failed .bubble { box-shadow: 0 0 0 1.5px var(--bad); opacity: 1; } .msg.failed .ticks { color: #ffb3ad; } /* ---- reply and forward context ---- */ /* Shown INSIDE the bubble, above the text: a reply's quote must travel with the reply, so it survives being read on a phone where there is no hover. */ .quoted { display: block; margin: -2px -4px 7px; padding: 5px 10px; border-left: 3px solid var(--blue-soft); border-radius: 0 8px 8px 0; background: var(--sunk); font-size: 0.82rem; color: var(--text-dim); } .quoted b { color: var(--blue-soft); font-weight: 650; } .quoted-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* A QUOTE OF A SELECTED PART IS SHOWN WHOLE. * * "quoting only the selected part (complete) instead of just the first * part in a regular reply" * * The rule above is right for an ordinary reply, where the excerpt is an * arbitrary first 90 characters and one line of it is a hint rather than a * quotation. It is wrong for a chosen one: a sentence cut off at its 90th * character is not the sentence somebody selected. * * `overflow-wrap` because a selection can contain a URL, and `pre-wrap` so the * line breaks inside it survive — a quoted list that comes back as one run-on * line is not what was on screen. */ .quoted-text.full { white-space: pre-wrap; overflow-wrap: anywhere; text-overflow: clip; } .fwd-mark { display: flex; align-items: center; gap: 5px; margin: -2px 0 6px; font-size: 0.74rem; color: var(--muted); font-style: italic; } /* ---- the menu that follows a selection ---- * * Fixed, because it is positioned against the VIEWPORT: it sits outside the * scroll container so that a message arriving from the poll does not slide it * off the words it is pointing at. * * Above everything, including the composer and the thread header, which it can * legitimately overlap when the selection is at the top or bottom of the * thread. */ .sel-menu { position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: 10px; background: var(--panel-raised); border: 1px solid var(--panel-border); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34); } .sel-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font: inherit; font-size: 0.86rem; white-space: nowrap; cursor: pointer; text-align: left; } .sel-item:hover, .sel-item:focus-visible { background: var(--sunk-firm); } .sel-item svg { width: 16px; height: 16px; flex: none; opacity: 0.8; } /* ---- OKR cards ---- * * Cards with a percentage, and a tab to move between what is running and what * is finished. Each card is a
whose IS the card, so the * thing you click and the thing that opens cannot come apart, and it needs no * JavaScript. * * auto-fit with a minimum, not a fixed column count: three goals should not * stretch to fill a desktop width and one should not sit alone in a row of * three empty ones. */ .okr-grid { display: grid; gap: 10px; margin-top: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* THE CARD IS A WRAPPER since 2026-10-01: the
that opens, and "Fed by" under it. The border belongs to the wrapper so the two read as one. */ .okr-card { border: 1px solid var(--panel-border); border-radius: var(--radius-sm); background: var(--panel-raised); overflow: hidden; display: flex; flex-direction: column; position: relative; } /* A CHILD DRAWN INSIDE ITS PARENT. * * "if there is a child company OKR, then it should only show inside the * corresponding parent" * * The same card, told apart from the one around it by an indent and a rail * rather than by a second border — two nested boxes read as a mistake. It is * deliberately NOT `.okr-card`: the drag code matches that class, and a card * that cannot be reordered must not look like one that can. */ .okr-sub { margin: 8px 0 2px 10px; padding-left: 10px; border-left: 2px solid var(--accent-okr, var(--panel-border)); display: flex; flex-direction: column; } .okr-sub > .okr { border: 1px solid var(--panel-border); border-radius: var(--radius-sm); background: var(--panel-raised); } .okr { overflow: hidden; } /* DRAGGING. The handle sits in the corner; the card being moved goes faint and dashed and travels through the grid, so where it lands is where it is. */ .okr-grip { position: absolute; top: 7px; right: 8px; z-index: 1; cursor: grab; touch-action: none; user-select: none; color: var(--muted); font-size: 1rem; line-height: 1; padding: 3px 4px; border-radius: 6px; } .okr-grip:hover { color: var(--text); background: var(--sunk); } .okr-card.sortable .okr-title { padding-right: 22px; } .okr-card.dragging { opacity: .55; outline: 2px dashed var(--accent-okr); outline-offset: 2px; } .okr-grid.sorting, .okr-grid.sorting * { cursor: grabbing; user-select: none; } .okr > summary { display: grid; gap: 8px; padding: 12px 13px; cursor: pointer; list-style: none; } .okr > summary::-webkit-details-marker { display: none; } .okr[open] > summary { border-bottom: 1px solid var(--panel-border); } .okr > summary:hover { background: var(--sunk); } /* The title sets the card's height, so a long one wraps rather than being cut: a goal you cannot read the end of is a goal you have to open to identify. */ .okr-title { font-weight: 650; line-height: 1.3; } .okr-pc { font-size: 1.35rem; font-weight: 700; color: var(--accent-okr); } .okr-pc span { font-size: 0.8rem; font-weight: 400; color: var(--text-dim); } .okr-due { margin-top: -2px; } /* THE TWO FIELDS, ON THE CARD'S FACE. They exist whether or not they are filled in — a field with nothing in it still has to say its own name, or nobody knows it is there to fill in. */ .okr-meta { display: flex; gap: 7px; align-items: baseline; font-size: .74rem; } .okr-meta-k { color: var(--muted); flex: none; min-width: 5.6em; } .okr-meta-v { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .okr-meta-v.empty { color: var(--warn); } /* Linking from the card, without opening the edit form. */ .okr-link { display: flex; gap: 7px; align-items: center; margin: 0 0 8px; } .okr-link select { flex: 1; min-width: 0; font-size: .8rem; } .okr-more { padding: 11px 13px 13px; } /* ---- editing an objective ---- */ .okr-edit { margin-top: 10px; } .okr-edit > summary { cursor: pointer; color: var(--text-dim); font-size: 0.78rem; padding: 4px 0; list-style: none; } .okr-edit > summary::-webkit-details-marker { display: none; } .okr-edit > summary::before { content: "\270E\00a0"; } .okr-edit > summary:hover { color: var(--text); } .goal-form { display: grid; gap: 9px; margin-top: 8px; } .goal-form .field { margin: 0; } /* A key result's tick and its remove sit INSIDE the row, so the row stays one line and the text is what moves when the window narrows. */ .kr-list li { display: flex; align-items: baseline; gap: 6px; } .kr-tick, .kr-drop { display: inline; } .kr-tick button, .kr-drop button { border: 0; background: none; padding: 0; cursor: pointer; color: var(--text-dim); font: inherit; line-height: 1; } .kr-tick button { font-size: 1.05em; } .kr-tick button:hover, .kr-drop button:hover { color: var(--text); } /* Only on hover, and never on a phone where there is no hover to wait for — a delete that is always visible beside every line invites the wrong tap. */ .kr-drop { margin-left: auto; opacity: 0; transition: opacity .12s; } .kr-list li:hover .kr-drop, .kr-drop button:focus-visible { opacity: 1; } @media (hover: none) { .kr-drop { opacity: 1; } } /* ---- the call roll-call ---- * * "it is difficult to see who joined and who is still ringing" * * A row per person: face, name, and what they are doing. The state is the * column that matters, so it is the one that is aligned — a reader scanning for * "who can hear me" reads down one edge rather than across every line. */ .callbox-open { display: block; flex: 1; min-width: 0; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 10px; } .callbox-open:hover { background: rgba(255, 255, 255, 0.06); } .callbox-open:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .call-roll { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .call-roll-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; } .call-roll-row.on { background: var(--sunk); } /* Dimmed until they answer — the same rule the bar's faces follow, so the two cannot say different things about the same person. */ .call-roll-row:not(.on) { opacity: 0.62; } .call-roll-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .call-roll-state { color: var(--text-dim); font-size: 0.78rem; white-space: nowrap; } .call-roll-row.on .call-roll-state { color: var(--ok); } /* The composer's bar when a private reply is being written. The same shape as the reply bar, in the accent that says "this is not the thread you were just reading" — somebody who arrived here by pressing a menu row needs the destination to look different from the origin. */ .reply-bar.privately { border-left: 3px solid var(--accent-okr); background: var(--sunk-firm); } /* ---- the person card, from a direct message's header ---- * * "clicking on the other partie's name or avatar in the header of a * private chat should show a modal with the user's profile and a list of * groups shared with that person" — Sam, 2026-10-12 */ /* THE FACE AND THE NAME ARE ONE TARGET. A button, so it is reachable by keyboard — and stripped back to looking like what it replaced, because a header that suddenly has a button in it reads as a new control rather than as the same name being clickable. */ .thread-who { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 2px 4px; margin: -2px -4px; border-radius: 10px; color: inherit; font: inherit; cursor: pointer; } .thread-who:hover { background: var(--panel-hover); } .thread-who:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; } .person-card { display: flex; gap: 14px; align-items: flex-start; } .person-card .avatar.lg { flex: none; } .person-card-main { min-width: 0; flex: 1; } .person-card-name { margin: 0 0 2px; font-size: 1.1rem; } .person-card-role { margin: 0 0 4px; color: var(--text-dim); font-size: .9rem; } .person-card-meta { margin: 0; color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; } .person-card-status { margin: 6px 0 0; font-size: .86rem; } .person-card-h { margin: 18px 0 6px; font-size: .74rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } /* The groups, as rows that go somewhere. "We are both in Releases" is a fact somebody acts on by going there. */ .person-groups { list-style: none; margin: 0; padding: 0; } .person-groups li { margin: 0; } .person-groups .person { display: flex; align-items: center; gap: 9px; padding: 7px 6px; border-radius: 10px; color: inherit; text-decoration: none; } .person-groups .person:hover { background: var(--panel-hover); } /* ======================================================= the call, full screen * * "cuando estoy en una llamada, deberia aparecer una ventana modal (o full * screen mejor) con la info de la llamada, los tiles de cada persona ... * el nombre de la persona abajo a la izquierda de su tile y el microfono a * la derecha, poniendolo en rojo si estan en mute. Arriba ... el titulo * del grupo ... un contador de tiempo y los botones para cortar ... y un * boton para poder minimizar." — Sam, 2026-10-06 * * ABOVE THE BAR (z-index 400 against the bar's 300), because this IS the call * and the bar is what a minimised one looks like. Both are fixed layers rather * than dialogs: a 's focus trap would fight whichever of the two is * showing, and `showModal` from inside a poll handler steals focus from * somebody mid-sentence. */ .call-room { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; background: var(--bg); /* THE TOKENS, NEVER env() DIRECTLY. In the Android shell the activity already pads the WebView inside the system bars, and a page that also reads the raw environment grows a dead band at each end — see tests/test_altdoor.py. In a browser these are the environment; in the app they are zero. */ padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); } /* The page underneath does not scroll while the room is up: it is not visible and a stray wheel event should not move it. */ body.in-call-room { overflow: hidden; } .call-room-top { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--panel-border); flex: none; } .call-room-id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; } .call-room-title { font-weight: 650; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .call-room-sub { color: var(--muted); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The one number on the screen, and it changes every second — proportional digits make it jitter under the eye. */ .call-room-clock { font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 600; color: var(--text); flex: none; } /* THE LINE'S OWN READOUT, beside the clock. Small, quiet and factual until something is wrong with it, because on a call that is fine it is furniture and on a call that is not it is the first thing anybody should read. */ .call-room-net { font-size: 0.74rem; color: var(--muted); flex: none; font-variant-numeric: tabular-nums; padding: 3px 9px; border-radius: 999px; background: var(--sunk-firm); } .call-room-net.bad { color: var(--orange-bright, #f6a560); } @media (max-width: 620px) { .call-room-net { display: none; } } .call-room-body { flex: 1; min-height: 0; overflow: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; } .call-room-link { margin: 0; flex: none; word-break: break-all; } .call-room-acts { flex: none; display: flex; justify-content: center; gap: 10px; padding: 14px 18px 18px; border-top: 1px solid var(--panel-border); flex-wrap: wrap; } .call-room-btn { padding: 11px 18px; } .call-room-btn.on { background: var(--blue); border-color: var(--blue); color: #fff; } /* ---- a tile for every person, on camera or not ---- * * The grid used to exist only when somebody turned a camera on, which made an * audio call — almost all of them — a screen with nothing on it. An avatar IS * a face; the camera replaces it inside the same tile when there is one. * * `data-count` rather than auto-fit alone: auto-fit cannot know whether two * people should be side by side or stacked, and one face must fill the room * rather than sit in a 140px box in the corner of it. */ /* THE ROWS SHARE THE ROOM'S HEIGHT, and a tile fills its cell. * * "The meeting view breaks in full-screen mode" — Agustin Groh, 2026-10-21 * * Tiles used to be 4:3 boxes. With three or four people the grid is 2×2, and * a 4:3 tile half the width of a landscape screen is taller than half its * height. The second row then started inside the first: tiles overlapped, * and the guest link sat on top of them. Any wide, short window did it; a * full screen just made it obvious. Now each row takes an equal share of the * height the room has (never under 120px; below that the room scrolls rather * than overlapping) and the tile stretches to its cell. A camera fills it with * object-fit: cover. * `min-height: auto` (not 0) so the grid is never squeezed below its rows. */ .call-tiles { display: grid; gap: 12px; flex: 1; min-height: auto; align-content: center; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); grid-auto-rows: minmax(120px, 1fr); } .call-tiles[data-count="1"] { grid-template-columns: minmax(0, min(640px, 100%)); justify-content: center; } .call-tiles[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .call-tiles[data-count="3"], .call-tiles[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 620px) { .call-tiles, .call-tiles[data-count="2"], .call-tiles[data-count="3"], .call-tiles[data-count="4"] { grid-template-columns: minmax(0, 1fr); } } .call-tile { margin: 0; position: relative; border-radius: 16px; overflow: hidden; background: var(--sunk-firm, #171b26); display: flex; align-items: center; justify-content: center; border: 1px solid var(--panel-border); transition: border-color .15s ease; } /* WHO IS TALKING. On a call where every camera is off this is the only thing on the screen that moves, and it is the one thing a grid of faces can say that a list of names cannot. */ .call-tile.talking { border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok) inset; } /* THREE BARS, TOP-LEFT. LiveKit's own per-participant reading, which is the number that matters: on a call of five, "the call is bad" is not actionable and "Ana's line is poor" is. Drawn only where there is a reading — three grey bars against a name nobody has heard from is a measurement nobody took. */ .call-tile-net { position: absolute; top: 10px; left: 12px; display: flex; align-items: flex-end; gap: 2px; height: 14px; padding: 4px 5px; border-radius: 6px; background: rgba(8, 10, 16, 0.45); } .call-tile-net i { width: 3px; background: rgba(255, 255, 255, 0.28); border-radius: 1px; display: block; } .call-tile-net i:nth-child(1) { height: 5px; } .call-tile-net i:nth-child(2) { height: 9px; } .call-tile-net i:nth-child(3) { height: 13px; } .call-tile-net i.on { background: #fff; } .call-tile-net[data-q="poor"] i.on { background: var(--orange-bright, #f6a560); } .call-tile-net[data-q="lost"] { background: rgba(226, 87, 76, 0.85); } /* Still ringing: present, not yet here. */ .call-tile.waiting { opacity: 0.5; } .call-tile-state { position: absolute; top: 10px; right: 12px; font-size: 0.72rem; color: var(--muted); background: var(--panel-solid); border-radius: 999px; padding: 3px 9px; } /* The avatar, large and centred — it is the face until a camera says otherwise. */ .call-tile-face { width: 96px; height: 96px; font-size: 2rem; flex: none; } .call-tile-face .avatar-img { width: 100%; height: 100%; } .call-tile.has-video .call-tile-face { display: none; } /* THE ELEMENT IS ALWAYS THERE; THE PICTURE IS NOT. Every track a person publishes goes into one