/* Author: Thiago Rodrigues Del Negro
   Project: TAEP — Plataforma cognitiva multi-tenant
   Copyright: © 2026 TAEP. All rights reserved.
   Camada responsiva (F.3 · D7 REVISADO → ADR-038). WEBSITE-FIRST adaptativo:
   a BASE é o desktop (1280px de referência), e os breakpoints DECRESCENTES adaptam
   ao mobile. Razão: sistema B2B, uso primário em desktop de escritório (Founder,
   2026-06-06). Breakpoints: 1280 (referência) / 1024 / 768 / 480.

   Dock de 9 ícones: lateral esquerdo (desktop) → inferior horizontal (mobile <=768).
   Chat: área central no desktop; tela cheia no mobile. */

/* ---- BASE = DESKTOP (>=1024, referência 1280) ---- */
body { margin: 0; }
#app {
  margin-left: 88px;                 /* abre espaço p/ o dock lateral */
  padding: var(--sp-6);
  max-width: 1180px;
}

/* Dock lateral esquerdo (vertical, fixo) */
.dock {
  position: fixed; top: 0; left: 0; bottom: 0; width: 72px;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) 0;
  background: var(--surface-strong);
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  border-right: 1px solid var(--hairline);
  z-index: 50;
}
.dock__item {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  font-size: 1.25rem; text-decoration: none; color: var(--ink);
  transition: transform .2s ease, background .2s ease;
}
.dock__item:hover { background: var(--surface); transform: translateY(-1px); }
.dock__item[aria-current="page"] { background: var(--surface); }
.dock__sep { flex: 1; }

/* Dashboard: grid de até 3 colunas no desktop */
.dashboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.glass-card--hero { grid-column: 1 / -1; }
.bloco-linhas { margin: 0; padding-left: var(--sp-4); }

/* Chat: área central */
.chat { max-width: 760px; margin: 0 auto; }
.composer { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }

/* ---- 1024px: ajustes de grid/sidebar ---- */
@media (max-width: 1024px) {
  .dashboard { grid-template-columns: repeat(2, 1fr); }
  #app { max-width: none; }
}

/* ---- 768px: colapsa o dock lateral → dock inferior horizontal ---- */
@media (max-width: 768px) {
  #app { margin-left: 0; margin-bottom: 76px; padding: var(--sp-4); }
  .dock {
    top: auto; right: 0; width: auto; height: 64px;
    flex-direction: row; justify-content: space-around;
    border-right: none; border-top: 1px solid var(--hairline);
    padding: var(--sp-2) var(--sp-3);
    padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
    overflow-x: auto;
  }
  .dock__sep { display: none; }
  .dashboard { grid-template-columns: 1fr; }     /* 1 coluna */
  /* Safari iOS: backdrop-filter é caro em tela estreita → reduz o blur */
  :root { --blur: 10px; }
}

/* ---- 480px: mobile portrait ---- */
@media (max-width: 480px) {
  #app { padding: var(--sp-3); }
  .dock__item { width: 40px; height: 40px; font-size: 1.1rem; }
}

/* ---- Banner de consentimento LGPD (ANPD Res. 2/2022) ---- */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: var(--surface-strong);
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  border-top: 1px solid var(--hairline);
  padding: var(--sp-4); display: flex; gap: var(--sp-4);
  align-items: center; flex-wrap: wrap; justify-content: center;
}
.consent p { margin: 0; max-width: 680px; color: var(--ink-soft); font-size: var(--text-sm); }
.consent .acoes { display: flex; gap: var(--sp-3); }

/* ---- Acessibilidade: desliga animações ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}