/* Network Topology: somente CSS interno do componente. */

/* Core acompanha o estado MCP; paleta dark preexistente preservada. */
.mt-core { cursor: pointer; color: inherit; text-align: left; font: inherit; }
.mt-core:hover,.mt-core:focus-visible { outline: none; border-color: #bbb; }
.mt-core-status { width: 6px; height: 6px; flex: 0 0 6px;
  border-radius: 50%; background: #858b96; }
.mt[data-mt-online="true"] .mt-core-status {
  background: #55d49a; box-shadow: 0 0 8px #55d49a60; }
.mt-core-actions { position: absolute; z-index: 4;
  left: 50%; top: calc(49% + 57px);
  transform: translateX(-50%); display: flex; gap: 5px; }
.mt-core-actions button { appearance: none; display: grid;
  place-items: center; width: 22px; height: 22px;
  padding: 3px; color: #909090; background: #171717;
  border: 1px solid #414141; border-radius: 6px; cursor: pointer; }
.mt-core-actions svg { width: 13px; height: 13px; fill: none;
  stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.mt-core-actions button:hover,.mt-core-actions button:focus-visible {
  color: #f4f4f4; border-color: #888; outline: none; }
.mt[data-mt-online="false"] .mt-core-actions { display: none; }
.mt-node--real strong,.mt-node--real small {
  overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mt-node--real span { min-width: 0; flex: 1; }
.mt-node--real[disabled] { pointer-events: none; }
html[data-theme="light"] .mt-core-actions button {
  background: #fff; color: #606b77; border-color: #c8ced7; }
html[data-theme="light"] .mt-core-actions button:hover,
html[data-theme="light"] .mt-core-actions button:focus-visible {
  color: #222; border-color: #8792a1; }
@media(max-width:700px) {
  .mt-core-actions { top: calc(49% + 47px); }
  .mt-core-actions button { width: 19px; height: 19px; }
  .mt-core-actions svg { width: 12px; height: 12px; }
}
/* Topologia real e estado ilustrativo. Nenhum estilo da Hero aqui. */
.mt-node--real,.mt-node--example {
  appearance: none;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.mt-node--real {
  transform: translate(-50%, -50%);
  max-width: 38%;
}
.mt-node--real:hover,.mt-node--example:hover,
.mt-node--real:focus-visible,.mt-node--example:focus-visible {
  border-color: #b9bdc5;
  box-shadow: 0 0 0 2px #ffffff20, 0 12px 25px #000a;
  outline: none;
}
.mt-node--real[disabled] {
  opacity: .5;
  cursor: default;
}
.mt-agent-state {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #737b87;
}
.mt-node--real[data-mt-available="true"] .mt-agent-state {
  background: #55d49a;
  box-shadow: 0 0 8px #55d49a60;
}
.mt[data-mesh-mode="example"] .mt-bar b { opacity: .75; }
.mt-node--example { padding: 12px 13px; }
html[data-theme="light"] .mt-node--real:hover,
html[data-theme="light"] .mt-node--example:hover,
html[data-theme="light"] .mt-node--real:focus-visible,
html[data-theme="light"] .mt-node--example:focus-visible {
  border-color: #7f8793;
  box-shadow: 0 0 0 2px #64748b24, 0 12px 24px #27324416;
}
.agent-card--topology-highlight {
  outline: 2px solid var(--launcher-accent, #ddd);
  outline-offset: -2px;
}
@media(max-width:700px) {
  .mt-node--real { max-width: 43%; gap: 5px; padding: 7px; }
  .mt-node--real strong { overflow: hidden; text-overflow: ellipsis; }
  .mt-node--real small { display: none; }
  .mt-node--example { padding: 7px; }
}
.mt,.mt *{box-sizing:border-box}
.mt{color-scheme:dark;color:#f4f4f4;background:#0d0d0d;border:1px solid #333;border-radius:17px;box-shadow:0 40px 80px #0009;overflow:hidden;min-width:0;width:min(100%,560px);justify-self:center;align-self:center;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;position:relative}
.mt-symbols{position:absolute;width:0;height:0;overflow:hidden}
.mt-bar{display:flex;align-items:center;gap:6px;height:42px;padding:0 14px;border-bottom:1px solid #272727;background:#131313}
.mt-bar i{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#414141}
.mt-bar span{margin-left:10px;color:#888;font:10px 'DM Mono',monospace;white-space:nowrap}
.mt-bar b{margin-left:auto;border:1px solid #383838;padding:4px 7px;border-radius:5px;color:#a7a7a7;font:9px 'DM Mono',monospace;white-space:nowrap}
.mt-network{position:relative;min-height:356px;display:flex;justify-content:center;align-items:center;overflow:hidden;background:#0d0d0d;background-image:radial-gradient(#ffffff13 1px,transparent 1px);background-size:22px 22px}
.mt-lines{position:absolute;inset:0;width:100%;height:100%}
.mt-node{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 13px;background:#181818;border:1px solid #414141;border-radius:10px;box-shadow:0 12px 25px #000a;z-index:2;min-width:130px}
.mt-node svg{width:19px;height:19px;flex:0 0 19px;fill:none;stroke:#ddd;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mt-node strong{display:block;font-size:10px;letter-spacing:-.02em;color:#f4f4f4;font-weight:700;white-space:nowrap}
.mt-node small{display:block;font:9px 'DM Mono',monospace;color:#898989;white-space:nowrap;margin-top:3px}
.mt-node--center{left:50%;top:49%;transform:translate(-50%,-50%);border-color:#8a8a8a;background:#222;padding:18px;min-width:160px}
.mt-node--top{left:7%;top:12%}
.mt-node--right{right:5%;top:15%}
.mt-node--bottom{left:9%;bottom:12%}
.mt-node--bottomright{right:7%;bottom:10%}
.mt-note{padding:11px 16px;border-top:1px solid #242424;display:flex;justify-content:space-between;color:#777;font:9px 'DM Mono',monospace;gap:10px}
.mt-note i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#d8d8d8;margin-right:7px}
@media(max-width:610px){.mt{width:100%}.mt-network{min-height:330px}.mt-node{min-width:0;gap:7px;padding:9px}.mt-node--center{padding:13px}.mt-node strong{font-size:9px}.mt-node small{font-size:8px}.mt-bar b{display:none}.mt-note{font-size:8px}}
@media(max-width:370px){.mt-node svg{display:none}.mt-node{padding:8px}}


/* Somente detalhes internos do componente nas larguras menores. */
@media (min-width: 701px) and (max-width: 1100px) {
  .mt-node { min-width: 0; padding: 9px; gap: 7px; }
  .mt-node--center { padding: 13px; }
  .mt-node strong { font-size: 9px; }
  .mt-node small { font-size: 8px; }
}
@media (max-width: 700px) {
  .mt-node { padding: 7px 9px; }
  .mt-node--center { padding: 10px; }
  .mt-node strong { font-size: 9px; }
  .mt-node small { font-size: 8px; }
  .mt-bar { height: 39px; }
  .mt-note { min-height: 34px; }
}
@media (max-width: 390px) {
  .mt-node { gap: 5px; }
  .mt-node strong { font-size: 8px; }
  .mt-node small { font-size: 7px; }
  .mt-node--top { left: 3%; }
  .mt-node--right { right: 3%; }
  .mt-node--bottom { left: 3%; }
  .mt-node--bottomright { right: 3%; }
}

/* Tema light somente: o conjunto de cores dark acima fica intacto. */
html[data-theme="light"] .mt {
  color-scheme: light;
  color: #202329;
  background: #f8f9fb;
  border-color: #cbd0d8;
  box-shadow: 0 24px 60px #23304420;
}
html[data-theme="light"] .mt-bar {
  background: #eff1f5;
  border-bottom-color: #d9dce3;
}
html[data-theme="light"] .mt-bar i { background: #a8adb7; }
html[data-theme="light"] .mt-bar span { color: #505765; }
html[data-theme="light"] .mt-bar b {
  color: #515967;
  border-color: #bbc1cb;
}
html[data-theme="light"] .mt-network {
  background-color: #f8f9fb;
  background-image: radial-gradient(#4b556324 1px, transparent 1px);
}
html[data-theme="light"] .mt-lines g { stroke: #818894; }
html[data-theme="light"] .mt-lines circle { stroke: #64748b24; }
html[data-theme="light"] .mt-node {
  background: #fff;
  border-color: #c8ced7;
  box-shadow: 0 12px 24px #27324416;
}
html[data-theme="light"] .mt-node--center {
  background: #e9edf3;
  border-color: #8f99a8;
}
html[data-theme="light"] .mt-node svg { stroke: #343b46; }
html[data-theme="light"] .mt-node strong { color: #202329; }
html[data-theme="light"] .mt-node small { color: #68717e; }
html[data-theme="light"] .mt-note {
  border-top-color: #d9dce3;
  color: #586171;
}
html[data-theme="light"] .mt-note i { background: #68717e; }