/* Bancada do Maq: contraste sóbrio, prévia central e trilhas com respiro. */
#tela-editor { --ed-linha: #505050; --ed-texto2: #d0d0cc; padding: 20px 24px 28px; }
#tela-editor .ed-topo { gap: 10px; margin-bottom: 20px; }
#tela-editor #ed-titulo { margin: 0; max-width: min(42vw, 560px); overflow-wrap: anywhere; line-height: 1.4; cursor: text; }
#tela-editor .ed-renomear { margin-right: auto; }
#tela-editor .ed-meio { grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; }
#tela-editor .ed-previa { border: 1px solid #383838; padding: 20px 16px 14px; border-radius: 12px; }
#tela-editor .quadro { height: min(52vh, 560px); border-radius: 4px; }
#tela-editor .inspetor { border: 1px solid #434343; border-radius: 12px; padding: 20px; max-height: calc(52vh + 110px); }
#tela-editor .inspetor h3 { font-size: 19px; margin-bottom: 10px; }
#tela-editor .inspetor h4 { margin: 20px 0 8px; font-size: 15px; }
#tela-editor .inspetor .dica { line-height: 1.6; }
#tela-editor .campo-ed { gap: 8px; margin: 14px 0; }
#tela-editor .campo-ed textarea { min-height: 100px; line-height: 1.6; }
#tela-editor .grupo { margin: 20px 0; gap: 8px; }
#tela-editor .tempos { gap: 12px; }
#tela-editor .ferramentas { margin: 20px 0 12px; gap: 8px; padding: 0 0 8px; }
#tela-editor .ferramentas > .btn { flex-shrink: 0; }
#tela-editor .linha-tempo { border: 1px solid #505050; border-radius: 10px; }
#tela-editor .lt-grade { grid-template-columns: 224px minmax(0, 1fr); }
#tela-editor .lt-canto, #tela-editor .regua { height: 38px; }
#tela-editor .lt-cab, #tela-editor .trilha { height: 76px; border-bottom: 8px solid #171717; }
#tela-editor .lt-cab.video, #tela-editor .trilha.video { height: 88px; }
#tela-editor .lt-cab { padding: 0 10px 0 14px; gap: 8px; }
#tela-editor .lt-cab .nome { line-height: 1.4; }
#tela-editor .lt-cab .nome small { margin-top: 3px; }
#tela-editor .lt-cab .btn { min-height: 44px; min-width: 44px; font-size: 11px; padding: 0 7px; }
#tela-editor .lt-cab input[type="range"] { width: 44px; }
#tela-editor .trilha { background: #242424; }
#tela-editor .trilha:nth-child(odd) { background: #292929; }
#tela-editor .clipe { top: 8px; bottom: 8px; border-radius: 5px; font-size: 13px; padding: 6px 14px; }
#tela-editor .clipe.sel { box-shadow: 0 0 0 2px #111, 0 0 0 4px #fff; }
#tela-editor .clipe.legenda { background: #fff; border-color: #ddd; }
#tela-editor .clipe.legenda .borda::after { background: #444; }
#tela-editor .legenda-tela { pointer-events: auto; cursor: text; }
#tela-editor .legenda-tela:hover span { outline: 1px dashed #fff; outline-offset: 4px; }
#tela-editor .selo-mc { left: auto; right: 4%; }
#tela-editor .ed-fala { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; padding: 14px 0; background: transparent; color: #fff; border: 0; border-bottom: 1px solid #505050; text-align: left; cursor: pointer; font: inherit; }
#tela-editor .ed-fala > span:first-child { color: #d0d0cc; font-size: 12px; }
#tela-editor .ed-fala strong { grid-row: 2; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
#tela-editor .ed-fala-editar { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 12px; text-decoration: underline; }
#tela-editor .ed-avancado { margin-top: 20px; border-top: 1px solid #505050; }
#tela-editor .ed-avancado summary { min-height: 48px; padding: 15px 0; cursor: pointer; font-size: 13px; font-weight: 600; }
#tela-editor .ed-edicao-rapida { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 860px; margin: 0 0 20px; padding: 18px; border: 2px solid #fff; border-radius: 10px; background: #202020; }
#tela-editor .ed-edicao-rapida[hidden] { display: none; }
#tela-editor .ed-edicao-rapida label { font-weight: 700; font-size: 15px; }
#tela-editor .ed-edicao-rapida input { min-width: 0; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #777; border-radius: 6px; background: #fff; color: #111; font: 500 16px/1.5 Rubik, sans-serif; }
#tela-editor .ed-edicao-rapida > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#tela-editor .ed-edicao-rapida > div span { font-size: 12px; color: #d0d0cc; margin-left: auto; }
#tela-editor .atalhos { line-height: 1.7; }
@media (max-width: 1100px) {
  #tela-editor .ed-meio { grid-template-columns: minmax(0, 1fr) 320px; }
  #tela-editor { padding: 16px; }
}
@media (max-width: 900px) {
  #tela-editor { padding: 16px 10px; }
  #tela-editor .ed-topo { align-items: center; gap: 8px; }
  #tela-editor #ed-titulo { max-width: calc(100% - 120px); font-size: 16px; }
  #tela-editor .ed-renomear { order: 1; }
  #tela-editor .ed-topo-acoes { margin-left: auto; order: 1; }
  #tela-editor .ed-edicao-rapida { order: 0; }
  #tela-editor .ed-meio { display: contents; }
  #tela-editor .quadro { height: min(48vh, 500px); }
  #tela-editor .inspetor { max-height: none; margin-top: 16px; padding: 16px; }
  #tela-editor .lt-grade { grid-template-columns: 132px minmax(0, 1fr); }
  #tela-editor .lt-cab { padding: 0 6px; gap: 4px; font-size: 12px; }
  #tela-editor .lt-cab .nome small { display: none; }
  #tela-editor .lt-cab input[type="range"] { display: none; }
  #tela-editor .lt-cab .btn { font-size: 10px; padding: 0 5px; }
  #tela-editor .ed-edicao-rapida > div span { margin-left: 0; width: 100%; }
}

/* Refluxo: só a linha do tempo mantém rolagem horizontal, dentro da própria área. */
#tela-editor { min-width: 0; max-width: 100%; --maq-altura-previa: min(52svh, 560px); }
#tela-editor :is(.ed-topo, .ed-topo-acoes, .ed-meio, .ed-previa, .inspetor, .ferramentas, .linha-tempo, .lt-grade, .lt-rolagem, .ed-edicao-rapida) { min-width: 0; max-width: 100%; }
#tela-editor .ed-topo-acoes { flex-wrap: wrap; }
#tela-editor .btn { min-width: 44px; min-height: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; padding-block: 8px; }
#tela-editor .quadro { width: min(100%, calc(var(--maq-altura-previa) * 9 / 16)); height: auto; aspect-ratio: 9 / 16; flex: none; }
#tela-editor .quadro[data-p="1:1"] { width: min(100%, var(--maq-altura-previa)); height: auto; aspect-ratio: 1 / 1; }
#tela-editor .quadro[data-p="16:9"] { width: min(100%, calc(var(--maq-altura-previa) * 16 / 9)); height: auto; aspect-ratio: 16 / 9; }
#tela-editor .transporte { width: 100%; min-width: 0; flex-wrap: wrap; }
#tela-editor .transporte .ico { flex: none; }
#tela-editor .vel-rapida { min-width: 0; max-width: 100%; flex-wrap: wrap; justify-content: center; line-height: 1.5; }
#tela-editor .vel-rapida select { min-width: 70px; max-width: 100%; }
#tela-editor .relogio { max-width: 100%; line-height: 1.5; }
#tela-editor .ferramentas { flex-wrap: wrap; overflow: visible; row-gap: 10px; }
#tela-editor .ferramentas > .btn { flex-shrink: 1; }
#tela-editor .menu-adesivo { min-width: 0; max-width: 100%; }
#tela-editor .lista-adesivos { max-width: calc(100vw - 40px); }
#tela-editor .lista-adesivos .prontos button { min-width: 0; }
#tela-editor .lt-rolagem { overflow-x: auto; overscroll-behavior-x: contain; }
#tela-editor .lt-cab .nome { min-width: 0; overflow-wrap: anywhere; }
#tela-editor .lt-cab .btn { flex: none; }
#tela-editor .ed-fala { grid-template-columns: minmax(0, 1fr) auto; }
#tela-editor .ed-fala > * { min-width: 0; }
#tela-editor .campo-ed, #tela-editor .campo-faixa, #tela-editor .grupo { min-width: 0; max-width: 100%; }
#tela-editor .inspetor :is(h3, h4, p, legend), #tela-editor .atalhos { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  #tela-editor { --maq-altura-previa: min(48svh, 500px); }
  #tela-editor #ed-titulo { flex: 1 1 160px; max-width: 100%; }
  #tela-editor .ed-topo-acoes { min-width: 0; }
}
@media (max-width: 600px) {
  #tela-editor .lista-adesivos { position: fixed; left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; max-height: min(70svh, 440px); overflow-y: auto; }
  #tela-editor .ferramentas > .sep { display: none; }
  #tela-editor .ed-topo-acoes { flex: 1 1 100%; margin-left: 0; }
  #tela-editor .ed-topo-acoes > .btn { flex: 1 1 44px; }
  #tela-editor .ed-topo-acoes > #b-exportar { flex-basis: 100%; }
  #tela-editor .ed-renomear { margin-right: 0; margin-left: auto; }
  #tela-editor .campo-ed :is(input, textarea), #tela-editor select { font-size: 16px; }
}
@media (max-width: 380px) {
  #tela-editor .ed-previa { padding-inline: 10px; }
  #tela-editor .inspetor { padding: 14px; }
  #tela-editor .tempos { gap: 8px; }
  #tela-editor .tempos input { padding-inline: 7px; }
  #tela-editor .ed-edicao-rapida { padding: 12px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  #tela-editor { --maq-altura-previa: max(180px, 62svh); }
  #tela-editor .inspetor { max-height: none; }
}

/* Trilha do vídeo extra (react) */
#tela-editor .clipe.react { background: repeating-linear-gradient(90deg, #6A6A6A 0 30px, #5E5E5E 30px 32px); border-color: #9A9A9A; }

/* Legenda editada no próprio lugar (decisão 0024) */
#tela-editor .legenda-tela.editando span { outline: 2px dashed #fff; outline-offset: 4px; cursor: text; caret-color: currentColor; }
#tela-editor .clipe.editando { z-index: 6; overflow: visible; min-width: max-content; }
#tela-editor .clipe.editando .rotulo { overflow: visible; white-space: nowrap; background: #fff; color: #111; padding: 2px 6px; border-radius: 4px; box-shadow: 0 0 0 2px #111, 0 0 0 4px #fff; cursor: text; }

/* Selo: o Maq pisca de leve a cada ~6 s, sem chamar atenção. Para quando as animações estão desligadas. */
#selo-mc .olhos { transform-box: fill-box; transform-origin: center; animation: selo-piscar 6.5s ease-in-out infinite; }
@keyframes selo-piscar { 0%, 97%, 100% { transform: scaleY(1); } 98.4% { transform: scaleY(.12); } }
@media (prefers-reduced-motion: reduce) { #selo-mc .olhos { animation: none; } }
html[data-sem-animacao] #selo-mc .olhos { animation: none; }

/* Cartela do fim (29/10): transição suave inspirada na ideia de fechamento do TikTok e do Kwai, com desenho nosso.
   Os valores (--fundo, --maq...) vêm do tempo do vídeo em editor.js. */
#tela-editor .cartela-mc { background: none; gap: 1.6cqw; }
#tela-editor .cartela-fundo { position: absolute; inset: 0; background: rgba(255, 255, 255, calc(var(--fundo, 0) * .94)); backdrop-filter: blur(calc(var(--fundo, 0) * 14px)); -webkit-backdrop-filter: blur(calc(var(--fundo, 0) * 14px)); }
#tela-editor .cartela-mc > :not(.cartela-fundo) { position: relative; }
#tela-editor .cartela-maq { opacity: var(--maq, 0); transform: scale(var(--maq-escala, 1)); }
#tela-editor .cartela-maq svg { width: 30cqw; height: 30cqw; display: block; }
#tela-editor .cartela-maq .olhos { transform-box: fill-box; transform-origin: center; transform: scaleY(var(--olho, 1)); }
#tela-editor .cartela-nome { opacity: var(--nome, 0); transform: translateY(calc((1 - var(--nome, 0)) * 3cqw)); font-size: 5cqw; }
#tela-editor .cartela-arroba { opacity: var(--arroba, 0); transform: translateY(calc((1 - var(--arroba, 0)) * 3cqw)); font-size: 4cqw; color: #555; }
#tela-editor #selo-mc { transition: none; }

/* Celular: as ferramentas numa linha só, com rolagem para o lado (como nos editores de celular).
   O degradê na ponta mostra que tem mais botão; a lista de adesivos é fixa na tela, então não é cortada. */
@media (max-width: 600px) {
  #tela-editor .ferramentas { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 64px 8px 0; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  #tela-editor .ferramentas::-webkit-scrollbar { display: none; }
  #tela-editor .ferramentas > :is(.btn, .menu-adesivo) { flex: none; scroll-snap-align: start; }
  #tela-editor .ferramentas .btn { white-space: nowrap; }
}