/* ---------- Gravar vídeo: botão no topo, tela de opções, gravação e vídeo pronto ---------- */

/* botão de câmera ao lado do ☰ (mesmo estilo da casinha); gravando vira um botão vermelho de parar */
.vidbtn svg { width: 19px; height: 19px; }
.vidbtn.stop { border-color: #e8392c; background: rgba(232, 57, 44, .12); box-shadow: 0 0 0 3px rgba(232, 57, 44, .18); animation: vidpulse 1.6s ease-in-out infinite; }
.vidbtn.stop svg { display: none; }
.vidbtn.stop::after { content: ""; width: 11px; height: 11px; border-radius: 3px; background: #e8392c; }
@keyframes vidpulse { 50% { box-shadow: 0 0 0 5px rgba(232, 57, 44, .1); } }

/* celular em pé: topo um pouco mais compacto para caber casinha | DAW PEDAL PAINEL | câmera ☰ */
@media (max-width: 480px) {
  .topbar { gap: 6px; padding: 7px 10px; }
  .tbright { gap: 6px; }
  .topbar .tbico { width: 34px; height: 34px; }
  .topbar .tbico svg { width: 18px; height: 18px; }
  .pgnav button { padding: 10px 8px 13px; letter-spacing: .14em; text-indent: .14em; }
}
@media (max-width: 380px) {
  .topbar { padding: 6px 8px; }
  .pgnav button { padding: 10px 5px 13px; letter-spacing: .1em; text-indent: .1em; }
}
@media (max-width: 340px) {
  .topbar { gap: 4px; }
  .tbright { gap: 4px; }
  .topbar .tbico { width: 31px; height: 31px; }
  .topbar .tbico svg { width: 16px; height: 16px; }
  .pgnav button { padding: 10px 3px 13px; font-size: 10px; letter-spacing: .08em; text-indent: .08em; }
}

/* ----- telas por cima do app (opções e vídeo pronto) ----- */
.vsheet { position: fixed; inset: 0; z-index: 14; background: #000b; display: flex; align-items: center; justify-content: center; padding: 16px; }
.vsheet[hidden] { display: none; }
.vbox {
  width: min(440px, 100%); max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 6px 18px 18px; box-shadow: 0 20px 60px #000c;
  display: flex; flex-direction: column; gap: 12px; color: var(--txt);
}
.vbox > * { flex-shrink: 0; }
.vhead { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; }
.vhead b { font-size: 17px; font-weight: 600; letter-spacing: .01em; }
.vx { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--txt); cursor: pointer; font-size: 13px; }
.vx:hover { border-color: #666; }

/* prévia da câmera no formato escolhido */
.vprev { display: flex; justify-content: center; align-items: center; height: min(38vh, 300px); }
.vframe { position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; border-radius: 12px; overflow: hidden; background: #0d0e11; border: 1px solid #ffffff1a; transition: aspect-ratio .3s; }
.vframe[data-fmt="h"] { aspect-ratio: 16 / 9; height: auto; width: 100%; }
.vframe[data-fmt="q"] { aspect-ratio: 1 / 1; }
.vframe video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vframe.mirror video { transform: scaleX(-1); }
.vframe .vlogo { position: absolute; left: 4.5%; bottom: 4.5%; width: 34%; padding: 2.4% 3%; box-sizing: border-box; background: #d9362b; border-radius: 999px; display: none; }
.vframe.logo .vlogo { display: block; opacity: .6; } /* igual ao vídeo: selo um pouco transparente */
.vnocam { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(#16171b, #0a0a0c); padding: 14px; text-align: center; }
.vnocam img { width: 62%; max-width: 220px; }
.vnocam span { font-size: 11px; color: #8b909c; line-height: 1.4; }
.vframe.nocam .vnocam { display: flex; }
.vframe.nocam video { display: none; }
.vmsg { position: absolute; left: 10px; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; color: #c8ccd4; text-align: center; line-height: 1.45; pointer-events: none; }
.vframe.nocam .vmsg { display: none; }
.vprev .vplay { max-width: 100%; max-height: 100%; border-radius: 12px; background: #000; }

/* opções no estilo "Linha": só a escolhida acende, traço vermelho fino embaixo */
.vopts { display: flex; flex-direction: column; }
.vrow { display: grid; grid-template-columns: 70px 1fr; align-items: center; border-top: 1px solid var(--line); min-height: 46px; }
.vrow:first-child { border-top: none; }
.vrow[hidden] { display: none; }
.vk { font-size: 12px; color: var(--dim); }
.vseg { --i: 0; --n: 3; position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.vseg button {
  border: none; background: transparent; color: #8b909c; font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-indent: .14em; text-transform: uppercase;
  padding: 13px 2px 15px; cursor: pointer; transition: color .25s; white-space: nowrap;
}
.vseg button:not(.on):hover { color: #c3c7cf; }
.vseg button.on { color: #fff; }
.vseg .ind { position: absolute; left: 0; bottom: 4px; width: calc(100% / var(--n)); height: 2px; pointer-events: none; transform: translateX(calc(var(--i) * 100%)); transition: transform .38s cubic-bezier(.22, 1, .36, 1); }
.vseg .ind::after { content: ""; position: absolute; left: 50%; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: #e8392c; box-shadow: 0 0 8px #e8392c88; }
.vdev { width: 100%; background: var(--panel2); color: var(--txt); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; }

.vnote { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--dim); }
.vnote b { display: block; margin-top: 6px; font-weight: 600; color: var(--txt); }
.vinfo { margin: 0; text-align: center; font: 600 12px/1 ui-monospace, Menlo, monospace; letter-spacing: .06em; color: var(--dim); }
.vgo, .vsec {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border-radius: 999px; cursor: pointer;
  font-weight: 600; font-size: 12px; letter-spacing: .2em; text-indent: .2em; text-transform: uppercase;
}
.vgo { border: none; background: #e8392c; color: #fff; box-shadow: 0 6px 20px #e8392c44; }
.vgo:hover { background: #f04436; }
.vgo i { width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.vgo i.sh { width: auto; height: auto; background: none; }
.vgo i.sh::before { content: "↑"; font-style: normal; font-size: 15px; letter-spacing: 0; }
.vsec { border: 1px solid var(--line); background: transparent; color: var(--txt); }
.vsec:hover { border-color: #666; }
.vdel { color: var(--dim); }
.vacts { display: flex; flex-direction: column; gap: 8px; }
.vacts [hidden] { display: none; }

/* ----- gravando: tempo logo abaixo do topo, miniatura da câmera e borda vermelha fina ----- */
.vidtag {
  position: fixed; top: calc(env(safe-area-inset-top) + 58px); left: 50%; transform: translateX(-50%); z-index: 10;
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px; border-radius: 15px; pointer-events: none;
  background: rgba(16, 16, 18, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(232, 57, 44, .7);
  color: #fff; font: 600 12px/1 ui-monospace, Menlo, monospace; letter-spacing: .08em; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 6px 18px #0006;
}
.vidtag[hidden] { display: none; }
.vidtag i { width: 8px; height: 8px; border-radius: 50%; background: #e8392c; box-shadow: 0 0 8px #e8392c; animation: recblink 1s steps(1) infinite; }
.vidtag small { font: 600 9.5px/1 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: .2em; color: #ff8a80; }
.vidcam {
  position: fixed; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 20px); z-index: 10; width: 96px; aspect-ratio: 9 / 16;
  border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 8px 24px #0008; background: #0d0e11;
  touch-action: none; cursor: grab;
}
.vidcam[hidden] { display: none; }
.vidcam.f-h { width: 160px; aspect-ratio: 16 / 9; }
.vidcam.f-q { width: 110px; aspect-ratio: 1 / 1; }
.vidcam video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.vidcam.mirror video { transform: scaleX(-1); }
/* trocar câmera (frente/trás) enquanto grava */
.vflip { position: absolute; right: 6px; bottom: 6px; width: 34px; height: 34px; border-radius: 50%; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(16, 16, 18, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .3); color: #fff; }
.vflip[hidden] { display: none; }
.vflip svg { width: 18px; height: 18px; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.vidcam.flipping .vflip svg { transform: rotate(180deg); }
.vidcam.flipping video { opacity: .55; transition: opacity .2s; }
@media (max-height: 500px) { .vidcam { width: 66px; } .vidcam.f-h { width: 124px; } .vidcam.f-q { width: 80px; } .vflip { width: 28px; height: 28px; right: 4px; bottom: 4px; } .vflip svg { width: 15px; height: 15px; } }
.vidframe { position: fixed; inset: 0; z-index: 21; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(232, 57, 44, .85); }
.vidframe[hidden] { display: none; }
body.covered .vidtag, body.covered .vidcam, body.covered .vidframe { visibility: hidden; }

/* celular deitado: prévia à esquerda, opções à direita (cabe sem rolar) */
@media (orientation: landscape) and (max-height: 560px) {
  .vsheet { padding: 10px; }
  .vbox { width: min(780px, 100%); display: grid; grid-template-columns: minmax(0, 44%) 1fr; grid-auto-rows: min-content; column-gap: 20px; row-gap: 8px; align-content: start; padding: 4px 16px 14px; }
  .vhead { grid-column: 1 / -1; padding-top: 6px; }
  .vbox > .vprev { grid-column: 1; grid-row: 2 / span 3; height: calc(100dvh - 92px); max-height: 300px; align-self: start; }
  .vbox > :not(.vhead):not(.vprev) { grid-column: 2; }
  .vrow { min-height: 40px; }
  .vseg button { padding: 11px 2px 13px; }
  .vnote { font-size: 11px; }
  .vgo, .vsec { min-height: 42px; }
  .vacts { gap: 6px; }
}

/* tema claro */
html.light .vsheet { background: #0007; }
html.light .vbox { box-shadow: 0 20px 60px #0004; }
html.light .vseg button { color: #8a8f99; }
html.light .vseg button:not(.on):hover { color: #4a4f59; }
html.light .vseg button.on { color: #121212; }
html.light .vframe { border-color: #0000001a; }
html.light .vsec:hover { border-color: #999; }