/* ============================================================
   TUBE STUDIO — CORREÇÕES MOBILE
   Complementa o CSS Tailwind compilado. Não altera desktop.
   ============================================================ */

/* 1. Modelo de caixa global */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 2. Touch scroll suave em todos os containers overflow-x */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/* Scrollbar fina e discreta em barras de abas */
.overflow-x-auto::-webkit-scrollbar {
  height: 3px;
}
.overflow-x-auto::-webkit-scrollbar-thumb {
  background: rgba(255, 144, 64, 0.35);
  border-radius: 999px;
}

/* ── 3. Ajustes de padding em mobile ── */
@media (max-width: 640px) {
  /* Barra de abas do canal (Longos/Shorts) — usa px-8 fixo no código React */
  /* Reduz para 16px nas abas para ganhar espaço em telas pequenas */
  div.flex.overflow-x-auto {
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 16px !important;
  }

  /* Conteúdo interno das páginas de canal */
  .px-8.py-8 {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  /* Header de páginas (título + botão) — empilha em coluna no mobile */
  .flex.items-center.justify-between.mb-6,
  .flex.items-center.justify-between.mb-8 {
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* ── 4. Sidebar mobile — cap de largura ── */
/* O overlay mobile usa "w-72" = 288px fixo, capamos em 85vw para telas pequenas */
@media (max-width: 1023px) {
  aside.w-72 {
    max-width: 85vw !important;
    overflow-y: auto;
  }
}

/* ── 5. Botão "Área Admin" — posição mobile ── */
@media (max-width: 768px) {
  #sb-admin-btn {
    right: 16px !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    font-size: 12px !important;
    padding: 9px 15px !important;
  }

  /* Na página /referencias o FAB laranja está na direita:
     Move o admin para a esquerda para evitar conflito */
  body[data-sb-route="referencias"] #sb-admin-btn {
    right: auto !important;
    left: 16px !important;
  }
}

/* ── 6. FAB de Referências — safe area no iPhone ── */
@media (max-width: 768px) {
  .sb-refs-fab {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── 7. Dashboard — cards em coluna única em telas muito pequenas ── */
@media (max-width: 480px) {
  .sm\:grid-cols-2,
  .sm\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
}

/* ── 8. Espaçamento extra no rodapé da página
        evita que conteúdo fique coberto pelo botão Admin fixo ── */
@media (max-width: 768px) {
  #root > div > div:last-child,
  main {
    padding-bottom: 80px;
  }
}

/* ── 9. Textos longos em títulos não cortam mal ── */
h1, h2, h3 {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── 10. Link "Referências" adicionado no sidebar por canal ── */
.sb-sidebar-refs-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.75rem; /* 12px — igual às outras opções do submenu */
  font-family: inherit;
  color: #6b6b80;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1.4;
}
.sb-sidebar-refs-link:hover {
  color: #ededf0;
  background: #1a1a21;
}
.sb-sidebar-refs-link.sb-sidebar-refs-active {
  background: rgba(255, 144, 64, 0.1);
  color: #ff9040;
  font-weight: 500;
}

/* ── 11. Nome do canal clicável no sidebar ── */
.sb-canal-name-link {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255, 144, 64, 0.2);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.sb-canal-name-link:hover {
  text-decoration-color: rgba(255, 144, 64, 0.6);
  color: #ededf0 !important;
}

/* ── 12. Tab bar de Referências customizada — scroll horizontal suave ── */
.sb-refs-custom-tabbar {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-bottom: 2px; /* evita que a borda-bottom ativa seja cortada */
}

/* ── 13. Garante que cards do dashboard não transbordam em mobile ── */
@media (max-width: 640px) {
  .card, .card-hover {
    min-width: 0;
  }

  /* Botões de ação (Longos/Shorts) dentro dos cards — ocupam mais espaço */
  .card .flex.gap-2 > button,
  .card-hover .flex.gap-2 > button {
    flex: 1;
    justify-content: center;
  }
}

/* ── 14. "Prompt de Áudio" — não corta em telas estreitas ── */
.whitespace-nowrap {
  white-space: nowrap;
}
/* Mas nas abas, garantimos que o container scroll, não o texto quebre */
.tab-active, .tab-inactive {
  white-space: nowrap;
  flex-shrink: 0;
}