/* Camera-first presentation. Only the existing source video is composited behind UI. */
.app {
  --teal:#ff705e;
  --muted:#d2d6d9;
  --line:#ffffff30;
  position:relative;
  width:100%;
  border:0;
  /* The backdrop reaches the viewport edges; keep the controls comfortably narrow. */
  padding-inline:max(12px, calc((100vw - 406px) / 2));
  isolation:isolate;
  background:#090c10;
  box-shadow:none;
}
.app>#sourceVideo.camera-backdrop-media,
.app>#cameraBackdropStill.camera-backdrop-media {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.23;
  pointer-events:none;
  user-select:none;
  z-index:-2;
  visibility:hidden;
}
.app[data-mode="camera"]>#sourceVideo,
.app[data-mode="recording"]>#sourceVideo,
.app[data-mode="import-preview"]>#sourceVideo,
.app[data-mode="importing"]>#sourceVideo { visibility:visible; }
.app[data-mode="preview"]>#cameraBackdropStill[src] { visibility:visible; }
.app .topbar { border:0; }
.app .topbar h1 { letter-spacing:-.7px; }
.app .topbar-actions button,
.app .destination-button,
.app .effect-tabs,
.app .inline-adjustments,
.app .preview-tools button,
.app .compare-control button,
.app .zoom-control,
.app .controls .camera-flip {
  background:#0b0e13b8;
  border-color:#ffffff38;
  box-shadow:none;
}
.app .destination-button { border-radius:24px; padding-inline:16px; }
.app .lens { border:1px solid #ffffffb0; box-shadow:0 0 0 1px #080a1030; }
.app .timer { color:#fff; text-shadow:0 1px 4px #000; }
.app .stage { overflow:visible; }
.app .preview-tools { display:none; }
.app[data-mode="preview"] .preview-tools { display:flex; justify-content:center; }
.compare-control { position:absolute; left:0; bottom:0; z-index:6; }
.app .compare-control button {
  width:44px; height:44px; overflow:hidden; border-radius:50%; padding:0;
  font-size:0; border:1px solid var(--line);
}
.app .compare-control button::after { content:'◐'; font-size:23px; color:#fff; }
.compare-control button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.zoom-control { position:absolute; right:0; bottom:0; z-index:7; border:1px solid var(--line); border-radius:24px; }
.app .zoom-control button { min-width:44px; min-height:44px; padding:4px; background:transparent; color:#fff; border:0; border-radius:24px; font-variant-numeric:tabular-nums; }
.zoom-panel { display:flex; flex-direction:column; align-items:center; padding:4px 0 0; position:absolute; bottom:48px; right:-1px; width:46px; background:#0b0e13eb; border:1px solid #ffffff38; border-radius:24px; }
.zoom-panel[hidden] { display:none; }
#zoomInput { writing-mode:vertical-lr; direction:rtl; appearance:auto; width:44px; height:132px; padding:10px; margin:0; accent-color:#fff; touch-action:none; }
.app[data-mode="preview"] .zoom-control,
.app[data-mode="preview"] .compare-control { display:none; }
.app[data-mode="recording"] .compare-control,
.app[data-mode="importing"] .zoom-control,
.app[data-mode="importing"] .compare-control { visibility:hidden; }
.app .effect-strip { border:0; background:transparent; border-radius:16px; padding:0; gap:8px; }
.app .effect-tabs { flex:0 0 44px; min-height:44px; padding:0 4px; border:1px solid var(--line); border-radius:24px; }
.app .effect-tab { min-height:44px; color:#d2d6d9; border:0; }
.app .effect-tab.is-active { color:#fff; background:#ffffff20; border-radius:22px; }
.app #layerCustom { padding:4px; flex:0 0 auto; }
.app .style-row { gap:10px; padding:2px; }
.app #layerCustom .layer-tile {
  flex:0 0 104px; min-width:104px; padding:0 0 5px; gap:5px;
  border:1px solid #ffffff38; border-radius:14px; background:#0b0e13b8;
  overflow:hidden;
}
.app .style-thumbnail { width:100%; height:94px; border-radius:12px 12px 0 0; background:#393b40; }
.app #layerCustom .layer-tile>span:not(.style-thumbnail) { max-width:96px; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app #layerCustom .is-active { border-color:#fff; outline:2px solid #fff; outline-offset:1px; }
.app #layerCustom .is-active .style-thumbnail { outline:none; }
.app .style-thumbnail.has-ring { border:2px solid var(--thumb-ring); }
.app #layerCustom .locked-badge { top:5px; right:5px; bottom:auto; border-radius:5px; background:#17140fea; color:#ffdb83; }
.app .inline-adjustments { border:1px solid var(--line); border-radius:16px; flex:0 0 auto; }
.inline-adjustments>summary { display:flex; gap:8px; align-items:center; min-height:44px; padding:8px 12px; list-style:none; cursor:pointer; font-size:14px; }
.inline-adjustments>summary::-webkit-details-marker { display:none; }
#activeEffectLabel { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff; }
.inline-adjustments>summary>span:nth-child(2) { color:#d2d6d9; }
.inline-adjustments .adjustments { padding:0 12px 10px; border:0; background:transparent; }
.inline-adjustments .adjustments-head>span:first-child { display:none; }
.inline-adjustments .adjustments-head { justify-content:flex-end; }
.inline-adjustments .slider-grid { display:grid; grid-template-columns:1fr; gap:4px; }
.inline-adjustments .slider-row { min-height:52px; }
.inline-adjustments .slider-row input { min-height:44px; accent-color:#ff705e; }
.inline-adjustments .style-actions { padding:0 12px 12px; }
.app .layer-retouch,.app .layer-screen,.app .layer-face,.app .layer-brand { background:#0b0e13d9; border-radius:16px; padding:10px; }
.app .layer-tile:not(#layerCustom .layer-tile),.app .effect-groups button { background:#0b0e13d9; }
.app .status { background:#0b0e13d9; color:#fff; border:0; }
.app .controls { border:0; background:transparent; }
.app .controls .file-control { background:#0b0e13b8; color:#fff; border-radius:18px; }
.app .controls .control.primary { width:78px; height:78px; border:2px solid #fff; background:#0b0e1380; }
.app .controls .control.primary::after { width:62px; height:62px; background:#ff705e; }
.app .controls .control.danger { width:78px; height:78px; border-color:var(--coral); }
.app .controls .control.primary:disabled::after { background:#fff; }
.app .result-actions>.share-button { background:#ff705e; border:0; color:#170d0b; min-height:52px; border-radius:18px; }
.app .result-secondary .mini-button { background:#0b0e13c9; border:1px solid var(--line); }
.app .inline-note { background:#0b0e13b8; color:#e4e7e9; border-radius:10px; }
@media(max-height:700px) {
  .app .style-thumbnail { height:72px; width:100%; }
  .app #layerCustom .layer-tile { flex-basis:92px; min-width:92px; }
  .app .style-row { gap:8px; }
  .app .effect-strip { gap:6px; }
}
@media(max-height:580px) {
  .app .topbar { flex-basis:44px; }
  .app .destination-button { flex-basis:44px; }
  .app .style-thumbnail { height:58px; }
  .app .effect-strip { min-height:138px; }
  .app:has(.destination-button:not([hidden])) .lens { width:140px; }
}

/* Catalogue images are generated once, never rendered by the live camera. */
.app .layer-tile:has(.effect-thumbnail),
.app .retouch-presets button,
.app .brand-chip,
.app .badge-chip {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  position:relative; flex:0 0 96px; min-width:96px; padding:0 0 7px;
  border:1px solid #ffffff38; border-radius:14px; overflow:hidden;
  background:#0b0e13d9; color:#fff; box-shadow:none;
}
.app .effect-thumbnail {
  display:block; width:100%; height:86px; flex-shrink:0;
  border-radius:12px 12px 0 0; overflow:hidden; background:#393b40;
}
.effect-thumbnail img { display:block; width:100%; height:100%; object-fit:cover; }
.app .layer-tile:has(.effect-thumbnail)>span:not(.effect-thumbnail),
.app .retouch-presets button>span:not(.effect-thumbnail),
.app .brand-chip>span:not(.effect-thumbnail),
.app .badge-chip>span:not(.effect-thumbnail) {
  font-size:14px; line-height:18px; max-width:90px; min-height:36px;
  padding:0 3px; display:flex; align-items:center; justify-content:center;
  white-space:normal; overflow-wrap:anywhere; text-align:center;
}
.app .layer-tile:has(.effect-thumbnail)>small { display:none; }
.app .layer-tile:has(.effect-thumbnail).is-active,
.app .retouch-presets button[aria-pressed="true"],
.app .brand-chip.is-active,
.app .badge-chip.is-active { border-color:#fff; outline:2px solid #fff; outline-offset:1px; background:#0b0e13d9; }
.app .layer-tile:has(.effect-thumbnail) .locked-badge { top:5px; right:5px; bottom:auto; border-radius:5px; background:#17140fea; color:#ffdb83; }
.app .layer-tile:has(.effect-thumbnail) .beta-badge { top:5px; left:5px; right:auto; bottom:auto; background:#141c26e8; border-radius:5px; }
.app .retouch-presets { gap:8px; padding:4px; }
.app .retouch-presets button { flex:1 1 0; min-width:0; }
.app .retouch-presets .effect-thumbnail { width:100%; }
.app .brand-style-chips { display:flex; gap:8px; overflow-x:auto; padding:4px; }
.app .badge-row { flex-wrap:wrap; padding:4px; }
.app .badge-row input { flex:1 0 100%; width:100%; min-width:0; }
@media(max-height:700px) {
  .app .effect-thumbnail { height:72px; }
}

.app .effect-groups { margin:4px 0; }
.app #layerTest .effect-list { padding:4px 2px; }
.app .retouch-presets button.is-active { color:#fff; }

.app .style-thumbnail img { object-fit:cover; }

/* Colour controls live with the colour catalogue; saved-style actions stay separate. */
#inlineAdjustments[hidden] { display:none; }
#inlineAdjustments .adjustments { padding:8px 12px; }
#inlineAdjustments .adjustments-head { justify-content:space-between; }
#inlineAdjustments .adjustments-head>span:first-child { display:block; }
#inlineAdjustments #resetAdjustments { min-height:44px; }

/* Keep colour selection and its compact control in place on short phones. */
.app .effect-strip.has-color-controls{display:block;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain}
.has-color-controls #effectTabs,.has-color-controls #effectGroups{flex:0 0 auto;margin:0}
.has-color-controls #layerColor{flex:none;height:120px;min-height:120px;overflow-x:auto;overflow-y:hidden;padding:3px 2px;align-items:stretch}
.has-color-controls #layerColor .layer-tile{height:100%;min-height:64px}
.has-color-controls #layerColor .effect-thumbnail{min-height:0;height:100%;object-fit:cover}
#inlineAdjustments{flex:0 0 auto;position:relative}
#inlineAdjustments .adjustments{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0;padding:4px 8px}
#inlineAdjustments .adjustments-head{grid-column:2;grid-row:1;margin:0;align-self:center}
#inlineAdjustments .adjustments-head>span:first-child{display:none}
#inlineAdjustments .slider-grid{grid-column:1;grid-row:1;min-width:0}
#inlineAdjustments .slider-row{min-height:64px;gap:0;font-size:13px}
#inlineAdjustments .slider-row>span{line-height:20px}
#inlineAdjustments .slider-row input{margin:0;min-width:0;width:100%;height:44px;touch-action:pan-x}
#inlineAdjustments #resetAdjustments{margin-left:8px;max-width:100px;padding:6px 8px;line-height:16px;font-size:12px;min-height:44px}
#inlineAdjustments input:disabled,#inlineAdjustments button:disabled{opacity:.4}
.has-color-controls #layerColor .layer-tile>span:not(.effect-thumbnail){position:absolute;bottom:0;left:0;width:100%;max-width:none;min-height:24px;padding:3px 2px;background:#080b10d9;font-size:12px;line-height:14px}

.compare-control { display:flex; flex-direction:column; gap:8px; }
.app #resetAllButton::after { content:"↺"; }

/* Zoom remains visible and interactive while recording the canvas. */
.zoom-control { display:flex; flex-direction:column; align-items:center; width:46px; background:#0b0e13eb; }
.zoom-panel { position:static; width:44px; padding:0; background:transparent; border:0; }

/* Physical rotation also works in older iOS WebViews without vertical range support. */
.zoom-panel { position:relative; inset:auto; height:132px; flex:0 0 132px; }
#zoomInput { position:absolute; left:50%; top:50%; width:132px; height:44px; padding:10px; writing-mode:horizontal-tb; direction:ltr; transform:translate(-50%,-50%) rotate(-90deg); }

/* Navigation never scrolls underneath the catalogue on short Telegram viewports. */
.tool-navigation { flex:0 0 auto; min-width:0; position:relative; z-index:8; }
.app .tool-navigation .effect-tabs { position:static; }
.app .tool-navigation .effect-groups { flex-wrap:nowrap; margin:4px 0 0; }
.app .tool-navigation .effect-groups button { min-height:44px; padding-inline:4px; }
.app .effect-strip { min-height:64px; }
.app[data-mode="recording"] .tool-navigation,
.app[data-mode="importing"] .tool-navigation { visibility:hidden; pointer-events:none; }
.app[data-mode="preview"] .tool-navigation { display:none; }

.app .topbar .destination-button { flex:0 0 44px; width:44px; height:44px; min-width:44px; padding:0; border-radius:50%; text-align:center; font-size:24px; }
.app .lens,.app:has(.destination-button:not([hidden])) .lens { width:min(100%,300px,var(--fitted-lens-size,300px),max(140px,calc(var(--tg-viewport-stable-height,100svh) - 428px))); }
.zoom-control { --zoom-track:100px; }
.zoom-panel { height:var(--zoom-track); flex-basis:var(--zoom-track); }
#zoomInput { width:calc(var(--zoom-track) - 16px); }
@media(max-height:600px) { .zoom-control { --zoom-track:88px; } }