/* Lumio AI's pictures and videos: Chat's Images and Videos views (the media
   studio, docs/media-studio-contract.md §7, laid out as
   docs/inspiration-contract.md §2: the title, the chips, the idea grid, the
   floating composer) and the standalone page they grew from
   (docs/create-contract.md §8): the composer's own parts and its menus and
   popovers, the gallery, the lightbox and the sidebar's Recent rows. The
   shell is /chat.css's (lw-), the shared controls are shared/chat/chat.css's
   (lc-), and what's Create's own is lcr-. Every color is a token from
   theme.css, except what sits on a picture or video: white text on a fixed
   dark overlay, the same in both themes (theme.css's --scrim is light in
   light mode, made for dialogs over the page), the lightbox's near-black
   backdrop, the ideas' placeholder palettes (light-dark() pairs of their
   own) and a switch's white knob. Designed in dark, with a full
   light mode; works from 320 px wide. */

/* ------------------------------------------------------------ the page */
.lcr-head-filter { flex: none; display: flex; }
.lcr-head-filter:empty { display: none; }
.lcr-root { position: relative; }
.lcr-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.lcr-scroll:focus { outline: none; }
.lcr-gallery { max-width: 1200px; margin: 0 auto; padding: 4px var(--gutter) 24px; }
.lcr-gallery > .lcr-filter { margin: 12px 0 0; }
.lcr-none { margin: 28px 0; text-align: center; color: var(--label); font-size: var(--fs-sm); }
.lcr-more { max-width: 240px; margin: 16px auto 0; }

/* ------------------------------------------------------------ the gallery (§8.5) */
.lcr-day-label { margin: 0; padding: 16px 2px 8px; font: 500 var(--fs-xs)/1.4 var(--font); color: var(--label); }
.lcr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.lcr-tile {
  --lcr-over: #fff; --lcr-over-bg: #00000094; /* white on 58% black: over 5:1 on any picture, light or dark */
  position: relative; aspect-ratio: 1; min-width: 0; overflow: hidden; cursor: pointer;
  border-radius: var(--r-card); background: var(--card2); border: 1px solid var(--line);
  transition: border-color var(--dur-2) var(--ease-out);
}
.lcr-tile:hover, .lcr-tile:focus-visible, .lcr-tile:focus-within { border-color: var(--line-strong); }
.lcr-tile:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.lcr-tile-media { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; background: var(--overlay-2); }
.lcr-tile.lcr-fresh { animation: lcr-fade var(--dur-5) var(--ease-out); }
@keyframes lcr-fade { from { opacity: 0; transform: scale(.98); } }

/* videos: a play badge top left, the length bottom right */
.lcr-play {
  position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--lcr-over-bg); color: var(--lcr-over); pointer-events: none;
}
.lcr-play svg { width: 10px; height: 10px; margin-left: 1px; }
.lcr-dur {
  position: absolute; right: 8px; bottom: 8px; padding: 1px 6px; border-radius: var(--r-tag);
  background: var(--lcr-over-bg); color: var(--lcr-over); font: 500 var(--fs-2xs)/1.5 var(--mono); pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out);
}

/* the scrim on hover and focus: the prompt (2 lines), Download and ⋯ */
.lcr-scrim {
  position: absolute; inset: auto 0 0 0; display: flex; align-items: flex-end; gap: 8px; padding: 32px 8px 8px;
  background: linear-gradient(to top, var(--lcr-over-bg), transparent), linear-gradient(to top, var(--lcr-over-bg), transparent 70%);
  opacity: 0; transition: opacity var(--dur-2) var(--ease-out);
}
.lcr-tile:hover .lcr-scrim, .lcr-tile:focus-visible .lcr-scrim, .lcr-tile:focus-within .lcr-scrim { opacity: 1; }
.lcr-tile:hover .lcr-dur, .lcr-tile:focus-within .lcr-dur { opacity: 0; }
/* touch screens: the actions always show, and the length moves to the top right, clear of them */
@media (hover: none) {
  .lcr-scrim { opacity: 1; }
  .lcr-tile-prompt { display: none; }
  .lcr-dur, .lcr-tile:hover .lcr-dur, .lcr-tile:focus-within .lcr-dur { opacity: 1; top: 8px; bottom: auto; }
}
.lcr-tile-prompt {
  flex: 1; min-width: 0; margin: 0; color: var(--lcr-over); font-size: var(--fs-sm); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lcr-tile-actions { display: flex; gap: 4px; flex: none; }
.lcr-tile-btn {
  display: inline-grid; place-items: center; width: var(--icon-btn-sm); height: var(--icon-btn-sm); padding: 0;
  border: 0; border-radius: var(--r-control); background: color-mix(in srgb, var(--popover) 88%, transparent);
  color: var(--text); cursor: pointer; text-decoration: none;
  transition: background var(--dur-1) var(--ease-out);
}
.lcr-tile-btn:hover, .lcr-tile-btn[aria-expanded="true"] { background: var(--popover); }
.lcr-tile-btn svg { width: 14px; height: 14px; }

/* in progress: a tile is the dots and how far along (dots.js), its words for screen readers;
   a strip item shimmers (static with reduced motion) */
.lcr-working { cursor: default; }
.lcr-strip-item.lcr-working {
  background: linear-gradient(110deg, var(--overlay-2) 30%, var(--overlay-4) 50%, var(--overlay-2) 70%) var(--card2);
  background-size: 200% 100%; animation: lcr-shimmer 1.6s linear infinite;
}
@keyframes lcr-shimmer { to { background-position: -200% 0; } }
.lcr-work { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px; text-align: center; }
.lcr-work-title { font: 500 var(--fs-row)/1.4 var(--font); color: var(--text); }
.lcr-elapsed { font: 500 var(--fs-xs)/1.4 var(--mono); color: var(--label); min-height: 1.4em; }
.lcr-work-note { font-size: var(--fs-xs); line-height: 1.4; color: var(--dim); }

/* a failed or refused video: not charged, Edit prompt and Delete */
.lcr-failed { cursor: default; background: var(--card); }
.lcr-fail { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; text-align: center; }
.lcr-fail-icon { color: var(--warn); }
.lcr-fail-title { font: 600 var(--fs-row)/1.35 var(--font); color: var(--text); }
.lcr-fail-prompt { margin: 0; max-width: 100%; font-size: var(--fs-xs); color: var(--label); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lcr-fail-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.lcr-badge-ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok-text); }
.lcr-danger-quiet { background: none; border: 1px solid color-mix(in srgb, var(--danger-fill) 25%, transparent); color: var(--danger-text); }
.lcr-danger-quiet:hover:not(:disabled) { background: color-mix(in srgb, var(--danger-fill) 8%, transparent); }

/* ------------------------------------------------------------ empty states and gates (§8.9) */
.lcr-empty { max-width: var(--measure); margin: 0 auto; padding-top: min(10vh, 90px); text-align: center; }
.lcr-empty-mark { display: inline-flex; margin-bottom: 14px; color: var(--text); }
.lcr-empty .lc-empty-sub { max-width: 460px; }
.lcr-idea { min-height: 76px; }
.lcr-gate { max-width: 460px; margin: 0 auto; padding: min(14vh, 120px) 8px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.lcr-gate:empty { display: none; }
.lcr-gate-mark { color: var(--text); }
.lcr-gate-title { margin: 6px 0 0; font: 400 var(--fs-display)/1 var(--serif); letter-spacing: var(--track-serif); color: var(--text); }
.lcr-gate-title-sm { font-size: var(--fs-h2); line-height: var(--lh-tight); }
.lcr-gate-text { margin: 0 0 8px; color: var(--dim); font-size: var(--fs-body); line-height: 1.55; }
.lcr-btn-lg { height: var(--h-lg); padding: 0 20px; font-size: var(--fs-body); font-weight: 600; text-decoration: none; }

/* ------------------------------------------------------------ the composer (§8.3) */
.lcr-composer-wrap { flex: none; }
.lcr-notice-slot { max-width: var(--measure); margin: 0 auto; }
.lcr-notice-slot:not(:empty) { margin-bottom: 8px; }
.lcr-notice .lc-icon svg { width: 15px; height: 15px; }
.lcr-notice-warn { border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: color-mix(in srgb, var(--warn) 10%, var(--card)); color: var(--warn-text); }
.lcr-notice-x { width: var(--h-xs); height: var(--h-xs); margin-left: auto; border-radius: var(--r-tag); }
.lcr-notice-x svg { width: 12px; height: 12px; }
.lcr-composer.lcr-drop-over { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.lcr-source { display: flex; align-items: center; gap: 10px; padding: 2px 2px 8px; }
.lcr-source-tile { position: relative; flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--overlay-2); display: grid; place-items: center; }
.lcr-source-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lcr-source-tile.lc-busy img { opacity: .5; }
.lcr-source-spin { position: absolute; color: var(--text); }
.lcr-source-x { top: 3px; right: 3px; }
.lcr-source-label { font-size: var(--fs-sm); color: var(--dim); }
.lcr-cost { padding-top: 6px; }
.lcr-chip .lc-icon:first-child svg { width: 14px; height: 14px; }

/* menus: mode 300 px, the small ones 260 px; each opens from its chip (the model menu's below) */
.lcr-mode-menu { width: min(300px, calc(100vw - 32px)); }
.lcr-small-menu { width: min(260px, calc(100vw - 32px)); }
.lcr-pop [role^="menuitem"] { outline: none; }
.lcr-pop [role^="menuitem"]:focus-visible { background: var(--overlay-3); }
.lcr-pop [aria-disabled="true"] { cursor: default; }
.lcr-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lcr-row-lock { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.lcr-row-lock .lc-mo-lock { margin-left: 0; }
.lcr-soon { margin-left: auto; }
.lcr-pop .lc-check { margin-left: 0; }
.lcr-pop .lc-menu-row > .lc-check { margin-left: auto; }
.lcr-pop .lcr-lock + .lc-check { margin-left: 8px; }

/* usage, mic and Create: one group at the row's end */
.lcr-row-tail { display: flex; align-items: center; gap: var(--cmp-gap, 6px); flex: none; margin-left: auto; }
/* a compact composer (under 480 px, media-studio §7.1, inspiration §2.8): the mode and settings chips are
   icon-only (34 px, their words in the tooltip), the model's shows its tier or name up to 96 px, and when the
   row can't fit, usage, mic and Create go to a line of their own, at the right */
@container lc-composer (max-width: 479px) {
  .lc-chip.lcr-chip:is(.lcr-chip-mode, .lcr-chip-settings) { width: 34px; padding: 0; justify-content: center; }
  .lc-chip.lcr-chip:is(.lcr-chip-mode, .lcr-chip-settings) > :is(.lc-chip-label, .lc-chev, .lcr-chip-mute) { display: none; }
  .lc-chip.lcr-chip-model { --lbl-max: 96px; flex: none; }
  .lcr-row { flex-wrap: wrap; row-gap: 6px; }
}

/* ------------------------------------------------------------ the media studio (media-studio §7) */
.lcr-studio .lcr-gallery { padding: 0 0 8px; max-width: none; }
.lcr-composer.lcr-off { border-style: dashed; }
.lcr-composer .lcr-prompt:disabled { cursor: not-allowed; }
.lcr-hint-info { color: var(--text-soft); }
/* + is pointed at when the model needs a picture: two halo pulses (a static halo with reduced motion) */
.lcr-attach.lcr-pointed { animation: lcr-point 1.2s var(--ease-out) 2; }
@keyframes lcr-point { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } to { box-shadow: 0 0 0 10px transparent; } }
.lcr-chip-model .lc-maker-logo { width: 16px; height: 16px; }
/* the settings chip: the sliders, what's set ("3:4 · 2K"), and a speaker-off when sound is off */
.lcr-chip-settings { --lbl-max: 150px; }
.lcr-chip-settings .lc-chip-label { font-variant-numeric: tabular-nums; }
.lcr-chip-mute { color: var(--label); }
/* without an account: the model chip shows a tier and opens the wall */
.lcr-guest .lcr-chip-model .lc-chip-label { color: var(--text); }

/* the pictures to start from: 56 px tiles with ✕ and their label */
.lcr-source { flex-wrap: wrap; gap: 8px 16px; }
.lcr-source-item { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* menus: + 340 px, the settings popover 340 px */
.lcr-attach-menu { width: min(340px, calc(100vw - 32px)); }
.lcr-pop .lc-menu-sep { height: 1px; margin: 4px 6px; background: var(--line); }
.lcr-opt-row.lc-locked .lcr-row-main { color: var(--label); }
.lcr-opt-row .lcr-lock { margin-left: auto; flex: none; }
/* more lengths than six: a grid of 44×32 chips, five a row; one over the plan has a lock (its plan in its tooltip) */
.lcr-len-grid { display: grid; grid-template-columns: repeat(5, 44px); gap: 6px; padding: 2px 10px 8px; }
.lcr-len-chip {
  position: relative; display: grid; place-items: center; width: 44px; height: 32px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-control); background: var(--card); color: var(--text);
  font: 500 var(--fs-xs) var(--font); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.lcr-len-chip:hover, .lcr-len-chip:focus-visible { background: var(--card-hover); border-color: var(--line-strong); outline: none; }
.lcr-len-chip[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.lcr-len-chip[aria-disabled="true"] { color: var(--label); cursor: default; }
.lcr-len-lock { position: absolute; top: 1px; right: 1px; color: var(--label); }
.lcr-len-lock svg { width: 10px; height: 10px; }

/* the model menu (§7.4; simple since 2026-10-19: chat.css's model list, no prices): 360 px (at most the
   composer's width), a pinned search, Recommended, More models; a bottom sheet under 560 px */
.lcr-model-menu { width: min(360px, 100%, calc(100vw - 32px)); max-height: min(560px, 70vh); }
.lcr-mm-head { flex: none; display: flex; }
.lcr-mm-head .lc-model-search { flex: 1; min-width: 0; }
.lcr-model-menu .lc-model-list { flex: 1; min-height: 0; }
.lc-layer > .lcr-model-sheet {
  position: absolute; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 80vh;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0; transform-origin: 50% 100%; animation-name: lcr-sheet-up;
}
@keyframes lcr-sheet-up { from { opacity: 0; transform: translateY(16px); } }

/* "Your images": the picker sheet's grid */
.lcr-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; padding-top: 4px; }
.lcr-picker-item {
  display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card2);
}
.lcr-picker-item:hover, .lcr-picker-item:focus-visible { border-color: var(--accent); outline: none; }
.lcr-picker-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lcr-picker-note { margin: 16px 0 0; text-align: center; }
.lcr-picker-more { margin-top: 12px; }

/* tiles in progress: the model and settings, and a video's bar along the bottom (to 90% over its usual time) */
.lcr-work-model { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-2xs); color: var(--label); }

/* Yours with nothing in it (inspiration §2.7): compact, no hero mark, See ideas */
.lcr-empty.lcr-empty-compact { max-width: var(--measure); padding-top: 32px; }
.lcr-empty-compact .lc-empty-sub { margin-bottom: 16px; }
.lcr-empty-title { margin: 8px 0 0; font: 400 var(--fs-h3)/1.15 var(--serif); letter-spacing: var(--track-serif); color: var(--text); }
.lcr-starters { text-align: left; }

/* a tile's ⋯ menu: under its button */
.lcr-tile-menu { bottom: auto; width: min(240px, calc(100vw - 24px)); transform-origin: 80% 0; animation-name: lcr-pop-down; }
@keyframes lcr-pop-down { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.lcr-tile-menu a.lc-menu-row { text-decoration: none; }
.lcr-lock { margin-left: auto; }
.lc-menu-row .lcr-lock .lc-icon, .lcr-lock .lc-icon { color: inherit; }
/* a chip's tooltip never shows over its open menu */
.lcr-composer .lc-tipped[aria-expanded="true"]::after, .lcr-composer .lc-tipped[aria-expanded="true"]:hover::after { visibility: hidden; opacity: 0; transition: none; }

/* dialogs: the rules, the cost confirm, delete */
.lcr-dialog-body p { margin: 0 0 10px; }
.lcr-dialog-body p:last-child { margin-bottom: 0; }
.lcr-dialog-body a { color: var(--accent); text-underline-offset: 2px; }

/* ------------------------------------------------------------ the lightbox (§8.8) */
.lcr-lightbox {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--text); overflow: hidden;
}
.lcr-lightbox:not([open]) { display: none; }
.lcr-lightbox::backdrop { background: #000000f2; } /* near-black in both themes: nothing behind it reads through (§8.8's darker scrim) */
.lcr-lightbox .lc-scrim { position: fixed; z-index: 10; }
.lcr-lb { display: flex; width: 100%; height: 100%; }
.lcr-lb-stage { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 56px 64px; }
.lcr-lb-media { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; }
.lcr-lb-img, .lcr-lb-video { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-card); background: var(--overlay-2); }
.lcr-lb-work, .lcr-lb-fail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px; border-radius: var(--r-pop); background: var(--panel); border: 1px solid var(--line-strong); color: var(--dim); font-size: var(--fs-sm); text-align: center; }
.lcr-lb-work b, .lcr-lb-fail b { color: var(--text); font-size: var(--fs-body); }
/* the dots at the creation's shape (--ar, set by lightbox.js), as big as the stage allows */
.lcr-lb-work { padding: 14px 14px 18px; }
.lcr-lb-field { position: relative; width: min(64vw, 560px, calc(56vh * var(--ar, 1))); aspect-ratio: var(--ar, 1); margin-bottom: 8px; border-radius: var(--r-card); overflow: hidden; }
.lcr-lb-close { position: absolute; top: 12px; right: 12px; background: var(--popover-glass); }
.lcr-lb-nav {
  position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 50%; background: var(--popover-glass); color: var(--text); cursor: pointer;
}
.lcr-lb-nav:disabled { opacity: .3; cursor: default; }
.lcr-lb-prev { left: 12px; }
.lcr-lb-next { right: 12px; }
.lcr-lb-panel {
  flex: none; width: 320px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; overflow-y: auto;
  background: var(--panel); border-left: 1px solid var(--line);
}
.lcr-lb-prompt { margin: 0; font-size: var(--fs-read); line-height: var(--lh-read); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.lcr-lb-prompt.lcr-folded { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.lcr-lb-meta, .lcr-lb-batch { margin: 0; font-size: var(--fs-sm); color: var(--label); }
.lcr-lb-from { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: var(--fs-sm); text-decoration: none; }
.lcr-lb-from:hover { text-decoration: underline; }
.lcr-lb-source { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--label); }
.lcr-lb-source img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--r-control); border: 1px solid var(--line); }
.lcr-lb-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: auto; padding-top: 8px; }
.lcr-lb-actions a.lc-btn { text-decoration: none; }
.lcr-lb-act .lc-icon svg { width: 16px; height: 16px; }
/* Animate on a plan without videos: the ⋯ menu's lock pill ("Go") */
.lcr-lb-act .lcr-lock { margin-left: 2px; padding: 1px 6px; }
.lcr-lb-act .lcr-lock .lc-icon svg, .lcr-lb-act .lcr-lock svg { width: 10px; height: 10px; }
.lcr-lb-delete { margin-left: auto; }
.lcr-lb-toasts { position: absolute; left: 50%; bottom: 24px; z-index: 5; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
@media (max-width: 720px) {
  .lcr-lb { flex-direction: column; }
  .lcr-lb-stage { padding: 52px 12px 12px; }
  .lcr-lb-panel { width: 100%; max-height: 46%; border-left: 0; border-top: 1px solid var(--line); }
  .lcr-lb-nav { top: auto; bottom: 16px; margin-top: 0; }
}
@media (max-width: 560px) {
  .lcr-lb-stage { padding: 52px 0 0; }
  .lcr-lb-img, .lcr-lb-video { border-radius: 0; }
  .lcr-lb-actions { position: sticky; bottom: -20px; margin: auto -20px -20px; width: calc(100% + 40px); padding: 8px 12px; gap: 4px; background: var(--panel); border-top: 1px solid var(--line); }
  .lcr-lb-act { width: 30px; height: 30px; padding: 0; border-radius: var(--r-control); }
  .lcr-lb-act .lcr-lb-act-label { display: none; }
  .lcr-lb-act[data-locked] { position: relative; }
  .lcr-lb-act .lcr-lock { position: absolute; top: -6px; right: -8px; margin: 0; padding: 0 4px; font-size: 9px; gap: 2px; }
}

/* ------------------------------------------------------------ the sidebar's Recent rows (§8.2) */
.lcr-side-list { overflow-y: auto; }
.lcr-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.lcr-recent-row {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 6px 10px; border: 0; border-radius: var(--r-control);
  background: none; color: var(--dim); font: 400 var(--fs-row)/1.45 var(--font); text-align: left; cursor: pointer;
}
.lcr-recent-row:hover, .lcr-recent-row:focus-visible { background: var(--hover); color: var(--text); }
.lcr-recent-thumb { flex: none; width: 20px; height: 20px; overflow: hidden; border-radius: var(--r-tag); background: var(--overlay-3); color: var(--label); display: grid; place-items: center; }
.lcr-recent-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lcr-recent-thumb svg { width: 12px; height: 12px; }
.lcr-recent-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------ the views' page (inspiration §2.2–§2.5) */
/* Images and Videos: a column; the scroll area holds the page (title, chips, strip, ideas or Yours) and the
   dock floats over its bottom with the composer. The shell's own header title is hidden here (the page has
   one heading); over 820 px the header has nothing else to show, so it goes. */
body.lw-media .lw-head .lw-title { display: none; }
@media (min-width: 821px) { body.lw-media .lw-head { display: none; } }
.lcr-inspire { position: relative; display: flex; flex-direction: column; min-height: 0; }
.lcr-inspire > .lcr-scroll { flex: 1; min-height: 0; }
.lcr-page { container: lcr-page / inline-size; max-width: 1240px; margin: 0 auto; }
.lcr-page-in { padding: 0 var(--gutter); }
.lcr-title { margin: 28px 0 14px; font: 400 var(--fs-h1)/1.05 var(--serif); letter-spacing: var(--track-serif); color: var(--text); }
.lcr-dock-space { height: calc(var(--lcr-dock-h, 120px) + 24px); }
.lcr-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.lcr-inspire .lcr-gate { padding-top: min(8vh, 64px); }

/* chips: one row of pills, sticky at the top of the scroll area, scrolling sideways when they don't fit
   (no scrollbar; a 24 px fade where they're clipped) */
.lcr-chips-anchor { display: block; height: 0; }
.lcr-chips-row { position: sticky; top: 0; z-index: var(--z-sticky); margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) 12px; background: var(--bg); }
.lcr-chips-row[hidden] { display: none; }
.lcr-chips-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin: -6px 0; padding: 6px 0; }
.lcr-chips-scroll::-webkit-scrollbar { display: none; }
.lcr-chips-scroll[data-fade-end="true"] { -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent); mask-image: linear-gradient(to right, black calc(100% - 24px), transparent); }
.lcr-chips-scroll[data-fade-start="true"] { -webkit-mask-image: linear-gradient(to left, black calc(100% - 24px), transparent); mask-image: linear-gradient(to left, black calc(100% - 24px), transparent); }
.lcr-chips-scroll[data-fade-start="true"][data-fade-end="true"] { -webkit-mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent); mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent); }
.lcr-chips { display: flex; align-items: center; gap: 8px; width: max-content; }
.lcr-cat {
  position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: none; color: var(--text-soft);
  font: 500 var(--fs-ui)/1 var(--font); white-space: nowrap; cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.lcr-cat::after { content: ''; position: absolute; inset: -6px 0; } /* a 44 px target */
.lcr-cat:hover { background: var(--hover); color: var(--text); }
.lcr-cat[aria-selected="true"] { background: var(--primary-bg); border-color: transparent; color: var(--primary-fg); }
.lcr-cat:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.lcr-cat-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--accent); }
.lcr-cat[aria-selected="true"] .lcr-cat-dot { background: currentColor; }
.lcr-chip-sep { flex: none; width: 1px; height: 16px; background: var(--line); }

/* "Your images": the newest ten, square, scrolling sideways, See all at the right */
.lcr-strip { margin: 2px 0 18px; }
.lcr-strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.lcr-strip-title { margin: 0; font: 600 15px/1.3 var(--font); color: var(--text); }
.lcr-see-all { padding: 0; font-weight: 600; text-decoration: none; }
.lcr-see-all:hover { text-decoration: underline; }
.lcr-strip-list { list-style: none; display: flex; gap: 8px; margin: 0; padding: 2px 2px 6px; overflow-x: auto; scrollbar-width: none; }
.lcr-strip-list::-webkit-scrollbar { display: none; }
.lcr-strip-item {
  display: grid; place-items: center; flex: none; width: 96px; height: 96px; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--card2); color: var(--label);
  transition: border-color var(--dur-1) var(--ease-out);
}
.lcr-strip-item:hover { border-color: var(--line-strong); }
.lcr-strip-item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.lcr-strip-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lcr-strip-item .lc-icon svg { display: block; width: 18px; height: 18px; }

/* the idea grid: five columns (four, three, two as the page narrows), 3:4 tiles at 16 px */
.lcr-ideas { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
.lcr-ideas[hidden], .lcr-strip[hidden], .lcr-gallery[hidden] { display: none; }
.lcr-idea-item { min-width: 0; }
.lcr-ideas .lcr-tile {
  display: block; position: relative; width: 100%; aspect-ratio: 3 / 4; padding: 0; margin: 0; overflow: hidden; isolation: isolate;
  border: 0; border-radius: var(--r-pop); background: var(--card2); color: inherit; text-align: left; font: inherit; cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.lcr-ideas .lcr-tile:active { transform: scale(.98); }
.lcr-ideas .lcr-tile:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.lcr-ideas .lcr-skel {
  cursor: default; background: linear-gradient(110deg, var(--overlay-2) 30%, var(--overlay-4) 50%, var(--overlay-2) 70%) var(--card2);
  background-size: 200% 100%; animation: lcr-shimmer 1.6s linear infinite;
}
/* the placeholder art: a 135° gradient of the tile's palette and its category's glyph, white at 60% */
.lcr-ph { position: absolute; inset: 0; background: linear-gradient(135deg, var(--lcr-a), var(--lcr-b)); transition: transform var(--dur-3) var(--ease-out); }
.lcr-ph-glyph { position: absolute; left: 50%; top: 42%; width: 44px; height: 44px; transform: translate(-50%, -50%); color: #ffffff99; }
.lcr-ph-glyph > svg { display: block; width: 44px; height: 44px; }
.lcr-ph-play { position: absolute; right: -9px; bottom: -7px; width: 16px; height: 16px; }
.lcr-ph-play svg { display: block; width: 16px; height: 16px; }
.lcr-ph-0 { --lcr-a: var(--lcr-ph-0-a); --lcr-b: var(--lcr-ph-0-b); }
.lcr-ph-1 { --lcr-a: var(--lcr-ph-1-a); --lcr-b: var(--lcr-ph-1-b); }
.lcr-ph-2 { --lcr-a: var(--lcr-ph-2-a); --lcr-b: var(--lcr-ph-2-b); }
.lcr-ph-3 { --lcr-a: var(--lcr-ph-3-a); --lcr-b: var(--lcr-ph-3-b); }
.lcr-ph-4 { --lcr-a: var(--lcr-ph-4-a); --lcr-b: var(--lcr-ph-4-b); }
.lcr-ph-5 { --lcr-a: var(--lcr-ph-5-a); --lcr-b: var(--lcr-ph-5-b); }
.lcr-ph-6 { --lcr-a: var(--lcr-ph-6-a); --lcr-b: var(--lcr-ph-6-b); }
.lcr-ph-7 { --lcr-a: var(--lcr-ph-7-a); --lcr-b: var(--lcr-ph-7-b); }
/* eight pairs: mid-toned in light mode (the white glyph and title still read), deep and muted in dark */
.lcr-inspire {
  --lcr-ph-0-a: light-dark(#d4866b, #5a3328); --lcr-ph-0-b: light-dark(#c46f86, #4f2a3a); /* peach → rose */
  --lcr-ph-1-a: light-dark(#c98a3a, #5a3f1c); --lcr-ph-1-b: light-dark(#d0705a, #5c2f25); /* amber → coral */
  --lcr-ph-2-a: light-dark(#7f9a3e, #3a4a1f); --lcr-ph-2-b: light-dark(#3f8f84, #1f4540); /* lime → teal */
  --lcr-ph-3-a: light-dark(#4c9a7f, #1f4a3d); --lcr-ph-3-b: light-dark(#4a87b8, #1f3c55); /* mint → sky */
  --lcr-ph-4-a: light-dark(#4f8cc4, #213f5c); --lcr-ph-4-b: light-dark(#5b64b8, #2a2f5c); /* sky → indigo */
  --lcr-ph-5-a: light-dark(#8f7fc4, #3c3560); --lcr-ph-5-b: light-dark(#7a5ab0, #3a2858); /* lavender → violet */
  --lcr-ph-6-a: light-dark(#b06ab8, #4f2d55); --lcr-ph-6-b: light-dark(#cc6a96, #5a2d45); /* orchid → pink */
  --lcr-ph-7-a: light-dark(#b39b6a, #4f4430); --lcr-ph-7-b: light-dark(#7f8a4f, #3a4026); /* sand → olive */
}
/* the sample over it: hidden until it loads, then it fades in; a video's clip over its poster once it plays */
.lcr-art, .lcr-clip {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.lcr-art.lcr-in, .lcr-clip.lcr-in { opacity: 1; }
/* the scrim and the title: fixed colors in both themes (they sit on art) */
.lcr-itile-scrim { position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(to top, #000000b8 0%, #00000061 30%, #00000000 100%); pointer-events: none; }
.lcr-itile-title {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px; color: #ffffff;
  font: 600 14.5px/1.25 var(--font); text-shadow: 0 1px 2px #00000066;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lcr-photo-badge { position: absolute; top: 8px; left: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #00000094; color: #ffffff; }
.lcr-photo-badge svg { display: block; width: 14px; height: 14px; }
@media (hover: hover) {
  .lcr-ideas .lcr-tile:hover { box-shadow: var(--shadow-lift); }
  .lcr-ideas .lcr-tile:hover :is(.lcr-ph, .lcr-art, .lcr-clip) { transform: scale(1.03); }
}
.lcr-ideas-note { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 0; color: var(--label); font-size: var(--fs-sm); text-align: center; }
.lcr-ideas-note[hidden] { display: none; }
.lcr-ideas-note p { margin: 0; }
@container lcr-page (max-width: 999px) { .lcr-ideas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container lcr-page (max-width: 759px) { .lcr-ideas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container lcr-page (max-width: 559px) {
  .lcr-title { margin: 16px 0 10px; font-size: var(--fs-h2); line-height: 1.1; }
  .lcr-ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lcr-itile-title { padding: 10px 12px; font-size: 13px; }
  .lcr-strip-item { width: 76px; height: 76px; }
}

/* ------------------------------------------------------------ the dock: the floating composer (§2.8) */
.lcr-dock { position: absolute; inset: auto 0 0 0; z-index: var(--z-sticky); padding: 0 var(--gutter) 16px; background: var(--bg); }
.lcr-dock[hidden] { display: none; }
.lcr-fade { position: absolute; left: 0; right: 0; bottom: 100%; height: 48px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
.lcr-dock-in { position: relative; max-width: var(--measure); margin: 0 auto; display: flex; flex-direction: column; }
.lcr-dock-in > .lcr-notice-slot, .lcr-dock-in > .lcr-wall-slot { width: 100%; }
.lcr-dock-in > .lcr-notice-slot:not(:empty), .lcr-wall-slot:not(:empty) { margin-bottom: 8px; }
.lcr-dock .lc-toasts { bottom: calc(100% + 16px); }
.lcr-dock .lcr-cost { padding: 6px 4px 0; text-align: center; }
.lcr-dock .lcr-cost[hidden] { display: none; }
/* the box: stacked (the prompt over the row), or inline (one line: + · prompt · model · settings · usage · mic · create) */
.lcr-composer.lcr-inline { display: flex; align-items: center; gap: var(--cmp-gap, 6px); padding: 8px; }
.lcr-composer.lcr-inline > .lcr-row { display: contents; }
.lcr-composer.lcr-inline > :is(.lc-hints, .lcr-source) { display: none; }
.lcr-composer.lcr-inline .lcr-attach { order: 0; }
.lcr-composer.lcr-inline .lcr-prompt { order: 1; flex: 1 1 auto; min-width: 0; padding: 5px 4px; }
.lcr-composer.lcr-inline .lcr-row > :not(.lcr-attach) { order: 2; flex: none; }
.lcr-composer.lcr-inline .lc-spacer { display: none; }
.lcr-composer.lcr-inline .lcr-row-tail { margin-left: 0; }
.lcr-measure { position: absolute; top: 0; left: 0; visibility: hidden; white-space: pre; pointer-events: none; font: 400 var(--cmp-font, 15px)/var(--lh-input, 1.5) var(--font); }
/* the prompt is 16 px on a touch screen (shared/chat/chat.css's touch block), so its measure is too */
@media (pointer: coarse) { .lcr-measure { --cmp-font: 16px; } }

/* the settings popover: the model's settings in sections (aspect chips, rows, ×n, length, sound), and at
   the foot the share of the week the creation uses (never dollars); a bottom sheet under 560 px */
.lcr-settings-menu { width: min(340px, 100%, calc(100vw - 32px)); padding: 6px 6px 0; }
.lcr-settings-menu .lc-menu-head { padding-top: 8px; }
.lcr-set-sec + .lcr-set-sec { margin-top: 4px; border-top: 1px solid var(--line); }
.lcr-pop [role="radio"], .lcr-pop [role="switch"] { outline: none; }
.lcr-pop .lc-menu-row[role="radio"]:focus-visible { background: var(--overlay-3); }
.lcr-aspects { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 10px; }
.lcr-aspect-opt {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px 0 7px;
  border: 1px solid var(--line); border-radius: var(--r-control); background: var(--card); color: var(--text);
  font: 500 var(--fs-sm) var(--font); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.lcr-aspect-opt .lc-icon { color: var(--dim); }
.lcr-aspect-opt .lc-icon svg { display: block; width: 14px; height: 14px; }
.lcr-aspect-opt:hover { background: var(--card-hover); border-color: var(--line-strong); }
.lcr-aspect-opt[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.lcr-pop .lcr-aspect-opt:focus-visible, .lcr-pop .lcr-seg-opt:focus-visible, .lcr-pop .lcr-len-chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.lcr-seg { display: flex; gap: 2px; margin: 0 10px 10px; padding: 3px; border-radius: var(--r-row); background: var(--overlay-3); }
.lcr-seg-opt {
  position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 28px; padding: 0 8px;
  border: 0; border-radius: var(--r-control); background: none; color: var(--dim); font: 500 var(--fs-sm) var(--font); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.lcr-seg-opt:hover { color: var(--text); }
.lcr-seg-opt[aria-checked="true"] { background: var(--card); color: var(--text); box-shadow: var(--shadow-xs); }
.lcr-seg-opt[aria-disabled="true"] { color: var(--label); cursor: default; }
.lcr-seg-lock svg { display: block; width: 10px; height: 10px; }
.lcr-rows { padding-bottom: 4px; }
.lcr-switch-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; margin-bottom: 4px;
  border: 0; border-radius: var(--r-row); background: none; color: var(--text); font: 400 var(--fs-ui) var(--font); text-align: left; cursor: pointer;
}
.lcr-switch-row:hover { background: var(--overlay-3); }
.lcr-switch-row > .lc-icon { color: var(--dim); }
.lcr-switch-row > .lc-icon svg { display: block; width: 16px; height: 16px; }
.lcr-switch-row small { display: block; margin-top: 1px; font-size: var(--fs-xs); color: var(--label); }
.lcr-switch { position: relative; flex: none; width: 34px; height: 20px; margin-left: auto; border-radius: var(--r-pill); background: var(--switch-off); transition: background var(--dur-2) var(--ease-out); }
.lcr-switch > i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; box-shadow: var(--shadow-xs); transition: transform var(--dur-2) var(--ease-out); }
.lcr-switch-row[aria-checked="true"] .lcr-switch { background: var(--accent); }
.lcr-switch-row[aria-checked="true"] .lcr-switch > i { transform: translateX(14px); }
.lcr-switch-row:focus-visible .lcr-switch { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.lcr-set-foot { display: flex; margin: 4px -6px 0; padding: 9px 16px 11px; border-top: 1px solid var(--line); font-size: var(--fs-xs); line-height: 1.4; color: var(--label); }
.lcr-set-total { color: var(--text-soft); font-weight: 500; }
.lcr-set-warn .lcr-set-total { color: var(--warn-text); }

/* the photo chooser (§2.6): a dialog with two rich rows and Cancel */
.lcr-chooser .lc-dialog-body { margin-bottom: 12px; }
.lcr-chooser-rows { display: flex; flex-direction: column; gap: 2px; margin: 0 -8px 16px; }
.lcr-chooser-row { min-height: 48px; }
.lcr-chooser-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

/* the sign-up wall without an account: guest chat's card (chat.css's lc-wall), in the dock */
.lcr-wall-slot .lc-wall { margin: 0; }

/* ------------------------------------------------------------ narrow */
@media (max-width: 760px) {
  .lcr-composer-wrap { padding: 0 10px 10px; }
  .lcr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lcr-dock { padding: 0 10px calc(10px + env(safe-area-inset-bottom)); }
}
@media (max-width: 520px) {
  .lcr-tiles { gap: 6px; }
  .lcr-gate-title { font-size: var(--fs-h2); }
}
@media (max-width: 420px) {
  .lw-head .lw-title { font-size: 13.5px; }
  .lcr-head-filter .lc-seg-btn { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .lcr-working, .lcr-skel { animation: none; background-size: auto; }
  .lcr-tile.lcr-fresh { animation: none; }
  .lcr-attach.lcr-pointed { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
  .lcr-art, .lcr-clip, .lcr-ph, .lcr-ideas .lcr-tile { transition: none; }
  .lcr-ideas .lcr-tile:hover :is(.lcr-ph, .lcr-art, .lcr-clip) { transform: none; }
}