.app {
  display:grid;
  grid-template-rows:auto 1fr;
  height:100vh;
}
#topbar {
  display:flex; align-items:center; gap:1rem;
  padding:.6rem 1rem;
  background:var(--preto2);
  border-bottom:1px solid var(--borda);
}
.body-grid {
  display:grid;
  grid-template-columns:260px 1fr 46px;
  min-height:0;
}
/* Recolhida: vira uma coluna estreita só com as categorias empilhadas; a lista de ativos some */
.body-grid.rail-collapsed { grid-template-columns:112px 1fr 46px; }
.body-grid.rail-collapsed #asset-rail { overflow-x:hidden; }
.body-grid.rail-collapsed #rail-alerts,
.body-grid.rail-collapsed #sort-group,
.body-grid.rail-collapsed #rail-body { display:none; }
.body-grid.rail-collapsed .rail-tabs { flex-direction:column; flex-wrap:nowrap; border-bottom:0; }
.body-grid.rail-collapsed .rail-tabs .btn { width:100%; text-align:left; }
#asset-rail {
  background:var(--preto2);
  border-right:1px solid var(--borda);
  overflow-y:auto;
}
.main-col {
  display:flex; flex-direction:column; min-width:0;
}
#chart { flex:1 1 0; min-height:0; position:relative; }
/* Barra vertical de desenho (extrema direita, estilo TradingView) */
#draw-rail {
  background:var(--preto2);
  border-left:1px solid var(--borda);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 0; overflow-y:auto;
}
#sentiment {
  border-top:1px solid var(--borda);
  padding:1rem;
  color:var(--texto-fraco);
}
@media (max-width:780px) {
  /* gráfico ocupa a tela; lista de ativos vira gaveta; barra de desenho = faixa embaixo */
  .body-grid { grid-template-columns:1fr; grid-template-rows:1fr auto; }
  #asset-rail {
    position:fixed; top:0; left:0; bottom:0; width:84%; max-width:300px; max-height:none;
    transform:translateX(-100%); transition:transform .25s ease; z-index:80;
    border-right:1px solid var(--borda); box-shadow:6px 0 26px rgba(0,0,0,.55);
  }
  .body-grid.rail-open #asset-rail { transform:translateX(0); }
  .rail-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:70; display:none; }
  .body-grid.rail-open .rail-backdrop { display:block; }
  #draw-rail { flex-direction:row; flex-wrap:wrap; border-left:0; border-top:1px solid var(--borda); padding:4px 6px; gap:4px; }
  #sentiment { display:flex; } /* painel de sentimento volta no mobile (scroll-x do .sentiment-panel) */
  #chart { min-height:300px; }
  .toolbar-label { display:none; } /* economiza espaço vertical */
  #topbar { flex-wrap:wrap; gap:.45rem; padding:.5rem .7rem; }
  #topbar .search { order:3; flex:1 1 100%; min-width:0; }
}