/* Local extension of the approved Fenaky DS: Dialogo/Campo/BotaoRedondo.
   Fallbacks keep this feature independent of the full DS rollout on other pages. */
.support-launcher, #support-popup {
  --support-top: var(--casca-topo, #1d1d20);
  --support-middle: var(--casca-meio, #161618);
  --support-base: var(--casca-base, #121214);
  --support-text: var(--texto, #ededef);
  --support-muted: var(--texto-unidade, #a9a9af);
  --support-focus: var(--foco, #cdb0ff);
  --support-well: var(--poco, #0b0b0c);
  --support-body: var(--font-texto, Manrope, sans-serif);
  --support-display: var(--font-display, 'Space Grotesk', sans-serif);
  color-scheme: dark;
}
.support-launcher {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 70;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--botao-redondo-topo, #3c3c42), var(--tecla-base, #232327) 70%);
  color: var(--texto-icone, #cfcfd4);
  box-shadow: var(--shadow-botao-redondo, inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(0,0,0,.65), 0 3px 8px rgba(0,0,0,.6));
  cursor: pointer;
  transition: color 150ms, transform 100ms;
}
/* Foto do John, o personagem da Fenaky, no lugar do ícone; o anel do BotaoRedondo segue pela sombra. */
.support-launcher-foto { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; transition: filter 150ms; }
.support-launcher:hover .support-launcher-foto { filter: brightness(1.08); }
.support-launcher:active { transform: translateY(1px); }
.support-launcher-label {
  position: absolute;
  right: calc(100% + 10px);
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--support-top);
  color: var(--support-text);
  font: 600 12px/1.4 var(--support-body);
  pointer-events: none;
  visibility: hidden;
}
.support-launcher:is(:hover, :focus-visible) .support-launcher-label { visibility: visible; }
/* Existing bottom-right account notice must leave the support target reachable. */
body:has(.support-launcher) .credit-notice { bottom: 96px; }
body:has(.support-launcher) #toast { bottom: 96px; }
body:has(.support-launcher) .app-footer { padding-bottom: 96px; }
/* O histórico do estúdio de produto (coluna fixa à direita) termina 12 px acima do botão, sem passar por trás dele. */
@media (min-width: 1101px) {
  body:has(.support-launcher) .produto-historico { bottom: calc(max(24px, env(safe-area-inset-bottom)) + 56px + var(--space-12, 12px)); }
}
#support-popup {
  position: fixed;
  inset: auto max(24px, env(safe-area-inset-right)) max(96px, calc(env(safe-area-inset-bottom) + 80px)) auto;
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 128px);
  margin: 0;
  padding: 22px;
  border: 0;
  border-radius: 22px;
  background: url('./assets/support-grain.png') 0 0 / 192px 192px, linear-gradient(180deg, var(--support-top), var(--support-middle) 34%, var(--support-base));
  box-shadow: var(--shadow-dialogo, 0 0 0 1px rgba(0,0,0,.7), 0 2px 4px rgba(0,0,0,.45), 0 28px 64px -14px rgba(0,0,0,.9), 0 70px 120px -40px rgba(0,0,0,.95));
  color: var(--support-text);
  font: 500 13px/1.6 var(--support-body);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #4a4a51 transparent;
}
#support-popup::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.07);
}
#support-popup::backdrop { background: rgba(5,5,6,.6); backdrop-filter: blur(8px); }
#support-popup[open] { animation: support-open 300ms cubic-bezier(.16,1,.3,1); }
#support-popup .support-widget-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--tecla-topo), var(--tecla-base));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 0 0 1px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.45);
  color: var(--texto-tecla);
  cursor: pointer;
}
#support-popup .support-widget-close:hover { color: var(--branco); background: linear-gradient(180deg, var(--tecla-hover-topo), var(--seg-acesa-base)); }
#support-popup .support-widget-close svg { width: 18px; height: 18px; }
#support-popup .support-page { width: 100%; padding: 0; }
#support-popup .support-title, #support-popup .support-widget-guest h2 {
  padding-right: 34px;
  margin: 0 0 10px;
  color: var(--texto-titulo, #f4f4f6);
  font: 600 21px/1.15 var(--support-display);
  letter-spacing: -.02em;
}
#support-popup .support-title:focus { outline: none; }
#support-popup .support-lead, #support-popup .support-widget-guest p { margin: 0 0 20px; color: var(--support-muted); font-size: 12.5px; line-height: 1.55; }
#support-popup .support-back { margin: 0 0 18px; padding: 0 36px 0 0; min-height: 28px; font-size: 12px; color: var(--support-muted); }
#support-popup .support-form { gap: 14px; }
#support-popup .support-form label { gap: 8px; color: var(--texto-link, #d6d6da); font: 600 12px/1.5 var(--support-body); }
#support-popup .support-form :is(input, select, textarea) {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--support-well);
  color: var(--texto-campo, #e8e8eb);
  box-shadow: var(--shadow-poco, inset 0 2px 5px rgba(0,0,0,.75), inset 0 0 0 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.055));
  caret-color: var(--support-focus);
  font: 500 13px/1.6 var(--support-body);
}
#support-popup .support-form select { height: 44px; padding-block: 0; cursor: pointer; }
#support-popup .support-form textarea { min-height: 136px; max-height: 35dvh; resize: vertical; }
#support-popup .support-form :disabled { opacity: .5; cursor: not-allowed; }
#support-popup .support-form ::placeholder { color: var(--texto-unidade, #a9a9af); opacity: 1; }
#support-popup .support-hint { color: var(--support-muted); font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
#support-popup .support-field-hint { margin: -6px 0 0; color: var(--support-muted); font-size: 11.5px; }
#support-popup .support-actions { justify-content: flex-end; gap: 10px; }
#support-popup .button { min-height: 42px; border-radius: 12px; font: 600 12px/1.4 var(--support-body); }
#support-popup .button-primary {
  min-width: 136px;
  border: 0;
  background: linear-gradient(180deg, var(--lima-topo, #e8ff80), var(--lima-meio, #d6fc3e) 45%, var(--lima-base, #c6ef28));
  color: var(--tinta-lima, #141a00);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.65), 0 12px 30px -8px rgba(215,255,63,.3);
}
#support-popup .button-primary:not(:disabled):hover { filter: brightness(1.04); }
#support-popup .button-secondary { background: linear-gradient(180deg, var(--tecla-topo), var(--tecla-base)); color: var(--texto-tecla); border: 0; }
#support-popup .support-message { background: var(--casca-topo); border-color: var(--traco-envio); }
#support-popup .support-message[data-author=customer] { background: var(--tecla-base); border-color: var(--filete-midia-hover); }
#support-popup .support-author { color: var(--texto-suave); }
#support-popup .support-message[data-author=support] .support-author { color: var(--texto); }
#support-popup .support-item { background: var(--casca-topo); border-color: var(--traco-envio); color: var(--support-text); padding: 14px; }
#support-popup .support-item[data-unread=true] { background: var(--tecla-base); border-color: var(--traco-envio-hover); }
#support-popup .support-item .support-status { white-space: normal; }
#support-popup .support-item-text small, #support-popup .support-meta, #support-popup .support-message time { color: var(--support-muted); }
#support-popup .support-head { gap: 12px; margin-bottom: 20px; padding-right: 34px; }
#support-popup .support-empty { padding: 24px 12px; }
#support-popup .support-empty h2 { font-size: 18px; }
#support-popup [data-support-widget-status] { margin: 0; color: var(--support-muted); font-size: 12px; }
#support-popup [data-support-widget-status]:empty { display: none; }
#support-popup .support-error { color: var(--erro, #ffa9a7); }
#support-popup .support-guest-login { margin: 16px 0 0; color: var(--support-muted); font-size: 12px; line-height: 1.55; }
#support-popup .support-guest-login-button { color: var(--texto-link, #d6d6da); }
#support-popup .support-guest-sent .support-lead strong { color: var(--support-text); }
.support-launcher:focus-visible, #support-popup :focus-visible { outline: 2px solid var(--support-focus); outline-offset: 3px; }
#support-popup ::selection { background: var(--violeta); color: var(--tinta-violeta); }
@keyframes support-open { from { transform: translateY(12px) scale(.98); } to { transform: none; } }
@media (max-width: 600px) {
  .support-launcher { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); width: 52px; height: 52px; }
  #support-popup { inset: auto 12px max(80px, calc(env(safe-area-inset-bottom) + 68px)) 12px; width: auto; max-height: calc(100dvh - 100px); padding: 20px; }
  #support-popup .support-head > .button { width: auto; }
  #support-popup .support-actions > .button { flex: 0 1 auto; }
  body:has(.support-launcher) .credit-notice { top: 70px; bottom: auto; }
}
@media (max-height: 600px) { #support-popup { bottom: 12px; max-height: calc(100dvh - 24px); } }
@media (prefers-reduced-motion: reduce) { #support-popup[open] { animation: none; } .support-launcher { transition: none; } }

/* The reference shown here is the same full asset ID requested by support. */
.asset-video-id { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: 8px; margin-top: 10px; color: var(--texto-unidade, #a9a9af); }
.asset-video-id-label { display: block; margin-bottom: 3px; font: 600 11px/1.5 var(--font-texto, Manrope, sans-serif); }
.asset-video-id-value { display: block; color: var(--texto-link, #d6d6da); font: 500 11px/1.6 var(--font-texto, Manrope, sans-serif); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; user-select: all; }
.asset-video-id-copy { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: linear-gradient(180deg, var(--tecla-topo, #303035), var(--tecla-base, #232327)); color: var(--texto-icone, #cfcfd4); cursor: pointer; }
.asset-video-id-copy:is(:hover, :focus-visible) { color: var(--branco); background: linear-gradient(180deg, var(--tecla-hover-topo, #38383e), var(--tecla-hover-base, #2a2a2f)); }
.asset-video-id-copy:focus-visible { outline: 2px solid var(--anel-foco); outline-offset: 3px; }
.asset-video-id-copy .icon { width: 16px; height: 16px; }
.asset-video-id-copy:disabled { opacity: .5; cursor: wait; }
#support-popup .support-video-reference { display: grid; gap: 8px; }
#support-popup .support-video-reference[hidden] { display: none; }
#support-popup .support-video-unavailable { display: flex; align-items: flex-start; gap: 8px; color: var(--support-muted); font: 500 12px/1.5 var(--support-body); cursor: pointer; }
#support-popup .support-video-unavailable input[type=checkbox] { flex: none; width: 16px; height: 16px; padding: 0; margin: 2px 0 0; border-radius: 4px; accent-color: var(--support-focus); box-shadow: none; }