/* Superfícies neutras dos drawers do launcher. Estados mantêm semântica. */
.computador-drawer {
  --drawer-borda: rgba(255, 255, 255, .11);
  --drawer-superficie: rgba(255, 255, 255, .035);
}

.computador-drawer__painel {
  border-left-color: var(--drawer-borda);
  background: radial-gradient(
    circle at 85% 0%, rgba(255, 255, 255, .045), transparent 32%
  ), linear-gradient(160deg, #18191c, #0b0c0f 85%);
}

.computador-drawer__cabecalho,
.computador-form__rodape {
  border-color: var(--drawer-borda);
}

.computador-form__rodape {
  background: rgba(11, 12, 15, .96);
}

.computador-campo :is(input, select, textarea),
.computador-select__botao,
.computador-acordeao,
.computador-select__lista,
.mcp-readonly-row,
.computador-form__retorno,
.mcp-status {
  border-color: var(--drawer-borda);
  background: var(--drawer-superficie);
}

.computador-select__lista {
  background: #1a1b1e;
}

.computador-auto,
.mcp-connection-note {
  border: 1px solid rgba(180, 185, 192, .16);
  background: rgba(180, 185, 192, .045);
}

.computador-auto__icone {
  background: #a4aab3;
  box-shadow: 0 0 10px rgba(164, 170, 179, .28);
}

/* Conectado permanece verde; aviso e descoberta ficam neutros. */
body[data-mcp-state="connected"] .mcp-connection-note {
  border-color: rgba(91, 205, 154, .2);
  background: rgba(91, 205, 154, .045);
}

body[data-mcp-state="connected"]
  .mcp-connection-note .computador-auto__icone {
  background: #6ee7b7;
  box-shadow: 0 0 12px rgba(110, 231, 183, .38);
}

body[data-mcp-state="connecting"]
  .mcp-connection-note .computador-auto__icone {
  background: #a4aab3;
  box-shadow: 0 0 10px rgba(164, 170, 179, .28);
}

.computador-drawer__fechar:hover,
.computador-acordeao:hover {
  border-color: rgba(255, 255, 255, .2);
}

[data-theme="light"] .computador-drawer {
  --drawer-borda: rgba(0, 0, 0, .12);
  --drawer-superficie: rgba(0, 0, 0, .025);
}

[data-theme="light"] .computador-drawer__painel {
  background: radial-gradient(
    circle at 85% 0%, rgba(0, 0, 0, .035), transparent 32%
  ), linear-gradient(160deg, #fff, #f0f0f1 85%);
}

[data-theme="light"] .computador-form__rodape {
  background: rgba(248, 248, 249, .96);
}

[data-theme="light"] .computador-select__lista {
  background: #fff;
}

[data-theme="light"] .computador-auto,
[data-theme="light"] .mcp-connection-note {
  border-color: rgba(60, 65, 72, .15);
  background: rgba(60, 65, 72, .035);
}

[data-theme="light"] body[data-mcp-state="connected"]
  .mcp-connection-note {
  border-color: rgba(41, 145, 94, .17);
  background: rgba(41, 145, 94, .045);
}