/* The camera's side bar of tools (js/camrail.js), Sounds (js/camsounds.js), Hands free
   (js/handsfree.js) and Selfie settings (js/selfiesettings.js).
   Closed: the most used tools and ⌄. Open: every tool with its name to its left, then ^. */

/* closed: only the most used, and any other tool while it's on */
.cam-rail.cr:not(.open) > [data-rail-extra]:not(.on) { display: none; }
.cam-rail.cr > .ibtn { flex: 0 0 auto; }
/* (camera.css keeps Grid under ⌄ even while it's on: on the side bar a tool that's on shows) */
.cam-rail.cr:not(.open) > #gridBtn.on { display: grid; }

/* the names: white on a soft dark pill, readable over snow, sky or a white wall */
.cam-rail.cr .ibtn[data-label]::before {
  padding: 5px 9px; border-radius: 999px; margin-right: 4px;
  background: rgba(0, 0, 0, .34);
  font-size: 13px; letter-spacing: .01em;
  transform: translate(6px, -50%);
  transition: opacity .16s ease, transform .2s var(--ease-out, ease);
}
.cam-rail.cr.open .ibtn[data-label]::before { transform: translate(0, -50%); }
/* (a tool that's on says so in yellow, beside its yellow icon) */
.cam-rail.cr.open .ibtn.on[data-label]::before { color: var(--accent, #ffcf24); }

/* opening: the tools come down one after another, quickly */
.cam-rail.cr.open > .ibtn[data-rail-extra] { animation: cr-in .22s var(--ease-out, ease) both; animation-delay: calc(var(--cr-i, 0) * 16ms); }
@keyframes cr-in { from { opacity: 0; transform: translateY(-8px) scale(.9); } to { opacity: 1; transform: none; } }
.cam-rail.cr .ibtn.more svg { transition: transform .22s var(--ease-out, ease); }
@media (prefers-reduced-motion: reduce) {
  .cam-rail.cr.open > .ibtn[data-rail-extra] { animation: none; }
  .cam-rail.cr .ibtn[data-label]::before { transition: none; transform: translate(0, -50%); }
  .cam-rail.cr .ibtn.more svg { transition: none; }
}
/* the open list never runs over the shutter row (on any phone: a short one like an iPhone SE, 667 tall,
   or a list grown long with Green screen, Dual camera and Recent): it scrolls above it instead, ^
   always at the bottom of what shows. The box reaches left over the names (so they aren't cut off).
   It takes touches itself: an iPhone won't scroll a list that lets touches through (pointer-events:
   none), so the bottom tools couldn't be reached. (Short phones: the tools closer together too.) */
.cam-rail.cr.open {
  max-height: calc(100vh - 290px - var(--safe-t, 0px) - var(--safe-b, 0px));
  max-height: calc(100dvh - 290px - var(--safe-t, 0px) - var(--safe-b, 0px));
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-left: 170px; margin-left: -170px; pointer-events: auto;
}
.cam-rail.cr.open > * { pointer-events: auto; }
/* ^ stays at the bottom of what shows, the rest scrolling up under it */
.cam-rail.cr.open > #moreBtn { position: sticky; bottom: 0; z-index: 1; background: rgba(0, 0, 0, .38); }
@media (max-height: 740px) {
  .cam-rail.cr.open { gap: 2px; }
}
.cam-rail.cr.open::-webkit-scrollbar { display: none; }

/* Hands free: a small yellow 3 when it counts down first */
.ibtn.cr-tool .hf-n {
  position: absolute; right: 1px; bottom: 1px; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 3px;
  background: var(--accent, #ffcf24); color: #111; font-size: 10.5px; font-weight: 800; display: grid; place-items: center;
}

/* Sounds: the sound's name at the top of the camera, × to take it off */
.cs-chip {
  position: absolute; left: 50%; top: calc(var(--safe-t, 0px) + 14px); transform: translateX(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 2px; max-width: 58vw; height: 34px; padding: 0 2px 0 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .42); color: #fff; font: 700 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.cs-chip[hidden] { display: none; }
.cs-chip .cs-ic { width: 16px; height: 16px; flex: 0 0 auto; color: var(--accent, #ffcf24); }
.cs-chip .cs-ic svg { width: 100%; height: 100%; display: block; }
.cs-chip .cs-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 4px; cursor: pointer; }
.cs-chip .cs-x { width: 44px; height: 44px; margin: -5px -4px -5px 0; border: 0; background: transparent; color: #fff; font-size: 20px; line-height: 1; flex: 0 0 auto; }
/* while recording the red time is at the top: the chip steps down under it */
.cs-chip.playing { top: calc(var(--safe-t, 0px) + 84px); }
.cs-chip.playing .cs-x { display: none; }
.cs-chip.playing .cs-ic { animation: cs-pulse 1s ease-in-out infinite; }
@keyframes cs-pulse { 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .cs-chip.playing .cs-ic { animation: none; } }

/* the Sounds list (a sheet: it follows light and dark) */
.cs-sheet .cs-say { margin: 0 0 10px; color: var(--muted, #888); font-size: 14px; }
.cs-sheet .cs-list {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; overflow-y: auto;
  max-height: 46vh;
  max-height: 46dvh;
}
.cs-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px; border: 0; border-radius: 14px;
  background: var(--chip, #f2f2f5); color: var(--fg, #111); text-align: left;
}
.cs-row.on { box-shadow: inset 0 0 0 2px var(--accent, #ffcf24); }
.cs-row .cs-ic { width: 22px; height: 22px; flex: 0 0 auto; }
.cs-row .cs-ic svg { width: 100%; height: 100%; display: block; }
.cs-row .cs-rt { display: flex; flex-direction: column; min-width: 0; }
.cs-row .cs-rt b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-row .cs-rt small { color: var(--muted, #888); font-size: 12.5px; }
.cs-sheet .cs-phone { margin-bottom: 8px; }

/* Selfie settings: a small dark panel beside the tools */
.ss-panel {
  position: absolute; right: 60px; top: calc(var(--safe-t, 0px) + 60px); z-index: 6; width: min(280px, calc(100vw - 80px));
  padding: 6px 4px 10px; border-radius: 18px; background: #16161a; color: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45); font: 15px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  animation: ss-in .18s var(--ease-out, ease) both;
}
@keyframes ss-in { from { opacity: 0; transform: translateX(8px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ss-panel { animation: none; } }
.ss-panel:focus { outline: none; }
.ss-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 0 12px; }
.ss-head b { font-size: 15px; }
.ss-x { width: 44px; height: 44px; border: 0; background: transparent; color: #fff; font-size: 22px; line-height: 1; }
.ss-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 6px 12px;
  border: 0; border-radius: 12px; background: transparent; color: #fff; text-align: left;
}
.ss-row:active { background: rgba(255, 255, 255, .08); }
.ss-sw { position: relative; width: 44px; height: 26px; border-radius: 13px; background: rgba(255, 255, 255, .28); flex: 0 0 auto; transition: background .15s; }
.ss-sw i { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s var(--ease-out, ease); }
.ss-row[aria-checked="true"] .ss-sw { background: var(--ok, #1fbf6a); }
.ss-row[aria-checked="true"] .ss-sw i { transform: translateX(18px); }
@media (prefers-reduced-motion: reduce) { .ss-sw, .ss-sw i { transition: none; } }
.ss-tones { display: flex; gap: 8px; padding: 6px 12px 2px; }
.ss-tone {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, .2); background: transparent; color: #fff; font-weight: 700;
}
.ss-tone[aria-checked="true"] { border-color: var(--accent, #ffcf24); }
.ss-tone i { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); }
.ss-warm i { background: #fff3dc; }
.ss-white i { background: #ffffff; }
.ss-hint { margin: 8px 12px 0; color: #b9b9c0; font-size: 12.5px; }

/* the front flash's colour (app.css draws it; warm is its usual) */
.front-flash[data-tone="white"] { background: #ffffff; }
.front-flash[data-tone="warm"] { background: #fff3dc; }
.front-flash.on.ring[data-tone="white"] { background: transparent; box-shadow: inset 0 0 0 34px #ffffff, inset 0 0 90px 70px rgba(255, 255, 255, .85); }
.front-flash.on.ring[data-tone="warm"] { background: transparent; box-shadow: inset 0 0 0 34px #fff3dc, inset 0 0 90px 70px rgba(255, 243, 220, .85); }
.front-flash.ss-peek { transition-duration: .08s; }