/* p0pc0rn - app.css (v013: pictures + clips). Flat, mono-first OLED UI with one iris accent. System fonts only (no network). Motion animates transform/opacity only (the result reveal blur is the one exception) and is fired by state changes; while a picture is being made (html[data-busy]) nothing loops except the 6px .progress-pulse dot (and, before the first percent, popcorn.js's 6 fps heating loop on a timer). */ /* ---------- tokens (dark is the default; light overrides below) ---------- */ :root { --bg: #000; --surface-1: #0F0F11; --surface-2: #18181B; --surface-3: #232327; --hairline: rgba(255,255,255,.08); --hairline-2: rgba(255,255,255,.14); --text-1: #F5F5F7; --text-2: rgba(235,235,245,.64); --text-3: rgba(235,235,245,.36); --accent: #8B7CFF; --accent-soft: rgba(139,124,255,.16); --danger: #FF453A; --ok: #30D158; --warn: #FFD60A; --scrim: rgba(0,0,0,.6); --cta-bg: #F5F5F7; --cta-fg: #000; --sheet-shadow: 0 -12px 48px rgba(0,0,0,.5); --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", sans-serif; --mono: ui-monospace, "SF Mono", Menlo, monospace; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px; --ease-out: cubic-bezier(.22,1,.36,1); --ease-in: cubic-bezier(.4,0,1,1); --ease-inout: cubic-bezier(.65,0,.35,1); --ease-spring: cubic-bezier(.34,1.32,.64,1); --d-1: 90ms; --d-2: 160ms; --d-3: 240ms; --d-4: 320ms; --d-5: 480ms; --d-reveal: 900ms; /* safe areas go through variables so a desktop test can simulate an iPhone notch */ --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --gutter-l: max(16px, var(--safe-l)); --gutter-r: max(16px, var(--safe-r)); --ar: 1.7778; color-scheme: dark; } @media (prefers-color-scheme: light) { :root { --bg: #F6F6F8; --surface-1: #FFF; --surface-2: #EEEEF1; --surface-3: #E4E4E9; --hairline: rgba(0,0,0,.08); --hairline-2: rgba(0,0,0,.14); --text-1: #0A0A0B; --text-2: rgba(60,60,67,.72); --text-3: rgba(60,60,67,.62); /* light: >= 4.5:1 on the page (was .42 = 2.2:1) */ --accent: #5B4BF5; --accent-soft: rgba(91,75,245,.12); --danger: #D70015; --ok: #248A3D; --warn: #B25000; --scrim: rgba(0,0,0,.32); --cta-bg: #0A0A0B; --cta-fg: #FFF; --sheet-shadow: 0 -12px 48px rgba(0,0,0,.14); color-scheme: light; } } /* ---------- base ---------- */ * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: var(--bg); color: var(--text-1); font: 400 17px/24px var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; touch-action: manipulation; overflow: hidden; overflow-wrap: break-word; /* a long token (URL, tag list, snake_case) wraps instead of widening its box */ } p { margin: 0; } button, input, textarea { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; } [hidden] { display: none !important; } svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; } svg * { vector-effect: non-scaling-stroke; } .ic { width: 20px; height: 20px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; } .large { font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: -.02em; margin: 0; } .title { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.015em; } .headline { font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -.01em; } .body { font-size: 17px; line-height: 24px; } .callout { font-size: 15px; line-height: 20px; } .footnote { font-size: 13px; line-height: 18px; } .label { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 var(--s-2); } .dim { color: var(--text-2); } .mono { font-family: var(--mono); } .num { font-variant-numeric: tabular-nums; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 50px; padding: 0 var(--s-6); border-radius: var(--r-md); font-weight: 600; background: var(--surface-2); color: var(--text-1); box-shadow: inset 0 0 0 1px var(--hairline); transition: transform var(--d-4) var(--ease-spring), opacity var(--d-2), background-color var(--d-2); } .btn:active, .act:active, .chip:active, .tile:active, .tab:active { transform: scale(.97); transition-duration: var(--d-1); transition-timing-function: var(--ease-out); } .btn.cta { background: var(--cta-bg); color: var(--cta-fg); box-shadow: none; width: 100%; } .btn.ghost { background: transparent; box-shadow: none; color: var(--text-2); } .btn.danger { color: var(--danger); width: 100%; } .btn.sm { min-height: 44px; padding: 0 var(--s-4); font-size: 15px; border-radius: var(--r-sm); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .32; } .btn:disabled { cursor: default; } .icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-pill); } .row-btns { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); } /* ---------- gate (boot / unsupported / setup) ---------- */ .gate { position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--s-6); padding: calc(var(--safe-t) + 24px) var(--gutter-r) calc(var(--safe-b) + 24px) var(--gutter-l); overflow-y: auto; } .mark { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline-2); color: var(--text-1); } .mark svg { width: 32px; height: 32px; } .card-g { display: flex; flex-direction: column; gap: var(--s-3); animation: rise var(--d-4) var(--ease-out) both; } .card-g .btn { margin-top: var(--s-3); } .card-g .btn.ghost { margin-top: 0; } .steps { margin: 0; padding-left: 22px; color: var(--text-2); font-size: 15px; line-height: 28px; } .steps b { color: var(--text-1); font-weight: 600; } .steps .ic { width: 16px; height: 16px; vertical-align: -3px; } .bar { height: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; } .bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform 300ms linear; } .note { display: flex; gap: var(--s-2); align-items: flex-start; font-size: 15px; line-height: 20px; color: var(--text-2); } .note.warn { color: var(--text-1); } /* calm: only the icon carries the warn colour */ .note.warn .ic { color: var(--warn); } .note .ic { margin-top: -1px; } .details summary { font-size: 13px; color: var(--text-3); list-style: none; cursor: pointer; min-height: 32px; display: flex; align-items: center; } .details summary::-webkit-details-marker { display: none; } .details p { word-break: break-word; color: var(--text-3); } /* ---------- shell ---------- */ .shell { position: fixed; inset: 0; display: grid; grid-template-rows: auto 1fr auto auto; grid-template-columns: minmax(0, 1fr); height: 100dvh; } .hdr { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); padding: calc(var(--safe-t) + 8px) var(--gutter-r) var(--s-2) var(--gutter-l); } .pill { height: 28px; padding: 0 var(--s-3); margin-bottom: 7px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); font-size: 13px; color: var(--text-2); position: relative; } .pill::after { content: ""; position: absolute; inset: -8px -4px; } /* 44px hit area */ .pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); } .pill[data-tone="accent"] i { background: var(--accent); } .pill[data-tone="warn"] i { background: var(--warn); } .pill[data-tone="danger"] i { background: var(--danger); } main { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: var(--s-2) var(--gutter-r) var(--s-6) var(--gutter-l); } .view { display: flex; flex-direction: column; gap: var(--s-6); } .view.enter { animation: rise var(--d-4) var(--ease-out) both; } .cta-bar { padding: var(--s-2) var(--gutter-r) var(--s-3) var(--gutter-l); background: var(--bg); } .big-cta { min-height: 56px; border-radius: var(--r-pill); font-size: 17px; } .big-cta.stop { background: var(--surface-2); color: var(--text-1); box-shadow: inset 0 0 0 1px var(--hairline-2); } .tabs { position: relative; display: flex; justify-content: space-around; height: calc(56px + var(--safe-b)); padding: 0 var(--gutter-r) var(--safe-b) var(--gutter-l); background: var(--bg); box-shadow: inset 0 1px 0 var(--hairline); } .tab { min-width: 64px; min-height: 49px; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text-3); font-size: 10px; line-height: 12px; font-weight: 500; position: relative; transition: color var(--d-2); } .tab[aria-current="page"] { color: var(--text-1); } .tab::after { content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(.4); transition: opacity var(--d-2), transform var(--d-4) var(--ease-spring); } .tab[aria-current="page"]::after { opacity: 1; transform: none; } .tab-hair { position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0; transition: opacity var(--d-3); } html[data-busy] .tab-hair { opacity: 1; } .tab-hair i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform 600ms var(--ease-out); } /* ---------- create: stage ---------- */ .stage { position: relative; width: min(100%, calc(48dvh * var(--ar))); aspect-ratio: var(--ar); margin-inline: auto; overflow: hidden; border-radius: var(--r-lg); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--hairline); background-image: radial-gradient(var(--hairline-2) 1px, transparent 1px); background-size: 16px 16px; background-position: 8px 8px; transition: width var(--d-4) var(--ease-out); } .fill { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .contain { object-fit: cover; } .stage > img, .stage > button { opacity: 0; pointer-events: none; } .stage[data-mode="photo"] #st-photo { opacity: 1; } .stage[data-mode="photo"] .crop { opacity: 1; } .crop { position: absolute; border-radius: 6px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.9), 0 0 0 9999px rgba(0,0,0,.55); opacity: 0; transition: left var(--d-4) var(--ease-out), top var(--d-4) var(--ease-out), width var(--d-4) var(--ease-out), height var(--d-4) var(--ease-out); } /* v017: the popcorn progress picture (popcorn.js). The same dark scene in light and dark mode; it fades in when a job starts, holds the last frame for a moment under the result's reveal, and fades out (at once on cancel). */ .pop { opacity: 0; background: #000; transition: opacity 400ms var(--ease-out); pointer-events: none; } .stage[data-mode="working"] .pop { opacity: 1; } .stage.leaving .pop { opacity: 0 !important; transition: opacity 600ms var(--ease-out); } .stage.leaving.held .pop { transition: opacity 600ms var(--ease-out) 550ms; } .result-btn img { width: 100%; height: 100%; display: block; object-fit: cover; -webkit-touch-callout: default; } .stage[data-mode="result"] .result-btn { opacity: 1; pointer-events: auto; } .reveal img { animation: develop var(--d-reveal) var(--ease-out) both; } .dim-label { position: absolute; right: 12px; bottom: 10px; font-size: 11px; color: var(--text-3); transition: opacity var(--d-2); } .stage:not([data-mode="empty"]) .dim-label { opacity: 0; } .hair { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; opacity: 0; transition: opacity var(--d-3); } .stage[data-mode="working"] .hair { opacity: 1; } .hair i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform 600ms var(--ease-out); } .lead { position: absolute; left: 0; top: -2px; width: 100%; height: 6px; transform: translateX(0); transition: transform 600ms var(--ease-out); } .lead b { position: absolute; left: -3px; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .stage[data-mode="working"] .progress-pulse { animation: pulse 3.2s var(--ease-inout) infinite; } /* ---------- create: working / error / result ---------- */ .work, .res, .err { display: flex; flex-direction: column; gap: var(--s-2); margin-top: calc(-1 * var(--s-3)); } .work .note { margin-top: var(--s-1); } .err { flex-direction: row; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--hairline); margin-top: 0; } .err > .ic { color: var(--danger); margin-top: 1px; } .err > div, .banner > div, .note > span { min-width: 0; } /* flex children holding engine text may shrink and wrap */ .err .footnote:empty { display: none; } .banner { position: relative; display: flex; gap: var(--s-3); padding: var(--s-4) 40px var(--s-4) var(--s-4); border-radius: var(--r-md); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--hairline); } .banner .b-x { position: absolute; top: 4px; right: 2px; color: var(--text-3); } .banner.warn > .ic { color: var(--warn); } .res-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); } .mini { min-height: 44px; padding: 0 2px; font-size: 13px; font-weight: 600; color: var(--text-2); } .actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); } .act { min-height: 64px; border-radius: var(--r-md); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; background: var(--surface-2); font-size: 12px; line-height: 14px; font-weight: 500; color: var(--text-1); padding: 12px 4px 10px; text-align: center; transition: transform var(--d-4) var(--ease-spring); } .act[aria-disabled="true"] { opacity: .32; } .stagger > * { animation: rise var(--d-4) var(--ease-out) both; } .stagger > :nth-child(2) { animation-delay: 40ms; } .stagger > :nth-child(3) { animation-delay: 80ms; } .stagger > :nth-child(4) { animation-delay: 120ms; } .stagger > :nth-child(5) { animation-delay: 160ms; } .stagger > :nth-child(6) { animation-delay: 200ms; } .stagger > :nth-child(7) { animation-delay: 240ms; } /* ---------- create: compose ---------- */ .compose { display: flex; flex-direction: column; gap: var(--s-6); transition: opacity var(--d-3); } .compose[inert] { opacity: .4; } .prompt-box { background: var(--surface-2); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--hairline); padding: var(--s-3) var(--s-3) var(--s-2) var(--s-4); } /* text fields show focus with the box's own rounded hairline, not the square accent ring (which would show on every tap) */ .prompt-box:focus-within, .input:focus { box-shadow: inset 0 0 0 1.5px var(--hairline-2); } textarea:focus-visible, .input:focus-visible { outline: none; } textarea { display: block; width: 100%; border: 0; outline: 0; resize: none; background: transparent; font-size: 17px; line-height: 24px; min-height: 72px; max-height: 144px; padding: 0; overflow-y: auto; } textarea::placeholder, .input::placeholder { color: var(--text-3); } .prompt-row { display: flex; gap: var(--s-2); margin-top: var(--s-2); } .chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 var(--s-3); border-radius: var(--r-sm); background: var(--surface-3); font-size: 15px; color: var(--text-2); position: relative; cursor: pointer; transition: transform var(--d-4) var(--ease-spring); } .chip::before { content: ""; position: absolute; inset: -4px 0; } /* 44px tall hit area */ .chip.on { padding-left: 2px; color: var(--text-1); } .chip img { width: 32px; height: 32px; border-radius: 10px; object-fit: cover; } .chip .x { position: relative; z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; color: var(--text-2); margin-right: -8px; } .chip .x svg { width: 16px; height: 16px; } /* segmented controls and the size grid share one moving indicator per group */ .sizes, .seg { position: relative; display: grid; gap: var(--s-2); } .sizes { grid-template-columns: repeat(3, 1fr); } .seg { grid-template-columns: 1fr 1fr; gap: 0; padding: 3px; border-radius: var(--r-md); background: var(--surface-2); } .ind { position: absolute; z-index: 2; left: 0; top: 0; border-radius: var(--r-sm); background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); transition: transform var(--d-4) var(--ease-spring), width var(--d-4) var(--ease-spring); pointer-events: none; } .seg .ind { border-radius: 13px; } .ind.instant { transition: none; } .sizes button, .seg button { position: relative; z-index: 1; min-height: 58px; border-radius: var(--r-sm); text-align: left; padding: 9px 12px; display: flex; flex-direction: column; justify-content: center; gap: 3px; transition: color var(--d-2); } .sizes button { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); } .sizes b, .seg b { font-size: 15px; line-height: 18px; font-weight: 600; } .sizes span, .seg span { font-size: 12px; line-height: 15px; color: var(--text-3); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; white-space: nowrap; } .seg button { align-items: center; text-align: center; min-height: 52px; } .seg.small button { min-height: 44px; } [role="radio"][aria-checked="true"] span { color: var(--text-2); } .glyph { display: inline-block; border: 1.5px solid currentColor; border-radius: 2px; flex: none; } .more { border-radius: var(--r-md); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--hairline); } .more summary { list-style: none; min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-4); font-size: 15px; color: var(--text-2); cursor: pointer; } .more summary::-webkit-details-marker { display: none; } .more .chev { transition: transform var(--d-3) var(--ease-out); color: var(--text-3); } .more[open] .chev { transform: rotate(90deg); } .seed-row { padding: 0 var(--s-4) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); } .input { width: 100%; height: 48px; border: 0; border-radius: var(--r-sm); background: var(--surface-2); padding: 0 var(--s-4); font-size: 17px; outline: 0; box-shadow: inset 0 0 0 1px var(--hairline); } .tip { text-align: center; } #dl-sep { margin-top: var(--s-2); } /* ---------- library ---------- */ .masonry { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-items: start; } .col { display: flex; flex-direction: column; gap: 4px; } .tile { display: block; width: 100%; border-radius: var(--r-xs); overflow: hidden; background: var(--surface-1); transition: transform var(--d-4) var(--ease-spring); } .tile img { width: 100%; height: auto; aspect-ratio: inherit; display: block; object-fit: cover; } /* post-launch: the picture box takes the tile's own shape from the same aspect-ratio (no percentage height to resolve inside the button), so it fills the tile on every engine; cover crops a thumbnail whose shape differs; a tile without a stored size takes the thumbnail's shape */ .empty { min-height: 50dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); text-align: center; color: var(--text-3); } .empty svg { width: 40px; height: 40px; stroke-width: 1.2; } /* ---------- settings ---------- */ .list { border-radius: var(--r-md); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--hairline); margin-top: calc(-1 * var(--s-4)); } .li { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); font-size: 15px; line-height: 20px; } .li + .li { box-shadow: inset 0 1px 0 var(--hairline); } .li > span:last-child, .li-end { text-align: right; } .li-end { display: inline-flex; align-items: center; gap: var(--s-3); } .li.link { color: var(--text-1); text-decoration: none; } .li.link .ic { color: var(--text-3); } .pad { padding: 0 var(--s-4); margin-top: calc(-1 * var(--s-4)); } /* ---------- viewer ---------- */ /* minmax(0,1fr): the column never grows past the screen, whatever the prompt holds (Delete must stay reachable) */ .viewer { position: fixed; inset: 0; z-index: 20; background: #000; color: #F5F5F7; display: grid; grid-template-rows: auto 1fr auto auto auto; grid-template-columns: minmax(0, 1fr); padding: var(--safe-t) var(--gutter-r) calc(var(--safe-b) + 12px) var(--gutter-l); animation: fade var(--d-3) var(--ease-out) both; } .viewer .dim { color: rgba(235,235,245,.64); } .viewer .act { background: #18181B; color: #F5F5F7; } .v-top { display: flex; align-items: center; justify-content: space-between; height: 52px; } .v-stage { position: relative; overflow: hidden; display: grid; place-items: center; touch-action: none; min-height: 0; } .v-stage img { max-width: 100%; max-height: 100%; display: block; -webkit-touch-callout: default; transform-origin: center; will-change: transform; } .v-stage img.glide { transition: transform var(--d-4) var(--ease-out), opacity var(--d-3); } .v-hint { text-align: center; padding: var(--s-3) 0 0; color: #F5F5F7; } .v-hint a { display: block; width: fit-content; margin: 0 auto; min-height: 44px; line-height: 44px; color: inherit; text-decoration: underline; text-underline-offset: 3px; } .v-meta { min-width: 0; padding: var(--s-4) 0 var(--s-3); display: flex; flex-direction: column; gap: 4px; } .v-meta .callout { max-height: 6.2em; overflow-y: auto; overflow-wrap: anywhere; -webkit-overflow-scrolling: touch; } /* the whole prompt stays readable (scrolls) */ ::view-transition-group(pic) { animation-duration: var(--d-5); animation-timing-function: var(--ease-spring); } /* ---------- sheet + toast ---------- */ .sheet-wrap { position: fixed; inset: 0; z-index: 30; } .scrim { position: absolute; inset: 0; background: var(--scrim); animation: fade var(--d-3) var(--ease-out) both; } .sheet { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: var(--s-3); background: var(--surface-1); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--sheet-shadow); padding: var(--s-6) var(--gutter-r) calc(var(--safe-b) + 16px) var(--gutter-l); animation: sheet-in var(--d-5) var(--ease-spring) both; } .sheet .callout { margin-bottom: var(--s-2); } .sheet-wrap.out .sheet { animation: sheet-out var(--d-3) var(--ease-in) both; } .sheet-wrap.out .scrim { animation: fade-out var(--d-3) var(--ease-in) both; } /* toast floats just above the bottom bars in the app (clear of the large title), at the top inside the full-screen viewer. Centred by left/right + auto margins + fit-content, so a long message wraps to a second line inside the gutters (radius 22 = a pill on one line, a soft card on two) and is never clipped. */ .toast { position: fixed; z-index: 25; left: var(--gutter-l); right: var(--gutter-r); width: fit-content; margin-inline: auto; bottom: calc(var(--safe-b) + 56px + 12px); display: flex; align-items: center; gap: var(--s-3); padding: 12px 10px 12px 16px; min-height: 44px; border-radius: 22px; background: var(--surface-3); color: var(--text-1); font-size: 15px; line-height: 20px; box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 0 0 1px var(--hairline); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity var(--d-2) var(--ease-in), transform var(--d-2) var(--ease-in); } .toast > span { min-width: 0; text-wrap: pretty; } html[data-tab="create"] .toast { bottom: calc(var(--safe-b) + 56px + 84px); } html[data-viewer] .toast, html[data-lesson] .toast, html:not([data-tab]) .toast { top: calc(var(--safe-t) + 8px); bottom: auto; transform: translateY(-8px); } .toast.on, html .toast.on { opacity: 1; transform: none; transition-duration: var(--d-3); transition-timing-function: var(--ease-out); } .toast.on button { pointer-events: auto; } /* taps pass through the toast; only Undo is live */ .toast button { flex: none; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 15px; } .toast:not(:has(button:not([hidden]))) { padding-right: 16px; } /* ---------- v013: picture / video switch, model cards, clips, storage ---------- */ .seg.kind button { min-height: 40px; } .seg.kind[inert] { opacity: .4; } .seg.five { grid-template-columns: repeat(5, 1fr); } .seg.five button { min-height: 44px; padding: 9px 4px; } .seg.three { grid-template-columns: repeat(3, 1fr); } #v-settings > .seg { margin-top: calc(-1 * var(--s-4)); } .need { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-md); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--hairline); } .need .btn { align-self: flex-start; margin-top: var(--s-1); } .banner > .ic { color: var(--accent); margin-top: 1px; } .banner .headline + .footnote { margin-top: 2px; } .result-btn video { width: 100%; height: 100%; display: block; object-fit: cover; } .reveal video { animation: develop var(--d-reveal) var(--ease-out) both; } .v-slow, .v-est { margin-top: var(--s-2); } .tile { position: relative; } .badge { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 8px 0 4px; border-radius: var(--r-pill); background: rgba(0,0,0,.55); color: #fff; font-size: 11px; line-height: 14px; font-weight: 600; pointer-events: none; } .badge svg { width: 14px; height: 14px; fill: currentColor; stroke: none; } .model { padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); } .model + .model { box-shadow: inset 0 1px 0 var(--hairline); } .m-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } .m-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .m-name { font-size: 15px; line-height: 20px; font-weight: 600; } .m-del { color: var(--text-2); } .m-del:disabled { opacity: .32; } .f-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; } .f-name { font-size: 13px; line-height: 18px; overflow-wrap: anywhere; } #s-clean { width: 100%; } .sh-list { margin: 0 0 var(--s-2); padding: 0 0 0 18px; max-height: 32dvh; overflow-y: auto; color: var(--text-2); overflow-wrap: anywhere; } .sh-list li + li { margin-top: 4px; } .v-stage video { max-width: 100%; max-height: 100%; display: block; transform-origin: center; will-change: transform; } .v-stage video.glide { transition: transform var(--d-4) var(--ease-out), opacity var(--d-3); } .actions:has(> .act[hidden]) { grid-template-columns: repeat(3, 1fr); } .st-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; display: none; place-items: center; background: rgba(0,0,0,.55); color: #fff; pointer-events: none; } .st-play svg { width: 26px; height: 26px; fill: currentColor; stroke: none; margin-left: 3px; } .stage.still[data-mode="result"] .st-play { display: grid; } /* ---------- v014: the lesson + agreement, the upload attestation, Rights & Copyright ---------- */ .lesson { position: fixed; inset: 0; z-index: 22; background: var(--bg); display: flex; flex-direction: column; /* flex, not grid: the download strip may be hidden */ padding: var(--safe-t) 0 calc(var(--safe-b) + 12px); animation: fade var(--d-3) var(--ease-out) both; } .ls-top, .ls-dl, .ls-dots, .ls-nav { flex: none; } .ls-top { display: flex; align-items: center; gap: var(--s-2); height: 52px; padding: 0 var(--gutter-r) 0 calc(var(--gutter-l) - 10px); } .ls-top .headline { flex: 1; min-width: 0; outline: none; } .ls-dl { margin: 0 var(--gutter-r) var(--s-1) var(--gutter-l); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--hairline); display: flex; flex-direction: column; gap: var(--s-2); } .ls-dl-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } .ls-dl-row p { min-width: 0; } .ls-dl .mini { min-height: 36px; color: var(--accent); flex: none; } .ls-dots { display: flex; justify-content: center; gap: 6px; padding: var(--s-2) 0; } .ls-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--surface-3); transition: transform var(--d-3) var(--ease-spring), background-color var(--d-2); } .ls-dots i.seen { background: var(--text-3); } .ls-dots i.on { background: var(--accent); transform: scale(1.35); } .ls-track { flex: 1 1 auto; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; min-height: 0; } .ls-track::-webkit-scrollbar { display: none; } .ls-card { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--s-4) var(--gutter-r) var(--s-4) var(--gutter-l); display: flex; flex-direction: column; gap: var(--s-3); } .ls-card .label { margin: 0; } .ls-card .title { margin: 0 0 var(--s-1); } .ls-points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-3); } .ls-points li { position: relative; padding-left: 16px; } .ls-points li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .ls-card .asof { margin-top: auto; padding-top: var(--s-4); } .ls-agree .body { font-weight: 600; } .ls-status { color: var(--text-2); } .ls-nav { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s-2); padding: var(--s-2) var(--gutter-r) 0 var(--gutter-l); } .ls-nav .btn { width: 100%; } .ls-nav .btn.cta { border-radius: var(--r-pill); } .attest { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3) var(--s-4) var(--s-1); border-radius: var(--r-md); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--hairline); } .attest-row { display: flex; gap: var(--s-3); align-items: flex-start; font-size: 13px; line-height: 18px; cursor: pointer; } .attest-row input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); } .attest-more summary { list-style: none; min-height: 44px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; } .attest-more summary::-webkit-details-marker, .li.ref summary::-webkit-details-marker { display: none; } .attest-more .chev, .li.ref .chev { color: var(--text-3); transition: transform var(--d-3) var(--ease-out); } .attest-more[open] .chev, .li.ref[open] summary .chev { transform: rotate(90deg); } .means { margin: 0 0 var(--s-2); padding-left: 18px; font-size: 13px; line-height: 18px; color: var(--text-2); display: flex; flex-direction: column; gap: 6px; } .means b, .ref-body b { color: var(--text-1); font-weight: 600; } .attest .asof { padding-bottom: var(--s-3); } .attest.need { box-shadow: inset 0 0 0 1.5px var(--accent); } button.li { width: 100%; text-align: left; font-size: 15px; line-height: 20px; } .li.ref { display: block; padding: 0; } .li.ref summary { list-style: none; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); cursor: pointer; } .ref-body { padding: 0 var(--s-4) var(--s-4); font-size: 13px; line-height: 18px; color: var(--text-2); display: flex; flex-direction: column; gap: 6px; } .ref-h { color: var(--text-1); font-weight: 600; margin-top: var(--s-2); } .ref-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; } .ref-sub { margin: 6px 0 0; padding-left: 16px; } /* a rotated phone (the app is portrait-first): tighter bars so the picture keeps some room */ @media (orientation: landscape) and (max-height: 500px) { .hdr { padding-top: calc(var(--safe-t) + 4px); padding-bottom: 4px; } .large { font-size: 22px; line-height: 28px; } .pill { margin-bottom: 0; } .stage { width: min(100%, calc(52dvh * var(--ar))); } .cta-bar { padding-top: 4px; padding-bottom: 4px; } .big-cta { min-height: 44px; } .tabs { height: calc(44px + var(--safe-b)); } .tab { min-height: 44px; flex-direction: row; gap: 6px; font-size: 12px; } .tab svg { width: 20px; height: 20px; } .tab::after { bottom: 2px; } } /* ---------- keyframes ---------- */ @keyframes rise { from { opacity: 0; transform: translateY(8px); } } @keyframes fade { from { opacity: 0; } } @keyframes fade-out { to { opacity: 0; } } @keyframes pop { from { opacity: 0; transform: scale(.6); } } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes develop { from { opacity: 0; transform: scale(1.04); filter: blur(16px); } } @keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } @keyframes sheet-in { from { transform: translateY(100%); } } @keyframes sheet-out { to { transform: translateY(100%); } } /* ---------- heat mode: while the GPU renders, nothing decorative animates (only the pulse dot loops) ---------- */ html[data-busy] *:not(.progress-pulse) { animation-duration: 0s !important; animation-iteration-count: 1 !important; } /* not 'animation: none': a name change would REPLAY every entrance animation when the job ends (the end-of-job blink) */ html[data-busy] .ind, html[data-busy] .tab::after, html[data-busy] .chev { transition: none; } /* ---------- reduced motion: every motion becomes a 120 ms linear opacity crossfade ---------- */ @media (prefers-reduced-motion: reduce) { .card-g, .view.enter, .stagger > *, .reveal img, .reveal video, .done-check, .viewer, .lesson, .scrim, .sheet { animation: fade 120ms linear both !important; } .sheet-wrap.out .sheet, .sheet-wrap.out .scrim { animation: fade-out 120ms linear both !important; } .progress-pulse { animation: none !important; } .pop, .ind, .crop, .stage, .hair i, .lead, .tab-hair i, .bar i, .btn, .act, .chip, .tile, .tab::after, .chev, .ls-dots i { transition: none !important; } .hair, .tab-hair, .compose, .dim-label { transition: opacity 120ms linear; } .btn:active, .act:active, .chip:active, .tile:active, .tab:active { transform: none; } .toast, .toast.on, html[data-viewer] .toast, html:not([data-tab]) .toast { transform: none; transition: opacity 120ms linear; } .v-stage img.glide, .v-stage video.glide { transition: opacity 120ms linear; } } /* v016: the popcorn logo inside the app (gate mark, header, About) */ .mark.logo { background: none; overflow: hidden; padding: 0; } .mark.logo img { width: 64px; height: 64px; border-radius: 18px; display: block; } .hdr-l { display: flex; align-items: center; gap: 10px; min-width: 0; } .hdr-logo { width: 30px; height: 30px; border-radius: 8px; flex: none; } .brand-row { display: flex; align-items: center; justify-content: flex-start; gap: 12px; } .brand-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .brand-txt p { margin: 0; } .brand-name { font-weight: 600; letter-spacing: -.01em; } .brand-row img { width: 40px; height: 40px; border-radius: 10px; flex: none; } /* ---------- v018: clips from a picture / between two pictures ---------- */ .seg.src button { min-height: 52px; padding: 7px 6px; } .seg.src b { font-size: 13px; line-height: 16px; text-wrap: balance; } .vpics { display: flex; flex-direction: column; gap: var(--s-2); } .vslot { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--hairline); transition: box-shadow var(--d-3); } .vslot.need { box-shadow: inset 0 0 0 1.5px var(--accent); } .vs-thumb { width: 64px; height: 64px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); display: grid; place-items: center; color: var(--text-3); } .vs-thumb.none { background: transparent; border: 1.5px dashed var(--hairline-2); } .vs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .vs-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .vs-name { font-size: 15px; line-height: 20px; font-weight: 600; } .vs-btns { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); } .vs-btns .btn { min-height: 40px; padding: 0 var(--s-3); gap: 6px; } .vs-x { color: var(--text-2); margin-right: -6px; } .vs-swap { align-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; } .v-reader { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--accent-soft); } .v-reader .footnote { color: var(--text-1); } .v-reader .mini { align-self: flex-start; min-height: 36px; color: var(--accent); } .vattests { display: flex; flex-direction: column; gap: var(--s-3); } .vattests .label { margin: 0; padding-top: 2px; } .v-phint { margin-top: calc(-1 * var(--s-4)); padding: 0 var(--s-1); } /* Library: pick two pictures for a clip between them */ .lib-top { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); padding: var(--s-1) 0 var(--s-3); background: var(--bg); box-shadow: 0 -24px 0 var(--bg); } .lib-top .footnote { flex: 1 1 160px; min-width: 0; } .lib-top .btn:disabled { opacity: .32; } .selnum { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border-radius: 50%; display: none; place-items: center; background: rgba(0,0,0,.4); box-shadow: inset 0 0 0 1.5px #fff; color: #fff; font-size: 13px; font-weight: 700; pointer-events: none; } .selecting .tile:not(.clip) .selnum { display: grid; } .tile.sel { outline: 3px solid var(--accent); outline-offset: -3px; } .tile.sel .selnum { background: var(--accent); box-shadow: none; } .selecting .tile.clip { opacity: .3; } /* the Library picker + the action menu (bottom sheets) */ .sheet.picker { max-height: 84dvh; } .pk-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } .pk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; } .pk-tile { aspect-ratio: 1; border-radius: var(--r-xs); overflow: hidden; background: var(--surface-2); transition: transform var(--d-4) var(--ease-spring); } .pk-tile:active { transform: scale(.97); } .pk-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .pk-empty { padding: var(--s-4) 0; text-align: center; } .mn-list { display: flex; flex-direction: column; gap: var(--s-2); } .mn-list .btn { width: 100%; justify-content: flex-start; padding: 0 var(--s-4); } /* viewer: a picture clip's sources */ .v-src { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); } .v-src-list { display: flex; align-items: center; gap: var(--s-1); } .v-src-list button { width: 44px; height: 44px; border-radius: var(--r-xs); overflow: hidden; background: #18181B; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); } .v-src-list img { width: 100%; height: 100%; object-fit: cover; display: block; } .v-src-arrow { color: rgba(235,235,245,.5); width: 16px; height: 16px; } @media (prefers-reduced-motion: reduce) { .pk-tile, .vslot { transition: none !important; } .pk-tile:active { transform: none; } } /* ---------- v019: the Assistant tab, the queue, songs ---------- */ .tab-dot { position: absolute; top: 8px; left: calc(50% + 10px); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(.4); transition: opacity var(--d-2), transform var(--d-4) var(--ease-spring); pointer-events: none; } .tab-dot.on { opacity: 1; transform: none; } .qlink { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 36px; padding: 0 10px 0 8px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); font-size: 13px; font-weight: 600; position: relative; } .qlink::before { content: ""; position: absolute; inset: -4px 0; } .qlink .ic { width: 16px; height: 16px; } .qlink .chev { color: var(--text-3); } #c-queue { margin-top: calc(-1 * var(--s-4)); } .chat-view { gap: var(--s-3); } .as-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } .as-top:not(:has(> :not([hidden]))) { display: none; } .as-top .mini { margin-left: auto; } .as-hello { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) var(--s-1) 0; } .as-try, .as-opts { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-2); } .as-chip { text-align: left; min-height: 44px; padding: 10px 14px; border-radius: 18px; background: var(--surface-2); color: var(--text-1); font-size: 15px; line-height: 20px; box-shadow: inset 0 0 0 1px var(--hairline); transition: transform var(--d-4) var(--ease-spring); } .as-chip:active { transform: scale(.98); transition-duration: var(--d-1); } .msg.bot .as-chip { background: var(--surface-1); } .as-musichint { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-3); } .as-musichint:empty { display: none; } .as-log { display: flex; flex-direction: column; gap: var(--s-3); padding-bottom: var(--s-2); } .msg { max-width: 88%; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); animation: rise var(--d-3) var(--ease-out) both; } .msg-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 22px; } .msg.me { align-self: flex-end; padding: 10px 14px; border-radius: 20px 20px 6px 20px; background: var(--accent); color: #fff; } .msg.me .msg-photo { width: 160px; max-width: 100%; border-radius: 12px; display: block; } .msg.bot { align-self: flex-start; padding: 10px 14px; border-radius: 20px 20px 20px 6px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); } .msg.bot.k-status { background: transparent; box-shadow: none; padding: 0 2px; max-width: 100%; width: 100%; } .msg.bot.k-status > .msg-text { color: var(--text-2); } .msg.bot.k-result { max-width: 100%; width: 100%; } .msg.bot.k-error .msg-ic { color: var(--danger); } .msg.bot.k-refusal .msg-ic { color: var(--accent); } .msg.bot .btn.sm { align-self: flex-start; } .dl-btn { justify-content: flex-start; text-align: left; height: auto; padding-top: 10px; padding-bottom: 10px; } .dl-music { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; } .dl-music .bar { width: 100%; } /* onboarding: the chat's scripted messages (the first one offers the assistant + the starter knowledge as one download) */ .as-parts { margin: 0; padding-left: 20px; font-size: 15px; line-height: 20px; } .as-offer { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); width: 100%; margin-top: var(--s-1); } .msg.typing { flex-direction: row; align-items: center; gap: var(--s-2); } .msg.typing .dots { letter-spacing: 2px; color: var(--text-3); animation: pulse 1.4s ease-in-out infinite; } .msg.streaming.planning .msg-text { color: var(--text-2); } .srcs summary { list-style: none; min-height: 32px; display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; } .srcs summary::-webkit-details-marker { display: none; } .srcs .chev { width: 16px; height: 16px; color: var(--text-3); transition: transform var(--d-3) var(--ease-out); } .srcs[open] summary .chev { transform: rotate(90deg); } .src-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 18px; color: var(--text-2); } .src-list a { color: var(--accent); } /* a job card under "making it": popcorn (while it renders), phase, progress, time left, Cancel */ .jcard { display: flex; flex-direction: column; gap: 6px; padding: var(--s-3); border-radius: var(--r-md); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--hairline); } .jcard.ended { padding: 8px var(--s-3); } .jc-top, .jc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-width: 0; } .jc-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .jc-art { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden; background: #000; } .jc-pop { display: block; width: 100%; height: 100%; } .jcard.ended .jc-row, .jcard.ended .jc-bar { display: none; } .jcard[data-status="failed"] .jc-phase { color: var(--danger); } .jc-cancel { min-height: 36px; } /* results in the chat */ .res-media { display: flex; flex-direction: column; gap: var(--s-2); } .res-img, .res-vid { width: 100%; max-height: 56dvh; object-fit: contain; border-radius: var(--r-sm); background: #000; display: block; } .song-card { display: flex; flex-direction: column; gap: 6px; padding: var(--s-3); border-radius: var(--r-md); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--hairline); } .song-ic { color: var(--accent); width: 22px; height: 22px; } .song-audio, .v-aud { width: 100%; min-height: 44px; } /* the composer (the Assistant tab's bottom bar) */ .chat-bar { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-2) var(--gutter-r) var(--s-3) var(--gutter-l); background: var(--bg); box-shadow: inset 0 1px 0 var(--hairline); } .as-compose { display: flex; align-items: flex-end; gap: var(--s-1); padding: 4px; border-radius: 24px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); } .as-compose:focus-within { box-shadow: inset 0 0 0 1.5px var(--hairline-2); } #as-in { flex: 1; min-width: 0; min-height: 24px; max-height: 132px; padding: 10px 4px; font-size: 17px; line-height: 24px; } #as-in:disabled { opacity: .5; } .as-add { color: var(--text-2); cursor: pointer; } .as-send { background: var(--accent); color: #fff; width: 40px; height: 40px; margin: 2px; flex: none; } .as-send[aria-disabled="true"] { background: var(--surface-3); color: var(--text-3); } .as-photo { display: flex; flex-direction: column; gap: var(--s-2); } .as-photo-top { display: flex; } .as-photo .attest { padding-bottom: var(--s-3); } html[data-tab="assistant"] .toast { bottom: calc(var(--safe-b) + 56px + 80px); } /* Settings > Assistant: switches */ .sw-row { cursor: pointer; } .kb-row > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; } .sw-row > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; } .sw { appearance: none; -webkit-appearance: none; flex: none; width: 51px; height: 31px; margin: 0; border-radius: var(--r-pill); background: var(--surface-3); position: relative; transition: background-color var(--d-2); cursor: pointer; } .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform var(--d-3) var(--ease-spring); } .sw:checked { background: var(--ok); } .sw:checked::after { transform: translateX(20px); } #s-queue .li-end { color: var(--text-3); } #brainmode button span { font-size: 12px; } /* the queue sheet */ .qsheet { max-height: 84dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .q-list, .q-done { display: flex; flex-direction: column; gap: var(--s-2); flex: none; } .qrow { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: 10px var(--s-3); border-radius: var(--r-md); background: var(--surface-2); } .qrow.ended { padding: 4px var(--s-3); background: transparent; box-shadow: inset 0 0 0 1px var(--hairline); } .q-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; } .q-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .q-txt .btn { align-self: flex-start; } .q-ctl { display: flex; align-items: center; flex: none; } .q-ctl .icon-btn:disabled { opacity: .25; } .q-done-h { margin: var(--s-2) 0 0; } /* the viewer: a song */ .v-stage.song { grid-template-rows: minmax(0, 1fr) auto; row-gap: var(--s-3); } .v-stage.song img { max-height: 100%; } .v-stage .v-aud { width: min(100%, 520px); } .v-lyrics { margin-top: var(--s-2); } .v-lyrics summary { list-style: none; min-height: 40px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: rgba(235,235,245,.64); cursor: pointer; } .v-lyrics summary::-webkit-details-marker { display: none; } .v-lyrics .chev { transition: transform var(--d-3) var(--ease-out); } .v-lyrics[open] .chev { transform: rotate(90deg); } .v-lyr { white-space: pre-wrap; max-height: 30dvh; overflow-y: auto; margin-top: 6px; } .selecting .tile.song { opacity: .3; } .selecting .tile.song .selnum { display: none; } @media (prefers-reduced-motion: reduce) { .msg, .msg.typing .dots { animation: none !important; } .sw, .sw::after, .tab-dot { transition: none !important; } } .warn-note { color: var(--warn, #ffc857); } /* v026.9: Android (Chrome): experimental */ /* v026.2: the research list: one row per topic, LOCAL / WEB, the source, the quotes used; lyric lines that sing a fact */ .rl-live { margin-top: 6px; } .rl-sum { margin-top: 8px; font-size: 13px; } .rl-sum > summary { cursor: pointer; color: var(--text-2, inherit); list-style: none; } .rl-sum > summary::-webkit-details-marker { display: none; } .rlist { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; } .rl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; } .rl-ic { width: 1.2em; text-align: center; flex: none; } .rl-found .rl-ic { color: #34c759; } .rl-miss .rl-ic { color: #ff453a; } .rl-skipped .rl-ic, .rl-queued .rl-ic { opacity: .6; } .rl-top { font-weight: 600; } .rl-ori { font-size: 10px; letter-spacing: .04em; padding: 1px 5px; border-radius: 6px; border: 1px solid currentColor; opacity: .75; } .rl-src { opacity: .85; overflow-wrap: anywhere; } .rl-why { opacity: .7; font-style: italic; } .rl-quotes { list-style: none; margin: 2px 0 0 1.7em; padding: 0; flex-basis: 100%; display: grid; gap: 3px; } .rl-q { opacity: .85; font-size: 12px; } .rl-qhead { font-size: 12px; opacity: .7; } .lyr-fact { text-decoration: underline dotted; text-underline-offset: 3px; } .lyr-fact::after { content: ' \2022'; opacity: .6; } /* v026.4: the licence and document sheets, link rows, quote links */ .docsheet { max-height: 92vh; max-height: 92dvh; overflow-y: auto; } /* the Gemma tick on the video model's licence sheet; the sheet sits above any other sheet (a queued video job can open it) */ #ltx { z-index: 31; } #ltx-gemma-box { padding-bottom: var(--s-3); } .doc-text { max-height: 38vh; overflow: auto; white-space: pre-wrap; word-break: break-word; font: 12px/17px var(--mono, ui-monospace, monospace); background: var(--surface-2, rgba(127,127,127,.08)); border-radius: 12px; padding: var(--s-3); margin: 0; } .doc-text.tall { max-height: 74vh; } .ltx-points { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; } .lic-list { display: flex; flex-direction: column; gap: var(--s-2); } .lic-list .li span { flex: 1; } .ls-links a, .rl-qsrc { color: inherit; text-decoration: underline; text-underline-offset: 2px; } button.li.link { background: none; border: 0; color: var(--text-1); font: inherit; cursor: pointer; } /* v026.6: Klein 9B: the High / Highest frame review, the Library's 9B note */ .hq-review { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) 0; } .hq-frames { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s-2); } .hq-frames figure { margin: 0; display: flex; flex-direction: column; gap: 4px; } .hq-frames img { width: 100%; border-radius: 12px; display: block; background: var(--surface-2, rgba(127,127,127,.1)); } .badge9 { position: absolute; left: 6px; top: 6px; font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 8px; background: rgba(0,0,0,.55); color: #fff; } #v-end { width: 100%; } /* ---------- post-launch: styles that were inline (the Content-Security-Policy is style-src 'self': no