/* ══════════════════════════════════════════════════════════════════════
   PROMETHEUS // OFICINA
   Coluna de criação + painel de sabedoria. Código sempre selecionável.
   ══════════════════════════════════════════════════════════════════════ */

/* ── barra da jaula: o que ela NÃO tem, sempre à vista ─────────────── */
.of-jaula {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 9px 12px; margin-bottom: 11px;
  background: rgba(0, 24, 40, .4);
  border: 1px solid rgba(0, 212, 255, .18);
  border-left: 3px solid #39e6a3;
  font-family: 'Share Tech Mono', monospace; font-size: 9.5px;
}
.of-jaula > b {
  font-family: 'Orbitron', sans-serif; font-size: 10px;
  letter-spacing: .18em; color: #7cecff; margin-right: 4px;
}
.of-selo {
  padding: 2px 7px; letter-spacing: .08em;
  border: 1px solid currentColor;
}
.of-selo.bom  { color: #39e6a3; }
.of-selo.ruim { color: #ff536e; }
.of-cotas { color: #5f8ba1; margin-left: auto; letter-spacing: .06em; }

/* ── abas ──────────────────────────────────────────────────────────── */
.of-abas {
  display: flex; align-items: center; gap: 1px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(0, 212, 255, .16);
}
.of-abas button {
  padding: 8px 16px; background: rgba(2, 6, 12, .8); border: 0; cursor: pointer;
  font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: .16em;
  color: #5f8ba1; transition: .18s;
}
.of-abas button:hover { color: #a8d8ea; }
.of-abas button.on { color: #7cecff; box-shadow: inset 0 -2px 0 #00d4ff; }
.of-contagem {
  margin-left: auto; padding-right: 4px;
  font-family: 'Share Tech Mono', monospace; font-size: 9px; color: #4b7d92;
}

/* ── grade: criação à esquerda, sabedoria à direita ────────────────── */
.of-grade { display: grid; grid-template-columns: 1fr 340px; gap: 14px; align-items: start; }
.of-principal { min-width: 0; }        /* sem isto o <pre> estoura a grade */
.escondido { display: none; }

/* ── entradas ──────────────────────────────────────────────────────── */
.of-rot {
  display: block; margin: 10px 0 5px;
  font-family: 'Share Tech Mono', monospace; font-size: 9px;
  letter-spacing: .14em; color: #4f7f94; text-transform: uppercase;
}
.of-rot em { font-style: normal; opacity: .6; text-transform: none; }
.of-rot.erro { color: #ff8ba0; }
.of-entrada {
  width: 100%; padding: 9px 11px;
  background: rgba(2, 6, 12, .92);
  border: 1px solid rgba(0, 212, 255, .22);
  color: #dff6ff; font-family: 'Share Tech Mono', monospace; font-size: 11.5px;
  line-height: 1.55; resize: vertical;
}
.of-entrada.curta { resize: none; }
.of-entrada:focus { outline: none; border-color: rgba(0, 212, 255, .7); }
.of-entrada::placeholder { color: #3d6273; }

.of-linha-btn { display: flex; align-items: center; gap: 11px; margin-top: 9px; }
.of-btn {
  padding: 9px 16px; cursor: pointer;
  background: rgba(4, 12, 22, .95);
  border: 1px solid rgba(0, 212, 255, .4); color: #dff6ff;
  font-family: 'Orbitron', sans-serif; font-weight: 700;
  font-size: 10.5px; letter-spacing: .14em; transition: .2s;
}
.of-btn:hover:not(:disabled) { border-color: #00d4ff; box-shadow: 0 0 14px rgba(0, 170, 255, .28); }
.of-btn:disabled { opacity: .5; cursor: wait; }
.of-btn.rodar   { border-color: rgba(57, 230, 163, .6); color: #39e6a3; }
.of-btn.rodar:hover:not(:disabled) { border-color: #39e6a3; box-shadow: 0 0 14px rgba(57, 230, 163, .3); }
.of-btn.recusar { border-color: rgba(255, 83, 110, .5); color: #ff8ba0; }
.of-btn.recusar:hover { border-color: #ff536e; }
.of-btn.ensinar { width: 100%; margin-top: 9px; }
.of-aviso {
  font-family: 'Share Tech Mono', monospace; font-size: 9px;
  color: #ffc857; letter-spacing: .05em;
}

/* ── proposta ──────────────────────────────────────────────────────── */
.of-proposta, .of-saida {
  margin-top: 13px; padding: 12px 13px;
  background: rgba(4, 12, 21, .84);
  border: 1px solid rgba(0, 212, 255, .14);
  border-left: 3px solid #00d4ff;
}
.of-saida.bom  { border-left-color: #39e6a3; }
.of-saida.ruim { border-left-color: #ff536e; }
.of-prop-topo {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  margin-bottom: 8px;
}
.of-prop-topo b {
  font-family: 'Orbitron', sans-serif; font-size: 10.5px;
  letter-spacing: .16em; color: #7cecff;
}
.of-saida.ruim .of-prop-topo b { color: #ff8ba0; }
.of-meta {
  font-family: 'Share Tech Mono', monospace; font-size: 9px; color: #5f8ba1;
}
.of-explica {
  margin-bottom: 11px; padding-left: 10px;
  border-left: 2px solid rgba(0, 212, 255, .2);
  font-family: 'Share Tech Mono', monospace; font-size: 11px;
  color: #b9dcea; line-height: 1.62; white-space: pre-wrap;
}
.of-semcodigo, .of-motivo, .of-cortado {
  padding: 8px 10px; margin-bottom: 9px;
  background: rgba(255, 200, 87, .07);
  border-left: 2px solid #ffc857;
  font-family: 'Share Tech Mono', monospace; font-size: 10px;
  color: #ffc857; line-height: 1.55;
}
.of-saida.ruim .of-motivo { background: rgba(255, 83, 110, .08); border-left-color: #ff536e; color: #ff8ba0; }

/* ── bloco de código: copiável, selecionável, editável ─────────────── */
.of-bloco { margin-bottom: 11px; border: 1px solid rgba(0, 212, 255, .16); }
.of-bloco-topo {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 9px;
  background: rgba(0, 24, 40, .5);
  border-bottom: 1px solid rgba(0, 212, 255, .14);
}
.of-ling {
  font-family: 'Share Tech Mono', monospace; font-size: 9px;
  letter-spacing: .12em; color: #7cecff; text-transform: uppercase;
}
.of-linhas { font-family: 'Share Tech Mono', monospace; font-size: 9px; color: #4b7d92; }
.of-copiar {
  margin-left: auto; padding: 3px 10px; cursor: pointer;
  background: rgba(2, 6, 12, .9);
  border: 1px solid rgba(0, 212, 255, .3); color: #9fd6e8;
  font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: .1em;
  transition: .18s;
}
.of-copiar:hover { border-color: #00d4ff; color: #dff6ff; }
.of-copiar.feito { border-color: #39e6a3; color: #39e6a3; }

/* SELEÇÃO LIVRE É REQUISITO, NÃO DETALHE.
   O Ponca pediu "copiar ou marcar o que ele escreveu igual aqui".
   `user-select: text` explícito porque alguns temas de app zeram isso
   no container pai, e aí não dá para arrastar o mouse sobre o código. */
.of-codigo {
  margin: 0; padding: 11px 12px;
  max-height: 460px; overflow: auto;
  background: rgba(1, 4, 9, .96);
  color: #c8ecff;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 11.5px; line-height: 1.6;
  white-space: pre; tab-size: 2;
  user-select: text; -webkit-user-select: text;
  outline: none;
}
.of-codigo:focus { box-shadow: inset 0 0 0 1px rgba(0, 212, 255, .4); }

.of-decisao { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* ── saída da execução ─────────────────────────────────────────────── */
.of-console {
  margin: 0 0 9px; padding: 10px 12px;
  max-height: 320px; overflow: auto;
  background: rgba(1, 4, 9, .96);
  border-left: 2px solid rgba(57, 230, 163, .5);
  color: #b9f0d4;
  font-family: 'Share Tech Mono', monospace; font-size: 11px; line-height: 1.58;
  white-space: pre-wrap; word-break: break-word;
  user-select: text; -webkit-user-select: text;
}
.of-console.erro { border-left-color: #ff536e; color: #ffb3c0; }
.of-rodando {
  padding: 18px; text-align: center;
  font-family: 'Share Tech Mono', monospace; font-size: 10px;
  letter-spacing: .1em; color: #7cecff;
}
.of-rodando::after {
  content: ""; display: block; width: 34px; height: 2px; margin: 10px auto 0;
  background: #00d4ff; animation: ofPulsa 1s ease-in-out infinite alternate;
}
@keyframes ofPulsa { from { opacity: .2; width: 16px; } to { opacity: 1; width: 48px; } }

/* ── biblioteca ────────────────────────────────────────────────────── */
.of-lateral {
  padding: 12px;
  background: rgba(2, 8, 15, .7);
  border: 1px solid rgba(0, 212, 255, .16);
  position: sticky; top: 8px;
  max-height: calc(100vh - 120px); overflow-y: auto;
}
.of-lat-topo { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.of-lat-topo b {
  font-family: 'Orbitron', sans-serif; font-size: 11px;
  letter-spacing: .18em; color: #7cecff;
}
.of-lat-topo span { font-family: 'Share Tech Mono', monospace; font-size: 9px; color: #4b7d92; }
.of-biblio { margin-top: 13px; border-top: 1px solid rgba(0, 212, 255, .12); padding-top: 11px; }
.of-peca {
  margin-bottom: 9px; padding: 8px 9px;
  background: rgba(4, 12, 21, .8);
  border-left: 2px solid rgba(0, 212, 255, .35);
}
.of-peca-topo { display: flex; align-items: center; gap: 7px; }
.of-peca-topo b {
  font-family: 'Share Tech Mono', monospace; font-size: 10.5px;
  color: #dff6ff; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.of-peca-topo em {
  font-style: normal; padding: 1px 6px;
  border: 1px solid rgba(0, 212, 255, .3);
  font-family: 'Share Tech Mono', monospace; font-size: 8.5px;
  letter-spacing: .1em; color: #7cecff;
}
.of-apagar {
  background: none; border: 0; cursor: pointer;
  color: #5f8ba1; font-size: 12px; line-height: 1; padding: 2px 4px;
}
.of-apagar:hover { color: #ff536e; }
.of-peca-previa, .of-peca-meta {
  display: block; margin-top: 4px;
  font-family: 'Share Tech Mono', monospace; font-size: 9px;
  color: #6e97a9; line-height: 1.5;
}
.of-peca-meta { color: #45707f; }

/* ── registro ──────────────────────────────────────────────────────── */
.of-reg-conta {
  margin-bottom: 10px;
  font-family: 'Share Tech Mono', monospace; font-size: 9px; color: #4b7d92;
}
.of-reg-item {
  margin-bottom: 10px; padding: 9px 11px;
  background: rgba(4, 12, 21, .8);
  border-left: 2px solid rgba(0, 212, 255, .3);
}
.of-reg-item.aprovou  { border-left-color: #39e6a3; }
.of-reg-item.recusou  { border-left-color: #ff536e; }
.of-reg-item.executou { border-left-color: #7cecff; }
.of-reg-item.ensinou  { border-left-color: #c89bff; }
.of-reg-item.pensou_falhou, .of-reg-item.executou_falhou { border-left-color: #ffc857; }
.of-reg-topo { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.of-reg-topo b {
  font-family: 'Orbitron', sans-serif; font-size: 9.5px;
  letter-spacing: .14em; color: #a8d8ea;
}
.of-reg-topo span { font-family: 'Share Tech Mono', monospace; font-size: 9px; color: #4b7d92; }
.of-reg-campo {
  display: block; margin: 3px 0;
  font-family: 'Share Tech Mono', monospace; font-size: 10px;
  color: #b9dcea; line-height: 1.55;
}
.of-reg-campo i {
  display: inline-block; min-width: 66px;
  font-style: normal; color: #4f7f94; font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase;
}
.of-reg-campo code {
  display: block; margin-top: 3px; padding: 6px 8px;
  background: rgba(1, 4, 9, .9); color: #b9f0d4;
  white-space: pre-wrap; word-break: break-word;
  user-select: text; -webkit-user-select: text;
}
.of-reg-cod {
  margin: 6px 0 0; padding: 9px 11px;
  max-height: 300px; overflow: auto;
  background: rgba(1, 4, 9, .96); color: #c8ecff;
  font-family: 'Share Tech Mono', monospace; font-size: 10.5px; line-height: 1.55;
  white-space: pre; user-select: text; -webkit-user-select: text;
}

.of-vazio {
  padding: 22px 14px; text-align: center;
  font-family: 'Share Tech Mono', monospace; font-size: 10px;
  color: #5f8ba1; line-height: 1.7;
}
.of-vazio small { color: #45707f; font-size: 9px; }

/* ── celular: a biblioteca desce para baixo ────────────────────────── */
@media (max-width: 900px) {
  .of-grade { grid-template-columns: 1fr; }
  .of-lateral { position: static; max-height: none; }
  .of-cotas { margin-left: 0; width: 100%; }
  .of-codigo { font-size: 11px; max-height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  .of-rodando::after { animation: none; }
}

/* ── janelinha da OFICINA na home ──────────────────────────────────
   Três barras que sobem e descem em tempos diferentes: sugere trabalho
   acontecendo sem prometer que algo está rodando agora. */
.oficina-mini {
  display: flex; align-items: flex-end; justify-content: center; gap: 5px;
  height: 46px; margin: 8px 0 4px;
}
.oficina-mini i {
  display: block; width: 7px; height: 30%;
  background: linear-gradient(180deg, #00d4ff, rgba(0, 212, 255, .25));
  animation: ofBarra 1.9s ease-in-out infinite alternate;
}
.oficina-mini i:nth-child(2) { animation-delay: .32s; }
.oficina-mini i:nth-child(3) { animation-delay: .64s; }
@keyframes ofBarra { from { height: 22%; opacity: .5; } to { height: 92%; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .oficina-mini i { animation: none; height: 60%; } }