/* IAIAGENTE UI 2.0 — ART DIRECTION
   --------------------------------------------------------------------------
   Camada visual canônica para decisões que dependem da composição renderizada.
   Validada transversalmente em desktop 1440×1050 e mobile 390×844.

   Mantém três contratos:
   1. Chat mobile realmente fullscreen acima da tab bar.
   2. Estado vazio conversacional sem fabricar mensagens do agente.
   3. Home mobile preserva os três sinais do agente como um único data rail.
   -------------------------------------------------------------------------- */

/* CHAT MOBILE / FULLSCREEN
 * styles.css define o contrato fixed; a Foundation 2.0 não pode recolocá-lo no
 * fluxo da página. O seletor é estreito para não afetar dock/rail desktop nem
 * workspaces embedded.
 */
@media (max-width: 980px) {
  /* ui-v2 establishes a stacking context for app-shell children; retain the
     fixed mobile navigation above the fullscreen chat surface. */
  .ui-v2 .app-shell > .tab-bar {
    position: fixed;
    z-index: 950;
  }

  .ui-v2 .app-shell > .chat-dock[data-placement="fullscreen"] {
    position: fixed;
    inset: 0;
    bottom: calc(57px + env(safe-area-inset-bottom));
    width: auto;
    height: auto;
    z-index: 940;
    border-left: 0;
  }
}

/* EMPTY STATE CONVERSACIONAL
 * A thread continua reservada a conversa real. Antes da primeira mensagem, a
 * própria superfície oferece orientação; quick actions seguem sendo descoberta.
 */
.ui-v2 .chat-thread:empty {
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  min-height: 0;
  padding-top: clamp(34px, 8vh, 88px);
  padding-bottom: clamp(34px, 10vh, 104px);
}

.ui-v2 .chat-thread:empty::before {
  content: "O que precisa acontecer agora?";
  display: block;
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.35vw, 2rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.04;
  color: var(--ink);
}

.ui-v2 .chat-thread:empty::after {
  content: "Pergunte, peça uma leitura ou abra o próximo passo. Quando houver algo para decidir, a estrutura aparece aqui.";
  display: block;
  max-width: 35ch;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.52;
}

.ui-v2 .chat-dock[data-placement="dock"] .chat-thread:empty,
.ui-v2 .chat-dock[data-placement="embedded"] .chat-thread:empty {
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 980px) {
  .ui-v2 .chat-dock[data-placement="fullscreen"] .chat-thread:empty {
    justify-content: center;
    padding: 28px 20px 16vh;
  }

  .ui-v2 .chat-dock[data-placement="fullscreen"] .chat-thread:empty::before {
    font-size: clamp(1.7rem, 8vw, 2.35rem);
    max-width: 12ch;
  }

  .ui-v2 .chat-dock[data-placement="fullscreen"] .chat-thread:empty::after {
    max-width: 31ch;
    font-size: .8rem;
  }
}

/* HOME MOBILE / DATA RAIL
 * Progresso, canal e status pertencem à mesma leitura. Mantê-los em três colunas
 * evita que o terceiro sinal vire uma segunda linha sem relação visual.
 */
@media (max-width: 720px) {
  .ui-v2 .pulse-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ui-v2 .pulse-stat {
    min-width: 0;
    padding: 12px 9px 11px;
  }

  .ui-v2 .pulse-stat strong {
    font-size: clamp(1.16rem, 5.6vw, 1.4rem);
  }

  .ui-v2 .pulse-stat small {
    font-size: .48rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
}

/* OBSERVABILIDADE / EVOLUÇÃO
 * O gráfico apoia a leitura do KPI; não deve competir com o número principal.
 * Mantemos alturas proporcionais e reduzimos apenas massa, altura e contraste.
 */
.ui-v2 .product-kpi-evolution {
  height: 84px;
  gap: 6px;
}

.ui-v2 .product-kpi-evolution i {
  background: color-mix(in srgb, var(--ink) 68%, transparent);
}

@media (max-width: 720px) {
  .ui-v2 .product-kpi-evolution {
    height: 76px;
    gap: 4px;
  }
}