/* FractAIll · LA BARRA DE MENÚ · como la de macOS: delgada, fija arriba, siempre ahí.
   El isotipo va donde iría la manzana; al lado, el agente en el que estás, en negrita;
   después, los demás agentes. La misma en todas las páginas del sistema. */
:root{ --fx-menu-alto:30px }

.fx-menu{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--fx-menu-alto);
  display:flex;align-items:center;gap:0;padding:0 10px 0 12px;
  background:rgba(10,11,13,.72);backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.07);
  font-family:var(--fx-sans);font-size:13px;color:#e8e8ec;user-select:none}

.fx-menu-iso{display:flex;align-items:center;height:100%;padding:0 11px 0 3px;flex:none}
.fx-menu-iso img{height:14px;width:auto;display:block;opacity:.95}
.fx-menu-iso:hover img{opacity:1}

.fx-menu a,.fx-menu button{display:inline-flex;align-items:center;height:21px;padding:0 10px;
  border:0;border-radius:5px;background:none;color:#e8e8ec;font:inherit;white-space:nowrap;
  transition:background var(--fx-rapido),color var(--fx-rapido)}
.fx-menu a:hover,.fx-menu button:hover{background:rgba(255,255,255,.14)}
.fx-menu .fx-menu-yo{font-weight:730;letter-spacing:-.01em}
.fx-menu .fx-menu-otros{display:flex;align-items:center;gap:0;color:#c9cad0}
.fx-menu .fx-menu-der{margin-left:auto;display:flex;align-items:center;gap:0;color:#9c9ea6}
.fx-menu .fx-menu-der a:hover{color:#fff}

/* el contenido no puede quedar debajo de la barra */
body.fx-con-menu{padding-top:var(--fx-menu-alto)}
/* la cabecera vieja de las páginas de herramienta sobra: la barra ya dice dónde estás */
body.fx-con-menu .topbar{display:none}
/* la navegación propia de la página se absorbe dentro de la barra: una sola, no dos */
body.fx-con-menu .nav{display:none}
.fx-menu .account{width:20px;height:20px;min-height:0;padding:0;margin-left:6px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06)}
.fx-menu .account svg{width:12px;height:12px}
/* el isotipo suelto de las páginas sobra: el de la barra manda y no se duplica */
body.fx-con-menu .marca,body.fx-con-menu .otros{display:none}
/* en pantalla completa de conversación, la barra manda sobre el telón */
body.fx-conversando .fx-menu{z-index:200}
body.fx-conversando .fx-salir{top:calc(var(--fx-menu-alto) + 10px)}
body.fx-conversando .fx-hilo{padding-top:calc(var(--fx-menu-alto) + 44px)}

@media(max-width:700px){
  .fx-menu .fx-menu-otros{display:none}
  .fx-menu-mas{display:inline-flex!important}
  .fx-menu-lista{position:fixed;top:var(--fx-menu-alto);left:8px;right:8px;z-index:199;
    display:none;flex-direction:column;padding:6px;border-radius:12px;
    border:1px solid rgba(255,255,255,.1);background:rgba(14,15,18,.97);
    backdrop-filter:blur(22px);box-shadow:0 22px 60px rgba(0,0,0,.6)}
  .fx-menu-lista.on{display:flex}
  .fx-menu-lista a{height:38px;padding:0 12px;color:#d8d9de}
}
@media(min-width:701px){ .fx-menu-mas{display:none!important} .fx-menu-lista{display:none!important} }