/* --------------------------------------------------------------------------- Peltify — the searchable library (src/ui/library-picker.js), 2026-08-29. One popup, used everywhere something is added or browsed. Boxy like the rest of the app (--r-box), covers rounded (--r-art), the search field a pill because search fields are (tokens.css). THE ONE RULE THAT IS SITE-WIDE lives at the bottom: `.lib-mine` — and the older `.glow-mem` the profile editor already uses — is a thin, subtle, dotted violet border on anything that is already in the library. Nick: "nice clean dotted purple border thats a bit subtle… everywhere. but its gotta be nice, thin and subtle." Loaded last, so it wins over the glow `motion.css` used to draw for the same class. --------------------------------------------------------------------------- */ .lp { width: min(860px, 100%); max-height: min(88vh, 860px); display: flex; flex-direction: column; border-radius: var(--r-box); } .lp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); } .lp-title { margin: 0 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; } .lp-sub { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); max-width: 60ch; } .lp-x { flex: none; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; color: var(--ink-soft); } .lp-x:hover { border-color: var(--ink); color: var(--ink); } .lp-bar { display: flex; align-items: center; gap: 8px; margin: 14px 20px 0; height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--white); color: var(--ink-faint); } /* NO PURPLE HIGHLIGHT (2026-08-29). Nick: "Please remove the crappy purple highlights." Focus is the border darkening, once — not a ring around the field and a second ring around the input inside it. */ .lp-bar:focus-within { border-color: var(--ink); } .lp-input { flex: 1 1 auto; min-width: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--ink); outline: none; } .lp-input:focus, .lp-input:focus-visible { outline: none; box-shadow: none; } .lp-input::placeholder { color: var(--ink-faint); } .lp-spin { display: inline-flex; width: 16px; } .lp-clear { border: 0; background: none; color: var(--ink-faint); padding: 4px; cursor: pointer; display: grid; place-items: center; } .lp-clear:hover { color: var(--ink); } /* ---- the platform menus ---- */ /* `flex: none` on every row above the body: a scroll container's min-height is 0, so a height-capped popup used to squeeze the tabs to a sliver. */ .lp-head, .lp-bar, .lp-note { flex: none; } .lp-tabs { flex: none; display: flex; gap: 6px; margin: 10px 20px 0; padding-bottom: 2px; overflow-x: auto; scrollbar-width: thin; } .lp-tab { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); color: var(--ink-soft); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease); } .lp-tab img, .lp-tab svg { flex: none; } .lp-tab:hover { border-color: var(--ink); color: var(--ink); } .lp-tab.is-on { background: var(--ink); border-color: var(--ink); color: var(--white); } .lp-tab.is-custom { border-style: dashed; } .lp-tab.is-custom.is-on { border-style: solid; } .lp-tab-n { font-size: 11px; font-weight: 700; opacity: 0.7; font-variant-numeric: tabular-nums; } .lp-note { margin: 0 20px; } .lp-note:empty { display: none; } .lp-said { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; color: var(--ink); } .lp-said.is-ok { color: var(--ok); } .lp-said.is-bad { color: var(--coral-dark); } .lp-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 20px 18px; } .lp-empty, .lp-warn { margin: 0; font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; } .lp-warn { margin-bottom: 10px; color: var(--warn); } .lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } /* 13.5: top three per kind, a quiet heading above each, "more" below it. No pill and no box — the heading is typography (rule 6). */ .lp-kind { margin: 12px 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); } .lp-kind:first-child { margin-top: 0; } /* 14.5 (searchable-library/SPEC.md entries 8-10) — "OPEN MORE" IS A TILE. Nick: "I want the 'open more' to be as big as the cards, on the very right." `.lp-more` was a text link under the grid, which read as a footnote about the row rather than as the last thing in it. It is the slot after the last card now, and it opens the expansive panel rather than growing this one. */ .lp-open-all { align-items: center; justify-content: center; gap: 2px; cursor: pointer; border: 1px dashed var(--line-strong); background: none; color: var(--violet, #6d28d9); font: inherit; text-align: center; } .lp-open-all:hover { border-style: solid; border-color: var(--violet, #6d28d9); background: var(--violet-wash); } .lp-open-n { font-size: 22px; font-weight: 800; line-height: 1.1; } .lp-open-w { font-size: 12.5px; font-weight: 700; } .lp-open-k { font-size: 11px; color: var(--ink-faint); } /* THE EXPANSIVE ONE (entry 9): "very expansive (85% screen taking it up) actual scrollable", for ONE kind, over the preview rather than instead of it — closing it puts the preview back exactly as it was. */ .lp-all { position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 85vw; height: 85vh; max-width: 1400px; z-index: 3; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-box); box-shadow: 0 24px 64px rgba(36, 20, 46, .22); display: flex; flex-direction: column; overflow: hidden; } .lp-all-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); } .lp-all-t { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: baseline; gap: 8px; } .lp-all-n { font-size: 12px; color: var(--ink-faint); letter-spacing: 0; } .lp-all-head .lp-x { margin-left: auto; } .lp-all-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 18px 22px; } @media (max-width: 640px) { .lp-all { width: 94vw; height: 88vh; } .lp-open-n { font-size: 18px; } } .lp-searching { margin-top: 10px; } .lp-res { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); min-width: 0; } .lp-res-art { display: grid; place-items: center; aspect-ratio: 1; width: 100%; padding: 0; border: 0; border-radius: var(--r-art); overflow: hidden; background: var(--paper); color: var(--ink-faint); cursor: pointer; transition: transform 140ms var(--ease); } .lp-res-art:hover { transform: translateY(-2px); } .lp-res-art img { width: 100%; height: 100%; object-fit: cover; display: block; } .lp-res-name { margin-top: 6px; font-size: 13.5px; font-weight: 700; line-height: 1.25; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lp-res-by { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lp-res-kind { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); } .lp-res.lib-mine .lp-res-kind { color: var(--spine); } /* THE BUTTONS HAVE A ROW OF THEIR OWN (2026-08-29). They used to float over the bottom-right corner, where a long artist line ran under "Include" and the +. Nick: "Long names overflow too… Maybe make the box a bit more vertically longer so no overflow happens?" — so the tile grows by one row and nothing sits on top of the words, at any width. */ .lp-res-act { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 8px; } .lp-res-act:empty { display: none; } .lp-plus { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: var(--r-box); background: var(--ink); color: var(--white); cursor: pointer; } .lp-plus:hover:not(:disabled) { background: var(--violet); border-color: var(--violet); } .lp-plus:disabled { opacity: 0.5; cursor: default; } .lp-have { width: 30px; height: 30px; display: grid; place-items: center; color: var(--spine); } /* 14.5 — A LABEL NEVER BLEEDS OUT OF ITS TILE. "Add to chat" is three words in a 96px column, and at a fixed 30px height it wrapped to three lines and spilled past the card's edge — visible the moment the expansive panel put three tiles across a 390px phone. The button keeps one line and takes the width it has. */ .lp-pick { min-width: 0; white-space: nowrap; display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border: 1px solid var(--violet); border-radius: var(--r-box); background: var(--white); color: var(--spine); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .lp-pick:hover { background: var(--violet); color: var(--white); } @media (max-width: 560px) { .lp-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } /* THE PICK BUTTON GETS ITS OWN LINE (14.5). A 96px tile cannot hold "Add to chat" beside a 30px `+`: at a fixed height the words wrapped to three lines and spilled past the card, and ellipsised they read "Ad…". The row wraps instead — the `+` keeps the first line, the labelled button takes the whole width under it and stays one readable line. */ .lp-res-act { margin-top: 6px; flex-wrap: wrap; } .lp-pick { order: 2; flex: 1 1 100%; justify-content: center; padding: 0 8px; font-size: 11.5px; } .lp-head, .lp-body { padding-left: 14px; padding-right: 14px; } .lp-bar, .lp-tabs, .lp-note { margin-left: 14px; margin-right: 14px; } } /* =========================================================================== SITE-WIDE: already in your library. Thin, dotted, violet, subtle. Applied wherever an in-library item appears — the picker's rows, the profile editor's tiles and chips, the chat's included items. It replaces the heavy glow `.glow-mem` used to draw. =========================================================================== */ .lib-mine, .glow-mem { border: 1px dotted rgba(139, 31, 209, 0.62) !important; box-shadow: none !important; } /* 2026-09-14 — every + sits at the same place: bottom-right of its card */ .lp-res { justify-content: space-between; } .lp-res-act { margin-top: auto; padding-top: 8px; } /* the picker fills a phone screen */ @media (max-width: 640px) { .lp-scrim.pop-scrim { padding: 0; align-items: stretch; } .pop-panel.lp { width: 100%; max-width: none; height: 100dvh; max-height: none; border-radius: 0; border: 0; } } /* 2026-09-15 — icons dead-centre in the picker's buttons too (iOS gives a