* { box-sizing: border-box; }
body {
  margin: 0;
  overscroll-behavior-x: none;
}
/* ── véu de arranque: logo + texto enquanto a app inicializa ──────────────── */
/* A UI (árvore, abas, preview, terminais…) é montada por JS: entre o primeiro
   paint e o fim do arranque a janela ficava vazia, como se a página não tivesse
   carregado. Este véu cobre-a com um sinal de "a iniciar" e sai sozinho no fim
   do arranque (ver hideBoot) — desvanecendo e sendo retirado do documento, para
   não apanhar cliques nem ocupar lugar. Fica na camada mais alta da UI (acima
   dos menus de contexto, 2000, e dos modais, 1200): é a primeira e a última
   coisa em cena. */
.yrkit-boot {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /* translúcido em vez de opaco: a UI que está a ser montada por trás continua
     a insinuar-se, e o arranque deixa de parecer um ecrã cheio e fechado. O
     desfoque (mesmo tom dos modais da UI) mantém o logo e o texto legíveis
     por cima do que já está pintado. */
  background: rgba(30, 30, 30, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: #858585;
  /* o véu vive FORA do shell, onde --yrkit-font-mono ainda não está definida:
     a mesma pilha é declarada aqui. Monospace porque o véu é um SINAL TÉCNICO
     (a app está a arrancar), e a fonte de largura fixa lê-se como "terminal" —
     distingue-o do texto normal da UI e não "dança" enquanto o texto muda. */
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.4px;
  transition: opacity 0.25s ease;
}
/* arranque concluído: esmaece e deixa de apanhar cliques (o JS tira-o depois) */
.yrkit-boot-done {
  opacity: 0;
  pointer-events: none;
}
/* o logo animado (GIF) ocupa o lugar do spinner: a animação vem do próprio
   ficheiro, não do CSS. O tamanho é fixo para o véu não "saltar" quando a
   imagem chega, e o object-fit garante que o logo caiba inteiro (sem
   distorcer) seja qual for a proporção do ficheiro. */
.yrkit-boot-logo {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.yrkit-tree {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 240px;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  background: #252526;
  color: #cccccc;
  font-family: var(--yrkit-font-sans);
  font-size: 12px;
  line-height: 1.4;
  user-select: none;
}
.yrkit-tree-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
/* rodapé do projeto: o projeto aberto (gravado pelo "Open project" em BUILDS).
   Tom teal igual ao nó BUILDS — o projeto é filho dele, e a cor liga
   visualmente os dois. Vive FORA da árvore (filho do shell) e fica FIXO no
   fundo da PÁGINA inteira (largura total), para continuar visível/clicável
   mesmo com o explorador escondido (desktop) ou recolhido em sobreposição
   (mobile). Como é fixo, não ocupa espaço no fluxo: quem reserva a altura é o
   próprio shell, que encolhe --yrkit-project-h (ver .yrkit-shell) para o
   rodapé nunca cobrir conteúdo. O z-index fica acima da árvore (100), da
   sobreposição (99) e do botão de alternar (101), mas abaixo do menu de
   contexto (1000) e do modal de ações (1200). */
.yrkit-tree-project {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 102;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: var(--yrkit-project-h, 30px);
  padding: 0 10px;
  border-top: 1px solid #1e1e1e;
  background: linear-gradient(90deg, #10302b, #252526 70%);
  color: #4ec9b0;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
}
/* engrenagem do projeto: abre o modal das configurações */
.yrkit-tree-project-gear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #4ec9b0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-tree-project-gear:hover {
  background: rgba(78, 201, 176, 0.18);
  color: #7fe3cc;
}
/* lista de projetos: abre um dropdown com TODOS os projetos disponíveis — os
   filhos diretos do BUILDS e as pastas `.yrout_*` espalhadas pela TREE (um
   projeto construído a partir de um .yr vive ao lado do ficheiro de origem).
   Vive no CANTO ESQUERDO da barra (o primeiro item): é a entrada da barra, e
   é ali que se procura "trocar de projeto". */
.yrkit-tree-project-list,
.yrkit-tree-project-views {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #4ec9b0;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-tree-project-list:hover,
.yrkit-tree-project-views:hover {
  background: rgba(78, 201, 176, 0.18);
  color: #7fe3cc;
}
/* ícones dos botões da barra (prancheta com a lista de projetos, página com as
   views do projeto aberto): o traço herda a cor do botão */
.yrkit-tree-project-list-icon,
.yrkit-tree-project-views-icon {
  display: block;
  width: 14px;
  height: 14px;
}
/* dropdown aberto: botão realçado */
.yrkit-tree-project-list.yrkit-tree-project-list-active {
  background: rgba(78, 201, 176, 0.28);
  color: #ffffff;
}
/* modo views ATIVO: o botão das views já não "abre" — passa a FECHAR. Por isso
   troca de cara: o ícone da página dá lugar a um "×" avermelhado (o mesmo tom
   de fechar/descartar do resto da UI) e o realce sai do teal para o vermelho.
   Assim, ao olhar para a barra, vê-se logo que o próximo clique sai do modo e
   devolve a edição normal. */
.yrkit-tree-project-views.yrkit-tree-project-views-active {
  background: rgba(244, 135, 113, 0.18);
  color: #f48771;
}
.yrkit-tree-project-views.yrkit-tree-project-views-active:hover {
  background: rgba(244, 135, 113, 0.32);
  color: #ff9c87;
}
/* o "×" substitui o ícone: o SVG sai e o glifo entra como pseudo-elemento, sem
   precisar de markup nenhum no HTML do botão */
.yrkit-tree-project-views.yrkit-tree-project-views-active
  .yrkit-tree-project-views-icon {
  display: none;
}
.yrkit-tree-project-views.yrkit-tree-project-views-active::after {
  content: "\00D7";
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
/* ABRINDO / FECHANDO as views: o botão mostra uma rodinha no lugar do ícone
   (ou do "×") até terminar. O interruptor mexe com VÁRIAS abas e lê pastas do
   backend, pelo que o intervalo não é instantâneo — sem sinal, parecia que o
   clique não tinha pegado. A rodinha é feita em CSS (currentColor): teal ao
   abrir, vermelho ao fechar — o logo animado fica só nos véus de carregamento. */
.yrkit-tree-project-views.yrkit-tree-project-views-busy
  .yrkit-tree-project-views-icon {
  display: none;
}
/* A rodinha ocupa o lugar do ícone (ou do "×"). border-top transparente é o que
   cria o "vão" que gira; a cor vem do currentColor do botão. 12px é o mesmo
   tamanho dos outros glifos da barra, para o botão não "saltar" ao trocar de
   cara. */
.yrkit-tree-project-views.yrkit-tree-project-views-busy::after,
.yrkit-tree-project-views.yrkit-tree-project-views-active.yrkit-tree-project-views-busy::after {
  content: "";
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: yrkit-views-spin 0.7s linear infinite;
}
@keyframes yrkit-views-spin {
  to { transform: rotate(360deg); }
}
/* dropdown dos projetos: abre ACIMA do botão (a barra do projeto vive no fundo
   da página) e fica ANCORADO PELO FUNDO — cresce para CIMA, pelo que nunca sai
   da tela, mesmo com muitos projetos. O teto de altura é calculado por JS
   (positionProjectsMenu) conforme o espaço livre acima do botão, e a lista rola
   AQUI DENTRO: nenhum projeto fica inalcançável. Mesmo tom/camada do menu de
   contexto (z-index 2000), para nunca ficar coberto pela barra (102) nem pelos
   modais (1200). */
.yrkit-tree-projects-menu {
  position: fixed;
  z-index: 2000;
  /* coluna: a lista ocupa o espaço livre e rola por dentro, e o "Create
     project" fica encostado ao fundo, sempre à vista (mesmo com muitos
     projetos) — ver .yrkit-tree-projects-list / .yrkit-tree-projects-create */
  display: flex;
  flex-direction: column;
  min-width: 220px;
  max-width: 380px;
  max-height: calc(100svh - 8px);
  padding: 4px 0;
  overflow: hidden;
  background: #3c3c3c;
  border: 1px solid #454545;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  color: #cccccc;
  font-family: var(--yrkit-font-sans);
  font-size: 13px;
}
.yrkit-tree-projects-menu-hidden {
  display: none;
}
/* lista de projetos: o único troço que rola (min-height: 0 é o que permite ao
   flex encolhê-la abaixo do conteúdo). Rolar aqui não deve "transbordar" para o
   scroll da página. */
.yrkit-tree-projects-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* "Create project": no FUNDO do dropdown, separado da lista por um fio — é uma
   AÇÃO, não um projeto da lista, por isso não ganha o ✓ nem o realce dos itens.
   Tom teal, o mesmo dos outros controlos de projeto na barra. */
.yrkit-tree-projects-create {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 16px;
  background: none;
  border: none;
  border-top: 1px solid #5a5a5a;
  color: #4ec9b0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
/* sinal de "criar": pseudo-elemento, para o markup do botão ficar só o rótulo */
.yrkit-tree-projects-create::before {
  content: "\002B";
  font-size: 14px;
  line-height: 1;
}
.yrkit-tree-projects-create:hover {
  background: #094771;
  color: #7fe3cc;
}
.yrkit-tree-projects-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 16px;
  background: none;
  border: none;
  color: #cccccc;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.yrkit-tree-projects-item:hover {
  background: #094771;
}
/* projeto ABERTO: nome em teal (o tom da barra do projeto) + ✓ na margem */
.yrkit-tree-projects-item-active {
  color: #4ec9b0;
  font-weight: 600;
}
.yrkit-tree-projects-item-check {
  flex: 0 0 12px;
  color: #4ec9b0;
  font-size: 11px;
}
.yrkit-tree-projects-item-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* caminho curto do projeto construído a partir de um .yr (`.yrout_*`): mostra só
   os DOIS diretórios-pai, encostado à direita do nome. Discreto (mono, cinza),
   para não competir com o nome — que é o que se procura no dropdown. */
.yrkit-tree-projects-item-path {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #858585;
  font-family: var(--yrkit-font-mono);
  font-size: 11px;
  text-overflow: ellipsis;
}
/* engrenagem de cada projeto da lista: abre o modal das configurações DESSE
   projeto, sem ser preciso abri-lo. Encostada à direita; o resto do item
   continua a ser o alvo de "abrir projeto". */
.yrkit-tree-projects-item-gear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: -8px;
  border-radius: 4px;
  color: #858585;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
/* no item sob o cursor a engrenagem fica legível (o nome é que manda) */
.yrkit-tree-projects-item:hover .yrkit-tree-projects-item-gear {
  color: #cccccc;
}
.yrkit-tree-projects-item-gear:hover {
  background: rgba(78, 201, 176, 0.22);
  color: #7fe3cc;
}
/* "play" de cada projeto da lista: abre o projeto E as views dele no editor —
   as duas ações que se encadeiam quando se passa a trabalhar noutro projeto.
   Fica antes da engrenagem (a ação principal primeiro, os settings no fim) e,
   como ela, é um <span> com role de botão: o item já é um <button>, e um botão
   dentro de outro é inválido (o browser desmanhava o item). */
.yrkit-tree-projects-item-play {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: #858585;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}
/* no item sob o cursor o glifo fica legível (o nome é que manda) */
.yrkit-tree-projects-item:hover .yrkit-tree-projects-item-play {
  color: #cccccc;
}
.yrkit-tree-projects-item-play:hover {
  background: rgba(78, 201, 176, 0.22);
  color: #7fe3cc;
}
.yrkit-tree-projects-empty {
  padding: 6px 16px;
  color: #858585;
  font-size: 12px;
}
/* ── abas de VIEW (modo "navegador interno" de views) ─────────────────────── */
/* Enquanto as views de um projeto estão abertas, a barra mostra SÓ elas. O tom
   desloca-se para o AZUL (o mesmo dos estados ativos da UI): distingue-as das
   abas normais de ficheiros sem gritar — a cor não é a única pista, o tom do
   texto acompanha. Azul e não teal: o verde/teal já é a cor de VÁRIOS controlos
   normais (barra do projeto, nós BUILDS, botões da barra), pelo que tingir as
   views do mesmo tom não as separava do resto — era isso que tornava o modo
   difícil de reconhecer. */
.yrkit-editor-tab.yrkit-editor-tab-view {
  background: #1e2b3a;
  color: #9ec9ef;
}
/* view ativa: um pouco mais escura que as irmãs, com um fio azul em baixo —
   é o que a separa das abas normais ativas (fundo #1e1e1e, sem fio) */
.yrkit-editor-tab.yrkit-editor-tab-view.yrkit-editor-tab-active {
  background: #16202e;
  color: #dbeaff;
  box-shadow: inset 0 -2px 0 rgba(77, 170, 252, 0.6);
}
/* ── modo views aberto: as barras ficam em AZUL ───────────────────────────── */
/* Com as views abertas, a classe .yrkit-views-open vive no shell (posta por
   applyViewsModeClass, ao lado do renderViewsButton). É ela que muda a cor da
   BARRA DO PROJETO (o rodapé) e da BARRA DE NAVEGAÇÃO (a barra de abas do
   editor): assim vê-se de relance, em qualquer uma delas, que se está no modo
   "navegador interno" e não na edição normal de ficheiros.
   AZUL e não teal/verde: o verde já é a cor de vários controlos NORMAtivos da
   UI (botões da barra do projeto, nós BUILDS, tooltips de estado), pelo que as
   barras tingidas de teal liam-se como "mais do mesmo" — o modo não se
   distinguia. O azul é o tom dos estados ATIVOS/ligados da UI (botão Save, fio
   da aba ativa, ferramentas ligadas), que é exatamente o que este modo é: um
   estado ligado, alternativo à edição de ficheiros. */
.yrkit-shell.yrkit-views-open .yrkit-editor-bar {
  background: #1a2333;
  box-shadow: inset 0 -1px 0 rgba(77, 170, 252, 0.55);
}
/* a faixa das abas acompanha a barra (é o mesmo plano, o fundo é dela) */
.yrkit-shell.yrkit-views-open .yrkit-editor-tabs {
  background: #1a2333;
}
/* barra do projeto: o gradiente desloca-se do azul escuro para o tom da barra
   de abas e a borda superior ganha o mesmo fio, ligando as duas barras */
.yrkit-shell.yrkit-views-open .yrkit-tree-project {
  background: linear-gradient(90deg, #16304d, #1a2333 70%);
  border-top-color: rgba(77, 170, 252, 0.55);
  color: #9ccdff;
}
/* botão do terminal na barra do projeto (ocupou o lugar do antigo botão do
   editor, .yrkit-editor-toggle-term): mesmo tom teal dos outros controlos da
   barra, para se integrar no rodapé */
.yrkit-tree-project-term {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #4ec9b0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-tree-project-term:hover {
  background: rgba(78, 201, 176, 0.18);
  color: #7fe3cc;
}
/* terminal aberto: botão realçado */
.yrkit-tree-project-term.yrkit-tree-project-term-active {
  background: rgba(78, 201, 176, 0.28);
  color: #ffffff;
}
/* ações do projeto (chips vindos do backend): vivem na própria barra */
.yrkit-tree-project-actions {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.yrkit-tree-project-actions::-webkit-scrollbar {
  display: none;
}
/* correr as ações marcadas, a partir da barra do projeto */
.yrkit-tree-project-run-flow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: #0e639c;
  border: none;
  border-radius: 4px;
  color: #ffffff;
  font-size: 11px;
  cursor: pointer;
}
.yrkit-tree-project-run-flow:hover {
  background: #1177bb;
}
.yrkit-tree-project-run-flow:disabled {
  background: #3a3d41;
  color: #909090;
  cursor: default;
}
/* ícones das ações da barra (o "correr selecionadas" e os chips build/serve/
   deploy): herdam a cor do botão e ficam alinhados como os outros glifos */
.yrkit-tree-act-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  line-height: 1;
}
.yrkit-tree-act-icon svg {
  display: block;
}
/* chip que mostra um ícone em vez do rótulo: menos recuo à esquerda, para o
   glifo não ficar deslocado dentro da pílula */
.yrkit-tree-act-compact {
  padding-left: 8px;
}
.yrkit-tree-project-hidden {
  display: none;
}
/* "cubo de build": quadradinho com brilho, pulsando devagar para dar vida */
.yrkit-tree-project-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #4ec9b0;
  box-shadow: 0 0 8px #4ec9b0;
  animation: yrkit-project-pulse 2.4s ease-in-out infinite;
}
@keyframes yrkit-project-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
/* nome do projeto: SEMPRE por extenso — é o que diz em que projeto se está a
   trabalhar, e um nome cortado ("meu-proj…") não cumpre isso. Cresce com o
   conteúdo e NÃO encolhe: quem cede espaço é a faixa de ações, que já rola na
   horizontal. Um nome maior que a barra inteira é cortado pelo overflow dela
   (caso extremo), e aí o title continua a mostrar o nome completo. */
.yrkit-tree-project-name {
  flex: 0 0 auto;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.yrkit-tree-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 4px 0;
  overflow: auto;
}
.yrkit-tree-node {
  padding: 2px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.yrkit-tree-node:hover {
  background: #2a2d2e;
}
/* nó selecionado pela navegação por teclado */
.yrkit-tree-node.yrkit-tree-selected {
  background: #094771;
}
.yrkit-tree-node.yrkit-tree-selected .yrkit-tree-label {
  color: #ffffff;
}
/* o corpo da árvore recebe foco para captar as setas, sem anel visível */
.yrkit-tree-body:focus {
  outline: none;
}
.yrkit-tree-menu {
  position: fixed;
  /* camada mais alta da UI: acima do rodapé do projeto (102), do botão de
     alternar (101) e dos modais (1200). O "Delete", no fundo do menu, nunca
     pode ficar coberto pelo rodapé do projeto */
  z-index: 2000;
  min-width: 160px;
  /* nunca ultrapassa a janela: perto do fundo, sobe (ver openMenu) e, se ainda
     assim não couber, rola aqui dentro — nenhum item fica inalcançável */
  max-height: calc(100svh - 8px);
  padding: 4px 0;
  overflow-y: auto;
  background: #3c3c3c;
  border: 1px solid #454545;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.yrkit-tree-menu-hidden {
  display: none;
}
.yrkit-tree-menu-item {
  display: block;
  width: 100%;
  padding: 6px 16px;
  background: none;
  border: none;
  color: #cccccc;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.yrkit-tree-menu-item:hover {
  background: #094771;
}
/* apagar: ação destrutiva, destacada a vermelho ao passar o mouse */
.yrkit-tree-menu-item-danger:hover {
  background: #5a1d1d;
  color: #f48771;
}
/* item que só se aplica a certos nós (ex: "Open project", dentro do BUILDS) */
.yrkit-tree-menu-item-hidden {
  display: none;
}
/* árvore "local" (banco IndexedDB): não tem repositório git, por isso a secção
   inteira de git sai do menu — itens E os separadores que a delimitam (os que
   ganharam a classe -git). Fica só o último separador (sem essa classe), que
   continua a isolar o "Delete" do grupo de ficheiros. */
.yrkit-tree-menu-local .yrkit-tree-git-diff,
.yrkit-tree-menu-local .yrkit-tree-git-commit-file,
.yrkit-tree-menu-local .yrkit-tree-git-commit-all,
.yrkit-tree-menu-local .yrkit-tree-git-commit-push,
.yrkit-tree-menu-local .yrkit-tree-git-deploy,
.yrkit-tree-menu-local .yrkit-tree-git-pull,
.yrkit-tree-menu-local .yrkit-tree-git-push,
.yrkit-tree-menu-local .yrkit-tree-git-create-repo,
.yrkit-tree-menu-local .yrkit-tree-git-clone,
.yrkit-tree-menu-local .yrkit-tree-git-discard,
.yrkit-tree-menu-local .yrkit-tree-git-reset-hard,
.yrkit-tree-menu-local .yrkit-tree-menu-sep-git {
  display: none;
}
/* separadores do grupo de projeto (Open/Create project): desaparecem quando
   nenhuma ação de projeto está à vista (fora de BUILDS) */
.yrkit-tree-menu-sep-hidden {
  display: none;
}
/* separador entre grupos do menu (ações de ficheiro | git | apagar) */
.yrkit-tree-menu-sep {
  height: 1px;
  margin: 4px 0;
  background: #5a5a5a;
}
/* item que não se aplica ao nó fica cinza e inerte, como no Windows — em vez
   de desaparecer. O <button disabled> não dispara cliques nem realça no hover. */
.yrkit-tree-menu-item:disabled {
  color: #6a6a6a;
  cursor: default;
}
.yrkit-tree-menu-item:disabled:hover {
  background: none;
}
/* ── modal de ações do projeto (build/serve/deploy + fluxos) ──────────────── */
.yrkit-tree-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.yrkit-tree-modal-hidden {
  display: none;
}
.yrkit-tree-modal-card {
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  max-height: 80svh;
  overflow: hidden;
  background: #252526;
  border: 1px solid #3c3c3c;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  color: #cccccc;
  font-size: 13px;
}
.yrkit-tree-modal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #333333;
}
.yrkit-tree-modal-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #ffffff;
}
.yrkit-tree-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #a0a0a0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-tree-modal-close:hover {
  background: #3c3c3c;
  color: #ffffff;
}
.yrkit-tree-modal-name {
  flex: 0 0 auto;
  padding: 10px 14px 0;
  color: #4ec9b0;
  font-weight: 600;
}
/* cada ação: chip selecionável (para o fluxo) com um botão ▶ (executa já) */
.yrkit-tree-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  background: #2d2d2d;
  border: 1px solid #3c3c3c;
  border-radius: 999px;
  color: #cccccc;
  font-size: 12px;
  cursor: pointer;
}
.yrkit-tree-act:hover {
  background: #333336;
}
.yrkit-tree-act-on {
  background: #0e639c;
  border-color: #0e639c;
  color: #ffffff;
}
.yrkit-tree-act-on:hover {
  background: #1177bb;
}
.yrkit-tree-act-label {
  white-space: nowrap;
}
.yrkit-tree-act-run {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 9px;
  line-height: 1;
}
.yrkit-tree-act-run:hover {
  background: rgba(255, 255, 255, 0.28);
}
/* configurações do projeto (setters): campos agrupados + cancelar/salvar */
.yrkit-tree-modal-config {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid #333333;
}
.yrkit-tree-modal-config-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 280px;
  overflow: auto;
}
.yrkit-tree-config-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.yrkit-tree-config-group-name {
  color: #4ec9b0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.yrkit-tree-config-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: #2a2a2b;
  border: 1px solid #333333;
  border-radius: 5px;
}
.yrkit-tree-config-label {
  color: #9cdcfe;
  font-size: 11px;
}
.yrkit-tree-config-input {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  background: #1e1e1e;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  color: #d4d4d4;
  font-family: var(--yrkit-font-mono);
  font-size: 12px;
  outline: none;
}
.yrkit-tree-config-input:focus {
  border-color: #0e639c;
}
/* linhas booleanas: checkbox à esquerda, rótulo clicável à direita */
.yrkit-tree-config-row-check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.yrkit-tree-config-checkbox {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #0e639c;
  cursor: pointer;
}
.yrkit-tree-modal-config-foot {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.yrkit-tree-modal-config-cancel,
.yrkit-tree-modal-config-save {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
}
.yrkit-tree-modal-config-cancel {
  background: #3a3d41;
  color: #cccccc;
}
.yrkit-tree-modal-config-cancel:hover {
  background: #4d4d4d;
  color: #ffffff;
}
.yrkit-tree-modal-config-save {
  background: #0e639c;
}
.yrkit-tree-modal-config-save:hover {
  background: #1177bb;
}
.yrkit-tree-modal-config-save:disabled {
  background: #3a3d41;
  color: #909090;
  cursor: default;
}
.yrkit-tree-path-input {
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 4px 6px;
  background: #3c3c3c;
  border: 1px solid #094771;
  border-radius: 3px;
  color: #cccccc;
  font-size: 12px;
  outline: none;
}
.yrkit-tree-path-input::placeholder {
  color: #808080;
}
/* barra de scroll do corpo da árvore (webkit/chromium) */
.yrkit-tree-body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.yrkit-tree-body::-webkit-scrollbar-track {
  background: transparent;
}
.yrkit-tree-body::-webkit-scrollbar-thumb {
  background: #424242;
  border: 2px solid transparent; /* recuo: afina a "pílula" */
  border-radius: 6px;
  background-clip: content-box;
}
.yrkit-tree-body::-webkit-scrollbar-thumb:hover {
  background: #565656;
  background-clip: content-box;
}
/* Firefox não entende ::-webkit-scrollbar */
@supports not selector(::-webkit-scrollbar) {
  .yrkit-tree-body {
    scrollbar-width: thin;
    scrollbar-color: #424242 transparent;
  }
}
/* espaço reservado para a seta, alinha ficheiros com pastas irmãs */
.yrkit-tree-label::before {
  content: "";
  display: inline-block;
  width: 12px;
}
.yrkit-tree-folder > .yrkit-tree-label::before {
  content: "\25B8";
  color: #808080;
}
.yrkit-tree-folder.yrkit-tree-open > .yrkit-tree-label::before {
  content: "\25BE";
}
.yrkit-tree-file {
  color: #a9b7c6;
}
/* pastas: tom próprio, distinto dos ficheiros (quase-branco) */
.yrkit-tree-folder .yrkit-tree-label {
  color: #a9b7c6;
}
/* estado git: M = modificado (amarelo); U = novo (vermelho); versionados (verde) */
.yrkit-tree-node.yrkit-tree-git-modified .yrkit-tree-label {
  color: #e2c08d;
}
.yrkit-tree-node.yrkit-tree-git-new .yrkit-tree-label {
  color: #e06c75;
}
.yrkit-tree-node.yrkit-tree-git-tracked .yrkit-tree-label {
  color: #73c991;
}
/* a pasta .git é metadado do repo, não conteúdo: fica neutra e recessiva */
.yrkit-tree-node.yrkit-tree-dotgit .yrkit-tree-label {
  color: #808080;
}
/* BUILDS: caminho especial vindo do backend, mostrado antes da TREE e
   destacado (tom próprio + negrito) para se distinguir das pastas normais */
.yrkit-tree-node.yrkit-tree-builds .yrkit-tree-label {
  color: #4ec9b0;
  font-weight: 600;
}
/* local: raiz do banco IndexedDB, mostrada no TOPO da árvore (acima do
   BUILDS). Tom próprio, distinto das pastas normais e do BUILDS teal. */
.yrkit-tree-node.yrkit-tree-local .yrkit-tree-label {
  color: #c586c0;
  font-weight: 600;
}
.yrkit-tree-git-badge {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.9;
}
/* repo com commits por enviar: pastilha "↑N" no nó do repositório */
.yrkit-tree-push-badge {
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 8px;
  background: #2f6f3a;
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  vertical-align: middle;
}
/* repo com commits por puxar: pastilha "↓N" no nó do repositório */
.yrkit-tree-pull-badge {
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 8px;
  background: #2f4f6f;
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  vertical-align: middle;
}
/* branch ativo do repositório: etiqueta discreta junto do nome */
.yrkit-tree-branch {
  margin-left: 6px;
  color: #4ec9b0;
  font-size: 10px;
  font-weight: 600;
  vertical-align: middle;
  opacity: 0.85;
}
/* ficheiros abertos no editor: marca discreta no explorador */
.yrkit-tree-node.yrkit-tree-opened .yrkit-tree-label {
  font-style: italic;
}
/* ficheiro com alterações por salvar: a mesma "bolinha" da aba, agora também
   na árvore — mostra de relance onde o Save está disponível */
.yrkit-tree-node.yrkit-tree-dirty .yrkit-tree-label::after {
  content: "\25CF";
  margin-left: 6px;
  color: #e2c08d;
  font-size: 10px;
}
/* ── mobile: a PÁGINA não faz pinch-zoom; o pinch é do preview ────────────────
   O pinch do browser (a "pinça do Chrome/Android") é um gesto do viewport de
   TOPO: quem o decide é o touch-action da RAIZ, não o do iframe nem o da área
   do preview. Sem isto, a pinça sobre a pré-visualização ampliava a PÁGINA
   inteira (a UI do Yrkit) em vez do preview. pan-x/pan-y mantém o scroll de um
   dedo a funcionar; pinch-zoom (e o duplo-toque-para-zoom) fica desligado e é
   implementado por JS sobre o preview (ver setupPreviewPinch). */
html,
body {
  touch-action: pan-x pan-y;
}
/* ── shell: explorador + editor lado a lado ───────────────────────────────── */
.yrkit-shell {
  position: relative; /* âncora do explorador em sobreposição no mobile */
  display: flex;
  /* altura do rodapé do projeto (barra fixa no fundo da página). O shell
     encolhe o mesmo tanto para o rodapé não cobrir conteúdo nenhum; a variável
     também dimensiona o próprio rodapé (.yrkit-tree-project). */
  --yrkit-project-h: 30px;
  height: calc(100svh - var(--yrkit-project-h));
  overflow: hidden;
  /* tipografia partilhada (herdada pela árvore, editor e painel): system-ui e
     ui-monospace usam a fonte do sistema, evitando cair num sans-serif genérico
     — que é o que faz a UI parecer "estranha" fora do macOS/Windows. O
     antialiasing deixa o texto nítido em fundos escuros. */
  --yrkit-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --yrkit-font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* tamanho do texto do editor (código + calha), ajustável pelo rodapé */
  --yrkit-editor-font: 13px;
  /* tamanho do painel lateral (largura lado a lado / altura empilhado) */
  --yrkit-side-w: 420px;
  --yrkit-side-h: 50svh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* painel lateral escondido: o editor ocupa toda a largura */
.yrkit-shell.yrkit-side-hidden .yrkit-side {
  display: none;
}
/* explorador escondido: o editor começa logo à esquerda */
.yrkit-shell.yrkit-tree-hidden .yrkit-tree {
  display: none;
}
/* deslogado: sem barra de projeto — o shell deixa de reservar a altura dela,
   para o rodapé escondido não deixar uma faixa vazia no fundo da página */
.yrkit-shell.yrkit-no-project-bar {
  --yrkit-project-h: 0px;
}
/* véu do explorador: só aparece no mobile, onde ele vira sobreposição */
.yrkit-tree-overlay {
  display: none;
}
.yrkit-editor {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #1e1e1e;
  color: #d4d4d4;
  font-family: var(--yrkit-font-sans);
  font-size: 13px;
}
/* barra superior do editor: abas + ações (salvar) */
.yrkit-editor-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  height: 35px;
  background: #252526;
}
/* barra de abas (ficheiros abertos) */
.yrkit-editor-tabs {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  background: #252526;
  /* barra de scroll fina: a horizontal das abas não deve competir com o
     conteúdo nem roubar altura às abas */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #424242 transparent;
}
/* webkit/chromium: a barra horizontal das abas fica bem fina e discreta */
.yrkit-editor-tabs::-webkit-scrollbar {
  height: 4px;
}
.yrkit-editor-tabs::-webkit-scrollbar-track {
  background: transparent;
}
.yrkit-editor-tabs::-webkit-scrollbar-thumb {
  background: #424242;
  border-radius: 2px;
}
.yrkit-editor-tabs::-webkit-scrollbar-thumb:hover {
  background: #565656;
}
.yrkit-editor-save {
  flex: 0 0 auto;
  align-self: center;
  margin: 0 4px;
  padding: 4px 12px;
  background: #0e639c;
  border: none;
  border-radius: 3px;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
}
.yrkit-editor-save:hover {
  background: #1177bb;
}
.yrkit-editor-save:disabled {
  background: #3a3d41;
  color: #909090;
  cursor: default;
}
/* ── pesquisa no conteúdo do ficheiro (Ctrl/Cmd+F) ───────────────────────── */
.yrkit-find {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #252526;
  /* a barra vive logo ACIMA do rodapé de estatísticas: a linha separadora vai
     em cima (uma border-bottom confundir-se-ia com o border-top do rodapé) */
  border-top: 1px solid #333333;
}
.yrkit-find-hidden {
  display: none;
}
.yrkit-find-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 8px;
  background: #1e1e1e;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  color: #d4d4d4;
  font-family: var(--yrkit-font-mono);
  font-size: 12px;
  outline: none;
}
.yrkit-find-input:focus {
  border-color: #0e639c;
}
/* contador de ocorrências: "atual/total" (ou só o total, antes de navegar) */
.yrkit-find-count {
  flex: 0 0 auto;
  min-width: 48px;
  color: #858585;
  font-size: 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* nenhuma ocorrência: sinaliza a vermelho */
.yrkit-find-none {
  color: #f48771;
}
/* ocorrências da pesquisa: pintadas no realce por trás do textarea (o texto do
   editor é transparente por cima). Sem borda/padding — qualquer alteração de
   caixa desalinharia o realce em relação ao textarea. A ocorrência atual
   (setas/Enter) ganha um tom mais forte. */
.yrkit-find-hit {
  background: rgba(234, 92, 0, 0.4);
  border-radius: 2px;
}
.yrkit-find-hit-current {
  background: rgba(255, 199, 74, 0.75);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 199, 74, 0.85);
}
.yrkit-find-prev,
.yrkit-find-next,
.yrkit-find-close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #a0a0a0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-find-prev:hover,
.yrkit-find-next:hover,
.yrkit-find-close:hover {
  background: #2f2f31;
  color: #ffffff;
}
.yrkit-find-prev:disabled,
.yrkit-find-next:disabled {
  color: #5a5a5a;
  cursor: default;
}
.yrkit-find-prev:disabled:hover,
.yrkit-find-next:disabled:hover {
  background: transparent;
}
/* ferramenta de pesquisa ativa: realçada como os outros toggles */
.yrkit-editor-tool.yrkit-editor-find-active {
  background: #37373d;
  color: #4daafc;
}
/* botões de ferramenta da barra do editor (explorador, painel, desfazer):
   ícones quadrados e discretos, alinhados como numa barra de ferramentas */
.yrkit-editor-tool {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: center;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 4px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #a0a0a0;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-editor-tool:hover {
  background: #2f2f31;
  color: #ffffff;
}
/* painel/explorador visível (ou modo empilhado ativo): ícone realçado */
.yrkit-editor-tool.yrkit-editor-toggle-side-active,
.yrkit-editor-tool.yrkit-editor-toggle-tree-active,
.yrkit-editor-tool.yrkit-editor-toggle-stack-active {
  background: #37373d;
  color: #4daafc;
}
/* modo "views" ATIVO: o botão deixa de alternar o explorador e passa a CRIAR
   uma view nova (as views tomam a barra de abas, pelo que a árvore fica fora de
   alcance enquanto o modo durar). Tom azul, o mesmo das views na barra de abas
   e das duas barras em modo views (ver .yrkit-views-open). */
.yrkit-editor-tool.yrkit-editor-views-create {
  color: #4daafc;
}
.yrkit-editor-tool.yrkit-editor-views-create:not(:disabled):hover {
  background: rgba(77, 170, 252, 0.18);
  color: #8cc4ff;
}
/* projeto cuja origem é um FICHEIRO .yr: não há pasta onde criar views, então o
   botão fica inerte (o :disabled genérico, abaixo, apaga-o para cinza) */
.yrkit-editor-tool.yrkit-editor-views-create:disabled {
  background: transparent;
  cursor: default;
}
/* ícone de "criar view" (página com um "+"), herda a cor do botão */
.yrkit-editor-views-create-icon {
  display: block;
  width: 14px;
  height: 14px;
}
/* ferramenta sem ação disponível (ex: nada por desfazer) */
.yrkit-editor-tool:disabled {
  color: #5a5a5a;
  background: transparent;
  cursor: default;
}
/* desfazer tudo: ação destrutiva, sinalizada em vermelho ao passar o mouse */
.yrkit-editor-tool.yrkit-editor-revert:not(:disabled):hover {
  background: #5a1d1d;
  color: #f48771;
}
.yrkit-editor-tab {
  display: flex;
  flex: 0 0 auto; /* não encolhe: a barra rola em vez de esmagar as abas */
  align-items: center;
  gap: 6px;
  max-width: 200px;
  padding: 0 10px 0 14px;
  background: #2d2d2d;
  border-right: 1px solid #252526;
  color: #969696;
  white-space: nowrap;
  cursor: pointer;
}
.yrkit-editor-tab-active {
  background: #1e1e1e;
  color: #ffffff;
}
/* marcador de "não salvo" na aba */
.yrkit-editor-tab-dirty .yrkit-editor-tab-label::after {
  content: "\25CF";
  margin-left: 6px;
  color: #e2c08d;
  font-size: 10px;
}
.yrkit-editor-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.yrkit-editor-tab-close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 3px;
  color: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-editor-tab-close:hover {
  background: #4d4d4d;
  color: #ffffff;
}
/* modo views: o "×" da aba APAGA a view (o ficheiro), não fecha a aba — tom
   destrutivo no hover, o mesmo vermelho de fechar/descartar do resto da UI,
   para o efeito não ser uma surpresa (o clique ainda confirma) */
.yrkit-editor-tab-close.yrkit-editor-tab-close-view:hover {
  background: #5a1d1d;
  color: #f48771;
}
/* no modo views a aba tem um menu de contexto (clique direito: Rename /
   Duplicate): o sublinhado pontilhado no hover sugere que há mais opções, sem
   poluir as abas normais */
.yrkit-editor-tab-view .yrkit-editor-tab-label:hover {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
/* palco do editor: o corpo do código + a barra de pesquisa + o rodapé de
   estatísticas, agrupados para viajarem JUNTOS quando o editor é destacado para
   o painel lateral (aba "Editor"). O rodapé (linhas/colunas/cursor) e a pesquisa
   pertencem ao editor, não à área principal. */
.yrkit-editor-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
/* Véu com o logo por cima de TODO o ecrã enquanto o conteúdo do ficheiro é lido
   (a PRIMEIRA abertura de cada ficheiro/view vem do backend ou do disco). Cobre
   a janela inteira — e não só a área do código: a leitura é a operação mais
   lenta do editor, e um véu preso ao palco fazia parecer que só o editor estava
   a carregar, com as barras e o painel à volta a roubar a atenção ao sinal.
   Nunca apanha cliques (pointer-events: none): é só sinal, a barra de abas
   continua utilizável por cima. Fica acima dos modais (1200) e abaixo dos menus
   de contexto (2000). */
.yrkit-editor-loading {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(30, 30, 30, 0.82);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  pointer-events: none;
  /* monospace, como o véu de arranque (.yrkit-boot): os dois overlays de
     carregamento falam a mesma língua. Vive FORA do shell, onde
     --yrkit-font-mono não está definida, por isso a pilha é declarada aqui. */
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
.yrkit-editor-loading-active {
  display: flex;
}
/* rótulo sob o logo: o véu diz sempre o que está a acontecer. O GIF vem da rede
   e, se falhar, sem este texto o ecrã ficava coberto sem nenhum sinal. */
.yrkit-editor-loading-text {
  color: #858585;
  font-size: 12px;
  letter-spacing: 0.4px;
}
/* o logo animado (GIF, o mesmo do arranque): a animação vem do próprio
   ficheiro, não do CSS. O tamanho é fixo para o véu não "saltar" quando a
   imagem chega, e o object-fit garante que o logo caiba inteiro (sem
   distorcer) seja qual for a proporção do ficheiro. */
.yrkit-editor-loading-logo {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
}
/* conteúdo do ficheiro: <pre> realçado por baixo + <textarea> transparente por cima.
   Os dois partilham font/padding (sem wrap) para ficarem alinhados; sincronizamos
   os dois eixos de scroll. */
.yrkit-editor-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  --yrkit-gutter: 48px;
}
/* calha de números de linha (rola só no eixo vertical) */
.yrkit-editor-gutter {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--yrkit-gutter);
  overflow: hidden;
  background: #1e1e1e;
  color: #858585;
  font-family: var(--yrkit-font-mono);
  font-size: var(--yrkit-editor-font, 13px);
  line-height: 1.5;
  text-align: right;
  user-select: none;
  border-right: 1px solid #5f515145;
}
.yrkit-editor-gutter-inner {
  padding: 12px 0;
}
.yrkit-editor-gutter-inner > div {
  padding-right: 12px;
}
/* régua vertical em 80ch (estilo colorcolumn do vim); altura ajustada via JS */
.yrkit-editor-ruler80 {
  position: absolute;
  top: 0;
  left: calc(16px + 80ch);
  width: 1ch;
  height: 0;
  background: rgba(228, 74, 74, 0.4);
  pointer-events: none;
}
.yrkit-editor-highlight,
.yrkit-editor-code {
  position: absolute;
  inset: 0 0 0 var(--yrkit-gutter);
  margin: 0;
  padding: 12px 16px;
  border: 0;
  font-family: var(--yrkit-font-mono);
  font-size: var(--yrkit-editor-font, 13px);
  line-height: 1.5;
  tab-size: 2;
  /* sem wrap: 1 linha lógica = 1 linha visual → números de linha alinhados */
  white-space: pre;
}
.yrkit-editor-highlight {
  z-index: 0;
  overflow: hidden;
  color: #d4d4d4;
  pointer-events: none;
  background: #1e1e1e;
}
.yrkit-editor-highlight-code {
  font: inherit;
  white-space: inherit;
}
.yrkit-editor-code {
  z-index: 1;
  overflow: auto;
  resize: none;
  background: transparent;
  color: transparent;
  caret-color: #d4d4d4;
  outline: none;
}
.yrkit-editor-code::placeholder {
  color: #6a6a6a;
}
/* seleção nativa do textarea num tom quente: a ocorrência atual da pesquisa
   fica selecionada (setas/Enter) e não deve esconder a marca pintada por baixo */
.yrkit-editor-code::selection {
  background: rgba(255, 199, 74, 0.5);
  color: transparent;
}
.yrkit-editor-code:disabled {
  background: transparent;
  color: transparent;
}
/* ── modo "texto simples" (ficheiros grandes) ──────────────────────────────
   O texto visível vive no <pre> realçado, POR BAIXO do textarea (que é
   transparente). Num ficheiro grande, reescrever esse <pre> inteiro a cada
   tecla é o que trava a digitação: aqui o textarea passa a mostrar o próprio
   texto e o realce sai de cena — editar deixa de custar em função do tamanho
   do ficheiro. (Nota: a régua dos 80ch vive dentro do <pre>, pelo que também
   desaparece neste modo.) */
.yrkit-editor-body-plain .yrkit-editor-highlight {
  display: none;
}
.yrkit-editor-body-plain .yrkit-editor-code {
  color: #d4d4d4;
}
/* seleção nativa legível: no modo normal o texto do textarea é transparente
   (a marca é pintada por baixo); aqui o texto é o próprio textarea */
.yrkit-editor-body-plain .yrkit-editor-code::selection {
  background: rgba(38, 79, 120, 0.99);
  color: #ffffff;
}
/* ── visualizador de ficheiros não editáveis (imagem/pdf/binário) ────────────
   Um binário não passa pelo editor de texto: cobre a área do código com este
   visualizador — imagem com zoom, pdf embutido, ou uma mensagem simples. */
.yrkit-file-view {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  flex-direction: column;
  background: #1e1e1e;
}
.yrkit-file-view-active {
  display: flex;
}
.yrkit-file-view-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #252526;
  border-bottom: 1px solid #333333;
  color: #cccccc;
  font-family: var(--yrkit-font-sans);
  font-size: 12px;
}
.yrkit-file-view-zoom-out,
.yrkit-file-view-zoom-in,
.yrkit-file-view-zoom-reset,
.yrkit-file-view-fit {
  flex: 0 0 auto;
  padding: 3px 8px;
  background: #2d2d2d;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  color: #cccccc;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-file-view-zoom-out:hover,
.yrkit-file-view-zoom-in:hover,
.yrkit-file-view-zoom-reset:hover,
.yrkit-file-view-fit:hover {
  background: #3c3c3c;
  color: #ffffff;
}
.yrkit-file-view-zoom-reset {
  min-width: 52px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* só a imagem tem zoom: nos outros tipos (pdf/binário), os controlos somem */
.yrkit-file-view:not(.yrkit-file-view-can-zoom) .yrkit-file-view-zoom-out,
.yrkit-file-view:not(.yrkit-file-view-can-zoom) .yrkit-file-view-zoom-in,
.yrkit-file-view:not(.yrkit-file-view-can-zoom) .yrkit-file-view-zoom-reset,
.yrkit-file-view:not(.yrkit-file-view-can-zoom) .yrkit-file-view-fit {
  display: none;
}
.yrkit-file-view-info {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #858585;
  text-align: right;
}
.yrkit-file-view-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  overflow: auto;
  padding: 12px;
  background-color: #1e1e1e;
  /* xadrez discreto: deixa ver a transparência das imagens (PNG/webp/…) */
  background-image: repeating-conic-gradient(#1b1b1b 0% 25%, #202020 0% 50%);
  background-size: 20px 20px;
  touch-action: pan-x pan-y;
}
.yrkit-file-view-img {
  display: none;
  max-width: none;
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.yrkit-file-view-frame {
  display: none;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 4px;
  background: #ffffff;
}
.yrkit-file-view-msg {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #858585;
  font-family: var(--yrkit-font-sans);
  font-size: 13px;
  text-align: center;
}
/* rodapé do editor: total de linhas/colunas e a posição do cursor (linha/
   coluna), com o botão de pesquisa no ficheiro encostado à direita */
.yrkit-editor-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 24px;
  padding: 0 8px;
  background: #252526;
  border-top: 1px solid #333333;
  color: #858585;
  font-family: var(--yrkit-font-mono);
  font-size: 11px;
  line-height: 1;
  user-select: none;
}
.yrkit-editor-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
/* números alinhados em coluna (1 ↔ 0 têm a mesma largura) */
.yrkit-editor-stat {
  font-variant-numeric: tabular-nums;
}
/* a pesquisa agora vive no rodapé: ícone compacto, sem margem */
.yrkit-editor-foot .yrkit-editor-find {
  width: 22px;
  height: 22px;
  margin: 0;
  font-size: 13px;
}
/* ações do rodapé (tamanho da fonte + pesquisa): encostadas à direita */
.yrkit-editor-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
/* controlos de tamanho da fonte: ícones compactos como o da pesquisa */
.yrkit-editor-foot .yrkit-editor-font-dec,
.yrkit-editor-foot .yrkit-editor-font-inc {
  width: 22px;
  height: 22px;
  margin: 0;
  font-size: 12px;
}
/* console.log marcado (inserir/remover): no rodapé, compactos como os da fonte */
.yrkit-editor-foot .yrkit-editor-log-add,
.yrkit-editor-foot .yrkit-editor-log-clear {
  width: 22px;
  height: 22px;
  margin: 0;
  font-size: 13px;
}
/* barra de scroll do editor (webkit/chromium) */
.yrkit-editor-code::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.yrkit-editor-code::-webkit-scrollbar-thumb {
  background: #424242;
  border: 3px solid #1e1e1e;
  border-radius: 6px;
  background-clip: content-box;
}
.yrkit-editor-code::-webkit-scrollbar-thumb:hover {
  background: #565656;
  background-clip: content-box;
}
/* tokens de realce de sintaxe (paleta VS Code Dark+) */
.hl-comment { color: #6a9955; font-style: italic; }
.hl-string  { color: #ce9178; }
.hl-number  { color: #b5cea8; }
.hl-keyword { color: #569cd6; }
.hl-fn      { color: #dcdcaa; }
.hl-key     { color: #9cdcfe; }
.hl-tag     { color: #569cd6; }
.hl-attr    { color: #9cdcfe; }
.hl-punct   { color: #808080; }
/* ── painel lateral: preview + devtools + IA ──────────────────────────────── */
.yrkit-side {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: var(--yrkit-side-w, 420px);
  min-width: 200px;
  height: 100%;
  overflow: hidden;
  background: #1e1e1e;
  border-left: 1px solid #333333;
  color: #d4d4d4;
  font-family: var(--yrkit-font-sans);
  font-size: 13px;
}
/* ── divisória arrastável entre editor e painel lateral ───────────────────── */
.yrkit-main {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
/* modo empilhado: painel lateral abaixo do editor */
.yrkit-shell-stacked .yrkit-main {
  flex-direction: column;
}
.yrkit-splitter {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  background: #333333;
  cursor: col-resize;
  touch-action: none;
}
/* puxador: caractere unicode (sem imagem); gira no modo empilhado */
.yrkit-splitter-handle {
  position: relative;
  z-index: 1;
  color: #6a6a6a;
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.yrkit-splitter:hover .yrkit-splitter-handle {
  color: #0e639c;
}
/* empilhado: divisória horizontal (arrasta na vertical). Sem pseudo-elemento:
   uma barra de cor única com o puxador unicode ao centro */
.yrkit-shell-stacked .yrkit-splitter {
  width: auto;
  height: 10px;
  background: #333333;
  cursor: row-resize;
}
/* empilhado: a divisória é horizontal — só gira o puxador */
.yrkit-shell-stacked .yrkit-splitter-handle {
  transform: rotate(90deg);
}
.yrkit-shell-stacked .yrkit-editor {
  min-height: 0;
}
.yrkit-shell-stacked .yrkit-side {
  width: auto;
  min-width: 0;
  height: var(--yrkit-side-h, 50svh);
  border-top: 1px solid #333333;
  border-left: none;
}
/* abas do painel (Preview | DevTools | AI) */
.yrkit-side-tabs {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  height: 35px;
  min-width: 0;
  /* com abas demais (sobretudo no mobile), a barra rola na horizontal em vez de
     estourar o painel — assim TODAS as abas, e o botão de destaque (o último
     item, antes cortado pelo overflow do .yrkit-side), ficam alcançáveis */
  overflow-x: auto;
  overflow-y: hidden;
  background: #252526;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #424242 transparent;
}
/* webkit/chromium: barra de scroll fina e discreta sob as abas */
.yrkit-side-tabs::-webkit-scrollbar {
  height: 4px;
}
.yrkit-side-tabs::-webkit-scrollbar-track {
  background: transparent;
}
.yrkit-side-tabs::-webkit-scrollbar-thumb {
  background: #424242;
  border-radius: 2px;
}
.yrkit-side-tabs::-webkit-scrollbar-thumb:hover {
  background: #565656;
}
.yrkit-side-tab {
  flex: 1 1 auto;
  /* nunca encolhe abaixo do rótulo: é isto que faz a barra ROLAR em vez de
     esmagar/cortar as abas (com nowrap, min-content == largura do texto) */
  min-width: max-content;
  padding: 0 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: #969696;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.yrkit-side-tab:hover {
  color: #ffffff;
}
.yrkit-side-tab-active {
  color: #ffffff;
  border-bottom-color: #0e639c;
}
/* aba escondida: não se aplica à extensão do ficheiro ativo */
.yrkit-side-tab-hidden {
  display: none;
}
/* aba IA: destaque próprio (cor + spark), separada das ferramentas de ficheiro */
.yrkit-side-tab-accent {
  flex: 0 0 auto;
  color: #c586c0;
  font-weight: 600;
}
.yrkit-side-tab-accent:hover {
  color: #d7a1ff;
}
.yrkit-side-tab-accent.yrkit-side-tab-active {
  color: #d7a1ff;
  border-bottom-color: #c586c0;
}
/* botão de destaque: leva a aba ativa do painel para o lugar do editor */
.yrkit-side-detach {
  flex: 0 0 auto;
  align-self: stretch;
  width: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: #969696;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-side-detach:hover {
  background: #2f2f31;
  color: #ffffff;
}
/* destacado: botão realçado (a aba vive no lugar do editor) */
.yrkit-side-detach.yrkit-side-detach-active {
  color: #4daafc;
  border-bottom-color: #0e639c;
}
/* botão de inspeção: símbolo de cursor que ativa o modo "selecionar elemento"
   sobre a pré-visualização (realce do box model, como nos DevTools). Vive na
   barra do preview, à esquerda dos presets de viewport. Ao contrário dos
   DevTools, o modo NÃO desliga ao clicar num elemento — só carregando outra
   vez no próprio botão. */
.yrkit-preview-inspect {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  background: #2d2d2d;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  color: #cccccc;
  line-height: 1;
  cursor: pointer;
}
.yrkit-preview-inspect:hover {
  background: #3c3c3c;
  color: #ffffff;
}
/* modo ativo: botão realçado, como as outras ferramentas ligadas */
.yrkit-preview-inspect.yrkit-inspect-active {
  background: #0e639c;
  border-color: #0e639c;
  color: #ffffff;
}
.yrkit-preview-inspect-icon {
  display: block;
  width: 14px;
  height: 14px;
}
/* aba do editor: só aparece no modo destacado (o editor vive no painel) */
.yrkit-side-tab-editor.yrkit-side-tab-active {
  color: #ffffff;
  border-bottom-color: #0e639c;
}
/* área da aba destacada: ocupa o espaço abaixo da barra do editor */
.yrkit-detached-view {
  display: none;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.yrkit-side-detached .yrkit-detached-view {
  display: flex;
  flex-direction: column;
}
/* hospedeiro das abas destacadas (mesmo papel do corpo do painel) */
.yrkit-detached-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
/* o palco do editor movido para dentro do painel preenche a aba Editor */
.yrkit-side-pane-editor .yrkit-editor-stage {
  position: absolute;
  inset: 0;
}
.yrkit-side-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
/* só uma aba visível de cada vez */
.yrkit-side-pane {
  display: none;
  position: absolute;
  inset: 0;
}
.yrkit-side-pane-active {
  display: block;
}
.yrkit-preview-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #ffffff;
}
/* preview "consoleable" (html/htm/yr/js): o iframe recua sobre um fundo
   azulado pontilhado, distinguindo a página real do restante painel.
   A classe é aplicada pelo JS no elemento pai do iframe (.yrkit-side-body). */
.yrkit-preview-consoleable {
  background-color: #101f2e;
  background-image: radial-gradient(
    rgba(77, 170, 252, 0.35) 1px,
    transparent 1.5px
  );
  background-size: 16px 16px;
  padding: 12px;
  /* a viewport escolhida pode ser mais larga que o painel: deixa rolar */
  overflow: auto;
  /* o zoom por pinça é tratado por JS: desliga o pinch/duplo-toque nativo e
     deixa o arrasto de um dedo deslizar normalmente (ver setupPreviewPinch) */
  touch-action: pan-x pan-y;
}
/* barra de controlos de viewport/zoom (só aparece em pré-visualizações
   "consoleable"; a visibilidade é gerida pelo JS) */
.yrkit-preview-bar {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 34px;
  padding: 0 8px;
  box-sizing: border-box;
  background: #252526;
  border-bottom: 1px solid #333333;
  color: #cccccc;
  font-size: 12px;
}
.yrkit-preview-size,
.yrkit-preview-zoom-out,
.yrkit-preview-zoom-in,
.yrkit-preview-zoom-reset,
.yrkit-preview-term {
  flex: 0 0 auto;
  padding: 3px 8px;
  background: #2d2d2d;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  color: #cccccc;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-preview-size:hover,
.yrkit-preview-zoom-out:hover,
.yrkit-preview-zoom-in:hover,
.yrkit-preview-zoom-reset:hover,
.yrkit-preview-term:hover {
  background: #3c3c3c;
  color: #ffffff;
}
.yrkit-preview-size-active,
.yrkit-preview-size-active:hover {
  background: #0e639c;
  border-color: #0e639c;
  color: #ffffff;
}
.yrkit-preview-zoom-reset {
  min-width: 52px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.yrkit-preview-width {
  flex: 0 0 76px;
  width: 76px;
  padding: 3px 6px;
  background: #1e1e1e;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  color: #cccccc;
  font-size: 12px;
  text-align: center;
  outline: none;
}
.yrkit-preview-width:focus {
  border-color: #0e639c;
}
/* o iframe assume a largura da viewport escolhida e o zoom é um transform:
   scale() sobre o QUADRO INTEIRO. Posição, tamanho e zoom são calculados por
   JS (syncPreviewFrameHeight), porque dependem de medir o painel; aqui fica
   só o acabamento visual. */
.yrkit-preview-consoleable .yrkit-preview-frame {
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  transform-origin: top left;
  /* o gesto de pinça é tratado por JS (toque e trackpad): desliga o pinch/
     duplo-toque NATIVO do browser, que ampliava a página em vez do preview */
  touch-action: pan-x pan-y;
}
/* console do iframe (aba DevTools) */
.yrkit-console {
  overflow: auto;
  padding: 8px 10px;
  background: #1e1e1e;
  font-family: var(--yrkit-font-mono);
  font-size: 12px;
  line-height: 1.5;
}
.yrkit-console-line {
  padding: 2px 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.yrkit-console-log { color: #d4d4d4; }
.yrkit-console-info { color: #75beff; }
.yrkit-console-warn { color: #e2c08d; }
.yrkit-console-error { color: #f48771; }
.yrkit-console-debug { color: #808080; }
/* valores no console: árvore expansível (objetos, arrays, DOM, erros). Cada
   "nó" é um span com toggle (▸/▾), pré-visualização e filhos ocultos; os
   filhos só são construídos ao expandir. */
.yrkit-console-node {
  display: inline;
}
.yrkit-console-toggle {
  display: inline-block;
  width: 12px;
  color: #808080;
  cursor: pointer;
  user-select: none;
}
.yrkit-console-toggle:hover {
  color: #ffffff;
}
.yrkit-console-preview {
  color: #9cdcfe;
  cursor: pointer;
}
.yrkit-console-children {
  margin: 2px 0 2px 12px;
  padding-left: 8px;
  border-left: 1px solid #2d2d2d;
}
.yrkit-console-row {
  white-space: pre-wrap;
  word-break: break-word;
}
.yrkit-console-key { color: #9cdcfe; }
.yrkit-console-sep { color: #808080; }
/* valores primitivos, por tipo (paleta VS Code Dark+) */
.yrkit-console-string { color: #ce9178; }
.yrkit-console-number { color: #b5cea8; }
.yrkit-console-boolean { color: #569cd6; }
.yrkit-console-null { color: #569cd6; }
.yrkit-console-symbol { color: #dcdcaa; }
.yrkit-console-fn { color: #dcdcaa; }
.yrkit-console-error { color: #f48771; }
.yrkit-console-circular { color: #808080; font-style: italic; }
/* pilha do erro: mostra onde falhou (ficheiro:linha:coluna) */
.yrkit-console-stack {
  margin: 4px 0;
  padding: 6px 8px;
  max-height: 240px;
  overflow: auto;
  background: #252526;
  border-left: 2px solid #f48771;
  border-radius: 3px;
  color: #d4d4d4;
  font-family: var(--yrkit-font-mono);
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
/* local do erro na pilha (ficheiro:linha:coluna): clicável — revela o trecho de
   código onde falhou, aqui mesmo no console, sem sair do painel */
.yrkit-console-frame {
  color: #4daafc;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.yrkit-console-frame:hover {
  color: #75beff;
  text-decoration-style: solid;
}
/* local do registo no console (ficheiro:linha:coluna): discreto, sob a linha do
   log. O link (reaproveita .yrkit-console-frame) abre o trecho de código, tal
   como acontece com as molduras das pilhas de erro. */
.yrkit-console-loc {
  padding-left: 12px;
  color: #808080;
  font-size: 11px;
}
/* ── aba Sources: código-fonte da página (srcdoc) / do ficheiro ────────────── */
/* Aberta ao clicar num local da pilha de erro (ou no local de um registo do
   console) e também ao clicar na própria aba. Mostra o documento INTEIRO, com
   números de linha, rolado até à linha em foco e com o realce na posição — como
   a aba "Sources" dos DevTools. */
.yrkit-sources {
  background: #1e1e1e;
}
.yrkit-sources.yrkit-side-pane-active {
  display: flex;
  flex-direction: column;
}
.yrkit-sources-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  background: #252526;
  border-bottom: 1px solid #333333;
}
.yrkit-sources-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #4daafc;
  font-family: var(--yrkit-font-mono);
  font-size: 12px;
}
.yrkit-sources-code {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 8px 10px;
  overflow: auto;
  background: #1e1e1e;
  color: #d4d4d4;
  font-family: var(--yrkit-font-mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre;
}
/* uma linha por <span> block: o fundo do realce preenche a linha toda */
.yrkit-sources-line {
  display: block;
  min-height: 1.5em;
}
/* linha em foco (onde caiu o erro / o registo do console) */
.yrkit-sources-hit {
  color: #ffffff;
  background: rgba(234, 92, 0, 0.35);
}
/* carácter exato da coluna reportada, dentro da linha em foco */
.yrkit-sources-col {
  color: #1e1e1e;
  background: #ffc74a;
  border-radius: 2px;
}
.yrkit-sources-miss {
  color: #e2c08d;
  font-style: italic;
}
/* a aba Styles reusa o aspeto da aba Sources (barra + código realçado); o que
   muda é só o que é desenhado dentro (o CSS das <style> do <head>) */
.yrkit-styles {
  background: #1e1e1e;
}
.yrkit-styles.yrkit-side-pane-active {
  display: flex;
  flex-direction: column;
}
/* aba Elements: árvore do DOM do iframe (.html, .htm e .yr) */
.yrkit-elements {
  overflow: auto;
  padding: 8px 10px;
  background: #1e1e1e;
  font-family: var(--yrkit-font-mono);
  font-size: 12px;
  line-height: 1.5;
}
.yrkit-elements-empty {
  color: #808080;
}
.yrkit-elements-label {
  color: #569cd6;
  white-space: nowrap;
}
.yrkit-elements-text {
  padding-left: 12px;
  color: #ce9178;
  white-space: pre-wrap;
  word-break: break-word;
}
.yrkit-elements-children {
  padding-left: 12px;
  border-left: 1px solid #2d2d2d;
}
/* aba Network: pedidos de rede feitos pelo iframe (.html, .htm e .yr) */
.yrkit-network {
  overflow: auto;
  padding: 8px 10px;
  background: #1e1e1e;
  font-family: var(--yrkit-font-mono);
  font-size: 12px;
  line-height: 1.5;
}
.yrkit-network-empty {
  color: #808080;
}
/* cada linha vira uma "tabela": método | status | tipo | tamanho | tempo | url */
.yrkit-network-line {
  display: grid;
  grid-template-columns: 46px 46px 72px 62px 62px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  white-space: nowrap;
  color: #d4d4d4;
}
.yrkit-network-col {
  overflow: hidden;
  text-overflow: ellipsis;
}
.yrkit-network-method { color: #569cd6; }
.yrkit-network-status { color: #73c991; }
.yrkit-network-type   { color: #c586c0; }
.yrkit-network-size,
.yrkit-network-time   { color: #858585; text-align: right; }
.yrkit-network-url    { color: #d4d4d4; }
.yrkit-network-ws .yrkit-network-method { color: #e2c08d; }
.yrkit-network-error .yrkit-network-method,
.yrkit-network-error .yrkit-network-status { color: #f48771; }
/* lista de pedidos: cada entrada é clicável e revela o detalhe por extenso */
.yrkit-network-list {
  display: flex;
  flex-direction: column;
}
.yrkit-network-line {
  padding: 1px 2px;
  border-radius: 3px;
  cursor: pointer;
}
.yrkit-network-line:hover {
  background: #2a2d2e;
}
.yrkit-network-entry.yrkit-network-open .yrkit-network-line {
  background: #094771;
}
/* detalhe: mostra a URL e os demais campos sem cortes */
.yrkit-network-detail {
  display: none;
  margin: 2px 0 6px;
  padding: 6px 8px;
  background: #252526;
  border-left: 2px solid #0e639c;
  border-radius: 3px;
}
.yrkit-network-entry.yrkit-network-open .yrkit-network-detail {
  display: block;
}
.yrkit-network-detail-row {
  display: flex;
  gap: 8px;
  padding: 1px 0;
}
.yrkit-network-detail-key {
  flex: 0 0 56px;
  color: #858585;
}
.yrkit-network-detail-val {
  flex: 1 1 auto;
  min-width: 0;
  color: #d4d4d4;
  white-space: pre-wrap;
  word-break: break-all;
}
/* corpo da resposta (fetch/XHR/WS): bloco mono com scroll próprio */
.yrkit-network-body {
  margin: 2px 0 6px;
  padding: 6px 8px;
  max-height: 280px;
  overflow: auto;
  background: #1e1e1e;
  border: 1px solid #2d2d2d;
  border-radius: 3px;
  color: #d4d4d4;
  font-family: var(--yrkit-font-mono);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
/* aba Storage: localStorage guardado por projeto — é o que os iframes .yr usam
   (ver o bridge de storage). Agrupa por projeto e destaca o do ficheiro ativo. */
.yrkit-storage {
  background: #1e1e1e;
}
.yrkit-storage.yrkit-side-pane-active {
  display: flex;
  flex-direction: column;
}
.yrkit-storage-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 0 10px;
  background: #252526;
  border-bottom: 1px solid #333333;
}
.yrkit-storage-title {
  color: #969696;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.yrkit-storage-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #a0a0a0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-storage-refresh:hover {
  background: #2f2f31;
  color: #ffffff;
}
.yrkit-storage-list {
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 10px;
  overflow: auto;
  font-family: var(--yrkit-font-mono);
  font-size: 12px;
  line-height: 1.5;
}
.yrkit-storage-group {
  margin-bottom: 12px;
}
/* nome do projeto: cor do cabeçalho; vira teal no store do ficheiro ativo */
.yrkit-storage-name {
  margin-bottom: 4px;
  color: #4daafc;
  font-weight: 600;
}
.yrkit-storage-name-active {
  color: #4ec9b0;
}
.yrkit-storage-name-active::after {
  content: " ●";
  font-size: 9px;
  vertical-align: middle;
}
.yrkit-storage-row {
  display: flex;
  gap: 8px;
  padding: 1px 0;
  border-bottom: 1px solid #252526;
}
.yrkit-storage-key {
  flex: 0 0 34%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #9cdcfe;
  white-space: nowrap;
}
.yrkit-storage-val {
  flex: 1 1 auto;
  min-width: 0;
  color: #ce9178;
  white-space: pre-wrap;
  word-break: break-word;
}
.yrkit-storage-empty {
  padding: 6px 0;
  color: #808080;
}
/* ── aba Git: diff, commit (ficheiro ou repo) e push ─────────────────────── */
.yrkit-git {
  background: #1e1e1e;
}
.yrkit-git.yrkit-side-pane-active {
  display: flex;
  flex-direction: column;
}
.yrkit-git-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  background: #252526;
  border-bottom: 1px solid #333333;
}
.yrkit-git-title {
  color: #969696;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
/* branch atual: identifica o repo a que o painel se refere */
.yrkit-git-branch {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #4ec9b0;
  font-size: 12px;
  white-space: nowrap;
}
.yrkit-git-refresh {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #a0a0a0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-git-refresh:hover {
  background: #2f2f31;
  color: #ffffff;
}
/* estado da operação em curso no modal do git (push, pull, clone, commit…):
   rodinha a girar enquanto corre (busy), visto verde no fim (done) ou aviso
   vermelho se falhar (error). Sem estado, o indicador não ocupa espaço. */
.yrkit-git-status {
  display: none;
  flex: 0 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  white-space: nowrap;
}
.yrkit-git-status-busy,
.yrkit-git-status-done,
.yrkit-git-status-error {
  display: inline-flex;
}
.yrkit-git-status-busy { color: #4daafc; }
.yrkit-git-status-done { color: #73c991; }
.yrkit-git-status-error { color: #f48771; }
.yrkit-git-status-busy::before {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border: 2px solid rgba(77, 170, 252, 0.3);
  border-top-color: #4daafc;
  border-radius: 50%;
  animation: yrkit-git-spin 0.7s linear infinite;
}
.yrkit-git-status-done::before { content: "\2713"; }
.yrkit-git-status-error::before { content: "\2717"; }
@keyframes yrkit-git-spin {
  to { transform: rotate(360deg); }
}
/* lista de ficheiros alterados: clicar mostra o diff e marca o alvo do commit */
.yrkit-git-files {
  flex: 0 0 auto;
  max-height: 32%;
  overflow: auto;
  border-bottom: 1px solid #333333;
}
.yrkit-git-file {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.yrkit-git-file:hover {
  background: #2a2d2e;
}
.yrkit-git-file-active {
  background: #094771;
}
.yrkit-git-file-badge {
  flex: 0 0 14px;
  font-family: var(--yrkit-font-mono);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.yrkit-git-file-M { color: #e2c08d; }
.yrkit-git-file-U { color: #e06c75; }
.yrkit-git-file-A { color: #73c991; }
.yrkit-git-file-R { color: #4daafc; }
.yrkit-git-file-D { color: #f48771; }
.yrkit-git-file-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #a9b7c6;
  font-family: var(--yrkit-font-mono);
  font-size: 12px;
}
.yrkit-git-file-active .yrkit-git-file-name {
  color: #ffffff;
}
.yrkit-git-empty {
  padding: 6px 10px;
  color: #808080;
  font-size: 12px;
}
/* diff unificado: uma linha por linha, sem wrap (rola na horizontal) */
.yrkit-git-diff {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 8px 10px;
  overflow: auto;
  background: #1e1e1e;
  color: #d4d4d4;
  font-family: var(--yrkit-font-mono);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre;
}
/* cores do diff, como num cliente de git. Cada linha é um <span> display:block
   (ver renderGitDiff), para o fundo preencher a linha toda. O white-space: pre
   do <pre> preserva os espaços iniciais, alinhando o código como no git. */
.yrkit-git-diff-line {
  display: block;
  min-height: 1.5em;
}
.yrkit-git-diff-file { color: #569cd6; font-weight: 600; }
.yrkit-git-diff-meta { color: #808080; }
.yrkit-git-diff-hunk { color: #c586c0; }
.yrkit-git-diff-context { color: #d4d4d4; }
/* adicionadas/removidas: cor própria + um fundo ténue, como no VS Code */
.yrkit-git-diff-add {
  color: #73c991;
  background: rgba(115, 201, 145, 0.08);
}
.yrkit-git-diff-del {
  color: #f48771;
  background: rgba(244, 135, 113, 0.08);
}
.yrkit-git-form {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid #333333;
}
.yrkit-git-message {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  background: #2d2d2d;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  color: #d4d4d4;
  font-family: inherit;
  font-size: 12px;
  outline: none;
}
.yrkit-git-message:focus {
  border-color: #0e639c;
}
.yrkit-git-commit-file,
.yrkit-git-commit-all,
.yrkit-git-push {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
}
.yrkit-git-commit-file,
.yrkit-git-commit-all {
  background: #0e639c;
}
.yrkit-git-commit-file:hover,
.yrkit-git-commit-all:hover {
  background: #1177bb;
}
.yrkit-git-push {
  background: #2f6f3a;
}
.yrkit-git-push:hover {
  background: #3c8a4a;
}
/* modal do diff de git: aberto pelo menu de contexto (a aba Git saiu do painel,
   então branch + lista de alterações + diff passam a viver aqui) */
.yrkit-git-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.yrkit-git-modal-hidden {
  display: none;
}
.yrkit-git-modal-card {
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  height: min(80svh, 640px);
  overflow: hidden;
  background: #1e1e1e;
  border: 1px solid #3c3c3c;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  color: #d4d4d4;
  font-size: 13px;
}
.yrkit-git-modal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #333333;
}
.yrkit-git-modal-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #ffffff;
}
.yrkit-git-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #a0a0a0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-git-modal-close:hover {
  background: #3c3c3c;
  color: #ffffff;
}
/* botão de conexões (servidores/endpoints): abre o modal que alterna a `__api`
   da vez. Vive no CABEÇALHO do explorador, ao lado de "Explorer": trocar de
   servidor é uma preocupação da APLICAÇÃO (a sessão / a `__api`) e é aí que o
   utilizador a procura. Tom teal, como os outros controlos da app. */
.yrkit-tree-connections {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #4ec9b0;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-tree-connections:hover {
  background: rgba(78, 201, 176, 0.18);
  color: #7fe3cc;
}
/* ── modal das conexões: alternar entre vários servidores (urls) ───────────── */
.yrkit-endpoints-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.yrkit-endpoints-modal-hidden {
  display: none;
}
.yrkit-endpoints-card {
  display: flex;
  flex-direction: column;
  width: min(520px, 100%);
  max-height: 80svh;
  overflow: hidden;
  background: #252526;
  border: 1px solid #3c3c3c;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  color: #cccccc;
  font-size: 13px;
}
.yrkit-endpoints-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #333333;
}
.yrkit-endpoints-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #ffffff;
}
.yrkit-endpoints-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #a0a0a0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-endpoints-close:hover {
  background: #3c3c3c;
  color: #ffffff;
}
/* barra de autenticação da conexão ativa: estado (deslogado/utilizador) à
   esquerda, ações (Login/Logout) à direita */
.yrkit-endpoints-auth {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid #333333;
}
.yrkit-endpoints-auth-user {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #9cdcfe;
  font-size: 12px;
}
.yrkit-endpoints-login,
.yrkit-endpoints-logout {
  flex: 0 0 auto;
  padding: 3px 10px;
  border: none;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}
.yrkit-endpoints-login {
  background: #0e639c;
  color: #ffffff;
}
.yrkit-endpoints-login:hover {
  background: #1177bb;
}
.yrkit-endpoints-logout {
  background: #3a3d41;
  color: #cccccc;
}
.yrkit-endpoints-logout:hover {
  background: #4d4d4d;
  color: #ffffff;
}
.yrkit-endpoints-login:disabled,
.yrkit-endpoints-logout:disabled {
  background: transparent;
  color: #6a6a6a;
  cursor: default;
}
/* form de login da conexão ativa: revelado ao clicar em "Login". O login NÃO
   é obrigatório — "Cancel" esconde-o e a app segue a funcionar deslogada. */
.yrkit-endpoints-auth-form {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid #333333;
}
.yrkit-endpoints-auth-form-hidden {
  display: none;
}
.yrkit-endpoints-auth-username,
.yrkit-endpoints-auth-password {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 8px;
  background: #1e1e1e;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  color: #d4d4d4;
  font-size: 12px;
  outline: none;
}
.yrkit-endpoints-auth-username:focus,
.yrkit-endpoints-auth-password:focus {
  border-color: #0e639c;
}
.yrkit-endpoints-auth-submit {
  flex: 0 0 auto;
  padding: 5px 12px;
  background: #0e639c;
  border: none;
  border-radius: 4px;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
}
.yrkit-endpoints-auth-submit:hover {
  background: #1177bb;
}
.yrkit-endpoints-auth-cancel {
  flex: 0 0 auto;
  padding: 5px 12px;
  background: #3a3d41;
  border: none;
  border-radius: 4px;
  color: #cccccc;
  font-size: 12px;
  cursor: pointer;
}
.yrkit-endpoints-auth-cancel:hover {
  background: #4d4d4d;
  color: #ffffff;
}
.yrkit-endpoints-list {
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 10px;
  overflow: auto;
}
.yrkit-endpoints-empty {
  padding: 8px 2px;
  color: #808080;
}
/* cada conexão: nome | url | botão de usar | remover. A conexão ATIVA fica
   realçada (borda teal) e o botão passa a "Active" (inerte). */
.yrkit-endpoints-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid #333333;
  border-radius: 5px;
  cursor: pointer;
}
.yrkit-endpoints-item + .yrkit-endpoints-item {
  margin-top: 6px;
}
.yrkit-endpoints-item:hover {
  background: #2a2d2e;
}
.yrkit-endpoints-item-active {
  border-color: #4ec9b0;
  background: rgba(78, 201, 176, 0.1);
}
.yrkit-endpoints-item-name {
  flex: 0 0 auto;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffffff;
  font-weight: 600;
}
.yrkit-endpoints-item-url {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #9cdcfe;
  font-family: var(--yrkit-font-mono);
  font-size: 12px;
}
/* projeto ativo desta conexão: cada conexão guarda o seu (trocar de conexão
   repõe-o). Discreto, entre o url e os botões. */
.yrkit-endpoints-item-project {
  flex: 0 0 auto;
  max-width: 30%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #c586c0;
  font-size: 11px;
}
.yrkit-endpoints-item-project::before {
  content: "\2302 "; /* ⌂ */
}
.yrkit-endpoints-item-use {
  flex: 0 0 auto;
  padding: 3px 10px;
  background: #0e639c;
  border: none;
  border-radius: 4px;
  color: #ffffff;
  font-size: 11px;
  cursor: pointer;
}
.yrkit-endpoints-item-use:hover {
  background: #1177bb;
}
.yrkit-endpoints-item-use:disabled {
  background: transparent;
  color: #4ec9b0;
  cursor: default;
}
.yrkit-endpoints-item-remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #a0a0a0;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-endpoints-item-remove:hover {
  background: #5a1d1d;
  color: #f48771;
}
.yrkit-endpoints-hint {
  flex: 0 0 auto;
  padding: 0 14px 8px;
  color: #858585;
  font-size: 11px;
}
.yrkit-endpoints-form {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid #333333;
}
.yrkit-endpoints-name {
  flex: 0 0 34%;
  min-width: 0;
  padding: 6px 8px;
  background: #1e1e1e;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  color: #d4d4d4;
  font-size: 12px;
  outline: none;
}
.yrkit-endpoints-url {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  background: #1e1e1e;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  color: #d4d4d4;
  font-family: var(--yrkit-font-mono);
  font-size: 12px;
  outline: none;
}
.yrkit-endpoints-name:focus,
.yrkit-endpoints-url:focus {
  border-color: #0e639c;
}
.yrkit-endpoints-add {
  flex: 0 0 auto;
  padding: 6px 12px;
  background: #0e639c;
  border: none;
  border-radius: 4px;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
}
.yrkit-endpoints-add:hover {
  background: #1177bb;
}
/* ── Caddy: site do projeto + Caddy global ─────────────────────────────────── */
/* botão na barra do projeto (ao lado da engrenagem): abre o modal do Caddy.
   Mesmo tom teal dos outros controlos da barra, realçado enquanto o modal está
   aberto. */
.yrkit-tree-project-caddy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #4ec9b0;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-tree-project-caddy:hover {
  background: rgba(78, 201, 176, 0.18);
  color: #7fe3cc;
}
.yrkit-tree-project-caddy.yrkit-tree-project-caddy-active {
  background: rgba(78, 201, 176, 0.28);
  color: #ffffff;
}
.yrkit-tree-project-caddy-icon {
  display: block;
  width: 14px;
  height: 14px;
}
/* modal do Caddy: mesmo desenho dos outros modais (véu + cartão) */
.yrkit-caddy-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.yrkit-caddy-modal-hidden {
  display: none;
}
.yrkit-caddy-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(560px, 100%);
  max-height: 80svh;
  padding-bottom: 12px;
  overflow: auto;
  background: #252526;
  border: 1px solid #3c3c3c;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  color: #cccccc;
  font-size: 13px;
}
.yrkit-caddy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #333333;
}
.yrkit-caddy-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #ffffff;
}
.yrkit-caddy-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #a0a0a0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-caddy-close:hover {
  background: #3c3c3c;
  color: #ffffff;
}
/* projeto a que o site pertence: o Caddy é GLOBAL, mas o SITE é do projeto */
.yrkit-caddy-project {
  padding: 0 14px;
  color: #4ec9b0;
  font-weight: 600;
}
.yrkit-caddy-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 14px;
}
.yrkit-caddy-section-title {
  color: #9cdcfe;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.yrkit-caddy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.yrkit-caddy-site-apply,
.yrkit-caddy-site-remove {
  flex: 0 0 auto;
  padding: 5px 12px;
  background: #3a3d41;
  border: none;
  border-radius: 4px;
  color: #cccccc;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
/* sites LIDOS do Caddyfile (ao abrir o modal): uma linha por bloco — endereço à
   esquerda, porta interna ao meio e as ações à direita. Rola por dentro, para
   um Caddyfile grande não empurrar o formulário do projeto para fora do modal. */
.yrkit-caddy-sites {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 160px;
  padding: 6px 8px;
  overflow: auto;
  background: #1e1e1e;
  border: 1px solid #333333;
  border-radius: 6px;
  font-family: var(--yrkit-font-mono);
  font-size: 11px;
}
/* sem listagem (ainda não se pediu, ou não há sites): o contentor não ocupa
   espaço nenhum — :empty só é verdadeiro sem filhos nem texto */
.yrkit-caddy-sites:empty {
  display: none;
}
.yrkit-caddy-empty {
  color: #858585;
}
.yrkit-caddy-site {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 4px;
  border-radius: 4px;
}
.yrkit-caddy-site:hover {
  background: #2a2d2e;
}
.yrkit-caddy-site-addr {
  flex: 0 0 auto;
  color: #4ec9b0;
  font-weight: 600;
}
/* o bloco de opções globais não é um site: fica recessivo (e sem ações) */
.yrkit-caddy-site-global .yrkit-caddy-site-addr {
  color: #858585;
}
.yrkit-caddy-site-body {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #858585;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yrkit-caddy-site-edit,
.yrkit-caddy-site-del {
  flex: 0 0 auto;
  padding: 1px 8px;
  background: #3a3d41;
  border: none;
  border-radius: 4px;
  color: #cccccc;
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
}
.yrkit-caddy-site-edit:hover {
  background: #4d4d4d;
  color: #ffffff;
}
.yrkit-caddy-site-del:hover {
  background: #5a1d1d;
  color: #f48771;
}
/* o `cat` do Caddyfile tal e qual: o ficheiro inteiro, para conferir o que a
   lista acima resume */
.yrkit-caddy-raw {
  max-height: 200px;
  margin: 0;
  padding: 8px 10px;
  overflow: auto;
  background: #1e1e1e;
  border: 1px solid #333333;
  border-radius: 6px;
  color: #d4d4d4;
  font-family: var(--yrkit-font-mono);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre;
}
.yrkit-caddy-raw:empty {
  display: none;
}
/* aplicar: a ação principal do site do projeto */
.yrkit-caddy-site-apply {
  background: #0e639c;
  color: #ffffff;
}
.yrkit-caddy-site-apply:hover {
  background: #1177bb;
}
/* remover: destrutiva — só tinge de vermelho no hover */
.yrkit-caddy-site-remove:hover {
  background: #5a1d1d;
  color: #f48771;
}
.yrkit-caddy-fields {
  display: flex;
  gap: 6px;
}
.yrkit-caddy-domain {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  background: #1e1e1e;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  color: #d4d4d4;
  font-family: var(--yrkit-font-mono);
  font-size: 12px;
  outline: none;
}
.yrkit-caddy-port {
  flex: 0 0 90px;
  width: 90px;
  padding: 6px 8px;
  background: #1e1e1e;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  color: #d4d4d4;
  font-family: var(--yrkit-font-mono);
  font-size: 12px;
  text-align: center;
  outline: none;
}
.yrkit-caddy-domain:focus,
.yrkit-caddy-port:focus {
  border-color: #0e639c;
}
/* "domain only": o modo -d do script do Caddy (sem porta externa) */
.yrkit-caddy-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #858585;
  font-size: 12px;
  cursor: pointer;
}
.yrkit-caddy-direct {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #0e639c;
  cursor: pointer;
}
/* resumo do site que vai ser escrito (endereço → porta interna) */
.yrkit-caddy-hint {
  color: #4ec9b0;
  font-family: var(--yrkit-font-mono);
  font-size: 11px;
  word-break: break-all;
}
/* registo dos comandos enviados para o terminal (a SAÍDA é lá, no terminal) */
.yrkit-caddy-log {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 60px;
  max-height: 180px;
  margin: 0 14px;
  padding: 8px 10px;
  overflow: auto;
  background: #1e1e1e;
  border: 1px solid #333333;
  border-radius: 6px;
  color: #a9b7c6;
  font-family: var(--yrkit-font-mono);
  font-size: 11px;
  line-height: 1.5;
}
.yrkit-caddy-log-line {
  white-space: pre-wrap;
  word-break: break-word;
}
.yrkit-caddy-log-cmd {
  color: #4daafc;
  font-weight: 600;
}
.yrkit-caddy-log-error {
  color: #f48771;
}
/* aba IA: chat ocupa toda a altura e a caixa de texto fica no fundo */
.yrkit-side-pane-ai.yrkit-side-pane-active {
  display: flex;
  flex-direction: column;
  background: #1e1e1e;
}
/* cabeçalho da aba IA: sessão/utilizador à esquerda, "Clear" à direita */
.yrkit-ai-head {
  flex: 0 0 auto;
  display: flex;
  /* o cabeçalho agrupa sessão + atalhos + limpar: em painéis estreitos deixa
     quebrar a linha (em vez de espremer tudo numa só, a "amontoar") */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  min-height: 40px;
  padding: 6px 12px;
  background: #252526;
  border-bottom: 1px solid #333333;
}
/* sessão da IA: utilizador + entrar/sair. O botão de entrar ocupa o lugar do
   antigo saldo, que passa a aparecer só quando há sessão. */
.yrkit-ai-auth {
  flex: 1 1 auto;
  display: flex;
  /* também aqui: saldo + top ups + sessão podem quebrar linha quando faltar
     espaço, em vez de estourar o cabeçalho */
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.yrkit-ai-balance {
  flex: 0 0 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #4ec9b0;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* top up do saldo: links "+2/+5/+10" ao lado do saldo, no cabeçalho da aba IA.
   Pílulas no mesmo tom teal do saldo; o href fica a cargo de quem monta a app
   (os links reais de recarga entram aqui). */
.yrkit-ai-topup {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(78, 201, 176, 0.16);
  color: #4ec9b0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.yrkit-ai-topup:hover {
  background: rgba(78, 201, 176, 0.3);
  color: #7fe3cc;
}
/* atalhos de navegação da app na barra da IA (Dashboard/Billing): agrupados à
   parte da sessão, para os links de página não se confundirem com os controlos
   de conta (login/registo/saldo). */
.yrkit-ai-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* link de navegação: pílula compacta com ícone e rótulo */
.yrkit-ai-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #3a3d41;
  color: #cccccc;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.yrkit-ai-nav-link:hover {
  background: #4d4d4d;
  color: #ffffff;
}
.yrkit-ai-nav-icon {
  display: block;
  width: 13px;
  height: 13px;
}
/* Billing: página de administração — só aparece a admins (o JS alterna a
   classe .yrkit-ai-hidden, conforme o `admin` do getMe). Tom teal, o mesmo do
   saldo a que está associado. */
.yrkit-ai-nav-billing {
  background: rgba(78, 201, 176, 0.16);
  color: #4ec9b0;
}
.yrkit-ai-nav-billing:hover {
  background: rgba(78, 201, 176, 0.3);
  color: #7fe3cc;
}
/* .yrkit-ai-nav-link define display: inline-flex; a regra de duas classes
   garante que o "hidden" (display: none) continua a vencer. */
.yrkit-ai-nav-link.yrkit-ai-hidden {
  display: none;
}
/* nome do utilizador com sessão de IA: discreto, à frente dos botões, com um
   ponto verde a marcar "sessão ativa" (sem fundo — o realce é o ponto).
   (.yrkit-ai-user-logged e não .yrkit-ai-user, que nomeia as bolhas do chat) */
.yrkit-ai-user-logged {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #9cdcfe;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.yrkit-ai-user-logged::before {
  content: "\25CF";
  margin-right: 5px;
  color: #4ec9b0;
  font-size: 8px;
  vertical-align: middle;
}
.yrkit-ai-login,
.yrkit-ai-register,
.yrkit-ai-logout {
  flex: 0 0 auto;
  padding: 5px 12px;
  border: none;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
/* Logout empurrado para o extremo direito do bloco de sessão: assim a
   INFORMAÇÃO (saldo + utilizador) fica à esquerda e a AÇÃO à direita,
   encostada ao "Clear" — em vez de quatro elementos amontoados à esquerda,
   que se liam como um borrão. O Login (estado deslogado) mantém-se à esquerda,
   no lugar que o saldo ocupava. */
.yrkit-ai-logout {
  margin-left: auto;
}
.yrkit-ai-login {
  background: #0e639c;
  color: #ffffff;
}
.yrkit-ai-login:hover {
  background: #1177bb;
}
/* Register: ação SECUNDÁRIA (neutra) ao lado do Login (azul), para os dois não
   competirem como dois botões "principais" seguidos. */
.yrkit-ai-register {
  background: #3a3d41;
  color: #cccccc;
}
.yrkit-ai-register:hover {
  background: #4d4d4d;
  color: #ffffff;
}
/* Logout: ícone (não texto) e tom de ALERTA — sair é destrutivo. Botão compacto,
   como o da lixeira, para os dois ícones ficarem alinhados. */
.yrkit-ai-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 4px 8px;
  background: #5a1d1d;
  color: #f48771;
  font-size: 13px;
}
.yrkit-ai-logout:hover {
  background: #7a2626;
  color: #ffffff;
}
.yrkit-ai-logout-icon {
  display: block;
  width: 14px;
  height: 14px;
}
/* botão de sessão que não se aplica ao estado atual (ex: Logout deslogado) */
.yrkit-ai-hidden {
  display: none;
}
/* form de login da IA: revelado ao clicar em "Login" (o login não é
   obrigatório para ver a conversa, mas é preciso para enviar) */
.yrkit-ai-auth-form {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #252526;
  border-bottom: 1px solid #333333;
}
.yrkit-ai-auth-form-hidden {
  display: none;
}
.yrkit-ai-auth-username,
.yrkit-ai-auth-password {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 8px;
  background: #1e1e1e;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  color: #d4d4d4;
  font-size: 12px;
  outline: none;
}
.yrkit-ai-auth-username:focus,
.yrkit-ai-auth-password:focus {
  border-color: #0e639c;
}
.yrkit-ai-auth-submit {
  flex: 0 0 auto;
  padding: 5px 12px;
  background: #0e639c;
  border: none;
  border-radius: 4px;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
}
.yrkit-ai-auth-submit:hover {
  background: #1177bb;
}
.yrkit-ai-auth-cancel {
  flex: 0 0 auto;
  padding: 5px 12px;
  background: #3a3d41;
  border: none;
  border-radius: 4px;
  color: #cccccc;
  font-size: 12px;
  cursor: pointer;
}
.yrkit-ai-auth-cancel:hover {
  background: #4d4d4d;
  color: #ffffff;
}
/* corpo do chat: o log (com scroll) e a mensagem de boas-vindas ao centro,
   mostrada só enquanto a conversa está vazia */
.yrkit-ai-body {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.yrkit-ai-log {
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px 12px;
  overflow: auto;
}
.yrkit-ai-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #858585;
  font-size: 14px;
  text-align: center;
  pointer-events: none;
}
.yrkit-ai-empty-hidden {
  display: none;
}
.yrkit-ai-msg {
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-word;
}
/* bolhas das mensagens no log do chat (papel = .yrkit-ai-<role>) */
.yrkit-ai-user { background: #094771; }
.yrkit-ai-bot { background: #2d2d2d; white-space: normal; }
/* erro da IA (ex: sem créditos): bolha em tom de alerta, texto simples (não
   passa pelo markdown, para a mensagem do backend aparecer tal e qual) */
.yrkit-ai-error {
  background: #5a1d1d;
  color: #f48771;
}
/* resposta da IA renderizada como markdown: blocos com espaçamento próprio
   (o texto do utilizador mantém o pre-wrap; a resposta do bot é HTML) */
.yrkit-ai-bot > :first-child { margin-top: 0; }
.yrkit-ai-bot > :last-child { margin-bottom: 0; }
.yrkit-ai-bot p,
.yrkit-ai-bot ul,
.yrkit-ai-bot ol,
.yrkit-ai-bot pre,
.yrkit-ai-bot blockquote {
  margin: 0 0 8px;
}
.yrkit-ai-bot h1,
.yrkit-ai-bot h2,
.yrkit-ai-bot h3,
.yrkit-ai-bot h4,
.yrkit-ai-bot h5,
.yrkit-ai-bot h6 {
  margin: 0 0 6px;
  color: #ffffff;
  line-height: 1.3;
}
.yrkit-ai-bot h1 { font-size: 1.4em; }
.yrkit-ai-bot h2 { font-size: 1.25em; }
.yrkit-ai-bot h3 { font-size: 1.1em; }
.yrkit-ai-bot ul,
.yrkit-ai-bot ol { padding-left: 20px; }
.yrkit-ai-bot a { color: #4daafc; }
.yrkit-ai-bot code {
  padding: 1px 5px;
  background: #1e1e1e;
  border-radius: 3px;
  font-family: var(--yrkit-font-mono);
  font-size: 12px;
}
.yrkit-ai-bot pre {
  padding: 10px 12px;
  background: #1e1e1e;
  border: 1px solid #333333;
  border-radius: 6px;
  overflow: auto;
}
.yrkit-ai-bot pre code {
  padding: 0;
  background: none;
  font-size: 12px;
  line-height: 1.5;
}
.yrkit-ai-bot blockquote {
  padding: 4px 10px;
  border-left: 3px solid #0e639c;
  color: #a0a0a0;
}
/* bloco SEARCH/REPLACE da IA: cabeçalho + as duas metades (antigo/novo), com o
   código realçado pelo mesmo highlightCode do editor */
.yrkit-ai-diff {
  margin: 0 0 10px;
  border: 1px solid #3c3c3c;
  border-radius: 6px;
  overflow: hidden;
}
/* bloco SEARCH/REPLACE ainda a chegar (stream a meio): contorno tracejado,
   sinaliza que o cartão vai sendo completado à medida que os chunks chegam */
.yrkit-ai-diff-pending {
  border-style: dashed;
}
.yrkit-ai-diff-head {
  padding: 4px 10px;
  background: #333336;
  border-bottom: 1px solid #3c3c3c;
  color: #c586c0;
  font-family: var(--yrkit-font-mono);
  font-size: 11px;
  font-weight: 600;
}
.yrkit-ai-diff-tag {
  padding: 3px 10px;
  background: #2d2d2d;
  color: #858585;
  font-family: var(--yrkit-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.yrkit-ai-diff-search .yrkit-ai-diff-tag { color: #f48771; }
.yrkit-ai-diff-replace .yrkit-ai-diff-tag { color: #73c991; }
.yrkit-ai-diff pre.yrkit-ai-code {
  margin: 0;
  padding: 10px 12px;
  background: #1e1e1e;
  border: 0;
  border-radius: 0;
  overflow: auto;
}
.yrkit-ai-diff-search pre.yrkit-ai-code { border-left: 2px solid #5a1d1d; }
.yrkit-ai-diff-replace pre.yrkit-ai-code { border-left: 2px solid #1e5a2d; }
.yrkit-ai-diff pre.yrkit-ai-code code {
  padding: 0;
  background: none;
  font-family: var(--yrkit-font-mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre;
}
.yrkit-ai-form {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid #333333;
}
.yrkit-ai-input {
  flex: 1 1 auto;
  min-height: 44px;
  max-height: 140px;
  padding: 8px;
  background: #2d2d2d;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  color: #d4d4d4;
  font-family: inherit;
  font-size: 13px;
  resize: none;
  outline: none;
}
.yrkit-ai-input:focus {
  border-color: #0e639c;
}
/* botão "adicionar imagem": ícone compacto, ao lado da caixa de texto */
.yrkit-ai-image {
  flex: 0 0 auto;
  align-self: stretch;
  width: 36px;
  padding: 0;
  background: #2d2d2d;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  color: #cccccc;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-ai-image:hover {
  background: #3c3c3c;
  color: #ffffff;
}
/* input de ficheiro escondido: quem abre o seletor é o botão acima */
.yrkit-ai-image-input {
  display: none;
}
/* pré-visualização do anexo: miniatura + remover, acima da caixa de texto */
.yrkit-ai-attach {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-top: 1px solid #333333;
}
.yrkit-ai-attach-hidden {
  display: none;
}
.yrkit-ai-attach-thumb {
  max-width: 80px;
  max-height: 60px;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
}
.yrkit-ai-attach-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #a0a0a0;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-ai-attach-remove:hover {
  background: #3c3c3c;
  color: #ffffff;
}
/* imagem anexada dentro de uma mensagem do chat */
.yrkit-ai-img {
  display: block;
  max-width: 100%;
  max-height: 240px;
  margin-bottom: 6px;
  border: 1px solid #3c3c3c;
  border-radius: 6px;
}
.yrkit-ai-send {
  flex: 0 0 auto;
  align-self: stretch;
  padding: 0 14px;
  background: #0e639c;
  border: none;
  border-radius: 4px;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
}
.yrkit-ai-send:hover {
  background: #1177bb;
}
.yrkit-ai-send:disabled {
  background: #3a3d41;
  color: #909090;
  cursor: default;
}
/* parar a resposta em curso: só aparece durante a resposta (ver
   .yrkit-ai-stop-hidden), ocupando o lugar do Send */
.yrkit-ai-stop {
  flex: 0 0 auto;
  align-self: stretch;
  padding: 0 14px;
  background: #a1260d;
  border: none;
  border-radius: 4px;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
}
.yrkit-ai-stop:hover {
  background: #c42b0f;
}
/* esconde o botão: o Stop fica oculto em repouso, o Send oculto a responder */
.yrkit-ai-stop-hidden {
  display: none;
}
/* apagar a conversa: vive no cabeçalho da aba; ação secundária, tom neutro */
/* Botão de ícone (lixeira): quadrado e centrado, em vez de um rótulo de texto. */
.yrkit-ai-clear {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 4px 8px;
  background: #3a3d41;
  border: none;
  border-radius: 4px;
  color: #cccccc;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-ai-clear:hover {
  background: #4d4d4d;
  color: #ffffff;
}
/* deslogado: o "clear" não faz sentido sem sessão (não há conversa a limpar),
   pelo que acompanha o resto do estado da IA e desaparece. A regra de duas
   classes vence o "display: inline-flex" de .yrkit-ai-clear (definido acima). */
.yrkit-ai-clear.yrkit-ai-hidden {
  display: none;
}
/* bolha de espera da IA: pulsa enquanto se aguarda a resposta */
.yrkit-ai-pending {
  color: #969696;
  font-style: italic;
  animation: yrkit-ai-pulse 1.2s ease-in-out infinite;
}
@keyframes yrkit-ai-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
/* indicador de "a IA ainda está a trabalhar": três pontos que pulsam em
   sequência, mantidos no fim do log durante TODA a resposta. A resposta pode
   PAUSAR entre chunks (a IA "pensa"), e sem isto não se sabia se já tinha
   acabado. Entra assim que há conteúdo (stream ou tool calls) e sai no "done"
   (ou num erro/stop). */
.yrkit-ai-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
}
.yrkit-ai-typing .yrkit-ai-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #969696;
  animation: yrkit-ai-typing 1.2s ease-in-out infinite;
}
.yrkit-ai-typing .yrkit-ai-dot:nth-child(2) { animation-delay: 0.2s; }
.yrkit-ai-typing .yrkit-ai-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes yrkit-ai-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
/* ── terminal (xterm): janela flutuante, centrada, arrastável ─────────────── */
.yrkit-term {
  position: absolute;
  /* posição/tamanho reais são definidos por JS (ver "janela flutuante do
     terminal"); estes valores são só o fallback antes da 1ª aplicação */
  left: 0;
  top: 0;
  width: 640px;
  height: 320px;
  max-width: 100%;
  max-height: 100%;
  /* sob a sobreposição do explorador no mobile (99/100) */
  z-index: 90;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #1e1e1e;
  border: 1px solid #333333;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.yrkit-term-hidden {
  display: none;
}
/* pega de redimensionamento no canto inferior direito da janela */
.yrkit-term-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 22px;
  height: 22px;
  cursor: nwse-resize;
  touch-action: none;
}
/* riscas diagonais a sugerir a pega (acendem no hover) */
.yrkit-term-resize::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #5a5a5a;
  border-bottom: 2px solid #5a5a5a;
}
.yrkit-term-resize:hover::after {
  border-color: #0e639c;
}
.yrkit-term-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  height: 32px;
  background: #252526;
  /* arrastar a barra move a janela; touch-action evita o scroll ao arrastar
     no telemóvel (botões/abas continuam a responder a toques) */
  cursor: move;
  touch-action: none;
}
.yrkit-term-tabs {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.yrkit-term-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 180px;
  padding: 0 8px 0 12px;
  background: #2d2d2d;
  border-right: 1px solid #252526;
  color: #969696;
  white-space: nowrap;
  cursor: pointer;
}
.yrkit-term-tab-active {
  background: #1e1e1e;
  color: #ffffff;
}
.yrkit-term-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.yrkit-term-tab-close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 3px;
  color: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-term-tab-close:hover {
  background: #4d4d4d;
  color: #ffffff;
}
.yrkit-term-new,
.yrkit-term-close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  padding: 0;
  background: transparent;
  border: none;
  color: #a0a0a0;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-term-new:hover,
.yrkit-term-close:hover {
  background: #2f2f31;
  color: #ffffff;
}
/* controlos de tamanho da fonte do terminal: mais estreitos que o +/×, com o
   rótulo "A−/A+" (como os do rodapé do editor), para não competirem com eles */
.yrkit-term-font-dec,
.yrkit-term-font-inc {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  padding: 0;
  background: transparent;
  border: none;
  color: #a0a0a0;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.yrkit-term-font-dec:hover,
.yrkit-term-font-inc:hover {
  background: #2f2f31;
  color: #ffffff;
}
.yrkit-term-font-dec:disabled,
.yrkit-term-font-inc:disabled {
  color: #5a5a5a;
  cursor: default;
}
.yrkit-term-font-dec:disabled:hover,
.yrkit-term-font-inc:disabled:hover {
  background: transparent;
}
/* barra de teclas especiais do terminal (Esc/Ctrl/Alt/Tab/setas). O teclado do
   sistema (sobretudo no celular) não as oferece; os botões enviam as mesmas
   sequências que o teclado real enviaria. Só aparece em ecrã estreito ou em
   dispositivos de toque — no desktop normal o teclado chega e a barra some. */
.yrkit-term-keys {
  display: none;
}
.yrkit-term-key {
  flex: 0 0 auto;
  min-width: 36px;
  padding: 7px 8px;
  background: #2d2d2d;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  color: #cccccc;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.yrkit-term-key:active {
  background: #3c3c3c;
  color: #ffffff;
}
/* modificador armado (Ctrl/Alt): realçado, à espera da próxima tecla */
.yrkit-term-key.yrkit-term-key-armed {
  background: #0e639c;
  border-color: #0e639c;
  color: #ffffff;
}
@media (max-width: 802px), (hover: none) and (pointer: coarse) {
  .yrkit-term-keys {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    padding: 4px 6px;
    overflow-x: auto;
    background: #252526;
    border-bottom: 1px solid #333333;
    scrollbar-width: none;
  }
  .yrkit-term-keys::-webkit-scrollbar {
    display: none;
  }
}
.yrkit-term-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #1e1e1e;
}
.yrkit-term-view {
  position: absolute;
  inset: 0;
  padding: 4px 6px;
  box-sizing: border-box;
}
/* o xterm preenche a aba do terminal (o fit mede o contentor) */
.yrkit-term-view .xterm {
  height: 100%;
  width: 100%;
}
/* ── ecrã de entrada: nada aberto → o CHAT ocupa a janela ─────────────────── */
/* Abrir a app sem nada aberto não mostra um editor vazio: o chat (a aba IA)
   fica com o lugar do editor. O `.yrkit-main` empilha, o palco do editor sai de
   cena (a BARRA do editor fica, para as ferramentas continuarem à mão) e o
   painel lateral estica para ocupar o resto. A classe é posta/tirada pelo JS
   conforme há — ou não — um ficheiro ativo (ver applyWelcome): assim que a
   primeira mensagem cria o projeto e abre yr/Index_.yr, tudo volta ao normal. */
.yrkit-shell.yrkit-welcome .yrkit-main {
  flex-direction: column;
}
.yrkit-shell.yrkit-welcome .yrkit-editor {
  flex: 0 0 auto;
}
.yrkit-shell.yrkit-welcome .yrkit-editor-stage,
.yrkit-shell.yrkit-welcome .yrkit-detached-view {
  display: none;
}
.yrkit-shell.yrkit-welcome .yrkit-splitter {
  display: none;
}
/* o chat é o ecrã: estica e perde a moldura do painel. O !important é preciso
   porque .yrkit-shell.yrkit-side-hidden .yrkit-side (mesma especificidade)
   esconderia o painel e a janela ficava sem nada. */
.yrkit-shell.yrkit-welcome .yrkit-side {
  display: flex !important;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: auto;
  border-left: none;
}
/* coluna de leitura: em ecrã largo o chat não se estica de ponta a ponta */
.yrkit-shell.yrkit-welcome .yrkit-ai-head,
.yrkit-shell.yrkit-welcome .yrkit-ai-auth-form,
.yrkit-shell.yrkit-welcome .yrkit-ai-body,
.yrkit-shell.yrkit-welcome .yrkit-ai-attach,
.yrkit-shell.yrkit-welcome .yrkit-ai-form {
  width: 100%;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
/* a saudação é o único texto em cena: pode ser maior */
.yrkit-shell.yrkit-welcome .yrkit-ai-empty {
  font-size: 18px;
}
/* ── mobile: o explorador vira uma sobreposição (não empurra o editor) ─────── */
@media (max-width: 802px) {
  .yrkit-tree {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 100;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.5);
  }
  /* o botão de alternar fica ACIMA da sobreposição, sempre acessível */
  .yrkit-editor-toggle-tree {
    position: relative;
    z-index: 101;
  }
  /* o botão flutua no canto superior esquerdo da sobreposição: recua o
     cabeçalho e alinha-o à altura da barra para o "Explorer" não ficar por
     baixo do botão */
  .yrkit-tree-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    box-sizing: border-box;
    min-height: 35px;
    padding-left: 44px;
  }
  .yrkit-editor-toggle-stack {
    display: none;
  }
  /* barra de abas no mobile: ferramentas compactas e abas mais estreitas,
     para caberem mais abas antes de a barra precisar rolar */
  .yrkit-editor-tool {
    width: 26px;
    height: 26px;
    margin: 0 1px;
    font-size: 14px;
  }
  .yrkit-editor-save {
    padding: 4px 8px;
    margin: 0 4px;
    font-size: 11px;
  }
  .yrkit-editor-tab {
    max-width: 130px;
    padding: 0 6px 0 10px;
  }
  .yrkit-editor-tab-label {
    max-width: 78px;
  }
  /* explorador aberto em sobreposição: escurece (e desfoca) o conteúdo ao
     lado; z-index 99 fica sob a árvore (100) e sob o botão de alternar (101) */
  .yrkit-shell:not(.yrkit-tree-hidden) .yrkit-tree-overlay {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 99;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
}