* { box-sizing: border-box; }
/* height:100% is load-bearing for the standalone shell — see html.standalone
.app below. The canvas is not painted here: on /chats it belongs to
in home.css (the top wash), and body has to stay transparent so the grain
layer at z-index -1 shows through. The three pages that load this file
without home.css paint it on body instead, one rule down. */
html, body { margin: 0; height: 100%; }
body {
background: var(--page-bg);
font-family: var(--h3-font, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
}
body.chats { background: transparent; }
/* Chat tokens. The palette is the home page's: this file loads after /home.css
on /chats and takes --h3-* as its source, keeping its own names as semantic
aliases (fewer edits across 2600 lines, and --card-radius is pinned by name
in minify_test.go).
Every alias carries a literal fallback because two pages — /terms and
/billing — load this file WITHOUT home.css. There var(--h3-bg) would resolve
to nothing and the declaration would be dropped at computed-value time, so the
fallback is what those pages actually get. Keep it in step with home.css when
the palette moves; it is the one place values are duplicated, and they sit
next to the var() so the drift is visible.
Those two take only the LEGAL PAGE HEADER section from this file. Everything
else here is the chat, which does load home.css and never sees a fallback. */
:root {
/* The whole UI is dark, and saying so has one effect the palette below cannot:
it darkens the canvas the browser paints *before* any of our CSS applies —
the surface iOS shows during the interactive back-swipe, which was flashing
white. The , so the pill cannot be nested inside it. */
.sidebar-top { flex: none; display: flex; align-items: center; gap: 10px; padding: 20px 20px 14px; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0; color: inherit; text-decoration: none; }
.brand-wordmark { height: 26px; width: auto; display: block; }
/* Desktop: the wordmark heads the sidebar the way it heads the menu on the home
page, and at exactly the size it has there — 231px, which is that page's 280px
menu column minus its two 24px paddings and the 1px border (see .h3-brand-word
in home.css). The number is copied rather than derived because this sidebar is
312px: spanning *its* column would draw a logo visibly bigger than the home
page's, and the two pages have to read as one product. height:auto keeps the
594:120 file's ratio (~47px). Below the breakpoint the phone balance pill
shares this row, so the base 26px rule stays. */
@media (min-width: 721px) {
.sidebar-top .brand-wordmark { width: 231px; height: auto; }
}
/* Phone-only surfaces; on desktop the sidebar keeps .balance-card and its
.sidebar-foot rows, which have the room a 312px column affords. */
.mobile-balance { display: none; }
.chat-bottomnav { display: none; }
.brand-add {
margin-left: auto;
width: 34px;
height: 34px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-dim2);
}
/* The home page's sidebar rows: pills in a column, tinting to a faint accent on
hover. They were full-bleed strips divided by hairlines, which turned the foot
of the column into a ledger of rules; the home menu carries the same five
destinations with no dividers at all, and the pill is what marks the row
instead. Letter-spacing and size are that page's .h3-nav-item. */
.sidebar-foot {
flex: none;
/* Two of these rows are (daily, games) and three are . Without a
reset the buttons keep the UA border and ButtonFace fill, which is what the
daily row looked like: a grey plate with a white outset frame. */
border: none;
background: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 11px;
margin: 0 12px 2px;
padding: 9px 12px;
border-radius: var(--pill);
color: var(--text-dim);
text-decoration: none;
font-size: 13.5px;
font-weight: 500;
letter-spacing: .025em;
transition: background-color .15s ease, color .15s ease;
}
/* The last row is flush with the column's bottom edge otherwise. */
.sidebar-foot:last-child { margin-bottom: 12px; }
.sidebar-foot svg { flex: none; }
.sidebar-foot:hover { background: var(--accent-weak); color: var(--text); }
/* The wrapper around those rows. Column, so the desktop foot keeps its shape —
the margins that space the rows still live on the rows themselves. One thing
does change: :last-child above now matches "log out", where before it matched
nothing (the hidden .chat-bottomnav is the last child of .sidebar), so the
column finally gets the 12px bottom clearance that rule always meant. Its
reason to exist is the short-viewport query at the foot of this file. */
.sidebar-nav { flex: none; display: flex; flex-direction: column; }
.sub-badge {
margin-left: auto;
padding: 2px 9px;
border-radius: var(--pill);
background: var(--accent-soft);
color: var(--accent-text);
font-size: 11px;
font-weight: 600;
letter-spacing: .02em;
}
/* Coins balance — sidebar footer row and chat header badge. */
.coins-foot {
flex: none;
display: flex;
align-items: center;
gap: 11px;
margin: 0 12px 2px;
padding: 9px 12px;
border-radius: var(--pill);
color: var(--text-dim);
font-size: 13.5px;
font-weight: 500;
}
.coin-ico { flex: none; object-fit: contain; vertical-align: middle; }
.coins-foot .coin-ico { width: 22px; height: 22px; }
.coins-count { margin-left: auto; font-weight: 600; color: var(--text); }
.header-coins {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 999px;
border: 1px solid var(--gold-border);
background: var(--gold-soft);
color: var(--gold);
font-size: 13px;
font-weight: 600;
}
.header-coins .coin-ico { width: 18px; height: 18px; }
/* The coin balance (sidebar footer + header badge) is a button that opens the
coins purchase modal; strip native button chrome and keep the prior look. The
two-class selectors reaffirm size/color so source order can't clobber them. */
.coins-open { appearance: none; -webkit-appearance: none; cursor: pointer; }
.coins-foot.coins-open {
width: calc(100% - 24px);
border: none;
background: none;
color: var(--text-dim);
font-size: 13.5px;
font-weight: 500;
font-family: inherit;
text-align: left;
}
.coins-foot.coins-open:hover { background: var(--accent-weak); }
.header-coins.coins-open { font-family: inherit; }
.header-coins.coins-open:hover { background: rgba(255, 199, 96, .2); border-color: var(--gold); }
/* Subscription pill in the chat header: shows the current tier and expiry (or a
"no subscription" prompt for free users) and opens the checkout modal on click.
Whole pill is the button. */
.header-sub {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 11px;
border: 1px solid var(--accent-soft);
border-radius: var(--pill);
background: var(--accent-soft);
color: var(--text);
font-size: 13px;
font-weight: 600;
line-height: 1.15;
cursor: pointer;
transition: background .15s, border-color .15s;
}
.header-sub:hover { background: var(--accent-glow); border-color: var(--accent); }
.header-sub-ico { fill: currentColor; color: var(--accent-text); flex: none; }
.header-sub-tier { white-space: nowrap; }
.header-sub-until {
color: var(--text-dim2);
font-weight: 500;
white-space: nowrap;
}
/* No subscription: not a status badge but the page's call to action, wearing the
premium glow the home page gives everything that sells — a dark two-stop fill
under a gradient hairline. It is the only such object in the header; the coins
pill beside it keeps gold, so the two asks stay told apart — gold is what
conversation is spent from, the star is what unlocks photos. */
.header-sub--free {
border-color: transparent;
background: var(--grad-fill) padding-box, var(--grad-border) border-box;
color: #fff;
box-shadow: var(--grad-shadow);
transition: filter .18s, transform .12s, box-shadow .18s;
}
.header-sub--free:hover {
background: var(--grad-fill) padding-box, var(--grad-border) border-box;
border-color: transparent;
box-shadow: var(--grad-shadow-hover);
transform: translateY(-1px);
}
/* The subscribed rule leaves the star hollow and grey; on the gradient it has to
be a filled white star instead. */
.header-sub--free .header-sub-ico { fill: currentColor; color: #fff; }
.header-sub-cta { white-space: nowrap; }
/* Both labels ship; the viewport picks one (see the 900px block below). */
.header-sub-cta-short { display: none; }
/* Screen-reader-only text: visually removed but announced by assistive tech. */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.lang-switch {
flex: none;
display: flex;
gap: 4px;
margin: 12px 18px 0;
padding: 3px;
background: var(--surface-1);
border: 1px solid var(--hairline);
border-radius: 10px;
}
.lang-opt {
flex: 1;
border: none;
background: none;
cursor: pointer;
padding: 6px 0;
border-radius: 8px;
color: var(--text-dim2);
font: inherit;
font-size: 12.5px;
font-weight: 600;
letter-spacing: .04em;
transition: background .2s, color .2s;
}
.lang-opt:hover { color: var(--text); }
.lang-opt.active {
background: var(--accent-soft);
color: var(--accent);
}
/* The same switcher is reused for the assistant's reply language in the panel,
where it sits flush under its section title instead of in the sidebar. */
.assistant-panel .lang-switch { margin: 8px 0 0; }
.search-wrap {
display: flex;
align-items: center;
gap: 9px;
margin: 0 16px 12px;
padding: 0 13px;
height: 42px;
border-radius: 13px;
background: var(--surface-1);
border: 1px solid var(--hairline);
}
.search-wrap:focus-within { border-color: var(--accent); }
.search-input {
flex: 1;
border: none;
outline: none;
background: transparent;
color: var(--text);
font-size: 13.5px;
}
.search-input:focus-visible { outline: none; }
.section-label {
padding: 2px 22px 8px;
font-size: 11px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--text-dim2);
font-weight: 500;
}
.section-recent {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 22px 8px;
}
.section-count {
min-width: 18px;
height: 18px;
padding: 0 6px;
border-radius: 9px;
background: var(--accent-soft);
color: var(--accent);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.chat-list {
flex: 1;
overflow-y: auto;
padding: 0 10px 14px;
display: flex;
flex-direction: column;
gap: 2px;
}
/* The home page's .h3-nav-item, one size up: a pill that tints on hover and, when
it is the current one, takes an accent border, an accent wash and a short drop
shadow of the accent. A 46px avatar with two lines beside it sits inside a pill
the way a 24px icon with one line does — the round ends follow the avatar.
The transparent border is what keeps the row from moving when it becomes
active: the border is always there, only its colour changes. */
.row {
position: relative;
/* The glow below is z-index:-1, which without a stacking context here would
put it behind the sidebar's own background instead of behind the row. */
isolation: isolate;
display: flex;
align-items: center;
gap: 12px;
padding: 11px 12px;
border: 1px solid transparent;
border-radius: var(--pill);
cursor: pointer;
text-decoration: none;
color: inherit;
transition: background-color .15s ease, color .15s ease;
}
/* Hover is a blurred shape rather than a fill, so the row has no edge of its own
until it is the selected one. A flat tint inside the pill drew a second hard
outline a pixel inside the first, and at 68px tall — much bigger than the home
page's nav rows this pill came from — that outline read as a control the
pointer had switched on. Blurring the same shape keeps the pill's silhouette
and takes away the boundary: what follows the cursor is a soft patch of accent,
and the only crisp edge in the column stays the one that means "you are here".
The fill is 40% accent, well above the 10% a flat tint used: blur spreads the
shape over ~12px at every edge and dilutes it, so a wash mixed at the flat
tint's strength came out almost invisible. 40% was picked against the row
above it — at 60% the hover glowed brighter than the selected row and the two
swapped places in the hierarchy. */
.row::before {
content: "";
position: absolute;
inset: 1px;
z-index: -1;
border-radius: inherit;
background: color-mix(in srgb, var(--accent) 40%, transparent);
opacity: 0;
filter: blur(12px);
transition: opacity .18s ease;
}
.row:hover::before { opacity: 1; }
.row.active {
border-color: var(--accent);
background: var(--accent-soft);
box-shadow: 0 6px 20px -8px var(--accent);
}
.new-chat-row {
width: 100%;
text-align: left;
font: inherit;
border-color: var(--accent-soft);
background: var(--accent-weak);
margin-bottom: 6px;
}
.new-chat-row:hover {
border-color: var(--accent);
background: var(--accent-soft);
}
.new-chat-title { font-weight: 600; font-size: 14px; color: var(--text); }
.new-chat-sub { font-size: 12px; color: var(--text-dim2); margin-top: 2px; }
.avatar {
position: relative;
width: 46px;
height: 46px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 15px;
color: #fff;
flex: none;
background: var(--media-bg);
}
.new-chat-avatar {
background: var(--accent);
color: var(--on-accent);
box-shadow: var(--accent-lamp);
transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.new-chat-avatar svg { transition: transform .18s ease; }
.new-chat-row:hover .new-chat-avatar {
transform: translateY(-1px);
box-shadow: var(--accent-lamp-hover);
}
.new-chat-row:hover .new-chat-avatar svg { transform: rotate(90deg); }
.row-online {
position: absolute;
right: -2px;
bottom: -2px;
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--online);
border: 2.5px solid var(--chrome-bg);
box-shadow: 0 0 6px var(--online);
}
.row-body { flex: 1; min-width: 0; }
.row-top { display: flex; align-items: baseline; gap: 8px; }
.row-name {
font-weight: 500;
font-size: 14px;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.row-time { margin-left: auto; font-size: 11px; color: var(--text-dim2); flex: none; }
.row-bottom { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.row-snippet {
flex: 1;
min-width: 0;
font-size: 12.5px;
color: var(--text-dim2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.row-typing {
color: var(--accent-text);
animation: row-typing-pulse 1.6s ease-in-out infinite;
}
@keyframes row-typing-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .5; }
}
/* While a conversation is open, drop the last-message preview from its own row
in the chat list — it duplicates the dialog you're already reading. Other
(inactive) chats keep their snippet. On desktop both panes are visible at
once; on phones the conversation replaces the list entirely, so this only
applies above that breakpoint (where the list stays beside the open dialog). */
@media (min-width: 721px) {
.app.chat-open .row.active .row-snippet { display: none; }
}
.badge {
min-width: 19px;
height: 19px;
padding: 0 6px;
border-radius: 10px;
background: var(--accent);
color: var(--on-accent);
font-size: 11px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
flex: none;
}
/* Balance card — sidebar footer summary of the coin balance with a quick "+"
top-up button (the button reuses .coins-open to open the coins modal). */
.balance-card {
flex: none;
display: flex;
align-items: center;
gap: 11px;
margin: 8px 12px 4px;
padding: 12px 14px;
border-radius: 16px;
background: var(--gold-soft);
border: 1px solid var(--gold-border);
}
.balance-ico { width: 24px; height: 24px; }
.balance-info { flex: 1; min-width: 0; line-height: 1.2; }
.balance-label {
font-size: 11px;
letter-spacing: .3px;
color: var(--text-dim2);
}
.balance-value { font-size: 16px; font-weight: 600; color: var(--gold); }
.balance-value .coins-count { margin: 0; color: inherit; }
.balance-add {
flex: none;
width: 28px;
height: 28px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
color: var(--page-bg);
background: var(--gold);
}
.balance-add:hover { filter: brightness(1.06); }
/* Phone stand-in for .balance-card: the same balance and the same "+" top-up, as
a pill in the brand row instead of a card that costs the list ~76px. Shown by
the 720px query; the base rule above keeps it out of the desktop sidebar. */
.mobile-balance {
flex: none;
margin-left: auto;
align-items: center;
gap: 6px;
padding: 5px 6px 5px 10px;
border-radius: 999px;
border: 1px solid var(--gold-border);
background: var(--gold-soft);
color: var(--gold);
font-family: inherit;
font-size: 13px;
font-weight: 600;
}
.mobile-balance .coin-ico { width: 18px; height: 18px; }
.mobile-balance-plus {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
color: var(--page-bg);
background: var(--gold);
}
/* Phone tab bar for the chat-list screen — see the comment on the markup in
chats.gotmpl for why it lives inside .sidebar instead of being fixed. */
.chat-bottomnav {
flex: none;
align-items: stretch;
border-top: 1px solid var(--hairline);
background: var(--chrome-bg);
/* .app is 100dvh under viewport-fit=cover and drops its padding on phones, so
this is the only thing between the labels and the home indicator. max() and
not a sum, same as .composer: the indicator strip is already clearance, and
adding to it leaves a visibly empty band. Note the row this bar replaces
(the "log out" .sidebar-foot) had no inset at all and sat under it. */
padding-bottom: max(6px, env(safe-area-inset-bottom));
}
.chat-bottomnav > a,
.chat-bottomnav > button {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 10px 4px;
border: none;
background: none;
font-family: inherit;
/* .72rem and 500, the home page's tab bar. The old 10px/600 was a size below
anything else in the interface and read as a caption rather than a label. */
font-size: .72rem;
font-weight: 500;
line-height: 1.1;
text-align: center;
text-decoration: none;
color: var(--text-dim);
cursor: pointer;
}
.chat-bottomnav > a > svg,
.chat-bottomnav > button > svg { flex: none; }
.chat-bottomnav > .on { color: var(--accent-text); }
/* ================= MIDDLE PANEL ================= */
.main {
flex: 1;
display: flex;
/* Query source for the composer: what that row has to fit into is this column,
not the screen. Safe to contain — .main is flex:1 with a zero basis, so its
width never came from its contents, and it was already position:relative +
z-index, so the implied layout/style containment changes nothing. */
container-type: inline-size;
flex-direction: column;
min-width: 0;
background: var(--chrome-bg);
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
overflow: hidden;
position: relative;
z-index: 1;
}
/* The home page's header row: 64px tall, hairline underneath, nothing else. */
.chat-header {
display: flex;
align-items: center;
gap: 13px;
min-height: 64px;
padding: 12px 24px;
border-bottom: 1px solid var(--hairline);
}
.header-avatar {
width: 42px;
height: 42px;
flex: none;
border-radius: 13px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 15px;
color: #fff;
background: var(--media-bg);
}
/* The avatar + name area is a button so it can open the assistant panel as an
overlay on mobile; on desktop the panel is always visible so it stays inert. */
.header-info {
display: flex;
align-items: center;
gap: 13px;
min-width: 0;
padding: 0;
border: none;
background: none;
color: inherit;
font: inherit;
text-align: left;
cursor: default;
}
/* Back arrow returning to the chat list, shown only in the single-column mobile
layout. */
.mobile-back {
display: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-left: -8px;
border-radius: 12px;
color: var(--text-dim);
}
.mobile-back:hover { background: var(--surface-2); color: var(--text); }
/* Closes the assistant panel overlay; only meaningful on mobile. */
.panel-close {
display: none;
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
width: 36px;
height: 36px;
border: none;
border-radius: 10px;
background: var(--surface-2);
color: var(--text-dim);
font-size: 24px;
line-height: 1;
cursor: pointer;
}
.panel-close:hover { background: rgba(255, 255, 255, .12); color: var(--text); }
/* The CTA pill beside it is wider than the status badge it replaced, so the name
is what gives: it truncates instead of shoving the header actions out of the
bar. .header-info already carries min-width:0; this inner column needs the same
before an ellipsis can bite. */
.header-text { min-width: 0; }
.header-name {
font-weight: 600;
font-size: 15.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.status { display: flex; align-items: center; gap: 6px; margin-top: 1px; min-width: 0; }
.status-dot {
width: 7px;
height: 7px;
flex: none;
border-radius: 50%;
background: #5fd29a;
box-shadow: 0 0 8px #5fd29a;
}
.status-text {
font-size: 12px;
color: var(--text-dim2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* flex:none makes the coins pill, the CTA and the menu inviolable, so the name is
what shrinks. Pairs with the ellipsis above — without it the name would spill
over the pill instead of truncating. The avatar and the status dot get the same
protection: they have fixed dimensions but were squashed into ovals under
pressure (42×42 became 27×42 on a phone). */
.header-actions { margin-left: auto; flex: none; display: flex; gap: 6px; }
/* The home page's .h3-icon-btn: a 40px circle with a hairline, dim until it is
hovered. The hairline is the one home uses over photos rather than --hairline,
because these buttons sit in the header where nothing backs them. */
.icon-btn { cursor: pointer; color: var(--text-dim); }
.icon-btn:hover { background: var(--surface-1); color: var(--text); }
.action-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--h3-line-media, rgba(255, 255, 255, .24));
display: flex;
align-items: center;
justify-content: center;
}
.menu-wrap { position: relative; }
.menu-btn.open { background: var(--surface-1); color: var(--text); }
.menu-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 20;
min-width: 184px;
padding: 6px;
border-radius: 14px;
background: var(--chrome-bg);
border: 1px solid var(--hairline);
box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
display: flex;
flex-direction: column;
gap: 2px;
}
.menu-dropdown[hidden] { display: none; }
.menu-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 11px;
border: none;
border-radius: 10px;
background: transparent;
color: var(--text-dim);
font-family: inherit;
font-size: 13.5px;
text-align: left;
cursor: pointer;
}
.menu-item:hover { background: var(--surface-2); color: var(--text); }
.menu-item svg { flex-shrink: 0; }
/* Same danger hue as the confirmation modal this item opens. */
.menu-delete { color: var(--danger); }
.menu-delete:hover { background: var(--danger-soft); color: var(--danger); }
.messages {
flex: 1;
overflow-y: auto;
padding: 26px 24px 10px;
display: flex;
flex-direction: column;
gap: 12px;
}
.empty-chat {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 14px;
padding: 24px;
}
.empty-chat-icon {
width: 88px;
height: 88px;
border-radius: var(--card-radius);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
background: var(--accent-soft);
}
.empty-chat-title {
font-size: 19px;
font-weight: 600;
color: var(--text);
}
.empty-chat-text {
max-width: 320px;
font-size: 14px;
line-height: 1.55;
color: var(--text-dim2);
}
.day {
align-self: center;
padding: 4px 14px;
margin-bottom: 8px;
border-radius: 999px;
background: var(--surface-1);
border: 1px solid var(--hairline);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-dim2);
}
.msg { display: flex; animation: fadeUp .3s ease; }
/* Stored message with nothing to draw — a turn that is only a photo offer. It
stays in the DOM because app.js counts .msg nodes to seed its /state cursor,
but it must not take a row (and a gap) in the thread. */
.msg-empty { display: none; }
.msg-user { justify-content: flex-end; }
.msg-bot { justify-content: flex-start; }
.bubble {
max-width: 74%;
padding: 12px 16px;
border-radius: 18px;
font-size: 14px;
line-height: 1.5;
}
.bubble-user {
border-bottom-right-radius: 6px;
background: var(--accent);
color: var(--on-accent);
box-shadow: var(--accent-lamp);
}
.bubble-bot {
border-bottom-left-radius: 6px;
background: var(--surface-1);
border: 1px solid var(--hairline);
color: var(--text);
}
.typing-row { display: flex; justify-content: flex-start; }
/* Send-failure notice: the bot bubble plus its retry button, laid out like a
.msg-bot row but deliberately not one — app.js seeds its poll cursor from the
number of .msg nodes, and this notice is not a stored message. */
.failed-row { display: flex; justify-content: flex-start; align-items: center; gap: 8px; flex-wrap: wrap; animation: fadeUp .3s ease; }
/* The look comes from .chip, which follows this rule and so wins on size/weight;
this only stops the falling back to the UA font family. */
.retry-btn { font: inherit; }
/* Closeness level-up divider, drawn where the meter crossed a level. A break in
the thread rather than another bubble in it: nobody said this, it happened.
Deliberately not a .msg, like .failed-row above — app.js seeds its poll cursor
from the number of .msg nodes, and this divider is derived from the messages
rather than being one of them. */
.level-row {
display: flex;
align-items: center;
gap: 12px;
margin: 6px 0;
animation: fadeUp .3s ease;
}
/* Rules either side of the badge, fading out towards the edges of the thread. */
.level-row::before,
.level-row::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-soft));
}
.level-row::after { background: linear-gradient(90deg, var(--accent-soft), transparent); }
.level-badge {
flex: none;
/* Same ceiling as .bubble, so the unlock line wraps inside the thread's column
instead of pushing the rules off it. */
max-width: 74%;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid var(--accent-soft);
background: var(--accent-glow);
text-align: center;
font: inherit;
cursor: pointer;
transition: border-color .15s ease, background .15s ease;
}
.level-badge:hover {
border-color: color-mix(in srgb, var(--accent) 55%, transparent);
background: color-mix(in srgb, var(--accent) 28%, transparent);
}
.level-title {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .3px;
color: var(--accent);
}
.level-heart { font-size: 12px; line-height: 1; }
/* Only on the levels that opened a new rung of the ladder, so its rarity is the
signal that something actually changed. */
.level-unlock {
font-size: 11px;
line-height: 1.4;
color: var(--text-dim2);
}
/* Prompt for a photo the assistant offered: a self-contained card, not a bubble
followed by two buttons. Built out of .bubble and .chip it was indistinguishable
from the quick-reply row under the thread, which hid the fact that this row is
the one that spends coins. Deliberately not a .msg, like .failed-row above —
nothing here is a stored message. */
.photo-offer-row { display: flex; animation: fadeUp .3s ease; }
.photo-offer-card {
flex: 1;
min-width: 0;
/* Same ceiling as .bubble, so the thread keeps a single left column. */
max-width: 74%;
display: flex;
flex-direction: column;
gap: 12px;
padding: 13px 15px;
border-radius: 18px;
/* Gold — the colour of the coin this card spends, and the one thing on the page
the rose quick-reply chips cannot be confused with. */
background: var(--gold-soft);
border: 1px solid var(--gold-border);
}
.photo-offer-head { display: flex; align-items: center; gap: 9px; }
.photo-offer-ico { display: flex; flex: none; color: var(--gold); }
.photo-offer-ask { font-size: 14px; font-weight: 600; color: var(--text); }
/* The price sits at the far edge of the card, opposite the question. */
.photo-offer-head .photo-cost { margin-left: auto; flex: none; color: var(--gold); }
.photo-offer-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.photo-offer-yes, .photo-offer-no {
font: inherit;
padding: 10px 18px;
border-radius: 13px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
/* The lit accent fill of .send-btn: this is the only button in the thread that
charges the user, so it has to read as the action of the card. */
.photo-offer-yes {
background: var(--accent);
color: var(--on-accent);
border: none;
box-shadow: var(--accent-lamp);
}
.photo-offer-yes:hover { box-shadow: var(--accent-lamp-hover); }
.photo-offer-no {
background: transparent;
border: 1px solid var(--hairline);
color: var(--text-dim2);
}
.photo-offer-no:hover { background: var(--surface-1); color: var(--text); }
/* The paywall variant sells a subscription, not a photo, so it drops the gold:
gold in this thread means the coin the confirm card spends, and this card spends
nothing. The accent it takes instead is the one the rest of the subscription
surface already uses (.header-sub--free, .sub-modal). */
.photo-offer-card--locked {
background: var(--accent-soft);
border-color: var(--accent);
}
.photo-offer-card--locked .photo-offer-ico { color: var(--accent); }
/* Only the paywall card has a body line: the confirm card is a question, this one
has to say what a subscription actually buys. */
.photo-offer-text {
/* Pulls the line up under the heading it explains, against the card's 12px gap. */
margin-top: -4px;
font-size: 12.5px;
line-height: 1.45;
color: var(--text-dim2);
}
/* Sells a subscription, so it wears the premium glow rather than the flat accent
the confirm button takes — the same split the header makes between
.header-sub--free and everything else. */
.photo-offer-sub {
font: inherit;
padding: 10px 18px;
border-radius: 13px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
background: var(--grad-fill) padding-box, var(--grad-border) border-box;
color: #fff;
border: 1px solid transparent;
box-shadow: var(--grad-shadow);
}
.photo-offer-sub:hover { box-shadow: var(--grad-shadow-hover); }
.typing {
display: flex;
gap: 5px;
align-items: center;
padding: 14px 17px;
border-radius: 18px;
border-bottom-left-radius: 6px;
background: var(--surface-2);
border: 1px solid var(--hairline);
}
.typing .dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255, 255, 255, .7);
animation: blink 1.2s infinite;
}
.typing .dot:nth-child(2) { animation-delay: .2s; }
.typing .dot:nth-child(3) { animation-delay: .4s; }
.suggestions { display: flex; gap: 8px; padding: 8px 24px 4px; overflow-x: auto; }
/* The home page's .h3-chip: a 36px pill on a neutral panel, not the warm maroon
wash it used to be. Quick replies are suggestions, not accented actions. */
.chip {
flex: none;
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 14px;
border-radius: var(--pill);
font-size: 12.5px;
font-weight: 500;
color: var(--chip-text);
background: var(--chip-bg);
border: 1px solid var(--chip-border);
cursor: pointer;
white-space: nowrap;
}
.chip:hover { background: var(--surface-2); color: var(--text); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.composer { padding: 12px 24px 22px; }
.input-wrap {
display: flex;
align-items: center;
gap: 11px;
padding: 8px 8px 8px 20px;
border-radius: var(--pill);
background: var(--surface-1);
border: 1px solid var(--hairline);
}
.input-wrap:focus-within { border-color: var(--accent); }
.composer-input {
flex: 1;
/* Not cosmetic — without it the buttons get clipped off the screen. A flex
item defaults to min-width:auto, and for an