/* ============================================================
   LAYOUT — grade da aplicacao
   Paisagem (computador):  [ pecas | bancada | gabutron ]
   Retrato (celular):      abas na base
   ============================================================ */

#app {
  display: grid;
  height: 100dvh;
  grid-template-columns: var(--painel-l) minmax(0, 1fr) var(--painel-r);
  grid-template-rows: var(--barra-topo) minmax(0, 1fr) var(--barra-base);
  grid-template-areas:
    "topo  topo    topo"
    "pecas obra    robo"
    "base  base    base";
}

/* --- barra superior ------------------------------------------- */

#barra-topo {
  grid-area: topo;
  display: flex; align-items: center; gap: var(--e3);
  padding: 0 var(--e3);
  background: var(--casco);
  border-bottom: var(--borda);
}

.marca { display: flex; align-items: center; gap: var(--e2); }
.marca svg { width: 26px; height: 26px; }
.marca b { font-weight: 500; font-size: var(--t-med); letter-spacing: 0.03em; }
.marca span { color: var(--poeira); font-size: var(--t-micro); }

.painel-estado {
  display: flex; align-items: center; gap: var(--e3);
  margin-left: auto;
  font-size: var(--t-min); color: var(--grafite);
}
.leitura { display: flex; align-items: baseline; gap: 5px; }
.leitura b { color: var(--fosforo); font-weight: 500; }

/* --- painel de pecas (esquerda) -------------------------------- */

#painel-pecas {
  grid-area: pecas;
  display: flex; flex-direction: column;
  background: var(--casco);
  border-right: var(--borda);
  min-height: 0;
}

.busca-pecas { padding: var(--e2); border-bottom: var(--borda); }
.busca-pecas input { width: 100%; }

.moveis { flex: 1; overflow-y: auto; padding: var(--e2); }

.gaveta { border: var(--borda); border-radius: var(--raio); margin-bottom: 6px; }

.gaveta-puxador {
  display: flex; align-items: center; gap: var(--e2);
  width: 100%; padding: 7px var(--e2);
  background: var(--casco-alto);
  border: 0; border-radius: var(--raio);
  color: var(--luz); font: inherit; font-size: var(--t-min);
  cursor: pointer; text-align: left;
}
.gaveta-puxador:hover { color: var(--fosforo); }
.gaveta-puxador svg { width: 18px; height: 18px; flex: none; }
.gaveta-puxador .conta { margin-left: auto; color: var(--poeira); font-size: var(--t-micro); }
.gaveta[open] .gaveta-puxador { border-bottom: var(--borda); border-radius: var(--raio) var(--raio) 0 0; }

.gaveta-conteudo {
  display: grid; gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  padding: var(--e2);
}

.peca {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 3px;
  background: transparent;
  border: var(--borda); border-radius: var(--raio);
  color: var(--grafite); font: inherit; font-size: 10px;
  text-align: center; cursor: grab; touch-action: none;
  transition: border-color var(--rapido), color var(--rapido);
}
.peca:hover { border-color: var(--fosforo); color: var(--luz); }
.peca svg { width: 52px; height: 40px; pointer-events: none; }
.peca span { line-height: 1.2; }

/* --- area de trabalho (centro) --------------------------------- */

#obra { grid-area: obra; position: relative; background: var(--bancada); min-height: 0; }

/* Paineis laterais bem separados da bancada: eles sao "movel" e
   "colega de bancada", nao continuacao da mesa. */
#painel-pecas { border-right: 3px solid var(--linha-viva); box-shadow: 4px 0 14px rgba(0,0,0,.28); }
#painel-robo  { border-left: 3px solid var(--linha-viva); box-shadow: -4px 0 14px rgba(0,0,0,.28); }

/* dica de pino */
#dica-pino {
  position: absolute; z-index: 8; pointer-events: none;
  max-width: 260px; padding: 7px 10px;
  background: var(--casco); border: 1px solid var(--fosforo);
  border-radius: var(--raio); font-size: var(--t-min); line-height: 1.45;
}
#dica-pino b { display: block; color: var(--fosforo); }
#dica-pino span { display: block; color: var(--luz); }
#dica-pino em { display: block; color: var(--poeira); font-style: normal; font-size: var(--t-micro); margin-top: 3px; }

/* fios: acender ao passar o mouse, destacar quando selecionado */
.fio .alma { transition: stroke-width var(--rapido); }
.fio:hover { cursor: pointer; }
.fio:hover .alma { stroke-width: 8; }
.fio:hover .sombra { stroke: #FFFFFF; opacity: .5; }
.fio.sel .alma { stroke-width: 8; }
.fio.sel .sombra { stroke: var(--fosforo); opacity: 1; stroke-width: 12; }

.comp .alvo { cursor: pointer; }
.comp .alvo:hover { fill: rgba(92,224,122,.35); }

/* modos de uso no topo */
.modos { display: flex; gap: 4px; margin-left: var(--e4); }
.modos .btn { border-color: var(--linha-viva); }
.modos .btn[aria-pressed="true"] {
  background: var(--fosforo-op); border-color: var(--fosforo); color: var(--fosforo);
}

/* propriedades da peca selecionada */
#props {
  position: absolute; left: var(--e2); right: 62px; bottom: 92px; z-index: 6;
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  max-width: calc(100% - 24px);
  padding: 6px var(--e2);
  background: var(--casco); border: var(--borda); border-radius: var(--raio);
  font-size: var(--t-micro); color: var(--grafite);
}
#props b { color: var(--luz); font-weight: 500; }

#bancada { width: 100%; height: 100%; display: block; touch-action: none; cursor: default; }

/* A bancada tem faixas fixas e elas nao se cruzam:
   topo = ferramentas, direita = zoom, base = ponta + acoes.
   Foi assim que os botoes pararam de cair um sobre o outro no celular. */
.ferramentas {
  position: absolute; top: var(--e2); left: var(--e2);
  right: 62px;                      /* espaco reservado para a coluna do zoom */
  display: flex; gap: 5px;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: thin;
  z-index: 5;
}
.ferramentas::-webkit-scrollbar { height: 5px; }
.ferramentas .btn { flex: none; white-space: nowrap; }
.ferramentas .btn { background: var(--casco); }

/* Zoom numa coluna encostada na direita, no meio da altura:
   nunca encontra a fila de ferramentas nem a barra de baixo. */
.ferramentas-zoom {
  top: 50%; left: auto; right: var(--e2);
  transform: translateY(-50%);
  flex-direction: column; overflow: visible;
}
.ferramentas-zoom .btn { background: var(--casco); }

#lixeira {
  position: absolute; right: var(--e2); bottom: 92px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--e2);
  background: var(--casco);
  border: 1px dashed var(--linha-viva); border-radius: var(--raio);
  color: var(--poeira); font-size: var(--t-micro);
  z-index: 5;
}
#lixeira svg { width: 22px; height: 22px; }
#lixeira.mirada { border-color: var(--brasa); color: var(--brasa); }

/* Faixa de dica logo abaixo das ferramentas. Antes ela morava na base
   e ficava permanentemente escondida atras dos botoes de acao. */
.dica-canto {
  position: absolute; left: var(--e2); right: 62px; top: 46px;
  margin: 0;
  color: var(--poeira); font-size: var(--t-micro);
  pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- painel do GabuTRON (direita) ------------------------------ */

#painel-robo {
  grid-area: robo;
  display: flex; flex-direction: column;
  background: var(--casco);
  border-left: var(--borda);
  min-height: 0;
}

#retrato { padding: var(--e3) var(--e3) 0; }
#retrato svg { width: 100%; height: auto; max-height: 190px; display: block; }

.fala {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  margin: var(--e2) var(--e3);
  border: var(--borda); border-radius: var(--raio);
  background: var(--bancada);
}
.fala-topo {
  display: flex; align-items: center; gap: var(--e2);
  padding: 5px var(--e2); border-bottom: var(--borda);
  color: var(--poeira); font-size: var(--t-micro);
}
.fala-topo .btn { margin-left: auto; }
.fala-texto {
  flex: 1; overflow-y: auto;
  padding: var(--e2); font-size: var(--t-min); line-height: 1.6;
}
.fala-texto .cursor { color: var(--fosforo); }

.abas-info { display: flex; gap: 4px; padding: 0 var(--e3) var(--e3); flex-wrap: wrap; }
.abas-info .btn { flex: 1; justify-content: center; }

/* --- rodape ---------------------------------------------------- */

#barra-base {
  grid-area: base;
  display: flex; align-items: center; gap: var(--e3);
  padding: 0 var(--e3);
  background: var(--casco);
  border-top: var(--borda);
  font-size: var(--t-micro); color: var(--grafite);
}
#barra-base a { color: var(--grafite); }
#barra-base a:hover { color: var(--fosforo); }
#barra-base .repo { margin-left: auto; display: flex; align-items: center; gap: 5px; }
#barra-base .repo svg { width: 14px; height: 14px; }

/* --- abas de celular (escondidas no computador) ---------------- */

#abas-mobile { display: none; }

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 1180px) {
  :root { --painel-l: 226px; --painel-r: 268px; }
}

@media (max-width: 900px) {
  #app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--barra-topo) minmax(0, 1fr) 44px var(--barra-base);
    grid-template-areas:
      "topo"
      "obra"
      "abas"
      "base";
  }

  #painel-pecas, #painel-robo {
    position: fixed; inset: var(--barra-topo) 0 calc(var(--barra-base) + 44px);
    z-index: 20; border: 0;
  }
  #painel-pecas[hidden], #painel-robo[hidden] { display: none; }

  #obra { grid-area: obra; }

  #abas-mobile {
    grid-area: abas;
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: var(--casco); border-top: var(--borda);
  }
  #abas-mobile button {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: transparent; border: 0; border-right: var(--borda);
    color: var(--grafite); font: inherit; font-size: var(--t-min);
    cursor: pointer;
  }
  #abas-mobile button:last-child { border-right: 0; }
  #abas-mobile button[aria-selected="true"] { color: var(--fosforo); box-shadow: inset 0 2px 0 var(--fosforo); }

  .painel-estado { gap: var(--e2); font-size: var(--t-micro); }
  .marca span { display: none; }
  #barra-base .creditos { display: none; }
  #retrato svg { max-height: 150px; }
}

@media (max-width: 560px) {
  .leitura.oculta-min { display: none; }
}

/* peca sendo arrastada da paleta ate a bancada */
#fantasma {
  position: fixed; z-index: 70; pointer-events: none;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 8px;
  background: var(--casco);
  border: 1px dashed var(--linha-viva); border-radius: var(--raio);
  color: var(--grafite); font-size: var(--t-micro);
  opacity: .9;
}
#fantasma.valido { border: 1px solid var(--fosforo); color: var(--fosforo); }
#fantasma.esperando { opacity: .45; border-style: dotted; }
#fantasma.pronto { opacity: .95; border-style: solid; }

/* ---------- barra de acoes por toque ----------
   Tudo que no computador e tecla (Delete, R, Tab, Esc) precisa ter
   botao, senao no celular o aluno fica preso. */
#acoes-toque {
  position: absolute; left: var(--e2); right: 62px; bottom: var(--e2); z-index: 6;
  display: flex; gap: 5px;
  overflow-x: auto;
}
#acoes-toque .btn { flex: none; white-space: nowrap; }
#acoes-toque .btn { background: var(--casco); font-size: var(--t-micro); }

/* chip da ponta da vez: no celular nao existe cursor para acompanhar,
   entao a informacao mora fixa na tela */
#ponta-chip {
  position: absolute; left: var(--e2); right: 62px; bottom: 52px; z-index: 6;
  display: flex; align-items: center; gap: 6px;
  padding: 5px 9px;
  background: var(--casco); border: 1px solid var(--fosforo);
  border-radius: var(--raio); font-size: var(--t-micro); color: var(--luz);
  cursor: pointer;
}
#ponta-chip .forma { font-size: 15px; }
#ponta-chip em { color: var(--poeira); font-style: normal; }

/* com ferramenta na mao, o fio deixa de interceptar o clique */
#bancada.com-ferramenta #camada-fios { pointer-events: none; }
.comp .acao { cursor: pointer; }

@media (max-width: 900px) {
  .dica-canto { display: none; }
  #acoes-toque .btn { min-height: 40px; padding: 7px 11px; }
  .ferramentas .btn { min-height: 38px; }
  .ferramentas-zoom .btn { min-width: 40px; min-height: 40px; }
  #props { bottom: 96px; font-size: 11px; }
  #lixeira { bottom: 100px; padding: 5px; }
  #lixeira svg { width: 18px; height: 18px; }
  #lixeira span { display: none; }
}

/* Aviso curto no meio da bancada, para instrucoes de toque. */
#recado-toque {
  position: absolute; left: 50%; top: 50%; z-index: 9;
  transform: translate(-50%, -50%);
  padding: 10px 16px;
  background: var(--casco); border: 1px solid var(--fosforo);
  border-radius: var(--raio); color: var(--luz); font-size: var(--t-min);
  text-align: center; pointer-events: none;
}
@media (min-width: 901px) {
  #acoes-toque { opacity: .85; }
}

/* Em tela bem estreita o titulo nao cabe e ficava cortado. Some o
   texto e o icone cresce: a marca continua reconhecivel. */
@media (max-width: 560px) {
  .marca b { display: none; }
  .marca svg { width: 34px; height: 34px; }
  #barra-topo { gap: var(--e2); padding: 0 var(--e2); }
  .modos { margin-left: var(--e2); }
  .modos .btn { font-size: 11px; padding: 5px 7px; }
}
@media (max-width: 400px) {
  .marca svg { width: 30px; height: 30px; }
  .painel-estado { gap: 5px; }
}