/* ==========================================================================
   ui/styles/responsive.css — ajustes por viewport.
   Alvos de medicao (spec secao 9): 320, 360, 390, 430, 768, 1024, 1280, 1440, 1920.
   Nenhuma correcao por overflow-x:hidden. Estouro horizontal se corrige na causa.
   ========================================================================== */

/* ------------------------------------------------------------- 1440 e acima -- */
@media (min-width: 1440px) {
  :root {
    --pad-panel: 24px;
  }
}

/* --------------------------------------------------------- 1024 a 1279 px --- */
@media (max-width: 1279px) {
  .rail-item {
    width: 50px;
  }

  .rail-item__label {
    font-size: 9px;
  }

  .account-chip {
    max-width: 220px;
  }

  .status-pill {
    max-width: 200px;
  }
}

/* ----------------------------------------------------------- 768 a 1023 px -- */
@media (max-width: 1023px) {
  .app-header {
    flex-wrap: wrap;
    min-height: auto;
  }

  .app-header__tools {
    flex-wrap: wrap;
  }

  .quote {
    gap: var(--space-4);
  }

  .copilot-panel {
    min-height: 0;
  }
}

/* ------------------------- ate 1100 px: grupo de avaliacao centrado (P01.1) -- */
@media (max-width: 1100px) {
  .chart-panel__foot {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--space-3);
  }

  /* A coluna de equilibrio so existe para o desktop de tres colunas. */
  .chart-panel__foot-balance {
    display: none;
  }

  .study-summary {
    justify-self: stretch;
    text-align: left;
  }

  .chart-panel__evaluate {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 360px);
    margin-inline: auto;
    gap: 14px;
  }

  /* Duas colunas iguais: o min-width de 190px do desktop impediria o encaixe. */
  #btn-avaliar-compra,
  #btn-avaliar-venda {
    width: 100%;
    min-width: 0;
    min-height: 60px;
    padding-inline: 16px;
    font-size: 16px;
    font-weight: var(--weight-semibold);
  }
}

/* ------------------------------------------------------------ abaixo de 768 -- */
@media (max-width: 767px) {
  :root {
    --pad-panel: 16px;
    --fs-metric: var(--fs-metric-mobile);
    --lh-metric: var(--lh-metric-mobile);
  }

  .app-header__title {
    font-size: 20px;
    line-height: 28px;
  }

  .app-header__context {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .app-header__brand {
    display: none;
  }

  .fixture-flag {
    order: -1;
  }

  .status-pill {
    max-width: 100%;
  }

  .account-chip {
    max-width: 100%;
    flex: 1 1 auto;
  }

  /* Alvos de toque: nada abaixo de 44 px no celular. */
  .tf-btn,
  .btn--quiet,
  .tab,
  .segmented__item {
    min-height: var(--h-control);
  }

  /* Texto de formulario com 16 px evita zoom automatico no celular. */
  .composer__input,
  .select,
  .field__label {
    font-size: var(--fs-input-mobile);
  }

  .chart-panel__head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .symbol-button {
    justify-content: space-between;
  }

  .quote {
    justify-content: space-between;
    gap: var(--space-3);
  }

  .quote__cell { text-align: left; }

  .chart-panel__toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-2) var(--pad-panel);
  }

  .tf-strip {
    /* Rolagem so dentro do componente, sem estourar a pagina. */
    padding-bottom: 2px;
  }

  .chart-panel__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chart-panel__evaluate {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .briefing {
    margin: var(--space-3) var(--pad-panel) 0;
  }

  .briefing__foot {
    flex-wrap: wrap;
  }

  .chat {
    padding: 0 var(--pad-panel);
  }

  .composer {
    position: sticky;
    bottom: 0;
    padding-bottom: max(var(--space-3), var(--safe-bottom));
  }

  /* Posicoes: cartoes no lugar da tabela, com os mesmos campos. */
  #panel-posicoes .data-table {
    display: none;
  }

  .position-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  /* Historico mantem tabela com rolagem interna visivel e util. */
  .tab-panel {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .tabs__note {
    margin-left: 0;
    flex-basis: 100%;
  }

  .dev-banner {
    position: static;
    transform: none;
    max-width: none;
    margin: 0 var(--space-3) var(--space-5);
    border-radius: var(--radius-panel);
    text-align: left;
  }

  /* P05: a avaliação ocupa só a área útil do celular; o corpo rola por dentro
     e os comandos continuam sempre em uma faixa visível no rodapé. */
  .evaluation-dialog {
    width: calc(100vw - 16px);
    max-height: min(760px, calc(var(--usable-vh, 100dvh) - 16px));
    border-radius: 16px;
  }

  .evaluation-layout {
    max-height: min(760px, calc(var(--usable-vh, 100dvh) - 16px));
  }

  .evaluation-header,
  .evaluation-footer {
    padding: var(--space-3) var(--space-4);
  }

  .evaluation-body {
    padding: var(--space-4);
  }

  .evaluation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .evaluation-grid > div:last-child {
    grid-column: 1 / -1;
  }

  .evaluation-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .evaluation-footer .btn {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding-inline: 10px;
    white-space: normal;
  }

  .evaluation-confirm {
    grid-column: 1 / -1;
    margin-left: 0;
  }
}

/* ------------------------------------------------------------------- 430 px -- */
@media (max-width: 430px) {
  .quote__cell dd {
    font-size: 14px;
  }

  .account-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------- 360 px -- */
@media (max-width: 360px) {
  .composer__row {
    flex-direction: column;
    align-items: stretch;
  }

  .composer__voice .select {
    width: 100%;
  }

  /* Duas acoes lado a lado estouravam 4px a 320px: medido, nao suposto. */
  .briefing__foot {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ------------------------------------------------------------------- 320 px -- */
@media (max-width: 340px) {
  /* Valores monetários completos continuam legíveis no cartão estreito; não
     trocar informação financeira por reticências. */
  .metric-card__value {
    font-size: 18px;
    letter-spacing: -0.04em;
    overflow: visible;
    text-overflow: clip;
  }

  /* P01.1: a 320 px os botoes de avaliacao empilham para o texto caber inteiro. */
  .chart-panel__evaluate {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 280px);
  }

  #btn-avaliar-compra,
  #btn-avaliar-venda {
    width: 100%;
    min-height: 60px;
  }

  .chart-panel__actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .status-pill__text {
    white-space: normal;
  }

  .evaluation-footer {
    grid-template-columns: minmax(0, 1fr);
  }

  .evaluation-confirm {
    grid-column: auto;
  }

  .evaluation-footer .btn {
    min-height: 46px;
  }
}

/* ------------------------------------------------------- paisagem baixa ------ */
@media (max-height: 560px) and (orientation: landscape) {
  .app-header {
    min-height: 48px;
    padding: var(--space-2) var(--space-3);
  }

  .chart-stage {
    height: clamp(200px, 46dvh, 300px);
  }

  .sheet__panel {
    max-height: calc(100dvh - 16px);
    margin-bottom: var(--space-1);
  }

  .dev-banner {
    display: none;
  }
}

/* ------------------------------------------------------------------- 1920 --- */
@media (min-width: 1800px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr) 400px;
  }
}