/* ============================================================
   Trilha — Responsividade (celular e tablet)
   Só atua abaixo de 1100px: o layout de computador continua igual.
   Como as telas usam estilos inline, as regras usam !important.
   ============================================================ */

/* Altura real da tela no celular (descontando a barra do navegador) */
@media (max-width: 1100px) {
  @supports (height: 100dvh) { #app, .tr-app { height: 100dvh !important; } }
}

/* ---------- Menu deslizante (celular) ---------- */
.tr-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 120; width: min(var(--sidebar-w), 84vw);
  transform: translateX(-102%); transition: transform 260ms var(--ease-out); box-shadow: 0 0 40px rgba(0,0,0,.6); }
.tr-drawer > aside { width: 100% !important; }
.tr-drawer button[aria-label="Recolher"] { display: none !important; }
.menu-open .tr-drawer { transform: none; }
.tr-drawer-backdrop { position: fixed; inset: 0; z-index: 110; background: rgba(6,6,9,.6); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.menu-open .tr-drawer-backdrop { opacity: 1; pointer-events: auto; }

/* ---------- Login e Cadastro ---------- */
@media (max-width: 940px) {
  #root div:has(> form.lg-in) { min-width: 0 !important; }
  form.lg-in input { min-width: 0 !important; }
}
@media (max-width: 640px) {
  #root div:has(> form.lg-in) { padding: 24px 14px !important; }
  form.lg-in { zoom: .9; padding: 28px 22px 24px !important; }
}
@media (max-width: 380px) {
  form.lg-in { zoom: .86; padding: 24px 18px 22px !important; }
}

/* ============================================================
   Plataforma — TABLET (até 1100px)
   ============================================================ */
@media (max-width: 1100px) {
  .tr-content { zoom: .94; padding: 22px 22px 56px !important; }

  .tr-content [style*="grid-template-columns: repeat(6, 1fr)"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .tr-content [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .tr-content [style*="minmax(300px"],
  .tr-content [style*="minmax(280px"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)) !important; }
}

@media (max-width: 960px) {
  /* painéis laterais fixos (260–340px) descem para baixo do conteúdo */
  .tr-content [style*="grid-template-columns: 3"],
  .tr-content [style*="grid-template-columns: 1fr 3"],
  .tr-content [style*="grid-template-columns: minmax(0px, 1fr) 2"],
  .tr-content [style*="grid-template-columns: minmax(0px, 1fr) 3"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ============================================================
   Plataforma — CELULAR (até 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* topo */
  .tr-topbar { padding: 0 12px !important; gap: 8px !important; height: 58px !important; }
  .tr-topbar-titles { flex: 1 1 auto; overflow: hidden; }
  .tr-topbar-title { font-size: 16px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tr-topbar-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px !important; }
  .tr-topbar > span[style*="margin-left: auto"] { display: none; }
  .tr-streak { zoom: .86; }
  .tr-topbar button[aria-label="Meu perfil"] { zoom: .86; }

  .tr-content { zoom: .88; padding: 16px 14px 48px !important; }
  .tr-scroll { overflow-x: hidden !important; } /* brilhos decorativos não geram rolagem lateral */

  /* grades de 2 colunas (texto + painel) viram 1 coluna */
  .tr-content [style*="grid-template-columns: 1"],
  .tr-content [style*="grid-template-columns: 2"],
  .tr-content [style*="grid-template-columns: minmax(0px, 1fr)"] { grid-template-columns: minmax(0, 1fr) !important; }
  .tr-content [style*="grid-template-columns: repeat(4, 1fr)"],
  .tr-content [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .tr-content [style*="grid-template-columns: repeat(6, 1fr)"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .tr-content [style*="grid-template-columns: repeat(7, 1fr)"] { gap: 4px !important; }
  /* itens que ocupavam 2+ colunas não podem criar colunas extras */
  .tr-content [style*="grid-template-columns"] > [style*="grid-column: span"] { grid-column: auto !important; }

  /* linhas com itens lado a lado quebram em vez de vazar da tela */
  .tr-content [style*="display: flex"]:not([style*="flex-direction: column"]) { flex-wrap: wrap; }
  .tr-content [style*="display: flex"] > * { max-width: 100%; }

  /* larguras fixas grandes passam a respeitar a tela */
  .tr-content [style*="width: 3"], .tr-content [style*="width: 4"], .tr-content [style*="width: 5"],
  .tr-content [style*="width: 6"], .tr-content [style*="width: 7"], .tr-content [style*="width: 2"] { max-width: 100%; }
  .tr-content img, .tr-content video, .tr-content canvas, .tr-content iframe { max-width: 100%; }
  .tr-content table { display: block; overflow-x: auto; }
}
@media (max-width: 560px) {
  .tr-content [style*="grid-template-columns: repeat(2, 1fr)"],
  .tr-content [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 480px) {
  .tr-xp, .tr-bell { display: none !important; }
  .tr-content { zoom: .86; padding: 14px 12px 44px !important; }
}

/* Telas em colunas com altura da janela (ex.: Biblioteca IA) empilham as colunas */
@media (max-width: 900px) {
  .tr-content [style*="display: flex"][style*="calc(100vh"] { flex-direction: column !important; height: auto !important; }
  .tr-content [style*="display: flex"][style*="calc(100vh"] > * { width: 100% !important; flex: 0 0 auto !important; }
}