/* =============================================================
   story-creation.css — Modal de criação de Story (editor).
   Prefixo: sc-  · usa tokens de tokens.css.
   ============================================================= */

/* Fontes customizadas do editor */
@font-face { font-family: 'Baby Azalea';        src: url('../fonts/Baby Azalea.ttf') format('truetype');             font-display: swap; }
@font-face { font-family: 'Bartonis One Demo';  src: url('../fonts/Bartonis One Demo.otf') format('opentype');       font-display: swap; }
@font-face { font-family: 'Broughton';          src: url('../fonts/Broughton.ttf') format('truetype');               font-display: swap; }
@font-face { font-family: 'Hadrey';             src: url('../fonts/Hadrey.otf') format('opentype');                  font-display: swap; }
@font-face { font-family: 'QiduwyPesonaluse';   src: url('../fonts/QiduwyPesonaluse.otf') format('opentype');        font-display: swap; }
@font-face { font-family: 'SoundingScript Free';src: url('../fonts/SoundingScript Free.ttf') format('truetype');     font-display: swap; }

.sc-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  background: rgba(8, 6, 4, .96);
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}
.sc-overlay[hidden] { display: none; }

.sc-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-close:hover { background: rgba(255, 255, 255, .14); }

/* Palco: coluna — preview (flex:1) + área inferior (botões + volumes) */
.sc-stage {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 10px 10px 0;
  min-height: 0;
}

/* Menu lateral esquerdo (vertical) */
.sc-side-menu {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 0 0 auto;
}
.sc-tool {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--gold-border, rgba(212, 160, 23, .4));
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.sc-tool:hover { background: rgba(255, 255, 255, .14); }
.sc-tool:active { transform: scale(.94); }
.sc-tool-label {
  display: block;
  font-size: .58rem;
  font-weight: 700;
  margin-top: 2px;
}

/* Quadro de preview — cresce para ocupar o espaço disponível acima da área inferior */
.sc-preview {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: 9 / 16;
  max-width: 78vw;
  background: #000;
  border: 2px solid var(--gold, #d4a017);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  touch-action: none;
}
.sc-preview > video,
.sc-preview > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  z-index: 1; /* abaixo dos overlays (z-index:5) e do caret (z-index:4) */
}
.sc-preview-vazio {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  color: rgba(255, 255, 255, .55);
  font-size: .9rem;
}

/* Indicador "Processando…" enquanto o story é queimado/comprimido */
.sc-processing {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.sc-processing[hidden] { display: none; }

/* Cursor piscando sobre a mídia enquanto o input está focado */
.sc-text-caret {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 28px;
  background: #fff;
  transform: translate(-50%, -50%);
  z-index: 4;
  animation: sc-caret-blink 1s step-end infinite;
  pointer-events: none;
}
.sc-text-caret[hidden] { display: none; }
@keyframes sc-caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Overlays arrastáveis sobre a mídia */
.sc-overlay-item {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  transform-origin: center;
  cursor: grab;
  touch-action: none;
}
.sc-overlay-item:active { cursor: grabbing; }
.sc-overlay-texto {
  color: #fff;
  font-family: var(--font, sans-serif);
  font-weight: 800;
  font-size: 1.4rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
  padding: 2px 6px;
  /* Quebra linha ao chegar a 5px da borda do preview */
  max-width: calc(100% - 10px);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}
.sc-overlay-emoji {
  font-size: 2.2rem;
  line-height: 1;
  white-space: nowrap;
}
/* Pré-visualização do texto conforme o usuário digita */
.sc-live-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  color: #fff;
  font-weight: 800;
  font-size: 1.4rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
  padding: 2px 6px;
  text-align: center;
  pointer-events: none;
  max-width: calc(100% - 10px);
  white-space: pre-wrap;
  word-break: break-word;
}
.sc-live-text[hidden] { display: none; }

.sc-music-copyright-overlay {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-preview-overlay, 60);
  pointer-events: none;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .54);
  color: rgba(255, 255, 255, .92);
  font-size: .66rem;
  line-height: 1.25;
  text-align: center;
  white-space: pre-line;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .85);
}

/* Barra de texto ABAIXO do preview (extras + input + enviar dentro) */
.sc-text-bar {
  flex: 0 0 auto;
  padding: 4px 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Linha de cores + botão de fonte acima do input */
.sc-text-extras {
  width: min(92vw, 460px);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sc-tcor-row {
  display: flex;
  gap: 5px;
  flex: 1 1 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sc-tcor-btn {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .18);
  cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.sc-tcor-btn.is-sel {
  border-color: #fff;
  transform: scale(1.25);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .5);
}
.sc-tfont-btn {
  flex: 0 0 auto;
  min-width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: background .15s;
}
.sc-tfont-btn:hover { background: rgba(255, 255, 255, .16); }
.sc-text-wrap {
  position: relative;
  width: min(92vw, 460px);
}
.sc-text-input {
  width: 100%;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  padding: 0 46px 0 14px;
  outline: none;
  font-size: .95rem;
}
.sc-text-input::placeholder { color: rgba(255, 255, 255, .5); }
.sc-text-send {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--gold, #d4a017);
  color: #1a1208;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-text-send:disabled { opacity: .4; cursor: default; }

/* Ações inferiores */
.sc-bottom-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding: 8px 14px calc(12px + env(safe-area-inset-bottom));
}
.sc-btn {
  flex: 1;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--gold-border, rgba(212, 160, 23, .4));
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.sc-btn:active { transform: scale(.98); }
.sc-btn--primario {
  background: var(--gold, #d4a017);
  border-color: var(--gold, #d4a017);
  color: #1a1208;
}
.sc-btn:disabled { opacity: .5; cursor: default; }

/* Sub-modal de emojis */
.sc-emoji-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  max-height: 46%;
  overflow-y: auto;
  background: rgba(18, 14, 10, .98);
  border-top: 1px solid var(--gold-border, rgba(212, 160, 23, .4));
  border-radius: 16px 16px 0 0;
  padding: 14px 14px calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sc-emoji-sheet[hidden] { display: none; }
.sc-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
}
.sc-sheet-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-sheet-close:hover { background: rgba(255, 255, 255, .14); }
.sc-emoji-title {
  font-weight: 800;
  font-size: .95rem;
  color: var(--gold, #d4a017);
}
.sc-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
}
.sc-emoji-btn {
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 1.6rem;
  cursor: pointer;
}
.sc-emoji-btn:hover { background: rgba(255, 255, 255, .1); }

/* Sub-modal de músicas — cobre tela toda, acima de text-bar e bottom-actions */
.sc-music-sheet {
  position: fixed;
  inset: 0;
  z-index: 9100;
  overflow: hidden;
  background: rgba(18, 14, 10, .98);
  border-top: none;
  border-radius: 0;
  padding: 14px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sc-music-sheet[hidden] { display: none; }
.sc-music-title {
  font-weight: 800;
  font-size: .95rem;
  color: var(--gold, #d4a017);
}
.sc-music-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  padding: 10px 12px;
  cursor: pointer;
}
.sc-music-item:hover { background: rgba(255, 255, 255, .12); }
.sc-music-item.is-sel {
  background: rgba(212, 160, 23, .22);
  outline: 1px solid var(--gold, #d4a017);
}
.sc-music-nome    { font-weight: 700; font-size: .9rem; }
.sc-music-artista { font-size: .72rem; color: rgba(255, 255, 255, .6); }

/* Busca de música — estilo inpustyle adaptado para fundo escuro */
.sc-music-search {
  width: 100%;
  min-height: 42px;
  padding: 10px 2px 8px;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid rgba(255, 255, 255, .3);
  border-radius: 0;
  color: #fff;
  font-size: .9rem;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 4px;
  transition: border-color .18s;
}
.sc-music-search:focus { border-bottom-color: var(--gold, #d4a017); }
.sc-music-search::placeholder { color: rgba(255, 255, 255, .45); }

/* Controle de volume da música (dentro do sheet) */
.sc-music-vol-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0 6px;
}
.sc-music-vol-icon { font-size: 1rem; flex: 0 0 auto; color: rgba(255, 255, 255, .7); }
.sc-music-vol-range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  height: 18px;
  background: transparent;
  cursor: pointer;
  outline: none;
  border: none;
  --vol-pct: 70%;
}
/* Chrome/Safari — traço com gradiente controlado por --vol-pct */
.sc-music-vol-range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    #d4a017 var(--vol-pct, 70%),
    rgba(111, 69, 41, .5) var(--vol-pct, 70%)
  );
}
.sc-music-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #d4a017;
  margin-top: -5.5px;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
/* Firefox — track marrom + progress dourado nativos */
.sc-music-vol-range::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: rgba(111, 69, 41, .5);
  border: none;
}
.sc-music-vol-range::-moz-range-progress {
  height: 3px;
  border-radius: 2px;
  background: #d4a017;
}
.sc-music-vol-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #d4a017;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* Chips de gênero (rolagem horizontal) */
.sc-music-genres {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 0;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}
.sc-music-genre {
  flex: 0 0 auto;
  border: none;
  border-bottom: 1.5px solid rgba(255, 255, 255, .25);
  background: transparent;
  color: rgba(255, 255, 255, .7);
  border-radius: 0;
  padding: 0 6px 2px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.sc-music-genre.is-sel {
  color: var(--gold, #d4a017);
  border-bottom-color: var(--gold, #d4a017);
}

/* Lista de músicas — posição fixa no flex; só o conteúdo interno rola */
.sc-music-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-content: start;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.sc-music-empty { color: rgba(255, 255, 255, .55); font-size: .85rem; padding: 14px 4px; text-align: center; }

/* Item: linha (play | info | +); só border-bottom */
.sc-music-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  border-radius: 0;
  background: transparent;
  color: #fff;
  padding: 8px 4px;
}
.sc-music-item.is-sel { border-bottom-color: rgba(212, 160, 23, .4); }

.sc-music-play {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, .8);
  font-size: .9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.sc-music-play.is-playing { background: var(--gold, #d4a017); color: #1a1208; }

/* Info: coluna — linha (nome+time) acima, espectro abaixo */
.sc-music-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sc-music-info-top {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.sc-music-nome {
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
.sc-music-dur { font-size: .72rem; color: rgba(255, 255, 255, .6); }
.sc-music-time {
  display: none;
  font-size: .7rem;
  color: rgba(255, 255, 255, .55);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.sc-music-item:has(.sc-music-play.is-playing) .sc-music-time { display: inline; }

.sc-music-usar {
  flex: 0 0 auto;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, .7);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
}
.sc-music-usar:hover { color: var(--gold, #d4a017); }

/* Espectro de áudio — exatamente abaixo do nome, dentro de sc-music-info */
.sc-music-spectrum {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
  padding: 2px 0 2px;
  overflow: hidden;
}
.sc-music-item:has(.sc-music-play.is-playing) .sc-music-spectrum { display: flex; }
.sc-music-bar {
  width: 3px;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--gold, #d4a017);
  animation: sc-bar-bounce var(--bar-d, .7s) ease-in-out infinite alternate;
}
@keyframes sc-bar-bounce {
  0%   { height: 2px; opacity: .5; }
  100% { height: var(--bar-h, 14px); opacity: 1; }
}
.sc-music-sentinel {
  grid-column: 1 / -1;
  width: 100%;
  height: 1px;
  pointer-events: none;
}

@media (min-width: 720px) {
  .sc-music-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
  .sc-music-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Painel de mix de áudio (aparece ao escolher música) */
.sc-mix {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(18, 14, 10, .9);
  border-top: 1px solid var(--gold-border, rgba(212, 160, 23, .4));
}
.sc-mix[hidden] { display: none; }
.sc-mix-title { font-weight: 800; font-size: .85rem; color: var(--gold, #d4a017); }
.sc-mix-row { display: flex; align-items: center; gap: 10px; }
.sc-mix-row--player { justify-content: flex-start; }
.sc-mix-play {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(212, 160, 23, .45);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.sc-mix-play:hover { background: rgba(212, 160, 23, .2); }
.sc-mix-time {
  color: rgba(255, 255, 255, .72);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}
.sc-mix-row--keep { cursor: pointer; font-size: .85rem; }
.sc-mix-label { flex: 0 0 96px; font-size: .8rem; color: rgba(255, 255, 255, .8); }
/* Igual aos demais sliders de volume: traço marrom + ponto dourado */
.sc-mix-range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  height: 18px;
  background: transparent;
  cursor: pointer;
  outline: none;
  border: none;
  --vol-pct: 100%;
}
.sc-mix-range:disabled { opacity: .4; }
.sc-mix-range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    #d4a017 var(--vol-pct, 100%),
    rgba(111, 69, 41, .5) var(--vol-pct, 100%)
  );
}
.sc-mix-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #d4a017;
  margin-top: -5.5px;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.sc-mix-range::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(111, 69, 41, .5); border: none; }
.sc-mix-range::-moz-range-progress { height: 3px; border-radius: 2px; background: #d4a017; }
.sc-mix-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #d4a017; cursor: pointer; border: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }

/* Câmera in-app (gravação com troca de câmera, zoom pinch, qualidade e duração) */
.sc-camera {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sc-camera-live {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  transition: transform .08s linear;
}

/* Botão trocar câmera (frente ↔ traseira) */
.sc-camera-flip {
  position: absolute;
  bottom: calc(28px + env(safe-area-inset-bottom));
  right: 28px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sc-camera-flip:active { opacity: .65; }

/* Painéis de opção (qualidade e duração) */
.sc-camera-opts {
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 2;
}
.sc-camera-dur { top: 96px; }

.sc-camera-opt-btn {
  padding: 4px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(0, 0, 0, .58);
  color: rgba(255, 255, 255, .78);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.sc-camera-opt-btn.is-active {
  background: rgba(212, 160, 23, .88);
  color: #fff;
  border-color: transparent;
}
.sc-camera-timer {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  padding: 5px 12px;
  border-radius: 999px;
}
.sc-camera-rec {
  position: absolute;
  bottom: calc(28px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: #ff3b30;
  cursor: pointer;
  transition: transform .15s;
}
.sc-camera-rec:active { transform: translateX(-50%) scale(.94); }
/* Gravando: quadrado branco (indica "parar") */
.sc-camera-rec.is-rec::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: #fff;
  transform: translate(-50%, -50%);
}
.sc-camera-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

/* Ferramentas acima do preview (Música, Emoji, Frases) */
.sc-preview-top-tools {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 6px 0 4px;
}
.sc-preview-ptool {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background .15s;
}
.sc-preview-ptool:hover { background: rgba(255, 255, 255, .15); }

/* Área inferior do palco (volumes + botões de mídia) */
.sc-stage-lower {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Volumes de preview: bloco no fluxo normal, acima dos botões de mídia */
.sc-stage-volumes {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(8, 6, 4, .75);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.sc-stage-volumes[hidden] { display: none; }
.sc-vol-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sc-vol-row[hidden] { display: none; }
.sc-vol-icon { font-size: .9rem; flex: 0 0 auto; }
.sc-vol-label { font-size: .72rem; color: rgba(255, 255, 255, .6); flex: 0 0 38px; }
.sc-vol-range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  height: 18px;
  background: transparent;
  cursor: pointer;
  outline: none;
  border: none;
  --vol-pct: 100%;
}
.sc-vol-range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    #d4a017 var(--vol-pct, 100%),
    rgba(111, 69, 41, .5) var(--vol-pct, 100%)
  );
}
.sc-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #d4a017;
  margin-top: -5.5px;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.sc-vol-range::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(111, 69, 41, .5); border: none; }
.sc-vol-range::-moz-range-progress { height: 3px; border-radius: 2px; background: #d4a017; }
.sc-vol-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #d4a017; cursor: pointer; border: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }

/* Botões de mídia (Upload, Câmera) abaixo do preview */
.sc-media-btns {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 10px 14px calc(8px + env(safe-area-inset-bottom));
}
.sc-media-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1px;
  transition: background .15s;
}
.sc-media-btn:hover { background: rgba(255, 255, 255, .16); }
.sc-media-btn-label {
  font-size: .5rem;
  font-weight: 700;
  line-height: 1;
}

/* Painel de frases curtas — cobre sc-text-bar e sc-bottom-actions */
.sc-frase-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  max-height: 55%;
  overflow-y: auto;
  background: rgba(18, 14, 10, .98);
  border-top: 1px solid var(--gold-border, rgba(212, 160, 23, .4));
  border-radius: 16px 16px 0 0;
  padding: 14px 14px calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sc-frase-sheet[hidden] { display: none; }
.sc-frase-title {
  font-weight: 800;
  font-size: .95rem;
  color: var(--gold, #d4a017);
}
.sc-frase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}
.sc-frase-btn {
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: .82rem;
  padding: 8px 10px;
  cursor: pointer;
  text-align: center;
  transition: background .15s;
}
.sc-frase-btn:hover { background: rgba(255, 255, 255, .14); }

/* ── Seleção de overlay (long press) ─────────────────────────── */

.sc-ov-sel {
  position: absolute;
  inset: -8px;
  border: 1.5px dashed rgba(255, 255, 255, .8);
  border-radius: 6px;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 1;
}

/* Alças de redimensionamento (diagonais) — compactas para não cobrir o conteúdo */
.sc-ov-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, .4);
  border-radius: 3px;
  pointer-events: all;
  touch-action: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.sc-ov-corner--tl { top: -7px;     left: -7px;    cursor: nwse-resize; }
.sc-ov-corner--tr { top: -7px;     right: -7px;   cursor: nesw-resize; }
.sc-ov-corner--bl { bottom: -7px;  left: -7px;    cursor: nesw-resize; }
.sc-ov-corner--br { bottom: -7px;  right: -7px;   cursor: nwse-resize; }

/* Botão apagar — pequeno, canto superior direito (emoji/default) */
.sc-ov-del {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ff3b30;
  border: 1.5px solid #fff;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  touch-action: none;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
}

/* Barra de ações do texto selecionado: [A-][×][A+] */
.sc-ov-barra-texto {
  position: absolute;
  top: -44px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(6px);
  border-radius: 20px;
  padding: 5px 10px;
  pointer-events: all;
  touch-action: none;
  z-index: 3;
  white-space: nowrap;
}

/* Botões A- e A+ dentro da barra */
.sc-ov-size {
  min-width: 32px;
  height: 28px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .15);
  border: 1.5px solid rgba(255, 255, 255, .45);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 6px;
  pointer-events: all;
  touch-action: none;
}
.sc-ov-size:active { background: rgba(255, 255, 255, .28); }

/* Versão inline do botão apagar dentro da barra de texto */
.sc-ov-del--bar {
  position: static;
  top: auto;
  right: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 13px;
}