/* ── Typography ───────────────────────────────────────────────────────────────
Self-hosted, never a CDN. A Google Fonts entries.
Mirror the chevron's reserved width on the left so the label re-centers. */
.nav-menu > details > summary[role="button"]::before {
content: "";
display: block;
float: left;
width: 1rem;
height: calc(1rem * var(--pico-line-height, 1.5));
margin-inline-end: calc(var(--pico-spacing, 1rem) * 0.5);
}
.nav-menu > details > .actions {
padding-top: 0.5rem;
}
.nav-menu > form {
margin: 0;
}
.nav-menu > form > button {
width: 100%;
margin: 0;
}
/* Action button columns — folders and file list */
.actions,
.file-actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
min-width: 0;
max-width: 100%;
overflow: hidden;
}
.actions > form,
.file-actions > form {
margin: 0;
min-width: 0;
}
.actions > form > button,
.file-actions > form > button {
width: 100%;
margin: 0;
}
/* Standalone buttons (type=button) inside action columns */
.actions > button,
.file-actions > button {
display: block;
width: 100%;
margin: 0;
}
/* New folder/playlist/channel/command/group buttons — sit outside .actions, need explicit block width */
#create-folder-btn,
#create-playlist-btn,
#create-station-btn,
#create-channel-btn,
#add-cmd-btn,
#add-group-btn,
#uploadBtn {
display: block;
width: 100%;
margin-bottom: 0.5rem;
}
/* Shell command input and relay selects — match standard spacing */
#test-cmd-input,
#ch-select,
#add-item-select,
#pl-new-select,
#row-filter {
display: block;
width: 100%;
margin-bottom: 0.5rem;
}
/* Selects inside action columns */
.actions select,
.file-actions select {
margin-bottom: 0;
}
/* Custom select wrapper — inherits the margin-bottom a native would have.
Reset to zero inside action columns where selects are part of move forms. */
.cs-wrapper {
margin-bottom: 0.5rem;
}
.actions .cs-wrapper,
.file-actions .cs-wrapper,
.move-form .cs-wrapper {
margin-bottom: 0;
}
/* Relay delete bar — fixed bottom, same pattern as #bulk-bar */
#relay-delete-bar {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--pico-card-background-color);
border-top: 1px solid var(--pico-muted-border-color);
padding: 0.75rem 1rem;
z-index: 100;
}
#news-rename-btn {
display: block;
width: 100%;
}
#relay-delete-bar-btn {
display: block;
width: 100%;
/* Destructive ring, not a destructive slab. #c0392b is already the site's
delete colour as a border and as text — see .cal-delete-btn — so this is the
same treatment at the 2px weight the primary actions use. */
background-color: transparent;
border: 2px solid #c0392b;
color: #c0392b;
}
/* Collapsible rows (folders, files, playlists, stations, relay commands) */
details {
margin-bottom: 0.5rem;
}
/* Channel Command — saved command rows (identical to folder rows) */
.relay-cmd-row {
margin-bottom: 0.5rem;
}
/* Rename inline form — hidden until JS activates it */
.rename-form {
display: none;
}
/* Lock/unlock forms — hidden until submitted via JS */
.lock-form,
.remove-lock-form,
.relock-form {
display: none;
}
/* Playlist rename form — hidden until JS activates it */
.pl-rename-form {
display: none;
}
/* Playlist edit — file picker container, hidden until folder selected + files loaded */
.pl-file-container {
display: none;
}
/* Custom select dropdown */
.cs-wrapper {
width: 100%;
min-width: 0;
}
.cs-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
text-align: left;
background: var(--pico-form-element-background-color);
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
border-radius: var(--pico-border-radius);
color: var(--pico-form-element-color);
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
font-size: 1rem;
cursor: pointer;
margin: 0;
box-shadow: none;
}
.cs-trigger:hover {
border-color: var(--pico-form-element-active-border-color);
background: var(--pico-form-element-background-color);
color: var(--pico-form-element-color);
}
.cs-label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.cs-arrow {
flex-shrink: 0;
margin-left: 0.5rem;
opacity: 0.6;
font-size: 0.75em;
}
.cs-dropdown {
position: fixed;
z-index: 9999;
background: var(--pico-card-background-color);
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
border-radius: var(--pico-border-radius);
box-shadow: var(--pico-card-box-shadow);
list-style: none;
margin: 0;
padding: 0.25rem 0;
display: none;
}
.cs-option {
/* Inset from the panel's own edges so the rings below read as an outline around
the row instead of a line running into the dropdown border. margin + padding
still add up to the old 1rem, so the text sits where it always did. */
margin: 0 0.25rem;
padding: 0.5rem 0.75rem;
border-radius: var(--pico-border-radius);
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--pico-color);
/* Resting ring, transparent: hover and selection swap its colour and width, and
an inset shadow never affects layout, so nothing shifts as rows light up. */
box-shadow: inset 0 0 0 1px transparent;
}
/* Hover and selection outline the row and tint its text; they deliberately do NOT
fill it. --pico-primary is the accent's PALE shade (red preset: #f87171) — made
to be read as text on a dark ground, which is exactly this job — while the solid
shades stay on the ring:
hover --pico-primary-hover-background (red: #ef4444)
selected --pico-primary-background (red: #dc2626)
Hover is the brighter ring and selection the thicker one, so the two are still
told apart at a glance when the cursor is somewhere else, and a hovered selected
row (bright + thick + bold) is distinct from both. */
/* .cs-hl is the highlight without the row layout — custom_select.js hands it to
lists that are dropdowns in behaviour but keep their own geometry. It appears in
every rule below that .cs-option does, and nowhere that .cs-option doesn't, which
is what keeps the two identical on screen. */
.cs-hl {
border-radius: var(--pico-border-radius);
box-shadow: inset 0 0 0 1px transparent;
}
.cs-option:hover,
.cs-option.cs-active,
.cs-hl:hover,
.cs-hl.cs-active {
box-shadow: inset 0 0 0 1px var(--pico-primary-hover-background);
color: var(--pico-primary);
}
.cs-option.cs-selected {
box-shadow: inset 0 0 0 2px var(--pico-primary-background);
color: var(--pico-primary);
font-weight: bold;
}
.cs-option.cs-selected:hover,
.cs-option.cs-selected.cs-active {
box-shadow: inset 0 0 0 2px var(--pico-primary-hover-background);
color: var(--pico-primary);
}
/* Keep search outside the options scroller, including upward-opening panels. */
.cs-select-dropdown {
flex-direction: column;
box-sizing: border-box;
overflow: hidden;
}
.cs-options {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
overflow-anchor: none;
list-style: none;
margin: 0;
padding: 0;
}
.cs-search {
flex: 0 0 auto;
padding: 0.5rem;
background: var(--pico-card-background-color);
border-bottom: 1px solid var(--pico-muted-border-color);
}
.cs-search-input {
width: 100%;
margin: 0;
padding: 0.35rem 0.5rem;
font-size: 0.9rem;
height: auto;
background: var(--pico-form-element-background-color);
border: 1px solid var(--pico-form-element-border-color);
border-radius: var(--pico-border-radius);
color: var(--pico-form-element-color);
box-shadow: none;
}
.cs-search-input:focus {
border-color: var(--pico-primary);
box-shadow: 0 0 0.6rem -0.15rem var(--pico-primary-focus);
outline: none;
}
.cs-empty {
padding: 0.5rem 1rem;
color: var(--pico-muted-color);
font-style: italic;
cursor: default;
}
/* Action menus (custom_select.js openMenu) — the same dropdown, opened against an
arbitrary element instead of a trigger. Items may carry an icon. */
.cs-menu .cs-option {
display: flex;
align-items: center;
gap: 0.5rem;
}
.cs-option-disabled {
opacity: 0.45;
cursor: default;
}
.cs-option-disabled:hover {
box-shadow: inset 0 0 0 1px transparent;
color: var(--pico-color);
/* The matching `animation: none` cannot live here — see the glitch section. */
}
/* Move form — single combined button */
.move-form {
width: 100%;
min-width: 0;
}
.move-form select {
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
}
.cs-trigger.move-trigger {
background: var(--pico-background-color);
border-color: var(--pico-border-color);
color: var(--pico-color);
justify-content: center;
}
.cs-trigger.move-trigger .cs-label {
flex: none;
}
.cs-trigger.move-trigger .cs-arrow {
display: none;
}
/* Bulk action bar — hidden until items are selected */
#bulk-bar {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--pico-card-background-color);
border-top: 1px solid var(--pico-muted-border-color);
padding: 0.75rem 1rem;
z-index: 100;
}
/* Memory rows on the prompts page. The summary carries the memory's full text so that
two facts sharing an opening clause stay distinguishable and find-in-page can reach
them; clamp the height here rather than truncating the text server-side. */
.memory-row > summary {
display: block;
text-align: left;
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.4;
max-height: calc(1.4em * 3);
overflow: hidden;
}
.memory-row[open] > summary {
max-height: none;
}
/* Rows the pager/filter is not showing. display:none rather than detaching the node —
single_open_details.js and bulk_select.js bind their listeners to the rows at load,
so a removed row would come back inert. */
.memory-row.mem-hidden {
display: none;
}
/* Pico styles [type=search] as a 5rem pill. The memory filter sits right above the
Options dropdown, whose .cs-trigger uses the standard 0.25rem radius — override the
variable (not border-radius itself, which would fight Pico's own rule) so the two
controls read as one set of rectangular fields. */
#memory-filter {
--pico-border-radius: 0.25rem;
}
/* Folders/files search — the bar sits directly ABOVE #create-folder-btn on the folders
and folder-contents pages and matches it: the input joins that button's width/spacing
rule above, so the two read as one stack in either order. One box, no scope picker:
it always searches folder and file names together. */
/* Pico styles [type=search] as a 5rem pill; #create-folder-btn is 0.25rem. Override
the variable, not border-radius itself, so Pico's own rule isn't fought — the same
fix #memory-filter takes. */
#row-filter {
--pico-border-radius: 0.25rem;
}
#row-filter-count {
display: block;
margin: -0.25rem 0 0.5rem;
color: var(--pico-muted-color);
}
/* With no query on screen the count is empty, but a display:block element still
contributes its margins — which left more space below the search bar than above it.
The bar sits in the stack exactly like #create-folder-btn: 0.5rem either side. */
#row-filter-count:empty {
display: none;
}
/* Result rows ARE listing rows — folder_row / file_row, the same macros the listing
pages use — so they need no styling of their own. Only the group heading and the
path line below each hit are new: a match three folders down is meaningless without
the path, and the listing rows have nowhere to put one. */
.row-results-group {
margin: 0 0 0.25rem;
color: var(--pico-muted-color);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.row-result-path {
display: block;
/* Pulled up under the row it belongs to, out of the gap before the next one. */
margin: -0.35rem 0 0.5rem 0.4rem;
color: var(--pico-muted-color);
}
/* list_filter.js hides the normal listing while a search is on screen, and hides
non-matching rows — see the note at the top of that file. */
details[data-name].row-hidden {
display: none;
}
/* Upload drop zone */
/* Whole-window drop target. The uploads page and the AI composer both take a file
dropped anywhere on the page — the uploads one always did, at the document level,
it just never looked like it, and the composer does now too. This frame is the only
thing that says so; there is no drop box on either page to aim at.
On rather than an injected element so there is no markup to keep in sync on
two pages, and pointer-events:none so the frame can never swallow the drop it is
advertising. z-index sits below .cs-dropdown's 9999 — a dropdown open behind a drag
is odd, but it should still be the thing on top. */
body.drag-active::before {
content: "";
position: fixed;
inset: 0.4rem;
z-index: 9998;
pointer-events: none;
border: 2px dashed var(--pico-primary);
border-radius: var(--pico-border-radius);
box-shadow: inset 0 0 3rem -1rem var(--pico-primary-focus);
}
/* Text editor */
.editor-textarea {
font-family: var(--pico-font-family-monospace);
min-height: 60vh;
resize: vertical;
}
/* Viewer nav — clamp long filenames so mobile never side-scrolls */
.viewer-nav {
overflow: hidden;
}
.viewer-nav > ul:first-child {
flex: 1 1 0%;
min-width: 0;
overflow: hidden;
}
.viewer-nav > ul:first-child > li {
display: block;
min-width: 0;
overflow: hidden;
}
.viewer-nav > ul:first-child > li > strong {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.viewer-nav > ul:last-child {
flex-shrink: 0;
}
/* The full-bleed media viewer below uses width:100vw. 100vw counts the vertical
scrollbar's width, but the visible page area does not, so when a vertical
scrollbar is present (depends on window height/orientation) the breakout is a
scrollbar-width wider than the page and forces a left-right scroll that clips
the edge of the centred video. Clip that horizontal overflow at the root; the
breakout box stays centred on the visible area, so the video itself remains
fully visible. Vertical scrolling is unaffected. With overlay scrollbars
(mobile) there is no overflow to clip, so behaviour is unchanged there. */
html {
overflow-x: clip;
}
/* Media viewer */
.media-viewer {
display: flex;
justify-content: center;
margin-top: 1.5rem;
width: 100vw;
margin-left: calc(50% - 50vw);
}
.media-viewer img {
width: 100%;
height: 90vh;
object-fit: contain;
}
@media (max-width: 768px) {
.media-viewer {
margin-top: 0.25rem;
}
.media-viewer img {
height: 85vh;
}
main.container:has(.media-viewer img) {
padding-top: 0.25rem;
}
}
.media-viewer video {
max-width: 100%;
width: 100%;
max-height: calc(100dvh - 4.5rem);
object-fit: contain;
border-radius: 0;
}
/* Plyr outer container: cap width so 16:9 content fills viewport height without side letterboxing */
.media-viewer .plyr--video {
width: 100%;
max-width: calc((100dvh - 4.5rem) * 16 / 9);
}
/* Plyr video wrapper: safety height cap for non-16:9 content */
.media-viewer .plyr__video-wrapper {
max-height: calc(100dvh - 4.5rem);
}
/* Playlist player has more surrounding UI — allow less height for the video */
.media-viewer--pl .plyr--video {
max-width: calc((100dvh - 14rem) * 16 / 9);
}
.media-viewer--pl video,
.media-viewer--pl .plyr__video-wrapper {
max-height: calc(100dvh - 14rem);
}
/* Unified playlists mix audio and video in one element. For an audio track,
playlist_player.js swaps Plyr's container class to .plyr--audio (so it renders as the
dedicated audio player the app themes above), and here we drop the leftover video
surface and the video-only control buttons. The opacity guard defends against Plyr's
video inactivity auto-hide, which keys off .plyr--video (removed for audio tracks). */
.media-viewer--pl.pl-audio-only .plyr__video-wrapper {
display: none;
}
.media-viewer--pl.pl-audio-only [data-plyr="fullscreen"],
.media-viewer--pl.pl-audio-only [data-plyr="captions"] {
display: none;
}
.media-viewer--pl.pl-audio-only .plyr__controls {
opacity: 1 !important;
transform: none !important;
}
.media-viewer video:focus,
.media-viewer audio:focus {
outline: none;
}
.media-viewer audio:focus-within * {
outline: none;
}
.media-viewer audio {
width: 100%;
max-width: 600px;
}
.media-viewer .plyr--audio {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
/* Standalone audio viewer (audio outside .media-viewer) */
main.container > audio[data-progress-url] {
display: block;
width: 100%;
max-width: 600px;
margin: 1.5rem auto 0;
}
main.container > audio[data-progress-url]:focus {
outline: none;
}
/* Plyr wrapper replaces the element in the DOM — match the same sizing */
main.container > .plyr--audio {
width: 100%;
max-width: 600px;
margin: 1.5rem auto 0;
}
/* Playlist edit — track list */
.playlist-track-list {
list-style: none;
padding: 0;
margin: 0 0 1rem;
}
.playlist-track-item {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0.4rem;
border-bottom: 1px solid var(--pico-muted-border-color);
cursor: default;
}
.playlist-track-item.dragging {
opacity: 0.4;
}
.drag-handle {
cursor: grab;
color: var(--pico-muted-color);
font-size: 1.2rem;
user-select: none;
flex-shrink: 0;
}
.track-info {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.track-filename {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.track-folder {
color: var(--pico-muted-color);
}
.remove-track-form {
flex-shrink: 0;
margin: 0;
}
.small-btn {
padding: 0.2rem 0.5rem;
font-size: 0.85rem;
margin: 0;
}
/* Playlist player — queue */
.player-card {
padding: 1rem;
overflow: visible;
}
.np-filename {
font-size: 1.1rem;
font-weight: bold;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.np-folder {
color: var(--pico-muted-color);
}
.player-controls {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
gap: 0.5rem;
margin-top: 1rem;
}
.player-controls button,
.player-controls a[role="button"] {
flex: 1;
text-align: center;
margin: 0;
}
.icon {
width: 1em;
height: 1em;
vertical-align: -0.125em;
display: inline-block;
flex-shrink: 0;
}
.active-control {
border-color: var(--pico-primary) !important;
color: var(--pico-primary) !important;
}
@media (max-width: 520px) {
.btn-label {
display: none;
}
.player-controls button,
.player-controls a[role="button"] {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
}
.playlist-queue {
list-style: none;
padding: 0;
margin: 0;
max-height: 50vh;
overflow-y: auto;
}
.queue-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.4rem;
border-bottom: 1px solid var(--pico-muted-border-color);
cursor: pointer;
border-radius: var(--pico-border-radius);
}
.queue-item:hover {
background: var(--pico-card-background-color);
}
/* The playing track: page-dark inside an accent ring, accent text — the same
ring-not-fill treatment the custom select's selected row gets, rather than a solid
accent slab. The ring is an inset shadow, not a border, so the row's geometry does
not change as the selection moves; the item's own bottom border steps aside for it
so the ring reads as one continuous outline. */
.queue-item.queue-active {
background: var(--pico-background-color);
border-color: transparent;
box-shadow: inset 0 0 0 1px var(--pico-primary);
color: var(--pico-primary);
}
.queue-item.queue-active:hover {
background: var(--pico-background-color);
}
/* The number, folder and progress labels are muted on every other row; on the playing
one they take the accent too, so the whole row reads as selected. */
.queue-item.queue-active .queue-num,
.queue-item.queue-active .queue-folder,
.queue-item.queue-active .queue-progress-info {
color: var(--pico-primary);
}
.queue-num {
color: var(--pico-muted-color);
min-width: 2rem;
text-align: right;
flex-shrink: 0;
}
.queue-progress-info {
flex-shrink: 0;
color: var(--pico-muted-color);
white-space: nowrap;
font-size: 0.8rem;
}
/* The element is always in the row so the player has somewhere to write the label as
it plays; until there is progress to show, it takes up no space. */
.queue-progress-info:empty {
display: none;
}
.queue-track {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.queue-filename {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.queue-folder {
color: var(--pico-muted-color);
}
/* Playlist edit — file checkbox list */
.file-checkbox-list {
max-height: 260px;
overflow-y: auto;
border: 1px solid var(--pico-muted-border-color);
border-radius: var(--pico-border-radius);
padding: 0.4rem 0.6rem;
margin: 0.4rem 0 0.75rem;
}
.file-checkbox-list label {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.15rem 0;
margin: 0;
font-size: 0.9rem;
cursor: pointer;
}
/* Radio — active station highlight */
details.station-active > summary {
border-color: var(--pico-primary) !important;
color: var(--pico-primary) !important;
}
/* Radio — station connecting (preload in progress) */
details.station-pending > summary {
border-color: var(--pico-primary) !important;
color: var(--pico-primary) !important;
animation: station-pending-pulse 0.9s ease-in-out infinite alternate;
}
@keyframes station-pending-pulse {
from { opacity: 0.45; }
to { opacity: 1.0; }
}
/* ── Camera page ─────────────────────────────────────────────────────────── */
body.camera-body {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100dvh;
overflow: hidden;
}
#media-wrap {
background: #000;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
touch-action: none;
user-select: none;
}
#media-wrap video,
#media-wrap img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
#media-wrap #waiting-msg {
color: var(--pico-muted-color);
}
#sender-controls .nav-menu button,
#sender-controls .nav-menu select,
#viewer-controls .nav-menu button {
display: block;
width: 100%;
margin: 0;
}
#status-text {
font-size: 0.8rem;
color: var(--pico-muted-color);
text-align: center;
}
/* Named accent palette. Two consumers: the theme picker on /color, and the event
colours in the planning calendar (calendar_db.COLORS), where the same class lands
on a .cal-event chip and on its swatch in the dialog. Border + text only, which is
why one rule can serve a 2rem circle and a 0.72rem calendar chip. */
.swatch-red { border-color: #f87171 !important; color: #f87171 !important; }
.swatch-rose { border-color: #fb7185 !important; color: #fb7185 !important; }
.swatch-pink { border-color: #f472b6 !important; color: #f472b6 !important; }
.swatch-fuchsia { border-color: #e879f9 !important; color: #e879f9 !important; }
.swatch-purple { border-color: #c084fc !important; color: #c084fc !important; }
.swatch-violet { border-color: #a78bfa !important; color: #a78bfa !important; }
.swatch-indigo { border-color: #818cf8 !important; color: #818cf8 !important; }
.swatch-blue { border-color: #01aaff !important; color: #01aaff !important; }
.swatch-sky { border-color: #38bdf8 !important; color: #38bdf8 !important; }
.swatch-cyan { border-color: #22d3ee !important; color: #22d3ee !important; }
.swatch-teal { border-color: #2dd4bf !important; color: #2dd4bf !important; }
.swatch-emerald { border-color: #34d399 !important; color: #34d399 !important; }
.swatch-green { border-color: #4ade80 !important; color: #4ade80 !important; }
.swatch-lime { border-color: #a3e635 !important; color: #a3e635 !important; }
.swatch-yellow { border-color: #facc15 !important; color: #facc15 !important; }
.swatch-amber { border-color: #fbbf24 !important; color: #fbbf24 !important; }
.swatch-orange { border-color: #fb923c !important; color: #fb923c !important; }
.swatch-slate { border-color: #94a3b8 !important; color: #94a3b8 !important; }
.swatch-selected { background-color: rgba(255, 255, 255, 0.08) !important; }
.color-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.375rem;
}
.color-grid button {
margin: 0;
padding: 0.4rem 0.5rem;
font-size: 0.85rem;
}
/* Search — image grid */
.search-image-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.75rem;
}
.search-music-thumb-box {
width: 56px;
height: 56px;
min-width: 56px;
flex-shrink: 0;
border-radius: 4px;
overflow: hidden;
}
.search-music-thumb-box img {
width: 56px;
height: 56px;
max-width: 56px;
max-height: 56px;
object-fit: cover;
display: block;
}
.search-thumb-wrapper {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.search-thumb-title {
font-size: 0.8rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--pico-color);
}
.search-thumb-url {
font-size: 0.72rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--pico-muted-color);
}
.search-image-cell {
display: block;
aspect-ratio: 4/3;
overflow: hidden;
border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color);
cursor: pointer;
}
.search-image-cell img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: opacity 0.15s;
}
.search-image-cell:hover img {
opacity: 0.85;
}
/* Search — inline YouTube video result (Plyr) */
.search-video-cell {
position: relative;
}
.search-video-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
pointer-events: none;
}
.search-video-play svg {
width: 48px;
height: 48px;
opacity: 0.9;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}
/* Search — video lightbox (expanded Plyr YouTube player) */
#video-lightbox {
display: none;
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(0,0,0,0.85);
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.5rem;
cursor: zoom-out;
}
#video-lightbox.open {
display: flex;
}
#video-lightbox-inner {
/* Largest 16:9 box that fits the viewport in both dimensions: bounded by the
full width and by the viewport height. It grows to the vertical edges when
the screen is tall enough to allow it, and shrinks to fit width-first in
mobile landscape so it never overflows. 3rem = the lightbox's 1.5rem top +
bottom padding. */
width: min(100%, (100dvh - 3rem) * 16 / 9);
cursor: default;
}
#video-lightbox-inner iframe {
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
border-radius: var(--pico-border-radius);
background: #000;
display: block;
/* cursor is an inherited property; reset it to auto here so the iframe does
not carry an explicit cursor from its ancestors. That lets YouTube's own
player control the cursor, including hiding it in fullscreen. */
cursor: auto;
}
/* Search — image lightbox */
#img-lightbox {
display: none;
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(0,0,0,0.85);
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.75rem;
cursor: zoom-out;
}
#img-lightbox.open {
display: flex;
}
#img-lightbox img {
/* Fill all the space left after the caption and scale the photo up/down to
fit (object-fit:contain upscales when the box is larger than the source),
so small images no longer sit tiny in the middle — the photo grows until
it meets the viewport edges on its limiting dimension. */
flex: 1;
min-height: 0;
width: 100%;
object-fit: contain;
border-radius: var(--pico-border-radius);
display: block;
}
#img-lightbox-url {
margin-top: 0.75rem;
font-size: 0.85rem;
color: rgba(255,255,255,0.75);
word-break: break-all;
text-align: center;
max-width: 100%;
}
#img-lightbox-url a {
color: var(--pico-primary);
}
/* Playlist create form — top row: name input + type select */
.pl-create-top {
display: flex;
gap: 0.5rem;
align-items: stretch;
margin-bottom: 0.5rem;
}
.pl-create-top > input[type="text"] {
flex: 1 1 0;
min-width: 0;
margin-bottom: 0;
}
/* Keep the Audio/Video type select compact; don't let it stretch */
.pl-create-top > .cs-wrapper {
flex: 0 0 auto;
width: auto;
min-width: 8rem;
margin-bottom: 0;
}
/* Actions row */
.pl-create-actions {
display: flex;
gap: 0.5rem;
margin-top: 0.5rem;
}
.pl-create-actions button {
margin: 0;
}
@media (max-width: 480px) {
.pl-create-top {
flex-direction: column;
}
.pl-create-top > .cs-wrapper {
width: 100%;
min-width: 0;
}
}
/* Video player in playlist */
.pl-video {
width: 100%;
max-height: calc(100dvh - 14rem);
object-fit: contain;
border-radius: var(--pico-border-radius);
background: #000;
display: block;
}
/* ── AI chat page ────────────────────────────────────────────────────────── */
.ai-body {
display: flex;
flex-direction: column;
height: 100dvh;
overflow: hidden;
}
.ai-main {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
padding-bottom: 0;
box-sizing: border-box;
}
#ai-no-model {
flex-shrink: 0;
text-align: center;
color: var(--pico-muted-color);
}
#ai-messages {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 0.5rem 0 1rem;
}
#ai-messages::before {
content: '';
flex: 1;
}
.ai-msg {
max-width: 85%;
padding: 0.6rem 0.9rem;
border-radius: 0.85rem;
line-height: 1.55;
word-break: break-word;
white-space: pre-wrap;
}
.ai-msg-user {
align-self: flex-end;
background: var(--pico-primary-background);
border: 1px solid var(--pico-primary);
border-bottom-right-radius: 0.2rem;
}
.ai-msg-ai {
align-self: flex-start;
background: var(--pico-card-background-color);
border: 1px solid var(--pico-muted-border-color);
border-bottom-left-radius: 0.2rem;
}
/* Bulleted lists in a reply. The bubble is pre-wrap and Pico's list spacing is set for
document body text, so the list carries its own tight margins here.
The bullet is a real character the renderer writes into the item (see renderContent),
not a CSS ::marker — a marker is generated content and never reaches the clipboard, so
copying a list would paste as bare lines. list-style is therefore off (see below), and
the hanging indent is built by hand: the ul pads the list in, each item pulls its first
line back out by the same amount, and the fixed-width bullet fills exactly that space so
the item's text starts on the indent whether it wraps or not. */
.ai-msg ul.ai-list {
margin: 0.35rem 0;
padding-left: 1.35rem;
}
.ai-msg ul.ai-list:first-child { margin-top: 0; }
.ai-msg ul.ai-list:last-child { margin-bottom: 0; }
/* list-style has to be turned off on the ITEM: Pico sets `ul li{list-style:square}` on
the li itself, and a rule on the element beats the ul's inherited value — off the ul
alone, the square marker survives and draws a second bullet beside the real one. */
.ai-msg ul.ai-list li {
list-style: none;
margin-bottom: 0.2rem;
text-indent: -1.35rem;
}
.ai-msg ul.ai-list li:last-child { margin-bottom: 0; }
.ai-msg ul.ai-list .ai-bullet {
display: inline-block;
width: 1.35rem;
text-indent: 0;
}
/* Maths the model wrote as LaTeX. renderContent unwraps the $…$ delimiters and turns
the exponents into real , so all that is needed here is to keep a display
equation apart from the prose around it and to stop a superscript stretching the
line it sits on. Deliberately not a different typeface: the equations that arrive
here are short — E = mc², 9 × 10¹⁶ — and setting them in a serif or monospace face
would make them look like quoted code rather than part of the sentence. */
.ai-msg .ai-math {
margin: 0.5rem 0;
padding-left: 0.2rem;
}
.ai-msg .ai-math:first-child { margin-top: 0; }
.ai-msg .ai-math:last-child { margin-bottom: 0; }
/* A sup/sub is set at full size by default and pushes the line taller than its
neighbours, which shows up as uneven leading in a paragraph of prose. */
.ai-msg sup,
.ai-msg sub {
font-size: 0.75em;
line-height: 0;
}
/* Inline web-research citations — a [1] the reader can click. Sized down and set as a
superscript so a sentence carrying three of them still reads as a sentence. */
/* A citation group — [1] or [1, 3]. The wrapper carries the superscript so the brackets
and separators ride with the numbers; each number inside is its own link. */
.ai-cite {
font-size: 0.78em;
vertical-align: super;
line-height: 0;
padding: 0 0.1em;
white-space: nowrap;
}
.ai-cite a {
text-decoration: none;
}
.ai-cite a:hover,
.ai-cite a:focus-visible {
text-decoration: underline;
}
#ai-input-area {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.75rem 0;
border-top: 1px solid var(--pico-muted-border-color);
flex-shrink: 0;
transition: outline-color 0.15s, background 0.15s;
outline: 2px dashed transparent;
outline-offset: 4px;
}
/* Dragging a photo over the composer. Outline rather than border so the highlight
doesn't reflow the layout underneath the message list mid-drag. */
#ai-input-area.drag-over {
outline-color: var(--pico-primary);
background: var(--pico-card-background-color);
}
/* Textarea and the camera button share a row; Send stays full-width beneath them. */
.ai-input-row {
display: flex;
align-items: flex-end;
gap: 0.5rem;
}
#ai-input {
flex: 1;
min-width: 0;
resize: none;
margin: 0;
min-height: 2.5rem;
max-height: 8rem;
overflow-y: auto;
}
#ai-photo-btn {
width: auto;
flex-shrink: 0;
margin: 0;
padding: 0.55rem 0.75rem;
line-height: 1;
/* Span the composer's full height so the button's outline meets the textarea's top
edge as well as its bottom. The row is align-items:flex-end, which otherwise leaves
the button hugging the bottom while the textarea grows upward past it. Stretching
tracks the textarea as it auto-resizes between its min- and max-height. */
align-self: stretch;
display: inline-flex;
align-items: center;
justify-content: center;
}
#ai-photo-btn .icon {
width: 1.25em;
height: 1.25em;
/* Centred by the flex box above; the glyph keeps its size while the outline grows. */
vertical-align: middle;
}
/* Pending attachments: thumbnails above the composer, each with a remove button. */
#ai-attachments {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
#ai-attachments[hidden] {
display: none;
}
.ai-thumb {
position: relative;
width: 3.5rem;
height: 3.5rem;
border-radius: var(--pico-border-radius);
border: 1px solid var(--pico-muted-border-color);
overflow: hidden;
}
.ai-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* The one fill left standing. This × sits on top of a user's photo, where a
transparent ground would put a dark glyph over whatever happens to be behind it
— white sky, pale skin, a screenshot — and lose it. The black is a legibility
scrim, not the accent language the rest of this pass converted, so it stays.
The class (set in ai_chat.js) keeps it out of the global button rule at the
bottom of this file. */
.ai-thumb .ai-thumb-x {
position: absolute;
top: 0;
right: 0;
width: 1.25rem;
height: 1.25rem;
padding: 0;
margin: 0;
border: 0;
border-radius: 0 0 0 var(--pico-border-radius);
background: rgba(0, 0, 0, 0.65);
color: #fff;
font-size: 0.8rem;
line-height: 1.25rem;
cursor: pointer;
}
/* Photos echoed back inside a sent message bubble. */
.ai-msg-img {
max-width: 12rem;
max-height: 12rem;
border-radius: var(--pico-border-radius);
display: block;
margin-bottom: 0.35rem;
}
#ai-send-btn,
#ai-stop-btn {
width: 100%;
margin: 0;
}
#ai-stop-btn {
background: transparent;
border: 2px solid #c0392b;
color: #c0392b;
}
#ai-send-btn.ai-btn-loading,
#ai-stop-btn.ai-btn-loading {
position: relative;
overflow: hidden;
cursor: wait;
opacity: 0.7;
}
#ai-send-btn.ai-btn-loading::after,
#ai-stop-btn.ai-btn-loading::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 40%;
background: var(--pico-primary-hover-background);
animation: ai-progress 1.4s ease-in-out infinite;
}
#ai-stop-btn.ai-btn-loading { cursor: pointer; }
@keyframes ai-progress {
0% { left: -40%; }
100% { left: 100%; }
}
.ai-open-btn {
display: inline-block;
margin-top: 0.5rem;
padding: 0.4rem 0.8rem;
border-radius: 0.5rem;
border: 1px solid var(--pico-primary);
color: var(--pico-primary);
font-size: 0.85em;
text-decoration: none;
word-break: break-all;
}
/* A round that failed (usually a dropped connection the reattach couldn't recover).
The bubble is the retry control: clicking it picks up a reply the server may have
finished in the meantime, or regenerates the turn. */
.ai-msg.ai-msg-error {
border-color: #c0392b;
cursor: pointer;
}
.ai-msg.ai-msg-error:hover,
.ai-msg.ai-msg-error:focus-visible {
background: var(--pico-form-element-background-color);
}
/* The failure itself, shown under whatever prose the round had already streamed
(showError keeps that rather than replacing it). Its own colour so the reason is
legible as an error even when it follows a page of normal reply text. */
.ai-error-line {
display: block;
margin-top: 0.35rem;
color: #c0392b;
}
/* Nothing above it means the bubble is nothing but the error — no leading gap. */
.ai-error-line:first-child {
margin-top: 0;
}
.ai-retry-hint {
display: block;
margin-top: 0.35rem;
font-size: 0.8em;
color: var(--pico-muted-color);
}
/* Shown in place of nothing while a dropped stream is being reattached, so a frozen
half-written reply doesn't read as a hang. */
.ai-reconnecting {
display: block;
margin-top: 0.35rem;
font-size: 0.8em;
color: var(--pico-muted-color);
font-style: italic;
}
/* ── Plyr dark theme — matches site dark background ──────────────────────── */
/* Center controls for all Plyr instances (audio and video) */
.plyr__controls {
justify-content: center !important;
gap: 0.25rem;
}
/* Keep the progress bar stretched; it uses flex:1 and must not shrink */
.plyr__controls .plyr__progress__container {
flex: 1 !important;
min-width: 0 !important;
}
.plyr--audio {
--plyr-color-main: var(--pico-primary);
--plyr-audio-progress-buffered-background: rgba(255,255,255,0.15);
--plyr-range-fill-background: var(--pico-primary-hover-background);
--plyr-range-thumb-background: #fff;
--plyr-tooltip-background: var(--pico-dropdown-background-color);
--plyr-tooltip-color: #fff;
--plyr-tooltip-shadow: 0 1px 3px rgba(0,0,0,0.6);
border-radius: var(--pico-border-radius);
}
/* !important overrides everything regardless of specificity or load order.
The controls bar sits on the one flat base surface defined at the end of this
file, not on Pico's old card colour — the player is part of the page, not a
panel floating on it, and a lighter bar was the last visible seam. The tooltip
and the volume popup above stay on the lifted popover surface on purpose:
those float OVER the bar and need to separate from it. */
.plyr--audio .plyr__controls {
background: var(--pico-background-color) !important;
color: var(--pico-color) !important;
align-items: center !important;
}
.plyr--audio .plyr__control {
background: transparent !important;
color: var(--pico-color) !important;
/* Pico sets line-height:1.5 on all buttons, making them taller than the
sliders and breaking vertical alignment in the flex controls bar. */
line-height: 1 !important;
padding: calc(var(--plyr-control-spacing, 10px) * 0.7) !important;
border: 0 !important;
margin: 0 !important;
align-self: center !important;
}
.plyr--audio .plyr__time {
color: var(--pico-primary) !important;
}
/* Target SVG fill directly — currentColor inheritance doesn't reliably
propagate into shadow DOM on all WebView versions. */
.plyr--audio .plyr__control svg {
fill: var(--pico-primary) !important;
}
/* Hover draws a ring instead of filling the control. Inset box-shadow rather than
a border: these buttons are laid out flush in a flex bar, and a border would move
the icon by a pixel on every hover. It follows Plyr's own border-radius for free.
!important throughout — plyr.css is linked after app.css. */
.plyr--audio .plyr__control:hover,
.plyr--audio .plyr__control:focus,
.plyr--audio .plyr__control:active {
background: transparent !important;
box-shadow: inset 0 0 0 1px var(--pico-primary) !important;
color: var(--pico-primary) !important;
}
.plyr--audio .plyr__control:hover svg,
.plyr--audio .plyr__control:focus svg,
.plyr--audio .plyr__control:active svg {
fill: var(--pico-primary) !important;
}
#player-section .plyr__controls {
gap: 0.75rem;
}
/* ── Plyr video — dark theme matching audio controls ─────────────────────── */
.plyr--video {
--plyr-color-main: var(--pico-primary);
--plyr-video-control-color: #c2c7d0;
--plyr-video-control-color-hover: #fff;
--plyr-video-control-background-hover: rgba(255,255,255,0.15);
--plyr-video-controls-background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.75));
--plyr-video-progress-buffered-background: rgba(255,255,255,0.2);
--plyr-range-fill-background: var(--pico-primary-hover-background);
--plyr-range-thumb-background: #fff;
--plyr-tooltip-background: var(--pico-dropdown-background-color);
--plyr-tooltip-color: #fff;
--plyr-tooltip-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
/* Fix Pico's line-height on video controls buttons (same issue as audio) */
.plyr--video .plyr__control {
line-height: 1 !important;
padding: calc(var(--plyr-control-spacing, 10px) * 0.7) !important;
border: 0 !important;
margin: 0 !important;
align-self: center !important;
}
/* Explicitly set SVG fill so it follows --plyr-video-control-color */
.plyr--video .plyr__control svg {
fill: #c2c7d0;
}
/* Play/pause, mute, captions, and fullscreen icons — use pico primary (green).
Must use fill + !important: currentColor doesn't reliably propagate
through SVG shadow DOM. */
.plyr--video .plyr__control[data-plyr="play"] svg,
.plyr--video .plyr__control[data-plyr="pause"] svg,
.plyr--video .plyr__control[data-plyr="mute"] svg,
.plyr--video .plyr__control[data-plyr="captions"] svg,
.plyr--video .plyr__control[data-plyr="fullscreen"] svg,
.plyr--video .plyr__control[data-plyr="exit-fullscreen"] svg {
fill: var(--pico-primary) !important;
}
/* Hover/focus/active — use pico primary as highlight */
.plyr--video .plyr__control:hover svg,
.plyr--video .plyr__control:focus svg,
.plyr--video .plyr__control:active svg {
fill: #fff;
}
/* Time display */
.plyr--video .plyr__time {
color: var(--pico-primary) !important;
}
/* Overlaid play button (big centre button when paused). Ring and accent icon like
everything else, but it keeps a ground — a neutral scrim, not the accent slab it
used to be. It floats over an arbitrary paused frame, and a fully transparent
button is unreadable against a bright one. Same reasoning as the .ai-thumb-x
above: a scrim is a legibility device, not part of the accent language. */
.plyr--video .plyr__control--overlaid {
background: rgba(0, 0, 0, 0.55) !important;
box-shadow: inset 0 0 0 2px var(--pico-primary) !important;
color: var(--pico-primary) !important;
}
/* Explicitly fill the overlaid button's SVG icon — currentColor doesn't reliably
reach SVG shadow DOM. */
.plyr--video .plyr__control--overlaid svg {
fill: var(--pico-primary) !important;
}
/* ── Plyr volume bar — vertical slider popup above the mute button on hover ──
Desktop only (touch hides the whole control, see the @media below).
The slider is Plyr's normal HORIZONTAL range simply rotated -90deg. Rotating
the horizontal input (rather than using a native vertical range) keeps Plyr's
--value-driven fill gradient — linear-gradient(to right, ...) on
::-webkit-slider-runnable-track — working: after -90deg the fill runs
bottom→top (100% at the top), and avoids fragile native vertical-range
support in WebView.
Centering: .plyr__volume is position:relative and, in Plyr's markup, contains
both the mute and this