/* camera chốn riêng, controls: the four modes, the "Đang bật" strip and the Xinh slider of Tuỳ chỉnh, the adjust panel
   over the lower part of the picture, the tabs, the ring of kinds around the shutter with the gallery and Tuỳ chỉnh
   buttons beside it, and the options menu (timer, ratio, light, auto-shots, the dice, the photobooth and video
   options). Everything a thumb needs sits in the lower half or in the bar; touch targets are 44 px or more. */

/* One column as wide as the screen: minmax(0, 1fr), not auto, or the ring's row of tiles (1 700px on "màu") would
   widen the column and push the tabs and the shutter off the screen. */
.controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; flex: none; }

.app[data-busy="1"] :is(#more-btn, #gallery-btn, #custom-btn, .modes, .sub-modes, .quick-opts) { opacity: 0.4; pointer-events: none; }

/* Adjust panel: over the lower part of the picture, in the middle row of the dock's grid (camera.css), so it sits 8px
   over the hint, or 70px from the bottom with no hint; only while the chosen effect has something to adjust. A slider
   row, then colour swatches, option chips or a hint when the effect has them. It is never taller than 46% of the
   picture, and never higher than 8px under the bar's buttons at the top (12px inset + 44px + 8px = 64px): with too little room
   it scrolls. Its rows keep the height of what is in them: a row of swatches or chips scrolls sideways, which would let
   the grid squeeze it to nothing (a mask's colours on a 9:16 photo on a 320px-wide screen, under a four-line hint). */
.panel {
  position: relative; grid-area: 2 / 1; margin: 64px var(--space-3) var(--space-2); z-index: 1; container: panel / inline-size;
  display: grid; grid-auto-rows: max-content; gap: 2px; max-height: 46cqh; overflow-y: auto; overscroll-behavior: contain; padding: 2px var(--space-3);
  border-radius: 22px; background: oklch(14% 0.016 var(--hue) / 0.58); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.panel:empty { display: none; }
/* While the status chip shows (camera.css: 8px under the tools, 64px from the top of the picture), the panel stops 8px
   under a chip of two lines and "thử lại": 64 + 50 + 8 = 122px (two lines of the chip's words are 49.7px tall in Chrome,
   48px in Safari). A tall picture has room to spare over the panel, which stays where it was; a short one moves the
   panel down while the chip shows and back up when it goes, and the panel scrolls if that leaves it short of room. A
   chip of more lines (a large text size) runs under the panel. On a phone on its side the panel is in the column on
   the right, clear of the chip. */
@media not all and (orientation: landscape) and (max-height: 500px) {
  :where(.stage:has(#model-status:not([hidden]))) + .stage-dock > .panel { margin-top: 122px; }
}
/* The slider keeps 80px whatever the name: a long name gives way first, on up to two even lines ("buồng chụp" / "hồng
   đào", where one line cut it to "buồng chụp h…"; two lines of these words fit the 44px row), and only a name that needs
   more ends in "…". */
.adjust { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--space-2); }
.adjust__label { font: 700 var(--step--1) / 1.2 var(--font-round); color: var(--ink); max-width: 8.5em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-wrap: balance; }
.adjust > input[type="range"] { min-width: 80px; }
.adjust__value { min-width: 2.2em; text-align: right; font-size: var(--step--1); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.adjust__hint { margin: 0 0 6px; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.fav { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); }
.fav[aria-pressed="true"] { color: var(--lamp); }
.fav[aria-pressed="true"] .ico { fill: currentColor; }
/* A panel too narrow for that and 3.5em of name (a 9:16 photo on a short screen) puts the slider on its own line:
   the name and the star above it, the slider and its number under them. The choice goes by width only, so the
   panel keeps its height while the ring turns from one effect to the next. */
@container panel (max-width: 214.98px) {
  .adjust { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
  .adjust > span:not([class]) { display: none; }
  .adjust > input[type="range"] { grid-area: 2 / 1; }
  .adjust > .adjust__value { grid-area: 2 / 2; }
  .adjust > .fav { grid-area: 1 / 2; }
}

input[type="range"] { width: 100%; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
input[type="range"]::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--lamp) var(--fill, 50%), oklch(100% 0 0 / 0.28) var(--fill, 50%)); }
input[type="range"]::-moz-range-track { height: 5px; border-radius: 999px; background: oklch(100% 0 0 / 0.28); }
input[type="range"]::-moz-range-progress { height: 5px; border-radius: 999px; background: var(--lamp); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9.5px; border: 0; border-radius: 50%; background: var(--ink); box-shadow: 0 1px 4px oklch(8% 0.02 var(--hue) / 0.5); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--ink); }

.swatches, .chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--space-3) * -1); padding-inline: var(--space-3); }
.swatches::-webkit-scrollbar, .chips::-webkit-scrollbar { display: none; }
.swatch { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; }
.swatch i { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.18); }
.swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.chips .chip { flex: none; }

.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-3); border: 0; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); font-size: var(--step--1); font-weight: 500; white-space: nowrap;
}
.chip .ico { width: 18px; height: 18px; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.chip__dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px oklch(50% 0 0 / 0.35); }
.panel .chip { min-height: 38px; background: oklch(100% 0 0 / 0.12); color: var(--ink); }
.panel .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* Tabs: one short row of words under the picture. Each word is 38 px tall and takes taps 4 px above and below. */
.tabs { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--space-2) * -1); padding: 4px var(--space-2); justify-content: safe center; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; flex: none; min-height: 38px; min-width: 44px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--ink-3); font: 700 0.95rem / 1 var(--font-round); }
.tab::after { content: ""; position: absolute; inset: -4px 0; }
.tab[aria-selected="true"] { background: var(--surface-2); color: var(--ink); }
.tab .ico { width: 18px; height: 18px; vertical-align: -4px; }
.tab[aria-selected="true"] .ico { fill: var(--lamp); stroke: var(--lamp); }

/* The ring: the kinds (or, in Tuỳ chỉnh, the tab's effects) in a row of round tiles that scrolls under the shutter. The tile that stops
   under the shutter is the one in use (ui/effect-strip.js); a tap on any other tile brings it there. The shutter's
   middle is clear so the tile shows through it; with no tile under it, it is the plain cream button. */
.lens { position: relative; height: 92px; margin-inline: calc(var(--space-2) * -1); display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; align-items: center; }
.strip {
  position: relative; display: flex; align-items: center; gap: 14px; height: 100%; margin: 0; min-width: 0;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-inline: calc(50% - 28px);
}
.strip::-webkit-scrollbar { display: none; }
.tile { position: relative; flex: none; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: none; scroll-snap-align: center; -webkit-touch-callout: none; user-select: none; transition: transform var(--dur-state) var(--ease-out); }
.tile__art { display: block; width: 56px; height: 56px; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.tile__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tile.is-center { transform: scale(1.16); }
.tile[aria-pressed="true"]:not(.is-center) .tile__art { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink-2); }
.tile.is-on::after { content: ""; position: absolute; top: 0; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 0 2px var(--bg); }
.tile__star { position: absolute; top: -3px; right: -3px; width: 18px; height: 18px; color: var(--lamp); fill: var(--lamp); stroke: var(--bg); stroke-width: 1.5; }
.lens.is-empty .strip { padding-inline: var(--space-3); } /* the favourites tab with nothing in it: its line sits left of the shutter */
.strip__empty { flex: none; width: calc(50% - 60px); margin: 0; font-size: 12px; line-height: 1.35; color: var(--ink-3); }

.shutter {
  position: absolute; left: 50%; top: 50%; width: 82px; height: 82px; margin: -41px 0 0 -41px; padding: 0;
  border: 5px solid var(--lamp); border-radius: 50%; background: transparent; display: grid; place-items: center;
  transition: transform var(--dur-press) var(--ease-out), border-color var(--dur-state) var(--ease-out);
}
.shutter i { width: 58px; height: 58px; border-radius: 50%; background: transparent; transition: border-radius var(--dur-state) var(--ease-out), background var(--dur-state) var(--ease-out), transform var(--dur-state) var(--ease-out); }
.lens.is-empty .shutter i { background: var(--ink); }
.shutter:active { transform: scale(0.95); }
.shutter:disabled { opacity: 0.5; cursor: not-allowed; }
.app[data-mode="video"] .shutter, .app[data-mode="tua"] .shutter, .app[data-mode="boomerang"] .shutter { border-color: var(--coral); }
.shutter.is-recording i { background: var(--coral); border-radius: 10px; transform: scale(0.55); }
.thumb { width: 52px; height: 52px; padding: 0; border: 2px solid var(--ink); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The options menu opens under the bar's "⋯", over the picture. */
.menu {
  position: absolute; top: calc(var(--space-3) + 44px + var(--space-2)); z-index: 20; display: grid; gap: var(--space-2);
  padding: var(--space-2); border-radius: 22px; background: var(--surface);
  max-height: calc(100% - 300px); overflow-y: auto; overscroll-behavior: contain; /* stays above the kinds row, the four modes and the ring */
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px oklch(8% 0.02 var(--hue) / 0.55);
}
.more-menu { right: var(--space-3); width: min(300px, calc(100% - 2 * var(--space-3))); }

/* The four modes: one row of words under the picture. The chosen one has the lamp's colour underneath. */
.modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.modes :is(button, a) {
  display: grid; place-items: center; min-height: 44px; padding: 0 var(--space-1); border: 0; border-radius: 14px; background: none; color: var(--ink-3);
  font: 700 0.95rem / 1.15 var(--font-round); text-decoration: none; position: relative;
}
.modes :is(button, a)[aria-pressed="true"] { color: var(--ink); }
.modes button[aria-pressed="true"]::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 4px; height: 3px; border-radius: 2px; background: var(--lamp); }
.modes :is(button, a):disabled { opacity: 0.4; cursor: not-allowed; }
.sub-modes, .quick-opts { justify-content: safe center; padding-block: 2px; margin-inline: 0; }
.sub-modes .chip, .quick-opts .chip { min-height: 38px; }
.quick-opts .chip--small { min-height: 32px; font-size: var(--step--1); opacity: 0.85; }

/* Tuỳ chỉnh: what is switched on, each with a way to take it off, and the one Xinh slider. It shows in place of the
   plain first screen's quiet, the tabs coming back under it. */
.app:not([data-view="custom"]) :is(.custom-head, .tabs) { display: none; }
.custom-head { display: grid; gap: 0; padding-block: 2px; }
.on-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.on-row__label { flex: none; font-size: var(--step--1); color: var(--ink-3); }
.on-chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; min-width: 0; }
.on-chips::-webkit-scrollbar { display: none; }
.on-chips .chip { flex: none; min-height: 36px; padding: 0 var(--space-2) 0 var(--space-3); background: var(--ink); color: var(--bg); font-weight: 700; }
.on-chips .chip .ico { width: 16px; height: 16px; }
.on-chips:empty::before { content: "chưa bật gì"; font-size: var(--step--1); color: var(--ink-3); }
.xinh { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--space-2); }
.xinh__label { font: 700 var(--step--1) / 1 var(--font-round); color: var(--ink); }
.xinh__value { min-width: 2.2em; text-align: right; font-size: var(--step--1); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.xinh__hint { margin: 0; font-size: 12px; line-height: 1.3; color: var(--ink-3); }
.xinh__hint:empty { display: none; }
.xinh .linkbtn { min-height: 44px; }

/* Beside the shutter: the photo library on the left, Tuỳ chỉnh on the right. */
.side-btn {
  position: relative; z-index: 1; align-self: center; justify-self: center; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%;
  background: var(--surface-2); color: var(--ink); font: 700 12px / 1.1 var(--font-round);
}
.side-btn .ico { width: 24px; height: 24px; }
.side-btn--text { width: 64px; height: 44px; border-radius: 999px; background: none; color: var(--ink-2); }
.side-btn--text[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.mode-opts { display: grid; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.mode-opts .chips { margin-inline: calc(var(--space-2) * -1); padding-inline: var(--space-2); }
.mode-opts__row { justify-content: safe center; }
.mode-opts__note { margin: 0; font-size: var(--step--1); color: var(--ink-3); text-align: center; text-wrap: balance; }
.more-tools { display: grid; gap: 2px; }
.menu-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 48px; padding: 0 var(--space-3); border: 0; border-radius: 14px; background: none; color: var(--ink-2); font-weight: 600; font-size: var(--step--1); text-align: left; }
.menu-row:hover { background: var(--surface-2); }
.menu-row[aria-pressed="true"] { color: var(--ink); }
.menu-row[aria-pressed="true"]::after { content: "bật"; margin-left: auto; padding: 2px 10px; border-radius: 999px; background: var(--lamp); color: var(--lamp-ink); font-size: 12px; font-weight: 700; }

/* A phone on its side (camera.css): the tabs and the ring at the bottom of the right column, inside it (in portrait
   they reach 8px out to the screen's edges; here that would take the 8px between them and the picture). The two menus
   open in that column, under its bar, and scroll inside the screen's height when they are taller. */
@media (orientation: landscape) and (max-height: 500px) {
  .controls { grid-area: 3 / 3; }
  .tabs, .lens { margin-inline: 0; }
  .menu { grid-column: 3; grid-row: 1 / -1; top: 50px; max-height: calc(100% - 58px); overflow-y: auto; overscroll-behavior: contain; }
  /* The adjust panel in the column (camera.css): its note is the first thing to go when the column is short. */
  .stage-dock[data-fit~="note"] .adjust__hint { display: none; }
}