so the browser handles toggle state; we
just style the chrome. Form + models start closed (no open attr);
tags starts open via the inline open="" set in JS. */
.compose-fold { margin: 8px 0; }
.compose-fold > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 12px;
background: rgba(255,255,255,0.025);
border: 1px solid var(--card-edge);
border-radius: 10px;
transition: background 0.15s, border-color 0.15s;
}
.compose-fold > summary::-webkit-details-marker { display: none; }
.compose-fold > summary:hover {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.22);
}
.compose-fold-title {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.85;
}
.compose-fold-chevron {
font-size: 12px;
opacity: 0.65;
transition: transform 0.18s;
}
.compose-fold[open] > summary .compose-fold-chevron { transform: rotate(90deg); }
.compose-fold > .filter-panel-grid,
.compose-fold > .filter-panel-form,
.compose-fold > .filter-panel-models {
margin-top: 10px;
}
/* ---------- zone popover (tap-to-bucket fallback) ----------
Drag-and-drop is fiddly on touch — tap a pool chip and a small
popover floats below it with AND/OR/PERM buttons. Desktop users
can keep dragging; this just adds an alternative path. */
.zone-popover {
position: fixed;
z-index: 70;
padding: 8px 10px;
background: rgba(16, 10, 36, 0.97);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 12px;
box-shadow: 0 16px 40px rgba(0,0,0,0.65);
display: flex;
flex-direction: column;
gap: 8px;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.14s, transform 0.14s;
pointer-events: none;
}
.zone-popover.open {
opacity: 1;
transform: none;
pointer-events: auto;
}
.zone-popover-label {
font-size: 10.5px;
letter-spacing: 0.06em;
color: var(--cat-color, var(--fg-dim));
opacity: 0.85;
text-align: center;
text-transform: uppercase;
font-weight: 600;
}
.zone-popover-row {
display: flex;
gap: 6px;
}
.zone-popover-btn {
background: transparent;
border: 1px solid var(--card-edge);
color: var(--fg);
border-radius: 8px;
padding: 7px 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
font-family: inherit;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.1s;
}
.zone-popover-btn:hover { background: rgba(255,255,255,0.06); }
.zone-popover-btn:active { transform: translateY(1px); }
.zone-popover-btn-and:hover { border-color: rgba(245,158,11,0.55); color: #fbbf24; }
.zone-popover-btn-or:hover { border-color: rgba(167,139,250,0.55); color: #c4b5fd; }
.zone-popover-btn-perm:hover { border-color: rgba(251,146,60,0.55); color: #fb923c; }
/* Per-fork left edge stripe on cards in multi-fork mode */
.feed-card { border-left: 3px solid transparent; }
.feed-card[data-fork-id] { border-left-color: var(--fork-color, transparent); }
/* Fork banner — shown above first batch in multi-fork mode */
.fork-banner {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 10px;
padding: 6px 14px;
margin-top: 8px;
font-size: 11px;
letter-spacing: 0.04em;
font-family: 'JetBrains Mono', ui-monospace, monospace;
color: var(--fork-color, var(--fg-dim));
border-left: 3px solid var(--fork-color, var(--fg));
background: linear-gradient(90deg, rgba(255,255,255,0.04), transparent);
border-radius: 0 999px 999px 0;
}
.fork-banner-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--fork-color, var(--fg));
box-shadow: 0 0 10px var(--fork-color, var(--fg));
}
/* Request history row (Slice 31) — one per active fork. Mono, white-ish,
HH:MM prefix, "see prompt" link at the end. */
.trail .trail-row {
display: flex;
align-items: center;
gap: 8px;
margin: 2px 0;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
color: #fff;
letter-spacing: 0.02em;
line-height: 1.4;
flex-wrap: wrap;
}
.trail .trail-ts {
opacity: 0.55;
flex-shrink: 0;
}
.trail .trail-model {
opacity: 0.55;
flex-shrink: 0;
}
.trail .trail-sep {
opacity: 0.4;
flex-shrink: 0;
}
.trail .trail-see-prompt {
flex-shrink: 0;
color: #fff;
text-decoration: underline dotted;
text-underline-offset: 3px;
opacity: 0.6;
cursor: pointer;
font-size: 11px;
letter-spacing: 0.04em;
}
.trail .trail-see-prompt:hover { opacity: 1; }
.trail .trail-fork-badge {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.85;
margin-right: 4px;
padding: 1px 6px;
border: 1px solid currentColor;
border-radius: 999px;
}
/* "See prompt" modal */
.prompt-modal-overlay {
position: fixed;
inset: 0;
z-index: 70;
background: rgba(8, 4, 22, 0.6);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
}
.prompt-modal-card {
background: rgba(12, 8, 30, 0.97);
border: 1px solid var(--card-edge);
border-radius: 14px;
max-width: 760px;
/* explicit height so the inner 's flex:1 has room to grow.
Without this the card sized to header-content (~50px). */
height: min(700px, 82vh);
width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}
.prompt-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 20px;
border-bottom: 1px solid var(--card-edge);
}
.prompt-modal-title {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
letter-spacing: 0.06em;
opacity: 0.85;
}
.prompt-modal-close {
background: transparent;
border: 1px solid var(--card-edge);
color: var(--fg);
width: 28px;
height: 28px;
border-radius: 50%;
cursor: pointer;
font-size: 13px;
font-family: inherit;
}
.prompt-modal-close:hover { border-color: rgba(255,255,255,0.4); }
.prompt-modal-pre {
flex: 1 1 0;
min-height: 0; /* lets the flex child actually shrink + scroll */
margin: 0;
padding: 18px 22px;
overflow: auto;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
line-height: 1.55;
color: #cbd5e1;
white-space: pre-wrap;
word-break: break-word;
}
/* ---------- bottom bar (log + auto-drift toggle) ---------- */
.bottom-bar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 35;
height: 36px;
display: flex;
align-items: center;
gap: 24px; /* breathing room between log / vis-toggles / auto-drift */
padding: 0 18px;
background: rgba(8, 4, 22, 0.78);
border-top: 1px solid var(--card-edge);
backdrop-filter: blur(20px) saturate(1.15);
-webkit-backdrop-filter: blur(20px) saturate(1.15);
font-size: 11px;
letter-spacing: 0.02em;
transition: border-color 0.2s ease, box-shadow 0.4s ease;
}
.bottom-bar[hidden] { display: none; }
.bb-compose {
display: inline-flex;
align-items: center;
gap: 7px;
flex-shrink: 0;
background: rgba(255,255,255,0.06);
border: 1px solid var(--card-edge);
color: var(--fg);
padding: 5px 12px 5px 10px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
font-family: inherit;
opacity: 0.85;
transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.bb-compose:hover {
opacity: 1;
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.28);
}
.bb-compose svg { display: block; }
.bottom-bar-log {
flex: 1 1 0;
min-width: 0;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
color: var(--fg-dim);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0.92;
}
.bottom-bar-log.error { color: var(--bad); opacity: 1; }
.bottom-bar-log.fade-in { animation: log-fade-in 0.25s ease; }
@keyframes log-fade-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 0.92; transform: none; }
}
/* Eye-style visibility toggles (Slice 32) — replaces the previous
iOS-switch chassis for hide-duplicates + hide-unavailable. Open eye =
items visible (checkbox unchecked); closed eye with diagonal slash =
items hidden (checked). Underlying still
carries state so bindBBToggle keeps working. */
.vis-toggles {
display: inline-flex;
align-items: center;
gap: 22px; /* clearer separation between the two eye+label pairs */
flex-shrink: 0;
margin-right: 4px;
}
.vis-toggle {
display: inline-flex;
align-items: center;
gap: 7px;
cursor: pointer;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg-dim);
user-select: none;
transition: color 0.18s;
}
.vis-toggle:hover { color: var(--fg); }
.vis-toggle input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
margin: 0;
}
.vis-toggle-eye {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
}
.vis-toggle-eye svg {
width: 18px;
height: 18px;
color: #fff;
transition: color 0.18s, opacity 0.18s;
}
/* Unchecked = visible = open eye, no slash. */
.vis-toggle input:not(:checked) ~ .vis-toggle-eye .vis-slash { opacity: 0; }
.vis-toggle input:not(:checked) ~ .vis-toggle-eye .vis-eye-shape,
.vis-toggle input:not(:checked) ~ .vis-toggle-eye .vis-pupil { opacity: 0.95; }
/* Checked = hidden = closed eye with slash; eye + pupil dim. */
.vis-toggle input:checked ~ .vis-toggle-eye .vis-slash { opacity: 1; }
.vis-toggle input:checked ~ .vis-toggle-eye .vis-eye-shape,
.vis-toggle input:checked ~ .vis-toggle-eye .vis-pupil { opacity: 0.4; }
.vis-toggle input:checked ~ .vis-toggle-label { opacity: 0.6; }
.vis-toggle-label {
transition: opacity 0.18s;
}
/* iOS-style toggles — only auto-drift uses this chassis now. */
.bb-toggle, .auto-drift-toggle {
display: inline-flex;
align-items: center;
gap: 9px;
cursor: pointer;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg-dim);
user-select: none;
flex-shrink: 0;
}
.bb-toggle input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
margin: 0;
}
.bb-toggle-track {
position: relative;
display: inline-block;
width: 32px;
height: 18px;
background: rgba(255,255,255,0.08);
border: 1px solid var(--card-edge);
border-radius: 999px;
transition: background 0.18s, border-color 0.18s;
}
.bb-toggle-knob {
position: absolute;
top: 2px;
left: 2px;
width: 12px;
height: 12px;
background: var(--fg-dim);
border-radius: 50%;
transition: transform 0.2s cubic-bezier(.3,1.5,.5,1), background 0.18s;
}
.bb-toggle:hover .bb-toggle-track { border-color: rgba(255,255,255,0.3); }
.bb-toggle input:checked + .bb-toggle-track {
background: rgba(255,255,255,0.18);
border-color: rgba(255,255,255,0.38);
}
.bb-toggle input:checked + .bb-toggle-track .bb-toggle-knob {
transform: translateX(14px);
background: var(--fg);
}
.bb-toggle input:checked ~ .bb-toggle-label { color: var(--fg); }
/* visually-hidden but in layout so label clicks reliably fire change */
.auto-drift-toggle input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
margin: 0;
}
.auto-drift-track {
position: relative;
display: inline-block;
width: 32px;
height: 18px;
background: rgba(255,255,255,0.08);
border: 1px solid var(--card-edge);
border-radius: 999px;
transition: background 0.18s, border-color 0.18s;
}
.auto-drift-knob {
position: absolute;
top: 2px;
left: 2px;
width: 12px;
height: 12px;
background: var(--fg-dim);
border-radius: 50%;
transition: transform 0.2s cubic-bezier(.3,1.5,.5,1), background 0.18s;
}
.auto-drift-toggle:hover .auto-drift-track {
border-color: rgba(255,255,255,0.3);
}
.auto-drift-toggle input:checked + .auto-drift-track {
background: rgba(110,231,183,0.32);
border-color: rgba(110,231,183,0.55);
}
.auto-drift-toggle input:checked + .auto-drift-track .auto-drift-knob {
transform: translateX(14px);
background: var(--good);
}
.auto-drift-toggle input:checked ~ .auto-drift-label {
color: var(--good);
}
/* When auto-drift is on, give the bar a soft glow so it's clearly engaged. */
.bottom-bar.auto-on {
border-top-color: rgba(110,231,183,0.45);
animation: bottom-bar-pulse 2.6s ease-in-out infinite;
}
@keyframes bottom-bar-pulse {
0%, 100% { box-shadow: 0 -2px 24px 0 rgba(110,231,183,0); }
50% { box-shadow: 0 -2px 24px 0 rgba(110,231,183,0.18); }
}
/* ---------- intro section (front-page, below the compose pill) ---------- */
.intro {
display: grid;
grid-template-columns: 320px 1fr;
gap: 22px;
align-items: start;
padding: 22px 24px 26px;
/* darker radial gradient so the intro reads as a distinct "explainer"
plate against the dreamy background, without losing the orbs underneath */
background: radial-gradient(ellipse at center, #000000b5 0%, #00000026 100%);
border: 1px solid var(--card-edge);
border-radius: 14px;
backdrop-filter: blur(18px);
font-size: 13px;
font-weight: 500;
line-height: 1.55;
color: var(--fg);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.intro.dismissed {
display: none;
}
.intro-diagram {
width: 100%;
max-width: 320px;
height: auto;
filter: drop-shadow(0 6px 18px rgba(0,0,0,0.55));
}
.intro-copy p {
margin: 0 0 10px;
opacity: 0.92;
}
.intro-copy p:last-of-type {
margin-bottom: 14px;
}
.intro-copy b {
color: #fff;
letter-spacing: 0.01em;
font-weight: 700;
}
.intro-dismiss {
background: transparent;
border: 1px solid var(--card-edge);
color: var(--fg);
border-radius: 999px;
padding: 5px 14px;
font-size: 11px;
letter-spacing: 0.06em;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.18s, border-color 0.18s;
}
.intro-dismiss:hover { opacity: 1; border-color: rgba(255,255,255,0.4); }
@media (max-width: 720px) {
.intro { grid-template-columns: 1fr; gap: 14px; }
.intro-diagram { margin: 0 auto; }
}
/* Help view variant of the intro card — kept fullwidth, includes the
symbol legend + gestures section below the diagram + copy. */
.intro.intro-help {
grid-template-columns: 1fr;
gap: 18px;
padding: 22px 24px 26px;
}
.intro-help .intro-diagram { max-width: 360px; margin: 0 auto; }
.help-legend-title {
margin: 14px 0 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.7;
border-top: 1px solid var(--card-edge);
padding-top: 14px;
}
.help-legend {
list-style: none;
margin: 0 0 8px;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.help-legend li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 13px;
line-height: 1.45;
color: var(--fg);
}
.help-legend-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--card-edge);
color: var(--fg);
flex-shrink: 0;
margin-top: 1px;
}
.help-legend b { font-weight: 700; }
.help-tips {
margin: 6px 0 0;
padding-left: 1.2em;
font-size: 13px;
line-height: 1.5;
color: var(--fg);
}
.help-tips li { margin: 4px 0; opacity: 0.92; }
/* ============================================================
Mobile polish (≤480px) — slice 44
Addresses: bottom-bar AUTO-DRIFT truncation, filter-panel DRIFT
button clip, top-nav crowding + identity shift, and card icon
row crowded against stars. CSS-only.
============================================================ */
@media (max-width: 480px) {
/* Hide the mini per-fork request log on mobile — saves vertical space
and the same info is in the history tab. */
.trail .trail-row { display: none; }
/* The compose footer's "will send N query (1 gpt)" preview takes prime
real estate on a phone but the same info is implicit from the chips
visible above. Hide on mobile. */
.filter-panel-counter { display: none !important; }
/* Bottom-toolbar compose button: icon-only on mobile to keep the bar
one line with the visibility toggles + auto-drift. */
.bb-compose-label { display: none; }
.bb-compose { padding: 5px 9px; gap: 0; }
/* iOS auto-zooms any input whose font-size is < 16px on focus. Force
every text/search/textarea to 16px on mobile so the viewport stays
stable when the keyboard opens. */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="password"],
input:not([type]),
textarea,
select {
font-size: 16px !important;
}
/* --- top nav (HUD) --- */
/* Tighter spacing, allow flex-wrap to a second row if absolutely
needed. Hide the "Not signed in" placeholder text — the head
icon already communicates the slot. Cap signed-in name. */
.hud { gap: 10px; }
.nav { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.nav-tab { padding: 5px 10px; font-size: 11px; }
.nav-tab.nav-icon-tab { padding: 5px 8px; }
.login-pill { padding: 5px 9px; gap: 0; }
.login-pill .login-name { display: none; } /* icon-only on mobile */
.cost-pill { padding: 4px 10px 4px 9px; font-size: 10.5px; }
.brand { font-size: 12px; }
/* --- filter panel footer --- */
/* Allow wrap; counter takes its own row so the DRIFT pill never
gets pushed off the right edge. Tighter padding inside DRIFT. */
.filter-panel-footer { flex-wrap: wrap; gap: 8px; }
.filter-panel-counter { flex: 1 1 100%; order: -1; font-size: 10.5px; }
.filter-panel-reset,
.filter-panel-cancel,
.filter-panel-save { padding: 6px 12px; flex-shrink: 0; }
.filter-panel-apply {
padding: 9px 18px;
flex-shrink: 0;
margin-left: auto; /* pin DRIFT to the right edge */
}
/* --- bottom bar --- */
/* Hide the vis-toggle text labels — the eye icon (with optional
slash) already conveys state. Tighten gaps. Shorten the
auto-drift label to "AUTO" via content swap. */
.bottom-bar { gap: 12px; padding: 0 12px; }
.vis-toggles { gap: 14px; margin-right: 0; }
.vis-toggle-label { display: none; }
.auto-drift-toggle { gap: 6px; }
.auto-drift-label { font-size: 9.5px; letter-spacing: 0.1em; }
/* --- card actions row: pull stars onto its own line --- */
/* Adds visual separation between the action icons and the rating
stars, and gives the icons more horizontal room. */
.feed-card-actions {
margin-top: 10px;
row-gap: 10px;
column-gap: 8px;
}
.feed-card-actions .stars {
flex-basis: 100%;
justify-content: flex-end;
margin-top: 2px;
}
/* Slightly larger tap targets on mobile (still under 44 HIG, but
more comfortable). Stays in step with the existing icon row
widths so nothing else needs to change. */
.icon-btn { width: 32px; height: 32px; border-radius: 9px; }
.icon-btn svg { width: 16px; height: 16px; }
}